From effd153d4952ec40a3083cee79ad3d21e40619e9 Mon Sep 17 00:00:00 2001 From: xuegan Date: Thu, 17 Oct 2024 11:27:38 +0800 Subject: [PATCH 01/13] =?UTF-8?q?feat:=20processTemplate=20=E4=B8=AD?= =?UTF-8?q?=E6=94=BE=E5=BC=80hasScoped=E5=BC=80=E5=85=B3=E4=BC=A0=E9=80=92?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fetch/src/interceptorManager.js | 5 +++++ packages/webpack-plugin/lib/web/processTemplate.js | 5 ++--- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/fetch/src/interceptorManager.js b/packages/fetch/src/interceptorManager.js index 4c5f71b495..63f1a2839b 100644 --- a/packages/fetch/src/interceptorManager.js +++ b/packages/fetch/src/interceptorManager.js @@ -16,6 +16,7 @@ export default class InterceptorManager { constructor () { // 双队列数组, 0 为 fulfilled 队列，1 为 rejected 队列 this.interceptors = [[], []] + this.executionTimes = []; // 用于存储每个拦截器的执行时间 } /** * { @@ -43,7 +44,11 @@ export default class InterceptorManager { rejected = rejected.reject } const fulfilledFn = (result) => { + const startTime = Date.now(); const returned = isFunction(fulfilled) ? fulfilled(result) : result + const endTime = Date.now(); + const executionTime = endTime - startTime; + this.executionTimes.push({ type: 'fulfilled', time: executionTime }); return returned === undefined ? result : returned } const RejectedFn = (reason) => { diff --git a/packages/webpack-plugin/lib/web/processTemplate.js b/packages/webpack-plugin/lib/web/processTemplate.js index 772ef57c18..6fadcc54ce 100644 --- a/packages/webpack-plugin/lib/web/processTemplate.js +++ b/packages/webpack-plugin/lib/web/processTemplate.js @@ -6,7 +6,7 @@ const { matchCondition } = require('../utils/match-condition') module.exports = function (template, { loaderContext, - // hasScoped, + hasScoped, hasComment, isNative, srcMode, @@ -83,8 +83,7 @@ module.exports = function (template, { defs, decodeHTMLText, externalClasses, - // todo 后续输出web也采用mpx的scoped处理 - hasScoped: false, + hasScoped, moduleId, filePath: resourcePath, i18n: null, From 085d2f948d4fc7172e80e5764371a517136c434a Mon Sep 17 00:00:00 2001 From: xuegan Date: Thu, 17 Oct 2024 15:13:58 +0800 Subject: [PATCH 02/13] =?UTF-8?q?feat:=20style-compiler=E4=B8=AD=E5=A4=84?= =?UTF-8?q?=E7=90=86scopeid=E5=92=8CresourceQuery=EF=BC=8Ctemplate-compile?= =?UTF-8?q?r=E4=B8=ADwebexternalClasses=E9=80=BB=E8=BE=91=E8=B0=83?= =?UTF-8?q?=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/style-compiler/index.js | 8 +++ .../lib/template-compiler/compiler.js | 59 ++++++++++++++----- 2 files changed, 51 insertions(+), 16 deletions(-) diff --git a/packages/webpack-plugin/lib/style-compiler/index.js b/packages/webpack-plugin/lib/style-compiler/index.js index 18edda536a..a786c0d0d1 100644 --- a/packages/webpack-plugin/lib/style-compiler/index.js +++ b/packages/webpack-plugin/lib/style-compiler/index.js @@ -54,6 +54,14 @@ module.exports = function (css, map) { } if (mode === 'web' || isReact(mode)) { + if (queryObj.scoped) { + plugins.push(scopeId({ id })) + delete queryObj.scoped + const newResourceQuery = Object.keys(queryObj) + .map(key => `${key}=${encodeURIComponent(queryObj[key])}`) + .join('&') + this.resourceQuery = `?${newResourceQuery}` + } plugins.push(transSpecial({ id })) } diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 8a0b318815..d3f7c34a0c 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2207,29 +2207,56 @@ function processWebExternalClassesHack (el, options) { // 处理externalClasses多层透传 const isComponent = isComponentNode(el, options) if (isComponent) { - options.externalClasses.forEach((classLikeAttrName) => { - const classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val + // options.externalClasses.forEach((classLikeAttrName) => { + // const classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val + // if (classLikeAttrValue) { + // const classNames = classLikeAttrValue.split(/\s+/) + // const replacements = [] + // options.externalClasses.forEach((className) => { + // const index = classNames.indexOf(className) + // if (index > -1) { + // replacements.push(`$attrs[${stringify(className)}]`) + // classNames.splice(index, 1) + // } + // }) + // + // if (classNames.length) { + // replacements.unshift(stringify(classNames.join(' '))) + // } + // + // addAttrs(el, [{ + // name: ':' + classLikeAttrName, + // value: `[${replacements}].join(' ')` + // }]) + // } + // }) + const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class'] + classLikeAttrNames.forEach((classLikeAttrName) => { + let classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val if (classLikeAttrValue) { - const classNames = classLikeAttrValue.split(/\s+/) - const replacements = [] options.externalClasses.forEach((className) => { - const index = classNames.indexOf(className) - if (index > -1) { - replacements.push(`$attrs[${stringify(className)}]`) - classNames.splice(index, 1) - } + const reg = new RegExp('\\b' + className + '\\b', 'g') + const replacement = dash2hump(className) + classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacement}||''}}`) }) - - if (classNames.length) { - replacements.unshift(stringify(classNames.join(' '))) - } - addAttrs(el, [{ - name: ':' + classLikeAttrName, - value: `[${replacements}].join(' ')` + name: classLikeAttrName, + value: classLikeAttrValue }]) } }) + + if (hasScoped && isComponent) { + options.externalClasses.forEach((className) => { + const externalClass = getAndRemoveAttr(el, className).val + if (externalClass) { + addAttrs(el, [{ + name: className, + value: `${externalClass} ${moduleId}` + }]) + } + }) + } } } From 6b01517278c857230b54fbe5079caa8b82238ba2 Mon Sep 17 00:00:00 2001 From: xuegan Date: Thu, 17 Oct 2024 15:33:48 +0800 Subject: [PATCH 03/13] fix: some eslint error --- package.json | 2 +- packages/fetch/src/interceptorManager.js | 5 ----- 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/package.json b/package.json index de01e05da7..cad1d9f705 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "lint": "eslint --ext .js,.ts,.tsx packages/", "fix": "eslint --fix --ext .js,.ts,.tsx packages/", "lint:js": "eslint --ext .js packages/", - "test": "node ./test", + "test": "jest", "release": "npm run lint && npm run test && npx lerna version", "docs:dev": "vuepress dev docs-vuepress", "docs:build": "vuepress build docs-vuepress", diff --git a/packages/fetch/src/interceptorManager.js b/packages/fetch/src/interceptorManager.js index 63f1a2839b..4c5f71b495 100644 --- a/packages/fetch/src/interceptorManager.js +++ b/packages/fetch/src/interceptorManager.js @@ -16,7 +16,6 @@ export default class InterceptorManager { constructor () { // 双队列数组, 0 为 fulfilled 队列，1 为 rejected 队列 this.interceptors = [[], []] - this.executionTimes = []; // 用于存储每个拦截器的执行时间 } /** * { @@ -44,11 +43,7 @@ export default class InterceptorManager { rejected = rejected.reject } const fulfilledFn = (result) => { - const startTime = Date.now(); const returned = isFunction(fulfilled) ? fulfilled(result) : result - const endTime = Date.now(); - const executionTime = endTime - startTime; - this.executionTimes.push({ type: 'fulfilled', time: executionTime }); return returned === undefined ? result : returned } const RejectedFn = (reason) => { From 5673303699cc708b185798334ede7f78572d77d2 Mon Sep 17 00:00:00 2001 From: xuegan Date: Mon, 21 Oct 2024 13:37:51 +0800 Subject: [PATCH 04/13] feat: save webExternalClass change --- .../lib/template-compiler/compiler.js | 66 +++++-------------- 1 file changed, 18 insertions(+), 48 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index d3f7c34a0c..944cf6e8d1 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2199,64 +2199,33 @@ function processWebExternalClassesHack (el, options) { addAttrs(el, [{ name: ':class', - value: `[${replacements}]` + value: `[${replacements}, $attrs[${stringify('p-module-id')}]]` }]) } } // 处理externalClasses多层透传 const isComponent = isComponentNode(el, options) - if (isComponent) { - // options.externalClasses.forEach((classLikeAttrName) => { - // const classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val - // if (classLikeAttrValue) { - // const classNames = classLikeAttrValue.split(/\s+/) - // const replacements = [] - // options.externalClasses.forEach((className) => { - // const index = classNames.indexOf(className) - // if (index > -1) { - // replacements.push(`$attrs[${stringify(className)}]`) - // classNames.splice(index, 1) - // } - // }) - // - // if (classNames.length) { - // replacements.unshift(stringify(classNames.join(' '))) - // } - // - // addAttrs(el, [{ - // name: ':' + classLikeAttrName, - // value: `[${replacements}].join(' ')` - // }]) - // } - // }) - const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class'] - classLikeAttrNames.forEach((classLikeAttrName) => { - let classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val - if (classLikeAttrValue) { - options.externalClasses.forEach((className) => { - const reg = new RegExp('\\b' + className + '\\b', 'g') - const replacement = dash2hump(className) - classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacement}||''}}`) - }) + + if (hasScoped && isComponent) { + // 外层 custom-class = "{{someClass}}" 透传处理 + options.externalClasses.forEach((className) => { + const externalClass = getAndRemoveAttr(el, className).val + const dynamicClass = getAndRemoveAttr(el, ':' + className).val + const classValue = externalClass || dynamicClass + if (classValue) { + addAttrs(el, [{ + name: dynamicClass ? ':' + className : className, + value: `${classValue}` + }]) + } + if (classValue && className !== 'custom-class') { addAttrs(el, [{ - name: classLikeAttrName, - value: classLikeAttrValue + name: 'p-module-id', + value: `${moduleId}` }]) } }) - - if (hasScoped && isComponent) { - options.externalClasses.forEach((className) => { - const externalClass = getAndRemoveAttr(el, className).val - if (externalClass) { - addAttrs(el, [{ - name: className, - value: `${externalClass} ${moduleId}` - }]) - } - }) - } } } @@ -2643,6 +2612,7 @@ function processElement (el, root, options, meta) { processBuiltInComponents(el, meta) // 预处理代码维度条件编译 processIfWeb(el) + processScoped(el) processWebExternalClassesHack(el, options) processComponentGenericsWeb(el, options, meta) return From 31c2a655c4cdf6d5d7b281b07024e021dee3d43c Mon Sep 17 00:00:00 2001 From: xuegan Date: Tue, 22 Oct 2024 14:30:24 +0800 Subject: [PATCH 05/13] =?UTF-8?q?feat:=20=E5=90=88=E5=B9=B6ali=E5=92=8Cweb?= =?UTF-8?q?=E5=85=B3=E4=BA=8EexternalClass=E7=9A=84=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/compiler.js | 99 +++++++++---------- packages/webpack-plugin/lib/utils/const.js | 3 +- 2 files changed, 51 insertions(+), 51 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 944cf6e8d1..daa4e4b40a 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -1,7 +1,7 @@ const JSON5 = require('json5') const he = require('he') const config = require('../config') -const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const') +const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, P_MODULE_ID } = require('../utils/const') const normalize = require('../utils/normalize') const { normalizeCondition } = require('../utils/match-condition') const isValidIdentifierStr = require('../utils/is-valid-identifier-str') @@ -2140,43 +2140,52 @@ function isComponentNode (el, options) { return options.usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component' } -function processAliExternalClassesHack (el, options) { +function processExternalClasses (el, options) { const isComponent = isComponentNode(el, options) - // 处理组件externalClass多层传递 - const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class'] + // const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class'] + // 默认仅处理 'class' 即可？ 应该无需支持 custom-class='i-class' 这种嵌套形写法？ + const classLikeAttrNames = ['class'] + classLikeAttrNames.forEach((classLikeAttrName) => { - let classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val + const classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val if (classLikeAttrValue) { - options.externalClasses.forEach((className) => { - const reg = new RegExp('\\b' + className + '\\b', 'g') - const replacement = dash2hump(className) - classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacement}||''}}`) - }) - addAttrs(el, [{ - name: classLikeAttrName, - value: classLikeAttrValue - }]) + if (mode === 'web') { + processWebClass(classLikeAttrName, classLikeAttrValue, el, options) + } else { + processAliClass(classLikeAttrName, classLikeAttrValue, el, options) + } } }) if (hasScoped && isComponent) { + let needAddPModuleId = false options.externalClasses.forEach((className) => { - const externalClass = getAndRemoveAttr(el, className).val - if (externalClass) { + let attrValue = getAndRemoveAttr(el, className).val + let attrName = className + if (mode === 'web') { + const dynamicClass = getAndRemoveAttr(el, ':' + className).val + if (dynamicClass) { + attrValue = dynamicClass + attrName = ':' + className + } + } + if (attrValue) { addAttrs(el, [{ - name: className, - value: `${externalClass} ${moduleId}` + name: attrName, + value: attrValue }]) + needAddPModuleId = true } }) + if (needAddPModuleId) { + addAttrs(el, [{ + name: P_MODULE_ID, + value: `${moduleId}` + }]) + } } -} - -// externalClasses只能模拟静态传递 -function processWebExternalClassesHack (el, options) { - const staticClass = getAndRemoveAttr(el, 'class').val - if (staticClass) { - const classNames = staticClass.split(/\s+/) + function processWebClass (classLikeAttrName, classLikeAttrValue, el, options) { + const classNames = classLikeAttrValue.split(/\s+/) const replacements = [] options.externalClasses.forEach((className) => { const index = classNames.indexOf(className) @@ -2188,7 +2197,7 @@ function processWebExternalClassesHack (el, options) { if (classNames.length) { addAttrs(el, [{ - name: 'class', + name: classLikeAttrName, value: classNames.join(' ') }]) } @@ -2196,36 +2205,24 @@ function processWebExternalClassesHack (el, options) { if (replacements.length) { const dynamicClass = getAndRemoveAttr(el, ':class').val if (dynamicClass) replacements.push(dynamicClass) - addAttrs(el, [{ name: ':class', - value: `[${replacements}, $attrs[${stringify('p-module-id')}]]` + value: `[${replacements}, $attrs[${stringify(P_MODULE_ID)}]]` }]) } } - // 处理externalClasses多层透传 - const isComponent = isComponentNode(el, options) - - if (hasScoped && isComponent) { - // 外层 custom-class = "{{someClass}}" 透传处理 + function processAliClass (classLikeAttrName, classLikeAttrValue, el, options) { options.externalClasses.forEach((className) => { - const externalClass = getAndRemoveAttr(el, className).val - const dynamicClass = getAndRemoveAttr(el, ':' + className).val - const classValue = externalClass || dynamicClass - if (classValue) { - addAttrs(el, [{ - name: dynamicClass ? ':' + className : className, - value: `${classValue}` - }]) - } - if (classValue && className !== 'custom-class') { - addAttrs(el, [{ - name: 'p-module-id', - value: `${moduleId}` - }]) - } + const reg = new RegExp('\\b' + className + '\\b', 'g') + const replacementClassName = dash2hump(className) + const replacementModuleId = dash2hump(P_MODULE_ID) + classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacementClassName}||''}} {{${replacementModuleId}}}`) }) + addAttrs(el, [{ + name: classLikeAttrName, + value: classLikeAttrValue + }]) } } @@ -2613,7 +2610,8 @@ function processElement (el, root, options, meta) { // 预处理代码维度条件编译 processIfWeb(el) processScoped(el) - processWebExternalClassesHack(el, options) + // processWebExternalClassesHack(el, options) + processExternalClasses(el, options) processComponentGenericsWeb(el, options, meta) return } @@ -2641,7 +2639,8 @@ function processElement (el, root, options, meta) { } if (transAli) { - processAliExternalClassesHack(el, options) + // processAliExternalClassesHack(el, options) + processExternalClasses(el, options) } processIf(el) diff --git a/packages/webpack-plugin/lib/utils/const.js b/packages/webpack-plugin/lib/utils/const.js index 5c02a6240f..e1d4acf682 100644 --- a/packages/webpack-plugin/lib/utils/const.js +++ b/packages/webpack-plugin/lib/utils/const.js @@ -5,5 +5,6 @@ module.exports = { RESOLVE_IGNORED_ERR: new Error('Resolve ignored!'), JSON_JS_EXT: '.json.js', MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名 - MPX_APP_MODULE_ID: 'mpx-app-scope' // app文件moduleId + MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId + P_MODULE_ID: 'p-module-id' } From 1dbc5c3fd24e2bff7a2eb8625f3cf316b619424d Mon Sep 17 00:00:00 2001 From: xuegan Date: Tue, 22 Oct 2024 17:40:19 +0800 Subject: [PATCH 06/13] =?UTF-8?q?feat:=20=E5=A4=84=E7=90=86mpxScoped?= =?UTF-8?q?=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../webpack-plugin/lib/style-compiler/index.js | 17 +++++------------ .../lib/template-compiler/compiler.js | 4 +--- .../webpack-plugin/lib/web/processStyles.js | 3 ++- 3 files changed, 8 insertions(+), 16 deletions(-) diff --git a/packages/webpack-plugin/lib/style-compiler/index.js b/packages/webpack-plugin/lib/style-compiler/index.js index a786c0d0d1..6e9389fd24 100644 --- a/packages/webpack-plugin/lib/style-compiler/index.js +++ b/packages/webpack-plugin/lib/style-compiler/index.js @@ -18,7 +18,8 @@ module.exports = function (css, map) { const cb = this.async() const { resourcePath, queryObj } = parseRequest(this.resource) const mpx = this.getMpx() - const id = queryObj.moduleId || queryObj.mid || '_' + mpx.pathHash(resourcePath) + const mpxStyleOptions = (queryObj.mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {} + const id = queryObj.moduleId || mpxStyleOptions.mid || '_' + mpx.pathHash(resourcePath) const appInfo = mpx.appInfo const defs = mpx.defs const mode = mpx.mode @@ -46,22 +47,14 @@ module.exports = function (css, map) { config.options ) // ali平台下处理scoped和host选择器 - if (mode === 'ali') { - if (queryObj.scoped) { + if (mode === 'ali' || mode === 'web') { + if (queryObj.scoped || mpxStyleOptions.scoped) { plugins.push(scopeId({ id })) } plugins.push(transSpecial({ id })) } - if (mode === 'web' || isReact(mode)) { - if (queryObj.scoped) { - plugins.push(scopeId({ id })) - delete queryObj.scoped - const newResourceQuery = Object.keys(queryObj) - .map(key => `${key}=${encodeURIComponent(queryObj[key])}`) - .join('&') - this.resourceQuery = `?${newResourceQuery}` - } + if (isReact(mode)) { plugins.push(transSpecial({ id })) } diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index daa4e4b40a..1370d797b1 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2142,9 +2142,7 @@ function isComponentNode (el, options) { function processExternalClasses (el, options) { const isComponent = isComponentNode(el, options) - // const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class'] - // 默认仅处理 'class' 即可？ 应该无需支持 custom-class='i-class' 这种嵌套形写法？ - const classLikeAttrNames = ['class'] + const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class'] classLikeAttrNames.forEach((classLikeAttrName) => { const classLikeAttrValue = getAndRemoveAttr(el, classLikeAttrName).val diff --git a/packages/webpack-plugin/lib/web/processStyles.js b/packages/webpack-plugin/lib/web/processStyles.js index 5b26793e28..373a916535 100644 --- a/packages/webpack-plugin/lib/web/processStyles.js +++ b/packages/webpack-plugin/lib/web/processStyles.js @@ -9,10 +9,11 @@ module.exports = function (styles, options, callback) { const attrs = Object.assign({}, style.attrs) if (options.autoScope) attrs.scoped = true attrs.mpxStyleOptions = JSON.stringify({ - // scoped: !!options.autoScope, + scoped: attrs.scoped, // query中包含module字符串会被新版vue-cli中的默认rules当做css-module处理 mid: options.moduleId }) + delete attrs.scoped return attrs } }) From 68740da989cfda312a57596675fc97d72c5e9ab5 Mon Sep 17 00:00:00 2001 From: xuegan Date: Tue, 22 Oct 2024 17:41:10 +0800 Subject: [PATCH 07/13] feat: fix lint error --- packages/webpack-plugin/lib/style-compiler/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/webpack-plugin/lib/style-compiler/index.js b/packages/webpack-plugin/lib/style-compiler/index.js index 6e9389fd24..fd662fe8ae 100644 --- a/packages/webpack-plugin/lib/style-compiler/index.js +++ b/packages/webpack-plugin/lib/style-compiler/index.js @@ -18,7 +18,7 @@ module.exports = function (css, map) { const cb = this.async() const { resourcePath, queryObj } = parseRequest(this.resource) const mpx = this.getMpx() - const mpxStyleOptions = (queryObj.mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {} + const mpxStyleOptions = (queryObj.mpxStyleOptions && JSON.parse(queryObj.mpxStyleOptions)) || {} const id = queryObj.moduleId || mpxStyleOptions.mid || '_' + mpx.pathHash(resourcePath) const appInfo = mpx.appInfo const defs = mpx.defs From bccb5da2efcb50be1b49f46d3d8afa9ebfe7ec3f Mon Sep 17 00:00:00 2001 From: xuegan Date: Wed, 23 Oct 2024 07:04:21 +0800 Subject: [PATCH 08/13] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E8=BE=93?= =?UTF-8?q?=E5=87=BAweb=E7=9A=84externalClasses=E5=80=BC=E6=8B=BC=E6=8E=A5?= =?UTF-8?q?=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/compiler.js | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 1370d797b1..7fc1eaa096 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2188,24 +2188,21 @@ function processExternalClasses (el, options) { options.externalClasses.forEach((className) => { const index = classNames.indexOf(className) if (index > -1) { - replacements.push(`$attrs[${stringify(className)}]`) + replacements.push(`($attrs[${stringify(className)}] || '')`) classNames.splice(index, 1) } }) - if (classNames.length) { + if (replacements.length) { addAttrs(el, [{ - name: classLikeAttrName, - value: classNames.join(' ') + name: ':' + classLikeAttrName, + value: `['${classNames.join(' ')}', ${replacements.join(' ')}, $attrs[${stringify(P_MODULE_ID)}]].join(' ')` }]) - } - - if (replacements.length) { - const dynamicClass = getAndRemoveAttr(el, ':class').val - if (dynamicClass) replacements.push(dynamicClass) + } else if (classNames.length) { + // 静态class拼接 addAttrs(el, [{ - name: ':class', - value: `[${replacements}, $attrs[${stringify(P_MODULE_ID)}]]` + name: classLikeAttrName, + value: classNames.join(' ') }]) } } From d744f5f4219294470913e9db7de195092ed0d0f7 Mon Sep 17 00:00:00 2001 From: xuegan Date: Wed, 23 Oct 2024 23:52:39 +0800 Subject: [PATCH 09/13] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9processWebClass?= =?UTF-8?q?es=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/compiler.js | 75 ++++++++----------- packages/webpack-plugin/lib/utils/const.js | 2 +- 2 files changed, 34 insertions(+), 43 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 7fc1eaa096..403dcd5bd0 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -1,7 +1,7 @@ const JSON5 = require('json5') const he = require('he') const config = require('../config') -const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, P_MODULE_ID } = require('../utils/const') +const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID, PARENT_MODULE_ID } = require('../utils/const') const normalize = require('../utils/normalize') const { normalizeCondition } = require('../utils/match-condition') const isValidIdentifierStr = require('../utils/is-valid-identifier-str') @@ -2156,64 +2156,55 @@ function processExternalClasses (el, options) { }) if (hasScoped && isComponent) { - let needAddPModuleId = false - options.externalClasses.forEach((className) => { - let attrValue = getAndRemoveAttr(el, className).val - let attrName = className - if (mode === 'web') { - const dynamicClass = getAndRemoveAttr(el, ':' + className).val - if (dynamicClass) { - attrValue = dynamicClass - attrName = ':' + className - } - } - if (attrValue) { - addAttrs(el, [{ - name: attrName, - value: attrValue - }]) - needAddPModuleId = true - } + const needAddModuleId = options.externalClasses.some((className) => { + return el.attrsMap[className] || (mode === 'web' && el.attrsMap[':' + className]) }) - if (needAddPModuleId) { + + if (needAddModuleId) { addAttrs(el, [{ - name: P_MODULE_ID, + name: PARENT_MODULE_ID, value: `${moduleId}` }]) } } function processWebClass (classLikeAttrName, classLikeAttrValue, el, options) { - const classNames = classLikeAttrValue.split(/\s+/) - const replacements = [] - options.externalClasses.forEach((className) => { - const index = classNames.indexOf(className) - if (index > -1) { - replacements.push(`($attrs[${stringify(className)}] || '')`) - classNames.splice(index, 1) - } + let classNames = classLikeAttrValue.split(/\s+/) + let hasExternalClass = false + classNames = classNames.map((className) => { + if (options.externalClasses.includes(className)) { + hasExternalClass = true + return `($attrs[${stringify(className)}] || '')` + } + return stringify(className) }) - if (replacements.length) { - addAttrs(el, [{ - name: ':' + classLikeAttrName, - value: `['${classNames.join(' ')}', ${replacements.join(' ')}, $attrs[${stringify(P_MODULE_ID)}]].join(' ')` - }]) - } else if (classNames.length) { - // 静态class拼接 - addAttrs(el, [{ - name: classLikeAttrName, - value: classNames.join(' ') - }]) + if (classLikeAttrName === 'class') { + // 处理动态 class 进行合并 + const dynamicClass = getAndRemoveAttr(el, ':class').val + if (dynamicClass) classNames.push(dynamicClass) + } + + if (hasExternalClass) { + classNames.push(`($attrs[${stringify(PARENT_MODULE_ID)}] || '')`) } + + addAttrs(el, [{ + name: ':' + classLikeAttrName, + value: `[${classNames}].join(' ')` + }]) } function processAliClass (classLikeAttrName, classLikeAttrValue, el, options) { + let hasExternalClass = false options.externalClasses.forEach((className) => { const reg = new RegExp('\\b' + className + '\\b', 'g') const replacementClassName = dash2hump(className) - const replacementModuleId = dash2hump(P_MODULE_ID) - classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacementClassName}||''}} {{${replacementModuleId}}}`) + if (classLikeAttrValue.includes(className)) hasExternalClass = true + classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacementClassName}||''}}`) }) + if (hasExternalClass) { + classLikeAttrValue += ` {{${dash2hump(PARENT_MODULE_ID)}}}` + } addAttrs(el, [{ name: classLikeAttrName, value: classLikeAttrValue diff --git a/packages/webpack-plugin/lib/utils/const.js b/packages/webpack-plugin/lib/utils/const.js index e1d4acf682..88e22096b7 100644 --- a/packages/webpack-plugin/lib/utils/const.js +++ b/packages/webpack-plugin/lib/utils/const.js @@ -6,5 +6,5 @@ module.exports = { JSON_JS_EXT: '.json.js', MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名 MPX_APP_MODULE_ID: 'mpx-app-scope', // app文件moduleId - P_MODULE_ID: 'p-module-id' + PARENT_MODULE_ID: '__pid' } From e33c37f10738b21639d5a83155dd73d68ca57115 Mon Sep 17 00:00:00 2001 From: xuegan Date: Thu, 24 Oct 2024 11:47:50 +0800 Subject: [PATCH 10/13] =?UTF-8?q?feat:=20=E4=BF=AE=E6=94=B9=E6=B7=BB?= =?UTF-8?q?=E5=8A=A0pid=E5=85=9C=E5=BA=95=E9=80=BB=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/webpack-plugin/lib/template-compiler/compiler.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 438159a741..f36369f9d1 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2199,10 +2199,10 @@ function processExternalClasses (el, options) { const reg = new RegExp('\\b' + className + '\\b', 'g') const replacementClassName = dash2hump(className) if (classLikeAttrValue.includes(className)) hasExternalClass = true - classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacementClassName}||''}}`) + classLikeAttrValue = classLikeAttrValue.replace(reg, `{{${replacementClassName} || ''}}`) }) if (hasExternalClass) { - classLikeAttrValue += ` {{${dash2hump(PARENT_MODULE_ID)}}}` + classLikeAttrValue += ` {{${PARENT_MODULE_ID} || ''}}` } addAttrs(el, [{ name: classLikeAttrName, From bdc1943e0cd7e41deef2dcd6a4ac6dab1f39ea50 Mon Sep 17 00:00:00 2001 From: xuegan Date: Thu, 24 Oct 2024 12:13:24 +0800 Subject: [PATCH 11/13] =?UTF-8?q?feat:=20processWebClasses=20=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E5=AF=B9=E4=BA=8E=E5=8A=A8=E6=80=81=20class=20?= =?UTF-8?q?=E7=9A=84=E5=A4=84=E7=90=86?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/compiler.js | 63 +++++++++++++------ 1 file changed, 43 insertions(+), 20 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index f36369f9d1..8b29105699 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2167,30 +2167,53 @@ function processExternalClasses (el, options) { } } function processWebClass (classLikeAttrName, classLikeAttrValue, el, options) { - let classNames = classLikeAttrValue.split(/\s+/) - let hasExternalClass = false - classNames = classNames.map((className) => { - if (options.externalClasses.includes(className)) { - hasExternalClass = true - return `($attrs[${stringify(className)}] || '')` - } - return stringify(className) - }) if (classLikeAttrName === 'class') { - // 处理动态 class 进行合并 - const dynamicClass = getAndRemoveAttr(el, ':class').val - if (dynamicClass) classNames.push(dynamicClass) - } + const classNames = classLikeAttrValue.split(/\s+/) + const replacements = [] + options.externalClasses.forEach((className) => { + const index = classNames.indexOf(className) + if (index > -1) { + replacements.push(`$attrs[${stringify(className)}]`) + classNames.splice(index, 1) + } + }) - if (hasExternalClass) { - classNames.push(`($attrs[${stringify(PARENT_MODULE_ID)}] || '')`) - } + if (classNames.length) { + addAttrs(el, [{ + name: 'class', + value: classNames.join(' ') + }]) + } - addAttrs(el, [{ - name: ':' + classLikeAttrName, - value: `[${classNames}].join(' ')` - }]) + if (replacements.length) { + const dynamicClass = getAndRemoveAttr(el, ':class').val + if (dynamicClass) replacements.push(dynamicClass) + replacements.push(`($attrs[${stringify(PARENT_MODULE_ID)}] || '')`) + + addAttrs(el, [{ + name: ':class', + value: `[${replacements}]` + }]) + } + } else { + let classNames = classLikeAttrValue.split(/\s+/) + let hasExternalClass = false + classNames = classNames.map((className) => { + if (options.externalClasses.includes(className)) { + hasExternalClass = true + return `($attrs[${stringify(className)}] || '')` + } + return stringify(className) + }) + if (hasExternalClass) { + classNames.push(`($attrs[${stringify(PARENT_MODULE_ID)}] || '')`) + } + addAttrs(el, [{ + name: ':' + classLikeAttrName, + value: `[${classNames}].join(' ')` + }]) + } } function processAliClass (classLikeAttrName, classLikeAttrValue, el, options) { From 78c79dcbd84660b667f10664ecbef4464c145c11 Mon Sep 17 00:00:00 2001 From: xuegan Date: Thu, 24 Oct 2024 12:14:43 +0800 Subject: [PATCH 12/13] fix: eslint error --- packages/webpack-plugin/lib/template-compiler/compiler.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 8b29105699..9467a8a761 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2167,7 +2167,6 @@ function processExternalClasses (el, options) { } } function processWebClass (classLikeAttrName, classLikeAttrValue, el, options) { - if (classLikeAttrName === 'class') { const classNames = classLikeAttrValue.split(/\s+/) const replacements = [] From e9ff0696e391f5453d436bd9969f0d6179c35070 Mon Sep 17 00:00:00 2001 From: xuegan Date: Thu, 24 Oct 2024 16:38:18 +0800 Subject: [PATCH 13/13] =?UTF-8?q?feat:=20=E8=B0=83=E6=95=B4class=E6=8C=82?= =?UTF-8?q?=E8=BD=BD=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../lib/template-compiler/compiler.js | 57 ++++++------------- 1 file changed, 18 insertions(+), 39 deletions(-) diff --git a/packages/webpack-plugin/lib/template-compiler/compiler.js b/packages/webpack-plugin/lib/template-compiler/compiler.js index 9467a8a761..bae886f697 100644 --- a/packages/webpack-plugin/lib/template-compiler/compiler.js +++ b/packages/webpack-plugin/lib/template-compiler/compiler.js @@ -2167,47 +2167,26 @@ function processExternalClasses (el, options) { } } function processWebClass (classLikeAttrName, classLikeAttrValue, el, options) { - if (classLikeAttrName === 'class') { - const classNames = classLikeAttrValue.split(/\s+/) - const replacements = [] - options.externalClasses.forEach((className) => { - const index = classNames.indexOf(className) - if (index > -1) { - replacements.push(`$attrs[${stringify(className)}]`) - classNames.splice(index, 1) - } - }) - - if (classNames.length) { - addAttrs(el, [{ - name: 'class', - value: classNames.join(' ') - }]) - } - - if (replacements.length) { - const dynamicClass = getAndRemoveAttr(el, ':class').val - if (dynamicClass) replacements.push(dynamicClass) - replacements.push(`($attrs[${stringify(PARENT_MODULE_ID)}] || '')`) - - addAttrs(el, [{ - name: ':class', - value: `[${replacements}]` - }]) + let classNames = classLikeAttrValue.split(/\s+/) + let hasExternalClass = false + classNames = classNames.map((className) => { + if (options.externalClasses.includes(className)) { + hasExternalClass = true + return `($attrs[${stringify(className)}] || '')` } + return stringify(className) + }) + if (hasExternalClass) { + classNames.push(`($attrs[${stringify(PARENT_MODULE_ID)}] || '')`) + } + if (classLikeAttrName === 'class') { + const dynamicClass = getAndRemoveAttr(el, ':class').val + if (dynamicClass) classNames.push(dynamicClass) + addAttrs(el, [{ + name: ':class', + value: `[${classNames}]` + }]) } else { - let classNames = classLikeAttrValue.split(/\s+/) - let hasExternalClass = false - classNames = classNames.map((className) => { - if (options.externalClasses.includes(className)) { - hasExternalClass = true - return `($attrs[${stringify(className)}] || '')` - } - return stringify(className) - }) - if (hasExternalClass) { - classNames.push(`($attrs[${stringify(PARENT_MODULE_ID)}] || '')`) - } addAttrs(el, [{ name: ':' + classLikeAttrName, value: `[${classNames}].join(' ')`