diff --git a/ace-loader/.eslintrc.js b/ace-loader/.eslintrc.js index 72f170957d671b25b45fd72116107708343db46a..2ea9fbdca6588a787c36e427cd97d4334fcaa2da 100644 --- a/ace-loader/.eslintrc.js +++ b/ace-loader/.eslintrc.js @@ -19,7 +19,6 @@ module.exports = { es6: true, node: true, }, - extends: ['google'], globals: { profiler: 'readonly', initStyleSheet: 'readonly', diff --git a/ace-loader/plugin/templater/component_validator.js b/ace-loader/plugin/templater/component_validator.js index 92e435ff02c2cbd803efd9e0da176ec948bd1214..93ca88bf4c0bbc10c8a65a00cb9ae875281100a3 100644 --- a/ace-loader/plugin/templater/component_validator.js +++ b/ace-loader/plugin/templater/component_validator.js @@ -760,50 +760,7 @@ function validateStyle(css, out, nodeLoc, relativePath) { if (css) { const cssStyle = {} const cssArray = css.split(';') - for (let i = 0; i < cssArray.length; i++) { - let styleContent = cssArray[i].trim().split(':') - if (preprocessSystemResourceReference(styleContent, cssStyle)) { - continue; - } - if (styleContent.length === 2) { - const key = styleContent[0].trim().replace(/-([a-z])/g, function(s, m) { return m.toUpperCase() }) - let value = bind(styleContent[1].trim(), undefined, true, out, nodeLoc) - const contentValue = styleContent[1].trim().toString(); - if (contentValue.match(/^linear-gradient/) && contentValue.match(/\(.*\{\{.*\}\}.*\)/)) { - log.push({ - line: nodeLoc.line || 1, - column: nodeLoc.col || 1, - reason: `ERROR: can not bind data for linear-gradient in inline style at ${css}` - }) - } - if (key === 'flex' && typeof value === 'string') { - expandFlex(key, value, cssStyle, nodeLoc, log) - } else { - const valuejsonTemplate = validateItem(key, value, nodeLoc, log) - value = valuejsonTemplate.value - if (['[object Number]', '[object String]', '[object Function]', '[object Object]', '[object Array]'].includes( - Object.prototype.toString.call(value))) { - expandStyle(key, value, valuejsonTemplate, cssStyle, out, nodeLoc, log) - } - } - } - if (styleContent.length > 2) { - styleContent[1] = styleContent.slice(1).join(':') - styleContent = styleContent.slice(0, 2) - if (REG_DATA_BINDING.test(styleContent[1])) { - styleContent[0] = styleContent[0].trim().replace(/-([a-z])/g, function(s, m) { return m.toUpperCase() }) - cssStyle[styleContent[0]] = bind(styleContent[1], undefined, true, out, nodeLoc) - } else { - // handle special cases like "background-image: url('https://xxx.jpg')" - const key = styleContent[0].trim().replace(/-([a-z])/g, function(s, m) { return m.toUpperCase() }) - if (key === 'backgroundImage') { - let value = styleContent[1].trim() - const valuejsonTemplate = validateItem(key, value, nodeLoc, log) - cssStyle[key] = valuejsonTemplate.value - } - } - } - } + processCssArray(css, out, nodeLoc, cssStyle, cssArray, log) out.jsonTemplate.style = cssStyle setDebugLine(out.jsonTemplate, relativePath, nodeLoc.line) } else { @@ -815,6 +772,53 @@ function validateStyle(css, out, nodeLoc, relativePath) { } } +function processCssArray(css, out, nodeLoc, cssStyle, cssArray, log) { + for (let i = 0; i < cssArray.length; i++) { + let styleContent = cssArray[i].trim().split(':') + if (preprocessSystemResourceReference(styleContent, cssStyle)) { + continue; + } + if (styleContent.length === 2) { + const key = styleContent[0].trim().replace(/-([a-z])/g, function(s, m) { return m.toUpperCase() }) + let value = bind(styleContent[1].trim(), undefined, true, out, nodeLoc) + const contentValue = styleContent[1].trim().toString(); + if (contentValue.match(/^linear-gradient/) && contentValue.match(/\(.*\{\{.*\}\}.*\)/)) { + log.push({ + line: nodeLoc.line || 1, + column: nodeLoc.col || 1, + reason: `ERROR: can not bind data for linear-gradient in inline style at ${css}` + }) + } + if (key === 'flex' && typeof value === 'string') { + expandFlex(key, value, cssStyle, nodeLoc, log) + } else { + const valuejsonTemplate = validateItem(key, value, nodeLoc, log) + value = valuejsonTemplate.value + if (['[object Number]', '[object String]', '[object Function]', '[object Object]', '[object Array]'].includes( + Object.prototype.toString.call(value))) { + expandStyle(key, value, valuejsonTemplate, cssStyle, out, nodeLoc, log) + } + } + } + if (styleContent.length > 2) { + styleContent[1] = styleContent.slice(1).join(':') + styleContent = styleContent.slice(0, 2) + if (REG_DATA_BINDING.test(styleContent[1])) { + styleContent[0] = styleContent[0].trim().replace(/-([a-z])/g, function(s, m) { return m.toUpperCase() }) + cssStyle[styleContent[0]] = bind(styleContent[1], undefined, true, out, nodeLoc) + } else { + // handle special cases like "background-image: url('https://xxx.jpg')" + const key = styleContent[0].trim().replace(/-([a-z])/g, function(s, m) { return m.toUpperCase() }) + if (key === 'backgroundImage') { + let value = styleContent[1].trim() + const valuejsonTemplate = validateItem(key, value, nodeLoc, log) + cssStyle[key] = valuejsonTemplate.value + } + } + } + } +} + function expandFlex(key, value, cssStyle, nodeLoc, log) { const valueArray = value.split(/\s+/) if (valueArray.length === 1) { @@ -870,7 +874,8 @@ function expandFlexTwo(key, value, valueArray, cssStyle, nodeLoc, log) { log.push({ line: nodeLoc.line, column: nodeLoc.column, - reason: 'ERROR: Value `' + value + '` of the `' + key + '` attribute is incorrect. Value `' + valueArray[0] + '` must be a number.', + reason: 'ERROR: Value `' + value + '` of the `' + key + '` attribute is incorrect. Value `' + + valueArray[0] + '` must be a number.', }) } } @@ -885,7 +890,8 @@ function expandFlexThree(key, value, valueArray, cssStyle, nodeLoc, log) { log.push({ line: nodeLoc.line, column: nodeLoc.column, - reason: 'ERROR: Value `' + value + '` of the `' + key + '` attribute is incorrect. It must be in the format of (1, 1, 1px).', + reason: 'ERROR: Value `' + value + '` of the `' + key + + '` attribute is incorrect. It must be in the format of (1, 1, 1px).', }) } } @@ -1159,21 +1165,11 @@ function validateAttr(resourcePath, attrName, attrValue, out, tagName, nodeLoc, // target format: {{$r('sys.media.sys_background_image')}} let SysResourceTypeRefReg = /{{\s*\$r\s*\(\s*(['"]sys\.media\.(?\w+)['"])\s*\)\s*}}/ result = SysResourceTypeRefReg.exec(attrValue); - if (result) { - const resourceName = result.groups['resName'] - if (resourceName && OHOS_THEME_PROP_GROUPS[resourceName]) { - attrValue = "@sys.media." + OHOS_THEME_PROP_GROUPS[resourceName] - } - } + getAttrValue(result, attrValue, true); // target format: {{$r('app.media.customized_background_image')}} let AppResourceTypeRefReg = /{{\s*\$r\s*\(\s*(['"]app\.media\.(?\w+)['"])\s*\)\s*}}/ result = AppResourceTypeRefReg.exec(attrValue); - if (result) { - const resourceName = result.groups['resName'] - if (resourceName) { - attrValue = "@app.media." + resourceName - } - } + getAttrValue(result, attrValue, false); if (tagWithPath.indexOf(attrName) >= 0 && attrValue.match(/^\.\.\/|^\.\//)) { if (!resourcePath) { @@ -1192,6 +1188,20 @@ function validateAttr(resourcePath, attrName, attrValue, out, tagName, nodeLoc, } } +function getAttrValue(result, attrValue, isSys) { + if (result && isSys) { + const resourceName = result.groups['resName'] + if (resourceName && OHOS_THEME_PROP_GROUPS[resourceName]) { + attrValue = "@sys.media." + OHOS_THEME_PROP_GROUPS[resourceName] + } + } else if (result && !isSys) { + const resourceName = result.groups['resName'] + if (resourceName) { + attrValue = "@app.media." + resourceName + } + } +} + /** * parse elif attr * diff --git a/ace-loader/src/lite/lite-return-exports-plugin.js b/ace-loader/src/lite/lite-return-exports-plugin.js index ae709251f73e52141a5d08bf4411f7f4d149f06c..f34c30df73736d6114ee07c541a4d1530f355857 100644 --- a/ace-loader/src/lite/lite-return-exports-plugin.js +++ b/ace-loader/src/lite/lite-return-exports-plugin.js @@ -19,6 +19,7 @@ const pluginName = 'LiteReturnExportsPlugin'; * LiteReturnExportsPlugin */ class LiteReturnExportsPlugin { + /** * return exports from runtime * @param {Object} compiler API specification, all configuration information of Webpack environment. diff --git a/ace-loader/src/lite/lite-transform-style.js b/ace-loader/src/lite/lite-transform-style.js index 4b3447346d5c7bb79c6c892f84b8c469425af9d0..08cd1b2fb5ef073ba7db2e5accf57147920e59e0 100644 --- a/ace-loader/src/lite/lite-transform-style.js +++ b/ace-loader/src/lite/lite-transform-style.js @@ -67,6 +67,7 @@ function transformStyle(value) { res = JSON.stringify(styleSheet); return res; } + /** * keyFrame style special compilation. * @param {Obejct} obj Preliminary compilation results of keyFrame style. diff --git a/ace-loader/src/loader-gen.js b/ace-loader/src/loader-gen.js index 132c8bfa19287acf7fb1ff4bc459d2893d5553a5..fc566a2647f45323f124fb62cf73c1b0798ad7ac 100644 --- a/ace-loader/src/loader-gen.js +++ b/ace-loader/src/loader-gen.js @@ -60,8 +60,6 @@ function getLoaderString (type, config) { return configLoaderString(loaders, config) case 'data': return dataLoaderString(loaders, config) - default: - return } } @@ -200,29 +198,12 @@ function codegenHmlAndCss() { 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) + 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 += ` $app_define$('@app-component/${getNameByPath(this.resourcePath)}', [], @@ -246,4 +227,38 @@ function codegenHmlAndCss() { } return output } + +function generateOutput(that, type, jsFileName, isElement) { + 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) + } + return result +} + module.exports = codegenHmlAndCss \ No newline at end of file diff --git a/ace-loader/webpack.rich.config.js b/ace-loader/webpack.rich.config.js index 4ef644cdf28407f93afeda457399bb63bc4f392a..fa494597812af08586345a693a7706f421127003 100644 --- a/ace-loader/webpack.rich.config.js +++ b/ace-loader/webpack.rich.config.js @@ -201,6 +201,29 @@ function setConfigs(env) { } } +function notPreview(env) { + config.plugins.push(new ModuleCollectionPlugin()) + if (env.compilerType && env.compilerType === 'ark') { + let arkDir = path.join(__dirname, 'bin', 'ark'); + if (env.arkFrontendDir) { + arkDir = env.arkFrontendDir; + } + let nodeJs = 'node'; + if (env.nodeJs) { + nodeJs = env.nodeJs; + } + config.plugins.push(new GenAbcPlugin(process.env.buildPath, arkDir, nodeJs, + env.buildMode === 'debug')) + } else { + if (env.deviceType) { + let deviceArr = env.deviceType.split(/,/) + let isDefault = deviceArr.indexOf('tv') >= 0 || deviceArr.indexOf('wearable') >= 0 ? true : false + if (isDefault) { + config.plugins.push(new GenBinPlugin(process.env.buildPath, path.join(__dirname, 'bin'))) + } + } + } +} module.exports = (env) => { setConfigs(env) @@ -250,27 +273,7 @@ module.exports = (env) => { config.plugins.push(new AfterEmitPlugin()) } else { if (env.isPreview !== "true") { - config.plugins.push(new ModuleCollectionPlugin()) - if (env.compilerType && env.compilerType === 'ark') { - let arkDir = path.join(__dirname, 'bin', 'ark'); - if (env.arkFrontendDir) { - arkDir = env.arkFrontendDir; - } - let nodeJs = 'node'; - if (env.nodeJs) { - nodeJs = env.nodeJs; - } - config.plugins.push(new GenAbcPlugin(process.env.buildPath, arkDir, nodeJs, - env.buildMode === 'debug')) - } else { - if (env.deviceType) { - let deviceArr = env.deviceType.split(/,/) - let isDefault = deviceArr.indexOf('tv') >= 0 || deviceArr.indexOf('wearable') >= 0 ? true : false - if (isDefault) { - config.plugins.push(new GenBinPlugin(process.env.buildPath, path.join(__dirname, 'bin'))) - } - } - } + notPreview(env) } if (env.sourceMap === 'none') { config.devtool = false