@mpxjs/webpack-plugin 2.6.115 → 2.7.0-alpha

package/lib/template-compiler/index.js

@@ -1,19 +1,14 @@
 const compiler = require('./compiler')
-const loaderUtils = require('loader-utils')
 const bindThis = require('./bind-this').transform
-const InjectDependency = require('../dependency/InjectDependency')
 const parseRequest = require('../utils/parse-request')
-const getMainCompilation = require('../utils/get-main-compilation')
-const matchCondition = require('../utils/match-condition')
-const path = require('path')
+const { matchCondition } = require('../utils/match-condition')
+const loaderUtils = require('loader-utils')
 
 module.exports = function (raw) {
   this.cacheable()
-  const options = loaderUtils.getOptions(this) || {}
   const { resourcePath, queryObj } = parseRequest(this.resource)
-  const compilation = this._compilation
-  const mainCompilation = getMainCompilation(compilation)
-  const mpx = mainCompilation.__mpx__
+  const mpx = this.getMpx()
+  const root = mpx.projectRoot
   const mode = mpx.mode
   const env = mpx.env
   const defs = mpx.defs
@@ -25,6 +20,11 @@ module.exports = function (raw) {
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
   const componentsMap = mpx.componentsMap[packageName]
   const wxsContentMap = mpx.wxsContentMap
+  const usingComponents = queryObj.usingComponents || []
+  const hasComment = queryObj.hasComment
+  const isNative = queryObj.isNative
+  const hasScoped = queryObj.hasScoped
+  const moduleId = queryObj.moduleId || 'm' + mpx.pathHash(resourcePath)
 
   const warn = (msg) => {
     this.emitWarning(
@@ -38,13 +38,12 @@ module.exports = function (raw) {
     )
   }
 
-  const parsed = compiler.parse(raw, {
+  const { root: ast, meta } = compiler.parse(raw, {
     warn,
     error,
-    usingComponents: options.usingComponents,
-    hasComment: options.hasComment,
-    isNative: options.isNative,
-    basename: path.basename(resourcePath),
+    usingComponents,
+    hasComment,
+    isNative,
     isComponent: !!componentsMap[resourcePath],
     mode,
     env,
@@ -52,49 +51,56 @@ module.exports = function (raw) {
     defs,
     decodeHTMLText,
     externalClasses,
-    hasScoped: options.hasScoped,
-    moduleId: options.moduleId,
-    filePath: this.resourcePath,
+    hasScoped,
+    moduleId,
+    // 这里需传递resourcePath和wxsContentMap保持一致
+    filePath: resourcePath,
     i18n,
     checkUsingComponents: mpx.checkUsingComponents,
     globalComponents: Object.keys(mpx.usingComponents),
-    // deprecated option
-    globalMpxAttrsFilter: mpx.globalMpxAttrsFilter,
-    forceProxyEvent: matchCondition(this.resourcePath, mpx.forceProxyEventRules),
-    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
+    forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
+    proxyComponentEventsRules: mpx.proxyComponentEventsRules
   })
 
-  let ast = parsed.root
-  let meta = parsed.meta
-
   if (meta.wxsContentMap) {
     for (let module in meta.wxsContentMap) {
       wxsContentMap[`${resourcePath}~${module}`] = meta.wxsContentMap[module]
     }
   }
 
+  let resultSource = ''
+
+  for (let module in meta.wxsModuleMap) {
+    const src = loaderUtils.urlToRequest(meta.wxsModuleMap[module], root)
+    resultSource += `var ${module} = require(${loaderUtils.stringifyRequest(this, src)});\n`
+  }
+
   let result = compiler.serialize(ast)
 
-  if (options.isNative || mpx.forceDisableInject) {
+  if (isNative) {
     return result
   }
 
-  const rawCode = `global.currentInject = {
-    moduleId: ${JSON.stringify(options.moduleId)},
-    render: function () {
-      ${compiler.genNode(ast)}this._r();
-    }
+  const rawCode = `
+global.currentInject = {
+  moduleId: ${JSON.stringify(moduleId)},
+  render: function () {
+    ${compiler.genNode(ast)}
+    this._r();
+  }
 };\n`
 
-  let renderResult
+  let bindResult
 
   try {
-    renderResult = bindThis(rawCode, {
+    bindResult = bindThis(rawCode, {
       needCollect: true,
       ignoreMap: meta.wxsModuleMap
     })
   } catch (e) {
-    error(`Invalid render function generated by the template, please check!\n
+    error(`
+Invalid render function generated by the template, please check!\n
 Template result:
 ${result}\n
 Error code:
@@ -104,123 +110,30 @@ ${e.stack}`)
     return result
   }
 
-  // todo 此处在loader中往其他模块addDep更加危险，考虑修改为通过抽取后的空模块的module.exports来传递信息
-  let globalInjectCode = renderResult.code + '\n'
+  resultSource += bindResult.code + '\n'
 
-  if ((mode === 'tt' || mode === 'swan') && renderResult.propKeys) {
-    globalInjectCode += `global.currentInject.propKeys = ${JSON.stringify(renderResult.propKeys)};\n`
+  if ((mode === 'tt' || mode === 'swan') && bindResult.propKeys) {
+    resultSource += `global.currentInject.propKeys = ${JSON.stringify(bindResult.propKeys)};\n`
   }
 
   if (meta.computed) {
-    globalInjectCode += bindThis(`global.currentInject.injectComputed = {
+    resultSource += bindThis(`
+global.currentInject.injectComputed = {
   ${meta.computed.join(',')}
-  };`).code + '\n'
+};`).code + '\n'
   }
 
   if (meta.refs) {
-    globalInjectCode += `global.currentInject.getRefsData = function () {
+    resultSource += `
+global.currentInject.getRefsData = function () {
   return ${JSON.stringify(meta.refs)};
-  };\n`
-  }
-
-  if (meta.options) {
-    globalInjectCode += bindThis(`global.currentInject.injectOptions = ${JSON.stringify(meta.options)};`).code + '\n'
+};\n`
   }
 
-  const issuer = this._module.issuer
-  const parser = issuer.parser
-
-  // 同步issuer的dependencies，确保watch中issuer rebuild时template也进行rebuild，使该loader中往issuer中注入的依赖持续有效
-  issuer.buildInfo.fileDependencies.forEach((dep) => {
-    this.addDependency(dep)
-  })
-  issuer.buildInfo.contextDependencies.forEach((dep) => {
-    this.addContextDependency(dep)
-  })
-
-  // 删除issuer中上次注入的dependencies，避免issuer本身不需要更新时上次的注入代码残留
-  issuer.dependencies = issuer.dependencies.filter((dep) => {
-    return !dep.templateInject
-  })
-
-  const dep = new InjectDependency({
-    content: globalInjectCode,
-    index: -2
+  this.emitFile(resourcePath, '', undefined, {
+    skipEmit: true,
+    extractedResultSource: resultSource
   })
 
-  dep.templateInject = true
-  issuer.addDependency(dep)
-
-  let isSync = true
-
-  const iterationOfArrayCallback = (arr, fn) => {
-    for (let index = 0; index < arr.length; index++) {
-      fn(arr[index])
-    }
-  }
-
-  const dependencies = new Map()
-
-  const addDependency = dep => {
-    const resourceIdent = dep.getResourceIdentifier()
-    if (resourceIdent) {
-      const factory = compilation.dependencyFactories.get(dep.constructor)
-      if (factory === undefined) {
-        throw new Error(`No module factory available for dependency type: ${dep.constructor.name}`)
-      }
-      let innerMap = dependencies.get(factory)
-      if (innerMap === undefined) {
-        dependencies.set(factory, (innerMap = new Map()))
-      }
-      let list = innerMap.get(resourceIdent)
-      if (list === undefined) innerMap.set(resourceIdent, (list = []))
-      list.push(dep)
-    }
-  }
-
-  for (let module in meta.wxsModuleMap) {
-    isSync = false
-    const src = loaderUtils.urlToRequest(meta.wxsModuleMap[module], options.root)
-    // 编译render函数只在mpx文件中运行，此处issuer的context一定等同于当前loader的context
-    const expression = `require(${loaderUtils.stringifyRequest(this, src)})`
-    const deps = []
-    parser.parse(expression, {
-      current: {
-        addDependency: dep => {
-          dep.userRequest = module
-          deps.push(dep)
-        }
-      },
-      module: issuer
-    })
-    issuer.addVariable(module, expression, deps)
-    iterationOfArrayCallback(deps, addDependency)
-  }
-
-  if (isSync) {
-    return result
-  } else {
-    const callback = this.async()
-
-    const sortedDependencies = []
-    for (const pair1 of dependencies) {
-      for (const pair2 of pair1[1]) {
-        sortedDependencies.push({
-          factory: pair1[0],
-          dependencies: pair2[1]
-        })
-      }
-    }
-
-    compilation.addModuleDependencies(
-      issuer,
-      sortedDependencies,
-      compilation.bail,
-      null,
-      true,
-      () => {
-        callback(null, result)
-      }
-    )
-  }
+  return result
 }

package/lib/template-compiler/trans-dynamic-class-expr.js

@@ -1,29 +1,34 @@
 const babylon = require('@babel/parser')
 const t = require('@babel/types')
+const traverse = require('@babel/traverse').default
 const generate = require('@babel/generator').default
 
 module.exports = function transDynamicClassExpr (expr, { error } = {}) {
   try {
-    const ast = babylon.parseExpression(expr, {
+    const ast = babylon.parse(expr, {
       plugins: [
         'objectRestSpread'
       ]
     })
-    if (t.isObjectExpression(ast)) {
-      ast.properties.forEach((property) => {
-        if (t.isObjectProperty(property) && !property.computed) {
-          const propertyName = property.key.name || property.key.value
-          if (/-/.test(propertyName)) {
-            if (/\$/.test(propertyName)) {
-              error(`Dynamic classname [${propertyName}] is not supported, which includes [-] char and [$] char at the same time.`)
+    traverse(ast, {
+      ObjectExpression (path) {
+        path.node.properties.forEach((property) => {
+          if (t.isObjectProperty(property) && !property.computed) {
+            const propertyName = property.key.name || property.key.value
+            if (/-/.test(propertyName)) {
+              if (/\$/.test(propertyName)) {
+                error && error(`Dynamic classname [${propertyName}] is not supported, which includes [-] char and [$] char at the same time.`)
+              } else {
+                property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
+              }
             } else {
-              property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
+              property.key = t.identifier(propertyName)
             }
           }
-        }
-      })
-    }
-    return generate(ast, {
+        })
+      }
+    })
+    return generate(ast.program.body[0].expression, {
       compact: true
     }).code
   } catch (e) {

package/lib/tenon/index.js

@@ -0,0 +1,105 @@
+const processJSON = require('./processJSON')
+const processScript = require('./processScript')
+const processStyles = require('./processStyles')
+const processTemplate = require('./processTemplate')
+
+const async = require('async')
+
+module.exports = function ({
+  mpx,
+  loaderContext,
+  isProduction,
+  parts,
+  ctorType,
+  filePath,
+  queryObj,
+  autoScope,
+  componentsMap,
+  vueContentCache,
+  moduleId,
+  callback
+}) {
+  const hasComment = parts.template && parts.template.attrs && parts.template.attrs.comments
+  const isNative = false
+  const mode = mpx.mode
+  const srcMode = mpx.srcMode
+  const env = mpx.env
+  const defs = mpx.defs
+  const resolveMode = mpx.resolveMode
+  const pagesMap = mpx.pagesMap
+  const projectRoot = mpx.projectRoot
+
+  let output = ''
+  let usingComponents = [].concat(Object.keys(mpx.usingComponents))
+
+  return async.waterfall([
+    (callback) => {
+      async.parallel([
+        (callback) => {
+          processTemplate(parts.template, {
+            hasComment,
+            isNative,
+            mode,
+            srcMode,
+            defs,
+            loaderContext,
+            moduleId,
+            ctorType,
+            usingComponents,
+            decodeHTMLText: mpx.decodeHTMLText,
+            externalClasses: mpx.externalClasses,
+            checkUsingComponents: mpx.checkUsingComponents
+          }, callback)
+        },
+        (callback) => {
+          processStyles(parts.styles, {
+            ctorType,
+            autoScope
+          }, callback)
+        },
+        (callback) => {
+          processJSON(parts.json, {
+            mode,
+            env,
+            defs,
+            resolveMode,
+            loaderContext,
+            pagesMap,
+            pathHash: mpx.pathHash,
+            componentsMap,
+            projectRoot
+          }, callback)
+        }
+      ], (err, res) => {
+        callback(err, res)
+      })
+    },
+    ([templateRes, stylesRes, jsonRes], callback) => {
+      output += templateRes.output
+      output += stylesRes.output
+      output += jsonRes.output
+      if (ctorType === 'app' && jsonRes.jsonObj.window && jsonRes.jsonObj.window.navigationBarTitleText) {
+        mpx.appTitle = jsonRes.jsonObj.window.navigationBarTitleText
+      }
+
+      processScript(parts.script, {
+        ctorType,
+        srcMode,
+        loaderContext,
+        isProduction,
+        projectRoot,
+        jsonConfig: jsonRes.jsonObj,
+        componentId: queryObj.componentId || '',
+        builtInComponentsMap: templateRes.builtInComponentsMap,
+        localComponentsMap: jsonRes.localComponentsMap,
+        localPagesMap: jsonRes.localPagesMap,
+        forceDisableBuiltInLoader: mpx.forceDisableBuiltInLoader
+      }, callback)
+    }
+  ], (err, scriptRes) => {
+    if (err) return callback(err)
+    output += scriptRes.output
+    vueContentCache.set(filePath, output)
+    callback(null, output)
+  })
+}