@mpxjs/webpack-plugin 2.9.67 → 2.9.70-alpha.0

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

@@ -47,9 +47,32 @@ const InitialValue = Object.assign({
 const TransformOrigin = 'transformOrigin';
 // transform
 const isTransform = (key) => Object.keys(TransformInitial).includes(key);
+// 多value解析
+const parseValues = (str, char = ' ') => {
+    let stack = 0;
+    let temp = '';
+    const result = [];
+    for (let i = 0; i < str.length; i++) {
+        if (str[i] === '(') {
+            stack++;
+        }
+        else if (str[i] === ')') {
+            stack--;
+        }
+        // 非括号内 或者 非分隔字符且非空
+        if (stack !== 0 || (str[i] !== char && str[i] !== ' ')) {
+            temp += str[i];
+        }
+        if ((stack === 0 && str[i] === char) || i === str.length - 1) {
+            result.push(temp);
+            temp = '';
+        }
+    }
+    return result;
+};
 // parse string transform, eg: transform: 'rotateX(45deg) rotateZ(0.785398rad)'
 const parseTransform = (transformStr) => {
-    const values = transformStr.trim().split(/\s+/);
+    const values = parseValues(transformStr);
     const transform = [];
     values.forEach(item => {
         const match = item.match(/([/\w]+)\(([^)]+)\)/);
@@ -73,7 +96,7 @@ const parseTransform = (transformStr) => {
                     break;
                 case 'matrix':
                 case 'matrix3d':
-                    transform.push({ [key]: val.split(',').map(val => +val) });
+                    transform.push({ [key]: parseValues(val, ',').map(val => +val) });
                     break;
                 case 'translate':
                 case 'scale':
@@ -84,8 +107,8 @@ const parseTransform = (transformStr) => {
                     {
                         // 2 个以上的值处理
                         key = key.replace('3d', '');
-                        const vals = val.split(',', key === 'rotate' ? 4 : 3);
-                        // scale(.5) === scaleX(.5) scaleY(.5) 这里处理一下
+                        const vals = parseValues(val, ',').splice(0, key === 'rotate' ? 4 : 3);
+                        // scale(.5) === scaleX(.5) scaleY(.5)
                         if (vals.length === 1 && key === 'scale') {
                             vals.push(vals[0]);
                         }
@@ -183,11 +206,14 @@ export default function useAnimationHooks(props) {
             }
             // 添加每个key的多次step动画
             animatedKeys.forEach(key => {
-                let toVal = (rules.get(key) || transform.get(key));
                 // key不存在，第一轮取shareValMap[key]value，非第一轮取上一轮的
-                if (toVal === undefined) {
-                    toVal = index > 0 ? lastValueMap[key] : shareValMap[key].value;
-                }
+                const toVal = rules.get(key) !== undefined
+                    ? rules.get(key)
+                    : transform.get(key) !== undefined
+                        ? transform.get(key)
+                        : index > 0
+                            ? lastValueMap[key]
+                            : shareValMap[key].value;
                 const animation = getAnimation({ key, value: toVal }, { delay, duration, easing }, needSetCallback ? setTransformOrigin : undefined);
                 needSetCallback = false;
                 if (!sequence[key]) {
@@ -298,6 +324,6 @@ export default function useAnimationHooks(props) {
                 styles[key] = shareValMap[key].value;
             }
             return styles;
-        }, Object.assign({}, originalStyle));
+        }, {});
     });
 }

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

@@ -1,13 +1,16 @@
-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, isNumber, 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 SVG_REGEXP = /https?:\/\/.*\.(?:svg)/i;
 export const BACKGROUND_REGEX = /^background(Image|Size|Repeat|Position)$/;
-export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines/;
+export const TEXT_PROPS_REGEX = /ellipsizeMode|numberOfLines|allowFontScaling/;
 export const DEFAULT_FONT_SIZE = 16;
 export const HIDDEN_STYLE = {
     opacity: 0
@@ -24,10 +27,7 @@ const safeAreaInsetMap = {
 };
 function getSafeAreaInset(name) {
     const navigation = getFocusedNavigation();
-    const insets = {
-        ...initialWindowMetrics?.insets,
-        ...navigation?.insets
-    };
+    const insets = extendObject({}, initialWindowMetrics?.insets, navigation?.insets);
     return insets[safeAreaInsetMap[name]];
 }
 export function omit(obj, fields) {
@@ -69,7 +69,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 = '') => {
@@ -79,23 +79,13 @@ export const parseUrl = (cssUrl = '') => {
     return match?.[1];
 };
 export const getRestProps = (transferProps = {}, originProps = {}, deletePropsKey = []) => {
-    return {
-        ...transferProps,
-        ...omit(originProps, deletePropsKey)
-    };
+    return extendObject({}, transferProps, omit(originProps, deletePropsKey));
 };
 export function isText(ele) {
     if (isValidElement(ele)) {
         const displayName = ele.type?.displayName;
         const isCustomText = ele.type?.isCustomText;
-        return displayName === 'MpxText' || displayName === 'Text' || !!isCustomText;
-    }
-    return false;
-}
-export function isEmbedded(ele) {
-    if (isValidElement(ele)) {
-        const displayName = ele.type?.displayName || '';
-        return ['mpx-checkbox', 'mpx-radio', 'mpx-switch'].includes(displayName);
+        return displayName === 'MpxText' || displayName === 'MpxSimpleText' || displayName === 'Text' || !!isCustomText;
     }
     return false;
 }
@@ -238,6 +228,14 @@ function transformCalc(styleObj, calcKeyPaths, formatter) {
         });
     });
 }
+const stringifyProps = ['fontWeight'];
+function transformStringify(styleObj) {
+    stringifyProps.forEach((prop) => {
+        if (isNumber(styleObj[prop])) {
+            styleObj[prop] = '' + styleObj[prop];
+        }
+    });
+}
 export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext, parentFontSize, parentWidth, parentHeight }) {
     const varStyle = {};
     const normalStyle = {};
@@ -336,6 +334,8 @@ export function useTransformStyle(styleObj = {}, { enableVar, externalVarContext
             }
         }
     });
+    // transform number enum stringify
+    transformStringify(normalStyle);
     return {
         normalStyle,
         hasSelfPercent,
@@ -402,7 +402,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 ? HIDDEN_STYLE : {};
+    const layoutStyle = useMemo(() => { return !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {}; }, [hasLayoutRef.current]);
     const layoutProps = {};
     const enableOffset = props['enable-offset'];
     if (hasSelfPercent || onLayout || enableOffset) {
@@ -433,8 +433,8 @@ export function wrapChildren(props = {}, { hasVarDec, varContext, textStyle, tex
     if (textStyle || textProps) {
         children = Children.map(children, (child) => {
             if (isText(child)) {
-                const style = { ...textStyle, ...child.props.style };
-                return cloneElement(child, { ...textProps, style });
+                const style = extendObject({}, textStyle, child.props.style);
+                return cloneElement(child, extendObject({}, textProps, { style }));
             }
             return child;
         });
@@ -444,6 +444,34 @@ 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) {
@@ -453,3 +481,22 @@ export function flatGesture(gestures = []) {
         return gesture?.current ? [gesture] : [];
     })) || [];
 }
+export const extendObject = Object.assign;
+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,6 +1,6 @@
 import { useRef } from 'react'
-import { NativeSyntheticEvent } from 'react-native'
-import { omit } from './utils'
+import { hasOwn, collectDataset } from '@mpxjs/utils'
+import { omit, extendObject } from './utils'
 import eventConfigMap from './event.config'
 import {
   Props,
@@ -9,7 +9,6 @@ import {
   UseInnerPropsConfig,
   InnerRef,
   SetTimeoutReturnType,
-  DataSetType,
   LayoutRef,
   NativeTouchEvent
 } from './types/getInnerListeners'
@@ -30,17 +29,22 @@ const getTouchEvent = (
   } = nativeEvent
   const { id } = props
   const { layoutRef } = config
-  return {
-    ...event,
-    type,
-    timeStamp: timestamp,
-    currentTarget: {
-      ...(event.currentTarget || {}),
+
+  const currentTarget = extendObject(
+    {},
+    event.currentTarget,
+    {
       id: id || '',
-      dataset: getDataSet(props),
+      dataset: collectDataset(props),
       offsetLeft: layoutRef?.current?.offsetLeft || 0,
       offsetTop: layoutRef?.current?.offsetTop || 0
-    },
+    }
+  )
+
+  return extendObject({}, event, {
+    type,
+    timeStamp: timestamp,
+    currentTarget,
     detail: {
       x: pageX,
       y: pageY
@@ -66,20 +70,7 @@ const getTouchEvent = (
     persist: event.persist,
     stopPropagation: event.stopPropagation,
     preventDefault: event.preventDefault
-  }
-}
-
-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 = (
@@ -88,21 +79,20 @@ export const getCustomEvent = (
   { detail = {}, layoutRef }: { detail?: Record<string, unknown>; layoutRef: LayoutRef },
   props: Props = {}
 ) => {
-  return {
-    ...oe,
+  const targetInfo = extendObject({}, oe.target, {
+    id: props.id || '',
+    dataset: collectDataset(props),
+    offsetLeft: layoutRef?.current?.offsetLeft || 0,
+    offsetTop: layoutRef?.current?.offsetTop || 0
+  })
+  return extendObject({}, oe, {
     type,
     detail,
-    target: {
-      ...(oe.target || {}),
-      id: props.id || '',
-      dataset: getDataSet(props),
-      offsetLeft: layoutRef?.current?.offsetLeft || 0,
-      offsetTop: layoutRef?.current?.offsetTop || 0
-    },
+    target: targetInfo,
     persist: oe.persist,
     stopPropagation: oe.stopPropagation,
     preventDefault: oe.preventDefault
-  }
+  })
 }
 
 const useInnerProps = (
@@ -143,10 +133,10 @@ const useInnerProps = (
     ...userRemoveProps
   ]
 
-  propsRef.current = { ...props, ...additionalProps }
+  propsRef.current = extendObject({}, props, additionalProps)
 
   for (const key in eventConfigMap) {
-    if (propsRef.current[key]) {
+    if (hasOwn(propsRef.current, key)) {
       eventConfig[key] = eventConfigMap[key]
     }
   }
@@ -289,9 +279,11 @@ const useInnerProps = (
 
   const events: Record<string, (e: NativeTouchEvent) => void> = {}
 
-  const transformedEventKeys: string[] = []
+  let transformedEventKeys: string[] = []
   for (const key in eventConfig) {
-    transformedEventKeys.push(...eventConfig[key])
+    if (propsRef.current[key]) {
+      transformedEventKeys = transformedEventKeys.concat(eventConfig[key])
+    }
   }
 
   const finalEventKeys = [...new Set(transformedEventKeys)]
@@ -304,9 +296,10 @@ const useInnerProps = (
 
   const rawEventKeys = Object.keys(eventConfig)
 
-  return {
-    ...events,
-    ...omit(propsRef.current, [...rawEventKeys, ...removeProps])
-  }
+  return extendObject(
+    {},
+    events,
+    omit(propsRef.current, [...rawEventKeys, ...removeProps])
+  )
 }
 export default useInnerProps

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, extendObject } 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
 
@@ -174,11 +181,14 @@ const Loading = ({ alone = false }: { alone: boolean }): JSX.Element => {
     }
   }, [])
 
-  const loadingStyle = {
-    ...styles.loading,
-    transform: [{ rotate }],
-    marginRight: alone ? 0 : 5
-  }
+  const loadingStyle = extendObject(
+    {},
+    styles.loading,
+    {
+      transform: [{ rotate }],
+      marginRight: alone ? 0 : 5
+    }
+  )
 
   return <Animated.Image testID="loading" style={loadingStyle} source={{ uri: LOADING_IMAGE_URI }} />
 }
@@ -211,6 +221,8 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     bindtouchend
   } = props
 
+  const pageId = useContext(RouteContext)
+
   const formContext = useContext(FormContext)
 
   let submitFn: () => void | undefined
@@ -265,28 +277,28 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
     backgroundColor: plain ? 'transparent' : normalBackgroundColor
   }
 
-  const defaultViewStyle = {
-    ...styles.button,
-    ...(isMiniSize && styles.buttonMini),
-    ...viewStyle
-  }
+  const defaultViewStyle = extendObject(
+    {},
+    styles.button,
+    isMiniSize ? styles.buttonMini : null,
+    viewStyle
+  )
 
-  const defaultTextStyle = {
-    ...styles.text,
-    ...(isMiniSize && styles.textMini),
-    color: plain ? plainTextColor : normalTextColor
-  }
+  const defaultTextStyle = extendObject(
+    {},
+    styles.text,
+    isMiniSize ? styles.textMini : {},
+    { color: plain ? plainTextColor : normalTextColor }
+  )
 
-  const defaultStyle = {
-    ...defaultViewStyle,
-    ...defaultTextStyle
-  }
+  const defaultStyle = extendObject({}, defaultViewStyle, defaultTextStyle)
 
-  const styleObj = {
-    ...defaultStyle,
-    ...style,
-    ...(applyHoverEffect && hoverStyle)
-  }
+  const styleObj = extendObject(
+    {},
+    defaultStyle,
+    style,
+    applyHoverEffect ? hoverStyle : {}
+  )
 
   const {
     hasSelfPercent,
@@ -299,28 +311,52 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const nodeRef = useRef(null)
 
-  useNodesRef(props, ref, nodeRef, { defaultStyle })
+  useNodesRef(props, ref, nodeRef, { style: normalStyle })
 
   const { layoutRef, layoutStyle, layoutProps } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef })
 
-  const { textStyle, backgroundStyle, innerStyle } = splitStyle(normalStyle)
+  const { textStyle, backgroundStyle, innerStyle = {} } = splitStyle(normalStyle)
 
   if (backgroundStyle) {
     warn('Button does not support background image-related styles!')
   }
 
   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') {
@@ -375,15 +411,31 @@ const Button = forwardRef<HandlerRef<View, ButtonProps>, ButtonProps>((buttonPro
 
   const innerProps = useInnerProps(
     props,
-    {
-      ref: nodeRef,
-      style: { ...innerStyle, ...layoutStyle },
-      ...layoutProps,
-      bindtouchstart: onTouchStart,
-      bindtouchend: onTouchEnd,
-      bindtap: onTap
-    },
-    [],
+    extendObject(
+      {
+        ref: nodeRef,
+        style: extendObject({}, innerStyle, layoutStyle)
+      },
+      layoutProps,
+      {
+        bindtouchstart: (bindtouchstart || !disabled) && onTouchStart,
+        bindtouchend: (bindtouchend || !disabled) && onTouchEnd,
+        bindtap: !disabled && onTap
+      }
+    ),
+    [
+      'disabled',
+      'size',
+      'type',
+      'plain',
+      'loading',
+      'hover-class',
+      'hover-style',
+      'hover-start-time',
+      'hover-stay-time',
+      'open-type',
+      'form-type'
+    ],
     {
       layoutRef,
       disableTap: disabled

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)
+  }
+}