npm - @plasmicpkgs/plasmic-basic-components - Versions diffs - 0.0.8 → 0.0.12 - Mend

@plasmicpkgs/plasmic-basic-components 0.0.8 → 0.0.12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/Data.d.ts +21 -14
package/dist/Embed.d.ts +1 -0
package/dist/EmbedCss.d.ts +0 -1
package/dist/Iframe.d.ts +0 -1
package/dist/index.d.ts +2 -0
package/dist/plasmic-basic-components.cjs.development.js +144 -132
package/dist/plasmic-basic-components.cjs.development.js.map +1 -1
package/dist/plasmic-basic-components.cjs.production.min.js +1 -1
package/dist/plasmic-basic-components.cjs.production.min.js.map +1 -1
package/dist/plasmic-basic-components.esm.js +144 -134
package/dist/plasmic-basic-components.esm.js.map +1 -1
package/package.json +5 -4

package/dist/plasmic-basic-components.cjs.production.min.js CHANGED Viewed

@@ -1,2 +1,2 @@
-"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@plasmicapp/host"),r=e(require("@plasmicapp/host/registerComponent")),o=require("react"),a=e(o);function n(){return(n=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function s(e,t){if(null==e)return{};var r,o,a={},n=Object.keys(e);for(o=0;o<n.length;o++)t.indexOf(r=n[o])>=0||(a[r]=e[r]);return a}function i(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}var l=o.createContext(void 0),p="@plasmicpkgs/plasmic-basic-components";function c(e,t){if(t){for(var r,o=e,a=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 o=0;return function(){return o>=e.length?{done:!0}:{done:!1,value:e[o++]}}}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=a()).done;){var n;o=null==(n=o)?void 0:n[r.value]}return o}}function m(e){return c(d(),e)}function u(e){void 0===e&&(e={});var t=d();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],c(t,e[1]))})))}function d(){return o.useContext(l)}function h(e){var t,r,o=e.name,s=e.data,i=e.children,p=null!=(t=d())?t:{};return o?a.createElement(l.Provider,{value:n({},p,(r={},r[o]=s,r))},i):a.createElement(a.Fragment,null,i)}function y(e){var t=e.tag,r=void 0===t?"div":t,a=e.className,i=e.children,l=e.propSelectors,p=s(e,["tag","className","children","propSelectors"]),c=u(l);return o.createElement(r,n({children:i},p,c,{className:a+" "+c.className}))}function f(e){var t=e.selector,r=e.propSelectors,o=s(e,["selector","propSelectors"]);return a.createElement(y,Object.assign({},o,{propSelectors:n({},r,{children:t})}),"(DynamicText requires a selector)")}function v(e){var t=e.selector,r=e.propSelectors,o=s(e,["selector","propSelectors"]);return a.createElement(y,Object.assign({tag:"img",loading:"lazy",style:{objectFit:"cover"}},o,{propSelectors:n({},r,{src:t}),src:"https://studio.plasmic.app/static/img/placeholder.png"}))}function g(e){var r,o=e.children,n=e.loopItemName,s=e.keySelector,i=e.data,l=null!=(r=null!=i?i:m(e.selector))?r:[1,2,3];return a.createElement(a.Fragment,null,null==l||null==l.map?void 0:l.map((function(e,r){var i;return a.createElement(h,{key:null!=(i=c(e,s))?i:r,name:n,data:e},t.repeatedElement(0===r,o))})))}var b={selector:{type:"string",description:"The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField"},loopItemName:{type:"string",defaultValue:"item",description:"The name of the variable to use to store the current item in the loop"},children:"slot"},x={name:"hostless-dynamic-repeater",displayName:"Dynamic Repeater",importName:"DynamicRepeater",importPath:p,props:b},w={name:"hostless-data-provider",displayName:"Data Provider",importName:"DataProvider",importPath:p,props:{name:{type:"string",defaultValue:"celebrities",description:"The name of the variable to store the data in"},data:{type:"object",defaultValue:[{name:"Fill Murray",birthYear:1950,profilePicture:["https://www.fillmurray.com/200/300"]},{name:"Place Cage",birthYear:1950,profilePicture:["https://www.placecage.com/200/300"]}]},children:{type:"slot",defaultValue:[{type:"component",name:"hostless-dynamic-text",props:{selector:"celebrities.0.name"}},{type:"component",name:"hostless-dynamic-image",props:{selector:"celebrities.0.profilePicture"}}]}}},N={propSelectors:{type:"object",defaultValueHint:{},description:"An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value."}},S=n({},N,{tag:{type:"string",defaultValueHint:"div",description:"The HTML tag to use"}}),P={name:"hostless-dynamic-element",displayName:"Dynamic Element",importName:"DynamicElement",importPath:p,props:n({},S,{children:"slot"})},D={name:"hostless-dynamic-text",importName:"DynamicText",displayName:"Dynamic Text",importPath:p,props:n({},S,{selector:{type:"string",description:"The selector expression to use to get the text, such as: someVariable.0.someField"}})},C={name:"hostless-dynamic-image",displayName:"Dynamic Image",importName:"DynamicImage",importPath:p,props:n({},N,{selector:{type:"string",description:"The selector expression to use to get the image source URL, such as: someVariable.0.someField"}})};function E(e){var r=e.preview,n=e.src,s=e.className;return o.useContext(t.PlasmicCanvasContext)&&!r?a.createElement("div",{className:s},a.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:"#eee",color:"#888",fontSize:"36px",fontFamily:"sans-serif",fontWeight:"bold",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"}},"Iframe placeholder")):a.createElement("iframe",{src:n,className:s})}var T={name:"hostless-iframe",displayName:"Iframe",importName:"Iframe",importPath:"@plasmicpkgs/plasmic-basic-components",props:{src:{type:"string",defaultValue:"https://www.example.com"},preview:{type:"boolean",description:"Load the iframe while editing in Plasmic Studio"}},defaultStyles:{width:"300px",height:"150px",maxWidth:"100%"}};function I(e){var t=e.ref,r=e.scrollDownThreshold,a=void 0===r?.5:r,n=e.scrollUpThreshold,s=void 0===n?0:n,i=o.useState(!1),l=i[0],p=i[1];return o.useEffect((function(){if(t.current&&"function"==typeof IntersectionObserver){var e=new IntersectionObserver((function(e){e[0].intersectionRatio>=a?p(!0):e[0].intersectionRatio<=s&&p(!1)}),{root:null,rootMargin:"0%",threshold:[s,a]});return e.observe(t.current),function(){p(!1),e.disconnect()}}return function(){}}),[t.current,a,s]),l}function j(e){var t=e.children,r=e.className,n=e.scrollDownThreshold,s=void 0===n?.5:n,i=e.scrollUpThreshold,l=void 0===i?0:i,p=o.useRef(null),c=I({ref:p,scrollUpThreshold:l,scrollDownThreshold:s});return a.createElement("div",{className:r,ref:p},c?t:null)}var R={name:"hostless-scroll-revealer",importName:"ScrollRevealer",displayName:"Scroll Revealer",importPath:"@plasmicpkgs/plasmic-basic-components",props:{children:"slot",scrollDownThreshold:{type:"number",displayName:"Scroll down threshold",defaultValueHint:.5,description:"How much of the element (as a fraction) must you scroll into view for it to appear (defaults to 0.5)"},scrollUpThreshold:{type:"number",displayName:"Scroll up threshold",defaultValueHint:0,description:"While scrolling up, how much of the element (as a fraction) can still be scrolled in view before it disappears (defaults to 0, meaning you must scroll up until it's completely out of view)"}},defaultStyles:{width:"stretch",maxWidth:"100%"}},V=a.forwardRef((function(e,t){return a.createElement("video",Object.assign({ref:t},e))})),M={name:"hostless-html-video",importName:"Video",displayName:"HTML Video",importPath:"@plasmicpkgs/plasmic-basic-components",props:{src:{type:"string",defaultValue:"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",displayName:"Source URL",description:"URL to a video file."},autoPlay:{type:"boolean",displayName:"Auto Play",description:"Whether the video show automatically start playing when the player loads"},controls:{type:"boolean",displayName:"Show Controls",description:"Whether the video player controls should be displayed"},playsInline:{type:"boolean",displayName:"Plays inline",description:"Usually on mobile, when tilted landscape, videos can play fullscreen. Turn this on to prevent that."},loop:{type:"boolean",displayName:"Loop",description:"Whether the video should be played again after it finishes"},muted:{type:"boolean",displayName:"Muted",description:"Whether audio should be muted"},poster:{type:"imageUrl",displayName:"Poster (placeholder) image",description:"Image to show while video is downloading"},preload:{type:"choice",options:["none","metadata","auto"],displayName:"Preload",description:"Whether to preload nothing, metadata only, or the full video"}},defaultStyles:{height:"hug",width:"640px",maxWidth:"100%"}};function O(e){return a.createElement("style",{dangerouslySetInnerHTML:{__html:e.css}})}var U={name:"hostless-embed-css",displayName:"EmbedCss",importName:"EmbedCss",importPath:"@plasmicpkgs/plasmic-basic-components",props:{css:{type:"string",defaultValueHint:"Some CSS snippet",description:"CSS rules to be inserted"}}};exports.DataContext=l,exports.DataProvider=h,exports.DynamicElement=y,exports.DynamicImage=v,exports.DynamicRepeater=g,exports.DynamicText=f,exports.EmbedCss=O,exports.Iframe=E,exports.ScrollRevealer=j,exports.Video=V,exports.applySelector=c,exports.dataProviderMeta=w,exports.dynamicElementMeta=P,exports.dynamicImageMeta=C,exports.dynamicRepeaterMeta=x,exports.dynamicRepeaterProps=b,exports.dynamicTextMeta=D,exports.embedCssMeta=U,exports.iframeMeta=T,exports.registerDataProvider=function(e,t){e?e.registerComponent(h,null!=t?t:w):r(h,null!=t?t:w)},exports.registerDynamicElement=function(e,t){e?e.registerComponent(y,null!=t?t:P):r(y,null!=t?t:P)},exports.registerDynamicImage=function(e,t){e?e.registerComponent(v,null!=t?t:C):r(v,null!=t?t:C)},exports.registerDynamicRepeater=function(e,t){e?e.registerComponent(g,null!=t?t:x):r(g,null!=t?t:x)},exports.registerDynamicText=function(e,t){e?e.registerComponent(f,null!=t?t:D):r(f,null!=t?t:D)},exports.registerEmbedCss=function(e,t){e?e.registerComponent(O,null!=t?t:U):r(O,null!=t?t:U)},exports.registerIframe=function(e,t){e?e.registerComponent(E,null!=t?t:T):r(E,null!=t?t:T)},exports.registerScrollRevealer=function(e,t){e?e.registerComponent(j,null!=t?t:R):r(j,null!=t?t:R)},exports.registerVideo=function(e,t){e?e.registerComponent(V,null!=t?t:M):r(V,null!=t?t:M)},exports.scrollRevealerMeta=R,exports.useDataEnv=d,exports.useDirectionalIntersection=I,exports.useSelector=m,exports.useSelectors=u,exports.videoMeta=M;
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e.default:e}Object.defineProperty(exports,"__esModule",{value:!0});var t=require("@plasmicapp/host"),r=e(require("@plasmicapp/host/registerComponent")),o=require("react"),a=e(o);function s(){return(s=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var o in r)Object.prototype.hasOwnProperty.call(r,o)&&(e[o]=r[o])}return e}).apply(this,arguments)}function n(e,t){if(null==e)return{};var r,o,a={},s=Object.keys(e);for(o=0;o<s.length;o++)t.indexOf(r=s[o])>=0||(a[r]=e[r]);return a}var i=["tag","className","children","propSelectors"],l=["selector","propSelectors"],p=["selector","propSelectors"],c="@plasmicpkgs/plasmic-basic-components";function m(e){var r=e.tag,a=void 0===r?"div":r,l=e.className,p=e.children,c=e.propSelectors,m=n(e,i),d=t.useSelectors(c);return o.createElement(a,s({children:p},m,d,{className:l+" "+d.className}))}function d(e){var t=e.selector,r=e.propSelectors,o=n(e,l);return a.createElement(m,Object.assign({},o,{propSelectors:s({},r,{children:t})}),"(DynamicText requires a selector)")}function u(e){var t=e.selector,r=e.propSelectors,o=n(e,p);return a.createElement(m,Object.assign({tag:"img",loading:"lazy",style:{objectFit:"cover"}},o,{propSelectors:s({},r,{src:t}),src:"https://studio.plasmic.app/static/img/placeholder.png"}))}function h(e){var r,o=e.children,s=e.loopItemName,n=e.keySelector,i=e.data,l=null!=(r=null!=i?i:t.useSelector(e.selector))?r:[1,2,3];return a.createElement(a.Fragment,null,null==l||null==l.map?void 0:l.map((function(e,r){var i;return a.createElement(t.DataProvider,{key:null!=(i=t.applySelector(e,n))?i:r,name:s,data:e},t.repeatedElement(0===r,o))})))}var y={selector:{type:"string",description:"The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField"},loopItemName:{type:"string",defaultValue:"item",description:"The name of the variable to use to store the current item in the loop"},children:"slot"},f={name:"hostless-dynamic-repeater",displayName:"Dynamic Repeater",importName:"DynamicRepeater",importPath:c,props:y},v={name:"hostless-data-provider",displayName:"Data Provider",importName:"DataProvider",importPath:c,props:{name:{type:"string",defaultValue:"celebrities",description:"The name of the variable to store the data in"},data:{type:"object",defaultValue:[{name:"Fill Murray",birthYear:1950,profilePicture:["https://www.fillmurray.com/200/300"]},{name:"Place Cage",birthYear:1950,profilePicture:["https://www.placecage.com/200/300"]}]},children:{type:"slot",defaultValue:[{type:"component",name:"hostless-dynamic-text",props:{selector:"celebrities.0.name"}},{type:"component",name:"hostless-dynamic-image",props:{selector:"celebrities.0.profilePicture"}}]}}},g={propSelectors:{type:"object",defaultValueHint:{},description:"An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value."}},b=s({},g,{tag:{type:"string",defaultValueHint:"div",description:"The HTML tag to use"}}),x={name:"hostless-dynamic-element",displayName:"Dynamic Element",importName:"DynamicElement",importPath:c,props:s({},b,{children:"slot"})},E={name:"hostless-dynamic-text",importName:"DynamicText",displayName:"Dynamic Text",importPath:c,props:s({},b,{selector:{type:"string",description:"The selector expression to use to get the text, such as: someVariable.0.someField"}})},w={name:"hostless-dynamic-image",displayName:"Dynamic Image",importName:"DynamicImage",importPath:c,props:s({},g,{selector:{type:"string",description:"The selector expression to use to get the image source URL, such as: someVariable.0.someField"}})};function N(e){if(null==e)throw new Error("Value must not be undefined or null");return e}function D(e){var t=e.className,r=e.code,s=e.hideInEditor,n=void 0!==s&&s,i=o.useRef(null);return o.useEffect((function(){n||Array.from(N(i.current).querySelectorAll("script")).forEach((function(e){var t=document.createElement("script");Array.from(e.attributes).forEach((function(e){return t.setAttribute(e.name,e.value)})),t.appendChild(document.createTextNode(e.innerHTML)),N(e.parentNode).replaceChild(t,e)}))}),[r,n]),a.createElement("div",{ref:i,className:t,dangerouslySetInnerHTML:{__html:n?"":r}})}var S={name:"hostless-embed",displayName:"Embed HTML",importName:"Embed",importPath:"@plasmicpkgs/plasmic-basic-components",props:{code:{type:"code",lang:"html",defaultValueHint:"\x3c!-- HTML snippet --\x3e",description:"The HTML code to be embedded"},hideInEditor:{type:"boolean",displayName:"Hide in editor",description:"Disable running the code while editing in Plasmic Studio (may require reload)",editOnly:!0}},defaultStyles:{maxWidth:"100%"}};function P(e){var r=e.preview,s=e.src,n=e.className;return o.useContext(t.PlasmicCanvasContext)&&!r?a.createElement("div",{className:n},a.createElement("div",{style:{position:"absolute",top:0,left:0,right:0,bottom:0,background:"#eee",color:"#888",fontSize:"36px",fontFamily:"sans-serif",fontWeight:"bold",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden"}},"Iframe placeholder")):a.createElement("iframe",{src:s,className:n})}var T={name:"hostless-iframe",displayName:"Iframe",importName:"Iframe",importPath:"@plasmicpkgs/plasmic-basic-components",props:{src:{type:"string",defaultValue:"https://www.example.com"},preview:{type:"boolean",description:"Load the iframe while editing in Plasmic Studio"}},defaultStyles:{width:"300px",height:"150px",maxWidth:"100%"}};function C(e){var t=e.ref,r=e.scrollDownThreshold,a=void 0===r?.5:r,s=e.scrollUpThreshold,n=void 0===s?0:s,i=o.useState(!1),l=i[0],p=i[1];return o.useEffect((function(){if(t.current&&"function"==typeof IntersectionObserver){var e=new IntersectionObserver((function(e){e[0].intersectionRatio>=a?p(!0):e[0].intersectionRatio<=n&&p(!1)}),{root:null,rootMargin:"0%",threshold:[n,a]});return e.observe(t.current),function(){p(!1),e.disconnect()}}return function(){}}),[t.current,a,n]),l}function I(e){var t=e.children,r=e.className,s=e.scrollDownThreshold,n=void 0===s?.5:s,i=e.scrollUpThreshold,l=void 0===i?0:i,p=o.useRef(null),c=C({ref:p,scrollUpThreshold:l,scrollDownThreshold:n});return a.createElement("div",{className:r,ref:p},c?t:null)}var R={name:"hostless-scroll-revealer",importName:"ScrollRevealer",displayName:"Scroll Revealer",importPath:"@plasmicpkgs/plasmic-basic-components",props:{children:"slot",scrollDownThreshold:{type:"number",displayName:"Scroll down threshold",defaultValueHint:.5,description:"How much of the element (as a fraction) must you scroll into view for it to appear (defaults to 0.5)"},scrollUpThreshold:{type:"number",displayName:"Scroll up threshold",defaultValueHint:0,description:"While scrolling up, how much of the element (as a fraction) can still be scrolled in view before it disappears (defaults to 0, meaning you must scroll up until it's completely out of view)"}},defaultStyles:{width:"stretch",maxWidth:"100%"}},M=a.forwardRef((function(e,t){return a.createElement("video",Object.assign({ref:t},e))})),V={name:"hostless-html-video",importName:"Video",displayName:"HTML Video",importPath:"@plasmicpkgs/plasmic-basic-components",props:{src:{type:"string",defaultValue:"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm",displayName:"Source URL",description:"URL to a video file."},autoPlay:{type:"boolean",displayName:"Auto Play",description:"Whether the video show automatically start playing when the player loads"},controls:{type:"boolean",displayName:"Show Controls",description:"Whether the video player controls should be displayed"},playsInline:{type:"boolean",displayName:"Plays inline",description:"Usually on mobile, when tilted landscape, videos can play fullscreen. Turn this on to prevent that."},loop:{type:"boolean",displayName:"Loop",description:"Whether the video should be played again after it finishes"},muted:{type:"boolean",displayName:"Muted",description:"Whether audio should be muted"},poster:{type:"imageUrl",displayName:"Poster (placeholder) image",description:"Image to show while video is downloading"},preload:{type:"choice",options:["none","metadata","auto"],displayName:"Preload",description:"Whether to preload nothing, metadata only, or the full video"}},defaultStyles:{height:"hug",width:"640px",maxWidth:"100%"}};function H(e){return a.createElement("style",{dangerouslySetInnerHTML:{__html:e.css}})}var j={name:"hostless-embed-css",displayName:"Embed Css",importName:"EmbedCss",importPath:"@plasmicpkgs/plasmic-basic-components",props:{css:{type:"code",lang:"css",defaultValueHint:"/* CSS snippet */",description:"CSS rules to be inserted"}}};exports.DataProvider=function(){return console.warn("DEPRECATED: Import DataProvider from @plasmicapp/host instead."),t.DataProvider.apply(void 0,arguments)},exports.DynamicElement=m,exports.DynamicImage=u,exports.DynamicRepeater=h,exports.DynamicText=d,exports.Embed=D,exports.EmbedCss=H,exports.Iframe=P,exports.ScrollRevealer=I,exports.Video=M,exports.applySelector=function(){return console.warn("DEPRECATED: Import applySelector from @plasmicapp/host instead."),t.applySelector.apply(void 0,arguments)},exports.dataProviderMeta=v,exports.dynamicElementMeta=x,exports.dynamicImageMeta=w,exports.dynamicRepeaterMeta=f,exports.dynamicRepeaterProps=y,exports.dynamicTextMeta=E,exports.embedCssMeta=j,exports.embedMeta=S,exports.iframeMeta=T,exports.registerDataProvider=function(e,o){e?e.registerComponent(t.DataProvider,null!=o?o:v):r(t.DataProvider,null!=o?o:v)},exports.registerDynamicElement=function(e,t){e?e.registerComponent(m,null!=t?t:x):r(m,null!=t?t:x)},exports.registerDynamicImage=function(e,t){e?e.registerComponent(u,null!=t?t:w):r(u,null!=t?t:w)},exports.registerDynamicRepeater=function(e,t){e?e.registerComponent(h,null!=t?t:f):r(h,null!=t?t:f)},exports.registerDynamicText=function(e,t){e?e.registerComponent(d,null!=t?t:E):r(d,null!=t?t:E)},exports.registerEmbed=function(e,t){e?e.registerComponent(D,null!=t?t:S):r(D,null!=t?t:S)},exports.registerEmbedCss=function(e,t){e?e.registerComponent(H,null!=t?t:j):r(H,null!=t?t:j)},exports.registerIframe=function(e,t){e?e.registerComponent(P,null!=t?t:T):r(P,null!=t?t:T)},exports.registerScrollRevealer=function(e,t){e?e.registerComponent(I,null!=t?t:R):r(I,null!=t?t:R)},exports.registerVideo=function(e,t){e?e.registerComponent(M,null!=t?t:V):r(M,null!=t?t:V)},exports.scrollRevealerMeta=R,exports.useDataEnv=function(){return console.warn("DEPRECATED: Import useDataEnv from @plasmicapp/host instead."),t.useDataEnv.apply(void 0,arguments)},exports.useDirectionalIntersection=C,exports.useSelector=function(){return console.warn("DEPRECATED: Import useSelector from @plasmicapp/host instead."),t.useSelector.apply(void 0,arguments)},exports.useSelectors=function(){return console.warn("DEPRECATED: Import useSelectors from @plasmicapp/host instead."),t.useSelectors.apply(void 0,arguments)},exports.videoMeta=V;
 //# sourceMappingURL=plasmic-basic-components.cjs.production.min.js.map

package/dist/plasmic-basic-components.cjs.production.min.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"plasmic-basic-components.cjs.production.min.js","sources":["../src/common.ts","../src/Data.tsx","../src/Iframe.tsx","../src/ScrollRevealer.tsx","../src/Video.tsx","../src/EmbedCss.tsx"],"sourcesContent":["export const tuple = <T extends any[]>(...args: T): T => args;\n\nexport function ensure<T>(x: T \| null \| undefined): T {\n if (x === null \|\| x === undefined) {\n debugger;\n throw new Error(`Value must not be undefined or null`);\n } else {\n return x;\n }\n}\n","import { ComponentMeta, repeatedElement } from \"@plasmicapp/host\";\nimport registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, {\n ComponentProps,\n createContext,\n createElement,\n ReactNode,\n useContext,\n} from \"react\";\nimport { tuple } from \"./common\";\n\nexport type DataDict = Record<string, any>;\n\nexport const DataContext = createContext<DataDict \| undefined>(undefined);\n\nconst thisModule = \"@plasmicpkgs/plasmic-basic-components\";\n\nexport function applySelector(\n rawData: DataDict \| undefined,\n selector: string \| undefined\n): any {\n if (!selector) {\n return undefined;\n }\n let curData = rawData;\n for (const key of selector.split(\".\")) {\n curData = curData?.[key];\n }\n return curData;\n}\n\nexport type SelectorDict = Record<string, string \| undefined>;\n\nexport function useSelector(selector: string \| undefined): any {\n const rawData = useDataEnv();\n return applySelector(rawData, selector);\n}\n\nexport function useSelectors(selectors: SelectorDict = {}): any {\n const rawData = useDataEnv();\n return Object.fromEntries(\n Object.entries(selectors)\n .filter(([key, selector]) => !!key && !!selector)\n .map(([key, selector]) => tuple(key, applySelector(rawData, selector)))\n );\n}\n\nexport function useDataEnv() {\n return useContext(DataContext);\n}\n\nexport interface DataProviderProps {\n name?: string;\n data?: any;\n children?: ReactNode;\n}\n\nexport function DataProvider({ name, data, children }: DataProviderProps) {\n const existingEnv = useDataEnv() ?? {};\n if (!name) {\n return <>{children}</>;\n } else {\n return (\n <DataContext.Provider value={{ ...existingEnv, [name]: data }}>\n {children}\n </DataContext.Provider>\n );\n }\n}\n\nexport interface CommonDynamicProps {\n className?: string;\n tag?: string;\n propSelectors?: SelectorDict;\n}\n\nexport function DynamicElement<\n Tag extends keyof JSX.IntrinsicElements = \"div\"\n>({\n tag = \"div\",\n className,\n children,\n propSelectors,\n ...props\n}: CommonDynamicProps & ComponentProps<Tag>) {\n const computed = useSelectors(propSelectors);\n return createElement(tag, {\n children,\n ...props,\n ...computed,\n className: className + \" \" + computed.className,\n });\n}\n\nexport interface DynamicTextProps extends CommonDynamicProps {\n selector?: string;\n}\n\nexport function DynamicText({\n selector,\n propSelectors,\n ...props\n}: DynamicTextProps) {\n return (\n <DynamicElement\n {...props}\n propSelectors={{ ...propSelectors, children: selector }}\n >\n {/This is the default text/}\n (DynamicText requires a selector)\n </DynamicElement>\n );\n}\n\nexport interface DynamicImageProps\n extends CommonDynamicProps,\n ComponentProps<\"img\"> {\n selector?: string;\n}\n\nexport function DynamicImage({\n selector,\n propSelectors,\n ...props\n}: DynamicImageProps) {\n return (\n <DynamicElement<\"img\">\n tag={\"img\"}\n loading={\"lazy\"}\n style={{\n objectFit: \"cover\",\n }}\n {...props}\n propSelectors={{ ...propSelectors, src: selector }}\n // Default image placeholder\n src=\"https://studio.plasmic.app/static/img/placeholder.png\"\n />\n );\n}\n\nexport interface DynamicRepeaterProps {\n children?: ReactNode;\n loopItemName?: string;\n keySelector?: string;\n selector?: string;\n data?: any;\n}\n\nexport function DynamicRepeater({\n children,\n loopItemName,\n keySelector,\n selector,\n data,\n}: DynamicRepeaterProps) {\n // Defaults to an array of three items.\n const finalData = data ?? useSelector(selector) ?? [1, 2, 3];\n return (\n <>\n {finalData?.map?.((item: any, index: number) => (\n <DataProvider\n key={applySelector(item, keySelector) ?? index}\n name={loopItemName}\n data={item}\n >\n {repeatedElement(index === 0, children)}\n </DataProvider>\n ))}\n </>\n );\n}\n\nexport const dynamicRepeaterProps = {\n selector: {\n type: \"string\",\n description:\n \"The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField\",\n },\n loopItemName: {\n type: \"string\",\n defaultValue: \"item\",\n description:\n \"The name of the variable to use to store the current item in the loop\",\n },\n children: \"slot\",\n} as const;\n\nexport const dynamicRepeaterMeta: ComponentMeta<DynamicRepeaterProps> = {\n name: \"hostless-dynamic-repeater\",\n displayName: \"Dynamic Repeater\",\n importName: \"DynamicRepeater\",\n importPath: thisModule,\n props: dynamicRepeaterProps,\n};\n\nexport function registerDynamicRepeater(\n loader?: { registerComponent: typeof registerComponent },\n customDynamicRepeaterMeta?: ComponentMeta<DynamicRepeaterProps>\n) {\n if (loader) {\n loader.registerComponent(\n DynamicRepeater,\n customDynamicRepeaterMeta ?? dynamicRepeaterMeta\n );\n } else {\n registerComponent(\n DynamicRepeater,\n customDynamicRepeaterMeta ?? dynamicRepeaterMeta\n );\n }\n}\n\nexport const dataProviderMeta: ComponentMeta<DataProviderProps> = {\n name: \"hostless-data-provider\",\n displayName: \"Data Provider\",\n importName: \"DataProvider\",\n importPath: thisModule,\n // description: \"Makes some specified data available to the subtree in a context\",\n props: {\n name: {\n type: \"string\",\n defaultValue: \"celebrities\",\n description: \"The name of the variable to store the data in\",\n },\n data: {\n type: \"object\",\n defaultValue: [\n {\n name: \"Fill Murray\",\n birthYear: 1950,\n profilePicture: [\"https://www.fillmurray.com/200/300\"],\n },\n {\n name: \"Place Cage\",\n birthYear: 1950,\n profilePicture: [\"https://www.placecage.com/200/300\"],\n },\n ],\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"component\",\n name: \"hostless-dynamic-text\",\n props: {\n selector: \"celebrities.0.name\",\n },\n },\n {\n type: \"component\",\n name: \"hostless-dynamic-image\",\n props: {\n selector: \"celebrities.0.profilePicture\",\n },\n },\n ],\n },\n },\n};\n\nexport function registerDataProvider(\n loader?: { registerComponent: typeof registerComponent },\n customDataProviderMeta?: ComponentMeta<DataProviderProps>\n) {\n if (loader) {\n loader.registerComponent(\n DataProvider,\n customDataProviderMeta ?? dataProviderMeta\n );\n } else {\n registerComponent(DataProvider, customDataProviderMeta ?? dataProviderMeta);\n }\n}\n\nconst dynamicPropsWithoutTag = {\n propSelectors: {\n type: \"object\",\n defaultValueHint: {},\n description:\n \"An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value.\",\n },\n} as const;\n\nconst dynamicProps = {\n ...dynamicPropsWithoutTag,\n tag: {\n type: \"string\",\n defaultValueHint: \"div\",\n description: \"The HTML tag to use\",\n },\n} as const;\n\n// TODO Eventually we'll want to expose all the base HTML properties, but in the nicer way that we do within the studio.\n\nexport const dynamicElementMeta: ComponentMeta<CommonDynamicProps> = {\n name: \"hostless-dynamic-element\",\n displayName: \"Dynamic Element\",\n importName: \"DynamicElement\",\n importPath: thisModule,\n props: { ...dynamicProps, children: \"slot\" },\n};\n\nexport function registerDynamicElement(\n loader?: { registerComponent: typeof registerComponent },\n customDynamicElementMeta?: ComponentMeta<CommonDynamicProps>\n) {\n if (loader) {\n loader.registerComponent(\n DynamicElement,\n customDynamicElementMeta ?? dynamicElementMeta\n );\n } else {\n registerComponent(\n DynamicElement,\n customDynamicElementMeta ?? dynamicElementMeta\n );\n }\n}\n\nexport const dynamicTextMeta: ComponentMeta<DynamicTextProps> = {\n name: \"hostless-dynamic-text\",\n importName: \"DynamicText\",\n displayName: \"Dynamic Text\",\n importPath: thisModule,\n props: {\n ...dynamicProps,\n selector: {\n type: \"string\",\n description:\n \"The selector expression to use to get the text, such as: someVariable.0.someField\",\n },\n },\n};\n\nexport function registerDynamicText(\n loader?: { registerComponent: typeof registerComponent },\n customDynamicTextMeta?: ComponentMeta<DynamicTextProps>\n) {\n if (loader) {\n loader.registerComponent(\n DynamicText,\n customDynamicTextMeta ?? dynamicTextMeta\n );\n } else {\n registerComponent(DynamicText, customDynamicTextMeta ?? dynamicTextMeta);\n }\n}\n\nexport const dynamicImageMeta: ComponentMeta<DynamicImageProps> = {\n name: \"hostless-dynamic-image\",\n displayName: \"Dynamic Image\",\n importName: \"DynamicImage\",\n importPath: thisModule,\n props: {\n ...dynamicPropsWithoutTag,\n selector: {\n type: \"string\",\n description:\n \"The selector expression to use to get the image source URL, such as: someVariable.0.someField\",\n },\n },\n};\n\nexport function registerDynamicImage(\n loader?: { registerComponent: typeof registerComponent },\n customDynamicImageMeta?: ComponentMeta<DynamicImageProps>\n) {\n if (loader) {\n loader.registerComponent(\n DynamicImage,\n customDynamicImageMeta ?? dynamicImageMeta\n );\n } else {\n registerComponent(DynamicImage, customDynamicImageMeta ?? dynamicImageMeta);\n }\n}\n","import { ComponentMeta, PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\n\nexport interface IframeProps {\n src: string;\n preview?: boolean;\n className?: string;\n}\n\nexport default function Iframe({ preview, src, className }: IframeProps) {\n const isEditing = useContext(PlasmicCanvasContext);\n if (isEditing && !preview) {\n return (\n <div className={className}>\n <div\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n background: \"#eee\",\n color: \"#888\",\n fontSize: \"36px\",\n fontFamily: \"sans-serif\",\n fontWeight: \"bold\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n }}\n >\n Iframe placeholder\n </div>\n </div>\n );\n }\n return <iframe src={src} className={className} />;\n}\n\nexport const iframeMeta: ComponentMeta<IframeProps> = {\n name: \"hostless-iframe\",\n displayName: \"Iframe\",\n importName: \"Iframe\",\n importPath: \"@plasmicpkgs/plasmic-basic-components\",\n props: {\n src: {\n type: \"string\",\n defaultValue: \"https://www.example.com\",\n },\n preview: {\n type: \"boolean\",\n description: \"Load the iframe while editing in Plasmic Studio\",\n },\n },\n defaultStyles: {\n width: \"300px\",\n height: \"150px\",\n maxWidth: \"100%\",\n },\n};\n\nexport function registerIframe(\n loader?: { registerComponent: typeof registerComponent },\n customIframeMeta?: ComponentMeta<IframeProps>\n) {\n if (loader) {\n loader.registerComponent(Iframe, customIframeMeta ?? iframeMeta);\n } else {\n registerComponent(Iframe, customIframeMeta ?? iframeMeta);\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, {\n ReactNode,\n RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nexport function useDirectionalIntersection({\n ref,\n scrollDownThreshold = 0.5,\n scrollUpThreshold = 0,\n}: {\n ref: RefObject<HTMLElement>;\n scrollDownThreshold?: number;\n scrollUpThreshold?: number;\n}) {\n const [revealed, setRevealed] = useState(false);\n useEffect(() => {\n if (ref.current && typeof IntersectionObserver === \"function\") {\n const handler = (entries: IntersectionObserverEntry[]) => {\n if (entries[0].intersectionRatio >= scrollDownThreshold) {\n setRevealed(true);\n } else if (entries[0].intersectionRatio <= scrollUpThreshold) {\n setRevealed(false);\n }\n };\n\n const observer = new IntersectionObserver(handler, {\n root: null,\n rootMargin: \"0%\",\n threshold: [scrollUpThreshold, scrollDownThreshold],\n });\n observer.observe(ref.current);\n\n return () => {\n setRevealed(false);\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current, scrollDownThreshold, scrollUpThreshold]);\n return revealed;\n}\n\nexport interface ScrollRevealerProps {\n children?: ReactNode;\n className?: string;\n scrollUpThreshold?: number;\n scrollDownThreshold?: number;\n}\n\n/*\n Unlike react-awesome-reveal, ScrollRevealer:\n \n - has configurable thresholds\n * - triggers arbitrary render/unrender animations\n \n TODO: Merge this inta a general Reveal component, perhaps forking react-awesome-reveal, so that we don't have two different reveal components for users.\n */\nexport default function ScrollRevealer({\n children,\n className,\n scrollDownThreshold = 0.5,\n scrollUpThreshold = 0,\n}: ScrollRevealerProps) {\n const intersectionRef = useRef<HTMLDivElement>(null);\n const revealed = useDirectionalIntersection({\n ref: intersectionRef,\n scrollUpThreshold,\n scrollDownThreshold,\n });\n return (\n <div className={className} ref={intersectionRef}>\n {revealed ? children : null}\n </div>\n );\n}\n\nexport const scrollRevealerMeta: ComponentMeta<ScrollRevealerProps> = {\n name: \"hostless-scroll-revealer\",\n importName: \"ScrollRevealer\",\n displayName: \"Scroll Revealer\",\n importPath: \"@plasmicpkgs/plasmic-basic-components\",\n props: {\n children: \"slot\",\n scrollDownThreshold: {\n type: \"number\",\n displayName: \"Scroll down threshold\",\n defaultValueHint: 0.5,\n description:\n \"How much of the element (as a fraction) must you scroll into view for it to appear (defaults to 0.5)\",\n },\n scrollUpThreshold: {\n type: \"number\",\n displayName: \"Scroll up threshold\",\n defaultValueHint: 0,\n description:\n \"While scrolling up, how much of the element (as a fraction) can still be scrolled in view before it disappears (defaults to 0, meaning you must scroll up until it's completely out of view)\",\n },\n },\n defaultStyles: {\n width: \"stretch\",\n maxWidth: \"100%\",\n },\n};\n\nexport function registerScrollRevealer(\n loader?: { registerComponent: typeof registerComponent },\n customScrollRevealerMeta?: ComponentMeta<ScrollRevealerProps>\n) {\n if (loader) {\n loader.registerComponent(\n ScrollRevealer,\n customScrollRevealerMeta ?? scrollRevealerMeta\n );\n } else {\n registerComponent(\n ScrollRevealer,\n customScrollRevealerMeta ?? scrollRevealerMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\nexport type VideoProps = Pick<\n React.ComponentProps<\"video\">,\n \| \"autoPlay\"\n \| \"controls\"\n \| \"loop\"\n \| \"muted\"\n \| \"playsInline\"\n \| \"poster\"\n \| \"preload\"\n \| \"src\"\n>;\n\nconst Video = React.forwardRef<HTMLVideoElement, VideoProps>(\n (props: VideoProps, ref) => {\n return <video ref={ref} {...props} />;\n }\n);\n\nexport default Video;\n\nexport const videoMeta: ComponentMeta<VideoProps> = {\n name: \"hostless-html-video\",\n importName: \"Video\",\n displayName: \"HTML Video\",\n importPath: \"@plasmicpkgs/plasmic-basic-components\",\n props: {\n src: {\n type: \"string\",\n defaultValue:\n \"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm\",\n displayName: \"Source URL\",\n description: \"URL to a video file.\",\n },\n autoPlay: {\n type: \"boolean\",\n displayName: \"Auto Play\",\n description:\n \"Whether the video show automatically start playing when the player loads\",\n },\n controls: {\n type: \"boolean\",\n displayName: \"Show Controls\",\n description: \"Whether the video player controls should be displayed\",\n },\n playsInline: {\n type: \"boolean\",\n displayName: \"Plays inline\",\n description:\n \"Usually on mobile, when tilted landscape, videos can play fullscreen. Turn this on to prevent that.\",\n },\n loop: {\n type: \"boolean\",\n displayName: \"Loop\",\n description: \"Whether the video should be played again after it finishes\",\n },\n muted: {\n type: \"boolean\",\n displayName: \"Muted\",\n description: \"Whether audio should be muted\",\n },\n poster: {\n type: \"imageUrl\",\n displayName: \"Poster (placeholder) image\",\n description: \"Image to show while video is downloading\",\n },\n preload: {\n type: \"choice\",\n options: [\"none\", \"metadata\", \"auto\"],\n displayName: \"Preload\",\n description:\n \"Whether to preload nothing, metadata only, or the full video\",\n },\n },\n defaultStyles: {\n height: \"hug\",\n width: \"640px\",\n maxWidth: \"100%\",\n },\n};\n\nexport function registerVideo(\n loader?: { registerComponent: typeof registerComponent },\n customVideoMeta?: ComponentMeta<VideoProps>\n) {\n if (loader) {\n loader.registerComponent(Video, customVideoMeta ?? videoMeta);\n } else {\n registerComponent(Video, customVideoMeta ?? videoMeta);\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\nexport interface EmbedCssProps {\n css: string;\n}\n\nexport default function EmbedCss({\n css\n}: EmbedCssProps) {\n return (\n <style\n dangerouslySetInnerHTML={{ __html: css }}\n />\n );\n}\n\nexport const embedCssMeta: ComponentMeta<EmbedCssProps> = { \n name: \"hostless-embed-css\",\n displayName: \"EmbedCss\",\n importName: \"EmbedCss\",\n importPath: \"@plasmicpkgs/plasmic-basic-components\",\n props: {\n css: {\n type: \"string\",\n defaultValueHint: \"Some CSS snippet\",\n description: \"CSS rules to be inserted\",\n },\n },\n};\n\nexport function registerEmbedCss(\n loader?: { registerComponent: typeof registerComponent },\n customEmbedCssMeta?: ComponentMeta<EmbedCssProps>\n) {\n if (loader) {\n loader.registerComponent(EmbedCss, customEmbedCssMeta ?? embedCssMeta);\n } else {\n registerComponent(EmbedCss, customEmbedCssMeta ?? embedCssMeta);\n }\n}\n"],"names":["DataContext","createContext","undefined","thisModule","applySelector","rawData","selector","curData","split","_curData","useSelector","useDataEnv","useSelectors","selectors","Object","fromEntries","entries","filter","map","args","tuple","useContext","DataProvider","name","data","children","existingEnv","React","Provider","value","DynamicElement","tag","className","propSelectors","props","computed","createElement","DynamicText","DynamicImage","loading","style","objectFit","src","DynamicRepeater","loopItemName","keySelector","finalData","item","index","key","repeatedElement","dynamicRepeaterProps","type","description","defaultValue","dynamicRepeaterMeta","displayName","importName","importPath","dataProviderMeta","birthYear","profilePicture","dynamicPropsWithoutTag","defaultValueHint","dynamicProps","dynamicElementMeta","dynamicTextMeta","dynamicImageMeta","Iframe","preview","PlasmicCanvasContext","position","top","left","right","bottom","background","color","fontSize","fontFamily","fontWeight","display","alignItems","justifyContent","overflow","iframeMeta","defaultStyles","width","height","maxWidth","useDirectionalIntersection","ref","scrollDownThreshold","scrollUpThreshold","useState","revealed","setRevealed","useEffect","current","IntersectionObserver","observer","intersectionRatio","root","rootMargin","threshold","observe","disconnect","ScrollRevealer","intersectionRef","useRef","scrollRevealerMeta","Video","forwardRef","videoMeta","autoPlay","controls","playsInline","loop","muted","poster","preload","options","EmbedCss","dangerouslySetInnerHTML","__html","css","embedCssMeta","loader","customDataProviderMeta","registerComponent","customDynamicElementMeta","customDynamicImageMeta","customDynamicRepeaterMeta","customDynamicTextMeta","customEmbedCssMeta","customIframeMeta","customScrollRevealerMeta","customVideoMeta"],"mappings":"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"}
1	+ {"version":3,"file":"plasmic-basic-components.cjs.production.min.js","sources":["../src/Data.tsx","../src/common.ts","../src/Embed.tsx","../src/Iframe.tsx","../src/ScrollRevealer.tsx","../src/Video.tsx","../src/EmbedCss.tsx"],"sourcesContent":["import {\n ComponentMeta,\n repeatedElement,\n SelectorDict,\n useSelectors as _useSelectors,\n useSelector as _useSelector,\n DataProvider as _DataProvider,\n DataProviderProps,\n applySelector as _applySelector,\n useDataEnv as _useDataEnv,\n} from \"@plasmicapp/host\";\nimport registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, { ComponentProps, createElement, ReactNode } from \"react\";\n\nconst thisModule = \"@plasmicpkgs/plasmic-basic-components\";\n\n/*\n @deprecated This should be imported from @plasmicapp/host instead.\n /\nexport const applySelector: typeof _applySelector = function(...args) {\n console.warn(\n \"DEPRECATED: Import applySelector from @plasmicapp/host instead.\"\n );\n return _applySelector(...args);\n};\n\n/\n @deprecated This should be imported from @plasmicapp/host instead.\n /\nexport const useSelector: typeof _useSelector = function(...args) {\n console.warn(\"DEPRECATED: Import useSelector from @plasmicapp/host instead.\");\n return _useSelector(...args);\n};\n\n/\n @deprecated This should be imported from @plasmicapp/host instead.\n /\nexport const useSelectors: typeof _useSelectors = function(...args) {\n console.warn(\n \"DEPRECATED: Import useSelectors from @plasmicapp/host instead.\"\n );\n return _useSelectors(...args);\n};\n\n/\n @deprecated This should be imported from @plasmicapp/host instead.\n /\nexport const useDataEnv: typeof _useDataEnv = function(...args) {\n console.warn(\"DEPRECATED: Import useDataEnv from @plasmicapp/host instead.\");\n return _useDataEnv(...args);\n};\n\n/\n @deprecated This should be imported from @plasmicapp/host instead.\n /\nexport const DataProvider: typeof _DataProvider = function(...args) {\n console.warn(\n \"DEPRECATED: Import DataProvider from @plasmicapp/host instead.\"\n );\n return _DataProvider(...args);\n};\n\nexport interface CommonDynamicProps {\n className?: string;\n tag?: string;\n propSelectors?: SelectorDict;\n}\n\nexport function DynamicElement<\n Tag extends keyof JSX.IntrinsicElements = \"div\"\n>({\n tag = \"div\",\n className,\n children,\n propSelectors,\n ...props\n}: CommonDynamicProps & ComponentProps<Tag>) {\n const computed = _useSelectors(propSelectors);\n return createElement(tag, {\n children,\n ...props,\n ...computed,\n className: className + \" \" + computed.className,\n });\n}\n\nexport interface DynamicTextProps extends CommonDynamicProps {\n selector?: string;\n}\n\nexport function DynamicText({\n selector,\n propSelectors,\n ...props\n}: DynamicTextProps) {\n return (\n <DynamicElement\n {...props}\n propSelectors={{ ...propSelectors, children: selector }}\n >\n {/This is the default text/}\n (DynamicText requires a selector)\n </DynamicElement>\n );\n}\n\nexport interface DynamicImageProps\n extends CommonDynamicProps,\n ComponentProps<\"img\"> {\n selector?: string;\n}\n\nexport function DynamicImage({\n selector,\n propSelectors,\n ...props\n}: DynamicImageProps) {\n return (\n <DynamicElement<\"img\">\n tag={\"img\"}\n loading={\"lazy\"}\n style={{\n objectFit: \"cover\",\n }}\n {...props}\n propSelectors={{ ...propSelectors, src: selector }}\n // Default image placeholder\n src=\"https://studio.plasmic.app/static/img/placeholder.png\"\n />\n );\n}\n\nexport interface DynamicRepeaterProps {\n children?: ReactNode;\n loopItemName?: string;\n keySelector?: string;\n selector?: string;\n data?: any;\n}\n\nexport function DynamicRepeater({\n children,\n loopItemName,\n keySelector,\n selector,\n data,\n}: DynamicRepeaterProps) {\n // Defaults to an array of three items.\n const finalData = data ?? _useSelector(selector) ?? [1, 2, 3];\n return (\n <>\n {finalData?.map?.((item: any, index: number) => (\n <_DataProvider\n key={_applySelector(item, keySelector) ?? index}\n name={loopItemName}\n data={item}\n >\n {repeatedElement(index === 0, children)}\n </_DataProvider>\n ))}\n </>\n );\n}\n\nexport const dynamicRepeaterProps = {\n selector: {\n type: \"string\",\n description:\n \"The selector expression to use to get the array of data to loop over, such as: someVariable.0.someField\",\n },\n loopItemName: {\n type: \"string\",\n defaultValue: \"item\",\n description:\n \"The name of the variable to use to store the current item in the loop\",\n },\n children: \"slot\",\n} as const;\n\nexport const dynamicRepeaterMeta: ComponentMeta<DynamicRepeaterProps> = {\n name: \"hostless-dynamic-repeater\",\n displayName: \"Dynamic Repeater\",\n importName: \"DynamicRepeater\",\n importPath: thisModule,\n props: dynamicRepeaterProps,\n};\n\nexport function registerDynamicRepeater(\n loader?: { registerComponent: typeof registerComponent },\n customDynamicRepeaterMeta?: ComponentMeta<DynamicRepeaterProps>\n) {\n if (loader) {\n loader.registerComponent(\n DynamicRepeater,\n customDynamicRepeaterMeta ?? dynamicRepeaterMeta\n );\n } else {\n registerComponent(\n DynamicRepeater,\n customDynamicRepeaterMeta ?? dynamicRepeaterMeta\n );\n }\n}\n\nexport const dataProviderMeta: ComponentMeta<DataProviderProps> = {\n name: \"hostless-data-provider\",\n displayName: \"Data Provider\",\n importName: \"DataProvider\",\n importPath: thisModule,\n // description: \"Makes some specified data available to the subtree in a context\",\n props: {\n name: {\n type: \"string\",\n defaultValue: \"celebrities\",\n description: \"The name of the variable to store the data in\",\n },\n data: {\n type: \"object\",\n defaultValue: [\n {\n name: \"Fill Murray\",\n birthYear: 1950,\n profilePicture: [\"https://www.fillmurray.com/200/300\"],\n },\n {\n name: \"Place Cage\",\n birthYear: 1950,\n profilePicture: [\"https://www.placecage.com/200/300\"],\n },\n ],\n },\n children: {\n type: \"slot\",\n defaultValue: [\n {\n type: \"component\",\n name: \"hostless-dynamic-text\",\n props: {\n selector: \"celebrities.0.name\",\n },\n },\n {\n type: \"component\",\n name: \"hostless-dynamic-image\",\n props: {\n selector: \"celebrities.0.profilePicture\",\n },\n },\n ],\n },\n },\n};\n\nexport function registerDataProvider(\n loader?: { registerComponent: typeof registerComponent },\n customDataProviderMeta?: ComponentMeta<DataProviderProps>\n) {\n if (loader) {\n loader.registerComponent(\n _DataProvider,\n customDataProviderMeta ?? dataProviderMeta\n );\n } else {\n registerComponent(\n _DataProvider,\n customDataProviderMeta ?? dataProviderMeta\n );\n }\n}\n\nconst dynamicPropsWithoutTag = {\n propSelectors: {\n type: \"object\",\n defaultValueHint: {},\n description:\n \"An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value.\",\n },\n} as const;\n\nconst dynamicProps = {\n ...dynamicPropsWithoutTag,\n tag: {\n type: \"string\",\n defaultValueHint: \"div\",\n description: \"The HTML tag to use\",\n },\n} as const;\n\n// TODO Eventually we'll want to expose all the base HTML properties, but in the nicer way that we do within the studio.\n\nexport const dynamicElementMeta: ComponentMeta<CommonDynamicProps> = {\n name: \"hostless-dynamic-element\",\n displayName: \"Dynamic Element\",\n importName: \"DynamicElement\",\n importPath: thisModule,\n props: { ...dynamicProps, children: \"slot\" },\n};\n\nexport function registerDynamicElement(\n loader?: { registerComponent: typeof registerComponent },\n customDynamicElementMeta?: ComponentMeta<CommonDynamicProps>\n) {\n if (loader) {\n loader.registerComponent(\n DynamicElement,\n customDynamicElementMeta ?? dynamicElementMeta\n );\n } else {\n registerComponent(\n DynamicElement,\n customDynamicElementMeta ?? dynamicElementMeta\n );\n }\n}\n\nexport const dynamicTextMeta: ComponentMeta<DynamicTextProps> = {\n name: \"hostless-dynamic-text\",\n importName: \"DynamicText\",\n displayName: \"Dynamic Text\",\n importPath: thisModule,\n props: {\n ...dynamicProps,\n selector: {\n type: \"string\",\n description:\n \"The selector expression to use to get the text, such as: someVariable.0.someField\",\n },\n },\n};\n\nexport function registerDynamicText(\n loader?: { registerComponent: typeof registerComponent },\n customDynamicTextMeta?: ComponentMeta<DynamicTextProps>\n) {\n if (loader) {\n loader.registerComponent(\n DynamicText,\n customDynamicTextMeta ?? dynamicTextMeta\n );\n } else {\n registerComponent(DynamicText, customDynamicTextMeta ?? dynamicTextMeta);\n }\n}\n\nexport const dynamicImageMeta: ComponentMeta<DynamicImageProps> = {\n name: \"hostless-dynamic-image\",\n displayName: \"Dynamic Image\",\n importName: \"DynamicImage\",\n importPath: thisModule,\n props: {\n ...dynamicPropsWithoutTag,\n selector: {\n type: \"string\",\n description:\n \"The selector expression to use to get the image source URL, such as: someVariable.0.someField\",\n },\n },\n};\n\nexport function registerDynamicImage(\n loader?: { registerComponent: typeof registerComponent },\n customDynamicImageMeta?: ComponentMeta<DynamicImageProps>\n) {\n if (loader) {\n loader.registerComponent(\n DynamicImage,\n customDynamicImageMeta ?? dynamicImageMeta\n );\n } else {\n registerComponent(DynamicImage, customDynamicImageMeta ?? dynamicImageMeta);\n }\n}\n","export const tuple = <T extends any[]>(...args: T): T => args;\n\nexport function ensure<T>(x: T \| null \| undefined): T {\n if (x === null \|\| x === undefined) {\n debugger;\n throw new Error(`Value must not be undefined or null`);\n } else {\n return x;\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, { useEffect, useRef } from \"react\";\nimport { ensure } from \"./common\";\n\nexport interface EmbedProps {\n className?: string;\n code: string;\n hideInEditor?: boolean;\n}\n\nexport default function Embed({\n className,\n code,\n hideInEditor = false,\n}: EmbedProps) {\n const rootElt = useRef<HTMLDivElement>(null);\n useEffect(() => {\n if (hideInEditor) {\n return;\n }\n Array.from(ensure(rootElt.current).querySelectorAll(\"script\")).forEach(\n (oldScript) => {\n const newScript = document.createElement(\"script\");\n Array.from(oldScript.attributes).forEach((attr) =>\n newScript.setAttribute(attr.name, attr.value)\n );\n newScript.appendChild(document.createTextNode(oldScript.innerHTML));\n ensure(oldScript.parentNode).replaceChild(newScript, oldScript);\n }\n );\n }, [code, hideInEditor]);\n const effectiveCode = hideInEditor ? \"\" : code;\n return (\n <div\n ref={rootElt}\n className={className}\n dangerouslySetInnerHTML={{ __html: effectiveCode }}\n />\n );\n}\n\nexport const embedMeta: ComponentMeta<EmbedProps> = {\n name: \"hostless-embed\",\n displayName: \"Embed HTML\",\n importName: \"Embed\",\n importPath: \"@plasmicpkgs/plasmic-basic-components\",\n props: {\n code: {\n type: \"code\",\n lang: \"html\",\n defaultValueHint: \"<!-- HTML snippet -->\",\n description: \"The HTML code to be embedded\",\n },\n hideInEditor: {\n type: \"boolean\",\n displayName: \"Hide in editor\",\n description:\n \"Disable running the code while editing in Plasmic Studio (may require reload)\",\n editOnly: true,\n },\n },\n defaultStyles: {\n maxWidth: \"100%\",\n },\n};\n\nexport function registerEmbed(\n loader?: { registerComponent: typeof registerComponent },\n customEmbedMeta?: ComponentMeta<EmbedProps>\n) {\n if (loader) {\n loader.registerComponent(Embed, customEmbedMeta ?? embedMeta);\n } else {\n registerComponent(Embed, customEmbedMeta ?? embedMeta);\n }\n}\n","import { ComponentMeta, PlasmicCanvasContext } from \"@plasmicapp/host\";\nimport registerComponent from \"@plasmicapp/host/registerComponent\";\nimport React, { useContext } from \"react\";\n\nexport interface IframeProps {\n src: string;\n preview?: boolean;\n className?: string;\n}\n\nexport default function Iframe({ preview, src, className }: IframeProps) {\n const isEditing = useContext(PlasmicCanvasContext);\n if (isEditing && !preview) {\n return (\n <div className={className}>\n <div\n style={{\n position: \"absolute\",\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n background: \"#eee\",\n color: \"#888\",\n fontSize: \"36px\",\n fontFamily: \"sans-serif\",\n fontWeight: \"bold\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n overflow: \"hidden\",\n }}\n >\n Iframe placeholder\n </div>\n </div>\n );\n }\n return <iframe src={src} className={className} />;\n}\n\nexport const iframeMeta: ComponentMeta<IframeProps> = {\n name: \"hostless-iframe\",\n displayName: \"Iframe\",\n importName: \"Iframe\",\n importPath: \"@plasmicpkgs/plasmic-basic-components\",\n props: {\n src: {\n type: \"string\",\n defaultValue: \"https://www.example.com\",\n },\n preview: {\n type: \"boolean\",\n description: \"Load the iframe while editing in Plasmic Studio\",\n },\n },\n defaultStyles: {\n width: \"300px\",\n height: \"150px\",\n maxWidth: \"100%\",\n },\n};\n\nexport function registerIframe(\n loader?: { registerComponent: typeof registerComponent },\n customIframeMeta?: ComponentMeta<IframeProps>\n) {\n if (loader) {\n loader.registerComponent(Iframe, customIframeMeta ?? iframeMeta);\n } else {\n registerComponent(Iframe, customIframeMeta ?? iframeMeta);\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React, {\n ReactNode,\n RefObject,\n useEffect,\n useRef,\n useState,\n} from \"react\";\n\nexport function useDirectionalIntersection({\n ref,\n scrollDownThreshold = 0.5,\n scrollUpThreshold = 0,\n}: {\n ref: RefObject<HTMLElement>;\n scrollDownThreshold?: number;\n scrollUpThreshold?: number;\n}) {\n const [revealed, setRevealed] = useState(false);\n useEffect(() => {\n if (ref.current && typeof IntersectionObserver === \"function\") {\n const handler = (entries: IntersectionObserverEntry[]) => {\n if (entries[0].intersectionRatio >= scrollDownThreshold) {\n setRevealed(true);\n } else if (entries[0].intersectionRatio <= scrollUpThreshold) {\n setRevealed(false);\n }\n };\n\n const observer = new IntersectionObserver(handler, {\n root: null,\n rootMargin: \"0%\",\n threshold: [scrollUpThreshold, scrollDownThreshold],\n });\n observer.observe(ref.current);\n\n return () => {\n setRevealed(false);\n observer.disconnect();\n };\n }\n return () => {};\n }, [ref.current, scrollDownThreshold, scrollUpThreshold]);\n return revealed;\n}\n\nexport interface ScrollRevealerProps {\n children?: ReactNode;\n className?: string;\n scrollUpThreshold?: number;\n scrollDownThreshold?: number;\n}\n\n/\n Unlike react-awesome-reveal, ScrollRevealer:\n \n - has configurable thresholds\n * - triggers arbitrary render/unrender animations\n \n TODO: Merge this inta a general Reveal component, perhaps forking react-awesome-reveal, so that we don't have two different reveal components for users.\n /\nexport default function ScrollRevealer({\n children,\n className,\n scrollDownThreshold = 0.5,\n scrollUpThreshold = 0,\n}: ScrollRevealerProps) {\n const intersectionRef = useRef<HTMLDivElement>(null);\n const revealed = useDirectionalIntersection({\n ref: intersectionRef,\n scrollUpThreshold,\n scrollDownThreshold,\n });\n return (\n <div className={className} ref={intersectionRef}>\n {revealed ? children : null}\n </div>\n );\n}\n\nexport const scrollRevealerMeta: ComponentMeta<ScrollRevealerProps> = {\n name: \"hostless-scroll-revealer\",\n importName: \"ScrollRevealer\",\n displayName: \"Scroll Revealer\",\n importPath: \"@plasmicpkgs/plasmic-basic-components\",\n props: {\n children: \"slot\",\n scrollDownThreshold: {\n type: \"number\",\n displayName: \"Scroll down threshold\",\n defaultValueHint: 0.5,\n description:\n \"How much of the element (as a fraction) must you scroll into view for it to appear (defaults to 0.5)\",\n },\n scrollUpThreshold: {\n type: \"number\",\n displayName: \"Scroll up threshold\",\n defaultValueHint: 0,\n description:\n \"While scrolling up, how much of the element (as a fraction) can still be scrolled in view before it disappears (defaults to 0, meaning you must scroll up until it's completely out of view)\",\n },\n },\n defaultStyles: {\n width: \"stretch\",\n maxWidth: \"100%\",\n },\n};\n\nexport function registerScrollRevealer(\n loader?: { registerComponent: typeof registerComponent },\n customScrollRevealerMeta?: ComponentMeta<ScrollRevealerProps>\n) {\n if (loader) {\n loader.registerComponent(\n ScrollRevealer,\n customScrollRevealerMeta ?? scrollRevealerMeta\n );\n } else {\n registerComponent(\n ScrollRevealer,\n customScrollRevealerMeta ?? scrollRevealerMeta\n );\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\nexport type VideoProps = Pick<\n React.ComponentProps<\"video\">,\n \| \"autoPlay\"\n \| \"controls\"\n \| \"loop\"\n \| \"muted\"\n \| \"playsInline\"\n \| \"poster\"\n \| \"preload\"\n \| \"src\"\n>;\n\nconst Video = React.forwardRef<HTMLVideoElement, VideoProps>(\n (props: VideoProps, ref) => {\n return <video ref={ref} {...props} />;\n }\n);\n\nexport default Video;\n\nexport const videoMeta: ComponentMeta<VideoProps> = {\n name: \"hostless-html-video\",\n importName: \"Video\",\n displayName: \"HTML Video\",\n importPath: \"@plasmicpkgs/plasmic-basic-components\",\n props: {\n src: {\n type: \"string\",\n defaultValue:\n \"https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.webm\",\n displayName: \"Source URL\",\n description: \"URL to a video file.\",\n },\n autoPlay: {\n type: \"boolean\",\n displayName: \"Auto Play\",\n description:\n \"Whether the video show automatically start playing when the player loads\",\n },\n controls: {\n type: \"boolean\",\n displayName: \"Show Controls\",\n description: \"Whether the video player controls should be displayed\",\n },\n playsInline: {\n type: \"boolean\",\n displayName: \"Plays inline\",\n description:\n \"Usually on mobile, when tilted landscape, videos can play fullscreen. Turn this on to prevent that.\",\n },\n loop: {\n type: \"boolean\",\n displayName: \"Loop\",\n description: \"Whether the video should be played again after it finishes\",\n },\n muted: {\n type: \"boolean\",\n displayName: \"Muted\",\n description: \"Whether audio should be muted\",\n },\n poster: {\n type: \"imageUrl\",\n displayName: \"Poster (placeholder) image\",\n description: \"Image to show while video is downloading\",\n },\n preload: {\n type: \"choice\",\n options: [\"none\", \"metadata\", \"auto\"],\n displayName: \"Preload\",\n description:\n \"Whether to preload nothing, metadata only, or the full video\",\n },\n },\n defaultStyles: {\n height: \"hug\",\n width: \"640px\",\n maxWidth: \"100%\",\n },\n};\n\nexport function registerVideo(\n loader?: { registerComponent: typeof registerComponent },\n customVideoMeta?: ComponentMeta<VideoProps>\n) {\n if (loader) {\n loader.registerComponent(Video, customVideoMeta ?? videoMeta);\n } else {\n registerComponent(Video, customVideoMeta ?? videoMeta);\n }\n}\n","import registerComponent, {\n ComponentMeta,\n} from \"@plasmicapp/host/registerComponent\";\nimport React from \"react\";\n\nexport interface EmbedCssProps {\n css: string;\n}\n\nexport default function EmbedCss({\n css\n}: EmbedCssProps) {\n return (\n <style\n dangerouslySetInnerHTML={{ __html: css }}\n />\n );\n}\n\nexport const embedCssMeta: ComponentMeta<EmbedCssProps> = { \n name: \"hostless-embed-css\",\n displayName: \"Embed Css\",\n importName: \"EmbedCss\",\n importPath: \"@plasmicpkgs/plasmic-basic-components\",\n props: {\n css: {\n type: \"code\",\n lang: \"css\",\n defaultValueHint: \"/ CSS snippet */\",\n description: \"CSS rules to be inserted\",\n },\n },\n};\n\nexport function registerEmbedCss(\n loader?: { registerComponent: typeof registerComponent },\n customEmbedCssMeta?: ComponentMeta<EmbedCssProps>\n) {\n if (loader) {\n loader.registerComponent(EmbedCss, customEmbedCssMeta ?? embedCssMeta);\n } else {\n registerComponent(EmbedCss, customEmbedCssMeta ?? embedCssMeta);\n }\n}\n"],"names":["thisModule","DynamicElement","tag","className","children","propSelectors","props","computed","_useSelectors","createElement","DynamicText","selector","React","DynamicImage","loading","style","objectFit","src","DynamicRepeater","loopItemName","keySelector","data","finalData","_useSelector","map","item","index","_DataProvider","key","_applySelector","name","repeatedElement","dynamicRepeaterProps","type","description","defaultValue","dynamicRepeaterMeta","displayName","importName","importPath","dataProviderMeta","birthYear","profilePicture","dynamicPropsWithoutTag","defaultValueHint","dynamicProps","dynamicElementMeta","dynamicTextMeta","dynamicImageMeta","ensure","x","Error","Embed","code","hideInEditor","rootElt","useRef","useEffect","Array","from","current","querySelectorAll","forEach","oldScript","newScript","document","attributes","attr","setAttribute","value","appendChild","createTextNode","innerHTML","parentNode","replaceChild","ref","dangerouslySetInnerHTML","__html","embedMeta","lang","editOnly","defaultStyles","maxWidth","Iframe","preview","useContext","PlasmicCanvasContext","position","top","left","right","bottom","background","color","fontSize","fontFamily","fontWeight","display","alignItems","justifyContent","overflow","iframeMeta","width","height","useDirectionalIntersection","scrollDownThreshold","scrollUpThreshold","useState","revealed","setRevealed","IntersectionObserver","observer","entries","intersectionRatio","root","rootMargin","threshold","observe","disconnect","ScrollRevealer","intersectionRef","scrollRevealerMeta","Video","forwardRef","videoMeta","autoPlay","controls","playsInline","loop","muted","poster","preload","options","EmbedCss","css","embedCssMeta","console","warn","loader","customDataProviderMeta","registerComponent","customDynamicElementMeta","customDynamicImageMeta","customDynamicRepeaterMeta","customDynamicTextMeta","customEmbedMeta","customEmbedCssMeta","customIframeMeta","customScrollRevealerMeta","customVideoMeta","_useDataEnv"],"mappings":"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"}

package/dist/plasmic-basic-components.esm.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { repeatedElement, PlasmicCanvasContext } from '@plasmicapp/host';
+import { applySelector as applySelector$1, useSelector as useSelector$1, useSelectors as useSelectors$1, useDataEnv as useDataEnv$1, DataProvider as DataProvider$1, repeatedElement, PlasmicCanvasContext } from '@plasmicapp/host';
 import registerComponent from '@plasmicapp/host/registerComponent';
-import React, { createContext, useContext, createElement, useRef, useState, useEffect } from 'react';
+import React, { createElement, useRef, useEffect, useContext, useState } from 'react';
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -35,130 +35,70 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
-function _unsupportedIterableToArray(o, minLen) {
-  if (!o) return;
-  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
-  var n = Object.prototype.toString.call(o).slice(8, -1);
-  if (n === "Object" && o.constructor) n = o.constructor.name;
-  if (n === "Map" || n === "Set") return Array.from(o);
-  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
-}
-function _arrayLikeToArray(arr, len) {
-  if (len == null || len > arr.length) len = arr.length;
-  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
-  return arr2;
-}
-function _createForOfIteratorHelperLoose(o, allowArrayLike) {
-  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
-  if (it) return (it = it.call(o)).next.bind(it);
-  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
-    if (it) o = it;
-    var i = 0;
-    return function () {
-      if (i >= o.length) return {
-        done: true
-      };
-      return {
-        done: false,
-        value: o[i++]
-      };
-    };
-  }
-  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
-}
-var tuple = function tuple() {
-  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-    args[_key] = arguments[_key];
-  }
-  return args;
-};
-var DataContext = /*#__PURE__*/createContext(undefined);
+var _excluded = ["tag", "className", "children", "propSelectors"],
+    _excluded2 = ["selector", "propSelectors"],
+    _excluded3 = ["selector", "propSelectors"];
 var thisModule = "@plasmicpkgs/plasmic-basic-components";
-function applySelector(rawData, selector) {
-  if (!selector) {
-    return undefined;
-  }
-  var curData = rawData;
+/**
+ * @deprecated This should be imported from @plasmicapp/host instead.
+ */
-  for (var _iterator = _createForOfIteratorHelperLoose(selector.split(".")), _step; !(_step = _iterator()).done;) {
-    var _curData;
+var applySelector = function applySelector() {
+  console.warn("DEPRECATED: Import applySelector from @plasmicapp/host instead.");
+  return applySelector$1.apply(void 0, arguments);
+};
+/**
+ * @deprecated This should be imported from @plasmicapp/host instead.
+ */
-    var key = _step.value;
-    curData = (_curData = curData) == null ? void 0 : _curData[key];
-  }
+var useSelector = function useSelector() {
+  console.warn("DEPRECATED: Import useSelector from @plasmicapp/host instead.");
+  return useSelector$1.apply(void 0, arguments);
+};
+/**
+ * @deprecated This should be imported from @plasmicapp/host instead.
+ */
-  return curData;
-}
-function useSelector(selector) {
-  var rawData = useDataEnv();
-  return applySelector(rawData, selector);
-}
-function useSelectors(selectors) {
-  if (selectors === void 0) {
-    selectors = {};
-  }
+var useSelectors = function useSelectors() {
+  console.warn("DEPRECATED: Import useSelectors from @plasmicapp/host instead.");
+  return useSelectors$1.apply(void 0, arguments);
+};
+/**
+ * @deprecated This should be imported from @plasmicapp/host instead.
+ */
-  var rawData = useDataEnv();
-  return Object.fromEntries(Object.entries(selectors).filter(function (_ref) {
-    var key = _ref[0],
-        selector = _ref[1];
-    return !!key && !!selector;
-  }).map(function (_ref2) {
-    var key = _ref2[0],
-        selector = _ref2[1];
-    return tuple(key, applySelector(rawData, selector));
-  }));
-}
-function useDataEnv() {
-  return useContext(DataContext);
-}
-function DataProvider(_ref3) {
-  var _useDataEnv;
+var useDataEnv = function useDataEnv() {
+  console.warn("DEPRECATED: Import useDataEnv from @plasmicapp/host instead.");
+  return useDataEnv$1.apply(void 0, arguments);
+};
+/**
+ * @deprecated This should be imported from @plasmicapp/host instead.
+ */
-  var name = _ref3.name,
-      data = _ref3.data,
-      children = _ref3.children;
-  var existingEnv = (_useDataEnv = useDataEnv()) != null ? _useDataEnv : {};
+var DataProvider = function DataProvider() {
+  console.warn("DEPRECATED: Import DataProvider from @plasmicapp/host instead.");
+  return DataProvider$1.apply(void 0, arguments);
+};
+function DynamicElement(_ref) {
+  var _ref$tag = _ref.tag,
+      tag = _ref$tag === void 0 ? "div" : _ref$tag,
+      className = _ref.className,
+      children = _ref.children,
+      propSelectors = _ref.propSelectors,
+      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  if (!name) {
-    return React.createElement(React.Fragment, null, children);
-  } else {
-    var _extends2;
+  var computed = useSelectors$1(propSelectors);
-    return React.createElement(DataContext.Provider, {
-      value: _extends({}, existingEnv, (_extends2 = {}, _extends2[name] = data, _extends2))
-    }, children);
-  }
-}
-function DynamicElement(_ref4) {
-  var _ref4$tag = _ref4.tag,
-      tag = _ref4$tag === void 0 ? "div" : _ref4$tag,
-      className = _ref4.className,
-      children = _ref4.children,
-      propSelectors = _ref4.propSelectors,
-      props = _objectWithoutPropertiesLoose(_ref4, ["tag", "className", "children", "propSelectors"]);
-  var computed = useSelectors(propSelectors);
   return createElement(tag, _extends({
     children: children
   }, props, computed, {
     className: className + " " + computed.className
   }));
 }
-function DynamicText(_ref5) {
-  var selector = _ref5.selector,
-      propSelectors = _ref5.propSelectors,
-      props = _objectWithoutPropertiesLoose(_ref5, ["selector", "propSelectors"]);
+function DynamicText(_ref2) {
+  var selector = _ref2.selector,
+      propSelectors = _ref2.propSelectors,
+      props = _objectWithoutPropertiesLoose(_ref2, _excluded2);
   return React.createElement(DynamicElement, Object.assign({}, props, {
     propSelectors: _extends({}, propSelectors, {
@@ -166,10 +106,10 @@ function DynamicText(_ref5) {
     })
   }), "(DynamicText requires a selector)");
 }
-function DynamicImage(_ref6) {
-  var selector = _ref6.selector,
-      propSelectors = _ref6.propSelectors,
-      props = _objectWithoutPropertiesLoose(_ref6, ["selector", "propSelectors"]);
+function DynamicImage(_ref3) {
+  var selector = _ref3.selector,
+      propSelectors = _ref3.propSelectors,
+      props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
   return React.createElement(DynamicElement, Object.assign({
     tag: "img",
@@ -185,21 +125,21 @@ function DynamicImage(_ref6) {
     src: "https://studio.plasmic.app/static/img/placeholder.png"
   }));
 }
-function DynamicRepeater(_ref7) {
-  var _ref8;
-  var children = _ref7.children,
-      loopItemName = _ref7.loopItemName,
-      keySelector = _ref7.keySelector,
-      selector = _ref7.selector,
-      data = _ref7.data;
+function DynamicRepeater(_ref4) {
+  var _ref5;
+  var children = _ref4.children,
+      loopItemName = _ref4.loopItemName,
+      keySelector = _ref4.keySelector,
+      selector = _ref4.selector,
+      data = _ref4.data;
   // Defaults to an array of three items.
-  var finalData = (_ref8 = data != null ? data : useSelector(selector)) != null ? _ref8 : [1, 2, 3];
+  var finalData = (_ref5 = data != null ? data : useSelector$1(selector)) != null ? _ref5 : [1, 2, 3];
   return React.createElement(React.Fragment, null, finalData == null ? void 0 : finalData.map == null ? void 0 : finalData.map(function (item, index) {
-    var _applySelector;
+    var _applySelector2;
-    return React.createElement(DataProvider, {
-      key: (_applySelector = applySelector(item, keySelector)) != null ? _applySelector : index,
+    return React.createElement(DataProvider$1, {
+      key: (_applySelector2 = applySelector$1(item, keySelector)) != null ? _applySelector2 : index,
       name: loopItemName,
       data: item
     }, repeatedElement(index === 0, children));
@@ -275,9 +215,9 @@ var dataProviderMeta = {
 };
 function registerDataProvider(loader, customDataProviderMeta) {
   if (loader) {
-    loader.registerComponent(DataProvider, customDataProviderMeta != null ? customDataProviderMeta : dataProviderMeta);
+    loader.registerComponent(DataProvider$1, customDataProviderMeta != null ? customDataProviderMeta : dataProviderMeta);
   } else {
-    registerComponent(DataProvider, customDataProviderMeta != null ? customDataProviderMeta : dataProviderMeta);
+    registerComponent(DataProvider$1, customDataProviderMeta != null ? customDataProviderMeta : dataProviderMeta);
   }
 }
 var dynamicPropsWithoutTag = {
@@ -352,6 +292,75 @@ function registerDynamicImage(loader, customDynamicImageMeta) {
   }
 }
+function ensure(x) {
+  if (x === null || x === undefined) {
+    debugger;
+    throw new Error("Value must not be undefined or null");
+  } else {
+    return x;
+  }
+}
+function Embed(_ref) {
+  var className = _ref.className,
+      code = _ref.code,
+      _ref$hideInEditor = _ref.hideInEditor,
+      hideInEditor = _ref$hideInEditor === void 0 ? false : _ref$hideInEditor;
+  var rootElt = useRef(null);
+  useEffect(function () {
+    if (hideInEditor) {
+      return;
+    }
+    Array.from(ensure(rootElt.current).querySelectorAll("script")).forEach(function (oldScript) {
+      var newScript = document.createElement("script");
+      Array.from(oldScript.attributes).forEach(function (attr) {
+        return newScript.setAttribute(attr.name, attr.value);
+      });
+      newScript.appendChild(document.createTextNode(oldScript.innerHTML));
+      ensure(oldScript.parentNode).replaceChild(newScript, oldScript);
+    });
+  }, [code, hideInEditor]);
+  var effectiveCode = hideInEditor ? "" : code;
+  return React.createElement("div", {
+    ref: rootElt,
+    className: className,
+    dangerouslySetInnerHTML: {
+      __html: effectiveCode
+    }
+  });
+}
+var embedMeta = {
+  name: "hostless-embed",
+  displayName: "Embed HTML",
+  importName: "Embed",
+  importPath: "@plasmicpkgs/plasmic-basic-components",
+  props: {
+    code: {
+      type: "code",
+      lang: "html",
+      defaultValueHint: "<!-- HTML snippet -->",
+      description: "The HTML code to be embedded"
+    },
+    hideInEditor: {
+      type: "boolean",
+      displayName: "Hide in editor",
+      description: "Disable running the code while editing in Plasmic Studio (may require reload)",
+      editOnly: true
+    }
+  },
+  defaultStyles: {
+    maxWidth: "100%"
+  }
+};
+function registerEmbed(loader, customEmbedMeta) {
+  if (loader) {
+    loader.registerComponent(Embed, customEmbedMeta != null ? customEmbedMeta : embedMeta);
+  } else {
+    registerComponent(Embed, customEmbedMeta != null ? customEmbedMeta : embedMeta);
+  }
+}
 function Iframe(_ref) {
   var preview = _ref.preview,
       src = _ref.src,
@@ -590,13 +599,14 @@ function EmbedCss(_ref) {
 }
 var embedCssMeta = {
   name: "hostless-embed-css",
-  displayName: "EmbedCss",
+  displayName: "Embed Css",
   importName: "EmbedCss",
   importPath: "@plasmicpkgs/plasmic-basic-components",
   props: {
     css: {
-      type: "string",
-      defaultValueHint: "Some CSS snippet",
+      type: "code",
+      lang: "css",
+      defaultValueHint: "/* CSS snippet */",
       description: "CSS rules to be inserted"
     }
   }
@@ -609,5 +619,5 @@ function registerEmbedCss(loader, customEmbedCssMeta) {
   }
 }
-export { DataContext, DataProvider, DynamicElement, DynamicImage, DynamicRepeater, DynamicText, EmbedCss, Iframe, ScrollRevealer, Video, applySelector, dataProviderMeta, dynamicElementMeta, dynamicImageMeta, dynamicRepeaterMeta, dynamicRepeaterProps, dynamicTextMeta, embedCssMeta, iframeMeta, registerDataProvider, registerDynamicElement, registerDynamicImage, registerDynamicRepeater, registerDynamicText, registerEmbedCss, registerIframe, registerScrollRevealer, registerVideo, scrollRevealerMeta, useDataEnv, useDirectionalIntersection, useSelector, useSelectors, videoMeta };
+export { DataProvider, DynamicElement, DynamicImage, DynamicRepeater, DynamicText, Embed, EmbedCss, Iframe, ScrollRevealer, Video, applySelector, dataProviderMeta, dynamicElementMeta, dynamicImageMeta, dynamicRepeaterMeta, dynamicRepeaterProps, dynamicTextMeta, embedCssMeta, embedMeta, iframeMeta, registerDataProvider, registerDynamicElement, registerDynamicImage, registerDynamicRepeater, registerDynamicText, registerEmbed, registerEmbedCss, registerIframe, registerScrollRevealer, registerVideo, scrollRevealerMeta, useDataEnv, useDirectionalIntersection, useSelector, useSelectors, videoMeta };
 //# sourceMappingURL=plasmic-basic-components.esm.js.map