From 0528e350599b17f004a19352268e9d0696070802 Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 31 Jul 2024 15:21:59 +0800 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E6=A8=A1?= =?UTF-8?q?=E6=9D=BF=E5=BC=95=E6=93=8E=E5=8F=82=E6=95=B0=E5=8C=B9=E9=85=8D?= =?UTF-8?q?=E6=A0=A1=E9=AA=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/webpack-plugin/lib/index.js | 44 +++++++++++++++++++ packages/webpack-plugin/lib/utils/diff-obj.js | 33 ++++++++++++++ 2 files changed, 77 insertions(+) create mode 100644 packages/webpack-plugin/lib/utils/diff-obj.js diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index 6e37d3212a..68fd737544 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/packages/webpack-plugin/lib/index.js @@ -67,6 +67,8 @@ const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE } = require('./utils/con const isEmptyObject = require('./utils/is-empty-object') const DynamicPlugin = require('./resolver/DynamicPlugin') const { isReact, isWeb } = require('./utils/env') +const { log } = require('console') +const diffObj = require('./utils/diff-obj') require('./utils/check-core-version-match') const isProductionLikeMode = options => { @@ -1274,6 +1276,48 @@ class MpxWebpackPlugin { compilation.assets[jsonAsset] = new RawSource(mpx.injectDynamicSlotDependencies(jsonContent, resourcePath)) } } + try { + if (!isProductionLikeMode(this.options)) { + const packageInjectedTemplateConfig = mpx.getPackageInjectedTemplateConfig(packageName) + const { BaseTemplate } = require('@mpxjs/template-engine/dist/baseTemplate') + const base = new BaseTemplate() + base.normalizeInputOptions(this.options.dynamicTemplateEngineOptions) + const getAttrArr = attrs => Object.keys(attrs).map(a => `${a}`) + const normalizeDiffObj = o => { + return Object.fromEntries( + o + .map(v => [v.nodeType, getAttrArr(v.attrs).sort()]) + .filter(v => !(v[0].startsWith('pure') || v[0].startsWith('static'))) + ) + } + const normalizeTemplateConfig = config => { + return normalizeDiffObj( + Object.keys(config).map(v => { + return { + nodeType: v, + attrs: config[v] + } + }) + ) + } + const inputConfig = { + baseComponents: normalizeDiffObj(base.buildOptions.baseComponents), + normalComponents: normalizeDiffObj(base.buildOptions.normalComponents) + } + const collectedConfig = { + baseComponents: normalizeTemplateConfig( + packageInjectedTemplateConfig.baseComponents + ), + normalComponents: normalizeTemplateConfig( + packageInjectedTemplateConfig.normalComponents + ) + } + const noConfig = diffObj(collectedConfig, inputConfig) + console.log(noConfig); + const noConfigString = Object.entries(noConfig.baseComponents || {}).map(([k,v])=> `nodeType: ${k}, attrs: ${v}`).join('\n') + compilation.warnings.push(`template engine missing config, the following elements or attributes will not be rendered: \n${noConfigString}`) + } + } catch (error) {} } if (!isEmptyObject(dynamicAssets)) { // 产出 jsonAst 静态产物 diff --git a/packages/webpack-plugin/lib/utils/diff-obj.js b/packages/webpack-plugin/lib/utils/diff-obj.js new file mode 100644 index 0000000000..111e18867b --- /dev/null +++ b/packages/webpack-plugin/lib/utils/diff-obj.js @@ -0,0 +1,33 @@ +module.exports = function diffObjects(obj1, obj2) { + function findDifferences(o1, o2) { + const differences = {}; + + // Iterate over the properties of the first object to find removed properties + for (const key in o1) { + if (o1.hasOwnProperty(key)) { + if (o2.hasOwnProperty(key)) { + if (Array.isArray(o1[key]) && Array.isArray(o2[key])) { + // Handle array differences + const missing = o1[key].filter(item => !o2[key].includes(item)); + if (missing.length > 0) { + differences[key] = missing; + } + } else if (typeof o1[key] === 'object' && o1[key] !== null && typeof o2[key] === 'object' && o2[key] !== null) { + // Handle nested objects + const nestedDiff = findDifferences(o1[key], o2[key]); + if (Object.keys(nestedDiff).length > 0) { + differences[key] = nestedDiff; + } + } + } else { + differences[key] = o1[key]; + } + } + } + + return differences; + } + + return findDifferences(obj1, obj2); +} + From 02b9ab193c9e95f3c76452bc237432193bcce031 Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 31 Jul 2024 15:22:34 +0800 Subject: [PATCH 2/8] fix: params check --- packages/webpack-plugin/lib/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index 68fd737544..549a09d209 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/packages/webpack-plugin/lib/index.js @@ -1277,7 +1277,7 @@ class MpxWebpackPlugin { } } try { - if (!isProductionLikeMode(this.options)) { + if (!isProductionLikeMode(this.options) && this.options.dynamicTemplateEngineOptions) { const packageInjectedTemplateConfig = mpx.getPackageInjectedTemplateConfig(packageName) const { BaseTemplate } = require('@mpxjs/template-engine/dist/baseTemplate') const base = new BaseTemplate() From dd5eba866618d492f1fd1245c5a7dcc8fde6e0c1 Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 31 Jul 2024 16:19:43 +0800 Subject: [PATCH 3/8] fix: ali check --- packages/webpack-plugin/lib/index.js | 59 +++++++++++++++++++++------- 1 file changed, 44 insertions(+), 15 deletions(-) diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index 549a09d209..1e48d650f4 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/packages/webpack-plugin/lib/index.js @@ -1277,18 +1277,39 @@ class MpxWebpackPlugin { } } try { - if (!isProductionLikeMode(this.options) && this.options.dynamicTemplateEngineOptions) { + if ( + !isProductionLikeMode(this.options) && + this.options.dynamicTemplateEngineOptions + ) { + const srcModeConfig = config['wx'] + const modeConfig = config[mpx.mode] const packageInjectedTemplateConfig = mpx.getPackageInjectedTemplateConfig(packageName) const { BaseTemplate } = require('@mpxjs/template-engine/dist/baseTemplate') const base = new BaseTemplate() base.normalizeInputOptions(this.options.dynamicTemplateEngineOptions) - const getAttrArr = attrs => Object.keys(attrs).map(a => `${a}`) + const getAttrArr = attrs => { + return Object.keys(attrs) + .map(a => { + const parseEvent = srcModeConfig.event.parseEvent(a) + if (parseEvent) { + // event需要转换为对应平台的，否则传入的是wx，但是收集的是ali的，会始终对应不上 + return `${modeConfig.event.getEvent(parseEvent.eventName)}` + } + return `${a}` + }) + .filter(v => { + return v !== 'data-mpxuid' || v !== 'data-eventconfigs' // 排除不需要diff的属性 + }) + } const normalizeDiffObj = o => { - return Object.fromEntries( - o - .map(v => [v.nodeType, getAttrArr(v.attrs).sort()]) - .filter(v => !(v[0].startsWith('pure') || v[0].startsWith('static'))) - ) + return o.reduce((res, b) => { + const nodeType = b.nodeType.replace(/pure-|static-/, '') // 合并pure，static的属性 + res[nodeType] = res[nodeType] || [] + res[nodeType] = [ + ...new Set([...res[nodeType], ...getAttrArr(b.attrs).sort()]) // 去重 + ] + return res + }, {}) } const normalizeTemplateConfig = config => { return normalizeDiffObj( @@ -1307,17 +1328,25 @@ class MpxWebpackPlugin { const collectedConfig = { baseComponents: normalizeTemplateConfig( packageInjectedTemplateConfig.baseComponents - ), - normalComponents: normalizeTemplateConfig( - packageInjectedTemplateConfig.normalComponents ) } - const noConfig = diffObj(collectedConfig, inputConfig) - console.log(noConfig); - const noConfigString = Object.entries(noConfig.baseComponents || {}).map(([k,v])=> `nodeType: ${k}, attrs: ${v}`).join('\n') - compilation.warnings.push(`template engine missing config, the following elements or attributes will not be rendered: \n${noConfigString}`) + // diff收集的信息和配置是否存在不同，返回不同的键值 + const noConfig = diffObj(collectedConfig.baseComponents, { + ...inputConfig.baseComponents, + ...inputConfig.normalComponents + }) + if (Object.keys(noConfig).length) { + const noConfigString = Object.entries(noConfig || {}) + .map(([k, v]) => `nodeType: ${k}, attrs: ${v}`) + .join('\n') + compilation.warnings.push( + `template engine missing config, the following elements or attributes will not be rendered: \n${noConfigString}` + ) + } } - } catch (error) {} + } catch (error) { + console.error(error) + } } if (!isEmptyObject(dynamicAssets)) { // 产出 jsonAst 静态产物 From 0c57dc646a01ca4dbc75eb85c56731662c64cffd Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 31 Jul 2024 16:26:15 +0800 Subject: [PATCH 4/8] fix: src mode config --- packages/webpack-plugin/lib/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index 1e48d650f4..07743529d7 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/packages/webpack-plugin/lib/index.js @@ -1281,7 +1281,7 @@ class MpxWebpackPlugin { !isProductionLikeMode(this.options) && this.options.dynamicTemplateEngineOptions ) { - const srcModeConfig = config['wx'] + const srcModeConfig = config[mpx.srcMode] const modeConfig = config[mpx.mode] const packageInjectedTemplateConfig = mpx.getPackageInjectedTemplateConfig(packageName) const { BaseTemplate } = require('@mpxjs/template-engine/dist/baseTemplate') From a16b6b805fe53e3255463ba0f638b7e1a283ddd8 Mon Sep 17 00:00:00 2001 From: mater Date: Tue, 6 Aug 2024 16:09:19 +0800 Subject: [PATCH 5/8] feat: runder check --- packages/webpack-plugin/lib/index.js | 75 +------------------ .../lib/runtime-render/render-checker.js | 44 +++++++++++ .../lib/template-compiler/compiler.js | 5 ++ .../lib/template-compiler/index.js | 3 +- packages/webpack-plugin/lib/utils/diff-obj.js | 33 -------- 5 files changed, 53 insertions(+), 107 deletions(-) create mode 100644 packages/webpack-plugin/lib/runtime-render/render-checker.js delete mode 100644 packages/webpack-plugin/lib/utils/diff-obj.js diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index 07743529d7..55728d9821 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/packages/webpack-plugin/lib/index.js @@ -67,8 +67,6 @@ const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE } = require('./utils/con const isEmptyObject = require('./utils/is-empty-object') const DynamicPlugin = require('./resolver/DynamicPlugin') const { isReact, isWeb } = require('./utils/env') -const { log } = require('console') -const diffObj = require('./utils/diff-obj') require('./utils/check-core-version-match') const isProductionLikeMode = options => { @@ -879,6 +877,8 @@ class MpxWebpackPlugin { runtimeInfo: {}, // 记录运行时组件依赖的运行时组件当中使用的基础组件 slot，最终依据依赖关系注入到运行时组件的 json 配置当中 dynamicSlotDependencies: {}, + // 模板引擎参数，用来检测模板引擎支持渲染的模板 + dynamicTemplateEngineOptions: this.options.dynamicTemplateEngineOptions, // 依据 package 注入到 mpx-custom-element-*.json 里面的组件路径 getPackageInjectedComponentsMap: (packageName = 'main') => { const res = {} @@ -1276,77 +1276,6 @@ class MpxWebpackPlugin { compilation.assets[jsonAsset] = new RawSource(mpx.injectDynamicSlotDependencies(jsonContent, resourcePath)) } } - try { - if ( - !isProductionLikeMode(this.options) && - this.options.dynamicTemplateEngineOptions - ) { - const srcModeConfig = config[mpx.srcMode] - const modeConfig = config[mpx.mode] - const packageInjectedTemplateConfig = mpx.getPackageInjectedTemplateConfig(packageName) - const { BaseTemplate } = require('@mpxjs/template-engine/dist/baseTemplate') - const base = new BaseTemplate() - base.normalizeInputOptions(this.options.dynamicTemplateEngineOptions) - const getAttrArr = attrs => { - return Object.keys(attrs) - .map(a => { - const parseEvent = srcModeConfig.event.parseEvent(a) - if (parseEvent) { - // event需要转换为对应平台的，否则传入的是wx，但是收集的是ali的，会始终对应不上 - return `${modeConfig.event.getEvent(parseEvent.eventName)}` - } - return `${a}` - }) - .filter(v => { - return v !== 'data-mpxuid' || v !== 'data-eventconfigs' // 排除不需要diff的属性 - }) - } - const normalizeDiffObj = o => { - return o.reduce((res, b) => { - const nodeType = b.nodeType.replace(/pure-|static-/, '') // 合并pure，static的属性 - res[nodeType] = res[nodeType] || [] - res[nodeType] = [ - ...new Set([...res[nodeType], ...getAttrArr(b.attrs).sort()]) // 去重 - ] - return res - }, {}) - } - const normalizeTemplateConfig = config => { - return normalizeDiffObj( - Object.keys(config).map(v => { - return { - nodeType: v, - attrs: config[v] - } - }) - ) - } - const inputConfig = { - baseComponents: normalizeDiffObj(base.buildOptions.baseComponents), - normalComponents: normalizeDiffObj(base.buildOptions.normalComponents) - } - const collectedConfig = { - baseComponents: normalizeTemplateConfig( - packageInjectedTemplateConfig.baseComponents - ) - } - // diff收集的信息和配置是否存在不同，返回不同的键值 - const noConfig = diffObj(collectedConfig.baseComponents, { - ...inputConfig.baseComponents, - ...inputConfig.normalComponents - }) - if (Object.keys(noConfig).length) { - const noConfigString = Object.entries(noConfig || {}) - .map(([k, v]) => `nodeType: ${k}, attrs: ${v}`) - .join('\n') - compilation.warnings.push( - `template engine missing config, the following elements or attributes will not be rendered: \n${noConfigString}` - ) - } - } - } catch (error) { - console.error(error) - } } if (!isEmptyObject(dynamicAssets)) { // 产出 jsonAst 静态产物 diff --git a/packages/webpack-plugin/lib/runtime-render/render-checker.js b/packages/webpack-plugin/lib/runtime-render/render-checker.js new file mode 100644 index 0000000000..e5f58f2ea5 --- /dev/null +++ b/packages/webpack-plugin/lib/runtime-render/render-checker.js @@ -0,0 +1,44 @@ +const { BaseTemplate } = require('@mpxjs/template-engine/dist/baseTemplate') +const diff = require('lodash/difference') + +const templateEngine = new BaseTemplate() +let componentMap + +const normalizeTemplateEngineAttrs = o => { + return o.reduce((res, b) => { + const nodeType = b.nodeType.replace(/pure-|static-/, '') // 合并pure，static的属性 + res[nodeType] = res[nodeType] || [] + res[nodeType] = [ + ...new Set([...res[nodeType], ...Object.keys(b.attrs || {})]) // 去重 + ] + return res + }, {}) +} + +module.exports.templateEngineRenderCheck = function templateEngineRenderCheck (el, options, config) { + if (!componentMap) { + templateEngine.normalizeInputOptions(options.dynamicTemplateEngineOptions) + const { normalComponents = [], baseComponents = [] } = templateEngine.buildOptions + componentMap = { + ...normalizeTemplateEngineAttrs(normalComponents), + ...normalizeTemplateEngineAttrs(baseComponents) + } + } + const directives = new Set([...Object.values(config.directive), 'slot']) + const attrKeys = Object.keys(el.attrsMap).filter(key => !directives.has(key)) + const templateEngineNodeAttr = componentMap[el.tag] + if (templateEngineNodeAttr) { + const notRenderKeys = diff(attrKeys, templateEngineNodeAttr) + if (notRenderKeys.length) { + // 无配置元素属性，元素属性不会生效 + options.warn( + `template engine missing config, the following attributes of ${el.tag} will not take effect: ${notRenderKeys}` + ) + } + } else { + // 无配置元素，该元素不会渲染 + options.warn( + `template engine missing config, the element ${el.tag} will not be rendered` + ) + } +} diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index ac6ac710ce..c83231fd63 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -16,6 +16,7 @@ const setBaseWxml = require('../runtime-render/base-wxml') const { parseExp } = require('./parse-exps') const shallowStringify = require('../utils/shallow-stringify') const { isReact } = require('../utils/env') +const { templateEngineRenderCheck } = require('../runtime-render/render-checker') const no = function () { return false @@ -2492,6 +2493,10 @@ function processElement (el, root, options, meta) { return } + if (runtimeCompile) { + templateEngineRenderCheck(el, options, config[mode]) + } + if (rulesRunner && el._atModeStatus !== 'match') { currentEl = el rulesRunner(el) diff --git a/packages/webpack-plugin/lib/template-compiler/index.js b/packages/webpack-plugin/lib/template-compiler/index.js index 4dd16605df..6c881d2da8 100644 --- a/packages/webpack-plugin/lib/template-compiler/index.js +++ b/packages/webpack-plugin/lib/template-compiler/index.js @@ -76,7 +76,8 @@ module.exports = function (raw) { checkUsingComponents: matchCondition(resourcePath, mpx.checkUsingComponentsRules), globalComponents: Object.keys(mpx.usingComponents), forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules) || runtimeCompile, - hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules) + hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules), + dynamicTemplateEngineOptions: mpx.dynamicTemplateEngineOptions }) if (meta.wxsContentMap) { diff --git a/packages/webpack-plugin/lib/utils/diff-obj.js b/packages/webpack-plugin/lib/utils/diff-obj.js deleted file mode 100644 index 111e18867b..0000000000 --- a/packages/webpack-plugin/lib/utils/diff-obj.js +++ /dev/null @@ -1,33 +0,0 @@ -module.exports = function diffObjects(obj1, obj2) { - function findDifferences(o1, o2) { - const differences = {}; - - // Iterate over the properties of the first object to find removed properties - for (const key in o1) { - if (o1.hasOwnProperty(key)) { - if (o2.hasOwnProperty(key)) { - if (Array.isArray(o1[key]) && Array.isArray(o2[key])) { - // Handle array differences - const missing = o1[key].filter(item => !o2[key].includes(item)); - if (missing.length > 0) { - differences[key] = missing; - } - } else if (typeof o1[key] === 'object' && o1[key] !== null && typeof o2[key] === 'object' && o2[key] !== null) { - // Handle nested objects - const nestedDiff = findDifferences(o1[key], o2[key]); - if (Object.keys(nestedDiff).length > 0) { - differences[key] = nestedDiff; - } - } - } else { - differences[key] = o1[key]; - } - } - } - - return differences; - } - - return findDifferences(obj1, obj2); -} - From ee95a94a6397a6745ac105bc1ebdd46883160391 Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 7 Aug 2024 11:12:29 +0800 Subject: [PATCH 6/8] feat: element-checked --- .../lib/runtime-render/render-checker.js | 48 ++++++++++++++----- .../lib/template-compiler/compiler.js | 5 +- .../lib/template-compiler/index.js | 3 +- 3 files changed, 39 insertions(+), 17 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime-render/render-checker.js b/packages/webpack-plugin/lib/runtime-render/render-checker.js index e5f58f2ea5..3a30116dec 100644 --- a/packages/webpack-plugin/lib/runtime-render/render-checker.js +++ b/packages/webpack-plugin/lib/runtime-render/render-checker.js @@ -4,28 +4,50 @@ const diff = require('lodash/difference') const templateEngine = new BaseTemplate() let componentMap -const normalizeTemplateEngineAttrs = o => { +const normalizeEventAttr = (config, attr) => { + const eventParsed = config.event.parseEvent(attr) + if (eventParsed) { + return config.event.getEvent(eventParsed.eventName, eventParsed.prefix) + } + return attr +} + +const normalizeTemplateEngineAttrs = (config, o) => { return o.reduce((res, b) => { - const nodeType = b.nodeType.replace(/pure-|static-/, '') // 合并pure，static的属性 - res[nodeType] = res[nodeType] || [] - res[nodeType] = [ - ...new Set([...res[nodeType], ...Object.keys(b.attrs || {})]) // 去重 - ] + const nodeType = b.nodeType + const attrSet = new Set(Object.keys(b.attrs || {})) + if (attrSet.has('class')) attrSet.add('style') + res[nodeType] = [...attrSet].map(v => normalizeEventAttr(config, v)) return res }, {}) } -module.exports.templateEngineRenderCheck = function templateEngineRenderCheck (el, options, config) { +const normalizeAttrsMap = (config, o) => { + const directives = new Set([...Object.values(config.directive), 'slot']) + return Object.keys(o) + .filter(key => !directives.has(key)) + .map(v => normalizeEventAttr(config, v)) +} + +module.exports.templateEngineRenderCheck = function templateEngineRenderCheck ( + el, + options, + config, + dynamicTemplateEngineOptions +) { if (!componentMap) { - templateEngine.normalizeInputOptions(options.dynamicTemplateEngineOptions) - const { normalComponents = [], baseComponents = [] } = templateEngine.buildOptions + const baseComponents = templateEngine.normalizeInputComponentOptions( + dynamicTemplateEngineOptions.baseComponents + ) + const normalComponents = templateEngine.normalizeInputComponentOptions( + dynamicTemplateEngineOptions.normalComponents + ) componentMap = { - ...normalizeTemplateEngineAttrs(normalComponents), - ...normalizeTemplateEngineAttrs(baseComponents) + ...normalizeTemplateEngineAttrs(config, normalComponents), + ...normalizeTemplateEngineAttrs(config, baseComponents) } } - const directives = new Set([...Object.values(config.directive), 'slot']) - const attrKeys = Object.keys(el.attrsMap).filter(key => !directives.has(key)) + const attrKeys = normalizeAttrsMap(config, el.attrsMap) const templateEngineNodeAttr = componentMap[el.tag] if (templateEngineNodeAttr) { const notRenderKeys = diff(attrKeys, templateEngineNodeAttr) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index c83231fd63..37f47b4361 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -16,7 +16,6 @@ const setBaseWxml = require('../runtime-render/base-wxml') const { parseExp } = require('./parse-exps') const shallowStringify = require('../utils/shallow-stringify') const { isReact } = require('../utils/env') -const { templateEngineRenderCheck } = require('../runtime-render/render-checker') const no = function () { return false @@ -2493,8 +2492,8 @@ function processElement (el, root, options, meta) { return } - if (runtimeCompile) { - templateEngineRenderCheck(el, options, config[mode]) + if (options.elementChecker) { + options.elementChecker(el, options, config[mode]) } if (rulesRunner && el._atModeStatus !== 'match') { diff --git a/packages/webpack-plugin/lib/template-compiler/index.js b/packages/webpack-plugin/lib/template-compiler/index.js index 6c881d2da8..120e020558 100644 --- a/packages/webpack-plugin/lib/template-compiler/index.js +++ b/packages/webpack-plugin/lib/template-compiler/index.js @@ -7,6 +7,7 @@ const { MPX_DISABLE_EXTRACTOR_CACHE } = require('../utils/const') const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency') const { createTemplateEngine, createSetupTemplate } = require('@mpxjs/template-engine') const { stringify } = require('./dynamic') +const { templateEngineRenderCheck } = require('../runtime-render/render-checker') module.exports = function (raw) { this.cacheable() @@ -77,7 +78,7 @@ module.exports = function (raw) { globalComponents: Object.keys(mpx.usingComponents), forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules) || runtimeCompile, hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules), - dynamicTemplateEngineOptions: mpx.dynamicTemplateEngineOptions + elementChecker: runtimeCompile ? (...args) => templateEngineRenderCheck(...args, mpx.dynamicTemplateEngineOptions) : undefined }) if (meta.wxsContentMap) { From fff31adec8340b670f81b8999544282ea80cc45e Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 7 Aug 2024 15:57:42 +0800 Subject: [PATCH 7/8] fix: exclude rule runner --- packages/webpack-plugin/lib/index.js | 2 +- .../lib/runtime-render/render-checker.js | 66 ------------------- .../lib/template-compiler/compiler.js | 4 +- .../lib/template-compiler/index.js | 3 +- 4 files changed, 4 insertions(+), 71 deletions(-) delete mode 100644 packages/webpack-plugin/lib/runtime-render/render-checker.js diff --git a/packages/webpack-plugin/lib/index.js b/packages/webpack-plugin/lib/index.js index 55728d9821..92766272d6 100644 --- a/packages/webpack-plugin/lib/index.js +++ b/packages/webpack-plugin/lib/index.js @@ -878,7 +878,7 @@ class MpxWebpackPlugin { // 记录运行时组件依赖的运行时组件当中使用的基础组件 slot，最终依据依赖关系注入到运行时组件的 json 配置当中 dynamicSlotDependencies: {}, // 模板引擎参数，用来检测模板引擎支持渲染的模板 - dynamicTemplateEngineOptions: this.options.dynamicTemplateEngineOptions, + dynamicTemplateRuleRunner: this.options.dynamicTemplateRuleRunner, // 依据 package 注入到 mpx-custom-element-*.json 里面的组件路径 getPackageInjectedComponentsMap: (packageName = 'main') => { const res = {} diff --git a/packages/webpack-plugin/lib/runtime-render/render-checker.js b/packages/webpack-plugin/lib/runtime-render/render-checker.js deleted file mode 100644 index 3a30116dec..0000000000 --- a/packages/webpack-plugin/lib/runtime-render/render-checker.js +++ /dev/null @@ -1,66 +0,0 @@ -const { BaseTemplate } = require('@mpxjs/template-engine/dist/baseTemplate') -const diff = require('lodash/difference') - -const templateEngine = new BaseTemplate() -let componentMap - -const normalizeEventAttr = (config, attr) => { - const eventParsed = config.event.parseEvent(attr) - if (eventParsed) { - return config.event.getEvent(eventParsed.eventName, eventParsed.prefix) - } - return attr -} - -const normalizeTemplateEngineAttrs = (config, o) => { - return o.reduce((res, b) => { - const nodeType = b.nodeType - const attrSet = new Set(Object.keys(b.attrs || {})) - if (attrSet.has('class')) attrSet.add('style') - res[nodeType] = [...attrSet].map(v => normalizeEventAttr(config, v)) - return res - }, {}) -} - -const normalizeAttrsMap = (config, o) => { - const directives = new Set([...Object.values(config.directive), 'slot']) - return Object.keys(o) - .filter(key => !directives.has(key)) - .map(v => normalizeEventAttr(config, v)) -} - -module.exports.templateEngineRenderCheck = function templateEngineRenderCheck ( - el, - options, - config, - dynamicTemplateEngineOptions -) { - if (!componentMap) { - const baseComponents = templateEngine.normalizeInputComponentOptions( - dynamicTemplateEngineOptions.baseComponents - ) - const normalComponents = templateEngine.normalizeInputComponentOptions( - dynamicTemplateEngineOptions.normalComponents - ) - componentMap = { - ...normalizeTemplateEngineAttrs(config, normalComponents), - ...normalizeTemplateEngineAttrs(config, baseComponents) - } - } - const attrKeys = normalizeAttrsMap(config, el.attrsMap) - const templateEngineNodeAttr = componentMap[el.tag] - if (templateEngineNodeAttr) { - const notRenderKeys = diff(attrKeys, templateEngineNodeAttr) - if (notRenderKeys.length) { - // 无配置元素属性，元素属性不会生效 - options.warn( - `template engine missing config, the following attributes of ${el.tag} will not take effect: ${notRenderKeys}` - ) - } - } else { - // 无配置元素，该元素不会渲染 - options.warn( - `template engine missing config, the element ${el.tag} will not be rendered` - ) - } -} diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 37f47b4361..717de24c07 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2492,8 +2492,8 @@ function processElement (el, root, options, meta) { return } - if (options.elementChecker) { - options.elementChecker(el, options, config[mode]) + if (options.dynamicTemplateRuleRunner) { + options.dynamicTemplateRuleRunner(el, options, config[mode]) } if (rulesRunner && el._atModeStatus !== 'match') { diff --git a/packages/webpack-plugin/lib/template-compiler/index.js b/packages/webpack-plugin/lib/template-compiler/index.js index 120e020558..c5c116bc17 100644 --- a/packages/webpack-plugin/lib/template-compiler/index.js +++ b/packages/webpack-plugin/lib/template-compiler/index.js @@ -7,7 +7,6 @@ const { MPX_DISABLE_EXTRACTOR_CACHE } = require('../utils/const') const RecordRuntimeInfoDependency = require('../dependencies/RecordRuntimeInfoDependency') const { createTemplateEngine, createSetupTemplate } = require('@mpxjs/template-engine') const { stringify } = require('./dynamic') -const { templateEngineRenderCheck } = require('../runtime-render/render-checker') module.exports = function (raw) { this.cacheable() @@ -78,7 +77,7 @@ module.exports = function (raw) { globalComponents: Object.keys(mpx.usingComponents), forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules) || runtimeCompile, hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules), - elementChecker: runtimeCompile ? (...args) => templateEngineRenderCheck(...args, mpx.dynamicTemplateEngineOptions) : undefined + dynamicTemplateRuleRunner: mpx.dynamicTemplateRuleRunner }) if (meta.wxsContentMap) { From 4c0ee64f73cd14bb7882c6695a1b04ceb4fa6a51 Mon Sep 17 00:00:00 2001 From: mater Date: Wed, 7 Aug 2024 17:00:14 +0800 Subject: [PATCH 8/8] fix: dynamicTemplateRuleRunner && runtimeCompile --- packages/webpack-plugin/lib/template-compiler/compiler.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 717de24c07..b160deb87f 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2492,7 +2492,7 @@ function processElement (el, root, options, meta) { return } - if (options.dynamicTemplateRuleRunner) { + if (runtimeCompile && options.dynamicTemplateRuleRunner) { options.dynamicTemplateRuleRunner(el, options, config[mode]) }