@mpxjs/webpack-plugin 2.8.40-test → 2.8.40-test.2

package/lib/web/processScript.js

@@ -1,33 +1,8 @@
 const genComponentTag = require('../utils/gen-component-tag')
 const loaderUtils = require('loader-utils')
-const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
-const hasOwn = require('../utils/has-own')
-const createHelpers = require('../helpers')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
-const tabBarContainerPath = normalize.lib('runtime/components/web/mpx-tab-bar-container.vue')
-const tabBarPath = normalize.lib('runtime/components/web/mpx-tab-bar.vue')
-
-function shallowStringify (obj) {
-  const arr = []
-  for (const key in obj) {
-    if (hasOwn(obj, key)) {
-      let value = obj[key]
-      if (Array.isArray(value)) {
-        value = `[${value.join(',')}]`
-      }
-      arr.push(`'${key}':${value}`)
-    }
-  }
-  return `{${arr.join(',')}}`
-}
-
-function getAsyncChunkName (chunkName) {
-  if (chunkName && typeof chunkName !== 'boolean') {
-    return `/* webpackChunkName: "${chunkName}" */`
-  }
-  return ''
-}
+const { buildComponentsMap, getRequireScript, buildGlobalParams, shallowStringify } = require('./script-helper')
 
 module.exports = function (script, {
   loaderContext,
@@ -38,50 +13,14 @@ module.exports = function (script, {
   componentGenerics,
   jsonConfig,
   outputPath,
-  tabBarMap,
-  tabBarStr,
   builtInComponentsMap,
   genericsInfo,
   wxsModuleMap,
-  localComponentsMap,
-  localPagesMap
+  localComponentsMap
 }, callback) {
-  const {
-    i18n,
-    projectRoot,
-    webConfig,
-    appInfo
-  } = loaderContext.getMpx()
-  const { getRequire } = createHelpers(loaderContext)
-  const tabBar = jsonConfig.tabBar
-
-  const emitWarning = (msg) => {
-    loaderContext.emitWarning(
-      new Error('[script processor][' + loaderContext.resource + ']: ' + msg)
-    )
-  }
+  const { projectRoot, appInfo } = loaderContext.getMpx()
 
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
-  const tabBarPagesMap = {}
-  if (tabBar && tabBarMap) {
-    // 挂载tabBar组件
-    const tabBarRequest = stringifyRequest(addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { isComponent: true }))
-    tabBarPagesMap['mpx-tab-bar'] = `getComponent(require(${tabBarRequest}))`
-    // 挂载tabBar页面
-    Object.keys(tabBarMap).forEach((pagePath) => {
-      const pageCfg = localPagesMap[pagePath]
-      if (pageCfg) {
-        const pageRequest = stringifyRequest(pageCfg.resource)
-        if (pageCfg.async) {
-          tabBarPagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
-        } else {
-          tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
-        }
-      } else {
-        emitWarning(`TabBar page path ${pagePath} is not exist in local page map, please check!`)
-      }
-    })
-  }
 
   let output = '/* script */\n'
 
@@ -101,59 +40,7 @@ module.exports = function (script, {
       return attrs
     },
     content (script) {
-      let content = `\n  import processOption, { getComponent, getWxsMixin } from ${stringifyRequest(optionProcessorPath)}\n`
-      // add import
-      if (ctorType === 'app') {
-        content += `  import '@mpxjs/webpack-plugin/lib/runtime/base.styl'
-  import Vue from 'vue'
-  import VueRouter from 'vue-router'
-  import Mpx from '@mpxjs/core'
-  Vue.use(VueRouter)
-  global.getApp = function(){}
-  global.getCurrentPages = function(){
-    const router = global.__mpxRouter
-    if(!router) return []
-    // @ts-ignore
-    return (router.lastStack || router.stack).map(item => {
-      let page
-      const vnode = item.vnode
-      if(vnode && vnode.componentInstance) {
-        page = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$refs.tabBarPage : vnode.componentInstance
-      }
-      return page || { route: item.path.slice(1) }
-    })
-  }
-  global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
-  global.__mpxGenericsMap = {}
-  global.__mpxOptionsMap = {}
-  global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
-  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
-  global.__mpxTransRpxFn = ${webConfig.transRpxFn}\n`
-        if (i18n) {
-          const i18nObj = Object.assign({}, i18n)
-          content += `  import VueI18n from 'vue-i18n'
-  import { createI18n } from 'vue-i18n-bridge'
-
-  Vue.use(VueI18n , { bridge: true })\n`
-          const requestObj = {}
-          const i18nKeys = ['messages', 'dateTimeFormats', 'numberFormats']
-          i18nKeys.forEach((key) => {
-            if (i18nObj[`${key}Path`]) {
-              requestObj[key] = stringifyRequest(i18nObj[`${key}Path`])
-              delete i18nObj[`${key}Path`]
-            }
-          })
-          content += `  const i18nCfg = ${JSON.stringify(i18nObj)}\n`
-          Object.keys(requestObj).forEach((key) => {
-            content += `  i18nCfg.${key} = require(${requestObj[key]})\n`
-          })
-          content += '  i18nCfg.legacy = false\n'
-          content += `  const i18n = createI18n(i18nCfg, VueI18n)
-  Vue.use(i18n)
-  Mpx.i18n = i18n
-  \n`
-        }
-      }
+      let content = `\n  import processComponentOption, { getComponent, getWxsMixin } from ${stringifyRequest(optionProcessorPath)}\n`
       let hasApp = true
       if (!appInfo.name) {
         hasApp = false
@@ -167,65 +54,10 @@ module.exports = function (script, {
           content += `  wxsModules.${module} = ${expression}\n`
         })
       }
-      let firstPage = ''
-      const pagesMap = {}
-      const componentsMap = {}
-      Object.keys(localPagesMap).forEach((pagePath) => {
-        const pageCfg = localPagesMap[pagePath]
-        const pageRequest = stringifyRequest(pageCfg.resource)
-        if (tabBarMap && tabBarMap[pagePath]) {
-          pagesMap[pagePath] = `getComponent(require(${stringifyRequest(tabBarContainerPath)}), { __mpxBuiltIn: true })`
-        } else {
-          if (pageCfg.async) {
-            pagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
-          } else {
-            // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
-            pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
-          }
-        }
-        if (pagePath === jsonConfig.entryPagePath) {
-          firstPage = pagePath
-        }
-        if (!firstPage && pageCfg.isFirst) {
-          firstPage = pagePath
-        }
-      })
-
-      Object.keys(localComponentsMap).forEach((componentName) => {
-        const componentCfg = localComponentsMap[componentName]
-        const componentRequest = stringifyRequest(componentCfg.resource)
-        if (componentCfg.async) {
-          componentsMap[componentName] = `()=>import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(res => getComponent(res))`
-        } else {
-          componentsMap[componentName] = `getComponent(require(${componentRequest}))`
-        }
-      })
-
-      Object.keys(builtInComponentsMap).forEach((componentName) => {
-        const componentCfg = builtInComponentsMap[componentName]
-        const componentRequest = stringifyRequest(componentCfg.resource)
-        componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
-      })
-
-      content += `  global.currentModuleId = ${JSON.stringify(moduleId)}\n`
-      content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
-      content += `  global.currentInject = ${JSON.stringify({ moduleId })}\n`
-      if (!isProduction) {
-        content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
-      }
-
-      content += '  /** script content **/\n'
 
-      // 传递ctorType以补全js内容
-      const extraOptions = {
-        ctorType,
-        lang: script.lang || 'js'
-      }
-      // todo 仅靠vueContentCache保障模块唯一性还是不够严谨，后续需要考虑去除原始query后构建request
-      content += `  ${getRequire('script', script, extraOptions)}\n`
+      // 获取组件集合
+      const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext })
 
-      // createApp/Page/Component执行完成后立刻获取当前的option并暂存
-      content += `  const currentOption = global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
       // 获取pageConfig
       const pageConfig = {}
       if (ctorType === 'page') {
@@ -240,40 +72,25 @@ module.exports = function (script, {
             pageConfig[key] = jsonConfig[key]
           })
       }
-      // 为了执行顺序正确，tabBarPagesMap在app逻辑执行完成后注入，保障小程序中app->page->component的js执行顺序
-      if (tabBarStr && tabBarPagesMap) {
-        content += `  global.__tabBar = ${tabBarStr}
-  Vue.observable(global.__tabBar)
-  // @ts-ignore
-  global.__tabBarPagesMap = ${shallowStringify(tabBarPagesMap)}\n`
-      }
-      // 配置平台转换通过createFactory在core中convertor中定义和进行
-      // 通过processOption进行组件注册和路由注入
-      content += `  export default processOption(
-    currentOption,
-    ${JSON.stringify(ctorType)},
-    ${JSON.stringify(firstPage)},
-    ${JSON.stringify(outputPath)},
-    ${JSON.stringify(pageConfig)},
-    // @ts-ignore
-    ${shallowStringify(pagesMap)},
+
+      content += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction })
+      content += getRequireScript({ ctorType, script, loaderContext })
+      content += `
+  export default processComponentOption({
+    option: global.__mpxOptionsMap[${JSON.stringify(moduleId)}],
+    ctorType: ${JSON.stringify(ctorType)},
+    outputPath: ${JSON.stringify(outputPath)},
+    pageConfig: ${JSON.stringify(pageConfig)},
     // @ts-ignore
-    ${shallowStringify(componentsMap)},
-    ${JSON.stringify(tabBarMap)},
-    ${JSON.stringify(componentGenerics)},
-    ${JSON.stringify(genericsInfo)},
-    getWxsMixin(wxsModules),
-    ${hasApp}`
-      if (ctorType === 'app') {
-        content += `,
-    Vue,
-    VueRouter`
-      }
-      content += '\n  )\n'
+    componentsMap: ${shallowStringify(componentsMap)},
+    componentGenerics: ${JSON.stringify(componentGenerics)},
+    genericsInfo: ${JSON.stringify(genericsInfo)},
+    mixin: getWxsMixin(wxsModules),
+    hasApp: ${hasApp}
+  })\n`
       return content
     }
   })
-  output += '\n'
 
   callback(null, {
     output

package/lib/web/processTemplate.js

@@ -23,6 +23,7 @@ module.exports = function (template, {
     decodeHTMLText,
     externalClasses,
     checkUsingComponents,
+    webConfig,
     autoVirtualHostRules
   } = mpx
   const { resourcePath } = parseRequest(loaderContext.resource)
@@ -32,9 +33,11 @@ module.exports = function (template, {
   let output = '/* template */\n'
 
   if (ctorType === 'app') {
+    const { el } = webConfig
+    const idName = el?.match(/#(.*)/)?.[1] || 'app'
     template = {
       tag: 'template',
-      content: '<div class="app"><mpx-keep-alive><router-view class="page"></router-view></mpx-keep-alive></div>'
+      content: `<div id="${idName}"><mpx-keep-alive><router-view></router-view></mpx-keep-alive></div>`
     }
     builtInComponentsMap['mpx-keep-alive'] = {
       resource: addQuery('@mpxjs/webpack-plugin/lib/runtime/components/web/mpx-keep-alive.vue', { isComponent: true })

package/lib/web/script-helper.js

@@ -0,0 +1,202 @@
+const hasOwn = require('../utils/has-own')
+const loaderUtils = require('loader-utils')
+const normalize = require('../utils/normalize')
+const createHelpers = require('../helpers')
+const tabBarContainerPath = normalize.lib('runtime/components/web/mpx-tab-bar-container.vue')
+const tabBarPath = normalize.lib('runtime/components/web/mpx-tab-bar.vue')
+const addQuery = require('../utils/add-query')
+
+function stringifyRequest (loaderContext, request) {
+  return loaderUtils.stringifyRequest(loaderContext, request)
+}
+
+function shallowStringify (obj) {
+  const arr = []
+  for (const key in obj) {
+    if (hasOwn(obj, key)) {
+      let value = obj[key]
+      if (Array.isArray(value)) {
+        value = `[${value.join(',')}]`
+      }
+      arr.push(`'${key}':${value}`)
+    }
+  }
+  return `{${arr.join(',')}}`
+}
+
+function getAsyncChunkName (chunkName) {
+  if (chunkName && typeof chunkName !== 'boolean') {
+    return `/* webpackChunkName: "${chunkName}" */`
+  }
+  return ''
+}
+
+function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext }) {
+  const componentsMap = {}
+  if (localComponentsMap) {
+    Object.keys(localComponentsMap).forEach((componentName) => {
+      const componentCfg = localComponentsMap[componentName]
+      const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
+      if (componentCfg.async) {
+        componentsMap[componentName] = `()=>import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(res => getComponent(res))`
+      } else {
+        componentsMap[componentName] = `getComponent(require(${componentRequest}))`
+      }
+    })
+  }
+  if (builtInComponentsMap) {
+    Object.keys(builtInComponentsMap).forEach((componentName) => {
+      const componentCfg = builtInComponentsMap[componentName]
+      const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
+      componentsMap[componentName] = `getComponent(require(${componentRequest}), { __mpxBuiltIn: true })`
+    })
+  }
+  return componentsMap
+}
+
+function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBarStr, jsonConfig }) {
+  let globalTabBar = ''
+  let firstPage = ''
+  const pagesMap = {}
+  const tabBarPagesMap = {}
+  if (tabBar && tabBarMap) {
+    // 挂载tabBar组件
+    const tabBarRequest = stringifyRequest(loaderContext, addQuery(tabBar.custom ? './custom-tab-bar/index' : tabBarPath, { isComponent: true }))
+    tabBarPagesMap['mpx-tab-bar'] = `getComponent(require(${tabBarRequest}))`
+    // 挂载tabBar页面
+    Object.keys(tabBarMap).forEach((pagePath) => {
+      const pageCfg = localPagesMap[pagePath]
+      if (pageCfg) {
+        const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
+        if (pageCfg.async) {
+          tabBarPagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)}${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+        } else {
+          tabBarPagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
+        }
+      } else {
+        loaderContext.emitWarning(
+          new Error('[json processor][' + loaderContext.resource + ']: ' + `TabBar page path ${pagePath} is not exist in local page map, please check!`)
+        )
+      }
+    })
+  }
+  if (tabBarStr && tabBarPagesMap) {
+    globalTabBar += `
+  global.__tabBar = ${tabBarStr}
+  Vue.observable(global.__tabBar)
+  // @ts-ignore
+  global.__tabBarPagesMap = ${shallowStringify(tabBarPagesMap)}\n`
+  }
+  Object.keys(localPagesMap).forEach((pagePath) => {
+    const pageCfg = localPagesMap[pagePath]
+    const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
+    if (tabBarMap && tabBarMap[pagePath]) {
+      pagesMap[pagePath] = `getComponent(require(${stringifyRequest(loaderContext, tabBarContainerPath)}), { __mpxBuiltIn: true })`
+    } else {
+      if (pageCfg.async) {
+        pagesMap[pagePath] = `()=>import(${getAsyncChunkName(pageCfg.async)} ${pageRequest}).then(res => getComponent(res, { __mpxPageRoute: ${JSON.stringify(pagePath)} }))`
+      } else {
+        // 为了保持小程序中app->page->component的js执行顺序，所有的page和component都改为require引入
+        pagesMap[pagePath] = `getComponent(require(${pageRequest}), { __mpxPageRoute: ${JSON.stringify(pagePath)} })`
+      }
+    }
+
+    if (pagePath === jsonConfig.entryPagePath) {
+      firstPage = pagePath
+    }
+    if (!firstPage && pageCfg.isFirst) {
+      firstPage = pagePath
+    }
+  })
+  return {
+    pagesMap,
+    firstPage,
+    globalTabBar
+  }
+}
+
+function getRequireScript ({ ctorType, script, loaderContext }) {
+  let content = '  /** script content **/\n'
+  const extraOptions = { ctorType, lang: script.lang || 'js' }
+  const { getRequire } = createHelpers(loaderContext)
+  content += `  ${getRequire('script', script, extraOptions)}\n`
+  return content
+}
+
+function buildGlobalParams ({ moduleId, scriptSrcMode, loaderContext, isProduction, jsonConfig, webConfig, isMain, globalTabBar }) {
+  let content = ''
+  if (isMain) {
+    content += `
+  global.getApp = function(){}
+  global.getCurrentPages = function () {
+    if (!(typeof window !== 'undefined')) {
+      console.error('[Mpx runtime error]: Dangerous API! global.getCurrentPages is running in non browser environment, It may cause some problems, please use this method with caution')
+    }
+    const router = global.__mpxRouter
+    if(!router) return []
+    // @ts-ignore
+    return (router.lastStack || router.stack).map(item => {
+      let page
+      const vnode = item.vnode
+      if (vnode && vnode.componentInstance) {
+        page = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$refs.tabBarPage : vnode.componentInstance
+      }
+      return page || { route: item.path.slice(1) }
+    })
+  }
+  global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
+  global.__mpxGenericsMap = {}
+  global.__mpxOptionsMap = {}
+  global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
+  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
+  global.__mpxTransRpxFn = ${webConfig.transRpxFn}\n`
+    if (globalTabBar) {
+      content += globalTabBar
+    }
+  }
+  content += `  global.currentModuleId = ${JSON.stringify(moduleId)}\n`
+  content += `  global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
+  content += `  global.currentInject = ${JSON.stringify({ moduleId })}\n`
+  if (!isProduction) {
+    content += `  global.currentResource = ${JSON.stringify(loaderContext.resourcePath)}\n`
+  }
+  return content
+}
+
+function buildI18n ({ i18n, loaderContext }) {
+  let i18nContent = ''
+  const i18nObj = Object.assign({}, i18n)
+  i18nContent += `
+  import VueI18n from 'vue-i18n'
+  import { createI18n } from 'vue-i18n-bridge'
+  Vue.use(VueI18n , { bridge: true })\n`
+  const requestObj = {}
+  const i18nKeys = ['messages', 'dateTimeFormats', 'numberFormats']
+  i18nKeys.forEach((key) => {
+    if (i18nObj[`${key}Path`]) {
+      requestObj[key] = stringifyRequest(loaderContext, i18nObj[`${key}Path`])
+      delete i18nObj[`${key}Path`]
+    }
+  })
+  i18nContent += `  const i18nCfg = ${JSON.stringify(i18nObj)}\n`
+  Object.keys(requestObj).forEach((key) => {
+    i18nContent += `  i18nCfg.${key} = require(${requestObj[key]})\n`
+  })
+  i18nContent += `
+  i18nCfg.legacy = false
+  const i18n = createI18n(i18nCfg, VueI18n)
+  Vue.use(i18n)
+  Mpx.i18n = i18n\n`
+  return i18nContent
+}
+
+module.exports = {
+  buildPagesMap,
+  buildComponentsMap,
+  getRequireScript,
+  buildGlobalParams,
+  shallowStringify,
+  getAsyncChunkName,
+  stringifyRequest,
+  buildI18n
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.8.40-test",
+  "version": "2.8.40-test.2",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
   ],
   "author": "donghongping",
-  "license": "Apache",
+  "license": "Apache-2.0",
   "main": "lib/index.js",
   "directories": {
     "lib": "lib"
@@ -54,11 +54,12 @@
     "postcss-modules-values": "^4.0.0",
     "postcss-selector-parser": "^6.0.8",
     "postcss-value-parser": "^4.0.2",
+    "semver": "^7.5.4",
     "source-list-map": "^2.0.0",
     "video.js": "^8.6.0"
   },
   "peerDependencies": {
-    "webpack": "^5.48.0"
+    "webpack": "^5.75.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -82,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "8524f9b69ebcfb0667ebff2608cf6f675f14f141"
+  "gitHead": "7b1911025a2eb47eddc046775f17b6f1405fdd54"
 }

package/lib/platform/template/wx/component-config/fix-html-tag.js

@@ -1,17 +0,0 @@
-const { isOriginTag, isBuildInTag } = require('../../../../utils/dom-tag-config')
-
-module.exports = function () {
-  return {
-    waterfall: true,
-    test: (input) => isOriginTag(input) || isBuildInTag(input),
-    // 处理原生tag
-    web (tag, data = {}) {
-      // @see packages/webpack-plugin/lib/platform/json/wx/index.js webHTMLTagProcesser
-      const newTag = `mpx-com-${tag}`
-      const usingComponents = data.usingComponents || []
-      // 存在同名组件，则返回新tag
-      if (usingComponents.includes(newTag)) return newTag
-      return tag
-    }
-  }
-}

package/lib/style-compiler/plugins/trim.js

@@ -1,15 +0,0 @@
-
-module.exports = (opts) => {
-  return {
-    postcssPlugin: 'trim',
-    Once: (root) => {
-      root.walk(({ type, raws }) => {
-        if (type === 'rule' || type === 'atrule') {
-          raws.before = raws.after = '\n'
-        }
-      })
-    }
-  }
-}
-
-module.exports.postcss = true