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

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

@@ -5,7 +5,8 @@
 <script>
 import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
-import { extend } from '../../utils'
+import { extend, isFunction } from '@mpxjs/utils'
+
 const navObj = promisify({ redirectTo, navigateTo, navigateBack, reLaunch, switchTab })
 const eventLoad = 'load'
 const eventError = 'error'
@@ -102,58 +103,71 @@ export default {
   methods: {
     messageCallback (event) {
       const hostValidate = this.hostValidate(event.origin)
-      const data = event.data
+      let data = {}
+      try {
+        const eventData = event.data
+        data = typeof eventData === 'string' ? JSON.parse(eventData) : eventData
+      } catch(e){}
       // 判断number类型，防止undefined导致触发return逻辑
       if (data.clientUid !== undefined && +data.clientUid !== this._uid) {
         return
       }
       let value = data.payload
+      const args = data.args
+      const params = Array.isArray(args) ? args : [value]
       if (!hostValidate) {
         return
       }
       let asyncCallback = null
-      switch (data.type) {
+      const type = data.type
+      switch (type) {
         case 'postMessage':
-          this.messageList.push(value.data || value)
+          let data = {
+            type: 'message',
+            data: params[0]?.data
+          }
+          this.$emit(eventMessage, getCustomEvent(eventMessage, data, this))
           asyncCallback = Promise.resolve({
             errMsg: 'invokeWebappApi:ok'
           })
           break
         case 'navigateTo':
-          asyncCallback = navObj.navigateTo(value)
+          asyncCallback = navObj.navigateTo(...params)
           break
         case 'navigateBack':
-          asyncCallback = navObj.navigateBack(value)
+          asyncCallback = navObj.navigateBack(...params)
           break
         case 'redirectTo':
-          asyncCallback = navObj.redirectTo(value)
+          asyncCallback = navObj.redirectTo(...params)
           break
         case 'switchTab':
-          asyncCallback = navObj.switchTab(value)
+          asyncCallback = navObj.switchTab(...params)
           break
         case 'reLaunch':
-          asyncCallback = navObj.reLaunch(value)
+          asyncCallback = navObj.reLaunch(...params)
           break
-        case 'getLocation':
-          const getLocation = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations.getLocation
-          if (getLocation) {
-            asyncCallback = getLocation()
-          } else {
-            asyncCallback = Promise.reject({
-              errMsg: '未在apiImplementations中配置getLocation方法'
-            })
+        default:
+          if (type) {
+            const implement = mpx.config.webviewConfig.apiImplementations && mpx.config.webviewConfig.apiImplementations[type]
+            if (isFunction(implement)) {
+              asyncCallback = Promise.resolve(implement(...params))
+            } else {
+              asyncCallback = Promise.reject({
+                errMsg: `未在apiImplementations中配置${type}方法`
+              })
+            }
           }
           break
       }
       asyncCallback && asyncCallback.then((res) => {
         this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
-          type: data.type,
+          type: type,
           callbackId: data.callbackId,
           result: res
         }, event.origin)
       }).catch((error) => {
         this.mpxIframe && this.mpxIframe.contentWindow && this.mpxIframe.contentWindow.postMessage && this.mpxIframe.contentWindow.postMessage({
-          type: data.type,
+          type: type,
           callbackId: data.callbackId,
           error
         }, event.origin)
@@ -183,4 +197,4 @@ export default {
   right: 0;
   bottom: 0;
 }
-</style>
+</style>

package/lib/runtime/optionProcessor.js

@@ -2,9 +2,6 @@ import { hasOwn, isEmptyObject, extend } from './utils'
 import { isBrowser } from './env'
 import transRpxStyle from './transRpxStyle'
 import animation from './animation'
-import { createEvent } from './components/web/event'
-
-createEvent()
 
 export function processComponentOption (
   {
@@ -309,25 +306,6 @@ function createApp ({ componentsMap, Vue, pagesMap, firstPage, VueRouter, App, t
     })
     // 处理visibilitychange时触发当前活跃页面组件的onshow/onhide
     if (isBrowser) {
-      const errorHandler = function (args, fromVue) {
-        if (global.__mpxAppCbs && global.__mpxAppCbs.error && global.__mpxAppCbs.error.length) {
-          global.__mpxAppCbs.error.forEach((cb) => {
-            cb.apply(null, args)
-          })
-          console.error(...args)
-        } else if (fromVue) {
-          throw args[0]
-        }
-      }
-      Vue.config.errorHandler = (...args) => {
-        return errorHandler(args, true)
-      }
-      window.addEventListener('error', (event) => {
-        return errorHandler([event.error, event])
-      })
-      window.addEventListener('unhandledrejection', (event) => {
-        return errorHandler([event.reason, event])
-      })
       document.addEventListener('visibilitychange', function () {
         const vnode = global.__mpxRouter && global.__mpxRouter.__mpxActiveVnode
         if (vnode && vnode.componentInstance) {

package/lib/style-compiler/index.js

@@ -30,7 +30,7 @@ module.exports = function (css, map) {
   const index = queryObj.index || 0
   const packageName = queryObj.packageRoot || mpx.currentPackageRoot || 'main'
 
-  const transRpxFn = mpx.webConfig && mpx.webConfig.transRpxFn
+  const transRpxFn = mpx.webConfig.transRpxFn
   const testResolveRange = (include = () => true, exclude) => {
     return matchCondition(this.resourcePath, { include, exclude })
   }

package/lib/style-compiler/plugins/scope-id.js

@@ -1,6 +1,8 @@
 const selectorParser = require('postcss-selector-parser')
 // scope-id
-
+function isSpaceCombinator (node) {
+  return node.type === 'combinator' && /^\s+$/.test(node.value)
+}
 module.exports = ({ id }) => {
   return {
     postcssPlugin: 'scope-id',
@@ -31,10 +33,36 @@ module.exports = ({ id }) => {
                 n.spaces.before = n.spaces.after = ''
                 return false
               }
+              if (n.type === 'pseudo' && n.value === ':deep') {
+                if (n.nodes.length) {
+                  let last = n
+                  n.nodes[0].each((ss) => {
+                    selector.insertAfter(last, ss)
+                    last = ss
+                  })
+                  const prev = n.prev()
+                  if (!prev || !isSpaceCombinator(prev)) {
+                    selector.insertAfter(
+                      n,
+                      selectorParser.combinator({
+                        value: ' '
+                      })
+                    )
+                  }
+                  n.remove()
+                } else {
+                  const prev = n.prev()
+                  if (prev && isSpaceCombinator(prev)) {
+                    prev.remove()
+                  }
+                  n.remove()
+                }
+                return false
+              }
               // /deep/ alias for >>>, since >>> doesn't work in SASS
               if (n.type === 'tag' && n.value === '/deep/') {
                 const prev = n.prev()
-                if (prev && prev.type === 'combinator' && prev.value === ' ') {
+                if (prev && isSpaceCombinator(prev)) {
                   prev.remove()
                 }
                 n.remove()

package/lib/template-compiler/compiler.js

@@ -15,7 +15,7 @@ const { isNonPhrasingTag } = require('../utils/dom-tag-config')
 const setBaseWxml = require('../runtime-render/base-wxml')
 const { parseExp } = require('./parse-exps')
 const shallowStringify = require('../utils/shallow-stringify')
-const { isReact, isWeb, isTenon } = require('../utils/env')
+const { isReact, isWeb } = require('../utils/env')
 
 const no = function () {
   return false
@@ -117,6 +117,7 @@ let hasOptionalChaining = false
 let processingTemplate = false
 const rulesResultMap = new Map()
 let usingComponents = []
+let usingComponentsInfo = {}
 
 function updateForScopesMap () {
   forScopesMap = {}
@@ -636,6 +637,7 @@ function parse (template, options) {
 
   if (typeof options.usingComponentsInfo === 'string') options.usingComponentsInfo = JSON.parse(options.usingComponentsInfo)
   usingComponents = Object.keys(options.usingComponentsInfo)
+  usingComponentsInfo = options.usingComponentsInfo
 
   const _warn = content => {
     const currentElementRuleResult = rulesResultMap.get(currentEl) || rulesResultMap.set(currentEl, {
@@ -1227,7 +1229,8 @@ function processEventReact (el) {
       ])
     } else {
       const { name, value } = configs[0]
-      modifyAttr(el, name, `{{${value}}}`)
+      const { result } = parseMustacheWithContext(value)
+      modifyAttr(el, name, `{{this[${result}]}}`)
     }
 
     // 非button的情况下，press/longPress时间需要包裹TouchableWithoutFeedback进行响应，后续可支持配置
@@ -1927,7 +1930,7 @@ function postProcessFor (el) {
 function postProcessForReact (el) {
   if (el.for) {
     if (el.for.key) {
-      addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key)})`, false, 'key')
+      addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key)}, ${el.for.index || 'index'})`, false, 'key')
       addAttrs(el, [{
         name: 'key',
         value: el.for.key
@@ -2063,16 +2066,22 @@ function processWrapTextReact (el, options, meta) {
   if (parentTag !== 'mpx-text' && parentTag !== 'Text' && parentTag !== 'wxs') {
     const wrapper = createASTElement('mpx-simple-text')
     wrapper.isBuiltIn = true
-    const dataSetAttrs = []
+    const inheritAttrs = []
     parent.attrsList.forEach(({ name, value }) => {
       if (/^data-/.test(name)) {
-        dataSetAttrs.push({
+        inheritAttrs.push({
           name,
           value
         })
       }
+      if (/^id$/.test(name)) {
+        inheritAttrs.push({
+          name: 'parentId',
+          value
+        })
+      }
     })
-    addAttrs(wrapper, dataSetAttrs)
+    addAttrs(wrapper, inheritAttrs)
     replaceNode(el, wrapper, true)
     addChild(wrapper, el)
     processBuiltInComponents(wrapper, meta)
@@ -2094,7 +2103,7 @@ function processWrapTextReact (el, options, meta) {
 // }
 
 function injectWxs (meta, module, src) {
-  if (runtimeCompile || addWxsModule(meta, module, src) || isReact(mode) || isWeb(mode) || isTenon(mode)) {
+  if (runtimeCompile || addWxsModule(meta, module, src) || isReact(mode) || isWeb(mode)) {
     return
   }
 
@@ -2178,16 +2187,20 @@ function isRealNode (el) {
   return !virtualNodeTagMap[el.tag]
 }
 
-function isComponentNode (el, options) {
+function isComponentNode (el) {
   return usingComponents.indexOf(el.tag) !== -1 || el.tag === 'component'
 }
 
-function isReactComponent (el, options) {
-  return !isComponentNode(el, options) && isRealNode(el) && !el.isBuiltIn
+function getComponentInfo (el) {
+  return usingComponentsInfo[el.tag] || {}
+}
+
+function isReactComponent (el) {
+  return !isComponentNode(el) && isRealNode(el) && !el.isBuiltIn
 }
 
 function processExternalClasses (el, options) {
-  const isComponent = isComponentNode(el, options)
+  const isComponent = isComponentNode(el)
   const classLikeAttrNames = isComponent ? ['class'].concat(options.externalClasses) : ['class']
 
   classLikeAttrNames.forEach((classLikeAttrName) => {
@@ -2301,8 +2314,7 @@ function postProcessAliComponentRootView (el, options, meta) {
     { condition: /^style$/, action: 'move' },
     { condition: /^slot$/, action: 'move' }
   ]
-  const tagName = el.tag
-  const mid = options.usingComponentsInfo[tagName]?.mid || moduleId
+  const mid = getComponentInfo(el).mid
   const processAppendAttrsRules = [
     { name: 'class', value: `${MPX_ROOT_VIEW} host-${mid}` }
   ]
@@ -2409,7 +2421,7 @@ function processShow (el, options, root) {
     show = has ? `{{${parseMustacheWithContext(show).result}&&mpxShow}}` : '{{mpxShow}}'
   }
   if (show === undefined) return
-  if (isComponentNode(el, options)) {
+  if (isComponentNode(el) && getComponentInfo(el).hasVirtualHost) {
     if (show === '') {
       show = '{{false}}'
     }
@@ -2631,15 +2643,6 @@ function processElement (el, root, options, meta) {
     processComponentGenericsWeb(el, options, meta)
     return
   }
-  if (mode === 'tenon') {
-    // 收集内建组件
-    processBuiltInComponents(el, meta)
-    // 预处理代码维度条件编译
-    processIfWeb(el)
-    // processWebExternalClassesHack(el, options)
-    // processComponentGenericsForWeb(el, options, meta)
-    return
-  }
 
   if (isReact(mode)) {
     const pass = isReactComponent(el, options)
@@ -2695,7 +2698,7 @@ function closeElement (el, options, meta) {
   postProcessAtMode(el)
   postProcessWxs(el, meta)
 
-  if (isWeb(mode) || isTenon(mode)) {
+  if (isWeb(mode)) {
     // 处理代码维度条件编译移除死分支
     postProcessIf(el)
     return
@@ -2710,14 +2713,14 @@ function closeElement (el, options, meta) {
   if (!isTemplate) {
     if (!isNative) {
       postProcessComponentIs(el, (child) => {
-        if (!hasVirtualHost && mode === 'ali') {
+        if (!getComponentInfo(el).hasVirtualHost && mode === 'ali') {
           postProcessAliComponentRootView(child, options)
         } else {
           postProcessIf(child)
         }
       })
     }
-    if (isComponentNode(el, options) && !hasVirtualHost && mode === 'ali' && el.tag !== 'component') {
+    if (isComponentNode(el) && !getComponentInfo(el).hasVirtualHost && mode === 'ali' && el.tag !== 'component') {
       postProcessAliComponentRootView(el, options, meta)
     }
   }
@@ -2828,6 +2831,7 @@ function serialize (root) {
           result += node.text
         }
       }
+
       if (node.type === 1) {
         if (node.tag !== 'temp-node') {
           result += '<' + node.tag

package/lib/utils/env.js

@@ -6,17 +6,12 @@ function isWeb (mode) {
     return mode === 'web'
 }
 
-function isTenon (mode) {
-    return mode === 'tenon'
-}
-
 function isMiniProgram (mode) {
-    return !isWeb(mode) && !isReact(mode) && !isTenon(mode)
+    return !isWeb(mode) && !isReact(mode)
 }
 
 module.exports = {
     isWeb,
     isReact,
-    isTenon,
     isMiniProgram
 }

package/lib/utils/pre-process-json.js

@@ -6,6 +6,7 @@ const addQuery = require('./add-query')
 const resolve = require('./resolve')
 const getJSONContent = require('./get-json-content')
 const getRulesRunner = require('../platform')
+const { matchCondition } = require('./match-condition')
 const async = require('async')
 
 module.exports = function ({
@@ -19,8 +20,7 @@ module.exports = function ({
 }, callback) {
   const mpx = loaderContext.getMpx()
   const context = loaderContext.context
-  const mode = mpx.mode
-  const pagesMap = mpx.pagesMap
+  const { mode, pagesMap, autoVirtualHostRules } = mpx
   async.waterfall([
     (callback) => {
       getJSONContent(json, null, loaderContext, callback)
@@ -78,8 +78,8 @@ module.exports = function ({
           componentGenerics = Object.assign({}, ret.componentGenerics)
         }
         if (usingComponents) {
-          const setUsingComponentInfo = (name, moduleId) => {
-            usingComponentsInfo[name] = { mid: moduleId }
+          const setUsingComponentInfo = (name, info) => {
+            usingComponentsInfo[name] = info
           }
           async.eachOf(usingComponents, (component, name, callback) => {
             if (ctorType === 'app') {
@@ -96,7 +96,11 @@ module.exports = function ({
               if (err) return callback(err)
               const { rawResourcePath } = parseRequest(resource)
               const moduleId = mpx.getModuleId(rawResourcePath, ctorType === 'app')
-              setUsingComponentInfo(name, moduleId)
+              const hasVirtualHost = matchCondition(rawResourcePath, autoVirtualHostRules)
+              setUsingComponentInfo(name, {
+                mid: moduleId,
+                hasVirtualHost
+              })
               callback()
             })
           }, (err) => {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.70-alpha.0",
+  "version": "2.9.70",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -27,11 +27,8 @@
     "@better-scroll/slide": "^2.5.1",
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
-    "@hummer/tenon-dev-server-webpack-plugin": "0.0.2",
-    "@hummer/tenon-loader": "^1.2.0",
-    "@hummer/tenon-style-loader": "^0.2.0",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": ">=2.9.69-alpha",
+    "@mpxjs/utils": "^2.9.70",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -86,7 +83,7 @@
   "devDependencies": {
     "@ant-design/react-native": "^5.2.2",
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.9.69",
+    "@mpxjs/api-proxy": "^2.9.70",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",
@@ -102,5 +99,5 @@
   "engines": {
     "node": ">=14.14.0"
   },
-  "gitHead": "2d37697869b9bdda3efab92dda8c910b68fd05c0"
+  "gitHead": "ad8f04de95865ffc2b50b8c0a7f87b5952fb8647"
 }

package/lib/dependencies/AddEntryDependency.js

@@ -1,24 +0,0 @@
-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/runtime/components/react/dist/mpx-picker-view-column-item.jsx

@@ -1,39 +0,0 @@
-import React, { useEffect } from 'react';
-import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated';
-import { wrapChildren, extendObject } from './utils';
-import { createFaces } from './pickerFaces';
-import { usePickerViewColumnAnimationContext } from './pickerVIewContext';
-const _PickerViewColumnItem = ({ item, index, itemHeight, itemWidth, textStyleFromParent, textStyle, hasVarDec, varContext, textProps, visibleCount, onItemLayout }) => {
-    const offsetYShared = usePickerViewColumnAnimationContext();
-    const facesShared = useSharedValue(createFaces(itemHeight, visibleCount));
-    useEffect(() => {
-        facesShared.value = createFaces(itemHeight, visibleCount);
-    }, [itemHeight]);
-    const animatedStyles = useAnimatedStyle(() => {
-        const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index));
-        return {
-            opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
-            transform: [
-                { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
-                { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
-                { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
-            ]
-        };
-    });
-    const strKey = `picker-column-item-${index}`;
-    const restProps = index === 0 ? { onLayout: onItemLayout } : {};
-    const itemProps = extendObject({
-        style: extendObject({ height: itemHeight, width: '100%' }, textStyleFromParent, textStyle, item.props.style)
-    }, restProps);
-    const realItem = React.cloneElement(item, itemProps);
-    return (<Reanimated.View key={strKey} style={[{ height: itemHeight, width: itemWidth }, animatedStyles]}>
-      {wrapChildren({ children: realItem }, {
-            hasVarDec,
-            varContext,
-            textStyle,
-            textProps
-        })}
-    </Reanimated.View>);
-};
-_PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem';
-export default _PickerViewColumnItem;