@mpxjs/webpack-plugin 2.10.7-beta.9 → 2.10.8-beta.1

package/lib/runtime/components/react/types/global.d.ts

@@ -42,6 +42,21 @@ declare let global: {
 
 declare module '@react-navigation/native' {
    export function useNavigation (): Record<string, any>
+   export function usePreventRemove(
+    enabled: boolean,
+    callback: (e: { data: { action: any } }) => void
+  ): void;
+  export interface PreventRemoveEvent {
+    data: {
+      action: NavigationAction;
+      route: {
+        key: string;
+        name: string;
+        params?: unknown;
+      };
+    };
+    preventDefault(): void;
+  }
 }
 
 declare module '*.png'

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

@@ -84,88 +84,6 @@ const InitialValue: ExtendedViewStyle = Object.assign({
 const TransformOrigin = 'transformOrigin'
 // transform
 const isTransform = (key: string) => Object.keys(TransformInitial).includes(key)
-// 多value解析
-const parseValues = (str: string, char = ' ') => {
-  let stack = 0
-  let temp = ''
-  const result = []
-  for (let i = 0; i < str.length; i++) {
-    if (str[i] === '(') {
-      stack++
-    } else if (str[i] === ')') {
-      stack--
-    }
-    // 非括号内 或者 非分隔字符且非空
-    if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
-      temp += str[i]
-    }
-    if ((stack === 0 && str[i] === char) || i === str.length - 1) {
-      result.push(temp)
-      temp = ''
-    }
-  }
-  return result
-}
-// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
-const parseTransform = (transformStr: string) => {
-  const values = parseValues(transformStr)
-  const transform: {[propName: string]: string|number|number[]}[] = []
-  values.forEach(item => {
-    const match = item.match(/([/\w]+)\((.+)\)/)
-    if (match && match.length >= 3) {
-      let key = match[1]
-      const val = match[2]
-      switch (key) {
-        case 'translateX':
-        case 'translateY':
-        case 'scaleX':
-        case 'scaleY':
-        case 'rotateX':
-        case 'rotateY':
-        case 'rotateZ':
-        case 'rotate':
-        case 'skewX':
-        case 'skewY':
-        case 'perspective':
-          // rotate 处理成 rotateZ
-          key = key === 'rotate' ? 'rotateZ' : key
-          // 单个值处理
-          transform.push({ [key]: global.__formatValue(val) })
-          break
-        case 'matrix':
-          transform.push({ [key]: parseValues(val, ',').map(val => +val) })
-          break
-        case 'translate':
-        case 'scale':
-        case 'skew':
-        case 'translate3d': // x y 支持 z不支持
-        case 'scale3d': // x y 支持 z不支持
-        {
-          // 2 个以上的值处理
-          key = key.replace('3d', '')
-          const vals = parseValues(val, ',').splice(0, 3)
-          // scale(.5) === scaleX(.5) scaleY(.5)
-          if (vals.length === 1 && key === 'scale') {
-            vals.push(vals[0])
-          }
-          const xyz = ['X', 'Y', 'Z']
-          transform.push(...vals.map((v, index) => {
-            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) }
-          }))
-          break
-        }
-      }
-    }
-  })
-  return transform
-}
-// format style
-const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
-  if (!style.transform || Array.isArray(style.transform)) return style
-  return Object.assign({}, style, {
-    transform: parseTransform(style.transform)
-  })
-}
 
 // transform 数组转对象
 function getTransformObj (transforms: { [propName: string]: string | number }[]) {
@@ -176,7 +94,7 @@ function getTransformObj (transforms: { [propName: string]: string | number }[])
 }
 
 export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean, layoutRef: MutableRefObject<any>, transitionend?: (event: NativeSyntheticEvent<TouchEvent> | unknown) => void }) {
-  const { style = {}, animation, enableAnimation, transitionend, layoutRef } = props
+  const { style: originalStyle = {}, animation, enableAnimation, transitionend, layoutRef } = props
   const enableStyleAnimation = enableAnimation || !!animation
   const enableAnimationRef = useRef(enableStyleAnimation)
   if (enableAnimationRef.current !== enableStyleAnimation) {
@@ -185,7 +103,6 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
 
   if (!enableAnimationRef.current) return { enableStyleAnimation: false }
 
-  const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
   // 有动画样式的 style key
@@ -214,7 +131,7 @@ export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAni
   useEffect(() => {
     // style 更新后同步更新 lastStyleRef & shareValMap
     updateStyleVal()
-  }, [style])
+  }, [originalStyle])
   // ** 获取动画样式prop & 驱动动画
   // eslint-disable-next-line react-hooks/rules-of-hooks
   useEffect(() => {

package/lib/runtime/optionProcessorReact.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode, ComponentType } from 'react'
 declare global {
   namespace NodeJS {
     interface Global {
@@ -7,3 +8,20 @@ declare global {
 }
 
 export function getComponent (...args: any): object
+
+interface AsyncModule {
+  __esModule: boolean
+  default: ReactNode
+}
+
+interface AsyncSuspenseProps {
+  type: 'component' | 'page'
+  chunkName: string
+  moduleId: string
+  innerProps: any
+  loading: ComponentType<unknown>
+  fallback: ComponentType<unknown>
+  getChildren: () => Promise<AsyncModule>
+}
+
+export function getAsyncSuspense(props: AsyncSuspenseProps): ReactNode

package/lib/runtime/optionProcessorReact.js

@@ -1,6 +1,36 @@
+import AsyncSuspense from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-async-suspense'
+import { memo, forwardRef, createElement } from 'react'
+import { extend } from './utils'
+
 export function getComponent (component, extendOptions) {
   component = component.__esModule ? component.default : component
   // eslint-disable-next-line
   if (extendOptions) Object.assign(component, extendOptions)
   return component
 }
+
+export function getAsyncSuspense (commonProps) {
+  if (commonProps.type === 'component') {
+    return memo(forwardRef(function (props, ref) {
+      return createElement(AsyncSuspense,
+        extend(commonProps, {
+          innerProps: Object.assign({}, props, { ref })
+        })
+      )
+    }))
+  } else {
+    return function (props) {
+      return createElement(AsyncSuspense,
+        extend(commonProps, {
+          innerProps: props
+        })
+      )
+    }
+  }
+}
+
+export function getLazyPage (getComponent) {
+  return function (props) {
+    return createElement(getComponent(), props)
+  }
+}

package/lib/script-setup-compiler/index.js

@@ -1,5 +1,6 @@
 const babylon = require('@babel/parser')
 const MagicString = require('magic-string')
+const { SourceMapConsumer, SourceMapGenerator } = require('source-map')
 const traverse = require('@babel/traverse').default
 const t = require('@babel/types')
 const formatCodeFrame = require('@babel/code-frame')
@@ -625,7 +626,12 @@ function compileScriptSetup (
   _s.appendRight(endOffset, '})')
 
   return {
-    content: _s.toString()
+    content: _s.toString(),
+    map: _s.generateMap({
+      source: filePath,
+      hires: true,
+      includeContent: true
+    })
   }
 }
 
@@ -1165,14 +1171,30 @@ function getCtor (ctorType) {
   return ctor
 }
 
-module.exports = function (content) {
+module.exports = async function (content, sourceMap) {
   const { queryObj } = parseRequest(this.resource)
   const { ctorType, lang } = queryObj
   const filePath = this.resourcePath
-  const { content: callbackContent } = compileScriptSetup({
+  const callback = this.async()
+  let finalSourceMap = null
+  const {
+    content: callbackContent,
+    map
+  } = compileScriptSetup({
     content,
     lang
   }, ctorType, filePath)
-
-  this.callback(null, callbackContent)
+  finalSourceMap = map
+  if (sourceMap) {
+    const compiledMapConsumer = await new SourceMapConsumer(map)
+    const compiledMapGenerator = SourceMapGenerator.fromSourceMap(compiledMapConsumer)
+
+    const originalConsumer = await new SourceMapConsumer(sourceMap)
+    compiledMapGenerator.applySourceMap(
+      originalConsumer,
+      filePath // 需要确保与原始映射的source路径一致
+    )
+    finalSourceMap = compiledMapGenerator.toJSON()
+  }
+  callback(null, callbackContent, finalSourceMap)
 }

package/lib/template-compiler/compiler.js

@@ -38,7 +38,7 @@ const endTag = new RegExp(('^<\\/' + qnameCapture + '[^>]*>'))
 const doctype = /^<!DOCTYPE [^>]+>/i
 const comment = /^<!--/
 const conditionalComment = /^<!\[/
-const specialClassReg = /^mpx-((cover-)?view|button|navigator|picker-view|input|textarea)$/
+const specialClassReg = /^mpx-((cover-)?view|button|navigator|picker-view|input|textarea|page-container)$/
 let IS_REGEX_CAPTURING_BROKEN = false
 'x'.replace(/x(.)?/g, function (m, g) {
   IS_REGEX_CAPTURING_BROKEN = g === ''
@@ -180,7 +180,7 @@ const i18nModuleName = '_i'
 const stringifyWxsPath = '~' + normalize.lib('runtime/stringify.wxs')
 const stringifyModuleName = '_s'
 const optionalChainWxsPath = '~' + normalize.lib('runtime/oc.wxs')
-const optionalChainWxsName = '_o'
+const optionalChainWxsName = '_oc' // 改成_oc解决web下_o重名问题
 
 const tagRES = /(\{\{(?:.|\n|\r)+?\}\})(?!})/
 const tagRE = /\{\{((?:.|\n|\r)+?)\}\}(?!})/
@@ -581,7 +581,8 @@ function parseComponent (content, options) {
       let text = content.slice(currentBlock.start, currentBlock.end)
       // pad content so that linters and pre-processors can output correct
       // line numbers in errors and warnings
-      if (options.pad) {
+      // stylus编译遇到大量空行时会出现栈溢出，故针对stylus不走pad
+      if (options.pad && !(currentBlock.tag === 'style' && currentBlock.lang === 'stylus')) {
         text = padContent(currentBlock, options.pad) + text
       }
       currentBlock.content = text
@@ -1110,8 +1111,28 @@ function processStyleReact (el, options) {
     }])
   }
 
-  if (specialClassReg.test(el.tag)) {
-    const staticClassNames = ['hover', 'indicator', 'mask', 'placeholder']
+  // 原生组件支持 xx-class 与 xx-style（xx-class 将会被合并到 xx-style 中）
+  const match = el.tag.match(specialClassReg)
+  if (match) {
+    let staticClassNames
+    switch (el.tag) {
+      case 'mpx-view':
+      case 'mpx-cover-view':
+      case 'mpx-button':
+      case 'mpx-navigator':
+        staticClassNames = ['hover']
+        break
+      case 'mpx-page-container':
+        staticClassNames = ['custom', 'overlay']
+        break
+      case 'mpx-input':
+      case 'mpx-textarea':
+        staticClassNames = ['placeholder']
+        break
+      case 'mpx-picker-view':
+        staticClassNames = ['mask', 'indicator']
+        break
+    }
     staticClassNames.forEach((className) => {
       let staticClass = el.attrsMap[className + '-class'] || ''
       let staticStyle = getAndRemoveAttr(el, className + '-style').val || ''
@@ -2002,7 +2023,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)}, ${el.for.index || 'index'})`, false, 'key')
+      addExp(el, `this.__getWxKey(${el.for.item || 'item'}, ${stringify(el.for.key === '_' ? 'index' : el.for.key)}, ${el.for.index || 'index'})`, false, 'key')
       addAttrs(el, [{
         name: 'key',
         value: el.for.key

package/lib/utils/dom-tag-config.js

@@ -72,13 +72,26 @@ const isNativeMiniTag = makeMap(
  * 是否为mpx内置组件
  * collected from packages/webpack-plugin/lib/runtime/components/web/
  */
-const isBuildInTag = makeMap(
+const isBuildInWebTag = makeMap(
   'mpx-image,mpx-picker-view,mpx-slider,mpx-textarea,mpx-input,mpx-picker,' +
   'mpx-swiper-item,mpx-video,mpx-button,mpx-keep-alive,mpx-progress,' +
   'mpx-swiper,mpx-view,mpx-checkbox-group,mpx-movable-area,mpx-radio-group,' +
   'mpx-switch,mpx-web-view,mpx-checkbox,mpx-movable-view,mpx-radio,' +
   'mpx-tab-bar-container,mpx-form,mpx-navigator,mpx-rich-text,mpx-tab-bar,' +
-  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text'
+  'mpx-icon,mpx-picker-view-column,mpx-scroll-view,mpx-text,mpx-page-container'
+)
+
+/**
+ * 是否为mpx2rn内置组件
+ */
+const isBuildInReactTag = makeMap(
+  'mpx-web-view,mpx-view,mpx-video,mpx-textarea,mpx-text,mpx-switch,' +
+  'mpx-swiper,mpx-swiper-item,mpx-simple-view,mpx-simple-text,mpx-scroll-view,' +
+  'mpx-root-portal,mpx-radio,mpx-radio-group,mpx-navigator,mpx-movable-view,' +
+  'mpx-movable-area,mpx-label,mpx-keyboard-avoiding-view,mpx-input,mpx-inline-text,' +
+  'mpx-image,mpx-form,mpx-checkbox,mpx-checkbox-group,mpx-button,' +
+  'mpx-rich-text,mpx-portal,mpx-popup,mpx-picker-view-column,mpx-picker-view,mpx-picker,' +
+  'mpx-icon,mpx-canvas'
 )
 
 const isSpace = makeMap('ensp,emsp,nbsp')
@@ -105,11 +118,12 @@ module.exports = {
   isVoidTag,
   isNonPhrasingTag,
   isRichTextTag,
-  isBuildInTag,
+  isBuildInWebTag,
   isUnaryTag,
   isSpace,
   isContWidth,
   isContHeight,
   isNativeMiniTag,
-  isContConRow
+  isContConRow,
+  isBuildInReactTag
 }

package/lib/utils/trans-async-sub-rules.js

@@ -0,0 +1,19 @@
+function transSubpackage (asyncSubpackageNameRules, tarRoot) {
+  // 如果没有tarRoot，则无需进行tarRoot的修改，因此
+  if (tarRoot && Array.isArray(asyncSubpackageNameRules) && asyncSubpackageNameRules.length >= 1) {
+    for (const item of asyncSubpackageNameRules) {
+      if (item?.from) {
+        const fromPaths = Array.isArray(item.from) ? item.from : [item.from]
+        if (fromPaths.includes(tarRoot)) {
+          tarRoot = item.to
+          break
+        }
+      }
+    }
+  }
+  return tarRoot
+}
+
+module.exports = {
+  transSubpackage
+}

package/lib/web/script-helper.js

@@ -13,7 +13,7 @@ function stringifyRequest (loaderContext, request) {
 
 function getAsyncChunkName (chunkName) {
   if (chunkName && typeof chunkName !== 'boolean') {
-    return `/* webpackChunkName: "${chunkName}" */`
+    return `/* webpackChunkName: "${chunkName}/index" */`
   }
   return ''
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.7-beta.9",
+  "version": "2.10.8-beta.1",
   "description": "mpx compile core",
   "keywords": [
     "mpx"
@@ -28,7 +28,7 @@
     "@better-scroll/wheel": "^2.5.1",
     "@better-scroll/zoom": "^2.5.1",
     "@mpxjs/template-engine": "^2.8.7",
-    "@mpxjs/utils": "^2.10.6 | ^2.10.6-beta.1",
+    "@mpxjs/utils": "^2.10.8",
     "acorn": "^8.11.3",
     "acorn-walk": "^7.2.0",
     "async": "^2.6.0",
@@ -83,7 +83,7 @@
   },
   "devDependencies": {
     "@d11/react-native-fast-image": "^8.6.12",
-    "@mpxjs/api-proxy": "^2.10.7 | ^2.10.7-beta.1",
+    "@mpxjs/api-proxy": "^2.10.8",
     "@types/babel-traverse": "^6.25.4",
     "@types/babel-types": "^7.0.4",
     "@types/react": "^18.2.79",

package/lib/runtime/components/react/AsyncContainer.tsx

@@ -1,189 +0,0 @@
-import { ComponentType, ReactNode, Component, Fragment, Suspense } from 'react'
-import { View, Text, Image, StyleSheet, TouchableOpacity } from 'react-native'
-import FastImage from '@d11/react-native-fast-image'
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 20,
-    backgroundColor: '#fff'
-  },
-  loadingImage: {
-    width: 100,
-    height: 100,
-    marginTop: 220,
-    alignSelf: 'center'
-  },
-  buttonText: {
-    color: '#fff',
-    fontSize: 16,
-    fontWeight: '500',
-    textAlign: 'center'
-  },
-  errorImage: {
-    marginTop: 80,
-    width: 220,
-    aspectRatio: 1,
-    alignSelf: 'center'
-  },
-  errorText: {
-    fontSize: 16,
-    textAlign: 'center',
-    color: '#333',
-    marginBottom: 20
-  },
-  retryButton: {
-    position: 'absolute',
-    bottom: 54,
-    left: 20,
-    right: 20,
-    backgroundColor: '#fff',
-    paddingVertical: 15,
-    borderRadius: 30,
-    marginTop: 40,
-    borderWidth: 1,
-    borderColor: '#FF5F00'
-  },
-  retryButtonText: {
-    color: '#FF5F00',
-    fontSize: 16,
-    fontWeight: '500',
-    textAlign: 'center'
-  }
-})
-
-type AsyncType = 'page' | 'component'
-
-interface PropsType<T extends AsyncType> {
-  type: T
-  props: object
-  loading: ComponentType<unknown>
-  fallback: ComponentType<unknown>
-  children: (props: unknown) => ReactNode
-}
-
-interface StateType {
-  hasError: boolean,
-  key: number
-}
-
-interface ComponentError extends Error {
-  request?: string
-  type: 'timeout' | 'fail'
-}
-
-const DefaultLoading = () => {
-  return (
-    <View style={styles.container}>
-      <FastImage
-        style={styles.loadingImage}
-        source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/439jiCVOtNOnEv9F2LaDs_loading.gif' }}
-        resizeMode={FastImage.resizeMode.contain}></FastImage>
-    </View>
-  )
-}
-
-interface DefaultFallbackProps {
-  onReload: () => void
-}
-
-const DefaultFallback = ({ onReload }: DefaultFallbackProps) => {
-  return (
-    <View style={styles.container}>
-      <Image
-        source={{ uri: 'https://dpubstatic.udache.com/static/dpubimg/Vak5mZvezPpKV5ZJI6P9b_drn-fallbak.png' }}
-        style={styles.errorImage}
-        resizeMode="contain"
-      />
-      <Text style={styles.errorText}>网络出了点问题，请查看网络环境</Text>
-      <TouchableOpacity
-        style={styles.retryButton}
-        onPress={onReload}
-        activeOpacity={0.7}
-      >
-        <Text style={styles.retryButtonText}>点击重试</Text>
-      </TouchableOpacity>
-    </View>
-  )
-}
-
-export default class AsyncContainer extends Component<PropsType<AsyncType>, StateType> {
-  private suspenseFallback: ReactNode
-  private errorFallback: ReactNode
-
-  constructor (props: PropsType<AsyncType>) {
-    super(props)
-    this.state = {
-      hasError: false,
-      key: 0
-    }
-    this.suspenseFallback = this.getSuspenseFallback()
-    this.errorFallback = this.getErrorFallback()
-  }
-
-  // render 阶段收集到的错误
-  static getDerivedStateFromError (error: ComponentError): StateType | undefined {
-    if (error.name === 'ChunkLoadError') {
-      return {
-        hasError: true,
-        key: 0
-      }
-    } else {
-      // 被外层捕获
-      throw error
-    }
-  }
-
-  componentDidCatch (error: ComponentError): void {
-    if (error.name === 'ChunkLoadError' && this.props.type === 'component') {
-      const request = error.request || ''
-      const subpackage = request.split('/').filter((i: string) => !!i)[0]
-      global.onLazyLoadError({
-        type: 'subpackage',
-        subpackage: [subpackage],
-        errMsg: `loadSubpackage: ${error.type}`
-      })
-    }
-  }
-
-  reloadPage () {
-    this.setState((prevState) => {
-      return {
-        hasError: false,
-        key: prevState.key + 1
-      }
-    })
-  }
-
-  getSuspenseFallback () {
-    if (this.props.type === 'page') {
-      const Fallback = this.props.loading || DefaultLoading
-      return <Fallback />
-    } else {
-      const Fallback = this.props.loading
-      return <Fallback {...this.props.props}></Fallback>
-    }
-  }
-
-  getErrorFallback () {
-    if (this.props.type === 'page') {
-      const Fallback = this.props.fallback as ComponentType<DefaultFallbackProps> || DefaultFallback
-      return <Fallback onReload={this.reloadPage.bind(this)}></Fallback>
-    } else {
-      const Fallback = this.props.loading
-      return <Fallback {...this.props.props}></Fallback>
-    }
-  }
-
-  render () {
-    if (this.state.hasError) {
-      return this.errorFallback
-    } else {
-      return (
-        <Suspense fallback={this.suspenseFallback} key={this.state.key}>
-          {this.props.children(this.props.props)}
-        </Suspense>
-      )
-    }
-  }
-}