@mpxjs/webpack-plugin 2.10.13 → 2.10.14-beta.10

package/lib/dependencies/ImportDependency.js

@@ -0,0 +1,102 @@
+const Dependency = require('webpack/lib/Dependency')
+const makeSerializable = require('webpack/lib/util/makeSerializable')
+const ModuleDependency = require('webpack/lib/dependencies/ModuleDependency')
+const { RetryRuntimeGlobal } = require('../retry-runtime-module')
+
+class ImportDependency extends ModuleDependency {
+  /**
+   * @param {string} request the request
+   * @param {[number, number]} range expression range
+   * @param {string[][]=} referencedExports list of referenced exports
+   */
+  constructor (request, range, referencedExports, extraOptions) {
+    super(request)
+    this.range = range
+    this.referencedExports = referencedExports
+    this.extraOptions = extraOptions
+  }
+
+  get type () {
+    return 'import()'
+  }
+
+  get category () {
+    return 'esm'
+  }
+
+  /**
+   * Returns list of exports referenced by this dependency
+   * @param {ModuleGraph} moduleGraph module graph
+   * @param {RuntimeSpec} runtime the runtime for which the module is analysed
+   * @returns {(string[] | ReferencedExport)[]} referenced exports
+   */
+  getReferencedExports (moduleGraph, runtime) {
+    return this.referencedExports
+      ? this.referencedExports.map((e) => ({
+          name: e,
+          canMangle: false
+        }))
+      : Dependency.EXPORTS_OBJECT_REFERENCED
+  }
+
+  serialize (context) {
+    context.write(this.range)
+    context.write(this.referencedExports)
+    context.write(this.extraOptions)
+    super.serialize(context)
+  }
+
+  deserialize (context) {
+    this.range = context.read()
+    this.referencedExports = context.read()
+    this.extraOptions = context.read()
+    super.deserialize(context)
+  }
+}
+
+makeSerializable(ImportDependency, '@mpxjs/webpack-plugin/lib/dependencies/ImportDependency')
+
+ImportDependency.Template = class ImportDependencyTemplate extends (
+  ModuleDependency.Template
+) {
+  /**
+   * @param {Dependency} dependency the dependency for which the template should be applied
+   * @param {ReplaceSource} source the current replace source which can be modified
+   * @param {DependencyTemplateContext} templateContext the context object
+   * @returns {void}
+   */
+  apply (
+    dependency,
+    source,
+    { runtimeTemplate, module, moduleGraph, chunkGraph, runtimeRequirements }
+  ) {
+    const dep = /** @type {ImportDependency} */ (dependency)
+    const block = /** @type {AsyncDependenciesBlock} */ (
+      moduleGraph.getParentBlock(dep)
+    )
+    let content = runtimeTemplate.moduleNamespacePromise({
+      chunkGraph,
+      block: block,
+      module: /** @type {Module} */ (moduleGraph.getModule(dep)),
+      request: dep.request,
+      strict: /** @type {BuildMeta} */ (module.buildMeta).strictHarmonyModule,
+      message: 'import()',
+      runtimeRequirements
+    })
+    // replace fakeType by 9 to fix require.async to commonjs2 module like 'module.exports = function(){...}'
+    content = content.replace(/(__webpack_require__\.t\.bind\(.+,\s*)(\d+)(\s*\))/, (_, p1, p2, p3) => {
+      return p1 + '9' + p3
+    })
+
+    // require.async 的场景且配置了重试次数才注入 RetryRuntimeModule
+    const extraOptions = dep.extraOptions || {}
+    if (extraOptions.isRequireAsync && extraOptions.retryRequireAsync && extraOptions.retryRequireAsync.times > 0) {
+      runtimeRequirements.add(RetryRuntimeGlobal)
+      content = `${RetryRuntimeGlobal}(function() { return ${content} }, ${extraOptions.retryRequireAsync.times}, ${extraOptions.retryRequireAsync.interval})`
+    }
+
+    source.replace(dep.range[0], dep.range[1] - 1, content)
+  }
+}
+
+module.exports = ImportDependency

package/lib/index.js

@@ -14,8 +14,7 @@ const EntryPlugin = require('webpack/lib/EntryPlugin')
 const JavascriptModulesPlugin = require('webpack/lib/javascript/JavascriptModulesPlugin')
 const FlagEntryExportAsUsedPlugin = require('webpack/lib/FlagEntryExportAsUsedPlugin')
 const FileSystemInfo = require('webpack/lib/FileSystemInfo')
-const ImportDependency = require('webpack/lib/dependencies/ImportDependency')
-const ImportDependencyTemplate = require('./dependencies/ImportDependencyTemplate')
+const ImportDependency = require('./dependencies/ImportDependency')
 const AsyncDependenciesBlock = require('webpack/lib/AsyncDependenciesBlock')
 const ProvidePlugin = require('webpack/lib/ProvidePlugin')
 const normalize = require('./utils/normalize')
@@ -199,6 +198,7 @@ class MpxWebpackPlugin {
     }, options.nativeConfig)
     options.webConfig = options.webConfig || {}
     options.rnConfig = options.rnConfig || {}
+    options.rnConfig.supportSubpackage = options.rnConfig.supportSubpackage !== undefined ? options.rnConfig.supportSubpackage : true
     options.partialCompileRules = options.partialCompileRules || null
     options.asyncSubpackageRules = options.asyncSubpackageRules || []
     options.optimizeRenderRules = options.optimizeRenderRules ? (Array.isArray(options.optimizeRenderRules) ? options.optimizeRenderRules : [options.optimizeRenderRules]) : []
@@ -695,7 +695,8 @@ class MpxWebpackPlugin {
       compilation.dependencyFactories.set(RequireExternalDependency, new NullFactory())
       compilation.dependencyTemplates.set(RequireExternalDependency, new RequireExternalDependency.Template())
 
-      compilation.dependencyTemplates.set(ImportDependency, new ImportDependencyTemplate())
+      compilation.dependencyFactories.set(ImportDependency, normalModuleFactory)
+      compilation.dependencyTemplates.set(ImportDependency, new ImportDependency.Template())
     })
 
     compiler.hooks.thisCompilation.tap('MpxWebpackPlugin', (compilation, { normalModuleFactory }) => {
@@ -783,7 +784,7 @@ class MpxWebpackPlugin {
           removedChunks: [],
           forceProxyEventRules: this.options.forceProxyEventRules,
           // 若配置disableRequireAsync=true, 则全平台构建不支持异步分包
-          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || isReact(this.options.mode)),
+          supportRequireAsync: !this.options.disableRequireAsync && (this.options.mode === 'wx' || this.options.mode === 'ali' || this.options.mode === 'tt' || isWeb(this.options.mode) || (isReact(this.options.mode) && this.options.rnConfig.supportSubpackage)),
           partialCompileRules: this.options.partialCompileRules,
           collectDynamicEntryInfo: ({ resource, packageName, filename, entryType, hasAsync }) => {
             const curInfo = mpx.dynamicEntryInfo[packageName] = mpx.dynamicEntryInfo[packageName] || {
@@ -1450,10 +1451,6 @@ class MpxWebpackPlugin {
               if (mpx.supportRequireAsync) {
                 if (isWeb(mpx.mode) || isReact(mpx.mode)) {
                   if (isReact(mpx.mode)) tarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
-                  request = addQuery(request, {
-                    isRequireAsync: true,
-                    retryRequireAsync: JSON.stringify(this.options.retryRequireAsync)
-                  })
                   const depBlock = new AsyncDependenciesBlock(
                     {
                       name: tarRoot + '/index'
@@ -1461,7 +1458,10 @@ class MpxWebpackPlugin {
                     expr.loc,
                     request
                   )
-                  const dep = new ImportDependency(request, expr.range)
+                  const dep = new ImportDependency(request, expr.range, undefined, {
+                    isRequireAsync: true,
+                    retryRequireAsync: this.options.retryRequireAsync
+                  })
                   dep.loc = expr.loc
                   depBlock.addDependency(dep)
                   parser.state.current.addBlock(depBlock)

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

@@ -315,7 +315,7 @@ module.exports = function getSpec ({ warn, error }) {
     switch (prop) {
       case bgPropMap.image: {
         // background-image 支持背景图/渐变/css var
-        if (cssVariableExp.test(value) || urlExp.test(value) || linearExp.test(value)) {
+        if (cssVariableExp.test(value) || urlExp.test(value) || linearExp.test(value) || value === 'none') {
           return { prop, value }
         } else {
           error(`Value of ${prop} in ${selector} selector only support value <url()> or <linear-gradient()>, received ${value}, please check again!`)
@@ -359,6 +359,12 @@ module.exports = function getSpec ({ warn, error }) {
           error(`Property [${bgPropMap.all}] in ${selector} is abbreviated property and does not support CSS var`)
           return false
         }
+        if (value === 'none') {
+          return [
+            { prop: bgPropMap.image, value },
+            { prop: bgPropMap.color, value: 'transparent' }
+          ]
+        }
         const bgMap = []
         const values = parseValues(value)
         values.forEach(item => {

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

@@ -31,13 +31,16 @@ module.exports = function ({ print }) {
   const qaPropLog = print({ platform: 'qa', tag: TAG_NAME, isError: false })
   const wxPropValueLog = print({ platform: 'wx', tag: TAG_NAME, isError: false, type: 'value' })
   const iosValueLogError = print({ platform: 'ios', tag: TAG_NAME, isError: true, type: 'value' })
+  const iosValueLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'value' })
   const iosPropLog = print({ platform: 'ios', tag: TAG_NAME, isError: false })
   const iosEventLog = print({ platform: 'ios', tag: TAG_NAME, isError: false, type: 'event' })
   const androidValueLogError = print({ platform: 'android', tag: TAG_NAME, isError: true, type: 'value' })
+  const androidValueLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'value' })
   const androidPropLog = print({ platform: 'android', tag: TAG_NAME, isError: false })
   const androidEventLog = print({ platform: 'android', tag: TAG_NAME, isError: false, type: 'event' })
 
   const harmonyValueLogError = print({ platform: 'harmony', tag: TAG_NAME, isError: true, type: 'value' })
+  const harmonyValueLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'value' })
   const harmonyPropLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false })
   const harmonyEventLog = print({ platform: 'harmony', tag: TAG_NAME, isError: false, type: 'event' })
 
@@ -133,19 +136,25 @@ module.exports = function ({ print }) {
         ios ({ name, value }) {
           // TODO 此处open-type无其他属性支持了？
           const supported = ['share']
-          if (!supported.includes(value)) {
+          if (isMustache(value)) {
+            iosValueLog({ name, value })
+          } else if (!supported.includes(value)) {
             iosValueLogError({ name, value })
           }
         },
         android ({ name, value }) {
           const supported = ['share']
-          if (!supported.includes(value)) {
+          if (isMustache(value)) {
+            androidValueLog({ name, value })
+          } else if (!supported.includes(value)) {
             androidValueLogError({ name, value })
           }
         },
         harmony ({ name, value }) {
           const supported = ['share']
-          if (!supported.includes(value)) {
+          if (isMustache(value)) {
+            harmonyValueLog({ name, value })
+          } else if (!supported.includes(value)) {
             harmonyValueLogError({ name, value })
           }
         }
@@ -186,7 +195,7 @@ module.exports = function ({ print }) {
         qa: qaPropLog
       },
       {
-        test: /^(lang|from-type|hover-class|send-message-title|send-message-path|send-message-img|app-parameter|show-message-card|phone-number-no-quota-toast|bindgetuserinfo|bindcontact|createliveactivity|bindgetphonenumber|bindgetrealtimephonenumber|binderror|bindopensetting|bindlaunchapp|bindchooseavatar|bindagreeprivacyauthorization)$/,
+        test: /^(lang|from-type|send-message-title|send-message-path|send-message-img|app-parameter|show-message-card|phone-number-no-quota-toast|bindgetuserinfo|bindcontact|createliveactivity|bindgetphonenumber|bindgetrealtimephonenumber|binderror|bindopensetting|bindlaunchapp|bindchooseavatar|bindagreeprivacyauthorization)$/,
         ios: iosPropLog,
         android: androidPropLog,
         harmony: harmonyPropLog

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

@@ -44,6 +44,7 @@ const fixComponentName = require('./fix-component-name')
 const rootPortal = require('./root-portal')
 const stickyHeader = require('./sticky-header')
 const stickySection = require('./sticky-section')
+const navContainer = require('./nav-container')
 
 module.exports = function getComponentConfigs ({ warn, error }) {
   /**
@@ -129,6 +130,7 @@ module.exports = function getComponentConfigs ({ warn, error }) {
     component(),
     rootPortal({ print }),
     stickyHeader({ print }),
-    stickySection({ print })
+    stickySection({ print }),
+    navContainer({ print })
   ]
 }

package/lib/platform/template/wx/component-config/nav-container.js

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

package/lib/react/processScript.js

@@ -46,7 +46,8 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
     const componentsMap = buildComponentsMap({
       localComponentsMap,
       loaderContext,
-      jsonConfig
+      jsonConfig,
+      rnConfig
     })
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, pagesMap, firstPage, hasApp })
     output += getRequireScript({ ctorType, script, loaderContext })
@@ -58,7 +59,8 @@ import { getComponent, getAsyncSuspense } from ${stringifyRequest(loaderContext,
       localComponentsMap,
       builtInComponentsMap,
       loaderContext,
-      jsonConfig
+      jsonConfig,
+      rnConfig
     })
 
     output += buildGlobalParams({ moduleId, scriptSrcMode, loaderContext, isProduction, ctorType, jsonConfig, componentsMap, outputPath, genericsInfo, componentGenerics, hasApp })

package/lib/react/script-helper.js

@@ -59,7 +59,7 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig })
   Object.keys(localPagesMap).forEach((pagePath) => {
     const pageCfg = localPagesMap[pagePath]
     const pageRequest = stringifyRequest(loaderContext, pageCfg.resource)
-    if (pageCfg.async) {
+    if (pageCfg.async && rnConfig.supportSubpackage) {
       const moduleId = mpx.getModuleId(pageCfg.resource)
       const getFallback = rnConfig.asyncChunk && rnConfig.asyncChunk.fallback && getComponentGetter(getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.fallback, { isComponent: true })), 'PageFallback'))
       const getLoading = rnConfig.asyncChunk && rnConfig.asyncChunk.loading && getComponentGetter(getComponent(stringifyRequest(loaderContext, addQuery(rnConfig.asyncChunk.loading, { isComponent: true })), 'PageLoading'))
@@ -81,14 +81,14 @@ function buildPagesMap ({ localPagesMap, loaderContext, jsonConfig, rnConfig })
   }
 }
 
-function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig }) {
+function buildComponentsMap ({ localComponentsMap, builtInComponentsMap, loaderContext, jsonConfig, rnConfig }) {
   const componentsMap = {}
   const mpx = loaderContext.getMpx()
   if (localComponentsMap) {
     Object.keys(localComponentsMap).forEach((componentName) => {
       const componentCfg = localComponentsMap[componentName]
       const componentRequest = stringifyRequest(loaderContext, componentCfg.resource)
-      if (componentCfg.async) {
+      if (componentCfg.async && rnConfig.supportSubpackage) {
         const moduleId = mpx.getModuleId(componentCfg.resource)
         const placeholder = jsonConfig.componentPlaceholder && jsonConfig.componentPlaceholder[componentName]
         let getFallback

package/lib/runtime/components/ali/mpx-nav-container.mpx

@@ -0,0 +1,3 @@
+<template>
+    <slot />
+</template>

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

@@ -6,9 +6,13 @@ export type LabelContextValue = MutableRefObject<{
   triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void
 }>
 
-export type KeyboardAvoidContextValue = MutableRefObject<
-  { cursorSpacing: number, ref: MutableRefObject<any> } | null
->
+export type KeyboardAvoidContextValue = MutableRefObject<{
+  cursorSpacing: number
+  ref: MutableRefObject<any>
+  adjustPosition: boolean
+  keyboardHeight?: number
+  onKeyboardShow?: () => void
+} | null>
 
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }
@@ -37,13 +41,13 @@ export interface IntersectionObserver {
 }
 
 export interface PortalContextValue {
-  mount: (children: React.ReactNode, key?: number | null, id?: number| null) => number| undefined
+  mount: (children: React.ReactNode, key?: number | null, id?: number | null) => number | undefined
   update: (key: number, children: React.ReactNode) => void
   unmount: (key: number) => void
 }
 
 export interface ScrollViewContextValue {
-  gestureRef: React.RefObject<any> | null,
+  gestureRef: React.RefObject<any> | null
   scrollOffset: Animated.Value
 }
 
@@ -53,10 +57,15 @@ export interface RouteContextValue {
 }
 
 export interface StickyContextValue {
-  registerStickyHeader: Function,
+  registerStickyHeader: Function
   unregisterStickyHeader: Function
 }
 
+export interface NavSharedValue {
+  customNav?: React.ReactNode
+  setCustomNav: (value: React.ReactNode) => void
+}
+
 export const MovableAreaContext = createContext({ width: 0, height: 0 })
 
 export const FormContext = createContext<FormContextValue | null>(null)
@@ -84,3 +93,5 @@ export const ScrollViewContext = createContext<ScrollViewContextValue>({ gesture
 export const PortalContext = createContext<PortalContextValue>(null as any)
 
 export const StickyContext = createContext<StickyContextValue>({ registerStickyHeader: noop, unregisterStickyHeader: noop })
+
+export const NavSharedContext = createContext<NavSharedValue>(null as any)

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

@@ -0,0 +1,78 @@
+import { Dispatch, MutableRefObject, SetStateAction } from 'react';
+import { NativeSyntheticEvent, Animated } from 'react-native';
+export type LabelContextValue = MutableRefObject<{
+    triggerChange: (evt: NativeSyntheticEvent<TouchEvent>) => void;
+}>;
+export type KeyboardAvoidContextValue = MutableRefObject<{
+    cursorSpacing: number;
+    ref: MutableRefObject<any>;
+    adjustPosition: boolean;
+    keyboardHeight?: number;
+    onKeyboardShow?: () => void;
+} | null>;
+export interface GroupValue {
+    [key: string]: {
+        checked: boolean;
+        setValue: Dispatch<SetStateAction<boolean>>;
+    };
+}
+export interface GroupContextValue {
+    groupValue: GroupValue;
+    notifyChange: (evt: NativeSyntheticEvent<TouchEvent>) => void;
+}
+export interface FormFieldValue {
+    getValue: () => any;
+    resetValue: ({ newVal, type }: {
+        newVal?: any;
+        type?: string;
+    }) => void;
+}
+export interface FormContextValue {
+    formValuesMap: Map<string, FormFieldValue>;
+    submit: () => void;
+    reset: () => void;
+}
+export interface IntersectionObserver {
+    [key: number]: {
+        throttleMeasure: () => void;
+    };
+}
+export interface PortalContextValue {
+    mount: (children: React.ReactNode, key?: number | null, id?: number | null) => number | undefined;
+    update: (key: number, children: React.ReactNode) => void;
+    unmount: (key: number) => void;
+}
+export interface ScrollViewContextValue {
+    gestureRef: React.RefObject<any> | null;
+    scrollOffset: Animated.Value;
+}
+export interface RouteContextValue {
+    pageId: number;
+    navigation: Record<string, any>;
+}
+export interface StickyContextValue {
+    registerStickyHeader: Function;
+    unregisterStickyHeader: Function;
+}
+export interface NavSharedValue {
+    customNav?: React.ReactNode;
+    setCustomNav: (value: React.ReactNode) => void;
+}
+export declare const MovableAreaContext: import("react").Context<{
+    width: number;
+    height: number;
+}>;
+export declare const FormContext: import("react").Context<FormContextValue | null>;
+export declare const CheckboxGroupContext: import("react").Context<GroupContextValue | null>;
+export declare const RadioGroupContext: import("react").Context<GroupContextValue | null>;
+export declare const LabelContext: import("react").Context<LabelContextValue | null>;
+export declare const PickerContext: import("react").Context<null>;
+export declare const VarContext: import("react").Context<{}>;
+export declare const IntersectionObserverContext: import("react").Context<IntersectionObserver | null>;
+export declare const RouteContext: import("react").Context<RouteContextValue | null>;
+export declare const SwiperContext: import("react").Context<{}>;
+export declare const KeyboardAvoidContext: import("react").Context<KeyboardAvoidContextValue | null>;
+export declare const ScrollViewContext: import("react").Context<ScrollViewContextValue>;
+export declare const PortalContext: import("react").Context<PortalContextValue>;
+export declare const StickyContext: import("react").Context<StickyContextValue>;
+export declare const NavSharedContext: import("react").Context<NavSharedValue>;

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

@@ -15,3 +15,4 @@ export const KeyboardAvoidContext = createContext(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 });
+export const NavSharedContext = createContext(null);

package/lib/runtime/components/react/dist/event.config.d.ts

@@ -0,0 +1,7 @@
+declare const eventConfigMap: {
+    [key: string]: {
+        bitFlag: string;
+        events: string[];
+    };
+};
+export default eventConfigMap;

package/lib/runtime/components/react/dist/getInnerListeners.d.ts

@@ -0,0 +1,7 @@
+import { Props, RawConfig, RemoveProps, LayoutRef, ExtendedNativeTouchEvent } from './types/getInnerListeners';
+export declare const getCustomEvent: (type: string | undefined, oe: any, { detail, layoutRef }: {
+    detail?: Record<string, unknown> | undefined;
+    layoutRef?: LayoutRef | undefined;
+}, props?: Props) => any;
+declare const useInnerProps: (props?: Props, userRemoveProps?: RemoveProps, rawConfig?: RawConfig) => Record<string, (e: ExtendedNativeTouchEvent) => void> & Omit<Props, string>;
+export default useInnerProps;

package/lib/runtime/components/react/dist/mpx-async-suspense.d.ts

@@ -0,0 +1,12 @@
+import { ComponentType, ReactNode } from 'react';
+interface AsyncSuspenseProps {
+    type: 'component' | 'page';
+    chunkName: string;
+    moduleId: string;
+    innerProps: any;
+    getLoading?: () => ComponentType<unknown>;
+    getFallback?: () => ComponentType<unknown>;
+    getChildren: () => Promise<ReactNode>;
+}
+declare const AsyncSuspense: React.FC<AsyncSuspenseProps>;
+export default AsyncSuspense;

package/lib/runtime/components/react/dist/mpx-button.d.ts

@@ -0,0 +1,68 @@
+/**
+ * ✔ size
+ * ✔ type
+ * ✔ plain
+ * ✔ disabled
+ * ✔ loading
+ * ✔ form-type
+ * - open-type: Partially. Only support `share`、`getUserInfo`
+ * ✔ hover-class: Convert hoverClass to hoverStyle.
+ * ✔ hover-style
+ * ✘ hover-stop-propagation
+ * ✔ hover-start-time
+ * ✔ hover-stay-time
+ * ✘ lang
+ * ✘ session-from
+ * ✘ send-message-title
+ * ✘ send-message-path
+ * ✘ send-message-img
+ * ✘ app-parameter
+ * ✘ show-message-card
+ * ✘ phone-number-no-quota-toast
+ * ✘ bindgetuserinfo
+ * ✘ bindcontact
+ * ✘ createliveactivity
+ * ✘ bindgetphonenumber
+ * ✘ bindgetphonenumber
+ * ✘ bindgetrealtimephonenumber
+ * ✘ binderror
+ * ✘ bindopensetting
+ * ✘ bindlaunchapp
+ * ✘ bindlaunchapp
+ * ✘ bindchooseavatar
+ * ✘ bindchooseavatar
+ * ✘ bindagreeprivacyauthorization
+ * ✔ bindtap
+ */
+import { ReactNode } from 'react';
+import { View, ViewStyle, TextStyle, NativeSyntheticEvent } from 'react-native';
+import { HandlerRef } from './useNodesRef';
+import type { ExtendedViewStyle } from './types/common';
+export type Type = 'default' | 'primary' | 'warn';
+export type OpenType = 'share' | 'getUserInfo';
+export type OpenTypeEvent = 'onShareAppMessage' | 'onUserInfo';
+export interface ButtonProps {
+    size?: string;
+    type?: Type;
+    plain?: boolean;
+    disabled?: boolean;
+    loading?: boolean;
+    'hover-class'?: string;
+    'hover-style'?: ExtendedViewStyle;
+    'hover-start-time'?: number;
+    'hover-stay-time'?: number;
+    'open-type'?: OpenType;
+    'form-type'?: 'submit' | 'reset';
+    'enable-offset'?: boolean;
+    'enable-var'?: boolean;
+    'external-var-context'?: Record<string, any>;
+    'parent-font-size'?: number;
+    'parent-width'?: number;
+    'parent-height'?: number;
+    style?: ViewStyle & TextStyle & Record<string, any>;
+    children: ReactNode;
+    bindgetuserinfo?: (userInfo: any) => void;
+    bindtap?: (evt: NativeSyntheticEvent<TouchEvent> | unknown) => void;
+}
+declare const Button: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HandlerRef<View, ButtonProps>>>;
+export default Button;

package/lib/runtime/components/react/dist/mpx-canvas/Bus.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="node" />
+interface Message {
+    id?: string;
+    type: string;
+    payload?: any;
+}
+export default class Bus {
+    _paused: Boolean;
+    _messageListeners: {
+        [key: string]: (message: Message) => void;
+    };
+    _queue: Message[];
+    _send: (message: Message | Message[]) => void;
+    _timeoutId: NodeJS.Timeout | null;
+    constructor(send: (message: Message | Message[]) => void);
+    post(message: Message): Promise<any>;
+    handle(message: Message): void;
+    pause(): void;
+    resume(): void;
+    startBatching(): void;
+    clearBatchingTimeout(): void;
+}
+export {};

package/lib/runtime/components/react/dist/mpx-canvas/CanvasGradient.d.ts

@@ -0,0 +1,7 @@
+import { WebviewMessage, CanvasInstance } from './utils';
+export default class CanvasGradient {
+    private canvas;
+    [key: string]: any;
+    constructor(canvas: CanvasInstance, noOnConstruction?: boolean);
+    postMessage(message: WebviewMessage): Promise<any>;
+}

package/lib/runtime/components/react/dist/mpx-canvas/CanvasRenderingContext2D.d.ts

@@ -0,0 +1,6 @@
+import { CanvasInstance, WebviewMessage } from './utils';
+export default class CanvasRenderingContext2D {
+    canvas: CanvasInstance;
+    constructor(canvas: CanvasInstance);
+    postMessage(message: WebviewMessage): Promise<any>;
+}

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

@@ -0,0 +1,20 @@
+import { WebviewMessage, WEBVIEW_TARGET, CanvasInstance } from './utils';
+export declare class Image {
+    [WEBVIEW_TARGET]: string;
+    canvas: any;
+    width: number;
+    height: number;
+    private _loadListener;
+    private _errorListener;
+    private _onload;
+    private _onerror;
+    [key: string]: any;
+    constructor(canvas: CanvasInstance, width?: number, height?: number, noOnConstruction?: boolean);
+    postMessage(message: WebviewMessage): any;
+    addEventListener(type: 'load' | 'error', callbackFn: Function): any;
+    set onload(callback: ((...args: any[]) => void));
+    get onload(): ((...args: any[]) => void);
+    set onerror(callback: ((...args: any[]) => void));
+    get onerror(): ((...args: any[]) => void);
+}
+export declare function createImage(canvas: CanvasInstance, width?: number, height?: number): Image;

package/lib/runtime/components/react/dist/mpx-canvas/ImageData.d.ts

@@ -0,0 +1,8 @@
+import { WebviewMessage, CanvasInstance } from './utils';
+export default class ImageData {
+    canvas: CanvasInstance;
+    [key: string]: any;
+    constructor(canvas: CanvasInstance, dataArray: number[], width: number, height: number, noOnConstruction?: boolean);
+    postMessage: (message: WebviewMessage) => Promise<any>;
+}
+export declare function createImageData(canvas: CanvasInstance, dataArray: number[], width: number, height: number): ImageData;

package/lib/runtime/components/react/dist/mpx-canvas/constructorsRegistry.d.ts

@@ -0,0 +1,10 @@
+import { WebviewConstructor } from './utils';
+export declare enum ConstructorType {
+    Image = "Image",
+    CanvasGradient = "CanvasGradient",
+    ImageData = "ImageData"
+}
+export declare function useConstructorsRegistry(): {
+    register: (registerWebviewConstructor: Function) => void;
+    getConstructor: (type: ConstructorType) => WebviewConstructor | undefined;
+};