@plasmicpkgs/plasmic-basic-components 0.0.1 → 0.0.5

package/dist/Data.d.ts

@@ -1,4 +1,5 @@
-/** @format */
+import { ComponentMeta } from "@plasmicapp/host";
+import registerComponent from "@plasmicapp/host/registerComponent";
 import React, { ComponentProps, CSSProperties, ReactNode } from "react";
 export declare type DataDict = Record<string, any>;
 export declare const DataContext: React.Context<Record<string, any> | undefined>;
@@ -19,12 +20,14 @@ export interface CommonDynamicProps {
     propSelectors?: SelectorDict;
 }
 export declare function DynamicElement<Tag extends keyof JSX.IntrinsicElements = "div">({ tag, className, children, propSelectors, ...props }: CommonDynamicProps & ComponentProps<Tag>): React.DOMElement<any, Element>;
-export declare function DynamicText({ selector, propSelectors, ...props }: CommonDynamicProps & {
+export interface DynamicTextProps extends CommonDynamicProps {
     selector?: string;
-}): JSX.Element;
-export declare function DynamicImage({ selector, propSelectors, ...props }: CommonDynamicProps & ComponentProps<"img"> & {
+}
+export declare function DynamicText({ selector, propSelectors, ...props }: DynamicTextProps): JSX.Element;
+export interface DynamicImageProps extends CommonDynamicProps, ComponentProps<"img"> {
     selector?: string;
-}): JSX.Element;
+}
+export declare function DynamicImage({ selector, propSelectors, ...props }: DynamicImageProps): JSX.Element;
 export interface DynamicCollectionProps extends CommonDynamicProps {
     children?: ReactNode;
     style?: CSSProperties;
@@ -40,6 +43,22 @@ export interface DynamicCollectionGridProps extends DynamicCollectionProps {
     rowGap?: number;
 }
 export declare function DynamicCollectionGrid({ columns, columnGap, rowGap, ...props }: DynamicCollectionGridProps): JSX.Element;
+export declare const dataProviderMeta: ComponentMeta<DataProviderProps>;
+export declare function registerDataProvider(loader?: {
+    registerComponent: typeof registerComponent;
+}, customDataProviderMeta?: ComponentMeta<DataProviderProps>): void;
+export declare const dynamicElementMeta: ComponentMeta<CommonDynamicProps>;
+export declare function registerDynamicElement(loader?: {
+    registerComponent: typeof registerComponent;
+}, customDynamicElementMeta?: ComponentMeta<CommonDynamicProps>): void;
+export declare const dynamicTextMeta: ComponentMeta<DynamicTextProps>;
+export declare function registerDynamicText(loader?: {
+    registerComponent: typeof registerComponent;
+}, customDynamicTextMeta?: ComponentMeta<DynamicTextProps>): void;
+export declare const dynamicImageMeta: ComponentMeta<DynamicImageProps>;
+export declare function registerDynamicImage(loader?: {
+    registerComponent: typeof registerComponent;
+}, customDynamicImageMeta?: ComponentMeta<DynamicImageProps>): void;
 export declare const dynamicCollectionProps: {
     readonly selector: {
         readonly type: "string";
@@ -53,13 +72,19 @@ export declare const dynamicCollectionProps: {
     readonly children: "slot";
     readonly tag: {
         readonly type: "string";
+        readonly defaultValueHint: "div";
         readonly description: "The HTML tag to use";
     };
     readonly propSelectors: {
         readonly type: "object";
+        readonly defaultValueHint: {};
         readonly description: "An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value.";
     };
 };
+export declare const dynamicCollectionMeta: ComponentMeta<DynamicCollectionProps>;
+export declare function registerDynamicCollection(loader?: {
+    registerComponent: typeof registerComponent;
+}, customDynamicCollectionMeta?: ComponentMeta<DynamicCollectionProps>): void;
 export declare const dynamicCollectionGridProps: {
     readonly columns: {
         readonly type: "number";
@@ -88,10 +113,16 @@ export declare const dynamicCollectionGridProps: {
     readonly children: "slot";
     readonly tag: {
         readonly type: "string";
+        readonly defaultValueHint: "div";
         readonly description: "The HTML tag to use";
     };
     readonly propSelectors: {
         readonly type: "object";
+        readonly defaultValueHint: {};
         readonly description: "An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value.";
     };
 };
+export declare const dynamicCollectionGridMeta: ComponentMeta<DynamicCollectionGridProps>;
+export declare function registerDynamicCollectionGrid(loader?: {
+    registerComponent: typeof registerComponent;
+}, customDynamicCollectionGridMeta?: ComponentMeta<DynamicCollectionGridProps>): void;

package/dist/Embed.d.ts

@@ -1,8 +1,10 @@
-/** @format */
-/// <reference types="react" />
+import registerComponent, { ComponentMeta } from "@plasmicapp/host/registerComponent";
 export interface EmbedProps {
     className?: string;
     code: string;
     hideInEditor?: boolean;
 }
-export default function Embed({ className, code, hideInEditor, }: EmbedProps): JSX.Element;
+export declare const embedMeta: ComponentMeta<EmbedProps>;
+export declare function registerEmbed(loader?: {
+    registerComponent: typeof registerComponent;
+}, customEmbedMeta?: ComponentMeta<EmbedProps>): void;

package/dist/Iframe.d.ts

@@ -1,8 +1,13 @@
-/** @format */
 /// <reference types="react" />
+import { ComponentMeta } from "@plasmicapp/host";
+import registerComponent from "@plasmicapp/host/registerComponent";
 export interface IframeProps {
     src: string;
-    hideInEditor?: boolean;
+    preview?: boolean;
     className?: string;
 }
-export default function Iframe({ hideInEditor, src, className }: IframeProps): JSX.Element;
+export default function Iframe({ preview, src, className }: IframeProps): JSX.Element;
+export declare const iframeMeta: ComponentMeta<IframeProps>;
+export declare function registerIframe(loader?: {
+    registerComponent: typeof registerComponent;
+}, customIframeMeta?: ComponentMeta<IframeProps>): void;

package/dist/ScrollRevealer.d.ts

@@ -1,9 +1,16 @@
+import registerComponent, { ComponentMeta } from "@plasmicapp/host/registerComponent";
 import { ReactNode, RefObject } from "react";
 export declare function useDirectionalIntersection({ ref, scrollDownThreshold, scrollUpThreshold, }: {
     ref: RefObject<HTMLElement>;
     scrollDownThreshold?: number;
     scrollUpThreshold?: number;
 }): boolean;
+export interface ScrollRevealerProps {
+    children?: ReactNode;
+    className?: string;
+    scrollUpThreshold?: number;
+    scrollDownThreshold?: number;
+}
 /**
  * Unlike react-awesome-reveal, ScrollRevealer:
  *
@@ -12,9 +19,8 @@ export declare function useDirectionalIntersection({ ref, scrollDownThreshold, s
  *
  * 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.
  */
-export default function ScrollRevealer({ children, className, scrollDownThreshold, scrollUpThreshold, }: {
-    children?: ReactNode;
-    className?: string;
-    scrollUpThreshold?: number;
-    scrollDownThreshold?: number;
-}): JSX.Element;
+export default function ScrollRevealer({ children, className, scrollDownThreshold, scrollUpThreshold, }: ScrollRevealerProps): JSX.Element;
+export declare const scrollRevealerMeta: ComponentMeta<ScrollRevealerProps>;
+export declare function registerScrollRevealer(loader?: {
+    registerComponent: typeof registerComponent;
+}, customScrollRevealerMeta?: ComponentMeta<ScrollRevealerProps>): void;

package/dist/Video.d.ts

@@ -1,3 +1,9 @@
+import registerComponent, { ComponentMeta } from "@plasmicapp/host/registerComponent";
 import React from "react";
+export declare type VideoProps = Pick<React.ComponentProps<"video">, "autoPlay" | "controls" | "loop" | "muted" | "playsInline" | "poster" | "preload" | "src">;
 declare const Video: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "autoPlay" | "controls" | "loop" | "muted" | "playsInline" | "poster" | "preload" | "src"> & React.RefAttributes<HTMLVideoElement>>;
 export default Video;
+export declare const videoMeta: ComponentMeta<VideoProps>;
+export declare function registerVideo(loader?: {
+    registerComponent: typeof registerComponent;
+}, customVideoMeta?: ComponentMeta<VideoProps>): void;

package/dist/index.d.ts

@@ -1,5 +1,7 @@
 export * from "./Data";
-export { default as Embed } from "./Embed";
+export * from "./Iframe";
 export { default as Iframe } from "./Iframe";
+export * from "./ScrollRevealer";
 export { default as ScrollRevealer } from "./ScrollRevealer";
+export * from "./Video";
 export { default as Video } from "./Video";

package/dist/plasmic-basic-components.cjs.development.js

@@ -87,14 +87,6 @@ var tuple = function tuple() {
 
   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__*/React.createContext(undefined);
 function applySelector(rawData, selector) {
@@ -238,9 +230,11 @@ function DynamicCollectionGrid(_ref9) {
     }
   }));
 }
-var thisModule = "@plasmicpkgs/plasmic-basic-components/Data";
-registerComponent(DataProvider, {
-  name: "DataProvider",
+var thisModule = "@plasmicpkgs/plasmic-basic-components";
+var dataProviderMeta = {
+  name: "hostless-data-provider",
+  displayName: "Data Provider",
+  importName: "DataProvider",
   importPath: thisModule,
   // description: "Makes some specified data available to the subtree in a context",
   props: {
@@ -265,24 +259,31 @@ registerComponent(DataProvider, {
       type: "slot",
       defaultValue: [{
         type: "component",
-        name: "DynamicText",
+        name: "hostless-dynamic-text",
         props: {
           selector: "celebrities.0.name"
         }
       }, {
         type: "component",
-        name: "DynamicImage",
+        name: "hostless-dynamic-image",
         props: {
           selector: "celebrities.0.profilePicture"
         }
       }]
     }
   }
-});
+};
+function registerDataProvider(loader, customDataProviderMeta) {
+  if (loader) {
+    loader.registerComponent(DataProvider, customDataProviderMeta != null ? customDataProviderMeta : dataProviderMeta);
+  } else {
+    registerComponent(DataProvider, customDataProviderMeta != null ? customDataProviderMeta : dataProviderMeta);
+  }
+}
 var dynamicPropsWithoutTag = {
   propSelectors: {
     type: "object",
-    // defaultValueHint: {},
+    defaultValueHint: {},
     description: "An object whose keys are prop names and values are selector expressions. Use this to set any prop to a dynamic value."
   }
 };
@@ -290,39 +291,66 @@ var dynamicPropsWithoutTag = {
 var dynamicProps = /*#__PURE__*/_extends({}, dynamicPropsWithoutTag, {
   tag: {
     type: "string",
-    // defaultValueHint: "div",
+    defaultValueHint: "div",
     description: "The HTML tag to use"
   }
 }); // TODO Eventually we'll want to expose all the base HTML properties, but in the nicer way that we do within the studio.
 
 
-registerComponent(DynamicElement, {
-  name: "DynamicElement",
+var dynamicElementMeta = {
+  name: "hostless-dynamic-element",
+  displayName: "Dynamic Element",
+  importName: "DynamicElement",
   importPath: thisModule,
-  props: _extends({}, dynamicProps, {
+  props: /*#__PURE__*/_extends({}, dynamicProps, {
     children: "slot"
   })
-});
-registerComponent(DynamicText, {
-  name: "DynamicText",
+};
+function registerDynamicElement(loader, customDynamicElementMeta) {
+  if (loader) {
+    loader.registerComponent(DynamicElement, customDynamicElementMeta != null ? customDynamicElementMeta : dynamicElementMeta);
+  } else {
+    registerComponent(DynamicElement, customDynamicElementMeta != null ? customDynamicElementMeta : dynamicElementMeta);
+  }
+}
+var dynamicTextMeta = {
+  name: "hostless-dynamic-text",
+  importName: "DynamicText",
+  displayName: "Dynamic Text",
   importPath: thisModule,
-  props: _extends({}, dynamicProps, {
+  props: /*#__PURE__*/_extends({}, dynamicProps, {
     selector: {
       type: "string",
       description: "The selector expression to use to get the text, such as: someVariable.0.someField"
     }
   })
-});
-registerComponent(DynamicImage, {
-  name: "DynamicImage",
+};
+function registerDynamicText(loader, customDynamicTextMeta) {
+  if (loader) {
+    loader.registerComponent(DynamicText, customDynamicTextMeta != null ? customDynamicTextMeta : dynamicTextMeta);
+  } else {
+    registerComponent(DynamicText, customDynamicTextMeta != null ? customDynamicTextMeta : dynamicTextMeta);
+  }
+}
+var dynamicImageMeta = {
+  name: "hostless-dynamic-image",
+  displayName: "Dynamic Image",
+  importName: "DynamicImage",
   importPath: thisModule,
-  props: _extends({}, dynamicPropsWithoutTag, {
+  props: /*#__PURE__*/_extends({}, dynamicPropsWithoutTag, {
     selector: {
       type: "string",
       description: "The selector expression to use to get the image source URL, such as: someVariable.0.someField"
     }
   })
-});
+};
+function registerDynamicImage(loader, customDynamicImageMeta) {
+  if (loader) {
+    loader.registerComponent(DynamicImage, customDynamicImageMeta != null ? customDynamicImageMeta : dynamicImageMeta);
+  } else {
+    registerComponent(DynamicImage, customDynamicImageMeta != null ? customDynamicImageMeta : dynamicImageMeta);
+  }
+}
 var dynamicCollectionProps = /*#__PURE__*/_extends({}, dynamicProps, {
   selector: {
     type: "string",
@@ -335,11 +363,20 @@ var dynamicCollectionProps = /*#__PURE__*/_extends({}, dynamicProps, {
   },
   children: "slot"
 });
-registerComponent(DynamicCollection, {
-  name: "DynamicCollection",
+var dynamicCollectionMeta = {
+  name: "hostless-dynamic-collection",
+  displayName: "Dynamic Collection",
+  importName: "DynamicCollection",
   importPath: thisModule,
   props: dynamicCollectionProps
-});
+};
+function registerDynamicCollection(loader, customDynamicCollectionMeta) {
+  if (loader) {
+    loader.registerComponent(DynamicCollection, customDynamicCollectionMeta != null ? customDynamicCollectionMeta : dynamicCollectionMeta);
+  } else {
+    registerComponent(DynamicCollection, customDynamicCollectionMeta != null ? customDynamicCollectionMeta : dynamicCollectionMeta);
+  }
+}
 var dynamicCollectionGridProps = /*#__PURE__*/_extends({}, dynamicCollectionProps, {
   columns: {
     type: "number",
@@ -357,70 +394,28 @@ var dynamicCollectionGridProps = /*#__PURE__*/_extends({}, dynamicCollectionProp
     description: "The gap between rows"
   }
 });
-registerComponent(DynamicCollectionGrid, {
-  name: "DynamicCollectionGrid",
+var dynamicCollectionGridMeta = {
+  name: "hostless-dynamic-collection-grid",
+  displayName: "Dynamic Collection Grid",
+  importName: "DynamicCollectionGrid",
   importPath: thisModule,
   props: dynamicCollectionGridProps
-});
-
-/** @format */
-function Embed(_ref) {
-  var className = _ref.className,
-      code = _ref.code,
-      _ref$hideInEditor = _ref.hideInEditor,
-      hideInEditor = _ref$hideInEditor === void 0 ? false : _ref$hideInEditor;
-  var rootElt = React.useRef(null);
-  React.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__default.createElement("div", {
-    ref: rootElt,
-    className: className,
-    dangerouslySetInnerHTML: {
-      __html: effectiveCode
-    }
-  });
-}
-registerComponent(Embed, {
-  name: "Embed",
-  importPath: "@plasmicpkgs/plasmic-basic-components/Embed",
-  props: {
-    code: {
-      type: "string",
-      defaultValue: "https://www.example.com"
-    },
-    hideInEditor: {
-      type: "boolean",
-      displayName: "Hide in editor",
-      description: "Disable running the code while editing in Plasmic Studio (may require reload)"
-    }
-  },
-  isDefaultExport: true,
-  defaultStyles: {
-    maxWidth: "100%"
+};
+function registerDynamicCollectionGrid(loader, customDynamicCollectionGridMeta) {
+  if (loader) {
+    loader.registerComponent(DynamicCollectionGrid, customDynamicCollectionGridMeta != null ? customDynamicCollectionGridMeta : dynamicCollectionGridMeta);
+  } else {
+    registerComponent(DynamicCollectionGrid, customDynamicCollectionGridMeta != null ? customDynamicCollectionGridMeta : dynamicCollectionGridMeta);
   }
-});
+}
 
-/** @format */
 function Iframe(_ref) {
-  var hideInEditor = _ref.hideInEditor,
+  var preview = _ref.preview,
       src = _ref.src,
       className = _ref.className;
   var isEditing = React.useContext(host.PlasmicCanvasContext);
 
-  if (isEditing && !hideInEditor) {
+  if (isEditing && !preview) {
     return React__default.createElement("div", {
       className: className
     }, React__default.createElement("div", {
@@ -448,27 +443,34 @@ function Iframe(_ref) {
     className: className
   });
 }
-registerComponent(Iframe, {
-  name: "Iframe",
-  importPath: "@plasmicpkgs/plasmic-basic-components/Iframe",
+var iframeMeta = {
+  name: "hostless-iframe",
+  displayName: "Iframe",
+  importName: "Iframe",
+  importPath: "@plasmicpkgs/plasmic-basic-components",
   props: {
     src: {
       type: "string",
       defaultValue: "https://www.example.com"
     },
-    hideInEditor: {
+    preview: {
       type: "boolean",
-      displayName: "Preview",
       description: "Load the iframe while editing in Plasmic Studio"
     }
   },
-  isDefaultExport: true,
   defaultStyles: {
     width: "300px",
     height: "150px",
     maxWidth: "100%"
   }
-});
+};
+function registerIframe(loader, customIframeMeta) {
+  if (loader) {
+    loader.registerComponent(Iframe, customIframeMeta != null ? customIframeMeta : iframeMeta);
+  } else {
+    registerComponent(Iframe, customIframeMeta != null ? customIframeMeta : iframeMeta);
+  }
+}
 
 function useDirectionalIntersection(_ref) {
   var ref = _ref.ref,
@@ -534,40 +536,49 @@ function ScrollRevealer(_ref2) {
     ref: intersectionRef
   }, revealed ? children : null);
 }
-registerComponent(ScrollRevealer, {
-  name: "ScrollRevealer",
+var scrollRevealerMeta = {
+  name: "hostless-scroll-revealer",
+  importName: "ScrollRevealer",
   displayName: "Scroll Revealer",
-  importPath: "@plasmicpkgs/plasmic-basic-components/ScrollRevealer",
+  importPath: "@plasmicpkgs/plasmic-basic-components",
   props: {
     children: "slot",
     scrollDownThreshold: {
       type: "number",
       displayName: "Scroll down threshold",
-      // defaultValueHint: 0.5,
+      defaultValueHint: 0.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,
+      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)"
     }
   },
-  isDefaultExport: true,
   defaultStyles: {
     width: "stretch",
     maxWidth: "100%"
   }
-});
+};
+function registerScrollRevealer(loader, customScrollRevealerMeta) {
+  if (loader) {
+    loader.registerComponent(ScrollRevealer, customScrollRevealerMeta != null ? customScrollRevealerMeta : scrollRevealerMeta);
+  } else {
+    registerComponent(ScrollRevealer, customScrollRevealerMeta != null ? customScrollRevealerMeta : scrollRevealerMeta);
+  }
+}
 
 var Video = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   return React__default.createElement("video", Object.assign({
     ref: ref
   }, props));
 });
-registerComponent(Video, {
-  name: "Video",
-  importPath: "@plasmicpkgs/plasmic-basic-components/Video",
+var videoMeta = {
+  name: "hostless-html-video",
+  importName: "Video",
+  displayName: "HTML Video",
+  importPath: "@plasmicpkgs/plasmic-basic-components",
   props: {
     src: {
       type: "string",
@@ -600,13 +611,11 @@ registerComponent(Video, {
       displayName: "Muted",
       description: "Whether audio should be muted"
     },
-    // TODO enable this once image is a type
-    // poster: {
-    //   type: "image",
-    //   displayName: "Poster (placeholder) image",
-    //   description:
-    //     "Image to show while video is downloading",
-    // },
+    poster: {
+      type: "imageUrl",
+      displayName: "Poster (placeholder) image",
+      description: "Image to show while video is downloading"
+    },
     preload: {
       type: "choice",
       options: ["none", "metadata", "auto"],
@@ -614,13 +623,19 @@ registerComponent(Video, {
       description: "Whether to preload nothing, metadata only, or the full video"
     }
   },
-  isDefaultExport: true,
   defaultStyles: {
     height: "hug",
     width: "640px",
     maxWidth: "100%"
   }
-});
+};
+function registerVideo(loader, customVideoMeta) {
+  if (loader) {
+    loader.registerComponent(Video, customVideoMeta != null ? customVideoMeta : videoMeta);
+  } else {
+    registerComponent(Video, customVideoMeta != null ? customVideoMeta : videoMeta);
+  }
+}
 
 exports.DataContext = DataContext;
 exports.DataProvider = DataProvider;
@@ -629,14 +644,32 @@ exports.DynamicCollectionGrid = DynamicCollectionGrid;
 exports.DynamicElement = DynamicElement;
 exports.DynamicImage = DynamicImage;
 exports.DynamicText = DynamicText;
-exports.Embed = Embed;
 exports.Iframe = Iframe;
 exports.ScrollRevealer = ScrollRevealer;
 exports.Video = Video;
 exports.applySelector = applySelector;
+exports.dataProviderMeta = dataProviderMeta;
+exports.dynamicCollectionGridMeta = dynamicCollectionGridMeta;
 exports.dynamicCollectionGridProps = dynamicCollectionGridProps;
+exports.dynamicCollectionMeta = dynamicCollectionMeta;
 exports.dynamicCollectionProps = dynamicCollectionProps;
+exports.dynamicElementMeta = dynamicElementMeta;
+exports.dynamicImageMeta = dynamicImageMeta;
+exports.dynamicTextMeta = dynamicTextMeta;
+exports.iframeMeta = iframeMeta;
+exports.registerDataProvider = registerDataProvider;
+exports.registerDynamicCollection = registerDynamicCollection;
+exports.registerDynamicCollectionGrid = registerDynamicCollectionGrid;
+exports.registerDynamicElement = registerDynamicElement;
+exports.registerDynamicImage = registerDynamicImage;
+exports.registerDynamicText = registerDynamicText;
+exports.registerIframe = registerIframe;
+exports.registerScrollRevealer = registerScrollRevealer;
+exports.registerVideo = registerVideo;
+exports.scrollRevealerMeta = scrollRevealerMeta;
 exports.useDataEnv = useDataEnv;
+exports.useDirectionalIntersection = useDirectionalIntersection;
 exports.useSelector = useSelector;
 exports.useSelectors = useSelectors;
+exports.videoMeta = videoMeta;
 //# sourceMappingURL=plasmic-basic-components.cjs.development.js.map