@mpxjs/webpack-plugin 2.8.22 → 2.8.23-alpha

package/README.md

@@ -13,6 +13,6 @@ module.exports = {
     new mpxWebpackPlugin({
       mode: 'wx'
     })
-  ],
+  ]
 }
 ```

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/dependencies/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/dependencies/ResolveDependency.js

@@ -75,6 +75,10 @@ ResolveDependency.Template = class ResolveDependencyTemplate {
   getContent (dep) {
     const { resolved = '', compilation } = dep
     const publicPath = compilation.outputOptions.publicPath || ''
+    // for tenon
+    if (dep.compilation.__mpx__.mode === 'tenon') {
+      return `getRelativePath(currentURL, ${JSON.stringify(resolved)}) + '.js'`
+    }
     return JSON.stringify(publicPath + resolved)
   }
 }

package/lib/index.js

@@ -317,7 +317,7 @@ class MpxWebpackPlugin {
     let splitChunksPlugin
     let splitChunksOptions
 
-    if (this.options.mode !== 'web') {
+    if (this.options.mode !== 'web' && this.options.mode !== 'tenon') {
       const optimization = compiler.options.optimization
       optimization.runtimeChunk = {
         name: (entrypoint) => {
@@ -1073,7 +1073,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) {
           // 处理跨平台全局对象转换
           const transGlobalObject = (expr) => {
@@ -1197,7 +1217,7 @@ class MpxWebpackPlugin {
         name: 'MpxWebpackPlugin',
         stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS
       }, () => {
-        if (mpx.mode === 'web') return
+        if (mpx.mode === 'web' || mpx.mode === 'tenon') return
 
         if (this.options.generateBuildMap) {
           const pagesMap = compilation.__mpx__.pagesMap
@@ -1435,21 +1455,31 @@ try {
         if (mpx.mode === 'web') {
           const mpxStyleOptions = queryObj.mpxStyleOptions
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
-          const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher')
+          const isPitcherRequest = firstLoader.includes('vue-loader/lib/loaders/pitcher') || firstLoader.includes('@hummer/tenon-loader/dist/pitcher.js')
           let cssLoaderIndex = -1
           let vueStyleLoaderIndex = -1
           let mpxStyleLoaderIndex = -1
+          let tenonStyleLoaderIndex = -1
           loaders.forEach((loader, index) => {
             const currentLoader = toPosix(loader.loader)
             if (currentLoader.includes('css-loader') && cssLoaderIndex === -1) {
               cssLoaderIndex = index
             } else if (currentLoader.includes('vue-loader/lib/loaders/stylePostLoader') && vueStyleLoaderIndex === -1) {
               vueStyleLoaderIndex = index
+            } else if (currentLoader.includes('@hummer/tenon-style-loader/dist/index.js') && tenonStyleLoaderIndex === -1) {
+              tenonStyleLoaderIndex = index
             } else if (currentLoader.includes(styleCompilerPath) && mpxStyleLoaderIndex === -1) {
               mpxStyleLoaderIndex = index
             }
           })
-          if (mpxStyleLoaderIndex === -1) {
+          if (mpx.mode === 'tenon' && mpxStyleLoaderIndex === -1) {
+            if (tenonStyleLoaderIndex > -1 && !isPitcherRequest) {
+              loaders.splice(tenonStyleLoaderIndex + 1, 0, {
+                loader: normalize.lib('style-compiler/index.js'),
+                options: (mpxStyleOptions && JSON.parse(mpxStyleOptions)) || {}
+              })
+            }
+          } else if (mpxStyleLoaderIndex === -1) {
             let loaderIndex = -1
             if (cssLoaderIndex > -1 && vueStyleLoaderIndex === -1) {
               loaderIndex = cssLoaderIndex

package/lib/loader.js

@@ -11,6 +11,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 getJSONContent = require('./utils/get-json-content')
 const normalize = require('./utils/normalize')
 const getEntryName = require('./utils/get-entry-name')
@@ -127,6 +128,45 @@ module.exports = function (content) {
           return callback(e)
         }
       }
+
+      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,
+          moduleId,
+          callback
+        })
+      }
+
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
         if (ctorType === 'app' && !queryObj.isApp) {

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
+          }
         }
       },
       {
@@ -121,6 +159,9 @@ module.exports = function getSpec ({ warn, error }) {
         },
         web () {
           return false
+        },
+        tenon () {
+          return false
         }
       },
       {
@@ -163,6 +204,49 @@ 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('.')
+              }
+            }
+            const modelValue = match[1].trim()
+            return [
+              {
+                name: ':' + modelProp,
+                value: modelValue
+              },
+              {
+                name: 'mpxModelEvent',
+                value: modelEvent
+              },
+              {
+                name: 'mpxModelEventId',
+                value: Math.random().toString(36).slice(3, 11)
+              },
+              {
+                name: '@mpxModel',
+                value: `__model(${stringifyWithResolveComputed(modelValue)}, $event, ${stringify(modelValuePathArr)}, ${stringify(modelFilter)})`
+              }
+            ]
+          }
         }
       },
       {
@@ -217,6 +301,14 @@ module.exports = function getSpec ({ warn, error }) {
             name: ':class',
             value: parsed.result
           }
+        },
+        tenon ({ name, value }) {
+          const dir = this.test.exec(name)[1]
+          const parsed = parseMustache(value)
+          return {
+            name: ':' + dir,
+            value: parsed.result
+          }
         }
       },
       // 通用指令
@@ -274,6 +366,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
+          }
         }
       },
       // 事件
@@ -346,6 +449,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
+          }
         }
       },
       // 无障碍

package/lib/resolve-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)})`
 }