@mpxjs/webpack-plugin 2.6.110 → 2.6.114-alpha.0

package/lib/config.js

@@ -356,6 +356,20 @@ module.exports = {
       templatePrefix: 'module.exports = \n'
     }
   },
+  tenon: {
+    directive: {
+      if: 'v-if',
+      elseif: 'v-else-if',
+      else: 'v-else'
+    },
+    wxs: {
+      tag: 'wxs',
+      module: 'module',
+      src: 'src',
+      ext: '.wxs',
+      templatePrefix: 'module.exports = \n'
+    }
+  },
   qa: {
     typeExtMap: {
       json: '.json',

package/lib/dependency/AddEntryDependency.js

@@ -0,0 +1,24 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+
+class AddEntryDependency extends NullDependency {
+  constructor ({ context, dep, name }) {
+    super()
+    this.__addEntryParams = [ context, dep, name ]
+  }
+
+  get type () {
+    return 'mpx add entry'
+  }
+
+  // updateHash (hash) {
+  //   super.updateHash(hash)
+  //   hash.update(this.childCompileEntryModule.identifier())
+  // }
+}
+
+AddEntryDependency.Template = class AddEntryDependencyTemplate {
+  apply () {
+  }
+}
+
+module.exports = AddEntryDependency

package/lib/dependency/ResolveDependency.js

@@ -42,6 +42,10 @@ ResolveDependency.Template = class ResolveDependencyTemplate {
     if (!resolved) {
       dep.compilation.errors.push(new Error(`Path ${dep.resource} is not a page/component/static resource, which is resolved from ${dep.issuerResource}!`))
     }
+    // for tenon
+    if (dep.compilation.__mpx__.mode === 'tenon') {
+      return `getRelativePath(currentURL, ${JSON.stringify(resolved)}) + '.js'`
+    }
     return JSON.stringify(dep.publicPath + resolved)
   }
 }

package/lib/index.js

@@ -7,6 +7,7 @@ const ResolveDependency = require('./dependency/ResolveDependency')
 const InjectDependency = require('./dependency/InjectDependency')
 const ReplaceDependency = require('./dependency/ReplaceDependency')
 const ChildCompileDependency = require('./dependency/ChildCompileDependency')
+const AddEntryDependency = require('./dependency/AddEntryDependency')
 const NullFactory = require('webpack/lib/NullFactory')
 const normalize = require('./utils/normalize')
 const toPosix = require('./utils/to-posix')
@@ -228,7 +229,7 @@ class MpxWebpackPlugin {
     let splitChunksPlugin
     let splitChunksOptions
 
-    if (this.options.mode !== 'web') {
+    if (this.options.mode !== 'web' && this.options.mode !== 'tenon') {
       compiler.options.optimization.runtimeChunk = {
         name: (entrypoint) => {
           for (let packageName in mpx.independentSubpackagesMap) {
@@ -296,6 +297,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(ChildCompileDependency, new NullFactory())
       compilation.dependencyTemplates.set(ChildCompileDependency, new ChildCompileDependency.Template())
 
+      compilation.dependencyFactories.set(AddEntryDependency, new NullFactory())
+      compilation.dependencyTemplates.set(AddEntryDependency, new AddEntryDependency.Template())
+
       compilation.dependencyFactories.set(RemovedModuleDependency, normalModuleFactory)
       compilation.dependencyTemplates.set(RemovedModuleDependency, new RemovedModuleDependency.Template())
 
@@ -590,6 +594,23 @@ class MpxWebpackPlugin {
       const rawProcessModuleDependencies = compilation.processModuleDependencies
       compilation.processModuleDependencies = (module, callback) => {
         let proxyedCallback = callback
+        if (module.__has_tenon_entry) {
+          let tasks = []
+          module.dependencies.forEach(dep => {
+            if (dep instanceof AddEntryDependency) {
+              tasks.push(new Promise(resolve => {
+                compilation.addEntry(...dep.__addEntryParams, (err) => {
+                  resolve(err)
+                })
+              }))
+            }
+          })
+          proxyedCallback = (error) => {
+            Promise.all(tasks).then(errs => {
+              callback(errs.filter(e => !!e)[0] || error)
+            })
+          }
+        }
         if (module.rawRequest === mpx.appScriptRawRequest) {
           // 避免模块request重名，只对第一次匹配到的模块进行代理
           mpx.appScriptRawRequest = ''
@@ -816,6 +837,27 @@ class MpxWebpackPlugin {
           }
         })
 
+        // processing for tenon-store
+        if (mpx.mode === 'tenon') {
+          let TENON_STORE_ID = 0
+          parser.hooks.call.for('imported var').tap('MpxWebpackPlugin', (expr) => {
+            if (['createStore', 'createStoreWithThis'].includes(expr.callee.name)) {
+              const current = parser.state.current
+              const storeOptions = expr.arguments.length && expr.arguments[0]
+              if (storeOptions) {
+                current.addDependency(new InjectDependency({
+                  content: 'Object.assign(',
+                  index: storeOptions.range[0]
+                }))
+                current.addDependency(new InjectDependency({
+                  content: `, { __store_id: ${TENON_STORE_ID++} })`,
+                  index: storeOptions.range[1]
+                }))
+              }
+            }
+          })
+        }
+
         if (mpx.srcMode !== mpx.mode) {
           // 全量替换未声明的wx identifier
           parser.hooks.expression.for('wx').tap('MpxWebpackPlugin', transHandler)
@@ -864,7 +906,6 @@ class MpxWebpackPlugin {
           'set',
           'remove',
           'delete: del',
-          'setConvertRule',
           'getMixin',
           'getComputed',
           'implement'
@@ -905,7 +946,7 @@ class MpxWebpackPlugin {
 
       // 为了正确生成sourceMap，将该步骤由原来的compile.hooks.emit迁移到compilation.hooks.optimizeChunkAssets中来
       compilation.hooks.optimizeChunkAssets.tapAsync('MpxWebpackPlugin', (chunks, callback) => {
-        if (mpx.mode === 'web') return callback()
+        if (mpx.mode === 'web' || mpx.mode === 'tenon') return callback()
         const jsonpFunction = compilation.outputOptions.jsonpFunction
 
         function getTargetFile (file) {

package/lib/json-compiler/index.js

@@ -176,6 +176,9 @@ module.exports = function (raw = '{}') {
       if (!json.usingComponents) {
         json.usingComponents = {}
       }
+      if (!json.component && mode === 'swan') {
+        json.component = true
+      }
     }
   } else if (componentsMap[resourcePath]) {
     // component

package/lib/loader.js

@@ -12,6 +12,7 @@ const processJSON = require('./web/processJSON')
 const processScript = require('./web/processScript')
 const processStyles = require('./web/processStyles')
 const processTemplate = require('./web/processTemplate')
+const processForTenon = require('./tenon/index')
 const readJsonForSrc = require('./utils/read-json-for-src')
 const normalize = require('./utils/normalize')
 const getMainCompilation = require('./utils/get-main-compilation')
@@ -163,6 +164,47 @@ module.exports = function (content) {
         projectRoot
       })
 
+      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,
+          projectRoot,
+          getRequireForSrc,
+          vueContentCache,
+          moduleId,
+          callback
+        })
+      }
+
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
         if (ctorType === 'app' && !queryObj.app) {
@@ -300,8 +342,7 @@ module.exports = function (content) {
       // 注入构造函数
       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'

package/lib/path-loader.js

@@ -1,3 +1,6 @@
 module.exports = function () {
-  return `module.exports = __mpx_resolve_path__(${JSON.stringify(this.resource)})`
+  return `
+  var currentURL = global.currentPagePath
+  var getRelativePath = require('@mpxjs/webpack-plugin/lib/utils/get-relative-path').getRelativePath
+  module.exports = __mpx_resolve_path__(${JSON.stringify(this.resource)})`
 }

package/lib/platform/template/wx/component-config/button.js

@@ -28,6 +28,8 @@ module.exports = function ({ print }) {
   const ttEventLog = print({ platform: 'bytedance', tag: TAG_NAME, isError: false, type: 'event' })
   const webPropLog = print({ platform: 'web', tag: TAG_NAME, isError: false })
   const webEventLog = print({ platform: 'web', tag: TAG_NAME, isError: false, type: 'event' })
+  const tenonPropLog = print({ platform: 'tenon', tag: TAG_NAME, isError: false })
+  const tenonEventLog = print({ platform: 'tenon', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const wxPropValueLog = print({ platform: 'wx', tag: TAG_NAME, isError: false, type: 'value' })
 
@@ -37,6 +39,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-button'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-button'
+    },
     props: [
       {
         test: 'open-type',
@@ -131,13 +137,18 @@ module.exports = function ({ print }) {
       },
       {
         test: /^(open-type|lang|session-from|send-message-title|send-message-path|send-message-img|show-message-card|app-parameter)$/,
-        web: webPropLog
+        web: webPropLog,
+        tenon: tenonPropLog
       },
       {
         test: /^(size|type|plain|loading|form-type|hover-class|hover-stop-propagation|hover-start-time|hover-stay-time|use-built-in)$/,
         web (prop, { el }) {
           // todo 这部分能力基于内部封装实现
           el.isBuiltIn = true
+        },
+        tenon (prop, { el }) {
+          // todo 这部分能力基于内部封装实现
+          el.isBuiltIn = true
         }
       },
       {
@@ -174,7 +185,8 @@ module.exports = function ({ print }) {
       },
       {
         test: /^(getuserinfo|contact|error|launchapp|opensetting|getphonenumber)$/,
-        web: webEventLog
+        web: webEventLog,
+        tenon: tenonEventLog
       }
     ]
   }

package/lib/platform/template/wx/component-config/image.js

@@ -13,6 +13,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-image'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-image'
+    },
     props: [
       {
         test: /^show-menu-by-longpress$/,

package/lib/platform/template/wx/component-config/input.js

@@ -20,6 +20,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-input'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-input'
+    },
     props: [
       {
         test: /^(cursor-spacing|auto-focus|adjust-position|hold-keyboard)$/,

package/lib/platform/template/wx/component-config/rich-text.js

@@ -12,6 +12,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-rich-text'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-rich-text'
+    },
     props: [
       {
         test: /^(space)$/,

package/lib/platform/template/wx/component-config/scroll-view.js

@@ -19,6 +19,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-scroll-view'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-scroll-view'
+    },
     props: [
       {
         test: /^(enable-flex|scroll-anchorin|refresher-enabled|refresher-threshold|refresher-default-style|refresher-background|refresher-triggered|enhanced|bounces|show-scrollbar|paging-enabled|fast-deceleratio)$/,

package/lib/platform/template/wx/component-config/switch.js

@@ -10,6 +10,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-switch'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-switch'
+    },
     props: [
       {
         test: /^type$/,

package/lib/platform/template/wx/component-config/text.js

@@ -19,6 +19,10 @@ module.exports = function ({ print }) {
         return 'span'
       }
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-text'
+    },
     props: [
       {
         test: /^(decode|user-select)$/,

package/lib/platform/template/wx/component-config/textarea.js

@@ -22,6 +22,11 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-textarea'
     },
+    tenon (tag, { el }) {
+      // form全量使用内建组件
+      el.isBuiltIn = true
+      return 'tenon-textarea'
+    },
     props: [
       {
         test: /^(auto-focus|fixed|cursor-spacing|cursor|show-confirm-bar|selection-start|selection-end|adjust-position|hold-keyboard|disable-default-padding|confirm-type)$/,

package/lib/platform/template/wx/component-config/view.js

@@ -21,6 +21,10 @@ module.exports = function ({ print }) {
         return 'div'
       }
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-view'
+    },
     qa (tag) {
       return 'div'
     },

package/lib/platform/template/wx/index.js

@@ -10,7 +10,7 @@ const normalize = require('../../../utils/normalize')
 
 module.exports = function getSpec ({ warn, error }) {
   const spec = {
-    supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd'],
+    supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'tenon'],
     // props预处理
     preProps: [],
     // props后处理
@@ -24,6 +24,15 @@ module.exports = function getSpec ({ warn, error }) {
               value: parsed.result
             }
           }
+        },
+        tenon ({ name, value }) {
+          const parsed = parseMustache(value)
+          if (parsed.hasBinding) {
+            return {
+              name: name === 'animation' ? 'v-' + name : ':' + name,
+              value: parsed.result
+            }
+          }
         }
       }
     ],
@@ -86,6 +95,16 @@ module.exports = function getSpec ({ warn, error }) {
             name: 'v-for',
             value: `(${itemName}, ${indexName}) in ${parsed.result}`
           }
+        },
+        tenon ({ value }, { el }) {
+          const parsed = parseMustache(value)
+          const attrsMap = el.attrsMap
+          const itemName = attrsMap['wx:for-item'] || 'item'
+          const indexName = attrsMap['wx:for-index'] || 'index'
+          return {
+            name: 'v-for',
+            value: `(${itemName}, ${indexName}) in ${parsed.result}`
+          }
         }
       },
       {
@@ -111,6 +130,25 @@ module.exports = function getSpec ({ warn, error }) {
             name: ':key',
             value
           }
+        },
+        tenon ({ value }, { el }) {
+          // vue的template中不能包含key，对应于小程序中的block
+          if (el.tag === 'block') return false
+          const itemName = el.attrsMap['wx:for-item'] || 'item'
+          const keyName = value
+          if (value === '*this') {
+            value = itemName
+          } else {
+            if (isValidIdentifierStr(keyName)) {
+              value = `${itemName}.${keyName}`
+            } else {
+              value = `${itemName}['${keyName}']`
+            }
+          }
+          return {
+            name: ':key',
+            value
+          }
         }
       },
       {
@@ -163,6 +201,45 @@ module.exports = function getSpec ({ warn, error }) {
               }
             ]
           }
+        },
+        tenon ({ value }, { el }) {
+          el.hasEvent = true
+          const attrsMap = el.attrsMap
+          const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
+          const stringify = JSON.stringify
+          const match = tagRE.exec(value)
+          if (match) {
+            const modelProp = attrsMap['wx:model-prop'] || 'value'
+            const modelEvent = attrsMap['wx:model-event'] || 'input'
+            const modelValuePathRaw = attrsMap['wx:model-value-path']
+            const modelValuePath = modelValuePathRaw === undefined ? 'value' : modelValuePathRaw
+            const modelFilter = attrsMap['wx:model-filter']
+            let modelValuePathArr
+            try {
+              modelValuePathArr = JSON5.parse(modelValuePath)
+            } catch (e) {
+              if (modelValuePath === '') {
+                modelValuePathArr = []
+              } else {
+                modelValuePathArr = modelValuePath.split('.')
+              }
+            }
+            let modelValue = match[1].trim()
+            return [
+              {
+                name: ':' + modelProp,
+                value: modelValue
+              },
+              {
+                name: 'mpxModelEvent',
+                value: modelEvent
+              },
+              {
+                name: '@mpxModel',
+                value: `__model(${stringifyWithResolveComputed(modelValue)}, $event, ${stringify(modelValuePathArr)}, ${stringify(modelFilter)})`
+              }
+            ]
+          }
         }
       },
       {
@@ -191,6 +268,14 @@ module.exports = function getSpec ({ warn, error }) {
             name: ':' + dir,
             value: parsed.result
           }
+        },
+        tenon ({ name, value }) {
+          const dir = this.test.exec(name)[1]
+          const parsed = parseMustache(value)
+          return {
+            name: ':' + dir,
+            value: parsed.result
+          }
         }
       },
       // 通用指令
@@ -248,6 +333,17 @@ module.exports = function getSpec ({ warn, error }) {
             name: 'v-' + dir,
             value: parsed.result
           }
+        },
+        tenon ({ name, value }) {
+          let dir = this.test.exec(name)[1]
+          const parsed = parseMustache(value)
+          if (dir === 'elif') {
+            dir = 'else-if'
+          }
+          return {
+            name: 'v-' + dir,
+            value: parsed.result
+          }
         }
       },
       // 事件
@@ -288,6 +384,23 @@ module.exports = function getSpec ({ warn, error }) {
             name: rPrefix + rEventName + meta.modifierStr,
             value
           }
+        },
+        tenon ({ name, value }, { eventRules, el }) {
+          const match = this.test.exec(name)
+          const prefix = match[1]
+          const eventName = match[2]
+          const modifierStr = match[3] || ''
+          const meta = {
+            modifierStr
+          }
+          // 记录event监听信息用于后续判断是否需要使用内置基础组件
+          el.hasEvent = true
+          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'web', meta })
+          const rEventName = runRules(eventRules, eventName, { mode: 'web' })
+          return {
+            name: rPrefix + rEventName + meta.modifierStr,
+            value
+          }
         }
       },
       // 无障碍