xref: /developtools/ace_js2bundle/ace-loader/src/loader-gen.js

/*
 * Copyright (c) 2021 Huawei Device Co., Ltd.
 * Licensed 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 {
  getNameByPath,
  getRequireString,
  stringifyLoaders,
  jsonLoaders,
  loadBabelModule
}
from './util'

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'),
  extgen: path.resolve(loaderPath, 'extgen.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)
  }
  loaders.push({
    name: defaultLoaders.extgen,
    query: {
      type: 'template'
    }
  })

  return stringifyLoaders(loaders)
}

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

function scriptLoaderString (loaders, config, customLoader) {
  if (process.env.DEVICE_LEVEL === 'card') {
    loaders = [{
      name: defaultLoaders.json
    }]
    if (customLoader) {
      loaders = loaders.concat(customLoader);
    }
    loaders.push({
      name: defaultLoaders.extgen,
      query: {
        type: 'json'
      }
    })
  } else {
    loaders = [{
      name: defaultLoaders.script
    }]
    if (customLoader) {
      loaders = loaders.concat(customLoader)
    } else {
      loaders.push({
        name: defaultLoaders.babel,
        query: {
          presets: [loadBabelModule('@babel/preset-env')],
          targets: 'node 8',
          plugins: [loadBabelModule('@babel/plugin-transform-modules-commonjs')],
          comments: 'false'
        }
      })
    }
  }
  return stringifyLoaders(loaders)
}

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

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

function codegenHmlAndCss() {
  const options = {
    lang: {
      sass:['sass-loader'],
      scss:['sass-loader'],
      less:['less-loader']
    }
  }
  const customLang = options.lang || {}
  const loaderQuery = loaderUtils.getOptions(this) || {}
  const isElement = loaderQuery.element
  const resourceQuery = this.resourceQuery && loaderUtils.parseQuery(this.resourceQuery) || {}
  const isEntry = resourceQuery.entry
  let output = ''
  let jsFileName = this.resourcePath.replace(process.env.aceSuperVisualPath, process.env.projectPath)
  jsFileName = jsFileName.substr(0, jsFileName.length - 6) + 'js';

  if (process.env.DEVICE_LEVEL === 'card') {
    output = '//card_start\n'
    output += `var card_template =` + getRequireString(this,
      jsonLoaders('template', undefined, true, 'template'), this.resourcePath)
    output += `var card_style =` + getRequireString(this,
      jsonLoaders('style', undefined, true, 'style'), this.resourcePath)
    output += `var card_json =` + getRequireString(this,
      jsonLoaders('json', undefined, true, 'json'), this.resourcePath)
    output += '\n//card_end'
  } else {
    const that = this
    output = 'var $app_script$ = ' + generateOutput(that, 'script', jsFileName, isElement)
    output += 'var $app_template$ = ' + generateOutput(that, 'template', jsFileName, isElement)
    output += 'var $app_style$ = ' + generateOutput(that, 'style', jsFileName, isElement)
    output += generateOutput(that, 'others', jsFileName, isElement)
    if (isEntry) {
      output += `$app_bootstrap$('@app-component/${getNameByPath(this.resourcePath)}'`
        + ',undefined' + ',undefined' + `)`
    }
  }
  return output
}

function generateOutput(that, type, jsFileName, isElement, customLang) {
  let result
  switch (type) {
    case 'script':
      result = getRequireString(that, getLoaderString('script', {
        customLang,
        lang: undefined,
        element: undefined,
        elementName: undefined,
        source: jsFileName
      }), jsFileName)
      break
    case 'template':
      result = getRequireString(that, getLoaderString('template', {
        customLang,
        lang: undefined,
        element: isElement,
        elementName: undefined,
        source: that.resourcePath
      }), that.resourcePath)
      break
    case 'style':
      result = getRequireString(that, getLoaderString('style', {
        customLang,
        lang: undefined,
        element: isElement,
        elementName: undefined,
        source: that.resourcePath
      }), that.resourcePath)
      break
    case 'others':
      result = `
      $app_define$('@app-component/${getNameByPath(that.resourcePath)}', [],
        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
      }
      ` + `
      $app_module$.exports.template = $app_template$
      ` + `
      $app_module$.exports.style = $app_style$
      ` + `
      })
      `
      break
  }
  return result
}

module.exports = codegenHmlAndCss