From 0e4779ebd526147be1acb8f39a82279e94dae0b6 Mon Sep 17 00:00:00 2001 From: houhaoyu Date: Thu, 23 Dec 2021 15:39:47 +0800 Subject: [PATCH 1/4] houhaoyu resolve standard mistake Signed-off-by: houhaoyu Change-Id: Ibf7f4e9346bfe817a3e847e4340d56722aa3ae0a --- ace-loader/.eslintrc.js | 1 - .../plugin/templater/component_validator.js | 126 ++++++++++-------- .../src/lite/lite-return-exports-plugin.js | 1 + ace-loader/src/lite/lite-transform-style.js | 1 + ace-loader/src/loader-gen.js | 66 +++++---- ace-loader/webpack.rich.config.js | 105 ++++++++------- 6 files changed, 169 insertions(+), 131 deletions(-) diff --git a/ace-loader/.eslintrc.js b/ace-loader/.eslintrc.js index 72f1709..2ea9fbd 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 92e435f..3490265 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) 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) { + 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 ae70925..f34c30d 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 4b34473..08cd1b2 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 132c8bf..776e028 100644 --- a/ace-loader/src/loader-gen.js +++ b/ace-loader/src/loader-gen.js @@ -16,6 +16,7 @@ /** * Copyright (c) Huawei Technologies Co., Ltd. 2021-2021. All rights reserved. */ +import { generate } from 'escodegen' import loaderUtils from 'loader-utils' import path from 'path' @@ -60,8 +61,6 @@ function getLoaderString (type, config) { return configLoaderString(loaders, config) case 'data': return dataLoaderString(loaders, config) - default: - return } } @@ -200,29 +199,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 +228,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 4ef644c..8474e52 100644 --- a/ace-loader/webpack.rich.config.js +++ b/ace-loader/webpack.rich.config.js @@ -201,8 +201,7 @@ function setConfigs(env) { } } - -module.exports = (env) => { +function processConfig(env) { setConfigs(env) deleteFolderRecursive(process.env.buildPath); config.cache.cacheDirectory = path.resolve(process.env.cachePath, '.rich_cache'); @@ -223,6 +222,61 @@ module.exports = (env) => { './node_modules' ] } +} + +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'))) + } + } + } +} + +function isRelease(env) { + config.mode = 'production' + config.optimization = { + minimize: true, + minimizer: [ + new TerserPlugin({ + terserOptions: { + keep_fnames: true + }, + minify: (file, sourceMap) => { + const uglifyEsOptions = { + compress: { + unused: true + }, + sourceMap: true + }; + if (process.env.DEVICE_LEVEL === 'rich' && /\/workers\//.test(Object.keys(file)[0])) { + uglifyEsOptions.compress.unused = false; + } + return require('uglify-es').minify(file, uglifyEsOptions); + }, + }) + ] + } + config.output.sourceMapFilename = '_releaseMap/[name].js.map' +} + +module.exports = (env) => { + processConfig(env); if (fs.existsSync(path.resolve(process.env.projectPath, 'i18n'))) { config.plugins.push(new CopyPlugin({ patterns: [ @@ -250,56 +304,13 @@ 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 } if (env.buildMode === 'release') { - config.mode = 'production' - config.optimization = { - minimize: true, - minimizer: [ - new TerserPlugin({ - terserOptions: { - keep_fnames: true - }, - minify: (file, sourceMap) => { - const uglifyEsOptions = { - compress: { - unused: true - }, - sourceMap: true - }; - if (process.env.DEVICE_LEVEL === 'rich' && /\/workers\//.test(Object.keys(file)[0])) { - uglifyEsOptions.compress.unused = false; - } - return require('uglify-es').minify(file, uglifyEsOptions); - }, - }) - ] - } - config.output.sourceMapFilename = '_releaseMap/[name].js.map' + isRelease(env) } } config.module.rules.push({ -- Gitee From 2cee814e3cbaaaec99cc90c88ce67ca8729958aa Mon Sep 17 00:00:00 2001 From: houhaoyu Date: Thu, 23 Dec 2021 18:26:45 +0800 Subject: [PATCH 2/4] houhaoyu@huawei.com fix not include log Signed-off-by: houhaoyu Change-Id: Ifb58e6ee3cec751aeea4cfc09f9c564eb2f0b0e4 --- ace-loader/plugin/templater/component_validator.js | 4 ++-- ace-loader/src/loader-gen.js | 1 - 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/ace-loader/plugin/templater/component_validator.js b/ace-loader/plugin/templater/component_validator.js index 3490265..93ca88b 100644 --- a/ace-loader/plugin/templater/component_validator.js +++ b/ace-loader/plugin/templater/component_validator.js @@ -760,7 +760,7 @@ function validateStyle(css, out, nodeLoc, relativePath) { if (css) { const cssStyle = {} const cssArray = css.split(';') - processCssArray(css, out, nodeLoc, cssStyle, cssArray) + processCssArray(css, out, nodeLoc, cssStyle, cssArray, log) out.jsonTemplate.style = cssStyle setDebugLine(out.jsonTemplate, relativePath, nodeLoc.line) } else { @@ -772,7 +772,7 @@ function validateStyle(css, out, nodeLoc, relativePath) { } } -function processCssArray(css, out, nodeLoc, cssStyle, cssArray) { +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)) { diff --git a/ace-loader/src/loader-gen.js b/ace-loader/src/loader-gen.js index 776e028..fc566a2 100644 --- a/ace-loader/src/loader-gen.js +++ b/ace-loader/src/loader-gen.js @@ -16,7 +16,6 @@ /** * Copyright (c) Huawei Technologies Co., Ltd. 2021-2021. All rights reserved. */ -import { generate } from 'escodegen' import loaderUtils from 'loader-utils' import path from 'path' -- Gitee From 4a6238bcdf075e3698aeab554ecaf1da6e53cc32 Mon Sep 17 00:00:00 2001 From: houhaoyu Date: Thu, 23 Dec 2021 21:00:55 +0800 Subject: [PATCH 3/4] houhaoyu@huawei.com recover isrelease function Signed-off-by: houhaoyu Change-Id: I554b85503ab44bde56e1c003780161e3187ea896 --- ace-loader/webpack.rich.config.js | 52 ++++++++++++++----------------- 1 file changed, 24 insertions(+), 28 deletions(-) diff --git a/ace-loader/webpack.rich.config.js b/ace-loader/webpack.rich.config.js index 8474e52..cb0f8ba 100644 --- a/ace-loader/webpack.rich.config.js +++ b/ace-loader/webpack.rich.config.js @@ -248,33 +248,6 @@ function notPreview(env) { } } -function isRelease(env) { - config.mode = 'production' - config.optimization = { - minimize: true, - minimizer: [ - new TerserPlugin({ - terserOptions: { - keep_fnames: true - }, - minify: (file, sourceMap) => { - const uglifyEsOptions = { - compress: { - unused: true - }, - sourceMap: true - }; - if (process.env.DEVICE_LEVEL === 'rich' && /\/workers\//.test(Object.keys(file)[0])) { - uglifyEsOptions.compress.unused = false; - } - return require('uglify-es').minify(file, uglifyEsOptions); - }, - }) - ] - } - config.output.sourceMapFilename = '_releaseMap/[name].js.map' -} - module.exports = (env) => { processConfig(env); if (fs.existsSync(path.resolve(process.env.projectPath, 'i18n'))) { @@ -310,7 +283,30 @@ module.exports = (env) => { config.devtool = false } if (env.buildMode === 'release') { - isRelease(env) + config.mode = 'production' + config.optimization = { + minimize: true, + minimizer: [ + new TerserPlugin({ + terserOptions: { + keep_fnames: true + }, + minify: (file, sourceMap) => { + const uglifyEsOptions = { + compress: { + unused: true + }, + sourceMap: true + }; + if (process.env.DEVICE_LEVEL === 'rich' && /\/workers\//.test(Object.keys(file)[0])) { + uglifyEsOptions.compress.unused = false; + } + return require('uglify-es').minify(file, uglifyEsOptions); + }, + }) + ] + } + config.output.sourceMapFilename = '_releaseMap/[name].js.map' } } config.module.rules.push({ -- Gitee From a6db038d09579dd608a5805c891035e7584e2c00 Mon Sep 17 00:00:00 2001 From: houhaoyu Date: Thu, 23 Dec 2021 21:05:46 +0800 Subject: [PATCH 4/4] houhaoyu@huawei.com reset processConfig function Signed-off-by: houhaoyu Change-Id: I9f43947de667711eda1d641dd036f8da10672297 --- ace-loader/webpack.rich.config.js | 44 ++++++++++++++----------------- 1 file changed, 20 insertions(+), 24 deletions(-) diff --git a/ace-loader/webpack.rich.config.js b/ace-loader/webpack.rich.config.js index cb0f8ba..fa49459 100644 --- a/ace-loader/webpack.rich.config.js +++ b/ace-loader/webpack.rich.config.js @@ -201,29 +201,6 @@ function setConfigs(env) { } } -function processConfig(env) { - setConfigs(env) - deleteFolderRecursive(process.env.buildPath); - config.cache.cacheDirectory = path.resolve(process.env.cachePath, '.rich_cache'); - config.entry = loadEntryObj(process.env.projectPath, process.env.DEVICE_LEVEL, - process.env.abilityType, process.env.aceManifestPath) - config.output.path = path.resolve(__dirname, process.env.buildPath) - config.plugins = [ - new ResourcePlugin(process.env.projectPath, process.env.buildPath, process.env.aceManifestPath), - new ResultStates({ - build: process.env.buildPath - }) - ] - config.resolve = { - modules: [ - process.env.projectPath, - path.join(process.env.projectPath, '../../../../../'), - path.join(__dirname, 'node_modules'), - './node_modules' - ] - } -} - function notPreview(env) { config.plugins.push(new ModuleCollectionPlugin()) if (env.compilerType && env.compilerType === 'ark') { @@ -249,7 +226,26 @@ function notPreview(env) { } module.exports = (env) => { - processConfig(env); + setConfigs(env) + deleteFolderRecursive(process.env.buildPath); + config.cache.cacheDirectory = path.resolve(process.env.cachePath, '.rich_cache'); + config.entry = loadEntryObj(process.env.projectPath, process.env.DEVICE_LEVEL, + process.env.abilityType, process.env.aceManifestPath) + config.output.path = path.resolve(__dirname, process.env.buildPath) + config.plugins = [ + new ResourcePlugin(process.env.projectPath, process.env.buildPath, process.env.aceManifestPath), + new ResultStates({ + build: process.env.buildPath + }) + ] + config.resolve = { + modules: [ + process.env.projectPath, + path.join(process.env.projectPath, '../../../../../'), + path.join(__dirname, 'node_modules'), + './node_modules' + ] + } if (fs.existsSync(path.resolve(process.env.projectPath, 'i18n'))) { config.plugins.push(new CopyPlugin({ patterns: [ -- Gitee