xref: /third_party/weex-loader/src/loader.js

/*
 * Licensed to the Apache Software Foundation (ASF) under one
 * or more contributor license agreements.  See the NOTICE file
 * distributed with this work for additional information
 * regarding copyright ownership.  The ASF licenses this file
 * to you under the Apache License, Version 2.0 (the
 * "License"); you may not use this file except in compliance
 * with the License.  You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing,
 * software distributed under the License is distributed on an
 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
 * KIND, either express or implied.  See the License for the
 * specific language governing permissions and limitations
 * under the License.
 */

import loaderUtils from 'loader-utils'
import path from 'path'
import fs from 'fs'

import * as legacy from './legacy'
import {
  parseFragment
}
from './parser'
import {
  getNameByPath,
  getRequireString,
  stringifyLoaders,
  logWarn,
  loadBabelModule,
  elements
}
from './util'
import { isReservedTag } from './templater/component_validator'

const { DEVICE_LEVEL } = require('./lite/lite-enum')
const loaderPath = __dirname
const defaultLoaders = {
  none: '',
  main: path.resolve(loaderPath, 'loader.js'),
  template: path.resolve(loaderPath, 'template.js'),
  style: path.resolve(loaderPath, 'style.js'),
  script: path.resolve(loaderPath, 'script.js'),
  json: path.resolve(loaderPath, 'json.js'),
  babel: loadBabelModule('babel-loader'),
  manifest: path.resolve(loaderPath, 'manifest-loader.js'),
  resourceReferenceScript: path.resolve(loaderPath, 'resource-reference-script.js')
}

function getLoaderString (type, config) {
  config = config || {}
  const customLoader = loadCustomLoader(config)
  let loaders
  switch (type) {
    case 'main':
      return mainLoaderString(loaders)
    case 'element':
      return elementLoaderString(loaders, config)
    case 'template':
      return templateLoaderString(loaders, config, customLoader)
    case 'style':
      return styleLoaderString(loaders, config, customLoader)
    case 'script':
      return scriptLoaderString(loaders, config, customLoader)
    case 'config':
      return configLoaderString(loaders, config)
    case 'data':
      return dataLoaderString(loaders, config)
  }
}

function loadCustomLoader (config) {
  if (config.lang && config.customLang[config.lang]) {
    return loadBabelModule(config.customLang[config.lang][0])
  }
}

function mainLoaderString (loaders) {
  loaders = [{
    name: defaultLoaders.main
  }]
  return stringifyLoaders(loaders)
}

function elementLoaderString (loaders, config) {
  loaders = [{
    name: defaultLoaders.main,
    query: {
      element: config.source ? undefined : true
    }
  }]
  return stringifyLoaders(loaders)
}

function templateLoaderString (loaders, config, customLoader) {
  loaders = [{
    name: defaultLoaders.json
  }, {
    name: defaultLoaders.template
  }]
  if (customLoader) {
    loaders = loaders.concat(customLoader)
  }
  return stringifyLoaders(loaders)
}

function styleLoaderString (loaders, config, customLoader) {
  loaders = [{
    name: defaultLoaders.json
  }, {
    name: defaultLoaders.style
  }]
  if (customLoader) {
    loaders = loaders.concat(customLoader)
  }
  return stringifyLoaders(loaders)
}

function scriptLoaderString (loaders, config, customLoader) {
  loaders = [{
    name: defaultLoaders.script
  }]
  if (customLoader) {
    loaders = loaders.concat(customLoader)
  }
  else {
    const isTargets = {
      'extends': path.resolve(__dirname, "../babel.config.js")
    }
    if (process.env.DEVICE_LEVEL === DEVICE_LEVEL.RICH) {
      isTargets['targets'] = 'node 8';
    }
    loaders.push({
      name: defaultLoaders.babel,
      query: isTargets,
    })
    loaders.push({
      name: defaultLoaders.resourceReferenceScript
    })
  }
  if (config.app && process.env.abilityType === 'page' &&
    fs.existsSync(process.env.aceManifestPath)) {
    loaders.push({
      name: defaultLoaders.manifest,
      query: {
        path: config.source
      }
    })
  }
  return stringifyLoaders(loaders)
}

function configLoaderString (loaders, config) {
  loaders = [{
    name: defaultLoaders.json
  }]
  return stringifyLoaders(loaders)
}

function dataLoaderString (loaders, config) {
  loaders = [{
    name: defaultLoaders.json
  }]
  return stringifyLoaders(loaders)
}

function loader (source) {
  this.cacheable && this.cacheable()

  const options = {
    lang: {
      sass:['sass-loader'],
      scss:['sass-loader'],
      less:['less-loader']
    }
  }
  const customLang = options.lang || {}
  const resourceQuery = this.resourceQuery && loaderUtils.parseQuery(this.resourceQuery) || {}
  const isEntry = resourceQuery.entry
  const dirName = path.parse(this.resourcePath)
  const name = isEntry ? dirName.name : resourceQuery.name || getNameByPath(this.resourcePath)
  let parentPath = resourceQuery.parentPath || this.resourcePath;
  if (isEntry) {
    elements[this.resourcePath] = elements[this.resourcePath] || {};
    elements[this.resourcePath][name] = true;
  } else {
    elements[this.resourcePath] = elements[this.resourcePath] || {};
    elements[this.resourcePath]["parent"] = parentPath;
    if (elements[parentPath] && elements[parentPath]["parent"]) {
      elements[this.resourcePath]["parent"] = elements[elements[parentPath]["parent"]];
      parentPath = elements[this.resourcePath]["parent"];
    }
  }
  if (isReservedTag(name) && process.env.abilityType === 'page') {
    logWarn(this, [{
      reason: 'ERROR: The file name cannot contain reserved tag name: ' + name
    }])
    return ''
  }
  let output = ''
  //  import app.js
  output += loadApp(this, name, isEntry, customLang, source)
  output += loadPage(this, name, isEntry, customLang, source, parentPath);
  return output
}

function checkApp(_this) {
  if (process.env.abilityType === 'testrunner') {
    return true;
  }
  return _this.resourcePath === path.resolve(process.env.projectPath,
    process.env.abilityType === 'page' ? 'app.js' : `${process.env.abilityType}.js`)
}

function loadApp (_this, name, isEntry, customLang, source) {
  let output = ''
  let extcss = false
  if (checkApp(_this)) {
    const filename = _this.resourcePath.replace(path.extname(_this.resourcePath).toString(), '')
     // find css
    const cssFileName = filename + '.css'
    if (!fs.existsSync(cssFileName)) {
      extcss = false
    }
    else {
      extcss = true
      output += 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', {
        customLang,
        lang: undefined,
        element: undefined,
        elementName: undefined,
        source: cssFileName
      }), cssFileName)
    }
    output += 'var $app_script$ = ' + getRequireString(_this, getLoaderString('script', {
      customLang,
      lang: undefined,
      element: undefined,
      elementName: undefined,
      source: _this.resourcePath,
      app: true
    }), _this.resourcePath)

    if (process.env.DEVICE_LEVEL === DEVICE_LEVEL.RICH || process.env.DEVICE_LEVEL === 'card') {
      output += `
      $app_define$('@app-application/${name}', [], function($app_require$, $app_exports$, $app_module$) {
      ` + `
      $app_script$($app_module$, $app_exports$, $app_require$)
      if ($app_exports$.__esModule && $app_exports$.default) {
        $app_module$.exports = $app_exports$.default
      }
      ` + (extcss ? `
      $app_module$.exports.style = $app_style$
      ` : '')
      + `
      })
      `
      if (isEntry) {
        output += `$app_bootstrap$('@app-application/${name}'` + ',undefined' + ',undefined' + `)`
      }
    }
    if (process.env.DEVICE_LEVEL === DEVICE_LEVEL.LITE) {
      output += `var options=$app_script$\n if ($app_script$.__esModule) {\n
        options = $app_script$.default;\n }\n` +
      (extcss ? `options.styleSheet=$app_style$\n` : ``) +
      `module.exports=new ViewModel(options);`
    }
    return output
  } else if (/\.js$/.test(_this.resourcePath)) {
    return source
  } else {
    return output
  }
}

function loadPage (_this, name, isEntry, customLang, source, parentPath) {
  let output = ''
  if (path.extname(_this.resourcePath).match(/\.hml/)) {
    const filename = _this.resourcePath.replace(path.extname(_this.resourcePath).toString(), '')
    const resourcePath = _this.resourcePath
    const loaderQuery = loaderUtils.getOptions(_this) || {}
    const isElement = loaderQuery.element
    const frag = parseFragment(source)
    const elementNames = []
    const elementLength = frag.element.length
    output += loadPageCheckElementLength(_this, elementLength, frag, elementNames, resourcePath,
      customLang, parentPath);

    output += 'var $app_template$ = ' + getRequireString(_this, getLoaderString('template', {
      customLang,
      lang: undefined,
      element: isElement,
      elementName: isElement ? name : undefined,
      source: _this.resourcePath
    }), _this.resourcePath)

    // find css
    const cssContent = loadPageFindCss(_this, filename, customLang)
    const extcss = cssContent.extcss
    output += cssContent.output

    // find js
    const scriptContent = loadPageFindJs(_this, filename, customLang)
    const extscript = scriptContent.extscript
    output += scriptContent.output

    output += process.env.DEVICE_LEVEL === DEVICE_LEVEL.RICH ? loadPageCheckRich(name, extscript, extcss, isEntry) :
      loadPageCheckLite(extscript, extcss)
    return output
  }
  return output
}

function loadPageCheckElementLength (_this, elementLength, frag, elementNames, resourcePath,
  customLang, parentPath) {
  let output = ''
  if (elementLength) {
    for (let i = 0; i < elementLength; i++) {
      const element = frag.element[i]
      let src = resourcePath
      if (element.src) {
        src = element.src
        if (!src.match(/\.hml$/)) {
          src = src.concat('.hml')
        }
        const filePath = path.join(path.dirname(resourcePath), src)
        if (!fs.existsSync(filePath) && src.match(/^(\/|\.)/)) {
          logWarn(_this, [{
            reason: 'ERROR: The file path of custom element does not exist, src: ' + src
          }])
          return ''
        }
        if (!element.name) {
          element.name = path.parse(src).name
        }
        element.name = element.name.toLowerCase();
        elements[parentPath] = elements[parentPath] || {};
        if (elements[parentPath][element.name]) {
          logWarn(_this, [{
            reason: `ERROR: The element name can not be same with the page ` +
              `"${element.name}" (ignore case).`
          }]);
        } else {
          elements[parentPath][element.name] = true;
        }
        checkEntry(_this, filePath, element.src)
      }
      else {
        logWarn(_this, [{
          reason: 'ERROR: src attributes must be set for custom elements.'
        }])
        return ''
      }
      elementNames.push(element.name)
      output += getRequireString(_this, getLoaderString('element', {
        customLang,
        name: element.name,
        source: src
      }), `${src}?name=${element.name}&parentPath=${parentPath}`)
    }
  }
  return output
}

function loadPageFindCss (_this, filename, customLang) {
  let output = ''
  let extcss = false
  const cssFileName = filename + '.css'
  if (fs.existsSync(cssFileName)) {
    extcss = true
    output = 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', {
      customLang,
      lang: undefined,
      element: undefined,
      elementName: undefined,
      source: cssFileName
    }), cssFileName)
  }
  else {
    // find less
    const lessFileName = filename + '.less'
    if (fs.existsSync(lessFileName)) {
      extcss = true
      output = 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', {
        customLang,
        lang: 'less',
        element: undefined,
        elementName: undefined,
        source: lessFileName
      }), lessFileName)
    }
    else {
      // find scss
      const scssFileName = filename + '.scss'
      if (fs.existsSync(scssFileName)) {
        extcss = true
        output = 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', {
          customLang,
          lang: 'scss',
          element: undefined,
          elementName: undefined,
          source: scssFileName
        }), scssFileName)
      }
      else {
        // find sass
        const sassFileName = filename + '.sass'
        if (fs.existsSync(sassFileName)) {
          extcss = true
          output = 'var $app_style$ = ' + getRequireString(_this, getLoaderString('style', {
            customLang,
            lang: 'sass',
            element: undefined,
            elementName: undefined,
            source: sassFileName
          }), sassFileName)
        }
        else {
          extcss = false
        }
      }
    }
  }
  return {
    extcss: extcss,
    output: output
  }
}

function loadPageFindJs (_this, filename, customLang) {
  let output = ''
  let extscript = false
  const jsFileName = filename + '.js'
  if (!fs.existsSync(jsFileName)) {
    extscript = false
    console.log('missing ' + jsFileName)
  }
  else {
    extscript = true
    output = 'var $app_script$ = ' + getRequireString(_this, getLoaderString('script', {
      customLang,
      lang: undefined,
      element: undefined,
      elementName: undefined,
      source: jsFileName
    }), jsFileName)
  }
  return {
    extscript: extscript,
    output: output
  }
}

function loadPageCheckRich (name, extscript, extcss, isEntry) {
  let output = ''
  output += `
$app_define$('@app-component/${name}', [], function($app_require$, $app_exports$, $app_module$) {
` + (extscript ? `
$app_script$($app_module$, $app_exports$, $app_require$)
if ($app_exports$.__esModule && $app_exports$.default) {
$app_module$.exports = $app_exports$.default
}
` : '') + `
$app_module$.exports.template = $app_template$
` + (extcss ? `
$app_module$.exports.style = $app_style$
` : '') + `
})
`
  if (isEntry) {
    output += `$app_bootstrap$('@app-component/${name}'` + ',undefined' + ',undefined' + `)`
  }
  return output
}

function loadPageCheckLite (extscript, extcss) {
  return (extscript ? `var options=$app_script$\n if ($app_script$.__esModule) {\n
      options = $app_script$.default;\n }\n` : `var options={}\n`) +
    (extcss ? `options.styleSheet=$app_style$\n` : ``) +
    `options.render=$app_template$;\nmodule.exports=new ViewModel(options);`
}

for (const key in legacy) {
  loader[key] = legacy[key]
}

function checkEntry(_this, filePath, elementSrc) {
  if (_this._compilation.entries) {
    for (var key of _this._compilation.entries.keys()) {
      const entryPath = path.join(path.resolve(process.env.projectPath), key + '.hml');
      if (entryPath === filePath) {
        logWarn(_this, [{
          reason: `WARNING: The page "${elementSrc}" configured in 'config.json'` +
            ` can not be uesd as a custom component.` +
            `To ensure that the debugging function is normal, please delete this page in 'config.json'.`
        }]);
      }
    }
  }
}

module.exports = loader