zoid - npm Package Compare versions

Comparing version 9.0.85 to 9.0.86

package.json

 {
   "name": "zoid",
-  "version": "9.0.85",
+  "version": "9.0.86",
   "description": "Cross domain components.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/component/component.js

@@ -14,3 +14,3 @@ /* @flow */
 import { getGlobal, destroyGlobal, getInitialParentPayload, isChildComponentWindow } from '../lib';
-import type { CssDimensionsType, StringMatcherType } from '../types';
+import type { CssDimensionsType, StringMatcherType, ContainerReferenceType } from '../types';
 
@@ -139,4 +139,4 @@ import { validateOptions } from './validate';
     clone : () => ZoidComponentInstance<P, X, C>,
-    render : (container? : string | HTMLElement, context? : $Values<typeof CONTEXT>) => ZalgoPromise<void>,
-    renderTo : (target : CrossDomainWindowType, container? : string | HTMLElement, context? : $Values<typeof CONTEXT>) => ZalgoPromise<void>
+    render : (container? : ContainerReferenceType, context? : $Values<typeof CONTEXT>) => ZalgoPromise<void>,
+    renderTo : (target : CrossDomainWindowType, container? : ContainerReferenceType, context? : $Values<typeof CONTEXT>) => ZalgoPromise<void>
 |};
@@ -340,3 +340,3 @@
 
-    const getDefaultContainer = (context : $Values<typeof CONTEXT>, container? : string | HTMLElement) : string | HTMLElement => {
+    const getDefaultContainer = (context : $Values<typeof CONTEXT>, container? : ContainerReferenceType) : ContainerReferenceType => {
         if (container) {
@@ -343,0 +343,0 @@ if (typeof container !== 'string' && !isElement(container)) {

src/component/props.js

@@ -118,2 +118,3 @@ /* @flow */
         onError : (mixed) => ZalgoPromise<void>,
+        container : HTMLElement | void,
         event : EventEmitterType
@@ -127,2 +128,3 @@ |}) => ?T,
         onError : (mixed) => ZalgoPromise<void>,
+        container : HTMLElement | void,
         event : EventEmitterType
@@ -137,2 +139,3 @@ |}) => ?T,
         onError : (mixed) => ZalgoPromise<void>,
+        container : HTMLElement | void,
         event : EventEmitterType
@@ -430,18 +433,15 @@ |}) => T,
 type PropCallback<P, X, R> =
-    ((string, BooleanPropDefinitionType<boolean, P, X>, boolean) => R) &
-    ((string, StringPropDefinitionType<string, P, X>, string) => R) &
-    ((string, NumberPropDefinitionType<number, P, X>, number) => R) &
-    ((string, FunctionPropDefinitionType<Function, P, X>, Function) => R) &
-    ((string, ArrayPropDefinitionType<$ReadOnlyArray<*> | $ReadOnlyArray<*>, P, X>, $ReadOnlyArray<*> | $ReadOnlyArray<*>) => R) &
-    ((string, ObjectPropDefinitionType<Object, P, X>, Object) => R);
+    ((string, BooleanPropDefinitionType<boolean, P, X> | void, boolean) => R) &
+    ((string, StringPropDefinitionType<string, P, X> | void, string) => R) &
+    ((string, NumberPropDefinitionType<number, P, X> | void, number) => R) &
+    ((string, FunctionPropDefinitionType<Function, P, X> | void, Function) => R) &
+    ((string, ArrayPropDefinitionType<$ReadOnlyArray<*> | $ReadOnlyArray<*>, P, X>  | void, $ReadOnlyArray<*> | $ReadOnlyArray<*>) => R) &
+    ((string, ObjectPropDefinitionType<Object, P, X>  | void, Object) => R);
 
 export function eachProp<P, X>(props : PropsType<P>, propsDef : PropsDefinitionType<P, X>, handler : PropCallback<P, X, void>) {
-    for (const key of Object.keys(props)) {
+    // $FlowFixMe[cannot-spread-indexer]
+    for (const key of Object.keys({ ...props, ...propsDef })) {
         const propDef = propsDef[key];
         const value = props[key];
 
-        if (!propDef) {
-            continue;
-        }
-
         // $FlowFixMe[incompatible-call]
@@ -448,0 +448,0 @@ handler(key, propDef, value);

src/parent/parent.js

@@ -12,3 +12,3 @@ /* @flow */
     once, stringifyError, destroyElement, getElementSafe, showElement, hideElement, iframe, memoize, isElementClosed,
-    awaitFrameWindow, popup, normalizeDimension, watchElementForClose, isShadowElement, insertShadowSlot } from 'belter/src';
+    awaitFrameWindow, popup, normalizeDimension, watchElementForClose, isShadowElement, insertShadowSlot, extend } from 'belter/src';
 
@@ -20,3 +20,3 @@ import { ZOID, POST_MESSAGE, CONTEXT, EVENT, METHOD,
 import type { ChildExportsType } from '../child';
-import type { CssDimensionsType } from '../types';
+import type { CssDimensionsType, ContainerReferenceType } from '../types';
 import type { NormalizedComponentOptionsType, AttributesType } from '../component';
@@ -107,3 +107,3 @@
 type RejectInitPromise = (mixed) => ZalgoPromise<void>;
-type GetProxyContainer = (container : string | HTMLElement) => ZalgoPromise<ProxyObject<HTMLElement>>;
+type GetProxyContainer = (container : ContainerReferenceType) => ZalgoPromise<ProxyObject<HTMLElement>>;
 type Show = () => ZalgoPromise<void>;
@@ -165,3 +165,3 @@ type Hide = () => ZalgoPromise<void>;
     target : CrossDomainWindowType,
-    container : string | HTMLElement,
+    container : ContainerReferenceType,
     context : $Values<typeof CONTEXT>,
@@ -202,2 +202,3 @@ rerender : Rerender
     const state = {};
+    const inputProps = {};
     let internalState = {
@@ -213,2 +214,3 @@ visible: true
     let currentChildDomain : ?string;
+    let currentContainer : HTMLElement | void;
 
@@ -343,18 +345,2 @@ const onErrorOverride : ?OnError = overrides.onError;
 
-    const getProxyContainer : GetProxyContainer = (container : string | HTMLElement) : ZalgoPromise<ProxyObject<HTMLElement>> => {
-        if (getProxyContainerOverride) {
-            return getProxyContainerOverride(container);
-        }
-
-        return ZalgoPromise.try(() => {
-            return elementReady(container);
-        }).then(containerElement => {
-            if (isShadowElement(containerElement)) {
-                containerElement = insertShadowSlot(containerElement);
-            }
-
-            return getProxyObject(containerElement);
-        });
-    };
-
     const setProxyWin = (proxyWin : ProxyWindow) : ZalgoPromise<void> => {
@@ -936,13 +922,22 @@ if (setProxyWinOverride) {
 
-    const setProps = (newProps : PropsInputType<P>, isUpdate? : boolean = false) => {
+    const getDefaultPropsInput = () : PropsInputType<P> => {
+        // $FlowFixMe
+        return {};
+    };
+
+    const setProps = (newInputProps : PropsInputType<P> = getDefaultPropsInput()) => {
         if (__DEBUG__ && validate) {
-            validate({ props: newProps });
+            validate({ props: newInputProps });
         }
 
+        const container = currentContainer;
         const helpers = getHelpers();
-        extendProps(propsDef, props, newProps, helpers, isUpdate);
+        extend(inputProps, newInputProps);
+
+        // $FlowFixMe
+        extendProps(propsDef, props, inputProps, helpers, container);
     };
 
     const updateProps = (newProps : PropsInputType<P>) : ZalgoPromise<void> => {
-        setProps(newProps, true);
+        setProps(newProps);
 
@@ -970,2 +965,19 @@ return initPromise.then(() => {
 
+    const getProxyContainer : GetProxyContainer = (container : ContainerReferenceType) : ZalgoPromise<ProxyObject<HTMLElement>> => {
+        if (getProxyContainerOverride) {
+            return getProxyContainerOverride(container);
+        }
+
+        return ZalgoPromise.try(() => {
+            return elementReady(container);
+        }).then(containerElement => {
+            if (isShadowElement(containerElement)) {
+                containerElement = insertShadowSlot(containerElement);
+            }
+
+            currentContainer = containerElement;
+            return getProxyObject(containerElement);
+        });
+    };
+
     const delegate = (context : $Values<typeof CONTEXT>, target : CrossDomainWindowType) : ZalgoPromise<DelegateOverrides> => {
@@ -1029,3 +1041,3 @@ const delegateProps = {};
 
-    const checkAllowRender = (target : CrossDomainWindowType, childDomainMatch : DomainMatcher, container : string | HTMLElement) => {
+    const checkAllowRender = (target : CrossDomainWindowType, childDomainMatch : DomainMatcher, container : ContainerReferenceType) => {
         if (target === window) {
@@ -1071,3 +1083,2 @@ return;
             
-            const buildUrlPromise = buildUrl();
             const buildBodyPromise = buildBody();
@@ -1079,2 +1090,10 @@ const onRenderPromise = event.trigger(EVENT.RENDER);
 
+            const finalSetPropsPromise = getProxyContainerPromise.then(() => {
+                return setProps();
+            });
+
+            const buildUrlPromise = finalSetPropsPromise.then(() => {
+                return buildUrl();
+            });
+
             const buildWindowNamePromise = getProxyWindowPromise.then(proxyWin => {
@@ -1158,3 +1177,3 @@ return buildWindowName({ proxyWin, initialChildDomain, childDomainMatch, target, context });
                 openPrerenderPromise, setStatePromise, prerenderPromise, loadUrlPromise, buildWindowNamePromise, setWindowNamePromise, watchForClosePromise, onDisplayPromise,
-                openBridgePromise, runTimeoutPromise, onRenderedPromise, delegatePromise, watchForUnloadPromise
+                openBridgePromise, runTimeoutPromise, onRenderedPromise, delegatePromise, watchForUnloadPromise, finalSetPropsPromise
             });
@@ -1161,0 +1180,0 @@

src/parent/props.js

 /* @flow */
 
 import { ZalgoPromise } from 'zalgo-promise/src';
-import { dotify, isDefined, extend, base64encode } from 'belter/src';
+import { dotify, isDefined, base64encode, noop } from 'belter/src';
 
 import { eachProp, mapProps, type PropsInputType, type PropsType, type PropsDefinitionType } from '../component/props';
-import { PROP_SERIALIZATION, METHOD } from '../constants';
+import { PROP_SERIALIZATION, METHOD, PROP_TYPE } from '../constants';
 
 import type { ParentHelpers } from './index';
 
-function getDefaultInputProps<P>() : P {
-    // $FlowFixMe[incompatible-type]
-    const defaultInputProps : P = {};
-    return defaultInputProps;
-}
-
-export function extendProps<P, X>(propsDef : PropsDefinitionType<P, X>, props : PropsType<P>, inputProps : PropsInputType<P>, helpers : ParentHelpers<P>, isUpdate : boolean = false) {
-
-    inputProps = inputProps || getDefaultInputProps();
-    extend(props, inputProps);
-
-    const propNames = isUpdate ? [] : [ ...Object.keys(propsDef) ];
-
-    for (const key of Object.keys(inputProps)) {
-        if (propNames.indexOf(key) === -1) {
-            propNames.push(key);
-        }
-    }
-
-    const aliases = [];
-
+export function extendProps<P, X>(propsDef : PropsDefinitionType<P, X>, existingProps : PropsType<P>, inputProps : PropsInputType<P>, helpers : ParentHelpers<P>, container : HTMLElement | void) {
     const { state, close, focus, event, onError } = helpers;
 
-    for (const key of propNames) {
-        const propDef = propsDef[key];
+    // $FlowFixMe
+    eachProp(inputProps, propsDef, (key, propDef, val) => {
+        let valueDetermined = false;
+        let value = val;
 
-        // $FlowFixMe
-        let value = inputProps[key];
+        const getDerivedValue = () => {
+            if (!propDef) {
+                return value;
+            }
 
-        if (!propDef) {
-            continue;
-        }
-
-        const alias = propDef.alias;
-        if (alias) {
-            if (!isDefined(value) && isDefined(inputProps[alias])) {
+            const alias = propDef.alias;
+            if (alias && !isDefined(val) && isDefined(inputProps[alias])) {
                 value = inputProps[alias];
             }
-            aliases.push(alias);
-        }
+    
+            if (propDef.value) {
+                value = propDef.value({ props: existingProps, state, close, focus, event, onError, container });
+            }
+    
+            if (propDef.default && !isDefined(value) && !isDefined(inputProps[key])) {
+                value = propDef.default({ props: existingProps, state, close, focus, event, onError, container });
+            }
 
-        if (propDef.value) {
-            value = propDef.value({ props, state, close, focus, event, onError });
-        }
+            if (isDefined(value)) {
+                if (propDef.type === PROP_TYPE.ARRAY ? !Array.isArray(value) : (typeof value !== propDef.type)) {
+                    throw new TypeError(`Prop is not of type ${ propDef.type }: ${ key }`);
+                }
+            } else {
+                if (propDef.required !== false && !isDefined(inputProps[key])) {
+                    throw new Error(`Expected prop "${ key }" to be defined`);
+                }
+            }
+    
+            if (__DEBUG__ && isDefined(value) && propDef.validate) {
+                // $FlowFixMe
+                propDef.validate({ value, props: inputProps });
+            }
 
-        if (!isDefined(value) && propDef.default) {
-            value = propDef.default({ props, state, close, focus, event, onError });
-        }
-
-        if (isDefined(value)) {
-            if (propDef.type === 'array' ? !Array.isArray(value) : (typeof value !== propDef.type)) {
-                throw new TypeError(`Prop is not of type ${ propDef.type }: ${ key }`);
+            if (isDefined(value) && propDef.decorate) {
+                // $FlowFixMe
+                value = propDef.decorate({ value, props: existingProps, state, close, focus, event, onError, container });
             }
-        }
-        
-        // $FlowFixMe
-        props[key] = value;
-    }
 
-    for (const alias of aliases) {
-        delete props[alias];
-    }
+            return value;
+        };
 
-    eachProp(props, propsDef, (key, propDef, value) => {
-        if (!propDef) {
-            return;
-        }
+        const getter = () => {
+            if (valueDetermined) {
+                return value;
+            }
 
-        if (__DEBUG__ && isDefined(value) && propDef.validate) {
-            // $FlowFixMe[incompatible-call]
-            // $FlowFixMe[incompatible-exact]
-            propDef.validate({ value, props });
-        }
+            valueDetermined = true;
+            return getDerivedValue();
+        };
 
-        if (isDefined(value) && propDef.decorate) {
-            // $FlowFixMe[incompatible-call]
-            const decoratedValue = propDef.decorate({ value, props, state, close, focus, event, onError });
-            // $FlowFixMe[incompatible-type]
-            props[key] = decoratedValue;
-        }
+        Object.defineProperty(existingProps, key, {
+            configurable: true,
+            enumerable:   true,
+            get:          getter
+        });
     });
 
-    for (const key of Object.keys(propsDef)) {
-        const propDef = propsDef[key];
-        // $FlowFixMe
-        const propVal = props[key];
-        if (propDef.required !== false && !isDefined(propVal)) {
-            throw new Error(`Expected prop "${ key }" to be defined`);
-        }
-    }
+    // $FlowFixMe
+    eachProp(existingProps, propsDef, noop);
 }
@@ -110,3 +87,3 @@
 
-            if (value === null || typeof value === 'undefined') {
+            if (value === null || typeof value === 'undefined' || !propDef) {
                 return;
@@ -113,0 +90,0 @@ }

src/types.js

@@ -21,1 +21,3 @@ /* @flow */
 export type StringMatcherType = string | $ReadOnlyArray<string> | RegExp;
+
+export type ContainerReferenceType = string | HTMLElement;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3439723

increased by0.12%

Lines of code

25119

increased by0.04%

No dependency changes