@plasmicapp/host - npm Package Compare versions

Comparing version 1.0.22 to 1.0.24

dist/host.cjs.development.js

@@ -309,2 +309,4 @@ 'use strict';
  * 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
  */
@@ -314,2 +316,5 @@
 var PlasmicCanvasContext = /*#__PURE__*/React.createContext(false);
+var usePlasmicCanvasContext = function usePlasmicCanvasContext() {
+  return React.useContext(PlasmicCanvasContext);
+};
 
@@ -372,6 +377,10 @@ function _PlasmicCanvasHost() {
 
+    var locationHash = new URLSearchParams(location.hash);
+    var plasmicContextValue = isCanvas ? {
+      componentName: locationHash.get("componentName")
+    } : false;
     return ReactDOM.createPortal(React.createElement(ErrorBoundary, {
       key: "" + renderCount
     }, React.createElement(PlasmicCanvasContext.Provider, {
-      value: isCanvas
+      value: plasmicContextValue
     }, plasmicRootNode.get())), appDiv, "plasmic-app");
@@ -504,4 +513,5 @@ }
 exports.useDataEnv = useDataEnv;
+exports.usePlasmicCanvasContext = usePlasmicCanvasContext;
 exports.useSelector = useSelector;
 exports.useSelectors = useSelectors;
 //# sourceMappingURL=host.cjs.development.js.map

dist/host.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("@plasmicapp/preamble");var e,t=require("react"),r=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,n=require("react-dom");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n}var l=globalThis;l.__PlasmicFetcherRegistry=[];var u=globalThis;null==u.__PlasmicComponentRegistry&&(u.__PlasmicComponentRegistry=[]);var c,s,p=globalThis;function f(e,t){return d(e,t)}null==p.__PlasmicContextRegistry&&(p.__PlasmicContextRegistry=[]);var d=function(e,r){return e?r:Array.isArray(r)?r.map((function(t){return f(e,t)})):r&&t.isValidElement(r)&&"string"!=typeof r?t.cloneElement(r):r},m=globalThis,v=null!=(c=null==m||null==(s=m.__Sub)?void 0:s.setRepeatedElementFn)?c:function(e){d=e},h=t.createContext(void 0);function y(e,t){if(t){for(var r,n=e,o=function(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(r)return(r=r.call(e)).next.bind(r);if(Array.isArray(e)||(r=function(e,t){if(e){if("string"==typeof e)return i(e,void 0);var r=Object.prototype.toString.call(e).slice(8,-1);return"Object"===r&&e.constructor&&(r=e.constructor.name),"Map"===r||"Set"===r?Array.from(e):"Arguments"===r||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(r)?i(e,void 0):void 0}}(e))){r&&(e=r);var n=0;return function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(t.split("."));!(r=o()).done;){var a;n=null==(a=n)?void 0:a[r.value]}return n}}function b(e){return y(_(),e)}function g(e){void 0===e&&(e={});var t=_();return Object.fromEntries(Object.entries(e).filter((function(e){return!!e[0]&&!!e[1]})).map((function(e){return function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return t}(e[0],y(t,e[1]))})))}function _(){return t.useContext(h)}function E(e){var t,n,a=e.name,i=e.data,l=e.children,u=null!=(t=_())?t:{};return a?r.createElement(h.Provider,{value:o({},u,(n={},n[a]=i,n))},l):r.createElement(r.Fragment,null,l)}function x(e){return(0,e.children)(_())}var w=globalThis;null==w.__PlasmicHostVersion&&(w.__PlasmicHostVersion="2");var C=[],P=new function(e){var t=this;this.value=null,this.set=function(e){t.value=e,C.forEach((function(e){return e()}))},this.get=function(){return t.value}}(null);function R(){return function(e,t){if(void 0===t&&(t=""),null==e)throw t=(function(e){return"string"==typeof e}(t)?t:t())||"",new Error("Value must not be undefined or null"+(t?"- "+t:""));return e}(new URL("https://fakeurl/"+location.hash.replace(/#/,"?")).searchParams.get("origin"),"Missing information from Plasmic window.")}var S=0,j=t.createContext(!1);function O(){var e,r,o,a=!!window.parent,i=!(null==(e=location.hash)||!e.match(/\bcanvas=true\b/)),l=!(null==(r=location.hash)||!r.match(/\blive=true\b/))||!a,u=a&&!document.querySelector("#plasmic-studio-tag")&&!i&&!l,c=(o=t.useState(0)[1],t.useCallback((function(){o((function(e){return e+1}))}),[]));if(t.useLayoutEffect((function(){return C.push(c),function(){var e=C.indexOf(c);e>=0&&C.splice(e,1)}}),[c]),t.useEffect((function(){var e,t;u&&a&&window.parent!==window&&(e=document.createElement("script"),t=R(),e.src=t+"/static/js/studio.js",document.body.appendChild(e))}),[u,a]),t.useEffect((function(){if(!u&&!document.querySelector("#getlibs")&&l){var e=document.createElement("script");e.id="getlibs",e.src=R()+"/static/js/getlibs.js",e.async=!1,e.onload=function(){null==window.__GetlibsReadyResolver||window.__GetlibsReadyResolver()},document.head.append(e)}}),[u]),!a)return null;if(i||l){var s=document.querySelector("#plasmic-app.__wab_user-body");return s||((s=document.createElement("div")).id="plasmic-app",s.classList.add("__wab_user-body"),document.body.appendChild(s)),n.createPortal(t.createElement(A,{key:""+S},t.createElement(j.Provider,{value:i},P.get())),s,"plasmic-app")}return u&&window.parent===window?t.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}}):null}null==w.__Sub&&(console.log("Plasmic: Setting up app host dependencies"),w.__Sub={React:t,ReactDOM:n,setPlasmicRootNode:function(e){S++,P.set(e)},registerRenderErrorListener:function(e){return D.push(e),function(){var t=D.indexOf(e);t>=0&&D.splice(t,1)}},repeatedElement:f,setRepeatedElementFn:v,PlasmicCanvasContext:j,DataProvider:E,useDataEnv:_,useSelector:b,useSelectors:g,applySelector:y,DataCtxReader:x});var D=[],A=function(e){var r,n;function o(t){var r;return(r=e.call(this,t)||this).state={},r}n=e,(r=o).prototype=Object.create(n.prototype),r.prototype.constructor=r,a(r,n),o.getDerivedStateFromError=function(e){return{error:e}};var i=o.prototype;return i.componentDidCatch=function(e){D.forEach((function(t){return t(e)}))},i.render=function(){return this.state.error?t.createElement("div",null,"Error: ",""+this.state.error.message):this.props.children},o}(t.Component);function F(){return null}exports.DataContext=h,exports.DataCtxReader=x,exports.DataProvider=E,exports.PlasmicCanvasContext=j,exports.PlasmicCanvasHost=function(e){var r=e.enableWebpackHmr,n=t.useState(null),o=n[0],a=n[1];return t.useEffect((function(){a(t.createElement(O,null))}),[]),t.createElement(t.Fragment,null,!r&&t.createElement(F,null),o)},exports.applySelector=y,exports.registerComponent=function(e,t){u.__PlasmicComponentRegistry.push({component:e,meta:t})},exports.registerGlobalContext=function(e,t){p.__PlasmicContextRegistry.push({component:e,meta:t})},exports.repeatedElement=f,exports.unstable_registerFetcher=function(e,t){l.__PlasmicFetcherRegistry.push({fetcher:e,meta:t})},exports.useDataEnv=_,exports.useSelector=b,exports.useSelectors=g;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),require("@plasmicapp/preamble");var e,t=require("react"),n=(e=t)&&"object"==typeof e&&"default"in e?e.default:e,r=require("react-dom");function o(){return(o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function a(e,t){return(a=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var n=0,r=new Array(t);n<t;n++)r[n]=e[n];return r}var l=globalThis;l.__PlasmicFetcherRegistry=[];var u=globalThis;null==u.__PlasmicComponentRegistry&&(u.__PlasmicComponentRegistry=[]);var c,s,p=globalThis;function f(e,t){return m(e,t)}null==p.__PlasmicContextRegistry&&(p.__PlasmicContextRegistry=[]);var m=function(e,n){return e?n:Array.isArray(n)?n.map((function(t){return f(e,t)})):n&&t.isValidElement(n)&&"string"!=typeof n?t.cloneElement(n):n},d=globalThis,v=null!=(c=null==d||null==(s=d.__Sub)?void 0:s.setRepeatedElementFn)?c:function(e){m=e},h=t.createContext(void 0);function y(e,t){if(t){for(var n,r=e,o=function(e,t){var n="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(n)return(n=n.call(e)).next.bind(n);if(Array.isArray(e)||(n=function(e,t){if(e){if("string"==typeof e)return i(e,void 0);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?i(e,void 0):void 0}}(e))){n&&(e=n);var r=0;return function(){return r>=e.length?{done:!0}:{done:!1,value:e[r++]}}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}(t.split("."));!(n=o()).done;){var a;r=null==(a=r)?void 0:a[n.value]}return r}}function b(e){return y(_(),e)}function g(e){void 0===e&&(e={});var t=_();return Object.fromEntries(Object.entries(e).filter((function(e){return!!e[0]&&!!e[1]})).map((function(e){return function(){for(var e=arguments.length,t=new Array(e),n=0;n<e;n++)t[n]=arguments[n];return t}(e[0],y(t,e[1]))})))}function _(){return t.useContext(h)}function x(e){var t,r,a=e.name,i=e.data,l=e.children,u=null!=(t=_())?t:{};return a?n.createElement(h.Provider,{value:o({},u,(r={},r[a]=i,r))},l):n.createElement(n.Fragment,null,l)}function E(e){return(0,e.children)(_())}var w=globalThis;null==w.__PlasmicHostVersion&&(w.__PlasmicHostVersion="2");var C=[],P=new function(e){var t=this;this.value=null,this.set=function(e){t.value=e,C.forEach((function(e){return e()}))},this.get=function(){return t.value}}(null);function R(){return function(e,t){if(void 0===t&&(t=""),null==e)throw t=(function(e){return"string"==typeof e}(t)?t:t())||"",new Error("Value must not be undefined or null"+(t?"- "+t:""));return e}(new URL("https://fakeurl/"+location.hash.replace(/#/,"?")).searchParams.get("origin"),"Missing information from Plasmic window.")}var S=0,j=t.createContext(!1);function O(){var e,n,o,a=!!window.parent,i=!(null==(e=location.hash)||!e.match(/\bcanvas=true\b/)),l=!(null==(n=location.hash)||!n.match(/\blive=true\b/))||!a,u=a&&!document.querySelector("#plasmic-studio-tag")&&!i&&!l,c=(o=t.useState(0)[1],t.useCallback((function(){o((function(e){return e+1}))}),[]));if(t.useLayoutEffect((function(){return C.push(c),function(){var e=C.indexOf(c);e>=0&&C.splice(e,1)}}),[c]),t.useEffect((function(){var e,t;u&&a&&window.parent!==window&&(e=document.createElement("script"),t=R(),e.src=t+"/static/js/studio.js",document.body.appendChild(e))}),[u,a]),t.useEffect((function(){if(!u&&!document.querySelector("#getlibs")&&l){var e=document.createElement("script");e.id="getlibs",e.src=R()+"/static/js/getlibs.js",e.async=!1,e.onload=function(){null==window.__GetlibsReadyResolver||window.__GetlibsReadyResolver()},document.head.append(e)}}),[u]),!a)return null;if(i||l){var s=document.querySelector("#plasmic-app.__wab_user-body");s||((s=document.createElement("div")).id="plasmic-app",s.classList.add("__wab_user-body"),document.body.appendChild(s));var p=new URLSearchParams(location.hash),f=!!i&&{componentName:p.get("componentName")};return r.createPortal(t.createElement(A,{key:""+S},t.createElement(j.Provider,{value:f},P.get())),s,"plasmic-app")}return u&&window.parent===window?t.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}}):null}null==w.__Sub&&(console.log("Plasmic: Setting up app host dependencies"),w.__Sub={React:t,ReactDOM:r,setPlasmicRootNode:function(e){S++,P.set(e)},registerRenderErrorListener:function(e){return D.push(e),function(){var t=D.indexOf(e);t>=0&&D.splice(t,1)}},repeatedElement:f,setRepeatedElementFn:v,PlasmicCanvasContext:j,DataProvider:x,useDataEnv:_,useSelector:b,useSelectors:g,applySelector:y,DataCtxReader:E});var D=[],A=function(e){var n,r;function o(t){var n;return(n=e.call(this,t)||this).state={},n}r=e,(n=o).prototype=Object.create(r.prototype),n.prototype.constructor=n,a(n,r),o.getDerivedStateFromError=function(e){return{error:e}};var i=o.prototype;return i.componentDidCatch=function(e){D.forEach((function(t){return t(e)}))},i.render=function(){return this.state.error?t.createElement("div",null,"Error: ",""+this.state.error.message):this.props.children},o}(t.Component);function F(){return null}exports.DataContext=h,exports.DataCtxReader=E,exports.DataProvider=x,exports.PlasmicCanvasContext=j,exports.PlasmicCanvasHost=function(e){var n=e.enableWebpackHmr,r=t.useState(null),o=r[0],a=r[1];return t.useEffect((function(){a(t.createElement(O,null))}),[]),t.createElement(t.Fragment,null,!n&&t.createElement(F,null),o)},exports.applySelector=y,exports.registerComponent=function(e,t){u.__PlasmicComponentRegistry.push({component:e,meta:t})},exports.registerGlobalContext=function(e,t){p.__PlasmicContextRegistry.push({component:e,meta:t})},exports.repeatedElement=f,exports.unstable_registerFetcher=function(e,t){l.__PlasmicFetcherRegistry.push({fetcher:e,meta:t})},exports.useDataEnv=_,exports.usePlasmicCanvasContext=function(){return t.useContext(j)},exports.useSelector=b,exports.useSelectors=g;
 //# sourceMappingURL=host.cjs.production.min.js.map

dist/host.esm.js

@@ -304,2 +304,4 @@ import '@plasmicapp/preamble';
  * 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
  */
@@ -309,2 +311,5 @@
 var PlasmicCanvasContext = /*#__PURE__*/createContext(false);
+var usePlasmicCanvasContext = function usePlasmicCanvasContext() {
+  return useContext(PlasmicCanvasContext);
+};
 
@@ -367,6 +372,10 @@ function _PlasmicCanvasHost() {
 
+    var locationHash = new URLSearchParams(location.hash);
+    var plasmicContextValue = isCanvas ? {
+      componentName: locationHash.get("componentName")
+    } : false;
     return createPortal(createElement(ErrorBoundary, {
       key: "" + renderCount
     }, createElement(PlasmicCanvasContext.Provider, {
-      value: isCanvas
+      value: plasmicContextValue
     }, plasmicRootNode.get())), appDiv, "plasmic-app");
@@ -491,3 +500,3 @@ }
 
-export { DataContext, DataCtxReader, DataProvider, PlasmicCanvasContext, PlasmicCanvasHost, applySelector, registerComponent, registerGlobalContext, repeatedElement, registerFetcher as unstable_registerFetcher, useDataEnv, useSelector, useSelectors };
+export { DataContext, DataCtxReader, DataProvider, PlasmicCanvasContext, PlasmicCanvasHost, applySelector, registerComponent, registerGlobalContext, repeatedElement, registerFetcher as unstable_registerFetcher, useDataEnv, usePlasmicCanvasContext, useSelector, useSelectors };
 //# sourceMappingURL=host.esm.js.map

dist/index.d.ts

@@ -21,4 +21,11 @@ import "@plasmicapp/preamble";
  * 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
  */
-export declare const PlasmicCanvasContext: React.Context<boolean>;
+export declare const PlasmicCanvasContext: React.Context<boolean | {
+    componentName: string | null;
+}>;
+export declare const usePlasmicCanvasContext: () => boolean | {
+    componentName: string | null;
+};
 interface PlasmicCanvasHostProps {
@@ -25,0 +32,0 @@ /**

package.json

 {
   "name": "@plasmicapp/host",
-  "version": "1.0.22",
+  "version": "1.0.24",
   "description": "plasmic library for app hosting",
@@ -33,3 +33,3 @@ "main": "dist/index.js",
   "dependencies": {
-    "@plasmicapp/preamble": "0.0.54",
+    "@plasmicapp/preamble": "0.0.56",
     "window-or-global": "^1.0.1"
@@ -36,0 +36,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

223327

increased by1.64%

Lines of code

2197

increased by1.29%

Dependency changes

• + Added@plasmicapp/preamble@0.0.56(transitive)

• - Removed@plasmicapp/preamble@0.0.54(transitive)

• Updated@plasmicapp/preamble@0.0.56