@mpxjs/webpack-plugin 2.9.3 → 2.9.6

package/lib/loader.js

@@ -222,10 +222,6 @@ module.exports = function (content) {
             output += templateRes.output
             output += stylesRes.output
             output += jsonRes.output
-            if (ctorType === 'app' && jsonRes.jsonObj.window && jsonRes.jsonObj.window.navigationBarTitleText) {
-              mpx.appTitle = jsonRes.jsonObj.window.navigationBarTitleText
-            }
-
             processScript(parts.script, {
               loaderContext,
               ctorType,

package/lib/platform/index.js

@@ -1,12 +1,4 @@
 const runRules = require('./run-rules')
-const specMap = {
-  template: {
-    wx: require('./template/wx')
-  },
-  json: {
-    wx: require('./json/wx')
-  }
-}
 
 module.exports = function getRulesRunner ({
   type,
@@ -20,7 +12,15 @@ module.exports = function getRulesRunner ({
   warn,
   error
 }) {
-  const spec = specMap[type] && specMap[type][srcMode] && specMap[type][srcMode]({ warn, error })
+  const specMap = {
+    template: {
+      wx: require('./template/wx')
+    },
+    json: {
+      wx: require('./json/wx')
+    }
+  }
+  const spec = specMap[type]?.[srcMode]?.({ warn, error })
   if (spec && spec.supportedModes.indexOf(mode) > -1) {
     const normalizeTest = spec.normalizeTest
     const mainRules = mainKey ? spec[mainKey] : spec

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

@@ -200,12 +200,20 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         // 样式类名绑定
-        test: /^wx:(class)$/,
-        web ({ value }) {
-          const parsed = parseMustacheWithContext(value)
+        test: /^(class|wx:class)$/,
+        web ({ value }, { el }) {
+          if (el.isClassParsed) {
+            return false
+          }
+          const classBinding = []
+          el.isClassParsed = true
+          el.attrsList.filter(item => this.test.test(item.name)).forEach((item) => {
+            const parsed = parseMustacheWithContext(item.value)
+            classBinding.push(parsed.result)
+          })
           return {
             name: ':class',
-            value: parsed.result
+            value: `[${classBinding}]`
           }
         }
       },

package/lib/runtime/components/web/mpx-movable-view.vue

@@ -178,7 +178,7 @@
             this.refresh()
           })
           const elementToObserve = document.querySelector('.mpx-movable-scroll-content')
-          this.resizeObserver.observe(elementToObserve)
+          elementToObserve && this.resizeObserver.observe(elementToObserve)
         }
       },
       refresh () {

package/lib/runtime/components/web/mpx-picker-view-column.vue

@@ -15,7 +15,13 @@
   export default {
     name: 'mpx-picker-view-column',
     props: {
-      value: Array
+      value: Array,
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
+      }
     },
     data() {
       return {
@@ -64,7 +70,9 @@
               rotate: -5,
               wheelWrapperClass: 'wheel-scroll'
             },
-            probeType: 3
+            probeType: 3,
+            bindToWrapper: true,
+            ...this.scrollOptions
           })
           this.wheels[0].on('scrollStart', function () {
             if (this.pickerView) {

package/lib/runtime/components/web/mpx-picker.vue

@@ -138,6 +138,12 @@
       fields: {
         type: String,
         default: 'day'
+      },
+      scrollOptions: {
+        type: Object,
+        default: () => {
+          return {}
+        }
       }
     },
     data () {
@@ -311,7 +317,9 @@
                     wheelWrapperClass: 'wheel-scroll',
                     wheelItemClass: 'wheel-item'
                   },
-                  probeType: 3
+                  probeType: 3,
+                  bindToWrapper: true,
+                  ...this.scrollOptions
                 })
                 if (this.mode === 'time' || this.mode === 'date') {
                   this.wheels[i].on('scrollStart', function (i) {

package/lib/runtime/components/web/mpx-swiper.vue

@@ -47,7 +47,7 @@
         default: () => {
           return {}
         }
-      },
+      }
     },
     data () {
       return {
@@ -212,7 +212,7 @@
         this.bs.scroller.hooks.on('beforeRefresh', () => {
           this.initLayerComputed()
         })
-        this.bs.on('slideWillChange', (page) => {
+        this.bs.on('slidePageChanged', (page) => {
           this.currentIndex = this.vertical ? page.pageY : page.pageX
           this.$emit('change', getCustomEvent('change', {
             current: this.currentIndex,

package/lib/style-compiler/index.js

@@ -1,7 +1,6 @@
 const postcss = require('postcss')
 const loadPostcssConfig = require('./load-postcss-config')
 const { MPX_ROOT_VIEW, MPX_APP_MODULE_ID } = require('../utils/const')
-const trim = require('./plugins/trim')
 const rpx = require('./plugins/rpx')
 const vw = require('./plugins/vw')
 const pluginCondStrip = require('./plugins/conditional-strip')
@@ -30,7 +29,7 @@ module.exports = function (css, map) {
 
   const inlineConfig = Object.assign({}, mpx.postcssInlineConfig, { defs })
   loadPostcssConfig(this, inlineConfig).then(config => {
-    const plugins = [trim] // init with trim plugin
+    const plugins = [] // init with trim plugin
     const options = Object.assign(
       {
         to: this.resourcePath,

package/lib/utils/check-core-version-match.js

@@ -1,18 +1,22 @@
-// @mpxjs/webpack-plugin 2.7.x -> @mpxjs/core 2.7.x
-// @mpxjs/webpack-plugin 2.8.x -> @mpxjs/core 2.8.x
 const coreVersion = require('@mpxjs/core/package.json').version
-const packageName = require('../../package.json').name
-const packageVersion = require('../../package.json').version
+const utilsVersion = require('@mpxjs/utils/package.json').version
+const corePath = require.resolve('@mpxjs/core')
+const utilsPath = require.resolve('@mpxjs/utils')
+const semverLt = require('semver/functions/lt')
 
-if (packageVersion.slice(0, 3) !== coreVersion.slice(0, 3)) {
-  const corePath = require.resolve('@mpxjs/core')
-  const packagePath = require.resolve('../../package.json')
-  throw new Error(
-    `@mpxjs/core packages version mismatch:
-    -@mpxjs/core@${coreVersion}(${corePath})
-    -${packageName}@${packageVersion}(${packagePath})
-    This may cause things to work incorrectly, Make sure to use the same minor version for both.
-    For example: @mpxjs/core@2.7.x with @mpxjs/webpack-plugin@2.7.x
+const leastCoreVersion = '2.8.59'
+const leastUtilsVersion = '2.8.59'
+
+function compare (version, leastVersion, npmName, npmPath) {
+  if (semverLt(version, leastVersion)) {
+    throw new Error(
+      `${npmName} packages version mismatch:
+    -${npmName}@${version}(${npmPath})
+    This may cause things to work incorrectly, Make sure the usage version is greater than ${leastVersion}.
     `
-  )
+    )
+  }
 }
+
+compare(coreVersion, leastCoreVersion, '@mpxjs/core', corePath)
+compare(utilsVersion, leastUtilsVersion, '@mpxjs/utils', utilsPath)

package/lib/web/processMainScript.js

@@ -1,7 +1,14 @@
 const addQuery = require('../utils/add-query')
 const normalize = require('../utils/normalize')
 const optionProcessorPath = normalize.lib('runtime/optionProcessor')
-const { buildComponentsMap, buildPagesMap, buildGlobalParams, shallowStringify, stringifyRequest, buildI18n } = require('./script-helper')
+const {
+  buildComponentsMap,
+  buildPagesMap,
+  buildGlobalParams,
+  shallowStringify,
+  stringifyRequest,
+  buildI18n
+} = require('./script-helper')
 
 module.exports = function (script, {
   loaderContext,
@@ -17,38 +24,57 @@ module.exports = function (script, {
   localPagesMap,
   resource
 }, callback) {
-  const { i18n, webConfig } = loaderContext.getMpx()
-
-  const { pagesMap, firstPage, globalTabBar } = buildPagesMap({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBarStr, jsonConfig })
+  const { i18n, webConfig, hasUnoCSS } = loaderContext.getMpx()
+  const { pagesMap, firstPage, globalTabBar } = buildPagesMap({
+    localPagesMap,
+    loaderContext,
+    tabBar,
+    tabBarMap,
+    tabBarStr,
+    jsonConfig
+  })
 
   const componentsMap = buildComponentsMap({ localComponentsMap, loaderContext })
 
   const scriptSrcMode = script ? script.mode || srcMode : srcMode
 
-  let output = `\n  import { processAppOption, getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
-          import '@mpxjs/webpack-plugin/lib/runtime/base.styl'
-          import Vue from 'vue'
-          import VueRouter from 'vue-router'
-          import Mpx from '@mpxjs/core'
-          import App from ${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}
-          Vue.use(VueRouter)
-  \n`
+  let output = '  import \'@mpxjs/webpack-plugin/lib/runtime/base.styl\'\n'
+  // hasUnoCSS由@mpxjs/unocss-plugin注入
+  if (hasUnoCSS) {
+    output += '  import \'uno.css\'\n'
+  }
+  output += `  import Vue from 'vue'
+  import VueRouter from 'vue-router'
+  import Mpx from '@mpxjs/core'
+  import App from ${stringifyRequest(loaderContext, addQuery(resource, { isApp: true }))}
+  import { processAppOption, getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
+  Vue.use(VueRouter)\n`
 
   if (i18n) {
     output += buildI18n({ i18n, loaderContext })
   }
 
-  output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, jsonConfig, webConfig, isMain: true, globalTabBar })
-  output += `export default processAppOption({
-                        App,
-                        tabBarMap: ${JSON.stringify(tabBarMap)},
-                        firstPage: ${JSON.stringify(firstPage)},
-                        pagesMap: ${shallowStringify(pagesMap)},
-                        componentsMap: ${shallowStringify(componentsMap)},
-                        Vue,
-                        VueRouter,
-                        webConfig: ${JSON.stringify(webConfig)}
-                    })`
+  output += buildGlobalParams({
+    moduleId,
+    scriptSrcMode,
+    loaderContext,
+    isProduction,
+    jsonConfig,
+    webConfig,
+    isMain: true,
+    globalTabBar
+  })
+  output += `
+  export default processAppOption({
+    App,
+    tabBarMap: ${JSON.stringify(tabBarMap)},
+    firstPage: ${JSON.stringify(firstPage)},
+    pagesMap: ${shallowStringify(pagesMap)},
+    componentsMap: ${shallowStringify(componentsMap)},
+    Vue,
+    VueRouter,
+    webConfig: ${JSON.stringify(webConfig)}
+  })\n`
 
   callback(null, {
     output

package/lib/web/processScript.js

@@ -75,7 +75,8 @@ module.exports = function (script, {
 
       content += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction })
       content += getRequireScript({ ctorType, script, loaderContext })
-      content += `  export default processComponentOption({
+      content += `
+  export default processComponentOption({
     option: global.__mpxOptionsMap[${JSON.stringify(moduleId)}],
     ctorType: ${JSON.stringify(ctorType)},
     outputPath: ${JSON.stringify(outputPath)},
@@ -85,12 +86,11 @@ module.exports = function (script, {
     componentGenerics: ${JSON.stringify(componentGenerics)},
     genericsInfo: ${JSON.stringify(genericsInfo)},
     mixin: getWxsMixin(wxsModules),
-    hasApp: ${hasApp}`
-      content += '\n  })\n'
+    hasApp: ${hasApp}
+  })\n`
       return content
     }
   })
-  output += '\n'
 
   callback(null, {
     output

package/lib/web/script-helper.js

@@ -81,10 +81,11 @@ function buildPagesMap ({ localPagesMap, loaderContext, tabBar, tabBarMap, tabBa
     })
   }
   if (tabBarStr && tabBarPagesMap) {
-    globalTabBar += `  global.__tabBar = ${tabBarStr}
-                        Vue.observable(global.__tabBar)
-                        // @ts-ignore
-                        global.__tabBarPagesMap = ${shallowStringify(tabBarPagesMap)}\n`
+    globalTabBar += `
+  global.__tabBar = ${tabBarStr}
+  Vue.observable(global.__tabBar)
+  // @ts-ignore
+  global.__tabBarPagesMap = ${shallowStringify(tabBarPagesMap)}\n`
   }
   Object.keys(localPagesMap).forEach((pagePath) => {
     const pageCfg = localPagesMap[pagePath]
@@ -125,29 +126,30 @@ function getRequireScript ({ ctorType, script, loaderContext }) {
 function buildGlobalParams ({ moduleId, scriptSrcMode, loaderContext, isProduction, jsonConfig, webConfig, isMain, globalTabBar }) {
   let content = ''
   if (isMain) {
-    content += `global.getApp = function(){}
-    global.getCurrentPages = function () {
-      if (!(typeof window !== 'undefined')) {
-        console.error('[Mpx runtime error]: Dangerous API! global.getCurrentPages is running in non browser environment, It may cause some problems, please use this method with caution')
-      }
-      const router = global.__mpxRouter
-      if(!router) return []
-      // @ts-ignore
-      return (router.lastStack || router.stack).map(item => {
-        let page
-        const vnode = item.vnode
-        if (vnode && vnode.componentInstance) {
-          page = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$refs.tabBarPage : vnode.componentInstance
-        }
-        return page || { route: item.path.slice(1) }
-      })
+    content += `
+  global.getApp = function(){}
+  global.getCurrentPages = function () {
+    if (!(typeof window !== 'undefined')) {
+      console.error('[Mpx runtime error]: Dangerous API! global.getCurrentPages is running in non browser environment, It may cause some problems, please use this method with caution')
     }
-    global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
-    global.__mpxGenericsMap = {}
-    global.__mpxOptionsMap = {}
-    global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
-    global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
-    global.__mpxTransRpxFn = ${webConfig.transRpxFn}\n`
+    const router = global.__mpxRouter
+    if(!router) return []
+    // @ts-ignore
+    return (router.lastStack || router.stack).map(item => {
+      let page
+      const vnode = item.vnode
+      if (vnode && vnode.componentInstance) {
+        page = vnode.tag.endsWith('mpx-tab-bar-container') ? vnode.componentInstance.$refs.tabBarPage : vnode.componentInstance
+      }
+      return page || { route: item.path.slice(1) }
+    })
+  }
+  global.__networkTimeout = ${JSON.stringify(jsonConfig.networkTimeout)}
+  global.__mpxGenericsMap = {}
+  global.__mpxOptionsMap = {}
+  global.__style = ${JSON.stringify(jsonConfig.style || 'v1')}
+  global.__mpxPageConfig = ${JSON.stringify(jsonConfig.window)}
+  global.__mpxTransRpxFn = ${webConfig.transRpxFn}\n`
     if (globalTabBar) {
       content += globalTabBar
     }
@@ -164,9 +166,10 @@ function buildGlobalParams ({ moduleId, scriptSrcMode, loaderContext, isProducti
 function buildI18n ({ i18n, loaderContext }) {
   let i18nContent = ''
   const i18nObj = Object.assign({}, i18n)
-  i18nContent += `  import VueI18n from 'vue-i18n'
-          import { createI18n } from 'vue-i18n-bridge'
-          Vue.use(VueI18n , { bridge: true })\n`
+  i18nContent += `
+  import VueI18n from 'vue-i18n'
+  import { createI18n } from 'vue-i18n-bridge'
+  Vue.use(VueI18n , { bridge: true })\n`
   const requestObj = {}
   const i18nKeys = ['messages', 'dateTimeFormats', 'numberFormats']
   i18nKeys.forEach((key) => {
@@ -179,10 +182,11 @@ function buildI18n ({ i18n, loaderContext }) {
   Object.keys(requestObj).forEach((key) => {
     i18nContent += `  i18nCfg.${key} = require(${requestObj[key]})\n`
   })
-  i18nContent += '  i18nCfg.legacy = false\n'
-  i18nContent += `  const i18n = createI18n(i18nCfg, VueI18n)
-                        Vue.use(i18n)
-                        Mpx.i18n = i18n\n`
+  i18nContent += `
+  i18nCfg.legacy = false
+  const i18n = createI18n(i18nCfg, VueI18n)
+  Vue.use(i18n)
+  Mpx.i18n = i18n\n`
   return i18nContent
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.3",
+  "version": "2.9.6",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -54,11 +54,12 @@
     "postcss-modules-values": "^4.0.0",
     "postcss-selector-parser": "^6.0.8",
     "postcss-value-parser": "^4.0.2",
+    "semver": "^7.5.4",
     "source-list-map": "^2.0.0",
     "video.js": "^8.6.0"
   },
   "peerDependencies": {
-    "webpack": "^5.48.0"
+    "webpack": "^5.75.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
@@ -82,5 +83,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "d0b4819fb5896f9796417f608eb06277dc5bdfaa"
+  "gitHead": "9034343edacc95da66b6e8ddb5c2f64a4be97231"
 }

package/lib/style-compiler/plugins/trim.js

@@ -1,15 +0,0 @@
-
-module.exports = (opts) => {
-  return {
-    postcssPlugin: 'trim',
-    Once: (root) => {
-      root.walk(({ type, raws }) => {
-        if (type === 'rule' || type === 'atrule') {
-          raws.before = raws.after = '\n'
-        }
-      })
-    }
-  }
-}
-
-module.exports.postcss = true