@plasmicpkgs/plasmic-basic-components 0.0.9 → 0.0.14

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

@@ -1 +1 @@
-{"version":3,"file":"plasmic-basic-components.cjs.production.min.js","sources":["../src/common.ts","../src/Data.tsx","../src/Embed.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 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: \"string\",\n      defaultValue: \"https://www.example.com\",\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: \"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":["ensure","x","Error","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","Embed","code","hideInEditor","rootElt","useRef","useEffect","Array","from","current","querySelectorAll","forEach","oldScript","newScript","document","attributes","attr","setAttribute","appendChild","createTextNode","innerHTML","parentNode","replaceChild","ref","dangerouslySetInnerHTML","__html","embedMeta","editOnly","defaultStyles","maxWidth","Iframe","preview","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","intersectionRatio","root","rootMargin","threshold","observe","disconnect","ScrollRevealer","intersectionRef","scrollRevealerMeta","Video","forwardRef","videoMeta","autoPlay","controls","playsInline","loop","muted","poster","preload","options","EmbedCss","css","embedCssMeta","loader","customDataProviderMeta","registerComponent","customDynamicElementMeta","customDynamicImageMeta","customDynamicRepeaterMeta","customDynamicTextMeta","customEmbedMeta","customEmbedCssMeta","customIframeMeta","customScrollRevealerMeta","customVideoMeta"],"mappings":"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"}
+{"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

@@ -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, useEffect, useState } from 'react';
+import React, { createElement, useRef, useEffect, useContext, useState } from 'react';
 
 function _extends() {
   _extends = Object.assign || function (target) {
@@ -35,138 +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;
-};
-function ensure(x) {
-  if (x === null || x === undefined) {
-    debugger;
-    throw new Error("Value must not be undefined or null");
-  } else {
-    return x;
-  }
-}
-
-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, {
@@ -174,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",
@@ -193,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));
@@ -283,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 = {
@@ -360,6 +292,15 @@ 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,
@@ -396,8 +337,10 @@ var embedMeta = {
   importPath: "@plasmicpkgs/plasmic-basic-components",
   props: {
     code: {
-      type: "string",
-      defaultValue: "https://www.example.com"
+      type: "code",
+      lang: "html",
+      defaultValueHint: "<!-- HTML snippet -->",
+      description: "The HTML code to be embedded"
     },
     hideInEditor: {
       type: "boolean",
@@ -656,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"
     }
   }
@@ -675,5 +619,5 @@ function registerEmbedCss(loader, customEmbedCssMeta) {
   }
 }
 
-export { DataContext, 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 };
+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