lihong67@huawei.com

update card compiler

Signed-off-by: lihong <lihong67@huawei.com>
Change-Id: Id80b146b81fa219d5935b290b2a8baa3157fcb1b

ace-loader/main.product.js

@@ -74,7 +74,19 @@ function addPageEntryObj(manifest, projectPath) {
     throw Error('ERROR: missing pages').message;
   }
   pages.forEach((element) => {
-    entryObj['./' + element] = projectPath + path.sep + element + '.hml?entry'
+    const sourcePath = element;
+    const hmlPath = path.join(projectPath, sourcePath + '.hml');
+    const aceSuperVisualPath = process.env.aceSuperVisualPath || '';
+    const visualPath = path.join(aceSuperVisualPath, sourcePath + '.visual');
+    const isHml = fs.existsSync(hmlPath);
+    const isVisual = fs.existsSync(visualPath);
+    if (isHml && isVisual) {
+      throw Error(red + 'ERROR: ' + sourcePath + ' cannot both have hml && visual').message;
+    } else if (isHml) {
+      entryObj['./' + element] = hmlPath + '?entry';
+    } else if (isVisual) {
+      entryObj['./' + element] = visualPath + '?entry';
+    }
   })
   return entryObj;
 }

ace-loader/plugin/templater/bind.js

@@ -63,7 +63,7 @@ function parseExp(value, functionFlag, isValue, out, nodeLoc) {
       out.log.push({
         line: nodeLoc.line || 1,
         column: nodeLoc.col || 1,
-        reason: 'ERROR: The variable concatenation is not supported in card (supproted later).',
+        reason: 'ERROR: Variable concatenation is not supported currently.',
       })
     }
   }
@@ -175,14 +175,14 @@ function checkCard(value, out, nodeLoc) {
       out.log.push({
         line: nodeLoc.line || 1,
         column: nodeLoc.col || 1,
-        reason: `ERROR: The expression '${value}' is not supported in card (only support a single variable in the verion).`
+        reason: `ERROR: Version 5: The expression '${value}' is not supported. Only single variables are supported.`
       })
     } else if (!checkCardVersionLimit() && !checkExpression(value)) {
       out.log.push({
         line: nodeLoc.line || 1,
         column: nodeLoc.col || 1,
-        reason: `ERROR: The expression '${value}' is not supported in card (only support the binocular expression, ` +
-          `OR expression, AND expression and NOT expression).`
+        reason: `ERROR: Version 6 and above: The expression '${value}' is not supported. Only the binocular expression, ` +
+          `OR expression, AND expression and NOT expression are supported.`
       })
     }
   }

ace-loader/plugin/templater/component_validator.js

@@ -1114,7 +1114,7 @@ function validateAttr(resourcePath, attrName, attrValue, out, tagName, nodeLoc,
     out.log.push({
       line: nodeLoc.line,
       column: nodeLoc.col,
-      reason: `ERROR: The 'tid' cannot support the expression.`
+      reason: `ERROR: The 'tid' does not support the expression.`
     })
   }
   if (attrName === 'value') {

ace-loader/plugin/templater/index.js

@@ -220,7 +220,7 @@ function checkAttrFor(node, attributes, pos) {
       compileResult.log.push({
         line: pos.line || 1,
         column: pos.col || 1,
-        reason: `WARNING: The 'tid' is recommended to use here.`,
+        reason: `WARNING: The 'tid' is recommended here.`,
       })
     }
     if (ifExists) {
@@ -242,7 +242,7 @@ function checkAttrFor(node, attributes, pos) {
       compileResult.log.push({
         line: pos.line || 1,
         column: pos.col || 1,
-        reason: `ERROR: The nested 'for' is not support.`,
+        reason: `ERROR: The nested 'for' is not supported.`,
       })
     }
   }

ace-loader/src/card-loader.js

@@ -35,11 +35,11 @@ function loader(source) {
   const customLang = options.lang || {}
   const resourcePath = this.resourcePath
   const fileName = resourcePath.replace(path.extname(resourcePath).toString(), '')
-  let output = ''
-  output = getRequireString(this, jsonLoaders('template'), resourcePath)
+  let output = '//card_start\n'
+  output += 'var card_template =' + getRequireString(this, jsonLoaders('template'), resourcePath)
   const styleInfo = findStyleFile(fileName)
   if (styleInfo.extStyle == true) {
-    output += getRequireString(this, jsonLoaders('style', customLang[styleInfo.type]), styleInfo.styleFileName)
+    output += 'var card_style =' + getRequireString(this, jsonLoaders('style', customLang[styleInfo.type]), styleInfo.styleFileName)
   }
   output = addJson(this, output, fileName, '')
 
@@ -84,16 +84,18 @@ function loader(source) {
         nameSet.add(customElementName)
       }
       const compFileName = compResourcepath.replace(path.extname(compResourcepath).toString(), '')
-      output += getRequireString(this, jsonLoaders('template'),
+      const elementLastName = path.basename(compResourcepath).replace(path.extname(compResourcepath).toString(), '')
+      output += `var card_element_template_${elementLastName} =` + getRequireString(this, jsonLoaders('template'),
         compResourcepath + `?${customElementName}#${fileName}`)
       const compStyleInfo = findStyleFile(compFileName)
       if (compStyleInfo.extStyle == true) {
-        output += getRequireString(this, jsonLoaders('style', customLang[compStyleInfo.type]),
+        output += `var card_element_style_${elementLastName} =` + getRequireString(this, jsonLoaders('style', customLang[compStyleInfo.type]),
           compStyleInfo.styleFileName + `?${customElementName}#${fileName}`)
       }
-      output = addJson(this, output, compFileName, `?${customElementName}#${fileName}`)
+      output = addJson(this, output, compFileName, `?${customElementName}#${fileName}`, elementLastName)
     })
   }
+  output = output + '\n//card_end'
   return output
 }
 
@@ -128,22 +130,23 @@ function findStyleFile (fileName) {
   return {extStyle: extStyle, styleFileName: styleFileName, type: type}
 }
 
-function addJson(_this, output, fileName, query) {
+function addJson(_this, output, fileName, query, elementLastName) {
+  const content = `${elementLastName ? 'var card_element_json_' + elementLastName : 'var card_json'} =`
   if (fs.existsSync(fileName + '.json') && !fs.existsSync(fileName + '.js')) {
-    output += getRequireString(_this, jsonLoaders('json'), fileName + '.json' + query)
+    output += content + getRequireString(_this, jsonLoaders('json'), fileName + '.json' + query)
   } else if (fs.existsSync(fileName + '.js') && !fs.existsSync(fileName + '.json')) {
     logWarn(_this, [{
       reason: `WARNING: The JS file '${fileName}.js' will be discarded in future version, ` +
         `use the JSON file '${fileName}.json' instead.`,
     }])
-    output += getRequireString(_this, jsonLoaders('json'), fileName + '.js' + query)
+    output += content + getRequireString(_this, jsonLoaders('json'), fileName + '.js' + query)
   } else if (fs.existsSync(fileName + '.json') && fs.existsSync(fileName + '.js')) {
     logWarn(_this, [{
       reason: `WARNING: '${fileName}' cannot have the same name files '.json' and '.js', otherwise '.json' in default.`,
     }])
-    output += getRequireString(_this, jsonLoaders('json'), fileName + '.json' + query)
+    output += content + getRequireString(_this, jsonLoaders('json'), fileName + '.json' + query)
   }
   return output
 }
 
-module.exports = loader
+module.exports = loader

ace-loader/src/cardJson-plugin.js

@@ -13,71 +13,220 @@
  * limitations under the License.
  */
 
-const fs = require('fs')
 const path = require('path')
-
-let output = ''
-const initIndexJSONObject = { "template": {}, "styles": {}, "actions": {},"data":{} }
-
-function compileJson(compiler, type, filePath, content, contentType, elementType) {
-  compiler.hooks.done.tap(type + contentType, () => {
-    if (type === 'init') {
-      writeFileSync(filePath, initIndexJSONObject)
-    } else {
-      writeFileSync(filePath, content, contentType, elementType)
-    }
-  })
-}
-
-function writeFileSync(filePath, content, contentType, elementType) {
-  if (!fs.existsSync(filePath)) {
-    fs.writeFileSync(filePath, stringify(content))
-  } else {
-    const fileContent = fs.readFileSync(filePath, {encoding:'utf-8'})
-    try {
-      const jsonContent = JSON.parse(fileContent)
-      if (contentType && !elementType) {
-        jsonContent[contentType] = content ? content : {}
-        fs.writeFileSync(filePath, stringify(jsonContent))
-      } else if (contentType && elementType) {
-        if (!jsonContent[contentType]) {
-          jsonContent[contentType] = {}
-        }
-        jsonContent[contentType][elementType] = content ? content : {}
-        fs.writeFileSync(filePath, stringify(jsonContent))
-      }
-    } catch (e) {
-      fs.writeFileSync(filePath, stringify(initIndexJSONObject))
-      writeFileSync(filePath, content, contentType)
-    }
-  }
-}
-
-function stringify (jsonObect) {
-  return JSON.stringify(jsonObect, null, 2)
-}
+const { Compilation } = require('webpack')
 
 class AfterEmitPlugin {
-  constructor(output_) {
-    output = output_
+  constructor() {
   }
 
   apply(compiler) {
-    compiler.hooks.afterEmit.tap('delete', (compilation) => {
-      const assets = compilation.assets
-      const keys = Object.keys(assets)
-      keys.forEach(key => {
-        if (fs.existsSync(path.resolve(output, key))) {
-          if (key.indexOf('i18n') !== 0) {
-            fs.unlinkSync(path.resolve(output, key))
-          }
+    compiler.hooks.thisCompilation.tap('card', (compilation) => {
+      compilation.hooks.processAssets.tapAsync(
+        {
+          name: 'MyPlugin',
+          stage: Compilation.PROCESS_ASSETS_STAGE_REPOR,
+        },
+        (assets, back) => {
+          const keys = Object.keys(assets)
+          keys.forEach(key => {
+            sourceChange(key, assets, compilation);
+          });
+          back && back();
         }
-      })
+      );
     })
   }
 }
 
-module.exports = {
-  compileJson: compileJson,
-  AfterEmitPlugin: AfterEmitPlugin
+function sourceChange(key, assets, compilation) {
+  try {
+    const extName = path.extname(key);
+    if (extName === '.js') {
+      const jsonOut = {};
+      const source = assets[key].source();
+      const str = source.match(/card_start((\s||\S)*)card_end/)[1];
+      const arrary = str.split('\n');
+      arrary.forEach(element => {
+        elementChange(element, source, jsonOut);
+      });
+      const assetReplace = {};
+      Object.keys(jsonOut).forEach(function (jsonOutKey) {
+        toAddJson(assetReplace, jsonOutKey, JSON.parse(jsonOut[jsonOutKey]), compilation, path.join(process.env.projectPath, key));
+      });
+      assets[key.replace(extName, '') + '.json'] = {
+        source: function () {
+          return JSON.stringify(assetReplace, null, 2);
+        },
+        size: function () {
+          return JSON.stringify(assetReplace, null, 2).size;
+        }
+      }
+      delete assets[key];
+    }
+  } catch (e) {
+    compilation.errors.push({ message: 'errorStartERROR File：' + key + 
+      '\n' + ` ${e.message}` + 'errorEnd' });
+  }
 }
+
+function elementChange(element, source, jsonOut) {
+  if (element.trim() === '' || element.trim() === '//') {
+  } else {
+    const key = element.match(/var ((\s||\S)*) =/)[1];
+    const value = element.match(/"((\s||\S)*)"/)[1];
+    const replaceSource = source.replace(element, '').toString();
+    const partStart = replaceSource.indexOf(value);
+    const subSource = replaceSource.substr(partStart);
+    const partEnd = subSource.indexOf('/***/ })');
+    let out = subSource.substr(0, partEnd).match(/module\.exports \= ((\s||\S)*)/)[1].trim();
+    if (out.indexOf('JSON.parse(') === 0) {
+      out = JSON.stringify(eval(out));
+    }
+    if (out.substr(out.length - 1, 1) === ';') {
+      out = out.substr(0, out.length - 1);
+    }
+    jsonOut[key] = out;
+  }
+}
+
+function toAddJson(assetReplace, key, value, compilation, sourceKey) {
+  assetReplace['template'] = assetReplace['template'] || {};
+  assetReplace['styles'] = assetReplace['styles'] || {};
+  assetReplace['data'] = assetReplace['data'] || {};
+  assetReplace['actions'] = assetReplace['actions'] || {};
+  assetReplace['apiVersion'] = assetReplace['apiVersion'] || {};
+  
+  switch(key) {
+    case 'card_template':
+      assetReplace['template'] = value;
+      break;
+    case 'card_style':
+      assetReplace['styles'] = value;
+      break;
+    case 'card_json':
+      if (value) {
+        if (value.data) {
+          assetReplace['data'] = validateData(value.data, compilation, sourceKey);
+        }
+        if (value.actions) {
+          assetReplace['actions'] = processActions(value.actions, compilation, sourceKey);
+        }
+        if (value.apiVersion) {
+          assetReplace['apiVersion'] = validateData(value.apiVersion, compilation, sourceKey);
+        }
+        if (value.props) {
+          assetReplace['props'] = replacePropsArray(value.propsValue, compilation, sourceKey);
+        }
+      }
+      break;
+    default:
+      addElement(assetReplace, key, value, compilation, sourceKey);
+      break;
+  }
+}
+
+function addElement(assetReplace, key, value, compilation, sourceKey) {
+  const keyName = key.substr(key.lastIndexOf('_') + 1, key.length - key.lastIndexOf('_') + 1);
+  assetReplace[keyName] = assetReplace[keyName] || {};
+  assetReplace[keyName]['template'] = assetReplace[keyName]['template'] || {};
+  assetReplace[keyName]['styles'] = assetReplace[keyName]['styles'] || {};
+  assetReplace[keyName]['data'] = assetReplace[keyName]['data'] || {};
+  assetReplace[keyName]['actions'] = assetReplace[keyName]['actions'] || {};
+  assetReplace[keyName]['apiVersion'] = assetReplace[keyName]['apiVersion'] || {};
+
+  switch(key.replace(keyName, '')) {
+    case 'card_element_template_':
+      assetReplace[keyName]['template'] = value;
+      break;
+    case 'card_element_style_':
+      assetReplace[keyName]['styles'] = value;
+      break;
+    case 'card_element_json_':
+      if (value) {
+        if (value.data) {
+          assetReplace[keyName]['data'] = validateData(value.data, compilation, sourceKey);
+        }
+        if (value.actions) {
+          assetReplace[keyName]['actions'] = processActions(value.actions, compilation, sourceKey);
+        }
+        if (value.apiVersion) {
+          assetReplace[keyName]['apiVersion'] = validateData(value.apiVersion, compilation, sourceKey);
+        }
+        if (value.props) {
+          assetReplace[keyName]['props'] = replacePropsArray(value.propsValue, compilation, sourceKey);
+        }
+      }
+      break;
+    default:
+      break;
+  }
+}
+
+function replacePropsArray(propsValue, _this, key) {
+  if (!propsValue) {
+    return propsValue;
+  }
+  if (Array.isArray(propsValue)) {
+    const propsObject = {};
+    propsValue.forEach(item => {
+      if (typeof(item) !== 'string') {
+        _this.warnings.push({message: 'warnStartWARNING File：' + key +
+          '\n' + `The props value type should be 'string', not '${typeof(item)}' in props array in custom elements.` + 'warnEnd'});
+      }
+      propsObject[item] = { 'default': '' };
+    });
+    propsValue = propsObject;
+  } else if (Object.prototype.toString.call(propsValue) === '[object Object]') {
+    Object.keys(propsValue).forEach(item => {
+      if (Object.prototype.toString.call(propsValue[item]) !== '[object Object]') {
+        _this.warnings.push({message: 'warnStartWARNING File：' + key +
+          '\n' + 'The props default value type can only be Object in custom elements.' + 'warnEnd'});
+      }
+      if (!propsValue[item].hasOwnProperty('default')) {
+        propsValue[item] = { 'default': '' }
+      }
+    });
+  } else {
+    _this.warnings.push({message: 'warnStartWARNING File：' + key +
+      '\n' + 'The props type can only be Array or Object in custom elements.' + 'warnEnd'});
+  }
+  return propsValue;
+}
+
+function processActions(actionsValue, _this, key) {
+  if (Object.prototype.toString.call(actionsValue) === '[object Object]') {
+    Object.keys(actionsValue).forEach(item => {
+      if (actionsValue[item].method) {
+        if (typeof(actionsValue[item].method) === 'string') {
+          if (actionsValue[item].method.toLowerCase() !== actionsValue[item].method) {
+            _this.warnings.push({message: 'warnStartWARNING File：' + key +
+              '\n' + `WARNING: The key method '${actionsValue[item].method}' in the actions don't support uppercase letters.` + 'warnEnd'});
+            actionsValue[item].method = actionsValue[item].method.toLowerCase();
+          }
+        } else {
+          _this.warnings.push({message: 'warnStartWARNING File：' + key +
+            '\n' + `WARNING: The key method type in the actions should be 'string', not '${typeof(actionsValue[item].method)}'.` + 'warnEnd'});
+        }
+      }
+    })
+  } else {
+    if (actionsValue) {
+      _this.warnings.push({message: 'warnStartWARNING File：' + key +
+        '\n' + 'WARNING: The actions value type can only be Object.' + 'warnEnd'});
+    }
+  }
+  return actionsValue;
+}
+
+function validateData(dataValue, _this, key) {
+  if (dataValue && Object.prototype.toString.call(dataValue) !== '[object Object]') {
+    _this.warnings.push({message: 'warnStartWARNING File：' + key +
+      '\n' + 'WARNING: The data value type can only be Object.' + 'warnEnd'});
+  }
+  return dataValue;
+}
+
+module.exports = {
+  AfterEmitPlugin: AfterEmitPlugin
+}

ace-loader/src/extgen.js

@@ -17,22 +17,31 @@
  * under the License.
  */
 
-import loaderUtils from 'loader-utils'
+import loaderUtils from 'loader-utils';
+
 const codegen = require("./codegen/index.js");
 
 module.exports = function (source, map) {
-  this.cacheable && this.cacheable()
-  const callback = this.async()
-
-  const hmlCss = codegen.genHmlAndCss(source);
-  const loaderQuery = loaderUtils.getOptions(this) || {}
-  if (hmlCss.errorType && hmlCss.errorType !== '' && loaderQuery.type === 'template') {
-    callback(hmlCss.errorType + ' : ' + hmlCss.errorMessage, '')
+  this.cacheable && this.cacheable();
+  const callback = this.async();
+  if (process.env.DEVICE_LEVEL === 'card') {
+    codegen = require('./codegen/card-index.js');
+  }
+  const parsed = codegen.genHmlAndCss(source);
+  const loaderQuery = loaderUtils.getOptions(this) || {};
+  if (parsed.errorType && parsed.errorType !== '') {
+    callback(parsed.errorType + ' : ' + parsed.errorMessage, '');
   } else {
-    if(loaderQuery.type === 'template') {
-      callback(null, hmlCss.hmlCss.hml, map)
-    } else {
-      callback(null, hmlCss.hmlCss.css, map)
+    switch (loaderQuery.type) {
+      case 'template':
+        callback(null, parsed.hmlCss.hml, map);
+        break;
+      case 'style':
+        callback(null, parsed.hmlCss.css, map);
+        break;
+      case 'json':
+        callback(null, parsed.hmlCss.json, map);
+        break;
     }
   }
-}
+};

ace-loader/src/loader-gen.js

@@ -3,25 +3,16 @@
  */
 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,
+  jsonLoaders,
   loadBabelModule
 }
 from './util'
-import { isReservedTag } from './templater/component_validator'
-import loader from 'sass-loader'
 
-const { DEVICE_LEVEL } = require('./lite/lite-enum')
 const loaderPath = __dirname
 const defaultLoaders = {
   none: '',
@@ -120,41 +111,47 @@ function styleLoaderString (loaders, config, customLoader) {
 }
 
 function scriptLoaderString (loaders, config, customLoader) {
-  loaders = [{
-    name: defaultLoaders.script
-  }]
-  if (customLoader) {
-    loaders = loaders.concat(customLoader)
-  }
-  else {
+  if (process.env.DEVICE_LEVEL === 'card') {
+    loaders = [{
+      name: defaultLoaders.json
+    }]
+    if (customLoader) {
+      loaders = loaders.concat(customLoader);
+    }
     loaders.push({
-      name: defaultLoaders.babel,
+      name: defaultLoaders.extgen,
       query: {
-        presets: [loadBabelModule('@babel/preset-env')],
-        plugins: [loadBabelModule('@babel/plugin-transform-modules-commonjs')],
-        comments: 'false'
-      }
-    })
-  }
-  if (config.app) {
-    loaders.push({
-      name: defaultLoaders.manifest,
-      query: {
-        path: config.source
+        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')],
+          plugins: [loadBabelModule('@babel/plugin-transform-modules-commonjs')],
+          comments: 'false'
+        }
+      })
+    }
   }
   return stringifyLoaders(loaders)
 }
 
-function configLoaderString (loaders, config) {
+function configLoaderString (loaders) {
   loaders = [{
     name: defaultLoaders.json
   }]
   return stringifyLoaders(loaders)
 }
 
-function dataLoaderString (loaders, config) {
+function dataLoaderString (loaders) {
   loaders = [{
     name: defaultLoaders.json
   }]
@@ -175,52 +172,58 @@ function codegenHmlAndCss() {
   const resourceQuery = this.resourceQuery && loaderUtils.parseQuery(this.resourceQuery) || {}
   const isEntry = resourceQuery.entry
   let output = ''
-  let jsFileName = this.resourcePath.replace(process.env.aceSuperVisualPath, process.env.aceModuleRoot)
+  let jsFileName = this.resourcePath.replace(process.env.aceSuperVisualPath, process.env.projectPath)
   jsFileName = jsFileName.substr(0, jsFileName.length - 6) + 'js';
 
-  output = 'var $app_script$ = ' + getRequireString(this, getLoaderString('script', {
-    customLang,
-    lang: undefined,
-    element: undefined,
-    elementName: undefined,
-    source: jsFileName
-  }), jsFileName)
-
-  output += 'var $app_template$ = ' + getRequireString(this, getLoaderString('template', {
-    customLang,
-    lang: undefined,
-    element: isElement,
-    elementName: undefined,
-    source: this.resourcePath
-  }), this.resourcePath)
-
-  output += 'var $app_style$ = ' + getRequireString(this, getLoaderString('style', {
-    customLang,
-    lang: undefined,
-    element: isElement,
-    elementName: undefined,
-    source: this.resourcePath
-  }), this.resourcePath)
-
-  output += `
-  $app_define$('@app-component/${getNameByPath(this.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$
-  ` + `
-  })
-  `
-
-  if (isEntry) {
-    output += `$app_bootstrap$('@app-component/${getNameByPath(this.resourcePath)}'` + ',undefined' + ',undefined' + `)`
+  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 {
+    output = 'var $app_script$ = ' + getRequireString(this, getLoaderString('script', {
+      customLang,
+      lang: undefined,
+      element: undefined,
+      elementName: undefined,
+      source: jsFileName
+    }), jsFileName)
+  
+    output += 'var $app_template$ = ' + getRequireString(this, getLoaderString('template', {
+      customLang,
+      lang: undefined,
+      element: isElement,
+      elementName: undefined,
+      source: this.resourcePath
+    }), this.resourcePath)
+  
+    output += 'var $app_style$ = ' + getRequireString(this, getLoaderString('style', {
+      customLang,
+      lang: undefined,
+      element: isElement,
+      elementName: undefined,
+      source: this.resourcePath
+    }), this.resourcePath)
+  
+    output += `
+    $app_define$('@app-component/${getNameByPath(this.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$
+    ` + `
+    })
+    `
+    if (isEntry) {
+      output += `$app_bootstrap$('@app-component/${getNameByPath(this.resourcePath)}'` + ',undefined' + ',undefined' + `)`
+    }
   }
   return output
 }
-
-module.exports = codegenHmlAndCss
+module.exports = codegenHmlAndCss

ace-loader/src/resource-plugin.js

@@ -117,6 +117,9 @@ class ResourcePlugin {
       circularFile(input, output, '../share');
     });
     compiler.hooks.normalModuleFactory.tap('OtherEntryOptionPlugin', () => {
+      if (process.env.DEVICE_LEVEL === 'card') {
+        return;
+      }
       addPageEntryObj();
       for (const key in entryObj) {
         if (!compiler.options.entry[key]) {

ace-loader/test/card/expected/ifAttr/ifAttr.json

@@ -8,28 +8,28 @@
         "attr": {
           "value": "Hello-TV"
         },
-        "shown": "{{show}}"
+        "shown": "{{showIf}}"
       },
       {
         "type": "text",
         "attr": {
           "value": "Hello-Wearable"
         },
-        "shown": "{{display}}&&!{{show}}"
+        "shown": "{{display}}&&!{{showIf}}"
       },
       {
         "type": "text",
         "attr": {
           "value": "Hello-World"
         },
-        "shown": "!{{display}}&&!{{show}}"
+        "shown": "!{{display}}&&!{{showIf}}"
       }
     ]
   },
   "styles": {},
   "actions": {},
   "data": {
-    "show": false,
+    "showIf": false,
     "display": true
   },
   "apiVersion": {}

ace-loader/test/card/expected/importCSS/importCSS.json

@@ -16,6 +16,7 @@
       "justifyContent": "center"
     }
   },
+  "apiVersion": {},
   "actions": {},
   "data": {}
 }

ace-loader/test/card/expected/importLess/importLess.json

@@ -13,6 +13,7 @@
       "backgroundColor": "#000000"
     }
   },
+  "apiVersion": {},
   "actions": {},
   "data": {}
 }

ace-loader/test/card/expected/inlineStyle/inlineStyle.json

@@ -140,6 +140,7 @@
     ]
   },
   "styles": {},
+  "apiVersion": {},
   "actions": {},
   "data": {}
 }

ace-loader/test/card/expected/privateAttr/privateAttr.json

@@ -56,6 +56,7 @@
     ]
   },
   "styles": {},
+  "apiVersion": {},
   "actions": {},
   "data": {}
 }

ace-loader/test/card/testcase/pages/ifAttr/ifAttr.hml

@@ -1,5 +1,5 @@
 <div>
-  <text if="{{show}}"> Hello-TV </text>
+  <text if="{{showIf}}"> Hello-TV </text>
   <text elif="{{display}}"> Hello-Wearable </text>
   <text else> Hello-World </text>
 </div>

ace-loader/test/card/testcase/pages/ifAttr/ifAttr.json

@@ -1,6 +1,6 @@
 {
   "data": {
-    "show": false,
+    "showIf": false,
     "display": true
   }
 }

ace-loader/webpack.rich.config.js

@@ -93,6 +93,12 @@ const richModule = {
 
 const cardModule = {
   rules: [
+    {
+      test: /\.visual$/,
+      use: [{
+        loader: path.resolve(__dirname, './lib/loader-gen.js')
+      }]
+    },
     {
       test: /\.hml$/,
       use: [{
@@ -204,8 +210,7 @@ module.exports = (env) => {
   }
   if (process.env.DEVICE_LEVEL === 'card') {
     config.module = cardModule
-    config.plugins.push(new AfterEmitPlugin(process.env.buildPath))
-    delete config.cache
+    config.plugins.push(new AfterEmitPlugin())
   } else {
     if (env.isPreview !== "true") {
       if (env.compilerType && env.compilerType === 'ark') {