@usecsv/vuejs 1.0.0

package/dist/usecsv.esm.js

@@ -0,0 +1,826 @@
+import Vue from 'vue';
+
+/*!
+ * @usecsv/js v0.1.0
+ * (c) layercode
+ * Released under the MIT License.
+ */
+
+var containers = []; // will store container HTMLElement references
+var styleElements = []; // will store {prepend: HTMLElement, append: HTMLElement}
+
+var usage = 'insert-css: You need to provide a CSS string. Usage: insertCss(cssString[, options]).';
+
+function insertCss(css, options) {
+    options = options || {};
+
+    if (css === undefined) {
+        throw new Error(usage);
+    }
+
+    var position = options.prepend === true ? 'prepend' : 'append';
+    var container = options.container !== undefined ? options.container : document.querySelector('head');
+    var containerId = containers.indexOf(container);
+
+    // first time we see this container, create the necessary entries
+    if (containerId === -1) {
+        containerId = containers.push(container) - 1;
+        styleElements[containerId] = {};
+    }
+
+    // try to get the correponding container + position styleElement, create it otherwise
+    var styleElement;
+
+    if (styleElements[containerId] !== undefined && styleElements[containerId][position] !== undefined) {
+        styleElement = styleElements[containerId][position];
+    } else {
+        styleElement = styleElements[containerId][position] = createStyleElement();
+
+        if (position === 'prepend') {
+            container.insertBefore(styleElement, container.childNodes[0]);
+        } else {
+            container.appendChild(styleElement);
+        }
+    }
+
+    // strip potential UTF-8 BOM if css was read from a file
+    if (css.charCodeAt(0) === 0xFEFF) { css = css.substr(1, css.length); }
+
+    // actually add the stylesheet
+    if (styleElement.styleSheet) {
+        styleElement.styleSheet.cssText += css;
+    } else {
+        styleElement.textContent += css;
+    }
+
+    return styleElement;
+}
+function createStyleElement() {
+    var styleElement = document.createElement('style');
+    styleElement.setAttribute('type', 'text/css');
+    return styleElement;
+}
+
+var insertCss_1 = insertCss;
+var insertCss_2 = insertCss;
+insertCss_1.insertCss = insertCss_2;
+
+var MessageType;
+(function (MessageType) {
+    MessageType["Call"] = "call";
+    MessageType["Reply"] = "reply";
+    MessageType["Syn"] = "syn";
+    MessageType["SynAck"] = "synAck";
+    MessageType["Ack"] = "ack";
+})(MessageType || (MessageType = {}));
+var Resolution;
+(function (Resolution) {
+    Resolution["Fulfilled"] = "fulfilled";
+    Resolution["Rejected"] = "rejected";
+})(Resolution || (Resolution = {}));
+var ErrorCode;
+(function (ErrorCode) {
+    ErrorCode["ConnectionDestroyed"] = "ConnectionDestroyed";
+    ErrorCode["ConnectionTimeout"] = "ConnectionTimeout";
+    ErrorCode["NoIframeSrc"] = "NoIframeSrc";
+})(ErrorCode || (ErrorCode = {}));
+var NativeErrorName;
+(function (NativeErrorName) {
+    NativeErrorName["DataCloneError"] = "DataCloneError";
+})(NativeErrorName || (NativeErrorName = {}));
+var NativeEventType;
+(function (NativeEventType) {
+    NativeEventType["Message"] = "message";
+})(NativeEventType || (NativeEventType = {}));
+
+var createDestructor = (localName, log) => {
+    const callbacks = [];
+    let destroyed = false;
+    return {
+        destroy(error) {
+            if (!destroyed) {
+                destroyed = true;
+                log(`${localName}: Destroying connection`);
+                callbacks.forEach((callback) => {
+                    callback(error);
+                });
+            }
+        },
+        onDestroy(callback) {
+            destroyed ? callback() : callbacks.push(callback);
+        },
+    };
+};
+
+var createLogger = (debug) => {
+    /**
+     * Logs a message if debug is enabled.
+     */
+    return (...args) => {
+        if (debug) {
+            console.log('[Penpal]', ...args); // eslint-disable-line no-console
+        }
+    };
+};
+
+const DEFAULT_PORT_BY_PROTOCOL = {
+    'http:': '80',
+    'https:': '443',
+};
+const URL_REGEX = /^(https?:)?\/\/([^/:]+)?(:(\d+))?/;
+const opaqueOriginSchemes = ['file:', 'data:'];
+/**
+ * Converts a src value into an origin.
+ */
+var getOriginFromSrc = (src) => {
+    if (src && opaqueOriginSchemes.find((scheme) => src.startsWith(scheme))) {
+        // The origin of the child document is an opaque origin and its
+        // serialization is "null"
+        // https://html.spec.whatwg.org/multipage/origin.html#origin
+        return 'null';
+    }
+    // Note that if src is undefined, then srcdoc is being used instead of src
+    // and we can follow this same logic below to get the origin of the parent,
+    // which is the origin that we will need to use.
+    const location = document.location;
+    const regexResult = URL_REGEX.exec(src);
+    let protocol;
+    let hostname;
+    let port;
+    if (regexResult) {
+        // It's an absolute URL. Use the parsed info.
+        // regexResult[1] will be undefined if the URL starts with //
+        protocol = regexResult[1] ? regexResult[1] : location.protocol;
+        hostname = regexResult[2];
+        port = regexResult[4];
+    }
+    else {
+        // It's a relative path. Use the current location's info.
+        protocol = location.protocol;
+        hostname = location.hostname;
+        port = location.port;
+    }
+    // If the port is the default for the protocol, we don't want to add it to the origin string
+    // or it won't match the message's event.origin.
+    const portSuffix = port && port !== DEFAULT_PORT_BY_PROTOCOL[protocol] ? `:${port}` : '';
+    return `${protocol}//${hostname}${portSuffix}`;
+};
+
+/**
+ * Converts an error object into a plain object.
+ */
+const serializeError = ({ name, message, stack, }) => ({
+    name,
+    message,
+    stack,
+});
+/**
+ * Converts a plain object into an error object.
+ */
+const deserializeError = (obj) => {
+    const deserializedError = new Error();
+    // @ts-ignore
+    Object.keys(obj).forEach((key) => (deserializedError[key] = obj[key]));
+    return deserializedError;
+};
+
+/**
+ * Listens for "call" messages coming from the remote, executes the corresponding method, and
+ * responds with the return value.
+ */
+var connectCallReceiver = (info, methods, 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) {
+            log(`${localName} received message from origin ${event.origin} which did not match expected origin ${originForReceiving}`);
+            return;
+        }
+        const callMessage = event.data;
+        const { methodName, args, id } = callMessage;
+        log(`${localName}: Received ${methodName}() call`);
+        const createPromiseHandler = (resolution) => {
+            return (returnValue) => {
+                log(`${localName}: Sending ${methodName}() reply`);
+                if (destroyed) {
+                    // It's possible to throw an error here, but it would need to be thrown asynchronously
+                    // and would only be catchable using window.onerror. This is because the consumer
+                    // is merely returning a value from their method and not calling any function
+                    // that they could wrap in a try-catch. Even if the consumer were to catch the error,
+                    // the value of doing so is questionable. Instead, we'll just log a message.
+                    log(`${localName}: Unable to send ${methodName}() reply due to destroyed connection`);
+                    return;
+                }
+                const message = {
+                    penpal: MessageType.Reply,
+                    id,
+                    resolution,
+                    returnValue,
+                };
+                if (resolution === Resolution.Rejected &&
+                    returnValue instanceof Error) {
+                    message.returnValue = serializeError(returnValue);
+                    message.returnValueIsError = true;
+                }
+                try {
+                    remote.postMessage(message, originForSending);
+                }
+                catch (err) {
+                    // If a consumer attempts to send an object that's not cloneable (e.g., window),
+                    // we want to ensure the receiver's promise gets rejected.
+                    if (err.name === NativeErrorName.DataCloneError) {
+                        const errorReplyMessage = {
+                            penpal: MessageType.Reply,
+                            id,
+                            resolution: Resolution.Rejected,
+                            returnValue: serializeError(err),
+                            returnValueIsError: true,
+                        };
+                        remote.postMessage(errorReplyMessage, originForSending);
+                    }
+                    throw err;
+                }
+            };
+        };
+        new Promise((resolve) => resolve(methods[methodName].apply(methods, args))).then(createPromiseHandler(Resolution.Fulfilled), createPromiseHandler(Resolution.Rejected));
+    };
+    local.addEventListener(NativeEventType.Message, handleMessageEvent);
+    return () => {
+        destroyed = true;
+        local.removeEventListener(NativeEventType.Message, handleMessageEvent);
+    };
+};
+
+let id = 0;
+/**
+ * @return {number} A unique ID (not universally unique)
+ */
+var generateId = () => ++id;
+
+/**
+ * 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 {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) => {
+    const { localName, local, remote, originForSending, originForReceiving, } = info;
+    let destroyed = false;
+    log(`${localName}: Connecting call sender`);
+    const createMethodProxy = (methodName) => {
+        return (...args) => {
+            log(`${localName}: Sending ${methodName}() call`);
+            // This handles the case where the iframe has been removed from the DOM
+            // (and therefore its window closed), the consumer has not yet
+            // called destroy(), and the user calls a method exposed by
+            // the remote. We detect the iframe has been removed and force
+            // a destroy() immediately so that the consumer sees the error saying
+            // the connection has been destroyed. We wrap this check in a try catch
+            // because Edge throws an "Object expected" error when accessing
+            // contentWindow.closed on a contentWindow from an iframe that's been
+            // removed from the DOM.
+            let iframeRemoved;
+            try {
+                if (remote.closed) {
+                    iframeRemoved = true;
+                }
+            }
+            catch (e) {
+                iframeRemoved = true;
+            }
+            if (iframeRemoved) {
+                destroyConnection();
+            }
+            if (destroyed) {
+                const error = new Error(`Unable to send ${methodName}() call due ` + `to destroyed connection`);
+                error.code = ErrorCode.ConnectionDestroyed;
+                throw error;
+            }
+            return new Promise((resolve, reject) => {
+                const id = generateId();
+                const handleMessageEvent = (event) => {
+                    if (event.source !== remote ||
+                        event.data.penpal !== MessageType.Reply ||
+                        event.data.id !== id) {
+                        return;
+                    }
+                    if (event.origin !== originForReceiving) {
+                        log(`${localName} received message from origin ${event.origin} which did not match expected origin ${originForReceiving}`);
+                        return;
+                    }
+                    const replyMessage = event.data;
+                    log(`${localName}: Received ${methodName}() reply`);
+                    local.removeEventListener(NativeEventType.Message, handleMessageEvent);
+                    let returnValue = replyMessage.returnValue;
+                    if (replyMessage.returnValueIsError) {
+                        returnValue = deserializeError(returnValue);
+                    }
+                    (replyMessage.resolution === Resolution.Fulfilled ? resolve : reject)(returnValue);
+                };
+                local.addEventListener(NativeEventType.Message, handleMessageEvent);
+                const callMessage = {
+                    penpal: MessageType.Call,
+                    id,
+                    methodName,
+                    args,
+                };
+                remote.postMessage(callMessage, originForSending);
+            });
+        };
+    };
+    methodNames.reduce((api, methodName) => {
+        api[methodName] = createMethodProxy(methodName);
+        return api;
+    }, callSender);
+    return () => {
+        destroyed = true;
+    };
+};
+
+/**
+ * Handles an ACK handshake message.
+ */
+var handleAckMessageFactory = (methods, childOrigin, originForSending, destructor, log) => {
+    const { destroy, onDestroy } = destructor;
+    let destroyCallReceiver;
+    let receiverMethodNames;
+    // We resolve the promise with the call sender. If the child reconnects
+    // (for example, after refreshing or navigating to another page that
+    // uses Penpal, we'll update the call sender with methods that match the
+    // latest provided by the child.
+    const callSender = {};
+    return (event) => {
+        if (event.origin !== childOrigin) {
+            log(`Parent: Handshake - Received ACK message from origin ${event.origin} which did not match expected origin ${childOrigin}`);
+            return;
+        }
+        log('Parent: Handshake - Received ACK');
+        const info = {
+            localName: 'Parent',
+            local: window,
+            remote: event.source,
+            originForSending: originForSending,
+            originForReceiving: childOrigin,
+        };
+        // If the child reconnected, we need to destroy the prior call receiver
+        // before setting up a new one.
+        if (destroyCallReceiver) {
+            destroyCallReceiver();
+        }
+        destroyCallReceiver = connectCallReceiver(info, methods, log);
+        onDestroy(destroyCallReceiver);
+        // If the child reconnected, we need to remove the methods from the
+        // previous call receiver off the sender.
+        if (receiverMethodNames) {
+            receiverMethodNames.forEach((receiverMethodName) => {
+                delete callSender[receiverMethodName];
+            });
+        }
+        receiverMethodNames = event.data.methodNames;
+        const destroyCallSender = connectCallSender(callSender, info, receiverMethodNames, destroy, log);
+        onDestroy(destroyCallSender);
+        return callSender;
+    };
+};
+
+/**
+ * Handles a SYN handshake message.
+ */
+var handleSynMessageFactory = (log, methods, childOrigin, originForSending) => {
+    return (event) => {
+        if (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),
+        };
+        event.source.postMessage(synAckMessage, originForSending);
+    };
+};
+
+const CHECK_IFRAME_IN_DOC_INTERVAL = 60000;
+/**
+ * Monitors for iframe removal and destroys connection if iframe
+ * is found to have been removed from DOM. This is to prevent memory
+ * leaks when the iframe is removed from the document and the consumer
+ * hasn't called destroy(). Without this, event listeners attached to
+ * the window would stick around and since the event handlers have a
+ * reference to the iframe in their closures, the iframe would stick
+ * around too.
+ */
+var monitorIframeRemoval = (iframe, destructor) => {
+    const { destroy, onDestroy } = destructor;
+    const checkIframeInDocIntervalId = setInterval(() => {
+        if (!iframe.isConnected) {
+            clearInterval(checkIframeInDocIntervalId);
+            destroy();
+        }
+    }, CHECK_IFRAME_IN_DOC_INTERVAL);
+    onDestroy(() => {
+        clearInterval(checkIframeInDocIntervalId);
+    });
+};
+
+/**
+ * Starts a timeout and calls the callback with an error
+ * if the timeout completes before the stop function is called.
+ */
+var startConnectionTimeout = (timeout, callback) => {
+    let timeoutId;
+    if (timeout !== undefined) {
+        timeoutId = window.setTimeout(() => {
+            const error = new Error(`Connection timed out after ${timeout}ms`);
+            error.code = ErrorCode.ConnectionTimeout;
+            callback(error);
+        }, timeout);
+    }
+    return () => {
+        clearTimeout(timeoutId);
+    };
+};
+
+var validateIframeHasSrcOrSrcDoc = (iframe) => {
+    if (!iframe.src && !iframe.srcdoc) {
+        const error = new Error('Iframe must have src or srcdoc property defined.');
+        error.code = ErrorCode.NoIframeSrc;
+        throw error;
+    }
+};
+
+/**
+ * Attempts to establish communication with an iframe.
+ */
+var connectToChild = (options) => {
+    let { iframe, methods = {}, childOrigin, timeout, debug = false } = options;
+    const log = createLogger(debug);
+    const destructor = createDestructor('Parent', log);
+    const { onDestroy, destroy } = destructor;
+    if (!childOrigin) {
+        validateIframeHasSrcOrSrcDoc(iframe);
+        childOrigin = getOriginFromSrc(iframe.src);
+    }
+    // If event.origin is "null", the remote protocol is file: or data: and we
+    // 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 promise = new Promise((resolve, reject) => {
+        const stopConnectionTimeout = startConnectionTimeout(timeout, destroy);
+        const handleMessage = (event) => {
+            if (event.source !== iframe.contentWindow || !event.data) {
+                return;
+            }
+            if (event.data.penpal === MessageType.Syn) {
+                handleSynMessage(event);
+                return;
+            }
+            if (event.data.penpal === MessageType.Ack) {
+                const callSender = handleAckMessage(event);
+                if (callSender) {
+                    stopConnectionTimeout();
+                    resolve(callSender);
+                }
+                return;
+            }
+        };
+        window.addEventListener(NativeEventType.Message, handleMessage);
+        log('Parent: Awaiting handshake');
+        monitorIframeRemoval(iframe, destructor);
+        onDestroy((error) => {
+            window.removeEventListener(NativeEventType.Message, handleMessage);
+            if (error) {
+                reject(error);
+            }
+        });
+    });
+    return {
+        promise,
+        destroy() {
+            // Don't allow consumer to pass an error into destroy.
+            destroy();
+        },
+    };
+};
+
+/* eslint no-void: "off" */
+
+// Loaded ready states
+var loadedStates = ['interactive', 'complete'];
+
+// Return Promise
+var whenDomReady = function whenDomReady(cb, doc) {
+	return new Promise(function (resolve) {
+		// Allow doc to be passed in as the lone first param
+		if (cb && typeof cb !== 'function') {
+			doc = cb;
+			cb = null;
+		}
+
+		// Use global document if we don't have one
+		doc = doc || window.document;
+
+		// Handle DOM load
+		var done = function done() {
+			return resolve(void (cb && setTimeout(cb)));
+		};
+
+		// Resolve now if DOM has already loaded
+		// Otherwise wait for DOMContentLoaded
+		if (loadedStates.indexOf(doc.readyState) !== -1) {
+			done();
+		} else {
+			doc.addEventListener('DOMContentLoaded', done);
+		}
+	});
+};
+
+// Promise chain helper
+whenDomReady.resume = function (doc) {
+	return function (val) {
+		return whenDomReady(doc).then(function () {
+			return val;
+		});
+	};
+};
+
+// eslint-disable-next-line dot-notation
+var MOUNT_URL = {"MOUNT_URL":"https://app.usecsv.com/importer"}["MOUNT_URL"] ;
+var insertIframe = function (id) {
+    var _a;
+    insertCss_2("\n  .usecsv_container {\n    position: fixed;\n    top: 0;\n    bottom: 0;\n    right: 0;\n    left: 0;\n    z-index: 100000;\n  }\n  .usecsv_container iframe {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    border-width: 0;\n  }\n  .usecsv_container {\n    overflow: hidden;\n    overscroll-behavior-x: none;\n  }\n");
+    document.body.insertAdjacentHTML("beforeend", "<div id=".concat(id, " class=\"usecsv_container loading\">\n</div>"));
+    var iframe = document.createElement("iframe");
+    iframe.setAttribute("src", MOUNT_URL);
+    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.appendChild(iframe);
+    return iframe;
+};
+var useCsvPlugin = function (_a) {
+    var importerKey = _a.importerKey, user = _a.user, metadata = _a.metadata;
+    var id = "usecsv-".concat(Math.round(Math.random() * 100000000));
+    return whenDomReady().then(function () {
+        var iframe = insertIframe(id);
+        var iframeConnection = connectToChild({
+            iframe: iframe,
+            methods: {
+                closeIframe: function () {
+                    var _a;
+                    (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.remove();
+                },
+            },
+        });
+        iframeConnection.promise.then(function (child) {
+            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 });
+        });
+        return iframeConnection;
+    });
+};
+
+var script = /*#__PURE__*/Vue.extend({
+  name: "use-csv",
+
+  data() {
+    return {
+      hasSlot: !!this.$slots.default
+    };
+  },
+
+  methods: {
+    onclick() {
+      useCsvPlugin({
+        importerKey: this.importerKey,
+        user: this.importerKey,
+        metadata: this.metadata
+      });
+    },
+
+    hasScopedSlot() {
+      console.log(this.$scopedSlots.default && this.$scopedSlots.default.name);
+      return (this.$scopedSlots.default && this.$scopedSlots.default.name) === "normalized";
+    }
+
+  }
+});
+
+function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier /* server only */, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
+    if (typeof shadowMode !== 'boolean') {
+        createInjectorSSR = createInjector;
+        createInjector = shadowMode;
+        shadowMode = false;
+    }
+    // Vue.extend constructor export interop.
+    const options = typeof script === 'function' ? script.options : script;
+    // render functions
+    if (template && template.render) {
+        options.render = template.render;
+        options.staticRenderFns = template.staticRenderFns;
+        options._compiled = true;
+        // functional template
+        if (isFunctionalTemplate) {
+            options.functional = true;
+        }
+    }
+    // scopedId
+    if (scopeId) {
+        options._scopeId = scopeId;
+    }
+    let hook;
+    if (moduleIdentifier) {
+        // server build
+        hook = function (context) {
+            // 2.3 injection
+            context =
+                context || // cached call
+                    (this.$vnode && this.$vnode.ssrContext) || // stateful
+                    (this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext); // functional
+            // 2.2 with runInNewContext: true
+            if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
+                context = __VUE_SSR_CONTEXT__;
+            }
+            // inject component styles
+            if (style) {
+                style.call(this, createInjectorSSR(context));
+            }
+            // register component module identifier for async chunk inference
+            if (context && context._registeredComponents) {
+                context._registeredComponents.add(moduleIdentifier);
+            }
+        };
+        // used by ssr in case component is cached and beforeCreate
+        // never gets called
+        options._ssrRegister = hook;
+    }
+    else if (style) {
+        hook = shadowMode
+            ? function (context) {
+                style.call(this, createInjectorShadow(context, this.$root.$options.shadowRoot));
+            }
+            : function (context) {
+                style.call(this, createInjector(context));
+            };
+    }
+    if (hook) {
+        if (options.functional) {
+            // register for functional component in vue file
+            const originalRender = options.render;
+            options.render = function renderWithStyleInjection(h, context) {
+                hook.call(context);
+                return originalRender(h, context);
+            };
+        }
+        else {
+            // inject component registration as beforeCreate hook
+            const existing = options.beforeCreate;
+            options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+        }
+    }
+    return script;
+}
+
+const isOldIE = typeof navigator !== 'undefined' &&
+    /msie [6-9]\\b/.test(navigator.userAgent.toLowerCase());
+function createInjector(context) {
+    return (id, style) => addStyle(id, style);
+}
+let HEAD;
+const styles = {};
+function addStyle(id, css) {
+    const group = isOldIE ? css.media || 'default' : id;
+    const style = styles[group] || (styles[group] = { ids: new Set(), styles: [] });
+    if (!style.ids.has(id)) {
+        style.ids.add(id);
+        let code = css.source;
+        if (css.map) {
+            // https://developer.chrome.com/devtools/docs/javascript-debugging
+            // this makes source maps inside style tags work properly in Chrome
+            code += '\n/*# sourceURL=' + css.map.sources[0] + ' */';
+            // http://stackoverflow.com/a/26603875
+            code +=
+                '\n/*# sourceMappingURL=data:application/json;base64,' +
+                    btoa(unescape(encodeURIComponent(JSON.stringify(css.map)))) +
+                    ' */';
+        }
+        if (!style.element) {
+            style.element = document.createElement('style');
+            style.element.type = 'text/css';
+            if (css.media)
+                style.element.setAttribute('media', css.media);
+            if (HEAD === undefined) {
+                HEAD = document.head || document.getElementsByTagName('head')[0];
+            }
+            HEAD.appendChild(style.element);
+        }
+        if ('styleSheet' in style.element) {
+            style.styles.push(code);
+            style.element.styleSheet.cssText = style.styles
+                .filter(Boolean)
+                .join('\n');
+        }
+        else {
+            const index = style.ids.size - 1;
+            const textNode = document.createTextNode(code);
+            const nodes = style.element.childNodes;
+            if (nodes[index])
+                style.element.removeChild(nodes[index]);
+            if (nodes.length)
+                style.element.insertBefore(textNode, nodes[index]);
+            else
+                style.element.appendChild(textNode);
+        }
+    }
+}
+
+/* script */
+const __vue_script__ = script;
+/* template */
+
+var __vue_render__ = function () {
+  var _vm = this;
+
+  var _h = _vm.$createElement;
+
+  var _c = _vm._self._c || _h;
+
+  return _c('div', {
+    staticClass: "usecsv"
+  }, [_vm.hasScopedSlot() ? _c('div', [_vm._t("default", function () {
+    return [_vm._v(" open usecsv ")];
+  }, {
+    "onclick": _vm.onclick
+  })], 2) : _c('div', [_c('button', {
+    attrs: {
+      "type": "button",
+      "id": "usecsv-button"
+    },
+    on: {
+      "click": _vm.onclick
+    }
+  }, [_vm._t("default", function () {
+    return [_vm._v(" open usecsv ")];
+  })], 2)])]);
+};
+
+var __vue_staticRenderFns__ = [];
+/* style */
+
+const __vue_inject_styles__ = function (inject) {
+  if (!inject) return;
+  inject("data-v-d2ea7b16_0", {
+    source: "#usecsv-button[data-v-d2ea7b16]{background-color:#fff;color:#000;border:2px solid #000;border-radius:6px;padding:10px 15px;text-align:center;font-size:16px;cursor:pointer}",
+    map: undefined,
+    media: undefined
+  });
+};
+/* scoped */
+
+
+const __vue_scope_id__ = "data-v-d2ea7b16";
+/* module identifier */
+
+const __vue_module_identifier__ = undefined;
+/* functional template */
+
+const __vue_is_functional_template__ = false;
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, createInjector, undefined, undefined);
+
+var component = __vue_component__;
+
+// Import vue component
+// IIFE injects install function into component, allowing component
+// to be registered via Vue.use() as well as Vue.component(),
+
+var entry_esm = /*#__PURE__*/(() => {
+  // Assign InstallableComponent type
+  const installable = component; // Attach install function executed by Vue.use()
+
+  installable.install = Vue => {
+    Vue.component('use-csv', installable);
+  };
+
+  return installable;
+})(); // It's possible to expose named exports when writing components that can
+// also be used as directives, etc. - eg. import { RollupDemoDirective } from 'rollup-demo';
+// export const RollupDemoDirective = directive;
+
+export { entry_esm as default };