@mpxjs/webpack-plugin 2.10.5 → 2.10.6-beta.2

package/lib/dependencies/WriteVfsDependency.js

@@ -0,0 +1,46 @@
+const NullDependency = require('webpack/lib/dependencies/NullDependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+
+class WriteVfsDependency extends NullDependency {
+  constructor (filename, content) {
+    super()
+    this.filename = filename
+    this.content = content
+  }
+
+  get type () {
+    return 'mpx app entry'
+  }
+
+  mpxAction (module, compilation, callback) {
+    const mpx = compilation.__mpx__
+    const vfs = mpx.__vfs
+    if (vfs) {
+      vfs.writeModule(this.filename, this.content)
+    }
+    return callback()
+  }
+
+  serialize (context) {
+    const { write } = context
+    write(this.filename)
+    write(this.content)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    const { read } = context
+    this.filename = read()
+    this.content = read()
+    super.deserialize(context)
+  }
+}
+
+WriteVfsDependency.Template = class WriteVfsDependencyTemplate {
+  apply () {
+  }
+}
+
+makeSerializable(WriteVfsDependency, '@mpxjs/webpack-plugin/lib/dependencies/WriteVfsDependency')
+
+module.exports = WriteVfsDependency

package/lib/index.js

@@ -17,6 +17,7 @@ const FileSystemInfo = require('webpack/lib/FileSystemInfo')
 const ImportDependency = require('webpack/lib/dependencies/ImportDependency')
 const ImportDependencyTemplate = require('./dependencies/ImportDependencyTemplate')
 const AsyncDependenciesBlock = require('webpack/lib/AsyncDependenciesBlock')
+const ProvidePlugin = require('webpack/lib/ProvidePlugin')
 const normalize = require('./utils/normalize')
 const toPosix = require('./utils/to-posix')
 const addQuery = require('./utils/add-query')
@@ -43,6 +44,7 @@ const FlagPluginDependency = require('./dependencies/FlagPluginDependency')
 const RemoveEntryDependency = require('./dependencies/RemoveEntryDependency')
 const RecordLoaderContentDependency = require('./dependencies/RecordLoaderContentDependency')
 const RecordRuntimeInfoDependency = require('./dependencies/RecordRuntimeInfoDependency')
+const WriteVfsDependency = require('./dependencies/WriteVfsDependency')
 const SplitChunksPlugin = require('webpack/lib/optimize/SplitChunksPlugin')
 const fixRelative = require('./utils/fix-relative')
 const parseRequest = require('./utils/parse-request')
@@ -60,6 +62,7 @@ const templateCompilerPath = normalize.lib('template-compiler/index')
 const jsonCompilerPath = normalize.lib('json-compiler/index')
 const jsonThemeCompilerPath = normalize.lib('json-compiler/theme')
 const jsonPluginCompilerPath = normalize.lib('json-compiler/plugin')
+const mpxGlobalRuntimePath = normalize.lib('runtime/mpxGlobal')
 const extractorPath = normalize.lib('extractor')
 const async = require('async')
 const { parseQuery } = require('loader-utils')
@@ -177,6 +180,7 @@ class MpxWebpackPlugin {
     options.forceProxyEventRules = options.forceProxyEventRules || {}
     options.disableRequireAsync = options.disableRequireAsync || false
     options.miniNpmPackages = options.miniNpmPackages || []
+    options.normalNpmPackages = options.normalNpmPackages || []
     options.fileConditionRules = options.fileConditionRules || {
       include: () => true
     }
@@ -325,6 +329,12 @@ class MpxWebpackPlugin {
       }
     }
 
+    compiler.options.plugins.push(new ProvidePlugin(
+      {
+        mpxGlobal: mpxGlobalRuntimePath
+      }
+    ))
+
     if (!isWeb(this.options.mode) && !isReact(this.options.mode)) {
       // 强制设置publicPath为'/'
       if (compiler.options.output.publicPath && compiler.options.output.publicPath !== publicPath) {
@@ -364,7 +374,7 @@ class MpxWebpackPlugin {
     }
     const addModePlugin = new AddModePlugin('before-file', this.options.mode, addModeOptions, 'file')
     const addEnvPlugin = new AddEnvPlugin('before-file', this.options.env, this.options.fileConditionRules, 'file')
-    const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, 'file')
+    const packageEntryPlugin = new PackageEntryPlugin('before-file', this.options.miniNpmPackages, this.options.normalNpmPackages, 'file')
     const dynamicPlugin = new DynamicPlugin('result', this.options.dynamicComponentRules)
 
     if (Array.isArray(compiler.options.resolve.plugins)) {
@@ -645,6 +655,9 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RecordRuntimeInfoDependency, new NullFactory())
       compilation.dependencyTemplates.set(RecordRuntimeInfoDependency, new RecordRuntimeInfoDependency.Template())
 
+      compilation.dependencyFactories.set(WriteVfsDependency, new NullFactory())
+      compilation.dependencyTemplates.set(WriteVfsDependency, new WriteVfsDependency.Template())
+
       compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
     })
 
@@ -668,6 +681,8 @@ class MpxWebpackPlugin {
           componentsMap: {
             main: {}
           },
+          // 用于template模版获取父组件引用的自定义组件，目前仅输出web时下支持使用
+          parentLocalComponentsMap: {},
           // 静态资源(图片，字体，独立样式)等，依照所属包进行记录
           staticResourcesMap: {
             main: {}
@@ -1806,11 +1821,9 @@ 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 extract = queryObj.extract
-
-          if (type === 'styles') {
+        const type = queryObj.type
+        if ((queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) || queryObj.vue) {
+          if (type === 'styles' || type === 'style') {
             let insertBeforeIndex = -1
             // 单次遍历收集所有索引
             loaders.forEach((loader, index) => {
@@ -1825,7 +1838,10 @@ try {
             }
             loaders.push({ loader: styleStripConditionalPath })
           }
+        }
 
+        if (queryObj.mpx && queryObj.mpx !== MPX_PROCESSED_FLAG) {
+          const extract = queryObj.extract
           switch (type) {
             case 'styles':
             case 'template': {

package/lib/json-compiler/helper.js

@@ -77,12 +77,9 @@ module.exports = function createJSONHelper ({ loaderContext, emitWarning, custom
 
       if (!outputPath) {
         if (isScript(ext) && resourceName.includes('node_modules') && !isWeb(mode) && !isReact(mode)) {
-          let root = info.descriptionFileRoot
+          const root = info.descriptionFileRoot
           let name = 'nativeComponent'
           if (info.descriptionFileData) {
-            if (info.descriptionFileData.miniprogram) {
-              root = path.join(root, info.descriptionFileData.miniprogram)
-            }
             if (info.descriptionFileData.name) {
               // 去掉name里面的@符号，因为支付宝不支持文件路径上有@
               name = info.descriptionFileData.name.replace(/@/g, '')

package/lib/platform/index.js

@@ -9,6 +9,7 @@ module.exports = function getRulesRunner ({
   testKey,
   mainKey,
   waterfall,
+  moduleId,
   warn,
   error
 }) {
@@ -23,13 +24,14 @@ module.exports = function getRulesRunner ({
       wx: require('./json/wx')
     }
   }
-  const spec = specMap[type] && specMap[type][srcMode] && specMap[type][srcMode]({ warn, error })
+  const spec = specMap[type] && specMap[type][srcMode] && specMap[type][srcMode]({ warn, error, moduleId })
   if (spec && spec.supportedModes.indexOf(mode) > -1) {
     const normalizeTest = spec.normalizeTest
     const mainRules = mainKey ? spec[mainKey] : spec
     if (mainRules) {
       return function (input) {
-        return runRules(mainRules, input, { mode, data, meta, testKey, waterfall, normalizeTest })
+        const a = runRules(mainRules, input, { mode, data, meta, testKey, waterfall, normalizeTest })
+        return a
       }
     }
   }

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/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,8 +42,10 @@ 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 }) {
+module.exports = function getComponentConfigs ({ warn, error, moduleId }) {
   /**
    * universal print for detail component warn or error
    * @param {object} config
@@ -114,7 +116,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     map({ print }),
     canvas({ print }),
     wxs({ print }),
-    template(),
+    template({ moduleId }),
     block(),
     icon(),
     webView({ print }),
@@ -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/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/template.js

@@ -1,8 +1,13 @@
 const TAG_NAME = 'template'
 
-module.exports = function () {
+module.exports = function ({ moduleId }) {
   return {
     test: TAG_NAME,
+    web (tag, { el }) {
+      if (el.attrsMap[':is']) {
+        return 'component'
+      }
+    },
     props: [
       {
         test: 'data',
@@ -11,6 +16,26 @@ module.exports = function () {
             name,
             value: `{${value}}`
           }
+        },
+        web ({ value }) {
+          let bindValue = value
+          if (moduleId) {
+            const lastIndex = value.lastIndexOf('}}')
+            bindValue = value ? value.slice(0, lastIndex) + `, _data_v_id: '${moduleId}'}}` : `{{ _data_v_id: '${moduleId}' }}`
+          }
+          return {
+            name: 'v-bind',
+            value: bindValue
+          }
+        }
+      },
+      {
+        test: 'is',
+        web ({ value }) {
+          return {
+            name: ':is',
+            value: `'${value}'`
+          }
         }
       }
     ]

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

@@ -3,11 +3,11 @@ const JSON5 = require('json5')
 const getComponentConfigs = require('./component-config')
 const normalizeComponentRules = require('../normalize-component-rules')
 const isValidIdentifierStr = require('../../../utils/is-valid-identifier-str')
-const { parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
+const { vbindMustache, parseMustacheWithContext, stringifyWithResolveComputed } = require('../../../template-compiler/compiler')
 const normalize = require('../../../utils/normalize')
 const { dash2hump } = require('../../../utils/hump-dash')
 
-module.exports = function getSpec ({ warn, error }) {
+module.exports = function getSpec ({ warn, error, moduleId }) {
   function getRnDirectiveEventHandle (mode) {
     return function ({ name, value }, { eventRules, el }) {
       const match = this.test.exec(name)
@@ -43,6 +43,23 @@ module.exports = function getSpec ({ warn, error }) {
     }
   }
 
+  function rnAccessibilityRulesHandle ({ name, value }) {
+    if (name === 'aria-role') {
+      return [
+        {
+          name: 'accessible',
+          value: true
+        },
+        {
+          name: 'accessibilityRole',
+          value: value
+        }
+      ]
+    } else {
+      return { name, value }
+    }
+  }
+
   const spec = {
     supportedModes: ['ali', 'swan', 'qq', 'tt', 'web', 'qa', 'jd', 'dd', 'ios', 'android', 'harmony'],
     // props预处理
@@ -51,6 +68,13 @@ module.exports = function getSpec ({ warn, error }) {
     postProps: [
       {
         web ({ name, value }) {
+          if (name === 'v-bind') {
+            const vbindValue = vbindMustache(value)
+            return {
+              name,
+              value: vbindValue
+            }
+          }
           const parsed = parseMustacheWithContext(value)
           if (name.startsWith('data-')) {
             return {
@@ -433,7 +457,10 @@ module.exports = function getSpec ({ warn, error }) {
         test: /^aria-(role|label)$/,
         ali () {
           warn('Ali environment does not support aria-role|label props!')
-        }
+        },
+        ios: rnAccessibilityRulesHandle,
+        android: rnAccessibilityRulesHandle,
+        harmony: rnAccessibilityRulesHandle
       }
     ],
     event: {
@@ -547,6 +574,6 @@ module.exports = function getSpec ({ warn, error }) {
       ]
     }
   }
-  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error }).concat({}), spec)
+  spec.rules = normalizeComponentRules(getComponentConfigs({ warn, error, moduleId }).concat({}), spec)
   return spec
 }

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/resolver/PackageEntryPlugin.js

@@ -2,10 +2,11 @@ const path = require('path')
 const toPosix = require('../utils/to-posix')
 
 module.exports = class PackageEntryPlugin {
-  constructor (source, miniNpmPackages, target) {
+  constructor (source, miniNpmPackages, normalNpmPackages, target) {
     this.source = source
     this.target = target
     this.miniNpmPackages = miniNpmPackages
+    this.normalNpmPackages = normalNpmPackages
   }
 
   /**
@@ -23,6 +24,7 @@ module.exports = class PackageEntryPlugin {
 
       let { name, miniprogram } = descriptionFileData
       if (!miniprogram && this.miniNpmPackages.includes(name)) miniprogram = 'miniprogram_dist'
+      if (this.normalNpmPackages.includes(name)) return callback()
       if (!miniprogram) return callback()
 
       let relativePath = path.relative(descriptionFileRoot, resourcePath)

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/mpx-button.jsx

@@ -35,13 +35,14 @@
  * ✔ bindtap
  */
 import { createElement, useEffect, useRef, forwardRef, useContext } from 'react';
-import { View, StyleSheet, Animated, Easing } from 'react-native';
+import { View, StyleSheet, Animated, Easing, useAnimatedValue } from 'react-native';
 import { warn } from '@mpxjs/utils';
 import { GestureDetector } from 'react-native-gesture-handler';
 import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren, extendObject, useHover } from './utils';
 import useInnerProps, { getCustomEvent } from './getInnerListeners';
 import useNodesRef from './useNodesRef';
 import { RouteContext, FormContext } from './context';
+import Portal from './mpx-portal';
 const LOADING_IMAGE_URI = 'data:image/png;base64,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';
 const TypeColorMap = {
     default: ['#F8F8F8', '#DEDEDE', '35,35,35', '#F7F7F7'],
@@ -103,7 +104,7 @@ const timer = (data, time = 3000) => new Promise((resolve) => {
     }, time);
 });
 const Loading = ({ alone = false }) => {
-    const image = useRef(new Animated.Value(0)).current;
+    const image = useAnimatedValue(0);
     const rotate = image.interpolate({
         inputRange: [0, 1],
         outputRange: ['0deg', '360deg']
@@ -167,7 +168,7 @@ const Button = forwardRef((buttonProps, ref) => {
     const defaultTextStyle = extendObject({}, styles.text, isMiniSize ? styles.textMini : {}, { color: plain ? plainTextColor : normalTextColor });
     const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle);
     const styleObj = extendObject({}, defaultStyle, style, isHover ? hoverStyle : {});
-    const { hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
+    const { hasPositionFixed, hasSelfPercent, normalStyle, hasVarDec, varContextRef, setWidth, setHeight } = useTransformStyle(styleObj, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight });
     const nodeRef = useRef(null);
     useNodesRef(props, ref, nodeRef, { style: normalStyle });
     const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef });
@@ -262,9 +263,13 @@ const Button = forwardRef((buttonProps, ref) => {
         textStyle,
         textProps
     }));
-    return enableHover
+    const finalComponent = enableHover
         ? createElement(GestureDetector, { gesture: gesture }, baseButton)
         : baseButton;
+    if (hasPositionFixed) {
+        return createElement(Portal, null, finalComponent);
+    }
+    return finalComponent;
 });
 Button.displayName = 'MpxButton';
 export default Button;

package/lib/runtime/components/react/dist/mpx-canvas/Image.js

@@ -1,4 +1,5 @@
 import { WEBVIEW_TARGET, registerWebviewProperties } from './utils';
+import { extendObject } from '../utils';
 const PROPERTIES = {
     crossOrigin: undefined,
     height: undefined,
@@ -50,10 +51,7 @@ export class Image {
                         this[key] = value;
                     }
                 }
-                callbackFn({
-                    ...message.payload,
-                    target: this
-                });
+                callbackFn(extendObject({}, message.payload, { target: this }));
             }
         });
     }