@mpxjs/webpack-plugin 2.9.67 → 2.9.70-alpha.0

package/README.md

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

package/lib/config.js

@@ -368,6 +368,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

@@ -76,6 +76,11 @@ ResolveDependency.Template = class ResolveDependencyTemplate {
 
   getContent (dep) {
     const { resolved = '' } = dep
+    // for tenon
+    if (dep.compilation.__mpx__.mode === 'tenon') {
+      // 只支持所有产物在一个目录下的场景 进行相对路径跳转
+      return `'./${resolved}.js'`
+    }
     // ?resolve 必定返回绝对路径
     return JSON.stringify('/' + resolved)
   }

package/lib/index.js

@@ -66,7 +66,7 @@ const emitFile = require('./utils/emit-file')
 const { MPX_PROCESSED_FLAG, MPX_DISABLE_EXTRACTOR_CACHE, MPX_APP_MODULE_ID } = require('./utils/const')
 const isEmptyObject = require('./utils/is-empty-object')
 const DynamicPlugin = require('./resolver/DynamicPlugin')
-const { isReact, isWeb } = require('./utils/env')
+const { isReact, isWeb, isTenon } = require('./utils/env')
 const VirtualModulesPlugin = require('webpack-virtual-modules')
 require('./utils/check-core-version-match')
 
@@ -323,7 +323,7 @@ class MpxWebpackPlugin {
       }
     }
 
-    if (!isWeb(this.options.mode) && !isReact(this.options.mode)) {
+    if (!isWeb(this.options.mode) && !isReact(this.options.mode) && !isTenon(this.options.mode)) {
       // 强制设置publicPath为'/'
       if (compiler.options.output.publicPath && compiler.options.output.publicPath !== publicPath) {
         warnings.push(`webpack options: MpxWebpackPlugin accept options.output.publicPath to be ${publicPath} only, custom options.output.publicPath will be ignored!`)
@@ -348,14 +348,19 @@ class MpxWebpackPlugin {
       compiler.options.node.global = true
     }
 
-    let addModePlugin
-    if (['android', 'harmony'].includes(this.options.mode)) {
-      // 'android' | 'harmony' 下 使用mode = 'ios' 进行兼容兜底
-      addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file', 'ios')
-    } else {
-      addModePlugin = new AddModePlugin('before-file', this.options.mode, this.options.fileConditionRules, 'file')
+    const addModeOptions = {
+      fileConditionRules: this.options.fileConditionRules
     }
-
+    const mode = this.options.mode
+    if (mode === 'web' || mode === 'ios' || mode === 'android' || mode === 'harmony') {
+      // 'web' | 'ios' | 'android' | 'harmony' 下，使用implicitMode强制进行平台转换
+      addModeOptions.implicitMode = true
+    }
+    if (mode === 'android' || mode === 'harmony') {
+      // 'android' | 'harmony' 下，使用 mode = 'ios' 进行兼容兜底
+      addModeOptions.defaultMode = 'ios'
+    }
+    const addModePlugin = new AddModePlugin('before-file', this.options.mode, addModeOptions, 'file')
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
     const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, 'file')
     const dynamicPlugin = new DynamicPlugin('result', this.options.dynamicComponentRules)
@@ -376,7 +381,7 @@ class MpxWebpackPlugin {
     compiler.options.resolve.plugins.push(dynamicPlugin)
 
     const optimization = compiler.options.optimization
-    if (!isWeb(this.options.mode) && !isReact(this.options.mode)) {
+    if (!isWeb(this.options.mode) && !isReact(this.options.mode) && !isTenon(this.options.mode)) {
       optimization.runtimeChunk = {
         name: (entrypoint) => {
           for (const packageName in mpx.independentSubpackagesMap) {
@@ -392,7 +397,7 @@ class MpxWebpackPlugin {
     let splitChunksOptions = null
     let splitChunksPlugin = null
     // 输出web ssr需要将optimization.splitChunks设置为false以关闭splitChunks
-    if (optimization.splitChunks !== false && !isReact(this.options.mode)) {
+    if (optimization.splitChunks !== false && !isReact(this.options.mode) && !isTenon(this.options.mode)) {
       splitChunksOptions = Object.assign({
         chunks: 'all',
         usedExports: optimization.usedExports === true,
@@ -775,7 +780,7 @@ class MpxWebpackPlugin {
             const hash = mpx.pathHash(resourcePath)
             const customOutputPath = this.options.customOutputPath
             if (conflictPath) return conflictPath.replace(/(\.[^\\/]+)?$/, match => hash + match)
-            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext).replace(/^\//, '')
+            if (typeof customOutputPath === 'function') return customOutputPath(type, name, hash, ext, resourcePath).replace(/^\//, '')
             if (type === 'component' || type === 'page') return path.join(type + 's', name + hash, 'index' + ext)
             return path.join(type, name + hash + ext)
           },
@@ -1477,6 +1482,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]
+                }))
+              }
+            }
+          })
+        }
+
         parser.hooks.evaluate.for('NewExpression').tap('MpxWebpackPlugin', (expression) => {
           if (/@intlify\/core-base/.test(parser.state.module.resource)) {
             if (expression.callee.name === 'Function') {
@@ -1592,7 +1618,7 @@ class MpxWebpackPlugin {
         name: 'MpxWebpackPlugin',
         stage: compilation.PROCESS_ASSETS_STAGE_ADDITIONS
       }, () => {
-        if (isWeb(mpx.mode) || isReact(mpx.mode)) return
+        if (isWeb(mpx.mode) || isReact(mpx.mode) || isTenon(mpx.mode)) return
 
         if (this.options.generateBuildMap) {
           const pagesMap = compilation.__mpx__.pagesMap
@@ -1833,21 +1859,31 @@ try {
         // mpxStyleOptions 为 mpx style 文件的标识，避免 Vue 文件插入 styleCompiler 后导致 vue scoped 样式隔离失效
         if (isWeb(mpx.mode) && queryObj.mpxStyleOptions) {
           const firstLoader = loaders[0] ? toPosix(loaders[0].loader) : ''
-          const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher')
+          const isPitcherRequest = firstLoader.includes('node_modules/vue-loader/lib/loaders/pitcher') || firstLoader.includes('node_modules/@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('node_modules/css-loader') && cssLoaderIndex === -1) {
               cssLoaderIndex = index
             } else if (currentLoader.includes('node_modules/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/json-compiler/helper.js

@@ -7,7 +7,7 @@ const addQuery = require('../utils/add-query')
 const loaderUtils = require('loader-utils')
 const resolve = require('../utils/resolve')
 const { matchCondition } = require('../utils/match-condition')
-const { isWeb, isReact } = require('../utils/env')
+const { isWeb, isReact, isTenon } = require('../utils/env')
 
 module.exports = function createJSONHelper ({ loaderContext, emitWarning, customGetDynamicEntry }) {
   const mpx = loaderContext.getMpx()
@@ -76,7 +76,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
       const resourceName = path.join(parsed.dir, parsed.name)
 
       if (!outputPath) {
-        if (isScript(ext) && resourceName.includes('node_modules') && !isWeb(mode) && !isReact(mode)) {
+        if (isScript(ext) && resourceName.includes('node_modules') && !isWeb(mode) && !isTenon(mode) && !isReact(mode)) {
           let root = info.descriptionFileRoot
           let name = 'nativeComponent'
           if (info.descriptionFileData) {
@@ -139,7 +139,7 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
           outputPath = /^(.*?)(\.[^.]*)?$/.exec(relative)[1]
         }
       }
-      if (isScript(ext) && !isWeb(mode) && !isReact(mode)) {
+      if (isScript(ext) && !isWeb(mode) && !isTenon(mode) && !isReact(mode)) {
         resource = `!!${nativeLoaderPath}!${resource}`
       }
       const entry = getDynamicEntry(resource, 'page', outputPath, tarRoot, publicPath + tarRoot)

package/lib/loader.js

@@ -4,6 +4,8 @@ const parseRequest = require('./utils/parse-request')
 const { matchCondition } = require('./utils/match-condition')
 const addQuery = require('./utils/add-query')
 const async = require('async')
+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')
@@ -17,6 +19,11 @@ const path = require('path')
 const processWeb = require('./web')
 const processReact = require('./react')
 const genMpxCustomElement = require('./runtime-render/gen-mpx-custom-element')
+const loaderUtils = require('loader-utils')
+
+function stringifyRequest (loaderContext, request) {
+  return loaderUtils.stringifyRequest(loaderContext, request)
+}
 
 module.exports = function (content) {
   this.cacheable()
@@ -128,6 +135,52 @@ module.exports = function (content) {
       const hasComment = templateAttrs && templateAttrs.comments
       const isNative = false
 
+
+      if (mode === 'tenon') {
+        let output = ''
+        if (ctorType === 'app' && !queryObj.app) {
+          const request = addQuery(this.resource, { app: true })
+          output += `
+      import App from ${stringifyRequest(loaderContext, 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(loaderContext, request)}
+      import * as Tenon from '@hummer/tenon-vue'
+
+      Tenon.render(page)\n`
+          this.loaderIndex = -1
+          return callback(null, output)
+        }
+        return processForTenon({
+          parts,
+          jsonContent,
+          loaderContext,
+          pagesMap,
+          componentsMap,
+          queryObj,
+          ctorType,
+          srcMode,
+          moduleId,
+          isProduction,
+          hasScoped,
+          hasComment,
+          isNative,
+          usingComponentsInfo: JSON.stringify(usingComponentsInfo),
+          componentGenerics,
+          autoScope,
+          callback
+        })
+      }
+
       // 处理mode为web时输出vue格式文件
       if (mode === 'web') {
         return processWeb({

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' })
   const iosValueLogError = print({ platform: 'ios', tag: TAG_NAME, isError: true, type: 'value' })
@@ -43,6 +45,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-button'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-button'
+    },
     ios (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-button'
@@ -157,13 +163,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
         }
       },
       {
@@ -205,7 +216,8 @@ module.exports = function ({ print }) {
       },
       {
         test: /^(getuserinfo|contact|error|launchapp|opensetting|getphonenumber)$/,
-        web: webEventLog
+        web: webEventLog,
+        tenon: tenonEventLog
       },
       {
         test: /^(getuserinfo|contact|getphonenumber|bindgetrealtimephonenumber|error|opensetting|launchapp|chooseavatar|agreeprivacyauthorization)$/,

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

@@ -8,6 +8,14 @@ module.exports = function ({ print }) {
   const qaEventLog = print({ platform: 'qa', tag: TAG_NAME, isError: false, type: 'event' })
   return {
     test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-canvas'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-canvas'
+    },
     props: [
       {
         test: /^canvas-id$/,

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

@@ -15,6 +15,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-image'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-image'
+    },
     ios (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-image'

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

@@ -26,6 +26,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-input'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-input'
+    },
     ios (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-input'
@@ -92,7 +96,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|adjust-position|hold-keyboard|safe-password-.+)$/,
+        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|hold-keyboard|safe-password-.+)$/,
         ios: iosPropLog,
         android: androidPropLog
       }

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

@@ -23,6 +23,10 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-scroll-view'
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-scroll-view'
+    },
     android (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-scroll-view'

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

@@ -31,7 +31,7 @@ module.exports = function ({ print }) {
     },
     props: [
       {
-        test: /^(display-multiple-items|skip-hidden-item-layout|easing-function)$/,
+        test: /^(display-multiple-items|skip-hidden-item-layout)$/,
         ali: aliPropLog
       },
       {

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'
+    },
     ios (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-switch'

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

@@ -22,6 +22,10 @@ module.exports = function ({ print }) {
         return 'span'
       }
     },
+    tenon (tag, { el }) {
+      el.isBuiltIn = true
+      return 'tenon-text'
+    },
     ios (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-text'

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

@@ -28,6 +28,11 @@ module.exports = function ({ print }) {
       el.isBuiltIn = true
       return 'mpx-textarea'
     },
+    tenon (tag, { el }) {
+      // form全量使用内建组件
+      el.isBuiltIn = true
+      return 'tenon-textarea'
+    },
     ios (tag, { el }) {
       el.isBuiltIn = true
       return 'mpx-textarea'
@@ -78,7 +83,7 @@ module.exports = function ({ print }) {
         }
       },
       {
-        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|adjust-position|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
+        test: /^(placeholder-style|placeholder-class|cursor-spacing|always-embed|hold-keyboard|disable-default-padding|adjust-keyboard-to|fixed|show-confirm-bar)$/,
         ios: iosPropLog,
         android: androidPropLog
       }

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

@@ -11,7 +11,7 @@ const JD_UNSUPPORTED_TAG_NAME_ARR = ['functional-page-navigator', 'live-pusher',
 // 快应用不支持的标签集合
 const QA_UNSUPPORTED_TAG_NAME_ARR = ['movable-view', 'movable-area', 'open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'cover-image']
 // RN不支持的标签集合
-const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'rich-text', 'slider', 'audio', 'camera', 'video', 'canvas', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
+const RN_UNSUPPORTED_TAG_NAME_ARR = ['open-data', 'official-account', 'editor', 'functional-page-navigator', 'live-player', 'live-pusher', 'ad', 'progress', 'rich-text', 'slider', 'audio', 'camera', 'video', 'match-media', 'page-container', 'editor', 'keyboard-accessory', 'map']
 
 /**
  * @param {function(object): function} print

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

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