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

package/lib/react/processJSON.js

@@ -0,0 +1,362 @@
+const async = require('async')
+const path = require('path')
+const JSON5 = require('json5')
+const loaderUtils = require('loader-utils')
+const parseRequest = require('../utils/parse-request')
+const toPosix = require('../utils/to-posix')
+const addQuery = require('../utils/add-query')
+const parseComponent = require('../parser')
+const getJSONContent = require('../utils/get-json-content')
+const resolve = require('../utils/resolve')
+const createJSONHelper = require('../json-compiler/helper')
+const getRulesRunner = require('../platform/index')
+const { RESOLVE_IGNORED_ERR } = require('../utils/const')
+const RecordResourceMapDependency = require('../dependencies/RecordResourceMapDependency')
+const RecordGlobalComponentsDependency = require('../dependencies/RecordGlobalComponentsDependency')
+
+module.exports = function (json, {
+  loaderContext,
+  pagesMap,
+  componentsMap
+}, rawCallback) {
+  const localPagesMap = {}
+  const localComponentsMap = {}
+  const output = '/* json */\n'
+  let jsonObj = {}
+  let tabBarMap
+  let tabBarStr
+  const mpx = loaderContext.getMpx()
+  const {
+    mode,
+    srcMode,
+    env,
+    projectRoot
+  } = mpx
+
+  const context = loaderContext.context
+
+  const emitWarning = (msg) => {
+    loaderContext.emitWarning(
+      new Error('[json processor][' + loaderContext.resource + ']: ' + msg)
+    )
+  }
+
+  const emitError = (msg) => {
+    loaderContext.emitError(
+      new Error('[json compiler][' + loaderContext.resource + ']: ' + msg)
+    )
+  }
+
+  const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
+
+  const {
+    isUrlRequest,
+    urlToRequest,
+    processPage,
+    processComponent
+  } = createJSONHelper({
+    loaderContext,
+    emitWarning,
+    emitError,
+    customGetDynamicEntry (resource, type, outputPath, packageRoot) {
+      return {
+        resource,
+        // 输出react时组件outputPath不需要拼接packageRoot
+        outputPath: type === 'page' ? toPosix(path.join(packageRoot, outputPath)) : outputPath,
+        packageRoot
+      }
+    }
+  })
+
+  const callback = (err) => {
+    return rawCallback(err, {
+      output,
+      jsonObj,
+      localPagesMap,
+      localComponentsMap,
+      tabBarMap,
+      tabBarStr
+    })
+  }
+
+  const { resourcePath } = parseRequest(loaderContext.resource)
+  const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
+
+  if (!json) {
+    return callback()
+  }
+  // 由于json需要提前读取在template处理中使用，src的场景已经在loader中处理了，此处无需考虑json.src的场景
+  try {
+    jsonObj = JSON5.parse(json.content)
+    // 处理runner
+    const rulesRunnerOptions = {
+      mode,
+      srcMode,
+      type: 'json',
+      waterfall: true,
+      warn: emitWarning,
+      error: emitError,
+      data: {
+        // polyfill global usingComponents & record globalComponents
+        globalComponents: mpx.usingComponents
+      }
+    }
+
+    if (!isApp) {
+      rulesRunnerOptions.mainKey = pagesMap[resourcePath] ? 'page' : 'component'
+    }
+
+    const rulesRunner = getRulesRunner(rulesRunnerOptions)
+
+    if (rulesRunner) {
+      rulesRunner(jsonObj)
+    }
+    if (isApp) {
+      // 收集全局组件
+      Object.assign(mpx.usingComponents, jsonObj.usingComponents)
+      // 在 rulesRunner 运行后保存全局注册组件
+      loaderContext._module.addPresentationalDependency(new RecordGlobalComponentsDependency(mpx.usingComponents, loaderContext.context))
+    }
+  } catch (e) {
+    return callback(e)
+  }
+
+  const fs = loaderContext._compiler.inputFileSystem
+
+  const defaultTabbar = {
+    borderStyle: 'black',
+    position: 'bottom',
+    custom: false,
+    isShow: true
+  }
+
+  const processTabBar = (tabBar, callback) => {
+    if (tabBar) {
+      tabBar = Object.assign({}, defaultTabbar, tabBar)
+      tabBarMap = {}
+      jsonObj.tabBar.list.forEach(({ pagePath }) => {
+        tabBarMap[pagePath] = true
+      })
+      tabBarStr = JSON.stringify(tabBar)
+      tabBarStr = tabBarStr.replace(/"(iconPath|selectedIconPath)":"([^"]+)"/g, function (matched, $1, $2) {
+        if (isUrlRequest($2, projectRoot)) {
+          return `"${$1}":require(${stringifyRequest(urlToRequest($2, projectRoot))})`
+        }
+        return matched
+      })
+    }
+    callback()
+  }
+
+  const processPackages = (packages, context, callback) => {
+    if (packages) {
+      async.each(packages, (packagePath, callback) => {
+        const { queryObj } = parseRequest(packagePath)
+        async.waterfall([
+          (callback) => {
+            resolve(context, packagePath, loaderContext, (err, result) => {
+              if (err) return callback(err)
+              const { rawResourcePath } = parseRequest(result)
+              callback(err, rawResourcePath)
+            })
+          },
+          (result, callback) => {
+            fs.readFile(result, (err, content) => {
+              if (err) return callback(err)
+              callback(err, result, content.toString('utf-8'))
+            })
+          },
+          (result, content, callback) => {
+            const extName = path.extname(result)
+            if (extName === '.mpx') {
+              const parts = parseComponent(content, {
+                filePath: result,
+                needMap: loaderContext.sourceMap,
+                mode,
+                env
+              })
+              getJSONContent(parts.json || {}, result, loaderContext, (err, content) => {
+                callback(err, result, content)
+              })
+            } else {
+              callback(null, result, content)
+            }
+          },
+          (result, content, callback) => {
+            try {
+              content = JSON5.parse(content)
+            } catch (err) {
+              return callback(err)
+            }
+
+            const processSelfQueue = []
+            const context = path.dirname(result)
+
+            if (content.pages) {
+              const tarRoot = queryObj.root
+              if (tarRoot) {
+                delete queryObj.root
+                const subPackage = {
+                  tarRoot,
+                  pages: content.pages,
+                  ...queryObj
+                }
+
+                if (content.plugins) {
+                  subPackage.plugins = content.plugins
+                }
+
+                processSelfQueue.push((callback) => {
+                  processSubPackage(subPackage, context, callback)
+                })
+              } else {
+                processSelfQueue.push((callback) => {
+                  processPages(content.pages, context, '', callback)
+                })
+              }
+            }
+            if (content.packages) {
+              processSelfQueue.push((callback) => {
+                processPackages(content.packages, context, callback)
+              })
+            }
+            if (processSelfQueue.length) {
+              async.parallel(processSelfQueue, callback)
+            } else {
+              callback()
+            }
+          }
+        ], (err) => {
+          callback(err === RESOLVE_IGNORED_ERR ? null : err)
+        })
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const pageKeySet = new Set()
+
+  const processPages = (pages, context, tarRoot = '', callback) => {
+    if (pages) {
+      async.each(pages, (page, callback) => {
+        processPage(page, context, tarRoot, (err, { resource, outputPath } = {}, { isFirst, key } = {}) => {
+          if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
+          if (pageKeySet.has(key)) return callback()
+          pageKeySet.add(key)
+          const { resourcePath, queryObj } = parseRequest(resource)
+          if (localPagesMap[outputPath]) {
+            const { resourcePath: oldResourcePath } = parseRequest(localPagesMap[outputPath].resource)
+            if (oldResourcePath !== resourcePath) {
+              const oldOutputPath = outputPath
+              outputPath = mpx.getOutputPath(resourcePath, 'page', { conflictPath: outputPath })
+              emitWarning(new Error(`Current page [${resourcePath}] is registered with a conflict outputPath [${oldOutputPath}] which is already existed in system, will be renamed with [${outputPath}], use ?resolve to get the real outputPath!`))
+            }
+          }
+
+          pagesMap[resourcePath] = outputPath
+          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'page', outputPath))
+          localPagesMap[outputPath] = {
+            resource: addQuery(resource, { isPage: true }),
+            async: queryObj.async || tarRoot,
+            isFirst
+          }
+          callback()
+        })
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processSubPackage = (subPackage, context, callback) => {
+    if (subPackage) {
+      if (typeof subPackage.root === 'string' && subPackage.root.startsWith('.')) {
+        emitError(`Current subpackage root [${subPackage.root}] is not allow starts with '.'`)
+        return callback()
+      }
+      const tarRoot = subPackage.tarRoot || subPackage.root || ''
+      const srcRoot = subPackage.srcRoot || subPackage.root || ''
+      if (!tarRoot) return callback()
+      context = path.join(context, srcRoot)
+      processPages(subPackage.pages, context, tarRoot, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processSubPackages = (subPackages, context, callback) => {
+    if (subPackages) {
+      async.each(subPackages, (subPackage, callback) => {
+        processSubPackage(subPackage, context, callback)
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processComponents = (components, context, callback) => {
+    if (components) {
+      async.eachOf(components, (component, name, callback) => {
+        processComponent(component, context, {}, (err, { resource, outputPath } = {}, { tarRoot } = {}) => {
+          if (err) return callback(err === RESOLVE_IGNORED_ERR ? null : err)
+          const { resourcePath, queryObj } = parseRequest(resource)
+          componentsMap[resourcePath] = outputPath
+          loaderContext._module && loaderContext._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, 'component', outputPath))
+          localComponentsMap[name] = {
+            resource: addQuery(resource, {
+              isComponent: true,
+              outputPath
+            }),
+            async: queryObj.async || tarRoot
+          }
+          callback()
+        })
+      }, callback)
+    } else {
+      callback()
+    }
+  }
+
+  const processGenerics = (generics, context, callback) => {
+    if (generics) {
+      const genericsComponents = {}
+      Object.keys(generics).forEach((name) => {
+        const generic = generics[name]
+        if (generic.default) genericsComponents[`${name}default`] = generic.default
+      })
+      processComponents(genericsComponents, context, callback)
+    } else {
+      callback()
+    }
+  }
+
+  async.parallel([
+    (callback) => {
+      // 添加首页标识
+      if (jsonObj.pages && jsonObj.pages[0]) {
+        if (typeof jsonObj.pages[0] !== 'string') {
+          jsonObj.pages[0].src = addQuery(jsonObj.pages[0].src, { isFirst: true })
+        } else {
+          jsonObj.pages[0] = addQuery(jsonObj.pages[0], { isFirst: true })
+        }
+      }
+      processPages(jsonObj.pages, context, '', callback)
+    },
+    (callback) => {
+      processComponents(jsonObj.usingComponents, context, callback)
+    },
+    (callback) => {
+      processPackages(jsonObj.packages, context, callback)
+    },
+    (callback) => {
+      processSubPackages(jsonObj.subPackages || jsonObj.subpackages, context, callback)
+    },
+    (callback) => {
+      processGenerics(jsonObj.componentGenerics, context, callback)
+    },
+    (callback) => {
+      processTabBar(jsonObj.tabBar, callback)
+    }
+  ], callback)
+}

package/lib/react/processScript.js

@@ -0,0 +1,40 @@
+const normalize = require('../utils/normalize')
+const optionProcessorPath = normalize.lib('runtime/optionProcessor')
+const { buildComponentsMap, getRequireScript, buildGlobalParams, stringifyRequest } = require('./script-helper')
+
+module.exports = function (script, {
+  loaderContext,
+  ctorType,
+  srcMode,
+  moduleId,
+  isProduction,
+  componentGenerics,
+  jsonConfig,
+  outputPath,
+  builtInComponentsMap,
+  genericsInfo,
+  wxsModuleMap,
+  localComponentsMap
+}, callback) {
+  let scriptSrcMode = srcMode
+  if (script) {
+    scriptSrcMode = script.mode || scriptSrcMode
+  } else {
+    script = { tag: 'script' }
+  }
+
+  let output = '/* script */\n'
+  output += 'import { lazy } from \'react\'\n'
+  output += `import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}\n`
+
+  // 获取组件集合
+  const componentsMap = buildComponentsMap({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig })
+
+  output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, componentsMap })
+  output += getRequireScript({ ctorType, script, loaderContext })
+  output += `export default global.__mpxOptionsMap[${JSON.stringify(moduleId)}]\n`
+
+  callback(null, {
+    output
+  })
+}

package/lib/react/processStyles.js

@@ -0,0 +1,63 @@
+const createHelpers = require('../helpers')
+const async = require('async')
+const getClassMap = require('./style-helper').getClassMap
+const shallowStringify = require('../utils/shallow-stringify')
+
+module.exports = function (styles, {
+  loaderContext,
+  srcMode,
+  ctorType,
+  autoScope,
+  moduleId
+}, callback) {
+  const { getRequestString } = createHelpers(loaderContext)
+  let content = ''
+  let output = '/* styles */\n'
+  if (styles.length) {
+    const { mode } = loaderContext.getMpx() || {}
+    async.eachOfSeries(styles, (style, i, callback) => {
+      const scoped = style.scoped || autoScope
+      const extraOptions = {
+        moduleId,
+        scoped,
+        extract: false
+      }
+      loaderContext.importModule(JSON.parse(getRequestString('styles', style, extraOptions, i))).then((result) => {
+        if (Array.isArray(result)) {
+          result = result.map((item) => {
+            return item[1]
+          }).join('\n')
+        }
+        content += result.trim() + '\n'
+        callback()
+      }).catch((e) => {
+        callback(e)
+      })
+      // require style
+    }, (err) => {
+      if (err) return callback(err)
+      try {
+        const classMap = getClassMap({
+          content,
+          filename: loaderContext.resourcePath,
+          mode,
+          srcMode
+        })
+        output += `global.currentInject.injectMethods = {
+  __getClassMap: function() {
+    return ${shallowStringify(classMap)};
+  }
+};\n`
+      } catch (e) {
+        return callback(e)
+      }
+      callback(null, {
+        output
+      })
+    })
+  } else {
+    callback(null, {
+      output: ''
+    })
+  }
+}

package/lib/react/processTemplate.js

@@ -0,0 +1,151 @@
+const addQuery = require('../utils/add-query')
+const parseRequest = require('../utils/parse-request')
+const { matchCondition } = require('../utils/match-condition')
+const loaderUtils = require('loader-utils')
+const templateCompiler = require('../template-compiler/compiler')
+const genNode = require('../template-compiler/gen-node-react')
+const bindThis = require('../template-compiler/bind-this')
+
+module.exports = function (template, {
+  loaderContext,
+  // hasScoped,
+  hasComment,
+  isNative,
+  srcMode,
+  moduleId,
+  ctorType,
+  usingComponents,
+  componentGenerics
+}, callback) {
+  const mpx = loaderContext.getMpx()
+  const {
+    projectRoot,
+    mode,
+    defs,
+    wxsContentMap,
+    decodeHTMLText,
+    externalClasses,
+    checkUsingComponents,
+    autoVirtualHostRules
+  } = mpx
+  const { resourcePath } = parseRequest(loaderContext.resource)
+  const builtInComponentsMap = {}
+
+  let genericsInfo
+  let output = '/* template */\n'
+
+  output += `global.currentInject = {
+  moduleId: ${JSON.stringify(moduleId)}
+};\n`
+
+  if (template) {
+    // 由于远端src template资源引用的相对路径可能发生变化，暂时不支持。
+    if (template.src) {
+      return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template content must be inline in .mpx files!'))
+    }
+    if (template.lang) {
+      return callback(new Error('[mpx loader][' + loaderContext.resource + ']: ' + 'template lang is not supported in trans react native mode temporarily, we will support it in the future!'))
+    }
+
+    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,
+        error,
+        usingComponents,
+        hasComment,
+        isNative,
+        ctorType,
+        mode,
+        srcMode: templateSrcMode,
+        defs,
+        decodeHTMLText,
+        externalClasses,
+        // todo 后续输出web也采用mpx的scoped处理
+        hasScoped: false,
+        moduleId,
+        filePath: resourcePath,
+        i18n: null,
+        checkUsingComponents,
+        // web模式下全局组件不会被合入usingComponents中，故globalComponents可以传空
+        globalComponents: [],
+        // web模式下实现抽象组件
+        componentGenerics,
+        hasVirtualHost: matchCondition(resourcePath, autoVirtualHostRules)
+      })
+
+      if (meta.wxsContentMap) {
+        for (const module in meta.wxsContentMap) {
+          wxsContentMap[`${resourcePath}~${module}`] = meta.wxsContentMap[module]
+        }
+      }
+      if (meta.builtInComponentsMap) {
+        Object.keys(meta.builtInComponentsMap).forEach((name) => {
+          builtInComponentsMap[name] = {
+            resource: addQuery(meta.builtInComponentsMap[name], { isComponent: true })
+          }
+        })
+      }
+      if (meta.genericsInfo) {
+        genericsInfo = meta.genericsInfo
+      }
+
+      for (const module in meta.wxsModuleMap) {
+        const src = loaderUtils.urlToRequest(meta.wxsModuleMap[module], projectRoot)
+        output += `var ${module} = require(${loaderUtils.stringifyRequest(this, src)});\n`
+      }
+
+      const rawCode = genNode(root)
+      if (rawCode) {
+        try {
+          const ignoreMap = Object.assign({
+            createElement: true,
+            components: true,
+            getNativeComponent: true,
+            rootProps: true
+          }, meta.wxsModuleMap)
+          const bindResult = bindThis.transform(rawCode, {
+            ignoreMap
+          })
+          output += `global.currentInject.render = function (createElement, components, getNativeComponent, rootProps) {
+  return ${bindResult.code}
+};\n`
+        } catch (e) {
+          error(`Invalid render function generated by the template, please check!
+Error code:
+${rawCode}
+Error Detail:
+${e.stack}`)
+        }
+      }
+
+      if (meta.computed) {
+        output += bindThis.transform(`global.currentInject.injectComputed = {${meta.computed.join(',')}};`).code + '\n'
+      }
+
+      if (meta.refs) {
+        output += `global.currentInject.getRefsData = function () {return ${JSON.stringify(meta.refs)};};\n`
+      }
+
+      if (meta.options) {
+        output += `global.currentInject.injectOptions = ${JSON.stringify(meta.options)};\n`
+      }
+    }
+  }
+
+  callback(null, {
+    output,
+    builtInComponentsMap,
+    genericsInfo
+  })
+}

package/lib/react/script-helper.js

@@ -0,0 +1,79 @@
+const loaderUtils = require('loader-utils')
+const createHelpers = require('../helpers')
+const parseRequest = require('../utils/parse-request')
+const shallowStringify = require('../utils/shallow-stringify')
+
+function stringifyRequest (loaderContext, request) {
+  return loaderUtils.stringifyRequest(loaderContext, request)
+}
+
+function getAsyncChunkName (chunkName) {
+  if (chunkName && typeof chunkName !== 'boolean') {
+    return `/* webpackChunkName: "${chunkName}" */`
+  }
+  return ''
+}
+
+function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
+  const componentsMap = {}
+  if (localComponentsMap) {
+    Object.keys(localComponentsMap).forEach((componentName) => {
+      const componentCfg = localComponentsMap[componentName]
+      const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
+      if (componentCfg.async) {
+        componentsMap[componentName] = `lazy(function(){return import(${getAsyncChunkName(componentCfg.async)}${componentRequest}).then(function(res){return getComponent(res, {displayName: ${JSON.stringify(componentName)}})})})`
+      } else {
+        componentsMap[componentName] = `getComponent(require(${componentRequest}), {displayName: ${JSON.stringify(componentName)}})`
+      }
+    })
+  }
+  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 getRequireScript ({ script, ctorType, loaderContext }) {
+  let content = '  /** script content **/\n'
+  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
+}
+
+function buildGlobalParams ({
+  moduleId,
+  scriptSrcMode,
+  loaderContext,
+  isProduction,
+  componentsMap
+}) {
+  let content = ''
+  content += `global.currentModuleId = ${JSON.stringify(moduleId)};\n`
+  content += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)};\n`
+  if (!isProduction) {
+    content += `global.currentResource = ${JSON.stringify(loaderContext.resourcePath)};\n`
+  }
+  content += `global.currentInject.getComponents = function() {
+  return ${shallowStringify(componentsMap)};
+};\n`
+  return content
+}
+
+module.exports = {
+  buildComponentsMap,
+  getRequireScript,
+  buildGlobalParams,
+  stringifyRequest
+}