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

package/lib/loader.js

@@ -3,7 +3,7 @@ const parseComponent = require('./parser')
 const createHelpers = require('./helpers')
 const loaderUtils = require('loader-utils')
 const parseRequest = require('./utils/parse-request')
-const matchCondition = require('./utils/match-condition')
+const { matchCondition } = require('./utils/match-condition')
 const fixUsingComponent = require('./utils/fix-using-component')
 const addQuery = require('./utils/add-query')
 const async = require('async')
@@ -11,27 +11,38 @@ const processJSON = require('./web/processJSON')
 const processScript = require('./web/processScript')
 const processStyles = require('./web/processStyles')
 const processTemplate = require('./web/processTemplate')
-const readJsonForSrc = require('./utils/read-json-for-src')
+const processForTenon = require('./tenon/index')
+const getJSONContent = require('./utils/get-json-content')
 const normalize = require('./utils/normalize')
 const getEntryName = require('./utils/get-entry-name')
 const AppEntryDependency = require('./dependencies/AppEntryDependency')
+const RecordResourceMapDependency = require('./dependencies/RecordResourceMapDependency')
+const CommonJsVariableDependency = require('./dependencies/CommonJsVariableDependency')
+const { MPX_APP_MODULE_ID } = require('./utils/const')
+const path = require('path')
 
 module.exports = function (content) {
   this.cacheable()
 
+  // 兼容处理处理ts-loader中watch-run/updateFile逻辑，直接跳过当前loader及后续的vue-loader返回内容
+  if (path.extname(this.resourcePath) === '.ts') {
+    this.loaderIndex -= 2
+    return content
+  }
+
   const mpx = this.getMpx()
   if (!mpx) {
     return content
   }
   const { resourcePath, queryObj } = parseRequest(this.resource)
-  const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
+
+  const packageRoot = queryObj.packageRoot || mpx.currentPackageRoot
+  const packageName = packageRoot || 'main'
+  const independent = queryObj.independent
   const pagesMap = mpx.pagesMap
   const componentsMap = mpx.componentsMap[packageName]
-  const resolveMode = mpx.resolveMode
-  const projectRoot = mpx.projectRoot
   const mode = mpx.mode
   const env = mpx.env
-  const defs = mpx.defs
   const i18n = mpx.i18n
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
@@ -39,16 +50,6 @@ module.exports = function (content) {
   const vueContentCache = mpx.vueContentCache
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
 
-  // 支持资源query传入page或component支持页面/组件单独编译
-  if ((queryObj.component && !componentsMap[resourcePath]) || (queryObj.page && !pagesMap[resourcePath])) {
-    const entryName = getEntryName(this)
-    if (queryObj.component) {
-      componentsMap[resourcePath] = entryName || 'noEntryComponent'
-    } else {
-      pagesMap[resourcePath] = entryName || 'noEntryPage'
-    }
-  }
-
   let ctorType = 'app'
   if (pagesMap[resourcePath]) {
     // page
@@ -58,42 +59,40 @@ module.exports = function (content) {
     ctorType = 'component'
   }
 
-  if (ctorType === 'app') {
-    const appName = getEntryName(this)
-    this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+  // 支持资源query传入isPage或isComponent支持页面/组件单独编译
+  if (ctorType === 'app' && (queryObj.isComponent || queryObj.isPage)) {
+    const entryName = getEntryName(this) || (queryObj.isComponent ? 'noEntryComponent' : 'noEntryPage')
+    ctorType = queryObj.isComponent ? 'component' : 'page'
+    this._module.addPresentationalDependency(new RecordResourceMapDependency(resourcePath, ctorType, entryName, packageRoot))
   }
 
   const loaderContext = this
   const stringifyRequest = r => loaderUtils.stringifyRequest(loaderContext, r)
   const isProduction = this.minimize || process.env.NODE_ENV === 'production'
-
-  const filePath = resourcePath
-
-  const moduleId = 'm' + mpx.pathHash(filePath)
+  const filePath = this.resourcePath
+  const moduleId = ctorType === 'app' ? MPX_APP_MODULE_ID : 'm' + mpx.pathHash(filePath)
 
   const parts = parseComponent(content, {
     filePath,
     needMap: this.sourceMap,
     mode,
-    defs,
     env
   })
 
+  const {
+    getRequire
+  } = createHelpers(loaderContext)
+
   let output = ''
   const callback = this.async()
 
   async.waterfall([
     (callback) => {
-      const json = parts.json || {}
-      if (json.src) {
-        readJsonForSrc(json.src, loaderContext, (err, result) => {
-          if (err) return callback(err)
-          json.content = result
-          callback()
-        })
-      } else {
+      getJSONContent(parts.json || {}, loaderContext, (err, content) => {
+        if (err) return callback(err)
+        if (parts.json) parts.json.content = content
         callback()
-      }
+      })
     },
     (callback) => {
       // web输出模式下没有任何inject，可以通过cache直接返回，由于读取src json可能会新增模块依赖，需要在之后返回缓存内容
@@ -124,12 +123,51 @@ module.exports = function (content) {
         }
       }
 
-      // 处理mode为web时输出vue格式文件
-      if (mode === 'web') {
+      if (mode === 'tenon') {
         if (ctorType === 'app' && !queryObj.app) {
           const request = addQuery(this.resource, { app: true })
           output += `
       import App from ${stringifyRequest(request)}
+      import * as Tenon from '@hummer/tenon-vue'
+
+      Tenon.render(App)\n`
+          // 直接结束loader进入parse
+          this.loaderIndex = -1
+          return callback(null, output)
+        }
+        if (ctorType === 'page' && queryObj.tenon) {
+          console.log(resourcePath)
+          const request = addQuery(resourcePath, { page: true })
+          output += `
+      import page from ${stringifyRequest(request)}
+      import * as Tenon from '@hummer/tenon-vue'
+
+      Tenon.render(page)\n`
+          this.loaderIndex = -1
+          return callback(null, output)
+        }
+        return processForTenon({
+          mpx,
+          loaderContext,
+          isProduction,
+          queryObj,
+          filePath,
+          parts,
+          ctorType,
+          autoScope,
+          componentsMap,
+          vueContentCache,
+          moduleId,
+          callback
+        })
+      }
+
+      // 处理mode为web时输出vue格式文件
+      if (mode === 'web') {
+        if (ctorType === 'app' && !queryObj.isApp) {
+          const request = addQuery(this.resource, { isApp: true })
+          output += `
+      import App from ${stringifyRequest(request)}
       import Vue from 'vue'
       new Vue({
         el: '#app',
@@ -148,20 +186,15 @@ module.exports = function (content) {
             async.parallel([
               (callback) => {
                 processTemplate(parts.template, {
+                  loaderContext,
                   hasScoped,
                   hasComment,
                   isNative,
-                  mode,
                   srcMode,
-                  defs,
-                  loaderContext,
                   moduleId,
                   ctorType,
                   usingComponents,
-                  componentGenerics,
-                  decodeHTMLText: mpx.decodeHTMLText,
-                  externalClasses: mpx.externalClasses,
-                  checkUsingComponents: mpx.checkUsingComponents
+                  componentGenerics
                 }, callback)
               },
               (callback) => {
@@ -173,16 +206,9 @@ module.exports = function (content) {
               },
               (callback) => {
                 processJSON(parts.json, {
-                  mode,
-                  env,
-                  defs,
-                  resolveMode,
                   loaderContext,
                   pagesMap,
-                  pagesEntryMap: mpx.pagesEntryMap,
-                  pathHash: mpx.pathHash,
-                  componentsMap,
-                  projectRoot
+                  componentsMap
                 }, callback)
               }
             ], (err, res) => {
@@ -198,23 +224,20 @@ module.exports = function (content) {
             }
 
             processScript(parts.script, {
+              loaderContext,
               ctorType,
               srcMode,
-              loaderContext,
               isProduction,
-              i18n,
               componentGenerics,
-              projectRoot,
               jsonConfig: jsonRes.jsonObj,
-              componentId: queryObj.componentId || '',
+              outputPath: queryObj.outputPath || '',
               tabBarMap: jsonRes.tabBarMap,
               tabBarStr: jsonRes.tabBarStr,
               builtInComponentsMap: templateRes.builtInComponentsMap,
               genericsInfo: templateRes.genericsInfo,
               wxsModuleMap: templateRes.wxsModuleMap,
               localComponentsMap: jsonRes.localComponentsMap,
-              localPagesMap: jsonRes.localPagesMap,
-              forceDisableBuiltInLoader: mpx.forceDisableBuiltInLoader
+              localPagesMap: jsonRes.localPagesMap
             }, callback)
           }
         ], (err, scriptRes) => {
@@ -225,29 +248,48 @@ module.exports = function (content) {
         })
       }
 
-      const {
-        getRequire
-      } = createHelpers(loaderContext)
+      const moduleGraph = this._compilation.moduleGraph
+
+      const issuer = moduleGraph.getIssuer(this._module)
+
+      if (issuer) {
+        return callback(new Error(`Current ${ctorType} [${this.resourcePath}] is issued by [${issuer.resource}], which is not allowed!`))
+      }
+
+      if (ctorType === 'app') {
+        const appName = getEntryName(this)
+        this._module.addPresentationalDependency(new AppEntryDependency(resourcePath, appName))
+      }
 
       // 注入模块id及资源路径
       output += `global.currentModuleId = ${JSON.stringify(moduleId)}\n`
       if (!isProduction) {
         output += `global.currentResource = ${JSON.stringify(filePath)}\n`
       }
-      if (ctorType === 'app' && i18n) {
-        output += `global.i18n = ${JSON.stringify({ locale: i18n.locale, version: 0 })}\n`
 
+      // 为app注入i18n
+      if (i18n && ctorType === 'app') {
         const i18nWxsPath = normalize.lib('runtime/i18n.wxs')
         const i18nWxsLoaderPath = normalize.lib('wxs/i18n-loader.js')
         const i18nWxsRequest = i18nWxsLoaderPath + '!' + i18nWxsPath
+        this._module.addDependency(new CommonJsVariableDependency(i18nWxsRequest))
+        // 避免该模块被concatenate导致注入的i18n没有最先执行
+        this._module.buildInfo.moduleConcatenationBailout = 'i18n'
+      }
 
-        output += `global.i18nMethods = require(${loaderUtils.stringifyRequest(loaderContext, i18nWxsRequest)})\n`
+      // 为独立分包注入init module
+      if (independent && typeof independent === 'string') {
+        const independentLoader = normalize.lib('independent-loader.js')
+        const independentInitRequest = `!!${independentLoader}!${independent}`
+        this._module.addDependency(new CommonJsVariableDependency(independentInitRequest))
+        // 避免该模块被concatenate导致注入的independent init没有最先执行
+        this._module.buildInfo.moduleConcatenationBailout = 'independent init'
       }
+
       // 注入构造函数
       let ctor = 'App'
       if (ctorType === 'page') {
-        // swan也默认使用Page构造器
-        if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
+        if (mpx.forceUsePageCtor || mode === 'ali') {
           ctor = 'Page'
         } else {
           ctor = 'Component'
@@ -259,6 +301,7 @@ module.exports = function (content) {
       output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()
       }))}\n`
+      output += `global.currentResourceType = ${JSON.stringify(ctorType)}\n`
 
       // template
       output += '/* template */\n'
@@ -266,6 +309,10 @@ module.exports = function (content) {
 
       if (template) {
         const extraOptions = {
+          ...template.src ? {
+            ...queryObj,
+            resourcePath
+          } : null,
           hasScoped,
           hasComment,
           isNative,
@@ -286,52 +333,50 @@ module.exports = function (content) {
         parts.styles.forEach((style, i) => {
           const scoped = style.scoped || autoScope
           const extraOptions = {
+            // style src会被特殊处理为全局复用样式，不添加resourcePath，添加isStatic及issuerFile
+            ...style.src ? {
+              ...queryObj,
+              isStatic: true,
+              issuerResource: addQuery(this.resource, { type: 'styles' }, true)
+            } : null,
             moduleId,
             scoped
           }
           // require style
-          if (style.src) {
-            // style src会被特殊处理为全局复用样式，不添加resourcePath，添加isStatic及issuerResource
-            extraOptions.isStatic = true
-            extraOptions.issuerFile = mpx.getExtractedFile(this.resource)
-          }
           output += getRequire('styles', style, extraOptions, i) + '\n'
         })
-      } else if (ctorType === 'app' && mode === 'ali') {
-        output += getRequire('styles', {}) + '\n'
+      }
+
+      if (parts.styles.filter(style => !style.src).length === 0 && ctorType === 'app' && mode === 'ali') {
+        output += getRequire('styles', {}, {}, parts.styles.length) + '\n'
       }
 
       // json
       output += '/* json */\n'
       // 给予json默认值, 确保生成json request以自动补全json
       const json = parts.json || {}
-      output += getRequire('json', json, json.src && { resourcePath }) + '\n'
+      output += getRequire('json', json, json.src && {
+        ...queryObj,
+        resourcePath
+      }) + '\n'
 
       // script
       output += '/* script */\n'
       let scriptSrcMode = srcMode
-      const script = parts.script
+      // 给予script默认值, 确保生成js request以自动补全js
+      const script = parts.script || {}
       if (script) {
         scriptSrcMode = script.mode || scriptSrcMode
         if (scriptSrcMode) output += `global.currentSrcMode = ${JSON.stringify(scriptSrcMode)}\n`
-        const extraOptions = {}
-        if (script.src) extraOptions.resourcePath = resourcePath
-        output += getRequire('script', script, extraOptions) + '\n'
-      } else {
-        switch (ctorType) {
-          case 'app':
-            output += 'import {createApp} from "@mpxjs/core"\n' +
-              'createApp({})\n'
-            break
-          case 'page':
-            output += 'import {createPage} from "@mpxjs/core"\n' +
-              'createPage({})\n'
-            break
-          case 'component':
-            output += 'import {createComponent} from "@mpxjs/core"\n' +
-              'createComponent({})\n'
+        // 传递ctorType以补全js内容
+        const extraOptions = {
+          ...script.src ? {
+            ...queryObj,
+            resourcePath
+          } : null,
+          ctorType
         }
-        output += '\n'
+        output += getRequire('script', script, extraOptions) + '\n'
       }
       callback(null, output)
     }

package/lib/native-loader.js

@@ -3,10 +3,11 @@ const JSON5 = require('json5')
 const parseRequest = require('./utils/parse-request')
 const config = require('./config')
 const createHelpers = require('./helpers')
-const mpxJSON = require('./utils/mpx-json')
+const getJSONContent = require('./utils/get-json-content')
 const async = require('async')
-const matchCondition = require('./utils/match-condition')
+const { matchCondition } = require('./utils/match-condition')
 const fixUsingComponent = require('./utils/fix-using-component')
+const { JSON_JS_EXT } = require('./utils/const')
 
 module.exports = function (content) {
   this.cacheable()
@@ -23,7 +24,6 @@ module.exports = function (content) {
   const moduleId = 'm' + mpx.pathHash(filePath)
   const { resourcePath, queryObj } = parseRequest(this.resource)
   const mode = mpx.mode
-  const defs = mpx.defs
   const globalSrcMode = mpx.srcMode
   const localSrcMode = queryObj.mode
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
@@ -33,12 +33,10 @@ module.exports = function (content) {
   const resourceName = path.join(parsed.dir, parsed.name)
   const isApp = !(pagesMap[resourcePath] || componentsMap[resourcePath])
   const srcMode = localSrcMode || globalSrcMode
-  const fs = this._compiler.inputFileSystem
   const typeExtMap = config[srcMode].typeExtMap
   const typeResourceMap = {}
   const autoScope = matchCondition(resourcePath, mpx.autoScopeRules)
 
-  const EXT_MPX_JSON = '.json.js'
   const CSS_LANG_EXT_MAP = {
     less: '.less',
     stylus: '.styl',
@@ -46,40 +44,18 @@ module.exports = function (content) {
     scss: '.scss'
   }
 
-  let useMPXJSON = false
+  let useJSONJS = false
   let cssLang = ''
   const hasScoped = (queryObj.scoped || autoScope) && mode === 'ali'
   const hasComment = false
   const isNative = true
 
-  const tryEvalMPXJSON = (callback) => {
-    const { rawResourcePath } = parseRequest(typeResourceMap['json'])
-    const _src = rawResourcePath
-    this.addDependency(_src)
-    fs.readFile(_src, (err, raw) => {
-      if (err) {
-        callback(err)
-      } else {
-        try {
-          const source = raw.toString('utf-8')
-          const text = mpxJSON.compileMPXJSONText({ source, defs, filePath: _src })
-          callback(null, text)
-        } catch (e) {
-          callback(e)
-        }
-      }
-    })
-  }
-
   const checkFileExists = (extName, callback) => {
-    this.resolve(parsed.dir, resourceName + extName, (err, result) => {
-      err = null
-      callback(err, result)
-    })
+    this.resolve(parsed.dir, resourceName + extName, callback)
   }
 
   function checkCSSLangFiles (callback) {
-    const langs = mpx.nativeOptions.cssLangs || ['less', 'stylus', 'scss', 'sass']
+    const langs = mpx.nativeConfig.cssLangs || ['less', 'stylus', 'scss', 'sass']
     const results = []
     async.eachOf(langs, function (lang, i, callback) {
       if (!CSS_LANG_EXT_MAP[lang]) {
@@ -89,7 +65,7 @@ module.exports = function (content) {
         if (!err && result) {
           results[i] = result
         }
-        callback(err)
+        callback()
       })
     }, function (err) {
       for (let i = 0; i < langs.length; i++) {
@@ -103,14 +79,13 @@ module.exports = function (content) {
     })
   }
 
-  function checkMPXJSONFile (callback) {
-    // checkFileExists(EXT_MPX_JSON, (err, result) => {
-    checkFileExists(EXT_MPX_JSON, (err, result) => {
+  function checkJSONJSFile (callback) {
+    checkFileExists(JSON_JS_EXT, (err, result) => {
       if (!err && result) {
         typeResourceMap.json = result
-        useMPXJSON = true
+        useJSONJS = true
       }
-      callback(err)
+      callback()
     })
   }
 
@@ -119,55 +94,42 @@ module.exports = function (content) {
     (callback) => {
       async.parallel([
         checkCSSLangFiles,
-        checkMPXJSONFile
+        checkJSONJSFile
       ], (err) => {
         callback(err)
       })
     },
     (callback) => {
       async.forEachOf(typeExtMap, (ext, key, callback) => {
-        // 检测到mpxJson或cssLang时跳过对应类型文件检测
-        if ((key === 'json' && useMPXJSON) || (key === 'styles' && cssLang)) {
+        // 检测到jsonjs或cssLang时跳过对应类型文件检测
+        if (typeResourceMap[key]) {
           return callback()
         }
         checkFileExists(ext, (err, result) => {
           if (!err && result) {
             typeResourceMap[key] = result
           }
-          callback(err)
+          callback()
         })
       }, callback)
     },
     (callback) => {
-      // 对原生写法增强json写法，可以用js来写json，尝试找.json.js文件，找不到用回json的内容
-      if (useMPXJSON) {
-        tryEvalMPXJSON(callback)
-      } else {
-        if (typeResourceMap['json']) {
-          // eslint-disable-next-line handle-callback-err
-          const { rawResourcePath } = parseRequest(typeResourceMap['json'])
-          fs.readFile(rawResourcePath, (err, raw) => {
-            if (err) {
-              callback(err)
-            } else {
-              callback(null, raw.toString('utf-8'))
-            }
-          })
-        } else {
-          callback(null, '{}')
-        }
-      }
+      getJSONContent({
+        src: typeResourceMap.json,
+        useJSONJS
+      }, this, callback)
     }, (content, callback) => {
-      let usingComponents = [].concat(Object.keys(mpx.usingComponents))
+      let json
       try {
-        let ret = JSON5.parse(content)
-        if (ret.usingComponents) {
-          fixUsingComponent(ret.usingComponents, mode)
-          usingComponents = usingComponents.concat(Object.keys(ret.usingComponents))
-        }
+        json = JSON5.parse(content)
       } catch (e) {
+        return callback(e)
+      }
+      let usingComponents = Object.keys(mpx.usingComponents)
+      if (json.usingComponents) {
+        fixUsingComponent(json.usingComponents, mode)
+        usingComponents = usingComponents.concat(Object.keys(json.usingComponents))
       }
-
       const {
         getRequire
       } = createHelpers(loaderContext)
@@ -175,11 +137,10 @@ module.exports = function (content) {
       const getRequireByType = (type) => {
         const src = typeResourceMap[type]
         const part = { src }
-        const extraOptions = Object.assign({}, queryObj, {
+        const extraOptions = {
+          ...queryObj,
           resourcePath
-        })
-
-        if (type !== 'script') this.addDependency(src)
+        }
 
         switch (type) {
           case 'template':
@@ -199,6 +160,9 @@ module.exports = function (content) {
               scoped: hasScoped
             })
             break
+          case 'json':
+            if (useJSONJS) part.useJSONJS = true
+            break
         }
         return getRequire(type, part, extraOptions)
       }
@@ -211,7 +175,9 @@ module.exports = function (content) {
 
       // 注入构造函数
       let ctor = 'App'
+      let ctorType = 'app'
       if (pagesMap[resourcePath]) {
+        ctorType = 'page'
         if (mpx.forceUsePageCtor || mode === 'ali' || mode === 'swan') {
           ctor = 'Page'
         } else {
@@ -219,11 +185,13 @@ module.exports = function (content) {
         }
       } else if (componentsMap[resourcePath]) {
         ctor = 'Component'
+        ctorType = 'component'
       }
       output += `global.currentCtor = ${ctor}\n`
       output += `global.currentCtorType = ${JSON.stringify(ctor.replace(/^./, (match) => {
         return match.toLowerCase()
       }))}\n`
+      output += `global.currentResourceType = ${JSON.stringify(ctorType)}\n`
 
       if (srcMode) {
         output += `global.currentSrcMode = ${JSON.stringify(srcMode)}\n`

package/lib/parser.js

@@ -6,7 +6,7 @@ const SourceMapGenerator = require('source-map').SourceMapGenerator
 const splitRE = /\r?\n/g
 const emptyRE = /^(?:\/\/)?\s*$/
 
-module.exports = (content, { filePath, needMap, mode, defs, env }) => {
+module.exports = (content, { filePath, needMap, mode, env }) => {
   // 缓存需要mode隔离，不同mode经过区块条件编译parseComponent得到的内容并不一致
   const cacheKey = hash(filePath + content + mode + env)
 
@@ -14,7 +14,6 @@ module.exports = (content, { filePath, needMap, mode, defs, env }) => {
   if (output) return JSON.parse(output)
   output = compiler.parseComponent(content, {
     mode,
-    defs,
     filePath,
     pad: 'line',
     env

package/lib/partial-compile/index.js

@@ -0,0 +1,35 @@
+const { matchCondition } = require('../utils/match-condition')
+const { parseQuery } = require('loader-utils')
+
+class MpxPartialCompilePlugin {
+  constructor (condition) {
+    this.condition = condition
+  }
+
+  isResolvingPage (obj) {
+    // valid query should start with '?'
+    const query = obj.query || '?'
+    return parseQuery(query).isPage
+  }
+
+  apply (compiler) {
+    compiler.resolverFactory.hooks.resolver.intercept({
+      factory: (type, hook) => {
+        hook.tap('MpxPartialCompilePlugin', (resolver) => {
+          resolver.hooks.result.tapAsync({
+            name: 'MpxPartialCompilePlugin',
+            stage: -100
+          }, (obj, resolverContext, callback) => {
+            if (this.isResolvingPage(obj) && !matchCondition(obj.path, this.condition)) {
+              obj.path = false
+            }
+            callback(null, obj)
+          })
+        })
+        return hook
+      }
+    })
+  }
+}
+
+module.exports = MpxPartialCompilePlugin