@mpxjs/webpack-plugin 2.9.18 → 2.9.19-react.0

package/lib/template-compiler/gen-node-react.js

@@ -0,0 +1,95 @@
+const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
+
+function genIf (node) {
+  node.ifProcessed = true
+  return genIfConditions(node.ifConditions.slice())
+}
+
+function genIfConditions (conditions) {
+  if (!conditions.length) return 'null'
+  const condition = conditions.shift()
+  if (condition.exp) {
+    return `(${condition.exp})?${genNode(condition.block)}:${genIfConditions(conditions)}`
+  } else {
+    return genNode(condition.block)
+  }
+}
+
+function genFor (node) {
+  node.forProcessed = true
+  const index = node.for.index || 'index'
+  const item = node.for.item || 'item'
+  return `_i(${node.for.exp}, function(${item},${index}){return ${genNode(node)}})`
+}
+
+const s = JSON.stringify
+
+function mapAttrName (name) {
+  if (name === 'class') return 'className'
+  if (!isValidIdentifierStr(name)) return s(name)
+  return name
+}
+
+function genNode (node) {
+  let exp = ''
+  if (node) {
+    if (node.type === 3) {
+      if (!node.isComment) {
+        if (node.exps) {
+          exp += `${node.exps[0].exp}`
+        } else {
+          exp += `${s(node.text)}`
+        }
+      }
+    }
+    if (node.type === 1) {
+      if (node.tag !== 'temp-node') {
+        if (node.for && !node.forProcessed) {
+          exp += genFor(node)
+        } else if (node.if && !node.ifProcessed) {
+          exp += genIf(node)
+        } else {
+          const attrExpMap = (node.exps || []).reduce((map, { exp, attrName }) => {
+            if (attrName) {
+              map[attrName] = exp
+            }
+            return map
+          }, {})
+          if (node.slot) {
+            const name = node.slot.name
+            exp += `__getSlot(${name ? s(name) : ''})`
+          } else {
+            exp += `createElement(${node.isComponent || node.isBuiltIn ? `components[${node.is || s(node.tag)}]` : `getNativeComponent(${s(node.tag)})`}`
+            if (node.isRoot) {
+              exp += `, Object.assign({}, rootProps, {style: [${attrExpMap.style}, rootProps.style]})`
+            } else if (node.attrsList.length) {
+              const attrs = []
+              node.attrsList && node.attrsList.forEach(({ name, value }) => {
+                const attrExp = attrExpMap[name] ? attrExpMap[name] : s(value)
+                attrs.push(`${mapAttrName(name)}: ${attrExp}`)
+              })
+              exp += `, { ${attrs.join(', ')} }`
+            } else {
+              exp += ', null'
+            }
+
+            if (!node.unary && node.children.length) {
+              exp += ','
+              node.children.forEach(function (child, index) {
+                exp += `${index === 0 ? '' : ','}${genNode(child)}`
+              })
+            }
+            exp += ')'
+          }
+        }
+      } else {
+        node.children.forEach(function (child, index) {
+          exp += `${index === 0 ? '' : ','}${genNode(child)}`
+        })
+      }
+    }
+  }
+  return exp
+}
+
+module.exports = genNode

package/lib/template-compiler/index.js

@@ -8,7 +8,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
@@ -17,15 +17,13 @@ module.exports = function (raw) {
   const decodeHTMLText = mpx.decodeHTMLText
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
-  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
-  const componentsMap = mpx.componentsMap[packageName]
-  const pagesMap = mpx.pagesMap
   const wxsContentMap = mpx.wxsContentMap
   const optimizeRenderRules = mpx.optimizeRenderRules
   const usingComponents = queryObj.usingComponents || []
   const componentPlaceholder = queryObj.componentPlaceholder || []
   const hasComment = queryObj.hasComment
   const isNative = queryObj.isNative
+  const ctorType = queryObj.ctorType
   const hasScoped = queryObj.hasScoped
   const moduleId = queryObj.moduleId || 'm' + mpx.pathHash(resourcePath)
 
@@ -36,6 +34,7 @@ module.exports = function (raw) {
       break
     }
   }
+
   const warn = (msg) => {
     this.emitWarning(
       new Error('[template compiler][' + this.resource + ']: ' + msg)
@@ -48,15 +47,14 @@ module.exports = function (raw) {
     )
   }
 
-  const { root: ast, meta } = compiler.parse(raw, {
+  const { root, meta } = compiler.parse(raw, {
     warn,
     error,
     usingComponents,
     componentPlaceholder,
     hasComment,
     isNative,
-    isComponent: !!componentsMap[resourcePath],
-    isPage: !!pagesMap[resourcePath],
+    ctorType,
     mode,
     env,
     srcMode: localSrcMode || globalSrcMode,
@@ -80,25 +78,23 @@ module.exports = function (raw) {
     }
   }
 
+  const result = compiler.serialize(root)
+  if (isNative) {
+    return result
+  }
+
   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`
   }
 
-  const result = compiler.serialize(ast)
-
-  if (isNative) {
-    return result
-  }
-
-  resultSource += `
-global.currentInject = {
+  resultSource += `global.currentInject = {
   moduleId: ${JSON.stringify(moduleId)}
 };\n`
 
-  const rawCode = compiler.genNode(ast)
+  const rawCode = compiler.genNode(root)
   if (rawCode) {
     try {
       const ignoreMap = Object.assign({
@@ -116,8 +112,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`
@@ -125,10 +120,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:
@@ -138,21 +132,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, {

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

@@ -0,0 +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}`)
+    }
+  }
+  return isTemplateExp ? `({${arr.join(',')}})` : `{${arr.join(',')}}`
+}

package/lib/web/index.js

@@ -0,0 +1,122 @@
+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 RecordVueContentDependency = require('../dependencies/RecordVueContentDependency')
+
+module.exports = function ({
+  parts,
+  loaderContext,
+  pagesMap,
+  componentsMap,
+  queryObj,
+  ctorType,
+  srcMode,
+  moduleId,
+  isProduction,
+  hasScoped,
+  hasComment,
+  isNative,
+  usingComponents,
+  componentGenerics,
+  autoScope,
+  callback
+}) {
+  const mpx = loaderContext.getMpx()
+  if (ctorType === 'app' && !queryObj.isApp) {
+    return async.waterfall([
+      (callback) => {
+        processJSON(parts.json, {
+          loaderContext,
+          pagesMap,
+          componentsMap
+        }, callback)
+      },
+      (jsonRes, callback) => {
+        processMainScript(parts.script, {
+          loaderContext,
+          ctorType,
+          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)
+    })
+  }
+  // 通过RecordVueContentDependency和vueContentCache确保子request不再重复生成vueContent
+  const cacheContent = mpx.vueContentCache.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,
+            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 RecordVueContentDependency(loaderContext.resourcePath, output))
+    callback(null, output)
+  })
+}

package/lib/web/processMainScript.js

@@ -1,13 +1,13 @@
 // 该文件下的字符串语句需要使用 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 eventPath = normalize.lib('runtime/components/web/event')
 const {
   buildComponentsMap,
   buildPagesMap,
   buildGlobalParams,
-  shallowStringify,
   stringifyRequest,
   buildI18n
 } = require('./script-helper')
@@ -23,8 +23,7 @@ module.exports = function (script, {
   tabBar,
   tabBarMap,
   tabBarStr,
-  localPagesMap,
-  resource
+  localPagesMap
 }, callback) {
   const { i18n, webConfig, hasUnoCSS } = loaderContext.getMpx()
   const { pagesMap, firstPage, globalTabBar } = buildPagesMap({
@@ -68,7 +67,7 @@ module.exports = function (script, {
 
   output += `\n  require(${stringifyRequest(loaderContext, eventPath)})\n`
 
-  output += `\n  var App = require(${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}).default\n`
+  output += `\n  var App = require(${stringifyRequest(loaderContext, addQuery(loaderContext.resource, { isApp: true }))}).default\n`
 
   output += `
   export default processAppOption({

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 } = loaderContext.getMpx()
 
-  const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
-
   let output = '/* script */\n'
 
   let scriptSrcMode = srcMode
@@ -40,7 +44,7 @@ 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
@@ -50,7 +54,7 @@ module.exports = function (script, {
       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`
         })
       }

package/lib/web/processTemplate.js

@@ -59,23 +59,23 @@ 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,
-          isComponent: ctorType === 'component',
-          isPage: ctorType === 'page',
+          ctorType,
           mode,
           srcMode: templateSrcMode,
           defs,
@@ -114,7 +114,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
 }
@@ -217,8 +211,6 @@ module.exports = {
   buildComponentsMap,
   getRequireScript,
   buildGlobalParams,
-  shallowStringify,
-  getAsyncChunkName,
   stringifyRequest,
   buildI18n
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.18",
+  "version": "2.9.19-react.0",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -78,10 +78,14 @@
   },
   "devDependencies": {
     "@types/babel-traverse": "^6.25.4",
-    "@types/babel-types": "^7.0.4"
+    "@types/babel-types": "^7.0.4",
+    "@types/react": "^18.2.79",
+    "react": "^18.2.0",
+    "react-native": "^0.74.0",
+    "react-native-svg": "^15.2.0"
   },
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "ec6a5d714daf59eed0e5651aa4611a9f9383d233"
+  "gitHead": "a09ab1b994eaf20b1772491709580fe75499e688"
 }