@mpxjs/webpack-plugin 2.10.6 → 2.10.7-beta.10

package/lib/dependencies/RecordPageConfigsMapDependency.js

@@ -29,7 +29,7 @@ class RecordPageConfigMapDependency extends NullDependency {
 
   deserialize (context) {
     const { read } = context
-    this.pagePath = read()
+    this.resourcePath = read()
     this.jsonObj = read()
     super.deserialize(context)
   }

package/lib/index.js

@@ -1815,72 +1815,92 @@ try {
       normalModuleFactory.hooks.afterResolve.tap('MpxWebpackPlugin', ({ createData }) => {
         const { queryObj } = parseRequest(createData.request)
         const loaders = createData.loaders
-        if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
-          const type = queryObj.type
+        const type = queryObj.type
+        const mpxProcessFlag = queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG
+        const vueProcessFlag = queryObj.vue && queryObj.mpx !== MPX_PROCESSED_FLAG
+        if (mpxProcessFlag || vueProcessFlag) {
           const extract = queryObj.extract
-
-          if (type === 'styles') {
-            let insertBeforeIndex = -1
-            // 单次遍历收集所有索引
+          if (type === 'styles' || type === 'style') {
+            const loaderTypes = {
+              'node_modules/stylus-loader': -1,
+              'node_modules/sass-loader': -1,
+              'node_modules/less-loader': -1,
+              'node_modules/css-loader': -1
+            }
             loaders.forEach((loader, index) => {
               const currentLoader = toPosix(loader.loader)
-              if (currentLoader.includes('node_modules/stylus-loader') || currentLoader.includes('node_modules/sass-loader') || currentLoader.includes('node_modules/less-loader')) {
-                insertBeforeIndex = index
+              for (const key in loaderTypes) {
+                if (currentLoader.includes(key)) {
+                  loaderTypes[key] = index
+                  break
+                }
               }
             })
+            const insertStripLoaders = (index) => {
+              if (index !== -1) {
+                loaders.splice(index, 0, { loader: styleStripConditionalPath, options: {id: 0} })
+                loaders.splice(index + 2, 0, { loader: styleStripConditionalPath, options: {id: 1} })
+                return true
+              }
+              return false
+            }
 
-            if (insertBeforeIndex !== -1) {
-              loaders.splice(insertBeforeIndex, 0, { loader: styleStripConditionalPath })
+            const priorities = ['node_modules/stylus-loader', 'node_modules/less-loader', 'node_modules/sass-loader', 'node_modules/css-loader']
+            for (const loaderKey of priorities) {
+              if (insertStripLoaders(loaderTypes[loaderKey])) {
+                break
+              }
             }
-            loaders.push({ loader: styleStripConditionalPath })
           }
 
-          switch (type) {
-            case 'styles':
-            case 'template': {
-              let insertBeforeIndex = -1
-              const info = typeLoaderProcessInfo[type]
-              loaders.forEach((loader, index) => {
-                const currentLoader = toPosix(loader.loader)
-                if (currentLoader.includes(info[0])) {
-                  loader.loader = info[1]
-                  insertBeforeIndex = index
-                } else if (currentLoader.includes(info[1])) {
-                  insertBeforeIndex = index
-                }
-              })
-              if (insertBeforeIndex > -1) {
-                loaders.splice(insertBeforeIndex + 1, 0, {
-                  loader: info[2]
+          if (mpxProcessFlag) {
+            switch (type) {
+              case 'styles':
+              case 'template': {
+                let insertBeforeIndex = -1
+                const info = typeLoaderProcessInfo[type]
+                loaders.forEach((loader, index) => {
+                  const currentLoader = toPosix(loader.loader)
+                  if (currentLoader.includes(info[0])) {
+                    loader.loader = info[1]
+                    insertBeforeIndex = index
+                  } else if (currentLoader.includes(info[1])) {
+                    insertBeforeIndex = index
+                  }
                 })
+                if (insertBeforeIndex > -1) {
+                  loaders.splice(insertBeforeIndex + 1, 0, {
+                    loader: info[2]
+                  })
+                }
+                break
               }
-              break
-            }
-            case 'json':
-              if (queryObj.isTheme) {
-                loaders.unshift({
-                  loader: jsonThemeCompilerPath
-                })
-              } else if (queryObj.isPlugin) {
-                loaders.unshift({
-                  loader: jsonPluginCompilerPath
-                })
-              } else {
+              case 'json':
+                if (queryObj.isTheme) {
+                  loaders.unshift({
+                    loader: jsonThemeCompilerPath
+                  })
+                } else if (queryObj.isPlugin) {
+                  loaders.unshift({
+                    loader: jsonPluginCompilerPath
+                  })
+                } else {
+                  loaders.unshift({
+                    loader: jsonCompilerPath
+                  })
+                }
+                break
+              case 'wxs':
                 loaders.unshift({
-                  loader: jsonCompilerPath
+                  loader: wxsLoaderPath
                 })
-              }
-              break
-            case 'wxs':
+                break
+            }
+            if (extract) {
               loaders.unshift({
-                loader: wxsLoaderPath
+                loader: extractorPath
               })
-              break
-          }
-          if (extract) {
-            loaders.unshift({
-              loader: extractorPath
-            })
+            }
           }
           createData.resource = addQuery(createData.resource, { mpx: MPX_PROCESSED_FLAG }, true)
         }

package/lib/parser.js

@@ -14,7 +14,7 @@ module.exports = (content, { filePath, needMap, mode, env }) => {
   output = compiler.parseComponent(content, {
     mode,
     filePath,
-    // pad: 'line', // stylus编译遇到大量空行时会出现栈溢出，故注释掉
+    pad: 'line',
     env
   })
   if (needMap) {

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

@@ -285,6 +285,13 @@ module.exports = function getSpec ({ warn, error }) {
 
   // line-height
   const formatLineHeight = ({ prop, value, selector }) => {
+    // line-height 0 直接返回
+    if (+value === 0) {
+      return {
+        prop,
+        value
+      }
+    }
     return verifyValues({ prop, value, selector }) && ({
       prop,
       value: /^\s*(-?(\d+(\.\d+)?|\.\d+))\s*$/.test(value) ? `${Math.round(value * 100)}%` : value

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
       },
       {

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

@@ -2,9 +2,6 @@ const TAG_NAME = 'movable-view'
 
 module.exports = function ({ print }) {
   const aliEventLog = print({ platform: 'ali', tag: TAG_NAME, isError: false, type: 'event' })
-  const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
-  const harmonyEventLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'event' })
-  const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
@@ -36,7 +33,7 @@ module.exports = function ({ print }) {
         harmony: harmonyPropLog
       },
       {
-        test: /^(damping|friction|scale|scale-min|scale-max|scale-value)$/,
+        test: /^(damping|friction)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog
@@ -46,12 +43,6 @@ module.exports = function ({ print }) {
       {
         test: /^(htouchmove|vtouchmove)$/,
         ali: aliEventLog
-      },
-      {
-        test: /^(bindscale)$/,
-        ios: iosEventLog,
-        android: androidEventLog,
-        harmony: harmonyEventLog
       }
     ]
   }

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/react/processJSON.js

@@ -113,8 +113,9 @@ module.exports = function (jsonContent, {
   }
 
   if (ctorType === 'page') {
-    const keysToExtract = ['navigationStyle']
+    const keysToExtract = ['navigationStyle', 'navigationBarTitleText', 'navigationBarTextStyle', 'navigationBarBackgroundColor']
     const configObj = {}
+    // 暂时先不注入数据，后续如需要使用再用
     keysToExtract.forEach(key => {
       if (jsonObj[key]) {
         configObj[key] = jsonObj[key]

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

@@ -0,0 +1,189 @@
+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>
+      )
+    }
+  }
+}

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,15 +43,31 @@ export interface PortalContextValue {
 }
 
 export interface ScrollViewContextValue {
-   gestureRef: React.RefObject<any> | null
+  gestureRef: React.RefObject<any> | null,
+  scrollOffset: Animated.Value
 }
 
 export interface RouteContextValue {
   pageId: number
   navigation: Record<string, any>
 }
+export interface MovableAreaContextValue {
+  width: number
+  height: number
+  scaleArea: boolean
+  onAreaScale?: (scaleInfo: { scale: number }) => void
+  registerMovableView?: (id: string, callbacks: {
+    onScale: (scaleInfo: { scale: number }) => void
+    onScaleEnd?: () => void
+  }) => void
+  unregisterMovableView?: (id: string) => void
+}
 
-export const MovableAreaContext = createContext({ width: 0, height: 0 })
+export const MovableAreaContext = createContext<MovableAreaContextValue>({ width: 0, height: 0, scaleArea: false })
+export interface StickyContextValue {
+  registerStickyHeader: Function,
+  unregisterStickyHeader: Function
+}
 
 export const FormContext = createContext<FormContextValue | null>(null)
 
@@ -72,6 +89,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 })