@builder.io/sdk-svelte 0.1.3 → 0.1.5

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

@@ -17,32 +17,43 @@ import builderContext from "../../context/builder.context.js";
 import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
 import { checkIsDefined } from "../../helpers/nullable.js";
 import { getInteractionPropertiesForEvent } from "../../functions/track/interaction.js";
+import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 export let content;
 export let data;
 export let canTrack;
 export let locale;
-export let context;
 export let customComponents;
 export let model;
+export let context;
 export let apiKey;
 export let includeRefs;
-setContext(builderContext.key, {
-    get content() {
-        return useContent();
-    },
-    get state() {
-        return contentState();
-    },
-    get context() {
-        return contextContext;
-    },
-    get apiKey() {
-        return apiKey;
-    },
-    get registeredComponents() {
-        return allRegisteredComponents;
-    },
-});
+function mergeNewContent(newContent) {
+    useContent = {
+        ...useContent,
+        ...newContent,
+        data: {
+            ...useContent?.data,
+            ...newContent?.data,
+        },
+        meta: {
+            ...useContent?.meta,
+            ...newContent?.meta,
+            breakpoints: newContent?.meta?.breakpoints || useContent?.meta?.breakpoints,
+        },
+    };
+}
+function setBreakpoints(breakpoints) {
+    useContent = {
+        ...useContent,
+        meta: {
+            ...useContent?.meta,
+            breakpoints,
+        },
+    };
+}
+function setContextState(newState) {
+    contentState = newState;
+}
 function processMessage(event) {
     const { data } = event;
     if (data) {
@@ -50,10 +61,12 @@ function processMessage(event) {
             case "builder.configureSdk": {
                 const messageContent = data.data;
                 const { breakpoints, contentId } = messageContent;
-                if (!contentId || contentId !== useContent?.()?.id) {
+                if (!contentId || contentId !== useContent?.id) {
                     return;
                 }
-                useBreakpoints = breakpoints;
+                if (breakpoints) {
+                    setBreakpoints(breakpoints);
+                }
                 forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 break;
             }
@@ -65,7 +78,7 @@ function processMessage(event) {
                     messageContent.modelName;
                 const contentData = messageContent.data;
                 if (key === model) {
-                    overrideContent = contentData;
+                    mergeNewContent(contentData);
                     forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
                 }
                 break;
@@ -79,19 +92,19 @@ function processMessage(event) {
 }
 function evaluateJsCode() {
     // run any dynamic JS code attached to content
-    const jsCode = useContent?.()?.data?.jsCode;
+    const jsCode = useContent?.data?.jsCode;
     if (jsCode) {
         evaluate({
             code: jsCode,
-            context: contextContext,
-            state: contentState(),
+            context: context || {},
+            state: contentState,
         });
     }
 }
 function onClick(event) {
-    if (useContent()) {
-        const variationId = useContent?.()?.testVariationId;
-        const contentId = useContent?.()?.id;
+    if (useContent) {
+        const variationId = useContent?.testVariationId;
+        const contentId = useContent?.id;
         _track({
             type: "click",
             canTrack: canTrackToUse,
@@ -109,26 +122,26 @@ function onClick(event) {
 function evalExpression(expression) {
     return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
         code: group,
-        context: contextContext,
-        state: contentState(),
+        context: context || {},
+        state: contentState,
     }));
 }
 function handleRequest({ url, key }) {
     fetch(url)
         .then((response) => response.json())
         .then((json) => {
-        const newOverrideState = {
-            ...overrideState,
+        const newState = {
+            ...contentState,
             [key]: json,
         };
-        overrideState = newOverrideState;
+        setContextState(newState);
     })
         .catch((err) => {
         console.log("error fetching dynamic data", url, err);
     });
 }
 function runHttpRequests() {
-    const requests = useContent?.()?.data?.httpRequests ?? {};
+    const requests = useContent?.data?.httpRequests ?? {};
     Object.entries(requests).forEach(([key, url]) => {
         if (url && (!httpReqsData[key] || isEditing())) {
             const evaluatedUrl = evalExpression(url);
@@ -143,7 +156,7 @@ function emitStateUpdate() {
     if (isEditing()) {
         window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
             detail: {
-                state: contentState(),
+                state: contentState,
                 ref: {
                     name: model,
                 },
@@ -151,52 +164,24 @@ function emitStateUpdate() {
         }));
     }
 }
-$: useContent = () => {
-    if (!content && !overrideContent) {
-        return undefined;
-    }
-    return {
-        ...content,
-        ...overrideContent,
-        data: {
-            ...content?.data,
-            ...data,
-            ...overrideContent?.data,
-        },
-        meta: {
-            ...content?.meta,
-            ...overrideContent?.meta,
-            breakpoints: useBreakpoints ||
-                overrideContent?.meta?.breakpoints ||
-                content?.meta?.breakpoints,
-        },
-    };
-};
-$: contentState = () => {
-    return {
-        ...content?.data?.state,
-        ...data,
-        ...(locale
-            ? {
-                locale: locale,
-            }
-            : {}),
-        ...overrideState,
-    };
-};
 $: shouldRenderContentStyles = () => {
-    return Boolean((useContent?.()?.data?.cssCode ||
-        useContent?.()?.data?.customFonts?.length) &&
+    return Boolean((useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
         TARGET !== "reactNative");
 };
 let elementRef;
 let forceReRenderCount = 0;
 let overrideContent = null;
+let useContent = getContentInitialValue({
+    content: content,
+    data: data,
+});
 let update = 0;
-let useBreakpoints = null;
 let canTrackToUse = checkIsDefined(canTrack) ? canTrack : true;
-let overrideState = {};
-let contextContext = context || {};
+let contentState = getContextStateInitialValue({
+    content: content,
+    data: data,
+    locale: locale,
+});
 let allRegisteredComponents = [
     ...getDefaultRegisteredComponents(),
     // While this `components` object is deprecated, we must maintain support for it.
@@ -239,9 +224,9 @@ onMount(() => {
             window.addEventListener("message", processMessage);
             window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
         }
-        if (useContent()) {
-            const variationId = useContent?.()?.testVariationId;
-            const contentId = useContent?.()?.id;
+        if (useContent) {
+            const variationId = useContent?.testVariationId;
+            const contentId = useContent?.id;
             _track({
                 type: "impression",
                 canTrack: canTrackToUse,
@@ -272,7 +257,7 @@ onMount(() => {
                     apiKey: apiKey,
                 }).then((content) => {
                     if (content) {
-                        overrideContent = content;
+                        mergeNewContent(content);
                     }
                 });
             }
@@ -285,15 +270,35 @@ onMount(() => {
 function onUpdateFn_0() {
     evaluateJsCode();
 }
-$: onUpdateFn_0(...[useContent?.()?.data?.jsCode, contentState()]);
+$: onUpdateFn_0(...[useContent?.data?.jsCode, contentState]);
 function onUpdateFn_1() {
     runHttpRequests();
 }
-$: onUpdateFn_1(...[useContent?.()?.data?.httpRequests]);
+$: onUpdateFn_1(...[useContent?.data?.httpRequests]);
 function onUpdateFn_2() {
     emitStateUpdate();
 }
-$: onUpdateFn_2(...[contentState()]);
+$: onUpdateFn_2(...[contentState]);
+setContext(builderContext.key, {
+    get content() {
+        return useContent;
+    },
+    get state() {
+        return contentState;
+    },
+    get setState() {
+        return setContextState;
+    },
+    get context() {
+        return context || {};
+    },
+    get apiKey() {
+        return apiKey;
+    },
+    get registeredComponents() {
+        return allRegisteredComponents;
+    },
+});
 onDestroy(() => {
     if (isBrowser()) {
         window.removeEventListener("message", processMessage);
@@ -302,24 +307,22 @@ onDestroy(() => {
 });
 </script>
 
-{#if useContent()}
+{#if useContent}
   <div
     bind:this={elementRef}
     on:click={(event) => {
       onClick(event);
     }}
-    builder-content-id={useContent?.()?.id}
+    builder-content-id={useContent?.id}
     builder-model={model}
   >
     {#if shouldRenderContentStyles()}
       <RenderContentStyles
-        cssCode={useContent?.()?.data?.cssCode}
-        customFonts={useContent?.()?.data?.customFonts}
+        contentId={useContent?.id}
+        cssCode={useContent?.data?.cssCode}
+        customFonts={useContent?.data?.customFonts}
       />
     {/if}
-    <RenderBlocks
-      blocks={useContent?.()?.data?.blocks}
-      key={forceReRenderCount}
-    />
+    <RenderBlocks blocks={useContent?.data?.blocks} key={forceReRenderCount} />
   </div>
 {/if}

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

@@ -1,29 +1,14 @@
 import { SvelteComponentTyped } from "svelte";
-import type { BuilderRenderContext, RegisteredComponent } from "../../context/types.js";
-import type { BuilderContent } from "../../types/builder-content.js";
-import type { Nullable } from "../../types/typescript.js";
-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;
-};
+import type { RenderContentProps } from "./render-content.types.js";
 declare const __propDef: {
     props: {
         content: RenderContentProps["content"];
         data: RenderContentProps["data"];
         canTrack: RenderContentProps["canTrack"];
         locale: RenderContentProps["locale"];
-        context: RenderContentProps["context"];
         customComponents: RenderContentProps["customComponents"];
         model: RenderContentProps["model"];
+        context: RenderContentProps["context"];
         apiKey: RenderContentProps["apiKey"];
         includeRefs: RenderContentProps["includeRefs"];
     };

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/components/render-inlined-styles.svelte

@@ -12,7 +12,7 @@ $: tag = () => {
 };
 </script>
 
-{#if TARGET === "svelte"}
+{#if TARGET === "svelte" || TARGET === "qwik"}
   {@html injectedStyleScript()}
 {:else}
   <svelte:element this={tag()}>{styles}</svelte:element>

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.3",
+  "version": "0.1.5",
   "type": "module",
   "files": [
     "package",

package/src/blocks/button/button.svelte

@@ -19,14 +19,14 @@
     });
     return validAttr;
   };
-  const setAttrs = (node, attrs) => {
+  const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
     attrKeys.map(setup);
     return {
-      update(attrs) {
+      update(attrs = {}) {
         const attrKeys = Object.keys(attrs);
         attrKeys.map(teardown);
         attrKeys.map(setup);

package/src/blocks/form/form.svelte

@@ -75,14 +75,14 @@
     });
     return validAttr;
   };
-  const setAttrs = (node, attrs) => {
+  const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
     attrKeys.map(setup);
     return {
-      update(attrs) {
+      update(attrs = {}) {
         const attrKeys = Object.keys(attrs);
         attrKeys.map(teardown);
         attrKeys.map(setup);

package/src/blocks/img/img.svelte

@@ -32,14 +32,14 @@
     });
     return validAttr;
   };
-  const setAttrs = (node, attrs) => {
+  const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
     const teardown = (attr) =>
       node.removeEventListener(attr.substr(3), attrs[attr]);
     attrKeys.map(setup);
     return {
-      update(attrs) {
+      update(attrs = {}) {
         const attrKeys = Object.keys(attrs);
         attrKeys.map(teardown);
         attrKeys.map(setup);