@mpxjs/webpack-plugin 2.10.14-beta.2 → 2.10.14-beta.20

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')
@@ -696,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 }) => {
@@ -1448,13 +1448,17 @@ class MpxWebpackPlugin {
               // 删除root query
               if (queryObj.root) request = addQuery(request, {}, false, ['root'])
               // wx、ali和web平台支持require.async，其余平台使用CommonJsAsyncDependency进行模拟抹平
-              if (mpx.supportRequireAsync) {
+              let shouldSplitChunk = mpx.supportRequireAsync
+              if (shouldSplitChunk && isReact(mpx.mode)) {
+                const transTarRoot = transSubpackage(mpx.transSubpackageRules, tarRoot)
+                tarRoot = transTarRoot
+                if (transTarRoot === '') {
+                  shouldSplitChunk = false
+                }
+              }
+
+              if (shouldSplitChunk) {
                 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'
@@ -1462,7 +1466,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/runtime/components/ali/mpx-nav-container.mpx

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

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

@@ -6,9 +6,14 @@ 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
+  readyToShow?: boolean
+} | null>
 
 export interface GroupValue {
   [key: string]: { checked: boolean; setValue: Dispatch<SetStateAction<boolean>> }
@@ -37,13 +42,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 +58,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 +94,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,79 @@
+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;
+    readyToShow?: boolean;
+} | 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;
+};

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

@@ -0,0 +1,2 @@
+declare const _default: "<html><head>\n    <meta content=\"width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no\" name=\"viewport\">\n    <style>\n      html {\n        -ms-content-zooming: none;\n        -ms-touch-action: pan-x pan-y;\n      }\n      body {\n        position: fixed;\n        top: 0;\n        right: 0;\n        bottom: 0;\n        left: 0;\n        margin: 0;\n        padding: 0;\n        overflow: hidden;\n      }\n      * {\n        user-select: none;\n        -ms-user-select: none;\n        -moz-user-select: none;\n        -webkit-user-select: none;\n      }\n    </style>\n  </head>\n  <body>\n  <script>\n  var scale = function (ratio) {\n    return function (item) {\n        if (typeof item === \"number\") {\n            return item * ratio;\n        }\n        return item;\n    };\n};\nfunction autoScaleCanvas(canvas) {\n    var ctx = canvas.getContext(\"2d\");\n    var ratio = window.devicePixelRatio || 1;\n    if (ratio !== 1) {\n        canvas.width *= ratio;\n        canvas.height *= ratio;\n        ctx.scale(ratio, ratio);\n        ctx.isPointInPath = function () {\n            var args = [];\n            for (var _i = 0; _i < arguments.length; _i++) {\n                args[_i] = arguments[_i];\n            }\n            return CanvasRenderingContext2D.prototype.isPointInPath.apply(ctx, args.map(scale(ratio)));\n        };\n    }\n    return canvas;\n}\nwindow.autoScaleCanvas = autoScaleCanvas;\n</script>\n<script>\n\nvar WEBVIEW_TARGET = '@@WEBVIEW_TARGET';\n\nvar ID = function () {\n  return Math.random().toString(32).slice(2);\n};\n\nvar flattenObjectCopyValue = function (flatObj, srcObj, key) {\n  var value = srcObj[key];\n  if (typeof value === 'function') {\n    return;\n  }\n  if (typeof value === 'object' && value instanceof Node) {\n    return;\n  }\n  flatObj[key] = flattenObject(value);\n};\n\nvar flattenObject = function (object) {\n  if (typeof object !== 'object' || object === null) {\n    return object;\n  }\n  // Handle TypedArray\n  if (object instanceof Uint8ClampedArray) {\n    return Array.from(object);\n  }\n  var flatObject = {};\n  for (var key in object) {\n    flattenObjectCopyValue(flatObject, object, key);\n  }\n  for (var key in Object.getOwnPropertyNames(object)) {\n    flattenObjectCopyValue(flatObject, object, key);\n  }\n  return flatObject;\n};\n\nvar AutoScaledCanvas = function (element) {\n  this.element = element;\n};\n\nAutoScaledCanvas.prototype.toDataURL = function () {\n  return this.element.toDataURL.apply(this.element, arguments);\n};\n\nAutoScaledCanvas.prototype.autoScale = function () {\n  if (this.savedHeight !== undefined) {\n    this.element.height = this.savedHeight;\n  }\n  if (this.savedWidth !== undefined) {\n    this.element.width = this.savedWidth;\n  }\n  window.autoScaleCanvas(this.element);\n};\n\nObject.defineProperty(AutoScaledCanvas.prototype, 'width', {\n  get: function () {\n    return this.element.width;\n  },\n  set: function (value) {\n    this.savedWidth = value;\n    this.autoScale();\n    return value;\n  },\n});\n\nObject.defineProperty(AutoScaledCanvas.prototype, 'height', {\n  get: function () {\n    return this.element.height;\n  },\n  set: function (value) {\n    this.savedHeight = value;\n    this.autoScale();\n    return value;\n  },\n});\nvar toMessage = function (result) {\n  if (result instanceof Blob) {\n    return {\n      type: 'blob',\n      payload: btoa(result),\n      meta: {},\n    };\n  }\n  if (result instanceof Object) {\n    if (!result[WEBVIEW_TARGET]) {\n      var id = ID();\n      result[WEBVIEW_TARGET] = id;\n      targets[id] = result;\n    }\n    return {\n      type: 'json',\n      payload: flattenObject(result),\n      args: toArgs(flattenObject(result)),\n      meta: {\n        target: result[WEBVIEW_TARGET],\n        constructor: result.__constructorName__ || result.constructor.name,\n      },\n    };\n  }\n  return {\n    type: 'json',\n    payload: typeof result === 'string' ? result : JSON.stringify(result),\n    meta: {},\n  };\n};\nvar toArgs = function (result) {\n    var args = [];\n    for (var key in result) {\n        if (result[key] !== undefined && key !== '@@WEBVIEW_TARGET') {\n            args.push(result[key]);\n        }\n    }\n    return args;\n};\n\nvar createObjectsFromArgs = function (args) {\n    for (var index = 0; index < args.length; index += 1) {\n        var currentArg = args[index];\n        if (currentArg && currentArg.className !== undefined) {\n            var className = currentArg.className, classArgs = currentArg.classArgs;\n            // new ImageData，第一个参数需要是 Uint8ClampedArray\n            var object = new (Function.prototype.bind.apply(constructors[className], [null].concat(classArgs)))();\n            args[index] = object;\n        }\n    }\n    return args;\n};\n\nvar canvas = document.createElement('canvas');\ncanvas.style.width = '100%';\ncanvas.style.height = '100%';\nvar autoScaledCanvas = new AutoScaledCanvas(canvas);\n\nvar targets = {\n  canvas: autoScaledCanvas,\n  context2D: canvas.getContext('2d'),\n};\n\nvar constructors = {\n  CanvasGradient: CanvasGradient,\n  Image: Image,\n  ImageData: ImageData,\n  Uint8ClampedArray: Uint8ClampedArray,\n};\n\nImage.bind =\n  Image.bind ||\n  function () {\n    return Image;\n  };\n\nImageData.bind =\n  ImageData.bind ||\n  function () {\n    return ImageData;\n  };\nUint8ClampedArray.bind =\n  Uint8ClampedArray.bind ||\n  function () {\n    return Uint8ClampedArray;\n  };\n\nvar populateRefs = function (arg) {\n  if (arg && arg.__ref__) {\n    return targets[arg.__ref__];\n  }\n  return arg;\n};\ndocument.body.appendChild(canvas);\n\nvar mergeObjects = function (target, source) {\n  for (var key in source) {\n    if (source.hasOwnProperty(key)) {\n      target[key] = source[key];\n    }\n  }\n  return target;\n};\n\nfunction handleMessage(message) {\n  var id = message.id,\n      type = message.type,\n      payload = message.payload;\n\n  switch (type) {\n    case 'exec': {\n      var target = payload.target,\n          method = payload.method,\n          args = payload.args;\n      var result = targets[target][method].apply(targets[target], args.map(populateRefs));\n      var msg = toMessage(result);\n\n      if (typeof result === 'object' && !msg.meta.constructor) {\n        for (var constructorName in constructors) {\n          if (result instanceof constructors[constructorName]) {\n            msg.meta.constructor = constructorName;\n          }\n        }\n      }\n      window.ReactNativeWebView.postMessage(JSON.stringify(mergeObjects({ id: id }, msg)));\n      break;\n    }\n    case 'set': {\n      var target = payload.target,\n          key = payload.key,\n          value = payload.value;\n      targets[target][key] = populateRefs(value);\n      break;\n    }\n        case 'construct': {\n            var constructor = payload.constructor,\n          target = payload.id,\n          args = payload.args || [];\n            var newArgs = createObjectsFromArgs(args);\n            var object;\n            try {\n                object = new (Function.prototype.bind.apply(constructors[constructor], [null].concat(newArgs)))();\n            }\n            catch (error) {\n                throw new Error('Error while constructing '.concat(constructor, ' ').concat(error.message));\n            }\n            object.__constructorName__ = constructor;\n            var msg = toMessage({});\n            targets[target] = object;\n            window.ReactNativeWebView.postMessage(JSON.stringify(mergeObjects({ id: id }, msg)));\n            break;\n        }\n            case 'listen': {\n      var types = payload.types,\n          target = payload.target;\n    for (var i = 0; i < types.length; i++) {\n    var eventType = types[i];\n    targets[target].addEventListener(eventType, function (e) {\n          const message = toMessage({\n            type: 'event',\n            payload: {\n                type: e.type,\n                target: mergeObjects(flattenObject(targets[target]), {\n                [WEBVIEW_TARGET]: target,\n            }),\n            },\n          });\n      window.ReactNativeWebView.postMessage(\n        JSON.stringify(mergeObjects({ id: id }, message))\n      );\n    });\n  }\n  break;\n}\n    }\n}\nvar handleError = function (err, message) {\n  window.ReactNativeWebView.postMessage(JSON.stringify({\n    id: message.id,\n    type: 'error',\n    payload: {\n      message: err.message,\n      stack: err.stack,\n    },\n  }));\n  document.removeEventListener('message', handleIncomingMessage);\n};\n\nfunction handleIncomingMessage(data) {\n  if (Array.isArray(data)) {\n    for (var i = 0; i < data.length; i++) {\n      try {\n        handleMessage(data[i]);\n      } catch (err) {\n        handleError(err, data[i]);\n      }\n    }\n  } else {\n    try {\n      handleMessage(data);\n    } catch (err) {\n      handleError(err, data);\n    }\n  }\n}\n\nwindow.mpxWebviewMessageCallback = handleIncomingMessage\n</script>\n  \n\n</body></html>";
+export default _default;