@mpxjs/webpack-plugin 2.6.114-alpha.8 → 2.6.115

package/lib/template-compiler/index.js

@@ -1,14 +1,19 @@
 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 { matchCondition } = require('../utils/match-condition')
-const loaderUtils = require('loader-utils')
+const getMainCompilation = require('../utils/get-main-compilation')
+const matchCondition = require('../utils/match-condition')
+const path = require('path')
 
 module.exports = function (raw) {
   this.cacheable()
+  const options = loaderUtils.getOptions(this) || {}
   const { resourcePath, queryObj } = parseRequest(this.resource)
-  const mpx = this.getMpx()
-  const root = mpx.projectRoot
+  const compilation = this._compilation
+  const mainCompilation = getMainCompilation(compilation)
+  const mpx = mainCompilation.__mpx__
   const mode = mpx.mode
   const env = mpx.env
   const defs = mpx.defs
@@ -20,11 +25,6 @@ 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,12 +38,13 @@ module.exports = function (raw) {
     )
   }
 
-  const { root: ast, meta } = compiler.parse(raw, {
+  const parsed = compiler.parse(raw, {
     warn,
     error,
-    usingComponents,
-    hasComment,
-    isNative,
+    usingComponents: options.usingComponents,
+    hasComment: options.hasComment,
+    isNative: options.isNative,
+    basename: path.basename(resourcePath),
     isComponent: !!componentsMap[resourcePath],
     mode,
     env,
@@ -51,56 +52,49 @@ module.exports = function (raw) {
     defs,
     decodeHTMLText,
     externalClasses,
-    hasScoped,
-    moduleId,
-    // 这里需传递resourcePath和wxsContentMap保持一致
-    filePath: resourcePath,
+    hasScoped: options.hasScoped,
+    moduleId: options.moduleId,
+    filePath: this.resourcePath,
     i18n,
     checkUsingComponents: mpx.checkUsingComponents,
     globalComponents: Object.keys(mpx.usingComponents),
-    forceProxyEvent: matchCondition(resourcePath, mpx.forceProxyEventRules),
-    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules),
-    proxyComponentEventsRules: mpx.proxyComponentEventsRules
+    // deprecated option
+    globalMpxAttrsFilter: mpx.globalMpxAttrsFilter,
+    forceProxyEvent: matchCondition(this.resourcePath, mpx.forceProxyEventRules),
+    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
   })
 
+  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 (isNative) {
+  if (options.isNative || mpx.forceDisableInject) {
     return result
   }
 
-  const rawCode = `
-global.currentInject = {
-  moduleId: ${JSON.stringify(moduleId)},
-  render: function () {
-    ${compiler.genNode(ast)}
-    this._r();
-  }
+  const rawCode = `global.currentInject = {
+    moduleId: ${JSON.stringify(options.moduleId)},
+    render: function () {
+      ${compiler.genNode(ast)}this._r();
+    }
 };\n`
 
-  let bindResult
+  let renderResult
 
   try {
-    bindResult = bindThis(rawCode, {
+    renderResult = 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:
@@ -110,30 +104,123 @@ ${e.stack}`)
     return result
   }
 
-  resultSource += bindResult.code + '\n'
+  // todo 此处在loader中往其他模块addDep更加危险，考虑修改为通过抽取后的空模块的module.exports来传递信息
+  let globalInjectCode = renderResult.code + '\n'
 
-  if ((mode === 'tt' || mode === 'swan') && bindResult.propKeys) {
-    resultSource += `global.currentInject.propKeys = ${JSON.stringify(bindResult.propKeys)};\n`
+  if ((mode === 'tt' || mode === 'swan') && renderResult.propKeys) {
+    globalInjectCode += `global.currentInject.propKeys = ${JSON.stringify(renderResult.propKeys)};\n`
   }
 
   if (meta.computed) {
-    resultSource += bindThis(`
-global.currentInject.injectComputed = {
+    globalInjectCode += bindThis(`global.currentInject.injectComputed = {
   ${meta.computed.join(',')}
-};`).code + '\n'
+  };`).code + '\n'
   }
 
   if (meta.refs) {
-    resultSource += `
-global.currentInject.getRefsData = function () {
+    globalInjectCode += `global.currentInject.getRefsData = function () {
   return ${JSON.stringify(meta.refs)};
-};\n`
+  };\n`
+  }
+
+  if (meta.options) {
+    globalInjectCode += bindThis(`global.currentInject.injectOptions = ${JSON.stringify(meta.options)};`).code + '\n'
   }
 
-  this.emitFile(resourcePath, '', undefined, {
-    skipEmit: true,
-    extractedResultSource: resultSource
+  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
   })
 
-  return result
+  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)
+      }
+    )
+  }
 }

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

@@ -1,34 +1,29 @@
 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.parse(expr, {
+    const ast = babylon.parseExpression(expr, {
       plugins: [
         'objectRestSpread'
       ]
     })
-    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')
-              }
+    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.`)
             } else {
-              property.key = t.identifier(propertyName)
+              property.key = t.identifier(propertyName.replace(/-/g, '$$') + 'MpxDash')
             }
           }
-        })
-      }
-    })
-    return generate(ast.program.body[0].expression, {
+        }
+      })
+    }
+    return generate(ast, {
       compact: true
     }).code
   } catch (e) {

package/lib/url-loader.js

@@ -1,33 +1,51 @@
 const loaderUtils = require('loader-utils')
 const mime = require('mime')
-const parseRequest = require('./utils/parse-request')
 const getOptions = loaderUtils.getOptions
+const parseQuery = loaderUtils.parseQuery
 
 function isStyleRequest (request) {
-  const { loaderString, queryObj } = parseRequest(request)
-  if (queryObj.type === 'styles') return true
-  if (/(css-loader|wxss\/loader)/.test(loaderString)) return true
+  let elements = request.replace(/^-?!+/, '').replace(/!!+/g, '!').split('!')
+  elements.pop()
+  for (let i = 0; i < elements.length; i++) {
+    let element = elements[i]
+    let queryString = '?'
+    let loaderString = element
+    let idx = element.indexOf('?')
+    if (idx >= 0) {
+      queryString = element.substr(idx)
+      loaderString = element.substr(0, idx)
+    }
+    if (/css-loader/.test(loaderString)) {
+      return true
+    }
+    if (/content-loader/.test(loaderString)) {
+      let query = parseQuery(queryString)
+      if (query.type === 'styles') {
+        return true
+      }
+    }
+  }
   return false
 }
 
 module.exports = function (src) {
   let transBase64 = false
   const options = Object.assign({}, getOptions(this))
-  const { resourcePath, queryObj } = parseRequest(this.resource)
-  const mimetype = options.mimetype || mime.getType(resourcePath)
-  const moduleGraph = this._compilation.moduleGraph
-  const issuer = moduleGraph.getIssuer(this._module)
+  const filePath = this.resourcePath
+  const mimetype = options.mimetype || mime.getType(filePath)
+  const issuer = this._module.issuer
   const publicPathScope = options.publicPathScope === 'all' ? 'all' : 'styleOnly'
+  const queryOption = parseQuery(this.resourceQuery || '?')
   const limit = options.limit
-  const useLocal = !limit || src.length < limit || queryObj.useLocal
-  const isStyle = (issuer && issuer.request && isStyleRequest(issuer.request)) || queryObj.isStyle
+  const useLocal = !limit || src.length < limit || queryOption.useLocal
+  const isStyle = (issuer && issuer.request && isStyleRequest(issuer.request)) || queryOption.isStyle
 
   if (isStyle) {
     if (options.publicPath) {
       if (useLocal) {
         transBase64 = true
       }
-      if (queryObj.fallback) {
+      if (queryOption.fallback) {
         transBase64 = false
       }
     } else {

package/lib/utils/add-query.js

@@ -3,7 +3,7 @@ const stringifyQuery = require('./stringify-query')
 const type = require('./type')
 
 // 默认为非强行覆盖原query，如需强行覆盖传递force为true
-module.exports = function addQuery (request, data = {}, force, removeKeys) {
+module.exports = function (request, data = {}, force, removeKeys) {
   const { rawResourcePath: resourcePath, loaderString, queryObj: queryObjRaw } = parseRequest(request)
   const queryObj = Object.assign({}, queryObjRaw)
   if (force) {

package/lib/utils/get-main-compilation.js

@@ -0,0 +1,6 @@
+module.exports = function (compilation) {
+  while (compilation.compiler.parentCompilation) {
+    compilation = compilation.compiler.parentCompilation
+  }
+  return compilation
+}

package/lib/utils/is-url-request.js

@@ -1,7 +1,7 @@
 const isUrlRequestRaw = require('loader-utils').isUrlRequest
 const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
 
-module.exports = function isUrlRequest (url, root, externals) {
+module.exports = function isUrlRequest (url, root) {
   // 对于非字符串或空字符串url直接返回false
   if (!url || typeof url !== 'string') return false
   // 对于@开头且后续字符串为合法标识符的情况也返回false，识别为theme变量
@@ -9,14 +9,5 @@ module.exports = function isUrlRequest (url, root, externals) {
   if (/^.+:\/\//.test(url)) return false
   // 对于url中存在Mustache插值的情况也返回false
   if (tagRE.test(url)) return false
-  // url存在于externals中也返回false
-  if (externals && externals.some((external) => {
-    if (typeof external === 'string') {
-      return external === url
-    } else if (external instanceof RegExp) {
-      return external.test(url)
-    }
-    return false
-  })) return false
   return isUrlRequestRaw(url, root)
 }

package/lib/utils/match-condition.js

@@ -45,7 +45,4 @@ const matchCondition = (resourcePath, condition = {}) => {
   return matched
 }
 
-module.exports = {
-  matchCondition,
-  normalizeCondition
-}
+module.exports = matchCondition

package/lib/utils/normalize.js

@@ -1,5 +1,16 @@
-// const path = require('path')
+const fs = require('fs')
+const path = require('path')
 
-// exports.lib = file => path.resolve(__dirname, '../', file)
-// support npm link debug
-exports.lib = file => '@mpxjs/webpack-plugin/lib/' + file
+exports.lib = file => path.resolve(__dirname, '../', file)
+
+exports.dep = dep => {
+  if (
+    fs.existsSync(path.resolve(__dirname, '../../node_modules', dep))
+  ) {
+    // npm 2 or npm linked
+    return '@mpxjs/webpack-plugin/node_modules/' + dep
+  } else {
+    // npm 3
+    return dep
+  }
+}

package/lib/utils/parse-request.js

@@ -4,7 +4,7 @@ const path = require('path')
 
 function genQueryObj (result) {
   // 避免外部修改queryObj影响缓存
-  result.queryObj = parseQuery(result.resourceQuery || '?')
+  result.queryObj = parseQuery(result.resourceQuery)
   return result
 }
 
@@ -16,13 +16,13 @@ module.exports = function parseRequest (request) {
   let resource = elements.pop()
   let loaderString = elements.join('!')
   let resourcePath = resource
-  let resourceQuery = ''
+  let resourceQuery = '?'
   const queryIndex = resource.indexOf('?')
   if (queryIndex >= 0) {
     resourcePath = resource.slice(0, queryIndex)
     resourceQuery = resource.slice(queryIndex)
   }
-  const queryObj = parseQuery(resourceQuery || '?')
+  const queryObj = parseQuery(resourceQuery)
   const rawResourcePath = resourcePath
   if (queryObj.resourcePath) {
     resourcePath = queryObj.resourcePath

package/lib/utils/read-json-for-src.js

@@ -0,0 +1,34 @@
+const parseRequest = require('./parse-request')
+const mpxJSON = require('./mpx-json')
+const getMainCompilation = require('./get-main-compilation')
+
+module.exports = function readJsonForSrc (src, loaderContext, callback) {
+  const fs = loaderContext._compiler.inputFileSystem
+  const mpx = getMainCompilation(loaderContext._compilation).__mpx__
+  const defs = mpx.defs
+  const resolve = (context, request, callback) => {
+    const { queryObj } = parseRequest(request)
+    context = queryObj.context || context
+    return loaderContext.resolve(context, request, callback)
+  }
+
+  resolve(loaderContext.context, src, (err, result) => {
+    if (err) return callback(err)
+    const { rawResourcePath: resourcePath } = parseRequest(result)
+    loaderContext.addDependency(resourcePath)
+    fs.readFile(resourcePath, (err, content) => {
+      if (err) {
+        return callback(err)
+      }
+      content = content.toString('utf-8')
+      if (resourcePath.endsWith('.json.js')) {
+        try {
+          content = mpxJSON.compileMPXJSONText({ source: content, defs, filePath: resourcePath })
+        } catch (e) {
+          return callback(e)
+        }
+      }
+      callback(null, content)
+    })
+  })
+}

package/lib/utils/stringify-query.js

@@ -16,10 +16,6 @@ function stringifyQuery (obj, useJSON) {
       return
     }
 
-    if (val === true) {
-      return key
-    }
-
     if (Array.isArray(val)) {
       const key2 = `${key}[]`
       const result = []

package/lib/utils/try-require.js

@@ -0,0 +1,16 @@
+const cwd = process.cwd()
+const resolve = require('resolve')
+
+module.exports = function tryRequire (dep) {
+  let fromCwd
+  try {
+    fromCwd = resolve.sync(dep, { basedir: cwd })
+  } catch (e) {}
+  if (fromCwd) {
+    return require(fromCwd)
+  } else {
+    try {
+      return require(dep)
+    } catch (e) {}
+  }
+}