@builder.io/sdk-svelte 0.1.4 → 0.1.5

package/package/components/render-content/render-content.types.d.ts

@@ -0,0 +1,27 @@
+import type { BuilderRenderContext, RegisteredComponent, BuilderRenderState } from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+export declare type RenderContentProps = {
+    content?: Nullable<BuilderContent>;
+    model?: string;
+    data?: {
+        [key: string]: any;
+    };
+    context?: BuilderRenderContext;
+    apiKey: string;
+    customComponents?: RegisteredComponent[];
+    canTrack?: boolean;
+    locale?: string;
+    includeRefs?: boolean;
+};
+export interface BuilderComponentStateChange {
+    state: BuilderRenderState;
+    ref: {
+        name?: string;
+        props?: {
+            builderBlock?: {
+                id?: string;
+            };
+        };
+    };
+}

package/package/components/render-content/render-content.types.js

@@ -0,0 +1 @@
+export {};

package/package/constants/builder-registered-components.js

@@ -25,15 +25,15 @@ import { componentInfo as customCodeInfo } from '../blocks/custom-code/component
  * NOTE: This needs to be a function to work around ESM circular dependencies.
  */
 export const getDefaultRegisteredComponents = () => [
+    { component: Button, ...buttonComponentInfo },
     { component: Columns, ...columnsComponentInfo },
+    { component: customCode, ...customCodeInfo },
+    { component: embed, ...embedComponentInfo },
+    { component: Fragment, ...fragmentComponentInfo },
     { component: Image, ...imageComponentInfo },
     { component: Img, ...imgComponentInfo },
+    { component: Section, ...sectionComponentInfo },
+    { component: Symbol, ...symbolComponentInfo },
     { component: Text, ...textComponentInfo },
     { component: Video, ...videoComponentInfo },
-    { component: Symbol, ...symbolComponentInfo },
-    { component: Button, ...buttonComponentInfo },
-    { component: Section, ...sectionComponentInfo },
-    { component: Fragment, ...fragmentComponentInfo },
-    { component: embed, ...embedComponentInfo },
-    { component: customCode, ...customCodeInfo },
 ];

package/package/context/builder.context.d.ts

@@ -3,6 +3,7 @@ declare const _default: {
         content: null;
         context: {};
         state: {};
+        setState(): void;
         apiKey: null;
         registeredComponents: {};
         inheritedStyles: {};

package/package/context/builder.context.js

@@ -4,6 +4,7 @@ export default {
         content: null,
         context: {},
         state: {},
+        setState() { },
         apiKey: null,
         registeredComponents: {},
         inheritedStyles: {},

package/package/context/types.d.ts

@@ -11,6 +11,7 @@ export interface BuilderContextInterface {
     content: Nullable<BuilderContent>;
     context: BuilderRenderContext;
     state: BuilderRenderState;
+    setState?: (state: BuilderRenderState) => void;
     apiKey: string | null;
     registeredComponents: RegisteredComponents;
     inheritedStyles: Record<string, unknown>;

package/package/index-helpers/blocks-exports.d.ts

@@ -1,10 +1,10 @@
+export { default as Button } from '../blocks/button/button.svelte';
 export { default as Columns } from '../blocks/columns/columns.svelte';
+export { default as Fragment } from '../blocks/fragment/fragment.svelte';
 export { default as Image } from '../blocks/image/image.svelte';
+export { default as RenderBlocks } from '../components/render-blocks.svelte';
+export { default as RenderContent } from '../components/render-content/render-content.svelte';
+export { default as Section } from '../blocks/section/section.svelte';
+export { default as Symbol } from '../blocks/symbol/symbol.svelte';
 export { default as Text } from '../blocks/text/text.svelte';
 export { default as Video } from '../blocks/video/video.svelte';
-export { default as Symbol } from '../blocks/symbol/symbol.svelte';
-export { default as Button } from '../blocks/button/button.svelte';
-export { default as Section } from '../blocks/section/section.svelte';
-export { default as Fragment } from '../blocks/fragment/fragment.svelte';
-export { default as RenderContent } from '../components/render-content/render-content.svelte';
-export { default as RenderBlocks } from '../components/render-blocks.svelte';

package/package/index-helpers/blocks-exports.js

@@ -1,10 +1,10 @@
+export { default as Button } from '../blocks/button/button.svelte';
 export { default as Columns } from '../blocks/columns/columns.svelte';
+export { default as Fragment } from '../blocks/fragment/fragment.svelte';
 export { default as Image } from '../blocks/image/image.svelte';
+export { default as RenderBlocks } from '../components/render-blocks.svelte';
+export { default as RenderContent } from '../components/render-content/render-content.svelte';
+export { default as Section } from '../blocks/section/section.svelte';
+export { default as Symbol } from '../blocks/symbol/symbol.svelte';
 export { default as Text } from '../blocks/text/text.svelte';
 export { default as Video } from '../blocks/video/video.svelte';
-export { default as Symbol } from '../blocks/symbol/symbol.svelte';
-export { default as Button } from '../blocks/button/button.svelte';
-export { default as Section } from '../blocks/section/section.svelte';
-export { default as Fragment } from '../blocks/fragment/fragment.svelte';
-export { default as RenderContent } from '../components/render-content/render-content.svelte';
-export { default as RenderBlocks } from '../components/render-blocks.svelte';

package/package/types/builder-content.d.ts

@@ -1,6 +1,6 @@
 import type { BuilderBlock } from './builder-block.js';
+import type { Input } from './components.js';
 import type { Nullable } from './typescript.js';
-declare type Input = any;
 export interface Breakpoints {
     small: number;
     medium: number;
@@ -44,4 +44,3 @@ export interface BuilderContent extends BuilderContentVariation {
     testVariationId?: string;
     testVariationName?: string;
 }
-export {};

package/package/types/input.d.ts

@@ -0,0 +1,117 @@
+export interface Input {
+    /** This is the name of the component prop this input represents */
+    name: string;
+    /** A friendlier name to show in the UI if the component prop name is not ideal for end users */
+    friendlyName?: string;
+    /** @hidden @deprecated */
+    description?: string;
+    /** A default value to use */
+    defaultValue?: any;
+    /**
+     * The type of input to use, such as 'text'
+     *
+     * See all available inputs [here](https://www.builder.io/c/docs/custom-react-components#input-types)
+     * and you can create your own custom input types and associated editor UIs with [plugins](https://www.builder.io/c/docs/extending/plugins)
+     */
+    type: string;
+    /** Is this input mandatory or not */
+    required?: boolean;
+    /** @hidden */
+    autoFocus?: boolean;
+    subFields?: Input[];
+    /**
+     * Additional text to render in the UI to give guidance on how to use this
+     *
+     * @example
+     * ```js
+     * helperText: 'Be sure to use a proper URL, starting with "https://"'
+     * 111
+     */
+    helperText?: string;
+    /** @hidden */
+    allowedFileTypes?: string[];
+    /** @hidden */
+    imageHeight?: number;
+    /** @hidden */
+    imageWidth?: number;
+    /** @hidden */
+    mediaHeight?: number;
+    /** @hidden */
+    mediaWidth?: number;
+    /** @hidden */
+    hideFromUI?: boolean;
+    /** @hidden */
+    modelId?: string;
+    /**
+     * Number field type validation maximum accepted input
+     */
+    max?: number;
+    /**
+     * Number field type validation minimum accepted input
+     */
+    min?: number;
+    /**
+     * Number field type step size when using arrows
+     */
+    step?: number;
+    /**
+     * Set this to `true` to show the editor for this input when
+     * children of this component are selected. This is useful for things
+     * like Tabs, such that users may not always select the Tabs component
+     * directly but will still be looking for how to add additional tabs
+     */
+    broadcast?: boolean;
+    /**
+     * Set this to `true` to show the editor for this input when
+     * group locked parents of this component are selected. This is useful
+     * to bubble up important inputs for locked groups, like text and images
+     */
+    bubble?: boolean;
+    /**
+     * Set this to `true` if you want this component to be translatable
+     */
+    localized?: boolean;
+    /** @hidden */
+    options?: {
+        [key: string]: any;
+    };
+    /**
+     * For "text" input type, specifying an enum will show a dropdown of options instead
+     */
+    enum?: string[] | {
+        label: string;
+        value: any;
+        helperText?: string;
+    }[];
+    /** Regex field validation for all string types (text, longText, html, url, etc) */
+    regex?: {
+        /** pattern to test, like "^\/[a-z]$" */
+        pattern: string;
+        /** flags for the RegExp constructor, e.g. "gi"  */
+        options?: string;
+        /**
+         * Friendly message to display to end-users if the regex fails, e.g.
+         * "You must use a relative url starting with '/...' "
+         */
+        message: string;
+    };
+    /**
+     * Set this to `true` to put this under the "show more" section of
+     * the options editor. Useful for things that are more advanced
+     * or more rarely used and don't need to be too prominent
+     */
+    advanced?: boolean;
+    /** @hidden */
+    /** @hidden */
+    code?: boolean;
+    /** @hidden */
+    richText?: boolean;
+    /** @hidden */
+    showIf?: ((options: Map<string, any>) => boolean) | string;
+    /** @hidden */
+    copyOnAdd?: boolean;
+    /**
+     * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
+     */
+    model?: string;
+}

package/package/types/input.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "type": "module",
   "files": [
     "package",

package/src/components/render-block/render-block.helpers.ts

@@ -40,7 +40,7 @@ export const getComponent = ({
   context: BuilderContextInterface;
 }) => {
   const componentName = getProcessedBlock({
-    block: block,
+    block,
     state: context.state,
     context: context.context,
     shouldEvaluateBindings: false,

package/src/components/render-block/render-block.svelte

@@ -1,5 +1,8 @@
 <script context="module" lang="ts">
-  import type { BuilderContextInterface } from "../../context/types.js";
+  import type {
+    BuilderContextInterface,
+    BuilderRenderState,
+  } from "../../context/types.js";
 
   import type { BuilderBlock } from "../../types/builder-block.js";
 
@@ -63,10 +66,29 @@
           shouldEvaluateBindings: true,
         });
   };
+  $: proxyState = () => {
+    if (typeof Proxy === "undefined") {
+      console.error(
+        "no Proxy available in this environment, cannot proxy state."
+      );
+      return context.state;
+    }
+    const useState = new Proxy(context.state, {
+      set: (obj, prop, value) => {
+        // set the value on the state object, so that the event handler instantly gets the update.
+        obj[prop] = value;
+
+        // set the value in the context, so that the rest of the app gets the update.
+        context.setState?.(obj);
+        return true;
+      },
+    });
+    return useState;
+  };
   $: actions = () => {
     return getBlockActions({
       block: useBlock(),
-      state: context.state,
+      state: proxyState(),
       context: context.context,
     });
   };
@@ -137,6 +159,7 @@
       state: context.state,
       content: context.content,
       context: context.context,
+      setState: context.setState,
       registeredComponents: context.registeredComponents,
       inheritedStyles: getInheritedTextStyles(),
     };

package/src/components/render-block/render-component.svelte

@@ -5,9 +5,17 @@
 
   import type { Breakpoints } from "../../types/builder-content.js";
 
+  type ComponentOptions = {
+    [index: string]: any;
+    customBreakpoints?: Breakpoints;
+    attributes?: {
+      [index: string]: any;
+    };
+  };
+
   export interface RenderComponentProps {
     componentRef: any;
-    componentOptions: any;
+    componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
     customBreakpoints?: Breakpoints;

package/src/components/render-block/render-repeated-block.svelte

@@ -31,6 +31,7 @@
   setContext(BuilderContext.key, {
     content: repeatContext.content,
     state: repeatContext.state,
+    setState: repeatContext.setState,
     context: repeatContext.context,
     apiKey: repeatContext.apiKey,
     registeredComponents: repeatContext.registeredComponents,

package/src/components/render-content/components/render-styles.helpers.ts

@@ -0,0 +1,79 @@
+export interface CustomFont {
+  family?: string;
+  kind?: string;
+  fileUrl?: string;
+  files?: {
+    [key: string]: string;
+  };
+}
+
+const getCssFromFont = (font: CustomFont) => {
+  // TODO: compute what font sizes are used and only load those.......
+  const family =
+    font.family +
+    (font.kind && !font.kind.includes('#') ? ', ' + font.kind : '');
+  const name = family.split(',')[0];
+  const url = font.fileUrl ?? font?.files?.regular;
+  let str = '';
+  if (url && family && name) {
+    str += `
+@font-face {
+font-family: "${family}";
+src: local("${name}"), url('${url}') format('woff2');
+font-display: fallback;
+font-weight: 400;
+}
+      `.trim();
+  }
+
+  if (font.files) {
+    for (const weight in font.files) {
+      const isNumber = String(Number(weight)) === weight;
+      if (!isNumber) {
+        continue;
+      }
+      // TODO: maybe limit number loaded
+      const weightUrl = font.files[weight];
+      if (weightUrl && weightUrl !== url) {
+        str += `
+@font-face {
+font-family: "${family}";
+src: url('${weightUrl}') format('woff2');
+font-display: fallback;
+font-weight: ${weight};
+}
+        `.trim();
+      }
+    }
+  }
+  return str;
+};
+
+export const getFontCss = ({ customFonts }: { customFonts?: CustomFont[] }) => {
+  // TODO: flag for this
+  // if (!this.builder.allowCustomFonts) {
+  //   return '';
+  // }
+  // TODO: separate internal data from external
+  return customFonts?.map((font) => getCssFromFont(font))?.join(' ') || '';
+};
+
+export const getCss = ({
+  cssCode,
+  contentId,
+}: {
+  cssCode?: string;
+  contentId?: string;
+}) => {
+  if (!cssCode) {
+    return '';
+  }
+  if (!contentId) {
+    return cssCode;
+  }
+
+  // Allow using `&` in custom CSS code like @emotion
+  // E.g. `& .foobar { ... }` to scope CSS
+  // TODO: handle if '&' is within a string like `content: "&"`
+  return cssCode?.replace(/&/g, `div[builder-content-id="${contentId}"]`) || '';
+};

package/src/components/render-content/components/render-styles.svelte

@@ -1,82 +1,31 @@
 <script context="module" lang="ts">
-  interface CustomFont {
-    family?: string;
-    kind?: string;
-    fileUrl?: string;
-    files?: {
-      [key: string]: string;
-    };
-  }
+  import type { CustomFont } from "./render-styles.helpers";
 
   interface Props {
     cssCode?: string;
     customFonts?: CustomFont[];
+    contentId?: string;
   }
 </script>
 
 <script lang="ts">
   import RenderInlinedStyles from "../../render-inlined-styles.svelte";
+  import { getCss } from "./render-styles.helpers";
+  import { getFontCss } from "./render-styles.helpers";
 
   export let cssCode: Props["cssCode"];
+  export let contentId: Props["contentId"];
   export let customFonts: Props["customFonts"];
 
-  function getCssFromFont(font) {
-    // TODO: compute what font sizes are used and only load those.......
-    const family =
-      font.family +
-      (font.kind && !font.kind.includes("#") ? ", " + font.kind : "");
-    const name = family.split(",")[0];
-    const url = font.fileUrl ?? font?.files?.regular;
-    let str = "";
-    if (url && family && name) {
-      str += `
-@font-face {
-  font-family: "${family}";
-  src: local("${name}"), url('${url}') format('woff2');
-  font-display: fallback;
-  font-weight: 400;
-}
-        `.trim();
-    }
-    if (font.files) {
-      for (const weight in font.files) {
-        const isNumber = String(Number(weight)) === weight;
-        if (!isNumber) {
-          continue;
-        }
-        // TODO: maybe limit number loaded
-        const weightUrl = font.files[weight];
-        if (weightUrl && weightUrl !== url) {
-          str += `
-@font-face {
-  font-family: "${family}";
-  src: url('${weightUrl}') format('woff2');
-  font-display: fallback;
-  font-weight: ${weight};
-}
-          `.trim();
-        }
-      }
-    }
-    return str;
-  }
-  function getFontCss({ customFonts }) {
-    // TODO: flag for this
-    // if (!this.builder.allowCustomFonts) {
-    //   return '';
-    // }
-    // TODO: separate internal data from external
-    return (
-      customFonts?.map((font) => this.getCssFromFont(font))?.join(" ") || ""
-    );
-  }
-  $: injectedStyles = () => {
-    return `
-${cssCode || ""}
+  let injectedStyles = `
+${getCss({
+  cssCode: cssCode,
+  contentId: contentId,
+})}
 ${getFontCss({
   customFonts: customFonts,
-})}`;
-  };
+})}
+`;
 </script>
 
-<RenderInlinedStyles styles={injectedStyles()} />
+<RenderInlinedStyles styles={injectedStyles} />

package/src/components/render-content/render-content.helpers.ts

@@ -0,0 +1,48 @@
+import type { BuilderRenderState } from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+import type { RenderContentProps } from './render-content.types';
+
+export const getContextStateInitialValue = ({
+  content,
+  data,
+  locale,
+}: Pick<RenderContentProps, 'content' | 'data' | 'locale'>) => {
+  const defaultValues: BuilderRenderState = {};
+
+  // set default values for content state inputs
+  content?.data?.inputs?.forEach((input) => {
+    if (
+      input.name &&
+      input.defaultValue !== undefined &&
+      content?.data?.state &&
+      content.data.state[input.name] === undefined
+    ) {
+      defaultValues[input.name] = input.defaultValue;
+    }
+  });
+
+  const stateToUse: BuilderRenderState = {
+    ...content?.data?.state,
+    ...data,
+    ...(locale ? { locale } : {}),
+  };
+
+  return { ...defaultValues, ...stateToUse };
+};
+
+export const getContentInitialValue = ({
+  content,
+  data,
+}: Pick<RenderContentProps, 'content' | 'data'>): Nullable<BuilderContent> => {
+  return !content
+    ? undefined
+    : {
+        ...content,
+        data: {
+          ...content?.data,
+          ...data,
+        },
+        meta: content?.meta,
+      };
+};