@mpxjs/webpack-plugin 2.10.3-beta.6 → 2.10.4-beta.10

package/lib/index.js

@@ -131,7 +131,7 @@ class MpxWebpackPlugin {
       errors.push('MpxWebpackPlugin supports mode to be "web" only when srcMode is set to "wx"!')
     }
     if (isReact(options.mode) && options.srcMode !== 'wx') {
-      errors.push('MpxWebpackPlugin supports mode to be "ios" or "android" of "harmony" only when srcMode is set to "wx"!')
+      errors.push('MpxWebpackPlugin supports mode to be "ios" | "android" | "harmony" only when srcMode is set to "wx"!')
     }
     if (options.dynamicComponentRules && !options.dynamicRuntime) {
       errors.push('Please make sure you have set dynamicRuntime true in mpx webpack plugin config because you have use the dynamic runtime feature.')

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

@@ -354,7 +354,6 @@ module.exports = function getSpec ({ warn, error }) {
       },
       {
         test: 'preloadRule',
-        tt: deletePath(),
         jd: deletePath()
       },
       {

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

@@ -184,8 +184,9 @@ module.exports = function getSpec ({ warn, error }) {
     'border-top': ['borderTopWidth', 'borderTopStyle', 'borderTopColor'],
     // 仅支持 width | style | color 这种排序
     'border-bottom': ['borderBottomWidth', 'borderBottomStyle', 'borderBottomColor'],
+    // 0.76 及以上版本RN支持 box-shadow，实测0.77版本drn红米note12pro Android12 不支持内阴影，其他表现和web一致
     // 仅支持 offset-x | offset-y | blur-radius | color 排序
-    'box-shadow': ['shadowOffset.width', 'shadowOffset.height', 'shadowRadius', 'shadowColor'],
+    // 'box-shadow': ['shadowOffset.width', 'shadowOffset.height', 'shadowRadius', 'shadowColor'],
     // 仅支持 text-decoration-line text-decoration-style text-decoration-color 这种格式
     'text-decoration': ['textDecorationLine', 'textDecorationStyle', 'textDecorationColor'],
     // flex-grow | flex-shrink | flex-basis
@@ -525,20 +526,20 @@ module.exports = function getSpec ({ warn, error }) {
     return { prop, value: values[0].trim() }
   }
 
-  const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
-    value = value.trim()
-    if (value === 'none') {
-      return false
-    }
-    const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
-    if (mode === 'android' || mode === 'harmony') return cssMap
-    // ios 阴影需要额外设置 shadowOpacity=1
-    cssMap.push({
-      prop: 'shadowOpacity',
-      value: 1
-    })
-    return cssMap
-  }
+  // const formatBoxShadow = ({ prop, value, selector }, { mode }) => {
+  //   value = value.trim()
+  //   if (value === 'none') {
+  //     return false
+  //   }
+  //   const cssMap = formatAbbreviation({ prop, value, selector }, { mode })
+  //   if (mode === 'android' || mode === 'harmony') return cssMap
+  //   // ios 阴影需要额外设置 shadowOpacity=1
+  //   cssMap.push({
+  //     prop: 'shadowOpacity',
+  //     value: 1
+  //   })
+  //   return cssMap
+  // }
 
   return {
     supportedModes: ['ios', 'android', 'harmony'],
@@ -579,12 +580,12 @@ module.exports = function getSpec ({ warn, error }) {
         android: formatFontFamily,
         harmony: formatFontFamily
       },
-      {
-        test: 'box-shadow',
-        ios: formatBoxShadow,
-        android: formatBoxShadow,
-        harmony: formatBoxShadow
-      },
+      // {
+      //   test: 'box-shadow',
+      //   ios: formatBoxShadow,
+      //   android: formatBoxShadow,
+      //   harmony: formatBoxShadow
+      // },
       // 通用的简写格式匹配
       {
         test: new RegExp('^(' + Object.keys(AbbreviationMap).join('|') + ')$'),

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

@@ -124,7 +124,7 @@ module.exports = function ({ print }) {
           if (isMustache(value)) {
             ttValueLog({ name, value })
           } else {
-            const supportList = ['share', 'getPhoneNumber', 'contact', 'im', 'openSetting']
+            const supportList = ['share', 'getPhoneNumber', 'contact', 'im', 'openSetting', 'addShortcut']
             if (value && supportList.indexOf(value) === -1) {
               ttValueLogError({ name, value })
             }

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

@@ -42,6 +42,8 @@ const wxs = require('./wxs')
 const component = require('./component')
 const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
+const stickyHeader = require('./sticky-header')
+const stickySection = require('./sticky-section')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -125,6 +127,8 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     hyphenTagName({ print }),
     label({ print }),
     component(),
-    rootPortal({ print })
+    rootPortal({ print }),
+    stickyHeader({ print }),
+    stickySection({ print })
   ]
 }

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

@@ -51,7 +51,7 @@ module.exports = function ({ print }) {
         swan: baiduPropLog
       },
       {
-        test: /^(placeholder-class|auto-focus|confirm-type|confirm-hold|adjust-position|hold-keyboard)$/,
+        test: /^(auto-focus|confirm-type|confirm-hold|adjust-position|hold-keyboard)$/,
         tt: ttPropLog
       },
       {
@@ -62,7 +62,7 @@ module.exports = function ({ print }) {
         test: 'type',
         web (prop) {
           let { name, value } = prop
-          if (value === 'idcard' || value === 'digit') {
+          if (value === 'idcard') {
             webValueLog(prop)
             value = 'text'
           }

package/lib/platform/template/wx/component-config/sticky-header.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-header'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-header'
+    }
+  }
+}

package/lib/platform/template/wx/component-config/sticky-section.js

@@ -0,0 +1,23 @@
+const TAG_NAME = 'sticky-section'
+
+module.exports = function ({ print }) {
+  return {
+    test: TAG_NAME,
+    android (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    ios (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    harmony (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    },
+    web (tag, { el }) {
+      el.isBuiltIn = true
+      return 'mpx-sticky-section'
+    }
+  }
+}

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

@@ -25,15 +25,15 @@ module.exports = function ({ print }) {
     },
     ios (tag, { el }) {
       el.isBuiltIn = true
-      return 'mpx-text'
+      return el.isSimple ? 'mpx-simple-text' : 'mpx-text'
     },
     android (tag, { el }) {
       el.isBuiltIn = true
-      return 'mpx-text'
+      return el.isSimple ? 'mpx-simple-text' : 'mpx-text'
     },
     harmony (tag, { el }) {
       el.isBuiltIn = true
-      return 'mpx-text'
+      return el.isSimple ? 'mpx-simple-text' : 'mpx-text'
     },
     props: [
       {
@@ -59,6 +59,21 @@ module.exports = function ({ print }) {
           el.isBuiltIn = true
         },
         qa: qaPropLog
+      },
+      {
+        test: /^(is-simple)$/,
+        android (prop, { el }) {
+          el.isSimple = true
+          return false
+        },
+        harmony (prop, { el }) {
+          el.isSimple = true
+          return false
+        },
+        ios (prop, { el }) {
+          el.isSimple = true
+          return false
+        }
       }
     ]
   }

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

@@ -31,12 +31,10 @@ module.exports = function ({ print }) {
     android (tag, { el }) {
       el.isBuiltIn = true
       return el.isSimple ? 'mpx-simple-view' : 'mpx-view'
-      return 'mpx-view'
     },
     harmony (tag, { el }) {
       el.isBuiltIn = true
       return el.isSimple ? 'mpx-simple-view' : 'mpx-view'
-      return 'mpx-view'
     },
     qa (tag) {
       return 'div'

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

@@ -8,6 +8,41 @@ const normalize = require('../../../utils/normalize')
 const { dash2hump } = require('../../../utils/hump-dash')
 
 module.exports = function getSpec ({ warn, error }) {
+  function getRnDirectiveEventHandle (mode) {
+    return function ({ 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
+      }
+      const rPrefix = runRules(spec.event.prefix, prefix, { mode })
+      const rEventName = runRules(eventRules, eventName, { mode, data: { el } })
+      return {
+        name: rPrefix + rEventName + meta.modifierStr,
+        value
+      }
+    }
+  }
+
+  function rnEventRulesHandle (eventName) {
+    const eventMap = {
+      tap: 'tap',
+      longtap: 'longpress',
+      longpress: 'longpress',
+      touchstart: 'touchstart',
+      touchmove: 'touchmove',
+      touchend: 'touchend',
+      touchcancel: 'touchcancel'
+    }
+    if (eventMap[eventName]) {
+      return eventMap[eventName]
+    } else {
+      error(`React native environment does not support [${eventName}] event!`)
+    }
+  }
+
   const spec = {
     supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'ios', 'android', 'harmony'],
     // props预处理
@@ -389,51 +424,9 @@ module.exports = function getSpec ({ warn, error }) {
             value
           }
         },
-        ios ({ 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
-          }
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'ios' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'ios', data: { el } })
-          return {
-            name: rPrefix + rEventName + meta.modifierStr,
-            value
-          }
-        },
-        android ({ 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
-          }
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'android' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'android', data: { el } })
-          return {
-            name: rPrefix + rEventName + meta.modifierStr,
-            value
-          }
-        },
-        harmony ({ 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
-          }
-          const rPrefix = runRules(spec.event.prefix, prefix, { mode: 'harmony' })
-          const rEventName = runRules(eventRules, eventName, { mode: 'harmony', data: { el } })
-          return {
-            name: rPrefix + rEventName + meta.modifierStr,
-            value
-          }
-        }
+        ios: getRnDirectiveEventHandle('ios'),
+        android: getRnDirectiveEventHandle('android'),
+        harmony: getRnDirectiveEventHandle('harmony')
       },
       // 无障碍
       {
@@ -537,54 +530,9 @@ module.exports = function getSpec ({ warn, error }) {
               error(`Web environment does not support [${eventName}] event!`)
             }
           },
-          ios (eventName) {
-            const eventMap = {
-              tap: 'tap',
-              longtap: 'longpress',
-              longpress: 'longpress',
-              touchstart: 'touchstart',
-              touchmove: 'touchmove',
-              touchend: 'touchend',
-              touchcancel: 'touchcancel'
-            }
-            if (eventMap[eventName]) {
-              return eventMap[eventName]
-            } else {
-              error(`React native environment does not support [${eventName}] event!`)
-            }
-          },
-          android (eventName) {
-            const eventMap = {
-              tap: 'tap',
-              longtap: 'longpress',
-              longpress: 'longpress',
-              touchstart: 'touchstart',
-              touchmove: 'touchmove',
-              touchend: 'touchend',
-              touchcancel: 'touchcancel'
-            }
-            if (eventMap[eventName]) {
-              return eventMap[eventName]
-            } else {
-              error(`React native environment does not support [${eventName}] event!`)
-            }
-          },
-          harmony (eventName) {
-            const eventMap = {
-              tap: 'tap',
-              longtap: 'longpress',
-              longpress: 'longpress',
-              touchstart: 'touchstart',
-              touchmove: 'touchmove',
-              touchend: 'touchend',
-              touchcancel: 'touchcancel'
-            }
-            if (eventMap[eventName]) {
-              return eventMap[eventName]
-            } else {
-              error(`React native environment does not support [${eventName}] event!`)
-            }
-          }
+          ios: rnEventRulesHandle,
+          android: rnEventRulesHandle,
+          harmony: rnEventRulesHandle
         },
         // web event escape
         {

package/lib/react/processJSON.js

@@ -113,13 +113,14 @@ module.exports = function (jsonContent, {
   }
 
   if (ctorType === 'page') {
-    const keysToExtract = ['navigationStyle']
+    // const keysToExtract = ['navigationStyle']
     const configObj = {}
-    keysToExtract.forEach(key => {
-      if (jsonObj[key]) {
-        configObj[key] = jsonObj[key]
-      }
-    })
+    // 暂时先不注入数据，后续如需要使用再用
+    // keysToExtract.forEach(key => {
+    //   if (jsonObj[key]) {
+    //     configObj[key] = jsonObj[key]
+    //   }
+    // })
     loaderContext._module.addPresentationalDependency(new RecordPageConfigsMapDependency(parseRequest(loaderContext.resource).resourcePath, configObj))
   }
 

package/lib/react/processScript.js

@@ -17,7 +17,6 @@ module.exports = function (script, {
   genericsInfo
 }, callback) {
   let scriptSrcMode = srcMode
-  const mode = loaderContext.getMpx().mode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
@@ -28,23 +27,7 @@ module.exports = function (script, {
   if (ctorType === 'app') {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
-import { NavigationContainer, StackActions } from '@react-navigation/native'
-${mode === 'ios' || mode === 'harmony' ? "import { createNativeStackNavigator as createStackNavigator } from '@react-navigation/native-stack'" : "import { createStackNavigator } from '@react-navigation/stack'"}
-import PortalHost from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/portal-host'
-import { useHeaderHeight } from '@react-navigation/elements';
-import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
-import { GestureHandlerRootView } from 'react-native-gesture-handler'
-
-global.__navigationHelper = {
-  NavigationContainer: NavigationContainer,
-  createStackNavigator: createStackNavigator,
-  useHeaderHeight: useHeaderHeight,
-  StackActions: StackActions,
-  GestureHandlerRootView: GestureHandlerRootView,
-  PortalHost: PortalHost,
-  SafeAreaProvider: SafeAreaProvider,
-  useSafeAreaInsets: useSafeAreaInsets
-}\n`
+\n`
     const { pagesMap, firstPage } = buildPagesMap({
       localPagesMap,
       loaderContext,

package/lib/runtime/components/react/context.ts

@@ -1,5 +1,6 @@
 import { createContext, Dispatch, MutableRefObject, SetStateAction } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
+import { NativeSyntheticEvent, Animated } from 'react-native'
+import { noop } from '@mpxjs/utils'
 
 export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
@@ -42,7 +43,8 @@ export interface PortalContextValue {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any> | null
+  gestureRef: React.RefObject<any> | null,
+  scrollOffset: Animated.Value
 }
 
 export interface RouteContextValue {
@@ -50,6 +52,11 @@ export interface RouteContextValue {
   navigation: Record<string, any>
 }
 
+export interface StickyContextValue {
+  registerStickyHeader: Function,
+  unregisterStickyHeader: Function
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -72,6 +79,8 @@ export const SwiperContext = createContext({})
 
 export const KeyboardAvoidContext = createContext<KeyboardAvoidContextValue | null>(null)
 
-export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null })
+export const ScrollViewContext = createContext<ScrollViewContextValue>({ gestureRef: null, scrollOffset: new Animated.Value(0) })
 
 export const PortalContext = createContext<PortalContextValue>(null as any)
+
+export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })

package/lib/runtime/components/react/dist/context.js

@@ -1,4 +1,6 @@
 import { createContext } from 'react';
+import { Animated } from 'react-native';
+import { noop } from '@mpxjs/utils';
 export const MovableAreaContext = createContext({ width: 0, height: 0 });
 export const FormContext = createContext(null);
 export const CheckboxGroupContext = createContext(null);
@@ -10,5 +12,6 @@ export const IntersectionObserverContext = createContext(null);
 export const RouteContext = createContext(null);
 export const SwiperContext = createContext({});
 export const KeyboardAvoidContext = createContext(null);
-export const ScrollViewContext = createContext({ gestureRef: null });
+export const ScrollViewContext = createContext({ gestureRef: null, scrollOffset: new Animated.Value(0) });
 export const PortalContext = createContext(null);
+export const StickyContext = createContext({ registerStickyHeader: noop, unregisterStickyHeader: noop });

package/lib/runtime/components/react/dist/event.config.js

@@ -1,4 +1,3 @@
-export const TAP_EVENTS = ['bindtap', 'catchtap', 'capture-bindtap', 'capture-catchtap'];
 const eventConfigMap = {
     bindtap: { bitFlag: '0', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd'] },
     bindlongpress: { bitFlag: '1', events: ['onTouchStart', 'onTouchMove', 'onTouchEnd', 'onTouchCancel'] },