@mpxjs/webpack-plugin 2.9.66 → 2.9.69

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

@@ -45,19 +45,79 @@ const InitialValue = Object.assign({
     transformOrigin: ['50%', '50%', 0]
 }, TransformInitial);
 const TransformOrigin = 'transformOrigin';
-// deg 角度
-// const isDeg = (key: RuleKey) => ['rotateX', 'rotateY', 'rotateZ', 'rotate', 'skewX', 'skewY'].includes(key)
-// 背景色
-// const isBg = (key: RuleKey) => key === 'backgroundColor'
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+// parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
+const parseTransform = (transformStr) => {
+    const values = transformStr.trim().split(/\s+/);
+    const transform = [];
+    values.forEach(item => {
+        const match = item.match(/([/\w]+)\(([^)]+)\)/);
+        if (match && match.length >= 3) {
+            let key = match[1];
+            const val = match[2];
+            switch (key) {
+                case 'translateX':
+                case 'translateY':
+                case 'scaleX':
+                case 'scaleY':
+                case 'rotateX':
+                case 'rotateY':
+                case 'rotateZ':
+                case 'rotate':
+                case 'skewX':
+                case 'skewY':
+                case 'perspective':
+                    // 单个值处理
+                    transform.push({ [key]: global.__formatValue(val) });
+                    break;
+                case 'matrix':
+                case 'matrix3d':
+                    transform.push({ [key]: val.split(',').map(val => +val) });
+                    break;
+                case 'translate':
+                case 'scale':
+                case 'skew':
+                case 'rotate3d': // x y z angle
+                case 'translate3d': // x y 支持 z不支持
+                case 'scale3d': // x y 支持 z不支持
+                    {
+                        // 2 个以上的值处理
+                        key = key.replace('3d', '');
+                        const vals = val.split(',', key === 'rotate' ? 4 : 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+                        if (vals.length === 1 && key === 'scale') {
+                            vals.push(vals[0]);
+                        }
+                        const xyz = ['X', 'Y', 'Z'];
+                        transform.push(...vals.map((v, index) => {
+                            return { [`${key}${xyz[index] || ''}`]: global.__formatValue(v.trim()) };
+                        }));
+                        break;
+                    }
+            }
+        }
+    });
+    return transform;
+};
+// format style
+const formatStyle = (style) => {
+    if (!style.transform || Array.isArray(style.transform))
+        return style;
+    return Object.assign({}, style, {
+        transform: parseTransform(style.transform)
+    });
+};
 export default function useAnimationHooks(props) {
-    const { style: originalStyle = {}, animation } = props;
+    const { style = {}, animation } = props;
+    const originalStyle = formatStyle(style);
     // id 标识
     const id = animation?.id || -1;
     // 有动画样式的 style key
     const animatedStyleKeys = useSharedValue([]);
+    // 记录动画key的style样式值 没有的话设置为false
     const animatedKeys = useRef({});
+    // const animatedKeys = useRef({} as {[propName: keyof ExtendedViewStyle]: boolean|number|string})
     // ** 全量 style prop sharedValue
     // 不能做增量的原因：
     // 1 尝试用 useRef，但 useAnimatedStyle 访问后的 ref 不能在增加新的值，被冻结
@@ -80,6 +140,16 @@ export default function useAnimationHooks(props) {
         // 驱动动画
         createAnimation(keys);
     }, [id]);
+    // 同步style更新
+    // useEffect(() => {
+    //   Object.keys(animatedKeys.current).forEach(key => {
+    //     const originVal = getOriginalStyleVal(key, isTransform(key))
+    //     if (originVal && animatedKeys.current[key] !== originVal) {
+    //       animatedKeys.current[key] = originVal
+    //       shareValMap[key].value = originVal
+    //     }
+    //   })
+    // }, [style])
     // ** 清空动画
     useEffect(() => {
         return () => {
@@ -115,7 +185,7 @@ export default function useAnimationHooks(props) {
             animatedKeys.forEach(key => {
                 let toVal = (rules.get(key) || transform.get(key));
                 // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                if (!toVal) {
+                if (toVal === undefined) {
                     toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value;
                 }
                 const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
@@ -143,9 +213,8 @@ export default function useAnimationHooks(props) {
             : withTiming(value, { duration, easing });
         return delay ? withDelay(delay, animation) : animation;
     }
-    // 获取初始值（prop style or 默认值）
     function getInitialVal(key, isTransform = false) {
-        if (isTransform && originalStyle.transform?.length) {
+        if (isTransform && Array.isArray(originalStyle.transform)) {
             let initialVal = InitialValue[key];
             // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
             originalStyle.transform.forEach(item => {
@@ -156,12 +225,31 @@ export default function useAnimationHooks(props) {
         }
         return originalStyle[key] === undefined ? InitialValue[key] : originalStyle[key];
     }
+    // 从 prop style 中获取样式初始值 没有为undefined
+    // function getOriginalStyleVal (key: keyof ExtendedViewStyle, isTransform = false) {
+    //   if (isTransform && Array.isArray(originalStyle.transform)) {
+    //     let initialVal = undefined // InitialValue[key]
+    //     // 仅支持 { transform: [{rotateX: '45deg'}, {rotateZ: '0.785398rad'}] } 格式的初始样式
+    //     originalStyle.transform.forEach(item => {
+    //       if (item[key] !== undefined) initialVal = item[key]
+    //     })
+    //     return initialVal
+    //   }
+    //   return originalStyle[key] // === undefined ? InitialValue[key] : originalStyle[key]
+    // }
+    // 获取动画shareVal初始值（prop style or 默认值）
+    // function getInitialVal (key: keyof ExtendedViewStyle, isTransform = false) {
+    //   const originalVal = getOriginalStyleVal(key, isTransform)
+    //   return originalVal === undefined ? InitialValue[key] : originalStyle[key]
+    // }
     // 循环 animation actions 获取所有有动画的 style prop name
     function getAnimatedStyleKeys() {
         return (animation?.actions || []).reduce((keyMap, action) => {
             const { rules, transform } = action;
             const ruleArr = [...rules.keys(), ...transform.keys()];
             ruleArr.forEach(key => {
+                // const originalVal = getOriginalStyleVal(key, isTransform(key))
+                // if (!keyMap[key]) keyMap[key] = originalVal === undefined ? false : originalVal
                 if (!keyMap[key])
                     keyMap[key] = true;
             });

package/lib/runtime/components/react/dist/utils.jsx

@@ -1,15 +1,17 @@
-import { useEffect, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
-import { isObject, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
+import { useEffect, useCallback, useMemo, useRef, isValidElement, useContext, useState, Children, cloneElement } from 'react';
+import { Image } from 'react-native';
+import { isObject, isFunction, hasOwn, diffAndCloneA, error, warn, getFocusedNavigation } from '@mpxjs/utils';
 import { VarContext } from './context';
 import { ExpressionParser, parseFunc, ReplaceSource } from './parser';
 import { initialWindowMetrics } from 'react-native-safe-area-context';
+import FastImage from '@d11/react-native-fast-image';
 export const TEXT_STYLE_REGEX = /color|font.*|text.*|letterSpacing|lineHeight|includeFontPadding|writingDirection/;
 export const PERCENT_REGEX = /^\s*-?\d+(\.\d+)?%\s*$/;
 export const URL_REGEX = /^\s*url\(["']?(.*?)["']?\)\s*$/;
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/;
 export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/;
 export const DEFAULT_FONT_SIZE = 16;
-export const DEFAULT_UNLAY_STYLE = {
+export const HIDDEN_STYLE = {
     opacity: 0
 };
 const varDecRegExp = /^--.*/;
@@ -69,7 +71,7 @@ export const parseInlineStyle = (inlineStyle = '') => {
         if (rest.length || !v || !k)
             return styleObj;
         const key = k.trim().replace(/-./g, c => c.substring(1).toUpperCase());
-        return Object.assign(styleObj, { [key]: v.trim() });
+        return Object.assign(styleObj, { [key]: global.__formatValue(v.trim()) });
     }, {});
 };
 export const parseUrl = (cssUrl = '') => {
@@ -88,7 +90,7 @@ export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
         const isCustomText = ele.type?.isCustomText;
-        return displayName === 'mpx-text' || displayName === 'Text' || !!isCustomText;
+        return displayName === 'MpxText' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }
@@ -402,7 +404,7 @@ export function splitProps(props) {
 export const useLayout = ({ props, hasSelfPercent, setWidth, setHeight, onLayout, nodeRef }) => {
     const layoutRef = useRef({});
     const hasLayoutRef = useRef(false);
-    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? DEFAULT_UNLAY_STYLE : {};
+    const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {};
     const layoutProps = {};
     const enableOffset = props['enable-offset'];
     if (hasSelfPercent || onLayout || enableOffset) {
@@ -444,3 +446,61 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
     }
     return children;
 }
+export const debounce = (func, delay) => {
+    let timer;
+    const wrapper = (...args) => {
+        clearTimeout(timer);
+        timer = setTimeout(() => {
+            func(...args);
+        }, delay);
+    };
+    wrapper.clear = () => {
+        clearTimeout(timer);
+    };
+    return wrapper;
+};
+export const useDebounceCallback = (func, delay) => {
+    const debounced = useMemo(() => debounce(func, delay), [func]);
+    return debounced;
+};
+export const useStableCallback = (callback) => {
+    const ref = useRef(callback);
+    ref.current = callback;
+    return useCallback((...args) => ref.current?.(...args), []);
+};
+export const usePrevious = (value) => {
+    const ref = useRef(undefined);
+    const prev = ref.current;
+    ref.current = value;
+    return prev;
+};
+export function flatGesture(gestures = []) {
+    return (gestures && gestures.flatMap((gesture) => {
+        if (gesture && gesture.nodeRefs) {
+            return gesture.nodeRefs
+                .map((item) => item.getNodeInstance()?.instance?.gestureRef || {});
+        }
+        return gesture?.current ? [gesture] : [];
+    })) || [];
+}
+export function extendObject(...args) {
+    return Object.assign({}, ...args);
+}
+export function getCurrentPage(pageId) {
+    if (!global.getCurrentPages)
+        return;
+    const pages = global.getCurrentPages();
+    return pages.find((page) => isFunction(page.getPageId) && page.getPageId() === pageId);
+}
+export function renderImage(imageProps, enableFastImage = false) {
+    const Component = enableFastImage ? FastImage : Image;
+    return <Component {...imageProps}/>;
+}
+export function pickStyle(styleObj = {}, pickedKeys, callback) {
+    return pickedKeys.reduce((acc, key) => {
+        if (key in styleObj) {
+            acc[key] = callback ? callback(key, styleObj[key]) : styleObj[key];
+        }
+        return acc;
+    }, {});
+}

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

@@ -1,4 +1,5 @@
 import { useRef } from 'react'
+import { collectDataset } from '@mpxjs/utils'
 import { omit } from './utils'
 import eventConfigMap from './event.config'
 import {
@@ -8,7 +9,6 @@ import {
   UseInnerPropsConfig,
   InnerRef,
   SetTimeoutReturnType,
-  DataSetType,
   LayoutRef,
   NativeTouchEvent
 } from './types/getInnerListeners'
@@ -36,7 +36,7 @@ const getTouchEvent = (
     currentTarget: {
       ...(event.currentTarget || {}),
       id: id || '',
-      dataset: getDataSet(props),
+      dataset: collectDataset(props),
       offsetLeft: layoutRef?.current?.offsetLeft || 0,
       offsetTop: layoutRef?.current?.offsetTop || 0
     },
@@ -68,19 +68,6 @@ const getTouchEvent = (
   }
 }
 
-export const getDataSet = (props: Record<string, any>) => {
-  const result: DataSetType = {}
-
-  for (const key in props) {
-    if (key.indexOf('data-') === 0) {
-      const newKey = key.substr(5)
-      result[newKey] = props[key]
-    }
-  }
-
-  return result
-}
-
 export const getCustomEvent = (
   type = '',
   oe: any = {},
@@ -94,7 +81,7 @@ export const getCustomEvent = (
     target: {
       ...(oe.target || {}),
       id: props.id || '',
-      dataset: getDataSet(props),
+      dataset: collectDataset(props),
       offsetLeft: layoutRef?.current?.offsetLeft || 0,
       offsetTop: layoutRef?.current?.offsetTop || 0
     },

package/lib/runtime/components/react/mpx-button.tsx

@@ -45,10 +45,10 @@ import {
   NativeSyntheticEvent
 } from 'react-native'
 import { warn } from '@mpxjs/utils'
-import { splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
+import { getCurrentPage, splitProps, splitStyle, useLayout, useTransformStyle, wrapChildren } from './utils'
 import useInnerProps, { getCustomEvent } from './getInnerListeners'
 import useNodesRef, { HandlerRef } from './useNodesRef'
-import { FormContext } from './context'
+import { RouteContext, FormContext } from './context'
 
 export type Type = 'default' | 'primary' | 'warn'
 
@@ -128,7 +128,8 @@ const styles = StyleSheet.create({
   }
 })
 
-const getOpenTypeEvent = (openType: OpenType) => {
+const getOpenTypeEvent = (openType?: OpenType) => {
+  if (!openType) return
   if (!global.__mpx?.config?.rnConfig) {
     warn('Environment not supported')
     return
@@ -148,6 +149,12 @@ const getOpenTypeEvent = (openType: OpenType) => {
   return event
 }
 
+const timer = (data: any, time = 3000) => new Promise((resolve) => {
+  setTimeout(() => {
+    resolve(data)
+  }, time)
+})
+
 const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
   const image = useRef(new Animated.Value(0)).current
 
@@ -211,6 +218,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     bindtouchend
   } = props
 
+  const pageId = useContext(RouteContext)
+
   const formContext = useContext(FormContext)
 
   let submitFn: () => void | undefined
@@ -310,17 +319,41 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   }
 
   const handleOpenTypeEvent = (evt: NativeSyntheticEvent<TouchEvent>) => {
-    if (!openType) return
     const handleEvent = getOpenTypeEvent(openType)
+    if (!handleEvent) return
 
     if (openType === 'share') {
-      handleEvent && handleEvent({
+      const currentPage = getCurrentPage(pageId)
+      const event = {
         from: 'button',
-        target: getCustomEvent('tap', evt, { layoutRef }, props).target
-      })
+        target: getCustomEvent('tap', evt, { layoutRef }, props).target,
+        webViewUrl: currentPage?.__webViewUrl
+      }
+      if (currentPage) {
+        const defaultMessage = {
+          title: global.__mpx.config.rnConfig.projectName || 'AwesomeProject',
+          path: currentPage.route || ''
+        }
+        if (currentPage.onShareAppMessage) {
+          const { promise, ...message } = currentPage.onShareAppMessage(event) || {}
+          if (promise) {
+            Promise.race([Promise.resolve(promise), timer(message)])
+              .then((msg) => {
+                handleEvent(Object.assign({}, defaultMessage, msg))
+              })
+          } else {
+            handleEvent(Object.assign({}, defaultMessage, message))
+          }
+        } else {
+          handleEvent(defaultMessage)
+        }
+      } else {
+        warn('Current page not found')
+        // Todo handleEvent(event)
+      }
     }
 
-    if (openType === 'getUserInfo' && handleEvent && bindgetuserinfo) {
+    if (openType === 'getUserInfo' && bindgetuserinfo) {
       Promise.resolve(handleEvent)
         .then((userInfo) => {
           if (typeof userInfo === 'object') {
@@ -408,6 +441,6 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
   )
 })
 
-Button.displayName = 'mpx-button'
+Button.displayName = 'MpxButton'
 
 export default Button

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

@@ -0,0 +1,70 @@
+import { warn } from '@mpxjs/utils'
+interface Message {
+  id?: string
+  type: string
+  payload?: any
+}
+export default class Bus {
+  _paused: Boolean = false;
+  _messageListeners: { [key: string]: (message: Message) => void } = {}
+  _queue: Message[] = []
+  _send: (message: Message | Message[]) => void
+  _timeoutId: NodeJS.Timeout | null = null
+  constructor (send: (message: Message | Message[]) => void) {
+    this._send = send
+  }
+
+  post (message: Message): Promise<any> {
+    return new Promise((resolve) => {
+      if (message.type !== 'set' && message.id) {
+        this._messageListeners[message.id] = resolve
+      }
+
+      if (!this._paused) {
+        this._queue.push(message)
+        this.startBatching()
+      } else {
+        this._queue.push(message)
+      }
+    })
+  }
+
+  handle (message: Message): void {
+    if (!message.id) return
+    const handler = this._messageListeners[message.id]
+    delete this._messageListeners[message.id]
+
+    if (handler) {
+      handler(message)
+    } else {
+      warn(`Received unexpected message: ${message}`)
+    }
+  }
+
+  pause (): void {
+    this._paused = true
+  }
+
+  resume (): void {
+    this._paused = false
+    this._send(this._queue)
+    this._queue = []
+  }
+
+  startBatching (): void {
+    if (this._timeoutId) return
+
+    this._timeoutId = setTimeout(() => {
+      this._send(this._queue)
+      this._queue = []
+      this._timeoutId = null
+    }, 16)
+  }
+
+  clearBatchingTimeout (): void {
+    if (this._timeoutId) {
+      clearTimeout(this._timeoutId)
+      this._timeoutId = null
+    }
+  }
+}

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

@@ -0,0 +1,18 @@
+import { WebviewMessage, CanvasInstance, registerWebviewMethods } from './utils'
+
+const METHODS = ['addColorStop']
+export default class CanvasGradient {
+  private canvas: CanvasInstance;
+  [key: string]: any;
+  constructor (canvas: CanvasInstance, noOnConstruction = false) {
+    this.canvas = canvas
+    registerWebviewMethods(this, METHODS)
+    if (this.onConstruction && !noOnConstruction) {
+      this.onConstruction()
+    }
+  }
+
+  postMessage (message: WebviewMessage) {
+    return this.canvas.postMessage(message)
+  }
+}

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

@@ -0,0 +1,87 @@
+import { CanvasInstance, WebviewMessage, registerWebviewProperties, registerWebviewMethods, registerWebviewTarget } from './utils'
+
+const PROPERTIES = {
+  direction: 'inherit',
+  fillStyle: '#000',
+  filter: 'none',
+  font: '10px sans-serif',
+  fontKerning: 'auto',
+  fontStretch: 'auto',
+  fontVariantCaps: 'normal',
+  globalAlpha: 1.0,
+  globalCompositeOperation: 'source-over',
+  imageSmoothingEnabled: 'true',
+  imageSmoothingQuality: 'low',
+  letterSpacing: '0px',
+  lineCap: 'butt',
+  lineDashOffset: 0.0,
+  lineJoin: 'miter',
+  lineWidth: 1.0,
+  miterLimit: 10.0,
+  shadowBlur: 0,
+  shadowColor: 'rgba(0,0,0,0)',
+  shadowOffsetX: 0,
+  shadowOffsetY: 0,
+  strokeStyle: '#000',
+  textAlign: 'start',
+  textBaseline: 'alphabetic',
+  textRendering: 'auto',
+  wordSpacing: '0px'
+}
+
+const METHODS = [
+  'arc',
+  'arcTo',
+  'beginPath',
+  'bezierCurveTo',
+  'clearRect',
+  'clip',
+  'closePath',
+  'createConicGradient',
+  'createImageData',
+  'createLinearGradient',
+  'createPattern',
+  'createRadialGradient',
+  'drawFocusIfNeeded',
+  'drawImage',
+  'ellipse',
+  'fill',
+  'fillRect',
+  'fillText',
+  'getImageData',
+  'getLineDash',
+  'getTransform',
+  'lineTo',
+  'measureText',
+  'moveTo',
+  'putImageData',
+  'quadraticCurveTo',
+  'rect',
+  'reset',
+  'resetTransform',
+  'restore',
+  'rotate',
+  'roundRect',
+  'save',
+  'scale',
+  'setLineDash',
+  'setTransform',
+  'stroke',
+  'strokeRect',
+  'strokeText',
+  'transform',
+  'translate'
+]
+export default class CanvasRenderingContext2D {
+  canvas: CanvasInstance
+  constructor (canvas: CanvasInstance) {
+    this.canvas = canvas
+    registerWebviewTarget(this, 'context2D')
+    registerWebviewProperties(this, PROPERTIES)
+    registerWebviewMethods(this, METHODS)
+  }
+
+  postMessage (message: WebviewMessage) {
+    return this.canvas.postMessage(message)
+  }
+}

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

@@ -0,0 +1,102 @@
+import { WebviewMessage, WEBVIEW_TARGET, registerWebviewProperties, CanvasInstance } from './utils'
+
+const PROPERTIES = {
+  crossOrigin: undefined,
+  height: undefined,
+  src: undefined,
+  width: undefined
+}
+
+export class Image {
+  [WEBVIEW_TARGET]: string;
+  canvas: any;
+  width: number;
+  height: number;
+  private _loadListener: any;
+  private _errorListener: any;
+  private _onload: ((...args: any[]) => void);
+  private _onerror: ((...args: any[]) => void);
+  [key: string]: any;
+
+  constructor (canvas: CanvasInstance, width?: number, height?: number, noOnConstruction = false) {
+    this.canvas = canvas
+    registerWebviewProperties(this, PROPERTIES)
+
+    if (width) {
+      this.width = width
+    }
+    if (height) {
+      this.height = height
+    }
+
+    if (this.onConstruction && !noOnConstruction) {
+      this.onConstruction()
+      this.postMessage({
+        type: 'listen',
+        payload: {
+          types: ['error', 'load'],
+          target: this[WEBVIEW_TARGET]
+        }
+      })
+    }
+  }
+
+  postMessage (message: WebviewMessage) {
+    return this.canvas.postMessage(message)
+  }
+
+  addEventListener (type: 'load' | 'error', callbackFn: Function) {
+    return this.canvas.addMessageListener((message: WebviewMessage) => {
+      const target = message?.payload?.target as { [key: string]: any } || {}
+      if (
+        message &&
+        message.type === 'event' &&
+        target[WEBVIEW_TARGET] === this[WEBVIEW_TARGET] &&
+        message.payload.type === type
+      ) {
+        for (const key in target) {
+          const value = target[key]
+          if (key in this && this[key] !== value) {
+            this[key] = value
+          }
+        }
+        callbackFn({
+          ...message.payload,
+          target: this
+        })
+      }
+    })
+  }
+
+  set onload (callback: ((...args: any[]) => void)) {
+    this._onload = callback
+    if (this._loadListener) {
+      this.canvas.removeMessageListener(this._loadListener)
+    }
+    if (callback) {
+      this._loadListener = this.addEventListener('load', callback)
+    }
+  }
+
+  get onload (): ((...args: any[]) => void) {
+    return this._onload
+  }
+
+  set onerror (callback: ((...args: any[]) => void)) {
+    this._onerror = callback
+    if (this._errorListener) {
+      this.canvas.removeMessageListener(this._errorListener)
+    }
+    if (callback) {
+      this._errorListener = this.addEventListener('error', callback)
+    }
+  }
+
+  get onerror () : ((...args: any[]) => void) {
+    return this._onerror
+  }
+}
+
+export function createImage (canvas: CanvasInstance, width?: number, height?: number) {
+  return new Image(canvas, width, height)
+}