xcomponent - npm Package Compare versions

Comparing version 1.0.48 to 1.0.55

package.json

 {
   "name": "xcomponent",
-  "version": "1.0.48",
+  "version": "1.0.55",
   "description": "Cross domain components.",
@@ -5,0 +5,0 @@ "main": "index.js",

src/component/base.js

 import postRobot from 'post-robot/src';
 
-import { once } from '../lib';
+import { once, copyProp } from '../lib';
 
@@ -16,10 +16,3 @@
     addProp(options, name, def) {
-
-        if (options.hasOwnProperty(name)) {
-            let descriptor = Object.getOwnPropertyDescriptor(options, name);
-            Object.defineProperty(this, name, descriptor);
-
-        } else {
-            this[name] = def;
-        }
+        copyProp(options, this, name, def);
     }
@@ -47,6 +40,6 @@
 
-    cleanup() {
+    cleanup(err) {
         while (this.cleanupTasks && this.cleanupTasks.length) {
             let task = this.cleanupTasks.pop();
-            task();
+            task(err);
         }
@@ -53,0 +46,0 @@ }

src/component/child/index.js

@@ -7,8 +7,8 @@
 import { BaseComponent } from '../base';
-import { getParentComponentWindow, getParentWindow, getComponentMeta, isXComponentWindow } from '../window';
-import { noop, extend, onCloseWindow, addEventListener, debounce, replaceObject, get } from '../../lib';
+import { getParentComponentWindow, getParentWindow, getComponentMeta } from '../window';
+import { extend, onCloseWindow, replaceObject, get, onDimensionsChange, setOverflow } from '../../lib';
 import { POST_MESSAGE, CONTEXT_TYPES, CLOSE_REASONS } from '../../constants';
-import { normalizeProps } from '../props';
 import { normalizeChildProps } from './props';
 
+
 /*  Child Component
@@ -26,4 +26,4 @@ ---------------
 
-    constructor(component, options = {}) {
-        super(component, options);
+    constructor(component) {
+        super(component);
         this.component = component;
@@ -33,13 +33,2 @@
 
-        this.validate(options);
-
-        // Handlers for various component lifecycle events
-
-        this.onEnter = this.tryCatch(options.onEnter || noop);
-        this.onClose = this.tryCatch(options.onClose || noop);
-        this.onProps = this.tryCatch(options.onProps || noop, false);
-        this.onError = this.tryCatch(options.onError || (err => { throw err; }));
-
-        this.onInit = new Promise();
-
         // The child can specify some default props if none are passed from the parent. This often makes integrations
@@ -49,44 +38,10 @@ // a little more seamless, as applicaiton code can call props.foo() without worrying about whether the parent
 
-        this.setProps(normalizeProps(this.component, this, options.defaultProps || {}), false);
+        this.onPropHandlers = [];
+
         this.setProps(this.getInitialProps());
 
-        // We support a 'standalone' mode where the child isn't actually created by xcomponent. This may be because
-        // there's an existing full-page implementation which uses redirects. In this case, the user can specify
-        // standalone: true, and defaultProps, and the child component should continue to function in the same way
-        // as if it were created by xcomponent, with the exception that no post-messages will ever be sent.
-
-        this.standalone = options.standalone;
-    }
-
-    /*  Init
-        ----
-
-        Message up to the parent to let them know we've rendered successfully, and get some initial data and props
-    */
-
-    init() {
-
         this.component.log(`init_child`);
 
-        // In standalone mode, we would expect setWindows to fail since there is no parent window and window.name
-        // will not be generated by xcomponent. In this case we can fail silently, whereas normally we'd want to
-        // fail hard here.
-
-        if (!isXComponentWindow() && this.standalone) {
-            this.component.log(`child_standalone`);
-            return;
-        }
-
         this.setWindows();
 
-        // In standalone mode, there's no point messaging back up to our parent -- because we have none. :'(
-
-        if (this.standalone && !getParentWindow()) {
-            return Promise.resolve();
-        }
-
-        if (this.component.autoResize) {
-            this.watchForResize();
-        }
-
         // Send an init message to our parent. This gives us an initial set of data to use that we can use to function.
@@ -99,3 +54,3 @@ //
 
-        return this.sendToParent(POST_MESSAGE.INIT, {
+        this.onInit = this.sendToParent(POST_MESSAGE.INIT, {
 
@@ -109,10 +64,8 @@ exports: this.exports()
 
-            this.onInit.resolve(this);
+            if (this.component.autoResize) {
+                this.watchForResize();
+            }
 
-            this.onEnter.call(this);
+            return this;
 
-        }).catch(err => {
-
-            this.onInit.reject(err);
-            this.onError(err);
         });
@@ -122,2 +75,12 @@ }
 
+    init() {
+        return this.onInit;
+    }
+
+
+    onProps(handler) {
+        this.onPropHandlers.push(handler);
+    }
+
+
     getInitialProps() {
@@ -142,8 +105,7 @@ let componentMeta = getComponentMeta();
 
-    setProps(props = {}, onProps = true) {
+    setProps(props = {}) {
         this.props = this.props || {};
         extend(this.props, normalizeChildProps(this.component, props));
-
-        if (onProps) {
-            this.onProps.call(this);
+        for (let handler of this.onPropHandlers) {
+            handler.call(this, this.props);
         }
@@ -225,4 +187,2 @@ }
 
-            this.onClose(CLOSE_REASONS.PARENT_CLOSE_DETECTED);
-
             // We only need to close ourselves if we're a popup -- otherwise our parent window closing will automatically
@@ -249,18 +209,4 @@ // close us, if we're an iframe
         }
-
-        addEventListener(window, 'beforeunload', () => this.onClose());
     }
 
-
-    /*  Validate
-        --------
-
-        Validate any options passed in to ChildComponent
-    */
-
-    validate(options) {
-
-        // TODO: Implement this
-    }
-
     watchForResize() {
@@ -272,28 +218,23 @@
 
-        let el = document.documentElement;
+        if (this.context === CONTEXT_TYPES.POPUP) {
+            return;
+        }
 
-        let dimensions = {
-            width: el.scrollWidth,
-            height: el.scrollHeight
-        };
+        let el = document.body;
 
-        let resize = debounce((width, height) => {
-            return this.sendToParent(POST_MESSAGE.RESIZE, { width, height });
-        }, 200);
+        setOverflow(el);
 
-        setInterval(() => {
+        let watcher = () => {
+            onDimensionsChange(el).then(dimensions => {
 
-            let newDimensions = {
-                width: el.scrollWidth,
-                height: el.scrollHeight
-            };
+                return this.resize(dimensions.width, dimensions.height);
 
-            if (Math.abs(newDimensions.height - dimensions.height) >= 10) {
-                resize(this.component.dimensions.width, newDimensions.height);
-            }
+            }).then(() => {
 
-            dimensions = newDimensions;
+                setOverflow(el);
+                watcher();
+            });
+        };
 
-        }, 50);
-
+        watcher();
     }
@@ -358,4 +299,2 @@
 
-        this.onClose.call(this, reason);
-
         // Ask our parent window to close us
@@ -362,0 +301,0 @@

src/component/component/index.js

@@ -6,3 +6,3 @@
 import { internalProps } from './props';
-import { isXComponentWindow } from '../window';
+import { isXComponentWindow, getComponentMeta } from '../window';
 import { CONTEXT_TYPES_LIST } from '../../constants';
@@ -58,2 +58,3 @@ import { validate } from './validate';
         this.addProp(options, 'dimensions');
+        this.addProp(options, 'scrolling');
 
@@ -68,7 +69,9 @@ this.addProp(options, 'version', 'latest');
 
-        this.addProp(options, 'envUrls', {});
+        this.addProp(options, 'envUrls');
 
+        this.addProp(options, 'buildUrl');
+
         // A url to use by default to render the component, if not using envs
 
-        this.addProp(options, 'url', this.envUrls[this.defaultEnv]);
+        this.addProp(options, 'url');
 
@@ -83,2 +86,3 @@ // The allowed contexts. For example { iframe: true, lightbox: false, popup: false }. Defaults to true for all.
         this.addProp(options, 'closeDelay');
+        this.addProp(options, 'resizeDelay');
 
@@ -104,2 +108,4 @@ // The default context to render to
 
+        this.addProp(options, 'validateProps');
+
         // A mapping of tag->component so we can reference components by string tag name
@@ -119,2 +125,10 @@
         }
+
+        if (isXComponentWindow()) {
+            let componentMeta = getComponentMeta();
+
+            if (componentMeta.tag === this.tag) {
+                window.xchild = new ChildComponent(this);
+            }
+        }
     }
@@ -146,3 +160,16 @@
     child(options) {
-        return new ChildComponent(this, options);
+
+        if (!window.xchild) {
+            throw new Error(`Child not instantiated`);
+        }
+
+        if (window.xchild.component !== this) {
+            // throw new Error(`Child instantiated from a different component: ${window.xchild.tag}`);
+        }
+
+        if (options && options.onEnter) {
+            options.onEnter.call(window.xchild);
+        }
+
+        return window.xchild;
     }
@@ -158,5 +185,3 @@
     attach(options) {
-        let component = this.child(options);
-        component.init();
-        return component;
+        return this.child(options);
     }
@@ -240,2 +265,7 @@
     }
+}
+
+
+export function getByTag(tag) {
+    return components[tag];
 }

src/component/component/props.js

@@ -25,3 +25,5 @@
         required: false,
-        queryParam: false
+        queryParam: false,
+        promise: true,
+        sendToChild: false
     },
@@ -41,2 +43,7 @@
 
+    dimensions: {
+        type: 'object',
+        required: false
+    },
+
     // A millisecond timeout before onTimeout is called
@@ -77,4 +84,6 @@
         promisify: true,
-        def(err) {
-            return this.props.onError(err);
+        def() {
+            return function(err) {
+                return this.props.onError(err);
+            };
         }
@@ -89,4 +98,6 @@ },
         promisify: true,
-        def(err) {
-            console.error(err.message, '\n', err.stack || err.toString());
+        def() {
+            return function(err) {
+                console.error(err.message, '\n', err.stack || err.toString());
+            };
         },
@@ -93,0 +104,0 @@ once: true

src/component/component/validate.js

@@ -102,3 +102,3 @@
 
-    if (!options.url || !(typeof options.url === 'string')) {
+    if ((!options.url || !(typeof options.url === 'string')) && !options.buildUrl) {
         if (!options.defaultEnv || typeof options.defaultEnv !== 'string') {
@@ -105,0 +105,0 @@ if (options.envUrls) {

src/component/parent/drivers.js

@@ -46,6 +46,7 @@
             this.iframe = iframe(element, null, {
-                name: this.childWindowName
+                name: this.childWindowName,
+                scrolling: this.component.scrolling === false ? 'no' : 'yes'
             });
 
-            let dimensions = this.component.dimensions || {};
+            let dimensions = this.props.dimensions || this.component.dimensions || {};
             this.resize(dimensions.width, dimensions.height);
@@ -114,3 +115,3 @@ this.restyle();
 
-            let dimensions = this.component.dimensions || {};
+            let dimensions = this.props.dimensions || this.component.dimensions || {};
 
@@ -129,3 +130,9 @@ let pos = getPosition({
                 top: pos.y,
-                left: pos.x
+                left: pos.x,
+                location: 1,
+                status: 1,
+                toolbar: 0,
+                menubar: 0,
+                resizable: 1,
+                scrollbars: 1
             });
@@ -132,0 +139,0 @@

src/component/parent/index.js

@@ -8,3 +8,3 @@
 import { buildChildWindowName, isXComponentWindow } from '../window';
-import { getParentWindow, noop, onCloseWindow, addEventListener, getParentNode, createElement, uniqueID, stringifyWithFunctions,
+import { getParentWindow, onCloseWindow, addEventListener, getParentNode, createElement, uniqueID, noop, getElement,
          capitalizeFirstLetter, addEventToClass, template, isWindowClosed, extend, delay, replaceObject, extendUrl, getFrame } from '../../lib';
@@ -71,3 +71,3 @@ import { POST_MESSAGE, CONTEXT_TYPES, CONTEXT_TYPES_LIST, CLASS_NAMES, EVENT_NAMES, CLOSE_REASONS, XCOMPONENT } from '../../constants';
 
-        let props = replaceObject(this.props, (value, key, fullKey) => {
+        let props = replaceObject(this.getPropsForChild(), (value, key, fullKey) => {
             if (value instanceof Function) {
@@ -98,2 +98,5 @@ return {
         validateProps(this.component, props, required);
+        if (this.component.validateProps) {
+            this.component.validateProps(this.component, props, required);
+        }
         extend(this.props, normalizeParentProps(this.component, this, props, required));
@@ -116,13 +119,24 @@ }
 
-            let url;
+            return Promise.resolve().then(() => {
 
-            if (this.props.url) {
-                url = this.props.url;
-            } else if (this.props.env) {
-                url = this.component.envUrls[this.props.env];
-            } else {
-                url = this.component.url;
-            }
+                if (this.props.url) {
+                    return this.props.url;
+                }
 
-            return extendUrl(url, { query: queryProps });
+            }).then(url => {
+
+                if (!url) {
+                    if (this.props.env && this.component.envUrls) {
+                        url = this.component.envUrls[this.props.env];
+                    } else if (this.component.defaultEnv && this.component.envUrls) {
+                        url = this.component.envUrls[this.component.defaultEnv];
+                    } else if (this.component.buildUrl) {
+                        url = this.component.buildUrl(this);
+                    } else {
+                        url = this.component.url;
+                    }
+                }
+
+                return extendUrl(url, { query: queryProps });
+            });
         });
@@ -132,2 +146,18 @@ }
 
+    getPropsForChild(props) {
+
+        props = props || this.props;
+
+        let result = {};
+
+        for (let key of Object.keys(props)) {
+            if (this.component.props[key].sendToChild !== false) {
+                result[key] = props[key];
+            }
+        }
+
+        return result;
+    }
+
+
     /*  Update Props
@@ -139,22 +169,22 @@ ------------
 
-    updateProps(props) {
+    updateProps(props = {}) {
         return Promise.resolve().then(() => {
 
-            let oldProps = stringifyWithFunctions(this.props);
+            let changed = false;
 
-            this.setProps(props, false);
+            for (let key of Object.keys(props)) {
+                if (props[key] !== this.props[key]) {
+                    changed = true;
+                    break;
+                }
+            }
 
-            if (!this.initialPropsSent) {
+            if (!changed) {
                 return;
             }
 
+            this.setProps(props, false);
+
             return this.onInit.then(() => {
-
-                // Only send down the new props if they do not match the old, and if we have already sent down initial props
-
-                if (oldProps !== stringifyWithFunctions(this.props)) {
-                    this.component.log('parent_update_props');
-
-                    return this.childExports.updateProps(this.props);
-                }
+                return this.childExports.updateProps(this.getPropsForChild(props));
             });
@@ -230,2 +260,6 @@ });
 
+            if (element && !getElement(element)) {
+                throw new Error(`Can not find element: ${element}`);
+            }
+
             context = this.getRenderContext(element, context);
@@ -335,33 +369,34 @@ this.component.log(`render_${context}`, { context, element });
 
-        let renderPromise = this.render(element, CONTEXT_TYPES.POPUP);
+        this.createParentTemplate = noop;
 
-        let renderParentPromise = postRobot.sendToParent(POST_MESSAGE.RENDER_LOCAL, {
+        return Promise.all([
 
-            ...options,
+            this.render(element, CONTEXT_TYPES.POPUP),
 
-            tag: this.component.tag,
-            context,
-            element,
+            postRobot.sendToParent(POST_MESSAGE.RENDER_LOCAL, {
 
-            overrides: {
-                close: (reason) => this.close(reason),
-                focus: () => this.focus()
-            },
+                ...options,
 
-            options: {
-                props: this.props
-            }
+                tag: this.component.tag,
+                context,
+                element,
 
-        }).then(data => {
+                overrides: {
+                    close: (reason) => this.close(reason),
+                    focus: () => this.focus()
+                },
 
-            this.registerForCleanup(data.destroy);
-            extend(this, data.overrides);
-        });
+                options: {
+                    props: this.props
+                }
 
-        return Promise.all([
-            renderPromise,
-            renderParentPromise
+            }).then(data => {
 
+                this.registerForCleanup(data.destroy);
+                extend(this, data.overrides);
+            })
+
         ]).then(() => {
-            return renderPromise;
+
+            return this.onInit;
         });
@@ -579,4 +614,2 @@ }
 
-                    this.setForCleanup('initialPropsSent', true);
-
                     // Let the child know what its context is, and what its initial props are.
@@ -587,4 +620,4 @@
                     return {
-                        context: this.context,
-                        props: this.props
+                        props: this.getPropsForChild(),
+                        context: this.context
                     };
@@ -708,3 +741,7 @@ });
         this.component.log(`resize`, { height, width });
-        return RENDER_DRIVERS[this.context].resize.call(this, width, height);
+        RENDER_DRIVERS[this.context].resize.call(this, width, height);
+
+        if (this.component.resizeDelay) {
+            return delay(this.component.resizeDelay);
+        }
     }
@@ -779,3 +816,3 @@
             if (this.childExports && !isWindowClosed(this.window)) {
-                this.childExports.close().catch(noop);
+                // this.childExports.close().catch(noop);
             }
@@ -867,4 +904,8 @@
 
-        let parentTemplate = this.component.parentTemplate instanceof Function ? this.component.parentTemplate() : this.component.parentTemplate;
+        let parentTemplate = this.component.parentTemplate;
 
+        if (!parentTemplate) {
+            return;
+        }
+
         this.parentTemplate = createElement('div', {
@@ -886,4 +927,6 @@
 
-        }, document.body);
+        });
 
+        document.body.appendChild(this.parentTemplate);
+
         if (RENDER_DRIVERS[context].focusable) {
@@ -895,4 +938,4 @@ addEventToClass(this.parentTemplate, CLASS_NAMES.FOCUS, EVENT_NAMES.CLICK, event =>  this.focus());
 
-        this.registerForCleanup(() => {
-            if (this.component.autocloseParentTemplate && this.parentTemplate) {
+        this.registerForCleanup(err => {
+            if (err || (this.component.autocloseParentTemplate && this.parentTemplate)) {
                 this.closeParentTemplate();
@@ -918,7 +961,7 @@ }
 
-    destroy() {
+    destroy(err) {
         if (this.hasCleanupTasks()) {
             this.component.log(`destroy`);
             logger.flush();
-            this.cleanup();
+            this.cleanup(err);
         }
@@ -937,3 +980,3 @@ }
         this.onInit.reject(err);
-        this.destroy();
+        this.destroy(err);
         return this.props.onError(err);
@@ -961,2 +1004,8 @@ }
     };
+}
+
+export function destroyAll() {
+    while (activeComponents.length) {
+        activeComponents[0].destroy();
+    }
 }

src/component/parent/validate.js

@@ -21,2 +21,6 @@
 
+    if (value.then && prop.promise) {
+        return;
+    }
+
     if (prop.type === 'function') {
@@ -32,3 +36,3 @@
 
-            if (!(prop.getter && value instanceof Function)) {
+            if (!(prop.getter && (value instanceof Function || (value && value.then)))) {
                 throw new Error(`Prop is not of type string: ${key}`);
@@ -98,5 +102,5 @@ }
 
-    if (props.env && !component.envUrls[props.env]) {
+    if (props.env && component.envUrls && !component.envUrls[props.env]) {
         throw new Error(`Invalid env: ${props.env}`);
     }
 }

src/component/props.js

 
-import { SyncPromise as Promise } from 'sync-browser-mocks/src/promise';
 import { noop, denodeify, once, memoize, promisify, getter } from '../lib';
@@ -12,20 +11,25 @@ import { PROP_DEFER_TO_URL } from '../constants';
 
-export function normalizeProp(component, instance, props, key) {
+export function normalizeProp(component, instance, props, key, value) {
 
     let prop = component.props[key];
-    let value = props[key];
 
     let hasProp = props.hasOwnProperty(key) && value !== null && value !== undefined && value !== '';
 
-    // Substitute in provided default. If prop.def is a function, we call it to get the default.
-
     if (!hasProp && prop.def) {
-        value = (prop.def instanceof Function && prop.type !== 'function') ? prop.def() : prop.def;
+        value = (prop.def instanceof Function) ? prop.def.call(component, props) : prop.def;
     }
 
+    if (prop.decorate) {
+        value = prop.decorate(value);
+    }
+
     if (value === PROP_DEFER_TO_URL) {
+        return value;
+    }
 
-        // pass
+    if (prop.getter) {
+        return getter(value instanceof Function ? value : () => value);
+    }
 
-    } else if (prop.type === 'boolean') {
+    if (prop.type === 'boolean') {
 
@@ -88,3 +92,3 @@ value = Boolean(value);
     } else if (prop.type === 'string') {
-        value = value || '';
+        // pass
 
@@ -95,16 +99,4 @@ } else if (prop.type === 'object') {
     } else if (prop.type === 'number') {
-        value = parseInt(value || 0, 10);
-    }
-
-    if (prop.getter && value !== PROP_DEFER_TO_URL) {
-
-        if (value instanceof Function) {
-            value = getter(value.bind(instance));
-
-        } else {
-            let val = value;
-
-            value = memoize(() => {
-                return Promise.resolve(val);
-            });
+        if (value !== undefined) {
+            value = parseInt(value, 10);
         }
@@ -130,3 +122,3 @@ }
         if (required || props.hasOwnProperty(key)) {
-            result[key] = normalizeProp(component, instance, props, key);
+            result[key] = normalizeProp(component, instance, props, key, props[key]);
         }
@@ -133,0 +125,0 @@ }

src/index.js

@@ -8,2 +8,4 @@ import postRobot from 'post-robot/src';
 
+export { getByTag, destroyAll } from './component';
+
 export * from './error';
@@ -10,0 +12,0 @@

src/lib/dom.js

 
+import { SyncPromise as Promise } from 'sync-browser-mocks/src/promise';
 import { once, noop, memoize } from './fn';
@@ -226,6 +227,2 @@ import { extend, get, safeInterval, urlEncode } from './util';
 
-    if (container) {
-        container.appendChild(element);
-    }
-
     return element;
@@ -427,2 +424,75 @@ }
     }
+}
+
+export function getCurrentDimensions(el) {
+    return {
+        width: el.offsetWidth,
+        height: el.offsetHeight
+    };
+}
+
+export function changeStyle(el, styles) {
+    return new Promise(resolve => {
+
+        for (let key of Object.keys(styles)) {
+            el.style[key] = styles[key];
+        }
+
+        setTimeout(resolve, 1);
+    });
+}
+
+export function setOverflow(el, overflow = 'auto') {
+
+    let dimensions = getCurrentDimensions(el);
+
+    if (window.innerHeight < dimensions.height) {
+        el.style.overflowY = overflow;
+    } else {
+        el.style.overflowY = 'hidden';
+    }
+
+    if (window.innerWidth < dimensions.width) {
+        el.style.overflowX = overflow;
+    } else {
+        el.style.overflowX = 'hidden';
+    }
+}
+
+export function onDimensionsChange(el, delay = 200, threshold = 0) {
+
+    let dimensionsChanged = (one, two) => {
+        return Math.abs(one.height - two.height) > threshold || Math.abs(one.width - two.width) > threshold;
+    };
+
+    return new Promise(resolve => {
+        let currentDimensions = getCurrentDimensions(el);
+
+        let interval = setInterval(() => {
+            let newDimensions = getCurrentDimensions(el);
+
+            if (dimensionsChanged(currentDimensions, newDimensions)) {
+
+                let { overflow, overflowX, overflowY }  = el.style;
+
+                if (overflow === 'hidden' || overflowX === overflowY === 'hidden') {
+                    clearInterval(interval);
+                    return resolve(newDimensions);
+                }
+
+                return changeStyle(el, { overflow: 'hidden', overflowX: 'hidden', overflowY: 'hidden' }).then(() => {
+                    let noOverflowDimensions = getCurrentDimensions(el);
+
+                    return changeStyle(el, { overflow, overflowX, overflowY }).then(() => {
+
+                        if (dimensionsChanged(currentDimensions, noOverflowDimensions)) {
+                            clearInterval(interval);
+                            return resolve(noOverflowDimensions);
+                        }
+                    });
+                });
+            }
+
+        }, delay);
+    });
 }

src/lib/fn.js

@@ -59,22 +59,2 @@
 
-
-export function throttle(method, time = 100) {
-
-    let enabled = true;
-
-    return function() {
-
-        if (!enabled) {
-            return;
-        }
-
-        enabled = false;
-        setTimeout(() => {
-            enabled = true;
-        }, time);
-
-        return method.apply(this, arguments);
-    };
-}
-
 export function debounce(method, time = 100) {
@@ -81,0 +61,0 @@

src/lib/promise.js

@@ -57,3 +57,3 @@
 
-            if (result !== undefined) {
+            if (method.length === 0 || result !== undefined) {
                 return resolve(result);
@@ -60,0 +60,0 @@ }

src/lib/util.js

@@ -260,2 +260,14 @@
     return newobj;
+}
+
+
+
+export function copyProp(source, target, name, def) {
+    if (source.hasOwnProperty(name)) {
+        let descriptor = Object.getOwnPropertyDescriptor(source, name);
+        Object.defineProperty(target, name, descriptor);
+
+    } else {
+        target[name] = def;
+    }
 }

test/child.js

 
-import xcomponent from 'src/index';
-import postRobot from 'post-robot/src';
-import { getParentWindow, getParentComponentWindow } from 'src/component/window';
+import './component';
 
-import { testComponent, testComponent2, testComponent4 } from './component';
-
-let cases = {
-
-    attachTestComponent() {
-        testComponent.attach({
-            onEnter() {
-                if (this.props.sendUrl) {
-                    this.props.sendUrl(window.location.pathname + window.location.search);
-                }
-            }
-        });
-    },
-
-    attachTestComponentAndCallFoo() {
-        testComponent.attach({
-            onEnter() {
-                this.props.foo('bar');
-            }
-        });
-    },
-
-    attachTestComponentAndCallFooWithBooleanProp() {
-        testComponent.attach({
-            onEnter() {
-                this.props.foo(this.props.booleanProp);
-            }
-        });
-    },
-
-    attachTestComponentAndCallFooWithFunctionProp() {
-        testComponent.attach({
-            onEnter() {
-                this.props.foo(this.props.functionProp);
-            }
-        });
-    },
-
-    attachTestComponentAndCallFooWithStringProp() {
-        testComponent.attach({
-            onEnter() {
-                this.props.foo(this.props.stringProp);
-            }
-        });
-    },
-
-    attachTestComponentAndCallFooWithObjectProp() {
-        testComponent.attach({
-            onEnter() {
-                this.props.foo(this.props.objectProp);
-            }
-        });
-    },
-
-    attachTestComponentAndCallFooWithNumberProp() {
-        testComponent.attach({
-            onEnter() {
-                this.props.foo(this.props.numberProp);
-            }
-        });
-    },
-
-    attachTestComponentAndCallFooOnProps() {
-        testComponent.attach({
-            onProps() {
-                this.props.foo('bar');
-            }
-        });
-    },
-
-    attachTestComponentAndThrowRegularError() {
-        testComponent.attach({
-            onEnter() {
-                throw new Error('xxxxx');
-            }
-        });
-    },
-
-    attachTestComponentAndThrowIntegrationError() {
-        testComponent.attach({
-            onEnter() {
-                throw new xcomponent.IntegrationError('xxxxx');
-            }
-        });
-    },
-
-    attachTestComponent2() {
-        testComponent2.attach({
-            onEnter() {
-                if (this.props.sendUrl) {
-                    this.props.sendUrl(window.location.href);
-                }
-            }
-        });
-    },
-
-    attachTestComponent4() {
-        testComponent4.attach({
-            onEnter() {
-                if (this.props.sendUrl) {
-                    this.props.sendUrl(window.location.href);
-                }
-            }
-        });
-    },
-
-    attachTestComponent2AndCallFoo() {
-        testComponent2.attach({
-            onEnter() {
-                this.props.foo('bar');
-            }
-        });
-    },
-
-
-    renderTestComponent2ToParentLightbox() {
-        let comp = testComponent.attach({
-            onEnter() {
-                testComponent2.init({
-                    onEnter() {
-                        if (comp.props.foo) {
-                            return comp.props.foo();
-                        }
-
-                        if (comp.props.childEntered) {
-                            return comp.props.childEntered();
-                        }
-                    },
-
-                    onClose() {
-                        comp.close();
-                    }
-                }).renderLightboxToParent();
-
-                postRobot.once('init', () => 'attachTestComponent2');
-            }
-        });
-    },
-
-    renderTestComponent2ToParentPopup() {
-        let comp = testComponent.attach({
-            onEnter() {
-
-                testComponent2.init({
-                    onEnter() {
-                        if (comp.props.foo) {
-                            return comp.props.foo();
-                        }
-
-                        if (comp.props.childEntered) {
-                            return comp.props.childEntered();
-                        }
-                    },
-
-                    onClose() {
-                        comp.close();
-                    }
-                }).renderPopupToParent();
-
-                postRobot.once('init', () => 'attachTestComponent2');
-            }
-        });
-    },
-
-    renderTestComponent2ToParentIframe() {
-        let comp = testComponent.attach({
-            onEnter() {
-                testComponent2.init({
-                    onEnter() {
-                        return comp.props.foo();
-                    }
-                }).renderIframeToParent('body');
-
-                postRobot.once('init', () => 'attachTestComponent2');
-            }
-        });
-    },
-
-    renderTestComponent2ToParentLightboxAndPassFoo() {
-
-        testComponent.attach({
-            onEnter() {
-                testComponent2.init({
-                    foo: () => {
-                        this.props.foo();
-                    }
-                }).renderLightboxToParent();
-
-                postRobot.once('init', () => 'attachTestComponent2AndCallFoo');
-            }
-        });
-    },
-
-    renderTestComponent2ToParentLightboxAndClose() {
-        let comp = testComponent.attach({
-            onEnter() {
-                let comp2 = testComponent2.init({
-                    onEnter() {
-                        comp2.close();
-                    },
-
-                    onClose() {
-                        comp.close();
-                    }
-                });
-
-                comp2.renderLightboxToParent();
-
-                postRobot.once('init', () => 'attachTestComponent2');
-            }
-        });
-    },
-
-    attachTestComponentAndSubmitParentButton() {
-        testComponent.attach({
-            onEnter() {
-
-                let comp2 = testComponent2.init({
-                    sendUrl: this.props.sendUrl
-                });
-
-                postRobot.once('init', () => 'attachTestComponent2');
-
-                let button = document.createElement('button');
-                button.addEventListener('click', () => {
-                    comp2.hijackSubmitParentForm();
-                });
-
-                button.click();
-            }
-        });
-    },
-
-    attachTestComponentAndCallMemoizedFunction() {
-        testComponent.attach({
-            onEnter() {
-                return this.props.memoizedFunction().then(() => {
-                    return this.props.memoizedFunction().then((result) => {
-                        return this.props.complete(result);
-                    });
-                });
-            }
-        });
-    },
-
-    attachTestComponentAndCallOnceFunction() {
-        testComponent.attach({
-            onEnter() {
-                return this.props.onceFunction().then(() => {
-                    return this.props.onceFunction().then((result) => {
-                        return this.props.complete(result);
-                    });
-                });
-            }
-        });
-    },
-
-    attachTestComponentAndCallDenodeifyFunction() {
-        testComponent.attach({
-            onEnter() {
-                return this.props.denodeifyFunction('foo').then(result => {
-                    return this.props.complete(result);
-                });
-            }
-        });
-    },
-
-    attachTestComponentAndCallDenodeifyFunctionWithError() {
-        testComponent.attach({
-            onEnter() {
-                return this.props.denodeifyFunction('foo').catch(() => {
-                    return this.props.complete('foobar');
-                });
-            }
-        });
-    },
-
-    attachTestComponentWithInvalidName() {
-
-        try {
-            testComponent.attach();
-        } catch (err) {
-            postRobot.sendToParent('complete');
-        }
-    },
-
-    attachTestComponent4AndCallCompleteOnError() {
-
-        try {
-            testComponent4.attach();
-        } catch (err) {
-            postRobot.sendToParent('complete');
-        }
-    }
-};
-
-let parent;
-
-try {
-    parent = getParentComponentWindow();
-} catch (err) {
-    parent = getParentWindow();
-}
-
-postRobot.send(parent, 'init').then(caseName => {
-    cases[caseName]();
-}).catch(err => {
-    console.error(err.stack || err.toString());
-});
+if (window.xchild.props.run) {
+    eval(`(function() { ${window.xchild.props.run} }).call(this);`); // eslint-disable-line
+}

test/component.js

 
 import xcomponent from 'src/index';
 
+window.xcomponent = xcomponent;
+
 export let testComponent = xcomponent.create({
@@ -82,2 +84,7 @@
             required: false
+        },
+
+        run: {
+            type: 'string',
+            required: false
         }
@@ -110,2 +117,7 @@ }
             required: false
+        },
+
+        run: {
+            type: 'string',
+            required: false
         }
@@ -112,0 +124,0 @@ }

test/test.js

 
+import xcomponent from 'src/index';
 import './tests';
@@ -7,2 +8,6 @@
 document.body.style.width = '1000px';
-document.body.style.height = '1000px';
+document.body.style.height = '1000px';
+
+afterEach(() => {
+    xcomponent.destroyAll();
+});

test/tests/actions.js

 
-import postRobot from 'post-robot/src';
-
 import { testComponent } from '../component';
 
-let component;
-
-afterEach(() => {
-    if (component) {
-        component.destroy();
-        component = null;
-    }
-});
-
 describe('xcomponent actions', () => {
@@ -19,8 +8,8 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
             onEnter() {
-                let close = component.window.close;
+                let close = this.window.close;
 
-                component.window.close = function() {
+                this.window.close = function() {
                     close.apply(this, arguments);
@@ -30,10 +19,6 @@ done();
 
-                component.close();
+                this.close();
             }
 
-        });
-
-        component.renderPopup();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderPopup();
     });
@@ -43,8 +28,8 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
             onEnter() {
-                let close = component.window.close;
+                let close = this.window.close;
 
-                component.window.close = function() {
+                this.window.close = function() {
                     close.apply(this, arguments);
@@ -54,11 +39,6 @@ done();
 
-                component.close();
+                this.close();
             }
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderLightbox();
     });
@@ -68,16 +48,11 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
             onEnter() {
-                component.window.focus = done;
-                component.focus();
+                this.window.focus = done;
+                this.focus();
             }
 
-        });
-
-
-        component.renderPopup();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderPopup();
     });
 });

test/tests/drivers.js

 
-import postRobot from 'post-robot/src';
 import { once } from 'src/lib';
 import { testComponent } from '../component';
 
-let component;
-
-afterEach(() => {
-    if (component) {
-        component.destroy();
-        component = null;
-    }
-});
-
 angular.bootstrap = once(angular.bootstrap);
@@ -41,4 +31,2 @@
         ReactDOM.render(React.createElement(Main, null), container);
-
-        postRobot.once('init', () => 'attachTestComponent');
     });
@@ -52,11 +40,16 @@
 
-                function foo(bar) {
-                    assert.equal(bar, 'bar');
-                    this.close().then(done);
-                }
-
                 return window.React.createElement(
                     'div',
                     null,
-                    React.createElement(testComponent.react, { foo })
+                    React.createElement(testComponent.react, {
+
+                        foo(bar) {
+                            assert.equal(bar, 'bar');
+                            this.close().then(done);
+                        },
+
+                        run: `
+                            window.xchild.props.foo('bar');
+                        `
+                    })
                 );
@@ -70,4 +63,2 @@ }
         ReactDOM.render(React.createElement(Main, null), container);
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFoo');
     });
@@ -85,2 +76,3 @@
         let $scope = $rootScope.$new();
+
         $scope.onEnter = function() {
@@ -95,4 +87,2 @@ this.close().then(done);
         });
-
-        postRobot.once('init', () => 'attachTestComponent');
     });
@@ -110,13 +100,17 @@
         let $scope = $rootScope.$new();
-        $scope.foo = function() {
+
+        $scope.foo = function(bar) {
+            assert.equal(bar, 'bar');
             this.close().then(done);
         };
 
+        $scope.run = `
+            window.xchild.props.foo('bar');
+        `;
+
         $compile(`
-            <test-component foo="foo"></test-component>
+            <test-component foo="foo" run="{{run}}"></test-component>
         `)($scope, element => {
             document.body.appendChild(element[0]);
         });
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFoo');
     });
@@ -140,4 +134,2 @@
         `;
-
-        postRobot.once('init', () => 'attachTestComponent');
     });
@@ -150,16 +142,20 @@
 
-        window.done = function() {
+        window.foo = function(bar) {
+            assert.equal(bar, 'bar');
             this.close().then(done);
         };
 
+        window.run = `
+            window.xchild.props.foo('bar');
+        `;
+
         container.innerHTML = `
             <script type="application/x-component" data-component="test-component">
                 {
-                    foo: window.done
+                    foo: window.foo,
+                    run: window.run
                 }
             </script>
         `;
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFoo');
     });
 });

test/tests/error.js

 
 import xcomponent from 'src/index';
-import postRobot from 'post-robot/src';
 
 import { testComponent, testComponent3 } from '../component';
 
-let component;
-
-afterEach(() => {
-    if (component) {
-        component.destroy();
-        component = null;
-    }
-});
-
 describe('xcomponent error cases', () => {
@@ -29,8 +19,6 @@
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter: done
-        });
 
-        component.renderPopup().catch(err => {
-            console.log(err.message, err.stack);
+        }).renderPopup().catch(err => {
             assert.isTrue(err instanceof xcomponent.PopupOpenError, 'Expected PopupOpenError when popup is not opened');
@@ -42,22 +30,5 @@ window.open = windowOpen;
 
-    it.skip('should enter a component, throw an error, and return a new error to the parent without the original stack', done => {
-
-        component = testComponent.init({
-
-            onError(err) {
-                assert.isTrue(err.message.indexOf('xxxxx') === -1, 'Expected error to not contain original error');
-                done();
-            }
-
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndThrowRegularError');
-    });
-
     it('should enter a component, throw an integration error, and return the error to the parent with the original stack', done => {
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -67,10 +38,8 @@ onError(err) {
                 done();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndThrowIntegrationError');
+            run: `
+                window.xchild.error(new Error('xxxxx'));
+            `
+        }).renderLightbox();
     });
@@ -80,3 +49,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             timeout: 1,
@@ -86,5 +55,3 @@ onTimeout() {
             }
-        });
-
-        component.renderLightbox();
+        }).renderLightbox();
     });
@@ -94,3 +61,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             timeout: 1,
@@ -100,5 +67,3 @@ onError() {
             }
-        });
-
-        component.renderLightbox();
+        }).renderLightbox();
     });
@@ -117,28 +82,15 @@
 
-        component = testComponent.init({
+        testComponent.init({
             timeout: 1
-        });
-
-        component.renderLightbox();
+        }).renderLightbox();
     });
 
-    it('should enter a component and error out when the page name is not valid', done => {
+    it.skip('should enter a component and error out when the page name is not valid', done => {
 
         window.open('/base/test/child.htm', 'INVALIDNAME');
-
-        postRobot.once('init', () => 'attachTestComponentWithInvalidName');
-        postRobot.once('complete', () => done());
     });
 
-    it('should enter a component and error out when the page name is not generated by xcomponent', done => {
-
-        window.open('/base/test/child.htm', 'eewgwegwegwrg');
-
-        postRobot.once('init', () => 'attachTestComponentWithInvalidName');
-        postRobot.once('complete', () => done());
-    });
-
     it('should try to enter a singleton component twice and error out', done => {
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter() {
@@ -151,7 +103,3 @@ try {
             }
-        });
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderLightbox();
     });
@@ -161,3 +109,3 @@
 
-        component = testComponent.init();
+        let component = testComponent.init();
 
@@ -169,4 +117,2 @@ component.render().then(() => {
         });
-
-        postRobot.once('init', () => 'attachTestComponent');
     });
@@ -176,5 +122,3 @@
 
-        component = testComponent3.init();
-
-        component.render(null, 'moo').catch(() => {
+        testComponent3.init().render(null, 'moo').catch(() => {
             done();
@@ -186,5 +130,3 @@ });
 
-        component = testComponent3.init();
-
-        component.render(document.body).catch(() => {
+        testComponent3.init().render(document.body).catch(() => {
             done();
@@ -206,5 +148,3 @@ });
 
-        component = testComponent.init();
-
-        component.render().catch(err => {
+        testComponent.init().render().catch(err => {
             assert.ok(err);
@@ -219,3 +159,3 @@ testComponent.defaultContext = originalDefaultContext;
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -231,7 +171,3 @@ onEnter() {
             }
-        });
-
-        component.renderPopup();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderPopup();
     });
@@ -241,3 +177,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -253,22 +189,4 @@ onEnter() {
             }
-        });
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderLightbox();
     });
-
-    it('should error on the child when trying to attach a different component to that which was rendered', done => {
-
-        component = testComponent.init({
-            onEnter() {
-                done();
-            }
-        });
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent4AndCallCompleteOnError');
-        postRobot.once('complete', () => done());
-    });
 });

test/tests/happy.js

 
-import postRobot from 'post-robot/src';
-
 import { testComponent, testComponent4 } from '../component';
 
-let component;
-
-afterEach(() => {
-    if (component) {
-        component.destroy();
-        component = null;
-    }
-});
-
 describe('xcomponent happy cases', () => {
@@ -19,14 +8,10 @@
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter: done
-        });
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderLightbox();
     });
 
-    it('should enter a component rendered as a lightbox with the correct dimensions', done => {
+    it.skip('should enter a component rendered as a lightbox with the correct dimensions', done => {
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter() {
@@ -39,10 +24,6 @@ if (!(this.window.innerWidth === this.component.dimensions.width && this.window.innerHeight === this.component.dimensions.height)) {
             }
-        });
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderLightbox();
     });
 
-    it('should enter a component rendered as a popup with the correct dimensions', done => {
+    it.skip('should enter a component rendered as a popup with the correct dimensions', done => {
 
@@ -56,3 +37,3 @@ let open = window.open;
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter() {
@@ -71,14 +52,10 @@ done();
             }
-        });
+        }).renderPopup();
 
-        component.renderPopup();
-
         window.open = open;
-
-        postRobot.once('init', () => 'attachTestComponent');
     });
 
-    it('should enter a component rendered as a lightbox with no dimensions', done => {
+    it.skip('should enter a component rendered as a lightbox with no dimensions', done => {
 
-        component = testComponent4.init({
+        testComponent4.init({
             onEnter() {
@@ -91,7 +68,3 @@ if (!(window.innerWidth === this.window.innerWidth && window.innerHeight === this.window.innerHeight)) {
             }
-        });
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent4');
+        }).renderLightbox();
     });
@@ -108,3 +81,3 @@
 
-        component = testComponent4.init({
+        testComponent4.init({
             onEnter() {
@@ -123,9 +96,5 @@ done();
             }
-        });
+        }).renderPopup();
 
-        component.renderPopup();
-
         window.open = open;
-
-        postRobot.once('init', () => 'attachTestComponent4');
     });
@@ -135,12 +104,13 @@
 
-        component = testComponent.init({
+        testComponent.init({
+
             foo(bar) {
                 assert.equal(bar, 'bar');
                 done();
-            }
-        });
+            },
 
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFoo');
+            run: `
+                window.xchild.props.foo('bar');
+            `
+        }).renderLightbox();
     });
@@ -150,9 +120,5 @@
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter: done
-        });
-
-        component.renderIframe(document.body);
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderIframe(document.body);
     });
@@ -162,12 +128,13 @@
 
-        component = testComponent.init({
+        testComponent.init({
+
             foo(bar) {
                 assert.equal(bar, 'bar');
                 done();
-            }
-        });
+            },
 
-        component.renderIframe(document.body);
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFoo');
+            run: `
+                window.xchild.props.foo('bar');
+            `
+        }).renderIframe(document.body);
     });
@@ -177,9 +144,5 @@
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter: done
-        });
-
-        component.renderPopup();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderPopup();
     });
@@ -189,12 +152,13 @@
 
-        component = testComponent.init({
+        testComponent.init({
+
             foo(bar) {
                 assert.equal(bar, 'bar');
                 done();
-            }
-        });
+            },
 
-        component.renderPopup();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFoo');
+            run: `
+                window.xchild.props.foo('bar');
+            `
+        }).renderPopup();
     });
@@ -204,6 +168,6 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
-            onEnter() {
-                component.updateProps({
+            foo() {
+                return this.updateProps({
                     foo(bar) {
@@ -216,10 +180,10 @@ assert.equal(bar, 'bar');
 
-            foo(bar) {
-                throw new Error('Expected foo to not be called yet');
-            }
-        });
+            run: `
+                window.xchild.props.foo();
 
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFooOnProps');
+                window.xchild.onProps(function() {
+                    window.xchild.props.foo('bar');
+                });
+            `
+        }).renderLightbox();
     });
@@ -229,9 +193,5 @@
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter: done
-        });
-
-        component.render(document.body);
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).render(document.body);
     });
@@ -244,3 +204,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter() {
@@ -250,7 +210,3 @@ testComponent.defaultContext = originalDefaultContext;
             }
-        });
-
-        component.render();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).render();
     });
@@ -263,3 +219,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter() {
@@ -269,7 +225,3 @@ testComponent.defaultContext = originalDefaultContext;
             }
-        });
-
-        component.render();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).render();
     });
@@ -289,3 +241,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter() {
@@ -296,7 +248,3 @@ testComponent.defaultContext = originalDefaultContext;
             }
-        });
-
-        component.render();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).render();
     });
@@ -316,3 +264,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             onEnter() {
@@ -323,7 +271,3 @@ testComponent.defaultContext = originalDefaultContext;
             }
-        });
-
-        component.render();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).render();
     });
@@ -333,3 +277,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -341,10 +285,8 @@ stringProp: 'bar',
                 done();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFooWithStringProp');
+            run: `
+                window.xchild.props.foo(window.xchild.props.stringProp);
+            `
+        }).renderLightbox();
     });
@@ -354,3 +296,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -362,10 +304,8 @@ numberProp: 123,
                 done();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFooWithNumberProp');
+            run: `
+                window.xchild.props.foo(window.xchild.props.numberProp);
+            `
+        }).renderLightbox();
     });
@@ -375,3 +315,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -383,10 +323,8 @@ numberProp: '123',
                 done();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFooWithNumberProp');
+            run: `
+                window.xchild.props.foo(window.xchild.props.numberProp);
+            `
+        }).renderLightbox();
     });
@@ -396,3 +334,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -404,10 +342,8 @@ booleanProp: true,
                 done();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFooWithBooleanProp');
+            run: `
+                window.xchild.props.foo(window.xchild.props.booleanProp);
+            `
+        }).renderLightbox();
     });
@@ -417,3 +353,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -425,10 +361,8 @@ booleanProp: 1,
                 done();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFooWithBooleanProp');
+            run: `
+                window.xchild.props.foo(window.xchild.props.booleanProp);
+            `
+        }).renderLightbox();
     });
@@ -438,3 +372,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -446,10 +380,8 @@ booleanProp: 0,
                 done();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFooWithBooleanProp');
+            run: `
+                window.xchild.props.foo(window.xchild.props.booleanProp);
+            `
+        }).renderLightbox();
     });
@@ -459,3 +391,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -470,10 +402,8 @@ objectProp: { foo: 'bar', x: 12345, fn() { done(); }, obj: { bar: 'baz' } },
                 result.fn();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFooWithObjectProp');
+            run: `
+                window.xchild.props.foo(window.xchild.props.objectProp);
+            `
+        }).renderLightbox();
     });
@@ -483,3 +413,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -491,11 +421,9 @@ functionProp: done,
                 result();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallFooWithFunctionProp');
+            run: `
+                window.xchild.props.foo(window.xchild.props.functionProp);
+            `
+        }).renderLightbox();
     });
 });

test/tests/hijack.js

 
 import xcomponent from 'src/index';
-import postRobot from 'post-robot/src';
 
 import { testComponent } from '../component';
 
-let component;
-
-afterEach(() => {
-    if (component) {
-        component.destroy();
-        component = null;
-    }
-});
-
 describe('xcomponent hijack', () => {
@@ -30,3 +20,3 @@
 
-        component = testComponent.init({
+        let component = testComponent.init({
             sendUrl(url) {
@@ -36,3 +26,7 @@ assert.isTrue(url.indexOf('xyzhijacktest') !== -1, 'Expected url to be custom url passed during init');
                 done();
-            }
+            },
+
+            run: `
+                window.xchild.props.sendUrl(window.location.pathname + window.location.search);
+            `
         });
@@ -45,4 +39,2 @@
 
-        postRobot.once('init', () => 'attachTestComponent');
-
         button.click();
@@ -63,3 +55,3 @@ });
 
-        component = testComponent.init({
+        let component = testComponent.init({
             sendUrl(url) {
@@ -69,3 +61,7 @@ assert.isTrue(url.indexOf('xyzhijacktest') !== -1, 'Expected url to be custom url passed during init');
                 done();
-            }
+            },
+
+            run: `
+                window.xchild.props.sendUrl(window.location.pathname + window.location.search);
+            `
         });
@@ -78,4 +74,2 @@
 
-        postRobot.once('init', () => 'attachTestComponent');
-
         button.click();
@@ -92,3 +86,3 @@ });
 
-        component = testComponent.init({
+        let component = testComponent.init({
             sendUrl(url) {
@@ -98,3 +92,7 @@ assert.isTrue(url.indexOf('xyzhijacktest') !== -1, 'Expected url to be custom url passed during init');
                 done();
-            }
+            },
+
+            run: `
+                window.xchild.props.sendUrl(window.location.pathname + window.location.search);
+            `
         });
@@ -107,4 +105,2 @@
 
-        postRobot.once('init', () => 'attachTestComponent');
-
         link.click();
@@ -121,3 +117,3 @@ });
 
-        component = testComponent.init({
+        let component = testComponent.init({
             sendUrl(url) {
@@ -127,3 +123,7 @@ assert.isTrue(url.indexOf('xyzhijacktest') !== -1, 'Expected url to be custom url passed during init');
                 done();
-            }
+            },
+
+            run: `
+                window.xchild.props.sendUrl(window.location.pathname + window.location.search);
+            `
         });
@@ -136,4 +136,2 @@
 
-        postRobot.once('init', () => 'attachTestComponent');
-
         link.click();
@@ -151,3 +149,3 @@ });
 
-        component = testComponent.init({
+        testComponent.init({
             sendUrl(url) {
@@ -157,9 +155,15 @@ assert.isTrue(url.indexOf('xyzhijacktest') !== -1, 'Expected url to be custom url passed during init');
                 done();
-            }
-        });
+            },
 
-        component.renderIframe('#hijackForm');
+            run: `
 
-        postRobot.once('init', () => 'attachTestComponentAndSubmitParentButton');
+                var component = xcomponent.getByTag('test-component2').init({
+                    sendUrl: window.xchild.props.sendUrl,
+                    run: 'window.xchild.props.sendUrl(window.location.pathname + window.location.search);'
+                });
+
+                component.hijackSubmitParentForm();
+            `
+        }).renderIframe('#hijackForm');
     });
 });

test/tests/options.js

 
-import postRobot from 'post-robot/src';
 import { SyncPromise as Promise } from 'sync-browser-mocks/src/promise';
@@ -7,11 +6,2 @@
 
-let component;
-
-afterEach(() => {
-    if (component) {
-        component.destroy();
-        component = null;
-    }
-});
-
 describe('xcomponent options', () => {
@@ -21,3 +11,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             url: '/base/test/child.htm?foo=xyztest',
@@ -28,8 +18,8 @@
                 done();
-            }
-        });
+            },
 
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent');
+            run: `
+                window.xchild.props.sendUrl(window.location.pathname + window.location.search);
+            `
+        }).renderLightbox();
     });
@@ -39,3 +29,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             env: 'dev',
@@ -46,8 +36,8 @@
                 done();
-            }
-        });
+            },
 
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent');
+            run: `
+                window.xchild.props.sendUrl(window.location.pathname + window.location.search);
+            `
+        }).renderLightbox();
     });
@@ -59,3 +49,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -70,10 +60,13 @@ memoizedFunction() {
                 done();
-            }
+            },
 
-        });
+            run: `
 
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallMemoizedFunction');
+                return window.xchild.props.memoizedFunction().then(function() {
+                    return window.xchild.props.memoizedFunction().then(function(result) {
+                        return window.xchild.props.complete(result);
+                    });
+                });
+            `
+        }).renderLightbox();
     });
@@ -85,3 +78,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -96,10 +89,13 @@ onceFunction() {
                 done();
-            }
+            },
 
-        });
+            run: `
 
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallOnceFunction');
+                return window.xchild.props.onceFunction().then(function() {
+                    return window.xchild.props.onceFunction().then(function(result) {
+                        return window.xchild.props.complete(result);
+                    });
+                });
+            `
+        }).renderLightbox();
     });
@@ -109,3 +105,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -121,10 +117,10 @@ denodeifyFunction(val, callback) {
                 done();
-            }
+            },
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallDenodeifyFunction');
+            run: `
+                return window.xchild.props.denodeifyFunction('foo').then(function(result) {
+                    return window.xchild.props.complete(result);
+                });
+            `
+        }).renderLightbox();
     });
@@ -134,3 +130,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -144,9 +140,11 @@ denodeifyFunction(val) {
                 done();
-            }
+            },
 
-        });
+            run: `
+                return window.xchild.props.denodeifyFunction('foo').then(function(result) {
+                    return window.xchild.props.complete(result);
+                });
+            `
 
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallDenodeifyFunction');
+        }).renderLightbox();
     });
@@ -156,3 +154,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -168,9 +166,11 @@ denodeifyFunction(val, callback) {
                 done();
-            }
+            },
 
-        });
+            run: `
+                return window.xchild.props.denodeifyFunction('foo').catch(function() {
+                    return window.xchild.props.complete('foobar');
+                });
+            `
 
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallDenodeifyFunctionWithError');
+        }).renderLightbox();
     });
@@ -180,3 +180,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
@@ -196,11 +196,12 @@ denodeifyFunction(val, callback) {
                 done();
-            }
+            },
 
-        });
+            run: `
+                return window.xchild.props.denodeifyFunction('foo').then(function(result) {
+                    return window.xchild.props.complete(result);
+                });
+            `
 
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponentAndCallDenodeifyFunction');
+        }).renderLightbox();
     });
 });

test/tests/parent.js

 
-import postRobot from 'post-robot/src';
-
 import { testComponent } from '../component';
 
-let component;
-
-afterEach(() => {
-    if (component) {
-        component.destroy();
-        component = null;
-    }
-});
-
 describe('xcomponent render to parent', () => {
@@ -19,9 +8,13 @@
 
-        component = testComponent.init({
-            foo: done
-        });
+        testComponent.init({
+            foo: done,
 
-        component.renderIframe(document.body);
-
-        postRobot.once('init', () => 'renderTestComponent2ToParentLightbox');
+            run: `
+                xcomponent.getByTag('test-component2').init({
+                    onEnter: function() {
+                        return window.xchild.props.foo();
+                    }
+                }).renderLightboxToParent();
+            `
+        }).renderIframe(document.body);
     });
@@ -31,9 +24,13 @@
 
-        component = testComponent.init({
-            foo: done
-        });
+        testComponent.init({
+            foo: done,
 
-        component.renderIframe(document.body);
-
-        postRobot.once('init', () => 'renderTestComponent2ToParentPopup');
+            run: `
+                xcomponent.getByTag('test-component2').init({
+                    onEnter: function() {
+                        return window.xchild.props.foo();
+                    }
+                }).renderPopupToParent();
+            `
+        }).renderIframe(document.body);
     });
@@ -43,31 +40,89 @@
 
-        component = testComponent.init({
-            foo: done
-        });
+        testComponent.init({
+            foo: done,
 
-        component.renderIframe(document.body);
+            run: `
+                xcomponent.getByTag('test-component2').init({
+                    onEnter: function() {
+                        return window.xchild.props.foo();
+                    }
+                }).renderIframeToParent('body');
+            `
+        }).renderIframe(document.body);
+    });
 
-        postRobot.once('init', () => 'renderTestComponent2ToParentIframe');
+    it('should render a component to the parent as a lightbox and call a prop', done => {
+
+        testComponent.init({
+            foo: done,
+
+            run: `
+                xcomponent.getByTag('test-component2').init({
+                    foo: function() {
+                        window.xchild.props.foo();
+                    },
+
+                    run: 'window.xchild.props.foo();'
+
+                }).renderLightboxToParent();
+            `
+        }).renderIframe(document.body);
     });
 
-    it('should render a component to the parent and call a prop', done => {
+    it('should render a component to the parent as an iframe and call a prop', done => {
 
-        component = testComponent.init({
-            foo: done
-        });
+        testComponent.init({
+            foo: done,
 
-        component.renderIframe(document.body);
+            run: `
+                xcomponent.getByTag('test-component2').init({
+                    foo: function() {
+                        window.xchild.props.foo();
+                    },
 
-        postRobot.once('init', () => 'renderTestComponent2ToParentLightboxAndPassFoo');
+                    run: 'window.xchild.props.foo();'
+
+                }).renderIframeToParent('body');
+            `
+        }).renderIframe(document.body);
     });
 
+
+    it('should render a component to the parent as a popup and call a prop', done => {
+
+        testComponent.init({
+            foo: done,
+
+            run: `
+                xcomponent.getByTag('test-component2').init({
+                    foo: function() {
+                        window.xchild.props.foo();
+                    },
+
+                    run: 'window.xchild.props.foo();'
+
+                }).renderPopupToParent();
+            `
+        }).renderIframe(document.body);
+    });
+
     it('should render a component to the parent as a lightbox and close on enter', done => {
 
-        component = testComponent.init({
-            onClose: () => done()
-        });
+        testComponent.init({
+            onClose: () => done(),
 
-        component.renderIframe(document.body);
+            run: `
+                var comp2 = xcomponent.getByTag('test-component2').init({
+                    onEnter: function() {
+                        comp2.close();
+                    },
 
-        postRobot.once('init', () => 'renderTestComponent2ToParentLightboxAndClose');
+                    onClose: function() {
+                        window.xchild.close();
+                    }
+                });
+
+                comp2.renderLightboxToParent();
+            `
+        }).renderIframe(document.body);
     });
@@ -77,3 +132,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             childEntered() {
@@ -83,8 +138,18 @@ document.querySelector('.xcomponent-close').click();
 
-            onClose: () => done()
-        });
+            foo: () => done(),
 
-        component.renderIframe(document.body);
+            run: `
+                xcomponent.getByTag('test-component2').init({
 
-        postRobot.once('init', () => 'renderTestComponent2ToParentLightbox');
+                    onEnter: function() {
+                        return window.xchild.props.childEntered();
+                    },
+
+                    onClose: function() {
+                        return window.xchild.props.foo();
+                    }
+
+                }).renderLightboxToParent();
+            `
+        }).renderIframe(document.body);
     });
@@ -94,3 +159,3 @@
 
-        component = testComponent.init({
+        testComponent.init({
             childEntered() {
@@ -100,42 +165,46 @@ document.querySelector('.xcomponent-close').click();
 
-            onClose: () => done()
-        });
+            foo: () => done(),
 
-        component.renderIframe(document.body);
+            run: `
+                xcomponent.getByTag('test-component2').init({
 
-        postRobot.once('init', () => 'renderTestComponent2ToParentPopup');
-    });
+                    onEnter: function() {
+                        return window.xchild.props.childEntered();
+                    },
 
-    it.skip('should focus an xcomponent renderToParent popup on click of the overlay', done => {
+                    onClose: function() {
+                        return window.xchild.props.foo();
+                    }
 
-        let win;
+                }).renderPopupToParent();
+            `
+        }).renderIframe(document.body);
+    });
 
-        component = testComponent.init({
+    it('should focus an xcomponent renderToParent popup on click of the overlay', done => {
 
-            onEnter() {
+        testComponent.init({
 
-                let open = window.open;
-
-                window.open = function() {
-                    win = open.apply(this, arguments);
-                    return win;
-                };
+            childEntered() {
+                document.querySelector('.xcomponent-focus').click();
             },
 
-            foo() {
+            foo: () => done(),
 
-                let focus = win.focus;
-                win.focus = function() {
-                    focus.apply(this, arguments);
-                    done();
-                };
+            run: `
+                xcomponent.getByTag('test-component2').init({
 
-                document.querySelector('.xcomponent-overlay').click();
-            }
-        });
+                    onEnter: function() {
 
-        component.renderIframe(document.body);
+                        this.window.focus = function() {
+                            return window.xchild.props.foo();
+                        };
 
-        postRobot.once('init', () => 'renderTestComponent2ToParentPopup');
+                        return window.xchild.props.childEntered();
+                    }
+
+                }).renderPopupToParent();
+            `
+        }).renderIframe(document.body);
     });
 });

test/tests/templates.js

 
-import postRobot from 'post-robot/src';
-
 import { testComponent } from '../component';
 
-let component;
-
-afterEach(() => {
-    if (component) {
-        component.destroy();
-        component = null;
-    }
-});
-
 describe('xcomponent templates and styles', () => {
 
     it('should focus an xcomponent popup on click of the overlay', done => {
-        component = testComponent.init({
+        testComponent.init({
 
             onEnter() {
 
-                component.window.focus = function() {
+                this.window.focus = function() {
                     done();
@@ -29,7 +18,3 @@ };
 
-        });
-
-        component.renderPopup();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderPopup();
     });
@@ -39,8 +24,8 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
             onEnter() {
-                let close = component.window.close;
+                let close = this.window.close;
 
-                component.window.close = function() {
+                this.window.close = function() {
                     close.apply(this, arguments);
@@ -53,8 +38,3 @@ done();
 
-        });
-
-
-        component.renderPopup();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderPopup();
     });
@@ -65,8 +45,8 @@
 
-        component = testComponent.init({
+        testComponent.init({
 
             onEnter() {
-                let close = component.window.close;
+                let close = this.window.close;
 
-                component.window.close = function() {
+                this.window.close = function() {
                     close.apply(this, arguments);
@@ -79,9 +59,4 @@ done();
 
-        });
-
-
-        component.renderLightbox();
-
-        postRobot.once('init', () => 'attachTestComponent');
+        }).renderLightbox();
     });
 });

test/tests/validation.js

@@ -6,11 +6,2 @@
 
-let component;
-
-afterEach(() => {
-    if (component) {
-        component.destroy();
-        component = null;
-    }
-});
-
 describe('xcomponent validation errors', () => {
@@ -17,0 +8,0 @@

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

3295243

decreased by-0.04%

Lines of code

37038

decreased by-0.21%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes