@mpxjs/webpack-plugin 2.10.6-beta.2 → 2.10.6-beta.3

package/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, isWeb } = require('../utils/env')
-const getTemplateContent = require('../utils/get-template-content')
 
 const no = function () {
   return false
@@ -639,7 +638,7 @@ function parse (template, options) {
   componentGenerics = options.componentGenerics || {}
 
   if (typeof options.usingComponentsInfo === 'string') options.usingComponentsInfo = JSON.parse(options.usingComponentsInfo)
-  usingComponents = Object.keys(options.usingComponentsInfo || {})
+  usingComponents = Object.keys(options.usingComponentsInfo)
   usingComponentsInfo = options.usingComponentsInfo
 
   const _warn = content => {
@@ -662,7 +661,6 @@ function parse (template, options) {
     srcMode,
     type: 'template',
     testKey: 'tag',
-    moduleId,
     data: {
       usingComponents
     },
@@ -691,7 +689,6 @@ function parse (template, options) {
     root = currentParent = getVirtualHostRoot(options, meta)
     stack.push(root)
   }
-  options.template = template // processTemplate时需要对template(只用于处理含name的情况)做截取
 
   parseHTML(template, {
     warn: warn$1,
@@ -724,7 +721,6 @@ function parse (template, options) {
 
       currentParent.children.push(element)
       element.parent = currentParent
-
       processElement(element, root, options, meta)
 
       tagNames.add(element.tag)
@@ -1430,6 +1426,7 @@ function processEvent (el, options) {
           }
         }
       })
+
       addAttrs(el, [
         {
           name: resultName || config[mode].event.getEvent(type),
@@ -1465,13 +1462,6 @@ function wrapMustache (val) {
   return val && !tagRE.test(val) ? `{{${val}}}` : val
 }
 
-function vbindMustache (val) {
-  const bindREG = /\{\{((?:.|\n|\r|\.{3})+?)\}\}(?!})/
-  const match = bindREG.exec(val) || []
-  const matchStr = match[1]?.trim()
-  return matchStr ? `{${matchStr}}` : val
-}
-
 function parseOptionalChaining (str) {
   const wxsName = `${optionalChainWxsName}.g`
   let optionsRes
@@ -2312,7 +2302,7 @@ function processExternalClasses (el, options) {
     let classNames = classLikeAttrValue.split(/\s+/)
     let hasExternalClass = false
     classNames = classNames.map((className) => {
-      if (options.externalClasses?.includes(className)) {
+      if (options.externalClasses.includes(className)) {
         hasExternalClass = true
         return `($attrs[${stringify(className)}] || '')`
       }
@@ -2355,12 +2345,12 @@ function processExternalClasses (el, options) {
 }
 
 function processScoped (el) {
-  if (hasScoped && isRealNode(el) && (isWeb(mode) && el.tag !== 'component')) { // 处理web下 template第一个元素不设置mpx-app-scope
+  if (hasScoped && isRealNode(el)) {
     const rootModuleId = ctorType === 'component' ? '' : MPX_APP_MODULE_ID // 处理app全局样式对页面的影响
     const staticClass = getAndRemoveAttr(el, 'class').val
     addAttrs(el, [{
       name: 'class',
-      value: `${staticClass || ''} ${moduleId || ''} ${rootModuleId}`
+      value: `${staticClass || ''} ${moduleId} ${rootModuleId}`
     }])
   }
 }
@@ -2459,7 +2449,7 @@ function getVirtualHostRoot (options, meta) {
         const rootView = createASTElement('view', [
           {
             name: 'class',
-            value: `${MPX_ROOT_VIEW} ${moduleId ? 'host-' + moduleId : ''}` // 解决template2vue中拿不到moduleId的情况
+            value: `${MPX_ROOT_VIEW} host-${moduleId}`
           },
           {
             name: 'v-on',
@@ -2538,33 +2528,8 @@ function processTemplate (el) {
   }
 }
 
-function processImport (el, meta) { // 收集import引用的地址
-  if (el.tag === 'import' && el.attrsMap.src) {
-    if (!meta.templateSrcList) {
-      meta.templateSrcList = []
-    }
-    if (!meta.templateSrcList.includes(el.attrsMap.src)) {
-      meta.templateSrcList.push(el.attrsMap.src)
-    }
-  }
-}
-
-function postProcessTemplate (el, meta, options) {
+function postProcessTemplate (el) {
   if (el.isTemplate) {
-    if (mode === 'web') {
-      if (!meta.inlineTemplateMap) {
-        meta.inlineTemplateMap = {}
-      }
-      const name = el.attrsMap.name // 行内的template有name就收集template的内容和给内容生成一个地址
-      if (name) {
-        const content = getTemplateContent(options.template, name)
-        const filePath = options.filePath.replace(/.mpx$/, `-${name}.wxml`)
-        meta.inlineTemplateMap[name] = {
-          filePath,
-          content
-        }
-      }
-    }
     processingTemplate = false
     return true
   }
@@ -2714,7 +2679,6 @@ function processMpxTagName (el) {
 }
 
 function processElement (el, root, options, meta) {
-  const initialTag = el.tag // 预存，在这个阶段增加_fakeTemplate值会影响web小程序元素trans web元素
   processAtMode(el)
   // 如果已经标记了这个元素要被清除，直接return跳过后续处理步骤
   if (el._matchStatus === statusEnum.MISMATCH) {
@@ -2741,17 +2705,10 @@ function processElement (el, root, options, meta) {
   const transAli = mode === 'ali' && srcMode === 'wx'
 
   if (isWeb(mode)) {
-    if (initialTag === 'block') {
-      el._fakeTemplate = true // 该值是在template2vue中处理block转换的template的情况
-    }
     // 收集内建组件
     processBuiltInComponents(el, meta)
     // 预处理代码维度条件编译
     processIfWeb(el)
-    // 预处理template逻辑
-    processTemplate(el)
-    // 预处理import逻辑
-    processImport(el, meta)
     processScoped(el)
     processEventWeb(el)
     // processWebExternalClassesHack(el, options)
@@ -2814,9 +2771,8 @@ function processElement (el, root, options, meta) {
 function closeElement (el, options, meta) {
   postProcessAtMode(el)
   postProcessWxs(el, meta)
+
   if (isWeb(mode)) {
-    // 处理web下template逻辑
-    postProcessTemplate(el, meta, options)
     // 处理代码维度条件编译移除死分支
     postProcessIf(el)
     return
@@ -2827,7 +2783,7 @@ function closeElement (el, options, meta) {
     return
   }
 
-  const isTemplate = postProcessTemplate(el, meta) || processingTemplate
+  const isTemplate = postProcessTemplate(el) || processingTemplate
   if (!isTemplate) {
     if (!isNative) {
       postProcessComponentIs(el, (child) => {
@@ -2949,11 +2905,6 @@ function serialize (root) {
           result += node.text
         }
       }
-      if (mode === 'web') {
-        if ((node.tag === 'template' && node.attrsMap && node.attrsMap.name) || node.tag === 'import') {
-          return result
-        }
-      }
 
       if (node.type === 1) {
         if (node.tag !== 'temp-node') {
@@ -3258,7 +3209,6 @@ module.exports = {
   genNode,
   makeAttrsMap,
   stringifyAttr,
-  vbindMustache,
   parseMustache,
   parseMustacheWithContext,
   stringifyWithResolveComputed,

package/lib/utils/dom-tag-config.js

@@ -81,6 +81,19 @@ const isBuildInTag = makeMap(
   'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
 )
 
+/**
+ * 是否为mpx2rn内置组件
+ */
+const isBuildInReactTag = makeMap(
+  'mpx-web-view,mpx-view,mpx-video,mpx-textarea,mpx-text,mpx-switch,' +
+  'mpx-swiper,mpx-swiper-item,mpx-simple-view,mpx-simple-text,mpx-scroll-view,' +
+  'mpx-root-portal,mpx-radio,mpx-radio-group,mpx-navigator,mpx-movable-view,' +
+  'mpx-movable-area,mpx-label,mpx-keyboard-avoiding-view,mpx-input,mpx-inline-text,' +
+  'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
+  'mpx-rich-text,mpx-portal,mpx-popup,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
+  'mpx-icon,mpx-canvas'
+)
+
 const isSpace = makeMap('ensp,emsp,nbsp')
 
 const isContWidth = makeMap('col,colgroup,img,table,td,th,tr')
@@ -111,5 +124,6 @@ module.exports = {
   isContWidth,
   isContHeight,
   isNativeMiniTag,
-  isContConRow
+  isContConRow,
+  isBuildInReactTag
 }

package/lib/web/index.js

@@ -108,8 +108,6 @@ module.exports = function ({
         builtInComponentsMap: templateRes.builtInComponentsMap,
         genericsInfo: templateRes.genericsInfo,
         wxsModuleMap: templateRes.wxsModuleMap,
-        templateSrcList: templateRes.templateSrcList,
-        inlineTemplateMap: templateRes.inlineTemplateMap,
         localComponentsMap: jsonRes.localComponentsMap
       }, callback)
     }

package/lib/web/processScript.js

@@ -3,8 +3,6 @@ const loaderUtils = require('loader-utils')
 const normalize = require('../utils/normalize')
 const shallowStringify = require('../utils/shallow-stringify')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
-const wxmlTemplateLoader = normalize.lib('web/wxml-template-loader')
-const WriteVfsDependency = require('../dependencies/WriteVfsDependency')
 const {
   buildComponentsMap,
   getRequireScript,
@@ -24,20 +22,18 @@ module.exports = function (script, {
   builtInComponentsMap,
   genericsInfo,
   wxsModuleMap,
-  templateSrcList,
-  inlineTemplateMap,
   localComponentsMap
 }, callback) {
-  const { projectRoot, appInfo, webConfig, __vfs: vfs, parentLocalComponentsMap } = loaderContext.getMpx()
+  const { projectRoot, appInfo, webConfig } = loaderContext.getMpx()
 
   let output = '/* script */\n'
+
   let scriptSrcMode = srcMode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
     script = { tag: 'script' }
   }
-
   output += genComponentTag(script, {
     attrs (script) {
       const attrs = Object.assign({}, script.attrs)
@@ -62,36 +58,17 @@ module.exports = function (script, {
           content += `  wxsModules.${module} = ${expression}\n`
         })
       }
-      content += 'const templateModules = {}\n'
-      if (templateSrcList?.length) { // import标签处理
-        templateSrcList?.forEach((item) => {
-          content += `
-          const tempLoaderResult = require(${stringifyRequest(this, `!!${wxmlTemplateLoader}!${item}`)})\n
-          Object.assign(templateModules, tempLoaderResult)\n`
-        })
-      }
-      // 把wxml要的localComponentsMap merge到parentLocalComponentsMap中这样在 template2vue中就可以拿到对应的值
-      Object.assign(parentLocalComponentsMap, localComponentsMap)
+
       // 获取组件集合
       const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig })
+
       // 获取pageConfig
       const pageConfig = {}
       if (ctorType === 'page') {
         Object.assign(pageConfig, jsonConfig)
         delete pageConfig.usingComponents
       }
-      if (inlineTemplateMap) { // 处理行内template(只有属性为name的情况)
-        const inlineTemplateMapLists = Object.keys(inlineTemplateMap)
-        if (inlineTemplateMapLists.length) {
-          inlineTemplateMapLists.forEach((name) => {
-            const { filePath, content } = inlineTemplateMap[name]
-            loaderContext._module.addPresentationalDependency(new WriteVfsDependency(filePath, content)) // 处理缓存报错的情况
-            vfs.writeModule(filePath, content) // 截取template写入文件
-            const expression = `getComponent(require(${stringifyRequest(loaderContext, `${filePath}?is=${name}&localComponentsMap=${encodeURIComponent(JSON.stringify(localComponentsMap))}&isTemplate`)}))`
-            componentsMap[name] = expression
-          })
-        }
-      }
+
       content += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, webConfig, hasApp })
       content += getRequireScript({ ctorType, script, loaderContext })
       content += `
@@ -101,7 +78,7 @@ module.exports = function (script, {
     outputPath: ${JSON.stringify(outputPath)},
     pageConfig: ${JSON.stringify(pageConfig)},
     // @ts-ignore
-    componentsMap: Object.assign(${shallowStringify(componentsMap)}, templateModules),
+    componentsMap: ${shallowStringify(componentsMap)},
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},
     wxsMixin: getWxsMixin(wxsModules),
@@ -110,6 +87,7 @@ module.exports = function (script, {
       return content
     }
   })
+
   callback(null, {
     output
   })

package/lib/web/processTemplate.js

@@ -31,7 +31,7 @@ module.exports = function (template, {
   const { resourcePath, rawResourcePath } = parseRequest(loaderContext.resource)
   const builtInComponentsMap = {}
 
-  let wxsModuleMap, genericsInfo, inlineTemplateMap, templateSrcList
+  let wxsModuleMap, genericsInfo
   let output = '/* template */\n'
 
   if (ctorType === 'app') {
@@ -54,6 +54,7 @@ module.exports = function (template, {
     if (template.lang) {
       return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans web mode temporarily, we will support it in the future!'))
     }
+
     output += genComponentTag(template, (template) => {
       if (ctorType === 'app') {
         return template.content
@@ -103,12 +104,6 @@ module.exports = function (template, {
             wxsContentMap[`${rawResourcePath}~${module}`] = meta.wxsContentMap[module]
           }
         }
-        if (meta.inlineTemplateMap) {
-          inlineTemplateMap = meta.inlineTemplateMap
-        }
-        if (meta.templateSrcList?.length) {
-          templateSrcList = meta.templateSrcList
-        }
         if (meta.builtInComponentsMap) {
           Object.keys(meta.builtInComponentsMap).forEach((name) => {
             builtInComponentsMap[name] = {
@@ -119,16 +114,15 @@ module.exports = function (template, {
         if (meta.genericsInfo) {
           genericsInfo = meta.genericsInfo
         }
-        return templateCompiler.serialize(root, moduleId) // 增加moduleId给到template2vue拿到正确的scopedId
+        return templateCompiler.serialize(root)
       }
     })
     output += '\n'
   }
+
   callback(null, {
     output,
     builtInComponentsMap,
-    inlineTemplateMap,
-    templateSrcList,
     genericsInfo,
     wxsModuleMap
   })

package/lib/web/script-helper.js

@@ -13,7 +13,7 @@ function stringifyRequest (loaderContext, request) {
 
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
-    return `/* webpackChunkName: "${chunkName}" */`
+    return `/* webpackChunkName: "${chunkName}/index" */`
   }
   return ''
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.6-beta.2",
+  "version": "2.10.6-beta.3",
   "description": "mpx compile core",
   "keywords": [
     "mpx"

package/lib/dependencies/WriteVfsDependency.js

@@ -1,46 +0,0 @@
-const NullDependency = require('webpack/lib/dependencies/NullDependency')
-const makeSerializable = require('webpack/lib/util/makeSerializable')
-
-class WriteVfsDependency extends NullDependency {
-  constructor (filename, content) {
-    super()
-    this.filename = filename
-    this.content = content
-  }
-
-  get type () {
-    return 'mpx app entry'
-  }
-
-  mpxAction (module, compilation, callback) {
-    const mpx = compilation.__mpx__
-    const vfs = mpx.__vfs
-    if (vfs) {
-      vfs.writeModule(this.filename, this.content)
-    }
-    return callback()
-  }
-
-  serialize (context) {
-    const { write } = context
-    write(this.filename)
-    write(this.content)
-    super.serialize(context)
-  }
-
-  deserialize (context) {
-    const { read } = context
-    this.filename = read()
-    this.content = read()
-    super.deserialize(context)
-  }
-}
-
-WriteVfsDependency.Template = class WriteVfsDependencyTemplate {
-  apply () {
-  }
-}
-
-makeSerializable(WriteVfsDependency, '@mpxjs/webpack-plugin/lib/dependencies/WriteVfsDependency')
-
-module.exports = WriteVfsDependency

package/lib/utils/get-template-content.js

@@ -1,47 +0,0 @@
-/*
- 对template.wxml文件做截取
- @source原始小程序文件
- @name 要匹配的该name的template
- */
-module.exports = function (source, name) {
-  // 使用正则表达式匹配具有 name 的 template 标签及其所有子元素
-  // 正则表达式使用非贪婪匹配来递归匹配嵌套的 template
-  const regex = new RegExp(`(<template[^>]*\\bname=["|']${name}["|'][^>]*>).*?`, 'g')
-
-  let startIndex = 0
-  let endIndex = 0
-  const match = regex.exec(source)
-  // 逐个处理匹配到的 template 标签及其内容
-  if (match) {
-    const matchRes = match[0]
-    const reg = /<\/?template\s*[^>]*>/g
-    let n = 0
-    startIndex = match.index
-    endIndex = startIndex + matchRes.length
-    let html = source.slice(endIndex)
-    while (html) {
-      const matchRes = html.match(reg)
-      if (matchRes.length) {
-        const matchTemp = matchRes[0]
-        const matchIndex = html.indexOf(matchTemp)
-        const matchLength = matchTemp.length
-        const cutLength = matchIndex + matchLength
-        if (matchTemp.startsWith('</template>')) {
-          if (n === 0) {
-            endIndex += cutLength
-            break
-          } else {
-            n--
-          }
-        } else {
-          n++
-        }
-        endIndex += cutLength
-        html = html.slice(cutLength)
-      }
-    }
-  } else {
-    return ''
-  }
-  return source.slice(startIndex, endIndex)
-}