@mpxjs/webpack-plugin 2.6.103 → 2.7.0-alpha.0

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(
@@ -41,10 +41,9 @@ module.exports = function (raw) {
   const parsed = 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,16 +51,14 @@ 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),
-    hasVirtualHost: matchCondition(resourcePath, mpx.autoVirtualHostRules)
+    hasVirtualHost: matchCondition(this.resourcePath, mpx.autoVirtualHostRules)
   })
 
   let ast = parsed.root
@@ -73,28 +70,38 @@ module.exports = function (raw) {
     }
   }
 
+  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 +111,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,5 @@
+module.exports = {
+  MPX_PROCESSED_FLAG: 'mpx_processed',
+  MPX_DISABLE_EXTRACTOR_CACHE: 'mpx_disable_extractor_cache',
+  DEFAULT_RESULT_SOURCE: ''
+}

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)
+}

package/lib/utils/get-entry-name.js

@@ -0,0 +1,13 @@
+module.exports = function (loaderContext) {
+  const compilation = loaderContext._compilation
+  const moduleGraph = compilation.moduleGraph
+  let entryName = ''
+  for (const [name, { dependencies }] of compilation.entries) {
+    const entryModule = moduleGraph.getModule(dependencies[0])
+    if (entryModule.resource === loaderContext.resource) {
+      entryName = name
+      break
+    }
+  }
+  return entryName
+}

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) {
+module.exports = function isUrlRequest (url, root, externals) {
   // 对于非字符串或空字符串url直接返回false
   if (!url || typeof url !== 'string') return false
   // 对于@开头且后续字符串为合法标识符的情况也返回false，识别为theme变量
@@ -9,5 +9,14 @@ module.exports = function isUrlRequest (url, root) {
   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/normalize.js

@@ -1,16 +1,3 @@
-const fs = require('fs')
 const path = require('path')
 
 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/set.js

@@ -0,0 +1,47 @@
+module.exports = {
+  every (set, fn) {
+    for (const item of set) {
+      if (!fn(item)) return false
+    }
+    return true
+  },
+  has (set, fn) {
+    for (const item of set) {
+      if (fn(item)) return true
+    }
+    return false
+  },
+  map (set, fn) {
+    const result = new Set()
+    set.forEach((item) => {
+      result.add(fn(item))
+    })
+    return result
+  },
+  filter (set, fn) {
+    const result = new Set()
+    set.forEach((item) => {
+      if (fn(item)) {
+        result.add(item)
+      }
+    })
+    return result
+  },
+  concat (setA, setB) {
+    const result = new Set()
+    setA.forEach((item) => {
+      result.add(item)
+    })
+    setB.forEach((item) => {
+      result.add(item)
+    })
+    return result
+  },
+  mapToArr (set, fn) {
+    const result = []
+    set.forEach((item) => {
+      result.push(fn(item))
+    })
+    return result
+  }
+}

package/lib/utils/stringify-loaders-resource.js

@@ -0,0 +1,25 @@
+const loaderToIdent = data => {
+  if (!data.options) {
+    return data.loader
+  }
+  if (typeof data.options === 'string') {
+    return data.loader + '?' + data.options
+  }
+  if (typeof data.options !== 'object') {
+    throw new Error('loader options must be string or object')
+  }
+  if (data.ident) {
+    return data.loader + '??' + data.ident
+  }
+  return data.loader + '?' + JSON.stringify(data.options)
+}
+
+const stringifyLoadersAndResource = (loaders, resource) => {
+  let str = ''
+  for (const loader of loaders) {
+    str += loaderToIdent(loader) + '!'
+  }
+  return str + resource
+}
+
+module.exports = stringifyLoadersAndResource

package/lib/utils/stringify-query.js

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

package/lib/web/processScript.js

@@ -30,7 +30,6 @@ module.exports = function (script, options, callback) {
   const loaderContext = options.loaderContext
   const isProduction = options.isProduction
   const componentId = options.componentId
-  const getRequireForSrc = options.getRequireForSrc
   const i18n = options.i18n
   const jsonConfig = options.jsonConfig
   const tabBar = jsonConfig.tabBar
@@ -213,8 +212,9 @@ module.exports = function (script, options, callback) {
       }
       // 为了正确获取currentSrcMode便于运行时进行转换，对于src引入的组件script采用require方式引入(由于webpack会将import的执行顺序上升至最顶)，这意味着对于src引入脚本中的named export将不会生效，不过鉴于mpx和小程序中本身也没有在组件script中声明export的用法，所以应该没有影响
       content += script.src
-        ? (getRequireForSrc('script', script) + '\n')
-        : (script.content + '\n') + '\n'
+        ? `require(${stringifyRequest(script.src)})\n`
+        : script.content
+      content += '\n'
       // createApp/Page/Component执行完成后立刻获取当前的option并暂存
       content += `  const currentOption = global.currentOption\n`
       // 获取pageConfig

package/lib/web/processTemplate.js

@@ -83,6 +83,8 @@ module.exports = function (template, options, callback) {
           defs,
           decodeHTMLText: options.decodeHTMLText,
           externalClasses: options.externalClasses,
+          // todo 后续输出web也采用mpx的scoped处理
+          // hasScoped:options.hasScoped,
           hasScoped: false,
           moduleId,
           filePath: loaderContext.resourcePath,

package/lib/wxml/{wxml-loader.js → loader.js}

@@ -1,12 +1,9 @@
-// const htmlMinifier = require('html-minifier')
 const attrParse = require('./attributesParser')
 const loaderUtils = require('loader-utils')
 const url = require('url')
 const config = require('../config')
-const getMainCompilation = require('../utils/get-main-compilation')
 const createHelpers = require('../helpers')
 const isUrlRequest = require('../utils/is-url-request')
-const addQuery = require('../utils/add-query')
 const parseRequest = require('../utils/parse-request')
 
 function randomIdent () {
@@ -14,13 +11,13 @@ function randomIdent () {
 }
 
 module.exports = function (content) {
-  const loaderContext = this
-  const isProduction = this.minimize || process.env.NODE_ENV === 'production'
   const options = loaderUtils.getOptions(this) || {}
-  const mpx = getMainCompilation(this._compilation).__mpx__
+  const mpx = this.getMpx()
+  const root = mpx.projectRoot
+  const externals = mpx.externals
 
-  const { resourcePath: filePath, queryObj } = parseRequest(this.resource)
-  const moduleId = 'm' + mpx.pathHash(filePath)
+  const { queryObj } = parseRequest(this.resource)
+  const moduleId = queryObj.moduleId
   const hasScoped = false
   const hasComment = false
   const isNative = true
@@ -28,25 +25,10 @@ module.exports = function (content) {
   const usingComponents = []
 
   const mode = mpx.mode
-  const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
-  const srcMode = localSrcMode || globalSrcMode
   const customAttributes = options.attributes || mpx.attributes || []
 
-  const {
-    getSrcRequestString
-  } = createHelpers({
-    loaderContext,
-    options,
-    moduleId,
-    isProduction,
-    hasScoped,
-    hasComment,
-    usingComponents,
-    srcMode,
-    isNative,
-    projectRoot: options.root || ''
-  })
+  const { getRequestString } = createHelpers(this)
 
   const attributes = ['image:src', 'audio:src', 'video:src', 'cover-image:src', 'import:src', 'include:src', `${config[mode].wxs.tag}:${config[mode].wxs.src}`].concat(customAttributes)
 
@@ -64,7 +46,7 @@ module.exports = function (content) {
   const data = {}
   content = [content]
   links.forEach(function (link) {
-    if (!isUrlRequest(link.value, options.root)) return
+    if (!isUrlRequest(link.value, root, externals)) return
 
     if (link.value.indexOf('mailto:') > -1) return
 
@@ -88,57 +70,39 @@ module.exports = function (content) {
   })
   content.reverse()
   content = content.join('')
-
-  // if (isProduction) {
-  //   const minimizeOptions = Object.assign({}, options);
-  //   [
-  //     'removeComments',
-  //     'removeCommentsFromCDATA',
-  //     'removeCDATASectionsFromCDATA',
-  //     'caseSensitive',
-  //     'collapseWhitespace',
-  //     'conservativeCollapse',
-  //     'useShortDoctype',
-  //     'keepClosingSlash',
-  //     'removeScriptTypeAttributes',
-  //     'removeStyleTypeAttributes'
-  //   ].forEach(function (name) {
-  //     if (typeof minimizeOptions[name] === 'undefined') {
-  //       minimizeOptions[name] = true
-  //     }
-  //   })
-  //
-  //   const KEY_IGNORECUSTOM_FRAGMENTS = 'ignoreCustomFragments'
-  //   if (typeof minimizeOptions[KEY_IGNORECUSTOM_FRAGMENTS] === 'undefined') {
-  //     minimizeOptions[KEY_IGNORECUSTOM_FRAGMENTS] = [/{{[\s\S]*?}}/]
-  //   }
-  //
-  //   content = htmlMinifier.minify(content, minimizeOptions)
-  // }
-
   content = JSON.stringify(content)
 
   const exportsString = 'module.exports = '
 
-  return exportsString + content.replace(/xxxHTMLLINKxxx[0-9.]+xxx/g, function (match) {
+  return exportsString + content.replace(/xxxHTMLLINKxxx[0-9.]+xxx/g, (match) => {
     if (!data[match]) return match
 
     const link = data[match]
 
-    let src = loaderUtils.urlToRequest(link.value, options.root)
-    src = addQuery(src, { isStatic: true })
+    let src = loaderUtils.urlToRequest(link.value, root)
 
-    let requestString
+    let requestString, extraOptions
 
     switch (link.tag) {
       case 'import':
       case 'include':
-        requestString = getSrcRequestString('template', { src, mode: localSrcMode }, -1)
+        extraOptions = {
+          hasScoped,
+          hasComment,
+          isNative,
+          moduleId,
+          usingComponents,
+          isStatic: true
+        }
+        requestString = getRequestString('template', { src, mode: localSrcMode }, extraOptions)
         break
       case config[mode].wxs.tag:
         // 显式传递issuerResource避免模块缓存以及提供给wxs-loader计算相对路径
-        src = addQuery(src, { issuerResource: loaderContext.resource })
-        requestString = getSrcRequestString('wxs', { src, mode: localSrcMode }, -1, undefined, '!!')
+        extraOptions = {
+          issuerFile: mpx.getExtractedFile(this.resource),
+          isStatic: true
+        }
+        requestString = getRequestString('wxs', { src, mode: localSrcMode }, extraOptions)
         break
       default:
         requestString = JSON.stringify(src)