@usecsv/react 0.2.16 → 0.2.19

package/build/index.esm.js

@@ -1,10 +1,10 @@
 /*!
- * @usecsv/react v0.2.16
+ * @usecsv/react v0.2.19
  * (c) layercode
  * Released under the MIT License.
  */
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -32,12 +32,12 @@ function __rest(s, e) {
 }
 
 /*!
- * @usecsv/js v0.12.0
+ * @usecsv/js v0.14.0
  * (c) layercode
  * Released under the MIT License.
  */
 
-/*! *****************************************************************************
+/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -245,14 +245,14 @@ const deserializeError = (obj) => {
  * 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;
         }
@@ -302,7 +302,7 @@ var connectCallReceiver = (info, methods, log) => {
                 }
             };
         };
-        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 () => {
@@ -317,18 +317,86 @@ let id = 0;
  */
 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`);
@@ -369,7 +437,8 @@ var connectCallSender = (callSender, info, methodNames, destroyConnection, log)
                         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;
                     }
@@ -393,10 +462,14 @@ var connectCallSender = (callSender, info, methodNames, destroyConnection, log)
             });
         };
     };
-    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;
     };
@@ -405,7 +478,7 @@ var connectCallSender = (callSender, info, methodNames, destroyConnection, log)
 /**
  * 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;
@@ -415,7 +488,7 @@ var handleAckMessageFactory = (methods, childOrigin, originForSending, destructo
     // 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;
         }
@@ -432,7 +505,7 @@ var handleAckMessageFactory = (methods, childOrigin, originForSending, destructo
         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.
@@ -451,16 +524,23 @@ var handleAckMessageFactory = (methods, childOrigin, originForSending, destructo
 /**
  * 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);
     };
@@ -531,8 +611,9 @@ var connectToChild = (options) => {
     // 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) => {
@@ -632,7 +713,7 @@ var insertIframe = function (id, importerDisplay) {
     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, dynamicColumns = _a.dynamicColumns;
     var id = "usecsv-".concat(Math.round(Math.random() * 100000000));
     return whenDomReady().then(function () {
         var iframe = insertIframe(id, importerDisplay);
@@ -664,7 +745,19 @@ var useCsvPlugin = function (_a) {
             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,
+                    dynamicColumns: dynamicColumns,
+                });
         });
         return iframeConnection;
     });