@usecsv/react 0.2.16 → 0.2.18

package/build/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * @usecsv/react v0.2.16
+ * @usecsv/react v0.2.18
  * (c) layercode
  * Released under the MIT License.
  */
@@ -10,7 +10,7 @@
     (global = typeof globalThis !== 'undefined' ? globalThis : global || self, global["@usecsv/react"] = factory());
 })(this, (function () { 'use strict';
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -38,12 +38,12 @@
     }
 
     /*!
-     * @usecsv/js v0.12.0
+     * @usecsv/js v0.13.1
      * (c) layercode
      * Released under the MIT License.
      */
 
-    /*! *****************************************************************************
+    /******************************************************************************
     Copyright (c) Microsoft Corporation.
 
     Permission to use, copy, modify, and/or distribute this software for any
@@ -251,14 +251,14 @@
      * Listens for "call" messages coming from the remote, executes the corresponding method, and
      * responds with the return value.
      */
-    var connectCallReceiver = (info, methods, log) => {
+    var connectCallReceiver = (info, serializedMethods, log) => {
         const { localName, local, remote, originForSending, originForReceiving, } = info;
         let destroyed = false;
         const handleMessageEvent = (event) => {
             if (event.source !== remote || event.data.penpal !== MessageType.Call) {
                 return;
             }
-            if (event.origin !== originForReceiving) {
+            if (originForReceiving !== '*' && event.origin !== originForReceiving) {
                 log(`${localName} received message from origin ${event.origin} which did not match expected origin ${originForReceiving}`);
                 return;
             }
@@ -308,7 +308,7 @@
                     }
                 };
             };
-            new Promise((resolve) => resolve(methods[methodName].apply(methods, args))).then(createPromiseHandler(Resolution.Fulfilled), createPromiseHandler(Resolution.Rejected));
+            new Promise((resolve) => resolve(serializedMethods[methodName].apply(serializedMethods, args))).then(createPromiseHandler(Resolution.Fulfilled), createPromiseHandler(Resolution.Rejected));
         };
         local.addEventListener(NativeEventType.Message, handleMessageEvent);
         return () => {
@@ -323,18 +323,86 @@
      */
     var generateId = () => ++id;
 
+    const KEY_PATH_DELIMITER = '.';
+    const keyPathToSegments = (keyPath) => keyPath ? keyPath.split(KEY_PATH_DELIMITER) : [];
+    const segmentsToKeyPath = (segments) => segments.join(KEY_PATH_DELIMITER);
+    const createKeyPath = (key, prefix) => {
+        const segments = keyPathToSegments(prefix || '');
+        segments.push(key);
+        return segmentsToKeyPath(segments);
+    };
+    /**
+     * Given a `keyPath`, set it to be `value` on `subject`, creating any intermediate
+     * objects along the way.
+     *
+     * @param {Object} subject The object on which to set value.
+     * @param {string} keyPath The key path at which to set value.
+     * @param {Object} value The value to store at the given key path.
+     * @returns {Object} Updated subject.
+     */
+    const setAtKeyPath = (subject, keyPath, value) => {
+        const segments = keyPathToSegments(keyPath);
+        segments.reduce((prevSubject, key, idx) => {
+            if (typeof prevSubject[key] === 'undefined') {
+                prevSubject[key] = {};
+            }
+            if (idx === segments.length - 1) {
+                prevSubject[key] = value;
+            }
+            return prevSubject[key];
+        }, subject);
+        return subject;
+    };
+    /**
+     * Given a dictionary of (nested) keys to function, flatten them to a map
+     * from key path to function.
+     *
+     * @param {Object} methods The (potentially nested) object to serialize.
+     * @param {string} prefix A string with which to prefix entries. Typically not intended to be used by consumers.
+     * @returns {Object} An map from key path in `methods` to functions.
+     */
+    const serializeMethods = (methods, prefix) => {
+        const flattenedMethods = {};
+        Object.keys(methods).forEach((key) => {
+            const value = methods[key];
+            const keyPath = createKeyPath(key, prefix);
+            if (typeof value === 'object') {
+                // Recurse into any nested children.
+                Object.assign(flattenedMethods, serializeMethods(value, keyPath));
+            }
+            if (typeof value === 'function') {
+                // If we've found a method, expose it.
+                flattenedMethods[keyPath] = value;
+            }
+        });
+        return flattenedMethods;
+    };
+    /**
+     * Given a map of key paths to functions, unpack the key paths to an object.
+     *
+     * @param {Object} flattenedMethods A map of key paths to functions to unpack.
+     * @returns {Object} A (potentially nested) map of functions.
+     */
+    const deserializeMethods = (flattenedMethods) => {
+        const methods = {};
+        for (const keyPath in flattenedMethods) {
+            setAtKeyPath(methods, keyPath, flattenedMethods[keyPath]);
+        }
+        return methods;
+    };
+
     /**
      * Augments an object with methods that match those defined by the remote. When these methods are
      * called, a "call" message will be sent to the remote, the remote's corresponding method will be
      * executed, and the method's return value will be returned via a message.
      * @param {Object} callSender Sender object that should be augmented with methods.
      * @param {Object} info Information about the local and remote windows.
-     * @param {Array} methodNames Names of methods available to be called on the remote.
+     * @param {Array} methodKeyPaths Key paths of methods available to be called on the remote.
      * @param {Promise} destructionPromise A promise resolved when destroy() is called on the penpal
      * connection.
      * @returns {Object} The call sender object with methods that may be called.
      */
-    var connectCallSender = (callSender, info, methodNames, destroyConnection, log) => {
+    var connectCallSender = (callSender, info, methodKeyPaths, destroyConnection, log) => {
         const { localName, local, remote, originForSending, originForReceiving, } = info;
         let destroyed = false;
         log(`${localName}: Connecting call sender`);
@@ -375,7 +443,8 @@
                             event.data.id !== id) {
                             return;
                         }
-                        if (event.origin !== originForReceiving) {
+                        if (originForReceiving !== '*' &&
+                            event.origin !== originForReceiving) {
                             log(`${localName} received message from origin ${event.origin} which did not match expected origin ${originForReceiving}`);
                             return;
                         }
@@ -399,10 +468,14 @@
                 });
             };
         };
-        methodNames.reduce((api, methodName) => {
-            api[methodName] = createMethodProxy(methodName);
+        // Wrap each method in a proxy which sends it to the corresponding receiver.
+        const flattenedMethods = methodKeyPaths.reduce((api, name) => {
+            api[name] = createMethodProxy(name);
             return api;
-        }, callSender);
+        }, {});
+        // Unpack the structure of the provided methods object onto the CallSender, exposing
+        // the methods in the same shape they were provided.
+        Object.assign(callSender, deserializeMethods(flattenedMethods));
         return () => {
             destroyed = true;
         };
@@ -411,7 +484,7 @@
     /**
      * Handles an ACK handshake message.
      */
-    var handleAckMessageFactory = (methods, childOrigin, originForSending, destructor, log) => {
+    var handleAckMessageFactory = (serializedMethods, childOrigin, originForSending, destructor, log) => {
         const { destroy, onDestroy } = destructor;
         let destroyCallReceiver;
         let receiverMethodNames;
@@ -421,7 +494,7 @@
         // latest provided by the child.
         const callSender = {};
         return (event) => {
-            if (event.origin !== childOrigin) {
+            if (childOrigin !== '*' && event.origin !== childOrigin) {
                 log(`Parent: Handshake - Received ACK message from origin ${event.origin} which did not match expected origin ${childOrigin}`);
                 return;
             }
@@ -438,7 +511,7 @@
             if (destroyCallReceiver) {
                 destroyCallReceiver();
             }
-            destroyCallReceiver = connectCallReceiver(info, methods, log);
+            destroyCallReceiver = connectCallReceiver(info, serializedMethods, log);
             onDestroy(destroyCallReceiver);
             // If the child reconnected, we need to remove the methods from the
             // previous call receiver off the sender.
@@ -457,16 +530,23 @@
     /**
      * Handles a SYN handshake message.
      */
-    var handleSynMessageFactory = (log, methods, childOrigin, originForSending) => {
+    var handleSynMessageFactory = (log, serializedMethods, childOrigin, originForSending) => {
         return (event) => {
-            if (event.origin !== childOrigin) {
+            // Under specific timing circumstances, we can receive an event
+            // whose source is null. This seems to happen when the child iframe is
+            // removed from the DOM about the same time it has sent the SYN event.
+            // https://github.com/Aaronius/penpal/issues/85
+            if (!event.source) {
+                return;
+            }
+            if (childOrigin !== '*' && event.origin !== childOrigin) {
                 log(`Parent: Handshake - Received SYN message from origin ${event.origin} which did not match expected origin ${childOrigin}`);
                 return;
             }
             log('Parent: Handshake - Received SYN, responding with SYN-ACK');
             const synAckMessage = {
                 penpal: MessageType.SynAck,
-                methodNames: Object.keys(methods),
+                methodNames: Object.keys(serializedMethods),
             };
             event.source.postMessage(synAckMessage, originForSending);
         };
@@ -537,8 +617,9 @@
         // must post messages with "*" as targetOrigin when sending messages.
         // https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage#Using_window.postMessage_in_extensions
         const originForSending = childOrigin === 'null' ? '*' : childOrigin;
-        const handleSynMessage = handleSynMessageFactory(log, methods, childOrigin, originForSending);
-        const handleAckMessage = handleAckMessageFactory(methods, childOrigin, originForSending, destructor, log);
+        const serializedMethods = serializeMethods(methods);
+        const handleSynMessage = handleSynMessageFactory(log, serializedMethods, childOrigin, originForSending);
+        const handleAckMessage = handleAckMessageFactory(serializedMethods, childOrigin, originForSending, destructor, log);
         const promise = new Promise((resolve, reject) => {
             const stopConnectionTimeout = startConnectionTimeout(timeout, destroy);
             const handleMessage = (event) => {
@@ -638,7 +719,7 @@
         return iframe;
     };
     var useCsvPlugin = function (_a) {
-        var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata, onData = _a.onData, onRecordsInitial = _a.onRecordsInitial, onRecordEdit = _a.onRecordEdit, _b = _a.importerDisplay, importerDisplay = _b === void 0 ? "modal" : _b, onClose = _a.onClose, theme = _a.theme, batchSize = _a.batchSize;
+        var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata, onData = _a.onData, onRecordsInitial = _a.onRecordsInitial, onRecordEdit = _a.onRecordEdit, _b = _a.importerDisplay, importerDisplay = _b === void 0 ? "modal" : _b, onClose = _a.onClose, theme = _a.theme, batchSize = _a.batchSize, sampleFileURL = _a.sampleFileURL, _c = _a.downloadExampleButton, downloadExampleButton = _c === void 0 ? true : _c;
         var id = "usecsv-".concat(Math.round(Math.random() * 100000000));
         return whenDomReady().then(function () {
             var iframe = insertIframe(id, importerDisplay);
@@ -670,7 +751,18 @@
                 var _a;
                 (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.classList.remove("loading");
                 // eslint-disable-next-line dot-notation
-                child["setParams"] && child["setParams"]({ importerKey: importerKey, user: user, metadata: metadata, importerDisplay: importerDisplay, theme: theme, batchSize: batchSize });
+                child["setParams"] &&
+                    // eslint-disable-next-line dot-notation
+                    child["setParams"]({
+                        importerKey: importerKey,
+                        user: user,
+                        metadata: metadata,
+                        importerDisplay: importerDisplay,
+                        theme: theme,
+                        batchSize: batchSize,
+                        sampleFileURL: sampleFileURL,
+                        downloadExampleButton: downloadExampleButton,
+                    });
             });
             return iframeConnection;
         });