@plasmicapp/host 1.0.128 → 1.0.130

package/dist/index.cjs.js

@@ -0,0 +1,537 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var PlasmicQuery = require('@plasmicapp/query');
+var React = require('react');
+var ReactDOM = require('react-dom');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+function _interopNamespace(e) {
+    if (e && e.__esModule) return e;
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () {
+                        return e[k];
+                    }
+                });
+            }
+        });
+    }
+    n['default'] = e;
+    return Object.freeze(n);
+}
+
+var PlasmicQuery__namespace = /*#__PURE__*/_interopNamespace(PlasmicQuery);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
+
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise */
+
+var extendStatics = function(d, b) {
+    extendStatics = Object.setPrototypeOf ||
+        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+        function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+    return extendStatics(d, b);
+};
+
+function __extends(d, b) {
+    if (typeof b !== "function" && b !== null)
+        throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+    extendStatics(d, b);
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+}
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function isString(x) {
+    return typeof x === "string";
+}
+function ensure(x, msg) {
+    if (msg === void 0) { msg = ""; }
+    if (x === null || x === undefined) {
+        debugger;
+        msg = (isString(msg) ? msg : msg()) || "";
+        throw new Error("Value must not be undefined or null" + (msg ? "- " + msg : ""));
+    }
+    else {
+        return x;
+    }
+}
+
+function useForceUpdate() {
+    var _a = React.useState(0), setTick = _a[1];
+    var update = React.useCallback(function () {
+        setTick(function (tick) { return tick + 1; });
+    }, []);
+    return update;
+}
+
+var rootChangeListeners = [];
+var PlasmicRootNodeWrapper = /** @class */ (function () {
+    function PlasmicRootNodeWrapper(value) {
+        var _this = this;
+        this.value = value;
+        this.set = function (val) {
+            _this.value = val;
+            rootChangeListeners.forEach(function (f) { return f(); });
+        };
+        this.get = function () { return _this.value; };
+    }
+    return PlasmicRootNodeWrapper;
+}());
+var plasmicRootNode = new PlasmicRootNodeWrapper(null);
+function getHashParams() {
+    return new URLSearchParams(location.hash.replace(/^#/, "?"));
+}
+function getPlasmicOrigin() {
+    var params = getHashParams();
+    return ensure(params.get("origin"), "Missing information from Plasmic window.");
+}
+function getStudioHash() {
+    var hashParams = getHashParams();
+    if (hashParams.has("studioHash")) {
+        return hashParams.get("studioHash");
+    }
+    var urlParams = new URL(location.href).searchParams;
+    return urlParams.get("studio-hash");
+}
+function renderStudioIntoIframe() {
+    var script = document.createElement("script");
+    var plasmicOrigin = getPlasmicOrigin();
+    var hash = getStudioHash();
+    script.src = plasmicOrigin + "/static/js/studio" + (hash ? "." + hash + ".js" : ".js");
+    document.body.appendChild(script);
+}
+var renderCount = 0;
+function setPlasmicRootNode(node) {
+    // Keep track of renderCount, which we use as key to ErrorBoundary, so
+    // we can reset the error on each render
+    renderCount++;
+    plasmicRootNode.set(node);
+}
+/**
+ * React context to detect whether the component is rendered on Plasmic editor.
+ * If not, return false.
+ * If so, return an object with more information about the component
+ */
+var PlasmicCanvasContext = React__namespace.createContext(false);
+var usePlasmicCanvasContext = function () {
+    return React__namespace.useContext(PlasmicCanvasContext);
+};
+function _PlasmicCanvasHost() {
+    var _a, _b;
+    // If window.parent is null, then this is a window whose containing iframe
+    // has been detached from the DOM (for the top window, window.parent === window).
+    // In that case, we shouldn't do anything.  If window.parent is null, by the way,
+    // location.hash will also be null.
+    var isFrameAttached = !!window.parent;
+    var isCanvas = !!((_a = location.hash) === null || _a === void 0 ? void 0 : _a.match(/\bcanvas=true\b/));
+    var isLive = !!((_b = location.hash) === null || _b === void 0 ? void 0 : _b.match(/\blive=true\b/)) || !isFrameAttached;
+    var shouldRenderStudio = isFrameAttached &&
+        !document.querySelector("#plasmic-studio-tag") &&
+        !isCanvas &&
+        !isLive;
+    var forceUpdate = useForceUpdate();
+    React__namespace.useLayoutEffect(function () {
+        rootChangeListeners.push(forceUpdate);
+        return function () {
+            var index = rootChangeListeners.indexOf(forceUpdate);
+            if (index >= 0) {
+                rootChangeListeners.splice(index, 1);
+            }
+        };
+    }, [forceUpdate]);
+    React__namespace.useEffect(function () {
+        if (shouldRenderStudio && isFrameAttached && window.parent !== window) {
+            renderStudioIntoIframe();
+        }
+    }, [shouldRenderStudio, isFrameAttached]);
+    React__namespace.useEffect(function () {
+        if (!shouldRenderStudio && !document.querySelector("#getlibs") && isLive) {
+            var scriptElt = document.createElement("script");
+            scriptElt.id = "getlibs";
+            scriptElt.src = getPlasmicOrigin() + "/static/js/getlibs.js";
+            scriptElt.async = false;
+            scriptElt.onload = function () {
+                var _a, _b;
+                (_b = (_a = window).__GetlibsReadyResolver) === null || _b === void 0 ? void 0 : _b.call(_a);
+            };
+            document.head.append(scriptElt);
+        }
+    }, [shouldRenderStudio]);
+    var _c = React__namespace.useState(function () {
+        return deriveCanvasContextValue();
+    }), canvasContextValue = _c[0], setCanvasContextValue = _c[1];
+    React__namespace.useEffect(function () {
+        if (isCanvas) {
+            var listener_1 = function () {
+                setCanvasContextValue(deriveCanvasContextValue());
+            };
+            window.addEventListener("hashchange", listener_1);
+            return function () { return window.removeEventListener("hashchange", listener_1); };
+        }
+        return undefined;
+    }, [isCanvas]);
+    if (!isFrameAttached) {
+        return null;
+    }
+    if (isCanvas || isLive) {
+        var appDiv = document.querySelector("#plasmic-app.__wab_user-body");
+        if (!appDiv) {
+            appDiv = document.createElement("div");
+            appDiv.id = "plasmic-app";
+            appDiv.classList.add("__wab_user-body");
+            document.body.appendChild(appDiv);
+        }
+        return ReactDOM__namespace.createPortal(React__namespace.createElement(ErrorBoundary, { key: "" + renderCount },
+            React__namespace.createElement(PlasmicCanvasContext.Provider, { value: canvasContextValue }, plasmicRootNode.get())), appDiv, "plasmic-app");
+    }
+    if (shouldRenderStudio && window.parent === window) {
+        return (React__namespace.createElement("iframe", { src: "https://docs.plasmic.app/app-content/app-host-ready#appHostUrl=" + encodeURIComponent(location.href), style: {
+                width: "100vw",
+                height: "100vh",
+                border: "none",
+                position: "fixed",
+                top: 0,
+                left: 0,
+                zIndex: 99999999,
+            } }));
+    }
+    return null;
+}
+var PlasmicCanvasHost = function (props) {
+    var enableWebpackHmr = props.enableWebpackHmr;
+    var _a = React__namespace.useState(null), node = _a[0], setNode = _a[1];
+    React__namespace.useEffect(function () {
+        setNode(React__namespace.createElement(_PlasmicCanvasHost, null));
+    }, []);
+    return (React__namespace.createElement(React__namespace.Fragment, null,
+        !enableWebpackHmr && React__namespace.createElement(DisableWebpackHmr, null),
+        node));
+};
+var renderErrorListeners = [];
+function registerRenderErrorListener(listener) {
+    renderErrorListeners.push(listener);
+    return function () {
+        var index = renderErrorListeners.indexOf(listener);
+        if (index >= 0) {
+            renderErrorListeners.splice(index, 1);
+        }
+    };
+}
+var ErrorBoundary = /** @class */ (function (_super) {
+    __extends(ErrorBoundary, _super);
+    function ErrorBoundary(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {};
+        return _this;
+    }
+    ErrorBoundary.getDerivedStateFromError = function (error) {
+        return { error: error };
+    };
+    ErrorBoundary.prototype.componentDidCatch = function (error) {
+        renderErrorListeners.forEach(function (listener) { return listener(error); });
+    };
+    ErrorBoundary.prototype.render = function () {
+        if (this.state.error) {
+            return React__namespace.createElement("div", null,
+                "Error: ", "" + this.state.error.message);
+        }
+        else {
+            return React__namespace.createElement(React__namespace.Fragment, null, this.props.children);
+        }
+    };
+    return ErrorBoundary;
+}(React__namespace.Component));
+function DisableWebpackHmr() {
+    if (process.env.NODE_ENV === "production") {
+        return null;
+    }
+    return (React__namespace.createElement("script", { type: "text/javascript", dangerouslySetInnerHTML: {
+            __html: "\n      if (typeof window !== \"undefined\") {\n        const RealEventSource = window.EventSource;\n        window.EventSource = function(url, config) {\n          if (/[^a-zA-Z]hmr($|[^a-zA-Z])/.test(url)) {\n            console.warn(\"Plasmic: disabled EventSource request for\", url);\n            return {\n              onerror() {}, onmessage() {}, onopen() {}, close() {}\n            };\n          } else {\n            return new RealEventSource(url, config);\n          }\n        }\n      }\n      ",
+        } }));
+}
+function deriveCanvasContextValue() {
+    var _a;
+    var hash = window.location.hash;
+    if (hash && hash.length > 0) {
+        // create URLsearchParams skipping the initial # character
+        var params = new URLSearchParams(hash.substring(1));
+        if (params.get("canvas") === "true") {
+            var globalVariants = params.get("globalVariants");
+            return {
+                componentName: (_a = params.get("componentName")) !== null && _a !== void 0 ? _a : null,
+                globalVariants: globalVariants ? JSON.parse(globalVariants) : {},
+                interactive: params.get("interactive") === "true",
+            };
+        }
+    }
+    return false;
+}
+
+var tuple = function () {
+    var args = [];
+    for (var _i = 0; _i < arguments.length; _i++) {
+        args[_i] = arguments[_i];
+    }
+    return args;
+};
+
+var DataContext = React.createContext(undefined);
+function mkMetaName(name) {
+    return "__plasmic_meta_" + name;
+}
+function mkMetaValue(meta) {
+    return meta;
+}
+function applySelector(rawData, selector) {
+    if (!selector) {
+        return undefined;
+    }
+    var curData = rawData;
+    for (var _i = 0, _a = selector.split("."); _i < _a.length; _i++) {
+        var key = _a[_i];
+        curData = curData === null || curData === void 0 ? void 0 : curData[key];
+    }
+    return curData;
+}
+function useSelector(selector) {
+    var rawData = useDataEnv();
+    return applySelector(rawData, selector);
+}
+function useSelectors(selectors) {
+    if (selectors === void 0) { selectors = {}; }
+    var rawData = useDataEnv();
+    return Object.fromEntries(Object.entries(selectors)
+        .filter(function (_a) {
+        var key = _a[0], selector = _a[1];
+        return !!key && !!selector;
+    })
+        .map(function (_a) {
+        var key = _a[0], selector = _a[1];
+        return tuple(key, applySelector(rawData, selector));
+    }));
+}
+function useDataEnv() {
+    return React.useContext(DataContext);
+}
+function DataProvider(_a) {
+    var _b;
+    var _c;
+    var name = _a.name, data = _a.data, hidden = _a.hidden, label = _a.label, children = _a.children;
+    var existingEnv = (_c = useDataEnv()) !== null && _c !== void 0 ? _c : {};
+    if (!name) {
+        return React__default['default'].createElement(React__default['default'].Fragment, null, children);
+    }
+    else {
+        return (React__default['default'].createElement(DataContext.Provider, { value: __assign(__assign({}, existingEnv), (_b = {}, _b[name] = data, _b[mkMetaName(name)] = mkMetaValue({ hidden: hidden, label: label }), _b)) }, children));
+    }
+}
+function PageParamsProvider(_a) {
+    var children = _a.children, _b = _a.params, params = _b === void 0 ? {} : _b, _c = _a.query, query = _c === void 0 ? {} : _c;
+    var $ctx = useDataEnv() || {};
+    return (React__default['default'].createElement(DataProvider, { name: "params", data: __assign(__assign({}, $ctx.params), params), label: "Page URL path params" },
+        React__default['default'].createElement(DataProvider, { name: "query", data: __assign(__assign({}, $ctx.query), query), label: "Page URL query params" }, children)));
+}
+function DataCtxReader(_a) {
+    var children = _a.children;
+    var $ctx = useDataEnv();
+    return children($ctx);
+}
+
+var root$6 = globalThis;
+root$6.__PlasmicFetcherRegistry = [];
+function registerFetcher(fetcher, meta) {
+    root$6.__PlasmicFetcherRegistry.push({ fetcher: fetcher, meta: meta });
+}
+
+var GlobalActionsContext = React__default['default'].createContext(undefined);
+function GlobalActionsProvider(props) {
+    var contextName = props.contextName, children = props.children, actions = props.actions;
+    var namespacedActions = React__default['default'].useMemo(function () {
+        return Object.fromEntries(Object.entries(actions).map(function (_a) {
+            var key = _a[0], val = _a[1];
+            return [
+                contextName + "." + key,
+                val,
+            ];
+        }));
+    }, [contextName, actions]);
+    return (React__default['default'].createElement(GlobalActionsContext.Provider, { value: namespacedActions }, children));
+}
+function useGlobalActions() {
+    var _a;
+    return (_a = React__default['default'].useContext(GlobalActionsContext)) !== null && _a !== void 0 ? _a : {};
+}
+
+var root$5 = globalThis;
+if (root$5.__PlasmicComponentRegistry == null) {
+    root$5.__PlasmicComponentRegistry = [];
+}
+function registerComponent(component, meta) {
+    // Check for duplicates
+    if (root$5.__PlasmicComponentRegistry.some(function (r) {
+        return r.component === component && r.meta.name === meta.name;
+    })) {
+        return;
+    }
+    root$5.__PlasmicComponentRegistry.push({ component: component, meta: meta });
+}
+
+var root$4 = globalThis;
+if (root$4.__PlasmicContextRegistry == null) {
+    root$4.__PlasmicContextRegistry = [];
+}
+function registerGlobalContext(component, meta) {
+    // Check for duplicates
+    if (root$4.__PlasmicContextRegistry.some(function (r) {
+        return r.component === component && r.meta.name === meta.name;
+    })) {
+        return;
+    }
+    root$4.__PlasmicContextRegistry.push({ component: component, meta: meta });
+}
+
+var root$3 = globalThis;
+if (root$3.__PlasmicTokenRegistry == null) {
+    root$3.__PlasmicTokenRegistry = [];
+}
+function registerToken(token) {
+    root$3.__PlasmicTokenRegistry.push(token);
+}
+
+var root$2 = globalThis;
+if (root$2.__PlasmicTraitRegistry == null) {
+    root$2.__PlasmicTraitRegistry = [];
+}
+function registerTrait(trait, meta) {
+    root$2.__PlasmicTraitRegistry.push({
+        trait: trait,
+        meta: meta,
+    });
+}
+
+var _a, _b;
+function repeatedElement(index, elt) {
+    return repeatedElementFn(index, elt);
+}
+var repeatedElementFn = function (index, elt) {
+    if (Array.isArray(elt)) {
+        return elt.map(function (v) { return repeatedElementFn(index, v); });
+    }
+    if (elt && React.isValidElement(elt) && typeof elt !== "string") {
+        return React.cloneElement(elt);
+    }
+    return elt;
+};
+var root$1 = globalThis;
+var setRepeatedElementFn = (_b = (_a = root$1 === null || root$1 === void 0 ? void 0 : root$1.__Sub) === null || _a === void 0 ? void 0 : _a.setRepeatedElementFn) !== null && _b !== void 0 ? _b : function (fn) {
+    repeatedElementFn = fn;
+};
+
+var hostModule = /*#__PURE__*/Object.freeze({
+    __proto__: null,
+    PlasmicCanvasContext: PlasmicCanvasContext,
+    PlasmicCanvasHost: PlasmicCanvasHost,
+    usePlasmicCanvasContext: usePlasmicCanvasContext,
+    unstable_registerFetcher: registerFetcher,
+    registerComponent: registerComponent,
+    registerGlobalContext: registerGlobalContext,
+    registerToken: registerToken,
+    registerTrait: registerTrait,
+    repeatedElement: repeatedElement,
+    DataContext: DataContext,
+    mkMetaName: mkMetaName,
+    mkMetaValue: mkMetaValue,
+    applySelector: applySelector,
+    useSelector: useSelector,
+    useSelectors: useSelectors,
+    useDataEnv: useDataEnv,
+    DataProvider: DataProvider,
+    PageParamsProvider: PageParamsProvider,
+    DataCtxReader: DataCtxReader,
+    GlobalActionsContext: GlobalActionsContext,
+    GlobalActionsProvider: GlobalActionsProvider,
+    useGlobalActions: useGlobalActions
+});
+
+var hostVersion = "1.0.130";
+
+var root = globalThis;
+if (root.__Sub == null) {
+    // Creating a side effect here by logging, so that vite won't
+    // ignore this block for whatever reason. Hiding this for now
+    // as users are complaining; will have to check if this has
+    // been fixed with vite.
+    // console.log("Plasmic: Setting up app host dependencies");
+    root.__Sub = __assign({ React: React__namespace,
+        ReactDOM: ReactDOM__namespace,
+        PlasmicQuery: PlasmicQuery__namespace,
+        hostModule: hostModule,
+        hostVersion: hostVersion, hostUtils: {
+            setPlasmicRootNode: setPlasmicRootNode,
+            registerRenderErrorListener: registerRenderErrorListener,
+            setRepeatedElementFn: setRepeatedElementFn,
+        }, 
+        // For backwards compatibility:
+        setPlasmicRootNode: setPlasmicRootNode,
+        registerRenderErrorListener: registerRenderErrorListener,
+        setRepeatedElementFn: setRepeatedElementFn }, hostModule);
+}
+
+exports.DataContext = DataContext;
+exports.DataCtxReader = DataCtxReader;
+exports.DataProvider = DataProvider;
+exports.GlobalActionsContext = GlobalActionsContext;
+exports.GlobalActionsProvider = GlobalActionsProvider;
+exports.PageParamsProvider = PageParamsProvider;
+exports.PlasmicCanvasContext = PlasmicCanvasContext;
+exports.PlasmicCanvasHost = PlasmicCanvasHost;
+exports.applySelector = applySelector;
+exports.mkMetaName = mkMetaName;
+exports.mkMetaValue = mkMetaValue;
+exports.registerComponent = registerComponent;
+exports.registerGlobalContext = registerGlobalContext;
+exports.registerToken = registerToken;
+exports.registerTrait = registerTrait;
+exports.repeatedElement = repeatedElement;
+exports.unstable_registerFetcher = registerFetcher;
+exports.useDataEnv = useDataEnv;
+exports.useGlobalActions = useGlobalActions;
+exports.usePlasmicCanvasContext = usePlasmicCanvasContext;
+exports.useSelector = useSelector;
+exports.useSelectors = useSelectors;
+//# sourceMappingURL=index.cjs.js.map