@mpxjs/webpack-plugin 2.6.110 → 2.7.0-beta.10

package/lib/template-compiler/compiler.js

@@ -1,11 +1,10 @@
 const JSON5 = require('json5')
 const he = require('he')
 const config = require('../config')
-const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../staticConfig')
+const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
 const normalize = require('../utils/normalize')
 const isValidIdentifierStr = require('../utils/is-valid-identifier-str')
 const isEmptyObject = require('../utils/is-empty-object')
-const mpxJSON = require('../utils/mpx-json')
 const getRulesRunner = require('../platform/index')
 const addQuery = require('../utils/add-query')
 const transDynamicClassExpr = require('./trans-dynamic-class-expr')
@@ -130,107 +129,6 @@ function isForbiddenTag (el) {
   )
 }
 
-// mpx special comments
-// example
-/*
-{
-  'tt,swan': {
-    remove: [
-      'open-type',
-      // src mode attr
-      'wx:if'
-    ],
-    add: {
-      type: 'primary',
-      // attr name only
-      foo: null,
-    }
-  }
-}
-*/
-let curMpxComment = null
-
-function evalMpxCommentExp (exp) {
-  /* eslint-disable no-new-func */
-  const f = new Function(`return ${exp};`)
-  return f()
-}
-
-function isMpxCommentAttrs (content) {
-  return /@mpx-attrs/.test(content)
-}
-
-function normalizePlatformMpxAttrsOpts (opts) {
-  const ret = {}
-  // Array to map for removing attributes
-  ret.remove = (opts.remove || []).reduce((acc, val) => {
-    acc[val] = true
-    return acc
-  }, {})
-  // Default adding map
-  ret.add = opts.add || {}
-  return ret
-}
-
-function produceMpxCommentAttrs (content) {
-  const exp = /@mpx-attrs[^(]*?\(([\s\S]*)\)/.exec(content)[1].trim()
-  const tmpOpts = evalMpxCommentExp(exp)
-  // normalize
-  Object.keys(tmpOpts).forEach(k => {
-    Object.assign(tmpOpts[k], normalizePlatformMpxAttrsOpts(tmpOpts[k]))
-
-    if (k.indexOf(',') > -1) {
-      const modes = k.split(',')
-      modes.forEach(mode => {
-        tmpOpts[mode] = tmpOpts[k]
-      })
-      delete tmpOpts[k]
-    }
-  })
-  curMpxComment = tmpOpts
-}
-
-function modifyAttrsFromCurMpxAttrOptions (attrs, curModeMpxComment) {
-  const removeMap = curModeMpxComment.remove
-  const addMap = curModeMpxComment.add
-
-  const newAttrs = []
-  attrs.forEach(attr => {
-    if (!removeMap[attr.name]) {
-      newAttrs.push(attr)
-    }
-  })
-
-  Object.keys(addMap).forEach(name => {
-    newAttrs.push({
-      name,
-      value: addMap[name]
-    })
-  })
-
-  return newAttrs
-}
-
-function consumeMpxCommentAttrs (attrs, mode) {
-  let ret = attrs
-  if (curMpxComment) {
-    const curModeMpxComment = curMpxComment[mode]
-    if (curModeMpxComment) {
-      ret = modifyAttrsFromCurMpxAttrOptions(attrs, curModeMpxComment)
-    }
-
-    // reset
-    curMpxComment = null
-  }
-  return ret
-}
-
-function assertMpxCommentAttrsEnd () {
-  if (curMpxComment) {
-    error$1('No target for @mpx-attrs!')
-  }
-}
-
 // Browser environment sniffing
 const UA = inBrowser && window.navigator.userAgent.toLowerCase()
 const isIE = UA && /msie|trident/.test(UA)
@@ -254,6 +152,9 @@ let forScopesMap = {}
 let hasI18n = false
 let i18nInjectableComputed = []
 let env
+let platformGetTagNamespace
+let filePath
+let refId
 
 function updateForScopesMap () {
   forScopes.forEach((scope) => {
@@ -280,9 +181,6 @@ const deleteErrorInResultMap = (node) => {
   rulesResultMap.delete(node)
   Array.isArray(node.children) && node.children.forEach(item => deleteErrorInResultMap(item))
 }
-let platformGetTagNamespace
-let basename
-let refId
 
 function baseWarn (msg) {
   console.warn(('[template compiler]: ' + msg))
@@ -311,7 +209,7 @@ function decode (value) {
 
 const i18nFuncNames = ['\\$(t)', '\\$(tc)', '\\$(te)', '\\$(d)', '\\$(n)']
 const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
-const i18nWxsLoaderPath = normalize.lib('wxs/wxs-i18n-loader.js')
+const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
 // 添加~前缀避免wxs绝对路径在存在projectRoot时被拼接为错误路径
 const i18nWxsRequest = '~' + i18nWxsLoaderPath + '!' + i18nWxsPath
 const i18nModuleName = '__i18n__'
@@ -598,8 +496,8 @@ function parseHTML (html, options) {
 
 function parseComponent (content, options) {
   mode = options.mode || 'wx'
-  defs = options.defs || {}
   env = options.env
+  filePath = options.filePath
 
   let sfc = {
     template: null,
@@ -649,6 +547,9 @@ function parseComponent (content, options) {
             if (/^application\/json/.test(currentBlock.type) || currentBlock.name === 'json') {
               tag = 'json'
             }
+            if (currentBlock.name === 'json') {
+              currentBlock.useJSONJS = true
+            }
           }
           if (currentBlock.mode && currentBlock.env) {
             if (currentBlock.mode === mode && currentBlock.env === env) {
@@ -692,9 +593,6 @@ function parseComponent (content, options) {
       if (attr.name === 'scoped') {
         block.scoped = true
       }
-      if (attr.name === 'module') {
-        block.module = attr.value || true
-      }
       if (attr.name === 'src') {
         block.src = attr.value
       }
@@ -710,20 +608,15 @@ function parseComponent (content, options) {
     }
   }
 
-  function end (tag, start, end) {
+  function end (tag, start) {
     if (depth === 1 && currentBlock) {
       currentBlock.end = start
       let text = content.slice(currentBlock.start, currentBlock.end)
       // pad content so that linters and pre-processors can output correct
       // line numbers in errors and warnings
-      if (currentBlock.tag !== 'template' && options.pad) {
+      if (options.pad) {
         text = padContent(currentBlock, options.pad) + text
       }
-
-      // 对于<script name="json">的标签，传参调用函数，其返回结果作为json的内容
-      if (currentBlock.tag === 'script' && !/^application\/json/.test(currentBlock.type) && currentBlock.name === 'json') {
-        text = mpxJSON.compileMPXJSONText({ source: text, defs, filePath: options.filePath })
-      }
       currentBlock.content = text
       currentBlock = null
     }
@@ -774,7 +667,7 @@ function parse (template, options) {
   defs = options.defs || {}
   srcMode = options.srcMode || mode
   isNative = options.isNative
-  basename = options.basename
+  filePath = options.filePath
   i18n = options.i18n
   refId = 0
 
@@ -825,16 +718,6 @@ function parse (template, options) {
         attrs = guardIESVGBug(attrs)
       }
 
-      if (options.globalMpxAttrsFilter) {
-        attrs = modifyAttrsFromCurMpxAttrOptions(attrs, normalizePlatformMpxAttrsOpts(options.globalMpxAttrsFilter({
-          tagName: tag,
-          attrs,
-          __mpx_mode__: mode,
-          filePath: options.filePath
-        }) || {}))
-      }
-      attrs = consumeMpxCommentAttrs(attrs, mode)
-
       let element = createASTElement(tag, attrs, currentParent)
       if (ns) {
         element.ns = ns
@@ -849,21 +732,6 @@ function parse (template, options) {
         )
       }
 
-      // single root
-      // // gen root
-      // if (!root) {
-      //   root = element
-      // } else {
-      //   // mount element
-      //   if (currentParent) {
-      //     currentParent.children.push(element)
-      //     element.parent = currentParent
-      //   } else {
-      //     multiRootError = true
-      //     return
-      //   }
-      // }
-
       // multi root
       if (!currentParent) genTempRoot()
 
@@ -932,10 +800,7 @@ function parse (template, options) {
     },
     comment: function comment (text) {
       if (!currentParent) genTempRoot()
-      // special comments should not be output
-      if (isMpxCommentAttrs(text)) {
-        produceMpxCommentAttrs(text)
-      } else if (options.hasComment) {
+      if (options.hasComment) {
         currentParent.children.push({
           type: 3,
           text: text,
@@ -946,8 +811,6 @@ function parse (template, options) {
     }
   })
 
-  assertMpxCommentAttrsEnd()
-
   if (multiRootError) {
     error$1('Template fields should has one single root, considering wrapping your template content with <view> or <text> tag!')
   }
@@ -1137,15 +1000,6 @@ function processComponentIs (el, options) {
   }
 }
 
-// function processComponentDepth (el, options) {
-//   if (isComponentNode(el,options)) {
-//     addAttrs(el, [{
-//       name: 'mpxDepth',
-//       value: '{{mpxDepth + 1}}'
-//     }])
-//   }
-// }
-
 const eventIdentifier = '__mpx_event__'
 
 function parseFuncStr2 (str) {
@@ -1553,9 +1407,13 @@ function postProcessWxs (el, meta) {
         content = el.children.filter((child) => {
           return child.type === 3 && !child.isComment
         }).map(child => child.text).join('\n')
-        src = addQuery('./' + basename, {
+
+        const fakeRequest = filePath + config[mode].wxs.ext
+
+        src = addQuery(`~${fakeRequest}!=!${filePath}`, {
           wxsModule: module
         })
+
         addAttrs(el, [{
           name: config[mode].wxs.src,
           value: src
@@ -1636,9 +1494,9 @@ function postProcessFor (el) {
 }
 
 function evalExp (exp) {
-  // eslint-disable-next-line no-new-func
   let result = { success: false }
   try {
+    // eslint-disable-next-line no-new-func
     const fn = new Function(`return ${exp};`)
     result = {
       success: true,
@@ -2484,5 +2342,6 @@ module.exports = {
   makeAttrsMap,
   stringifyAttr,
   parseMustache,
-  stringifyWithResolveComputed
+  stringifyWithResolveComputed,
+  addAttrs
 }

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 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
 
   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,54 @@ module.exports = function (raw) {
     defs,
     decodeHTMLText,
     externalClasses,
-    hasScoped: options.hasScoped,
-    moduleId: options.moduleId,
+    hasScoped,
+    moduleId,
     filePath: this.resourcePath,
     i18n,
     checkUsingComponents: mpx.checkUsingComponents,
     globalComponents: Object.keys(mpx.usingComponents),
-    // deprecated option
-    globalMpxAttrsFilter: mpx.globalMpxAttrsFilter,
-    forceProxyEvent: matchCondition(this.resourcePath, mpx.forceProxyEventRules),
+    forceProxyEvent: matchCondition(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 (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 +108,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/url-loader.js

@@ -1,51 +1,33 @@
 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) {
-  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
-      }
-    }
-  }
+  const { loaderString, queryObj } = parseRequest(request)
+  if (queryObj.type === 'styles') return true
+  if (/(css-loader|wxss\/loader)/.test(loaderString)) return true
   return false
 }
 
 module.exports = function (src) {
   let transBase64 = false
   const options = Object.assign({}, getOptions(this))
-  const filePath = this.resourcePath
-  const mimetype = options.mimetype || mime.getType(filePath)
-  const issuer = this._module.issuer
+  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 publicPathScope = options.publicPathScope === 'all' ? 'all' : 'styleOnly'
-  const queryOption = parseQuery(this.resourceQuery || '?')
   const limit = options.limit
-  const useLocal = !limit || src.length < limit || queryOption.useLocal
-  const isStyle = (issuer && issuer.request && isStyleRequest(issuer.request)) || queryOption.isStyle
+  const useLocal = !limit || src.length < limit || queryObj.useLocal
+  const isStyle = (issuer && issuer.request && isStyleRequest(issuer.request)) || queryObj.isStyle
 
   if (isStyle) {
     if (options.publicPath) {
       if (useLocal) {
         transBase64 = true
       }
-      if (queryOption.fallback) {
+      if (queryObj.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 (request, data = {}, force, removeKeys) {
+module.exports = function addQuery (request, data = {}, force, removeKeys) {
   const { rawResourcePath: resourcePath, loaderString, queryObj: queryObjRaw } = parseRequest(request)
   const queryObj = Object.assign({}, queryObjRaw)
   if (force) {

package/lib/utils/const.js

@@ -0,0 +1,9 @@
+module.exports = {
+  MPX_PROCESSED_FLAG: 'mpx_processed',
+  MPX_DISABLE_EXTRACTOR_CACHE: 'mpx_disable_extractor_cache',
+  DEFAULT_RESULT_SOURCE: '',
+  RESOLVE_IGNORED_ERR: new Error('Resolve ignored!'),
+  JSON_JS_EXT: '.json.js',
+  MPX_ROOT_VIEW: 'mpx-root-view', // 根节点类名
+  MPX_APP_MODULE_ID: 'mpx-app-scope' // app文件moduleId
+}

package/lib/utils/emit-file.js

@@ -0,0 +1,10 @@
+const { RawSource } = require('webpack').sources
+
+module.exports = (module, name, content, sourceMap, assetInfo) => {
+  if (!module.buildInfo.assets) {
+    module.buildInfo.assets = Object.create(null)
+    module.buildInfo.assetsInfo = new Map()
+  }
+  module.buildInfo.assets[name] = new RawSource(content)
+  module.buildInfo.assetsInfo.set(name, assetInfo)
+}