@mpxjs/webpack-plugin 2.9.39 → 2.9.41-react.0

package/lib/template-compiler/index.js

@@ -12,7 +12,7 @@ module.exports = function (raw) {
   this.cacheable()
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const mpx = this.getMpx()
-  const root = mpx.projectRoot
+  const projectRoot = mpx.projectRoot
   const mode = mpx.mode
   const env = mpx.env
   const defs = mpx.defs
@@ -40,6 +40,7 @@ module.exports = function (raw) {
       break
     }
   }
+
   const warn = (msg) => {
     this.emitWarning(
       new Error('[template compiler][' + this.resource + ']: ' + msg)
@@ -52,7 +53,7 @@ module.exports = function (raw) {
     )
   }
 
-  const { root: ast, meta } = compiler.parse(raw, {
+  const { root, meta } = compiler.parse(raw, {
     warn,
     error,
     runtimeCompile,
@@ -84,8 +85,7 @@ module.exports = function (raw) {
     }
   }
 
-  let result = runtimeCompile ? '' : compiler.serialize(ast)
-
+  let result = runtimeCompile ? '' : compiler.serialize(root)
   if (isNative) {
     return result
   }
@@ -93,20 +93,19 @@ module.exports = function (raw) {
   let resultSource = ''
 
   for (const module in meta.wxsModuleMap) {
-    const src = loaderUtils.urlToRequest(meta.wxsModuleMap[module], root)
+    const src = loaderUtils.urlToRequest(meta.wxsModuleMap[module], projectRoot)
     resultSource += `var ${module} = require(${loaderUtils.stringifyRequest(this, src)});\n`
   }
 
-  resultSource += `
-global.currentInject = {
+  resultSource += `global.currentInject = {
   moduleId: ${JSON.stringify(moduleId)}
 };\n`
 
-  if (runtimeCompile || queryObj.dynamicRuntime) {
+  if (runtimeCompile) {
     resultSource += 'global.currentInject.dynamic = true;\n'
   }
 
-  const rawCode = runtimeCompile ? '' : compiler.genNode(ast)
+  const rawCode = runtimeCompile ? '' : compiler.genNode(root)
   if (rawCode) {
     try {
       const ignoreMap = Object.assign({
@@ -124,8 +123,7 @@ global.currentInject = {
           renderReduce: optimizeRenderLevel === 1,
           ignoreMap
         })
-      resultSource += `
-global.currentInject.render = function (_i, _c, _r, _sc) {
+      resultSource += `global.currentInject.render = function (_i, _c, _r, _sc) {
 ${bindResult.code}
 _r(${optimizeRenderLevel === 2 ? 'true' : ''});
 };\n`
@@ -133,10 +131,9 @@ _r(${optimizeRenderLevel === 2 ? 'true' : ''});
         resultSource += `global.currentInject.propKeys = ${JSON.stringify(bindResult.propKeys)};\n`
       }
     } catch (e) {
-      error(`
-Invalid render function generated by the template, please check!\n
+      error(`Invalid render function generated by the template, please check!
 Template result:
-${result}\n
+${result}
 Error code:
 ${rawCode}
 Error Detail:
@@ -146,21 +143,15 @@ ${e.stack}`)
   }
 
   if (meta.computed) {
-    resultSource += bindThis.transform(`
-global.currentInject.injectComputed = {
-  ${meta.computed.join(',')}
-};`).code + '\n'
+    resultSource += bindThis.transform(`global.currentInject.injectComputed = {${meta.computed.join(',')}};`).code + '\n'
   }
 
   if (meta.refs) {
-    resultSource += `
-global.currentInject.getRefsData = function () {
-  return ${JSON.stringify(meta.refs)};
-};\n`
+    resultSource += `global.currentInject.getRefsData = function () { return ${JSON.stringify(meta.refs)}; };\n`
   }
 
   if (meta.options) {
-    resultSource += `global.currentInject.injectOptions = ${JSON.stringify(meta.options)};` + '\n'
+    resultSource += `global.currentInject.injectOptions = ${JSON.stringify(meta.options)};\n`
   }
 
   this.emitFile(resourcePath, '', undefined, {
@@ -180,7 +171,7 @@ global.currentInject.getRefsData = function () {
     this.emitFile(MPX_DISABLE_EXTRACTOR_CACHE, '', undefined, { skipEmit: true })
 
     const templateInfo = {
-      templateAst: stringify(ast),
+      templateAst: stringify(root),
       ...meta.runtimeInfo
     }
 

package/lib/utils/env.js

@@ -0,0 +1,17 @@
+function isReact (mode) {
+    return mode === 'ios' || mode === 'android'
+}
+
+function isWeb (mode) {
+    return mode === 'web'
+}
+
+function isMiniProgram (mode) {
+    return !isWeb(mode) && !isReact(mode)
+}
+
+module.exports = {
+    isWeb,
+    isReact,
+    isMiniProgram
+}

package/lib/utils/make-map.js

@@ -6,7 +6,7 @@ module.exports = function makeMap (str, expectsLowerCase) {
   const map = Object.create(null)
   const list = str.split(',')
   for (let i = 0; i < list.length; i++) {
-    map[list[i]] = true
+    map[list[i].trim()] = true
   }
   return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val]
 }

package/lib/utils/shallow-stringify.js

@@ -1,17 +1,17 @@
 const hasOwn = require('./has-own')
 
 module.exports = function shallowStringify (obj, isTemplateExp) {
-    const arr = []
-    for (const key in obj) {
-        if (hasOwn(obj, key)) {
-            let value = obj[key]
-            if (Array.isArray(value)) {
-                value = `[${value.join(',')}]`
-            } else if (typeof value === 'object') {
-                value = shallowStringify(value, isTemplateExp)
-            }
-            arr.push(isTemplateExp ? `${key}:${value}` : `'${key}':${value}`)
-        }
+  const arr = []
+  for (const key in obj) {
+    if (hasOwn(obj, key)) {
+      let value = obj[key]
+      if (Array.isArray(value)) {
+        value = `[${value.join(',')}]`
+      } else if (typeof value === 'object') {
+        value = shallowStringify(value, isTemplateExp)
+      }
+      arr.push(isTemplateExp ? `${key}:${value}` : `'${key}':${value}`)
     }
-    return isTemplateExp ? `({${arr.join(',')}})` : `{${arr.join(',')}}`
+  }
+  return isTemplateExp ? `({${arr.join(',')}})` : `{${arr.join(',')}}`
 }

package/lib/web/index.js

@@ -0,0 +1,123 @@
+const async = require('async')
+const processJSON = require('./processJSON')
+const processMainScript = require('./processMainScript')
+const processTemplate = require('./processTemplate')
+const processStyles = require('./processStyles')
+const processScript = require('./processScript')
+const RecordLoaderContentDependency = require('../dependencies/RecordLoaderContentDependency')
+
+module.exports = function ({
+  parts,
+  loaderContext,
+  pagesMap,
+  componentsMap,
+  queryObj,
+  ctorType,
+  srcMode,
+  moduleId,
+  isProduction,
+  hasScoped,
+  hasComment,
+  isNative,
+  usingComponents,
+  componentGenerics,
+  autoScope,
+  callback
+}) {
+  if (ctorType === 'app' && !queryObj.isApp) {
+    return async.waterfall([
+      (callback) => {
+        processJSON(parts.json, {
+          loaderContext,
+          ctorType,
+          pagesMap,
+          componentsMap
+        }, callback)
+      },
+      (jsonRes, callback) => {
+        processMainScript(parts.script, {
+          loaderContext,
+          srcMode,
+          moduleId,
+          isProduction,
+          jsonConfig: jsonRes.jsonObj,
+          outputPath: queryObj.outputPath || '',
+          localComponentsMap: jsonRes.localComponentsMap,
+          tabBar: jsonRes.jsonObj.tabBar,
+          tabBarMap: jsonRes.tabBarMap,
+          tabBarStr: jsonRes.tabBarStr,
+          localPagesMap: jsonRes.localPagesMap
+        }, callback)
+      }
+    ], (err, scriptRes) => {
+      if (err) return callback(err)
+      loaderContext.loaderIndex = -1
+      return callback(null, scriptRes.output)
+    })
+  }
+  const mpx = loaderContext.getMpx()
+  // 通过RecordLoaderContentDependency和loaderContentCache确保子request不再重复生成loaderContent
+  const cacheContent = mpx.loaderContentCache.get(loaderContext.resourcePath)
+  if (cacheContent) return callback(null, cacheContent)
+  let output = ''
+  return async.waterfall([
+    (callback) => {
+      async.parallel([
+        (callback) => {
+          processTemplate(parts.template, {
+            loaderContext,
+            hasScoped,
+            hasComment,
+            isNative,
+            srcMode,
+            moduleId,
+            ctorType,
+            usingComponents,
+            componentGenerics
+          }, callback)
+        },
+        (callback) => {
+          processStyles(parts.styles, {
+            ctorType,
+            autoScope,
+            moduleId
+          }, callback)
+        },
+        (callback) => {
+          processJSON(parts.json, {
+            loaderContext,
+            ctorType,
+            pagesMap,
+            componentsMap
+          }, callback)
+        }
+      ], (err, res) => {
+        callback(err, res)
+      })
+    },
+    ([templateRes, stylesRes, jsonRes], callback) => {
+      output += templateRes.output
+      output += stylesRes.output
+      output += jsonRes.output
+      processScript(parts.script, {
+        loaderContext,
+        ctorType,
+        srcMode,
+        moduleId,
+        isProduction,
+        componentGenerics,
+        jsonConfig: jsonRes.jsonObj,
+        outputPath: queryObj.outputPath || '',
+        builtInComponentsMap: templateRes.builtInComponentsMap,
+        genericsInfo: templateRes.genericsInfo,
+        wxsModuleMap: templateRes.wxsModuleMap,
+        localComponentsMap: jsonRes.localComponentsMap
+      }, callback)
+    }
+  ], (err, scriptRes) => {
+    if (err) return callback(err)
+    output += scriptRes.output
+    loaderContext._module.addPresentationalDependency(new RecordLoaderContentDependency(loaderContext.resourcePath, output))
+    callback(null, output)
+  })
+}

package/lib/web/processJSON.js

@@ -16,6 +16,7 @@ const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalCo
 
 module.exports = function (json, {
   loaderContext,
+  ctorType,
   pagesMap,
   componentsMap
 }, rawCallback) {
@@ -79,8 +80,7 @@ module.exports = function (json, {
     })
   }
 
-  const { resourcePath } = parseRequest(loaderContext.resource)
-  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
+  const isApp = ctorType === 'app'
 
   if (!json) {
     return callback()
@@ -103,7 +103,7 @@ module.exports = function (json, {
     }
 
     if (!isApp) {
-      rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
+      rulesRunnerOptions.mainKey = ctorType
     }
 
     const rulesRunner = getRulesRunner(rulesRunnerOptions)

package/lib/web/processMainScript.js

@@ -1,20 +1,19 @@
 // 该文件下的字符串语句需要使用 es5 语法
 const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
+const shallowStringify = require('../utils/shallow-stringify')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
 
 const {
   buildComponentsMap,
   buildPagesMap,
   buildGlobalParams,
-  shallowStringify,
   stringifyRequest,
   buildI18n
 } = require('./script-helper')
 
 module.exports = function (script, {
   loaderContext,
-  ctorType,
   srcMode,
   moduleId,
   isProduction,
@@ -23,8 +22,7 @@ module.exports = function (script, {
   tabBar,
   tabBarMap,
   tabBarStr,
-  localPagesMap,
-  resource
+  localPagesMap
 }, callback) {
   const { i18n, webConfig, hasUnoCSS } = loaderContext.getMpx()
   const { pagesMap, firstPage, globalTabBar } = buildPagesMap({
@@ -36,20 +34,24 @@ module.exports = function (script, {
     jsonConfig
   })
 
-  const componentsMap = buildComponentsMap({ localComponentsMap, loaderContext })
+  const componentsMap = buildComponentsMap({
+    localComponentsMap,
+    loaderContext,
+    jsonConfig
+  })
 
   const scriptSrcMode = script ? script.mode || srcMode : srcMode
 
-  let output = '  import \'@mpxjs/webpack-plugin/lib/runtime/base.styl\'\n'
+  let output = 'import \'@mpxjs/webpack-plugin/lib/runtime/base.styl\'\n'
   // hasUnoCSS由@mpxjs/unocss-plugin注入
   if (hasUnoCSS) {
-    output += '  import \'uno.css\'\n'
+    output += 'import \'uno.css\'\n'
   }
-  output += `  import Vue from 'vue'
-  import VueRouter from 'vue-router'
-  import Mpx from '@mpxjs/core'
-  import { processAppOption, getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
-  Vue.use(VueRouter)\n`
+  output += `import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Mpx from '@mpxjs/core'
+import { processAppOption, getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
+Vue.use(VueRouter)\n`
 
   if (i18n) {
     output += buildI18n({ i18n, loaderContext })
@@ -66,19 +68,19 @@ module.exports = function (script, {
     globalTabBar
   })
 
-  output += `\n  var App = require(${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}).default\n`
+  output += `var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
 
   output += `
-  export default processAppOption({
-    App: App,
-    tabBarMap: ${JSON.stringify(tabBarMap)},
-    firstPage: ${JSON.stringify(firstPage)},
-    pagesMap: ${shallowStringify(pagesMap)},
-    componentsMap: ${shallowStringify(componentsMap)},
-    Vue: Vue,
-    VueRouter: VueRouter,
-    el: ${JSON.stringify(webConfig.el || '#app')}
-  })\n`
+export default processAppOption({
+  App: App,
+  tabBarMap: ${JSON.stringify(tabBarMap)},
+  firstPage: ${JSON.stringify(firstPage)},
+  pagesMap: ${shallowStringify(pagesMap)},
+  componentsMap: ${shallowStringify(componentsMap)},
+  Vue: Vue,
+  VueRouter: VueRouter,
+  el: ${JSON.stringify(webConfig.el || '#app')}
+})\n`
 
   callback(null, {
     output

package/lib/web/processScript.js

@@ -1,8 +1,14 @@
 const genComponentTag = require('../utils/gen-component-tag')
 const loaderUtils = require('loader-utils')
 const normalize = require('../utils/normalize')
+const shallowStringify = require('../utils/shallow-stringify')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
-const { buildComponentsMap, getRequireScript, buildGlobalParams, shallowStringify } = require('./script-helper')
+const {
+  buildComponentsMap,
+  getRequireScript,
+  buildGlobalParams,
+  stringifyRequest
+} = require('./script-helper')
 
 module.exports = function (script, {
   loaderContext,
@@ -20,8 +26,6 @@ module.exports = function (script, {
 }, callback) {
   const { projectRoot, appInfo, webConfig } = loaderContext.getMpx()
 
-  const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
-
   let output = '/* script */\n'
 
   let scriptSrcMode = srcMode
@@ -40,17 +44,17 @@ module.exports = function (script, {
       return attrs
     },
     content (script) {
-      let content = `\n  import { processComponentOption, getComponent, getWxsMixin } from ${stringifyRequest(optionProcessorPath)}\n`
+      let content = `\n  import { processComponentOption, getComponent, getWxsMixin } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
       let hasApp = true
       if (!appInfo.name) {
         hasApp = false
       }
       // 注入wxs模块
-      content += '  const wxsModules = {}\n'
+      content += '  var wxsModules = {}\n'
       if (wxsModuleMap) {
         Object.keys(wxsModuleMap).forEach((module) => {
           const src = loaderUtils.urlToRequest(wxsModuleMap[module], projectRoot)
-          const expression = `require(${stringifyRequest(src)})`
+          const expression = `require(${stringifyRequest(loaderContext, src)})`
           content += `  wxsModules.${module} = ${expression}\n`
         })
       }
@@ -61,16 +65,8 @@ module.exports = function (script, {
       // 获取pageConfig
       const pageConfig = {}
       if (ctorType === 'page') {
-        const uselessOptions = new Set([
-          'usingComponents',
-          'style',
-          'singlePage'
-        ])
-        Object.keys(jsonConfig)
-          .filter(key => !uselessOptions.has(key))
-          .forEach(key => {
-            pageConfig[key] = jsonConfig[key]
-          })
+        Object.assign(pageConfig, jsonConfig)
+        delete pageConfig.usingComponents
       }
 
       content += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, webConfig, hasApp })

package/lib/web/processTemplate.js

@@ -60,18 +60,19 @@ module.exports = function (template, {
       }
       if (template.content) {
         const templateSrcMode = template.mode || srcMode
-
+        const warn = (msg) => {
+          loaderContext.emitWarning(
+            new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
+          )
+        }
+        const error = (msg) => {
+          loaderContext.emitError(
+            new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
+          )
+        }
         const { root, meta } = templateCompiler.parse(template.content, {
-          warn: (msg) => {
-            loaderContext.emitWarning(
-              new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
-            )
-          },
-          error: (msg) => {
-            loaderContext.emitError(
-              new Error('[template compiler][' + loaderContext.resource + ']: ' + msg)
-            )
-          },
+          warn,
+          error,
           usingComponents,
           hasComment,
           isNative,
@@ -115,7 +116,7 @@ module.exports = function (template, {
         return templateCompiler.serialize(root)
       }
     })
-    output += '\n\n'
+    output += '\n'
   }
 
   callback(null, {

package/lib/web/script-helper.js

@@ -1,29 +1,16 @@
-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')
+const parseRequest = require('../utils/parse-request')
+const shallowStringify = require('../utils/shallow-stringify')
 
 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}" */`
@@ -128,10 +115,17 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
   }
 }
 
-function getRequireScript ({ ctorType, script, loaderContext }) {
+function getRequireScript ({ script, ctorType, loaderContext }) {
   let content = '  /** script content **/\n'
-  const extraOptions = { ctorType, lang: script.lang || 'js' }
   const { getRequire } = createHelpers(loaderContext)
+  const { resourcePath, queryObj } = parseRequest(loaderContext.resource)
+  const extraOptions = {
+    ...script.src
+      ? { ...queryObj, resourcePath }
+      : null,
+    ctorType,
+    lang: script.lang || 'js'
+  }
   content += `  ${getRequire('script', script, extraOptions)}\n`
   return content
 }
@@ -150,15 +144,15 @@ function buildGlobalParams ({
   let content = ''
   if (isMain) {
     content += `
-  global.getApp = function(){}
+  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')
     }
     var router = global.__mpxRouter
-    if(!router) return []
+    if (!router) return []
     // @ts-ignore
-    return (router.lastStack || router.stack).map(function(item){
+    return (router.lastStack || router.stack).map(function (item) {
       var page
       var vnode = item.vnode
       if (vnode && vnode.componentInstance) {
@@ -223,8 +217,6 @@ module.exports = {
   buildComponentsMap,
   getRequireScript,
   buildGlobalParams,
-  shallowStringify,
-  getAsyncChunkName,
   stringifyRequest,
   buildI18n
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.39",
+  "version": "2.9.41-react.0",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -79,10 +79,11 @@
   },
   "devDependencies": {
     "@types/babel-traverse": "^6.25.4",
-    "@types/babel-types": "^7.0.4"
+    "@types/babel-types": "^7.0.4",
+    "@types/react": "^18.2.79"
   },
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "87957d360b18806f16d169612d924d383ac043c4"
+  "gitHead": "1c9ae7527a257fad98f5536114e63415cea54271"
 }