@builder.io/sdk-svelte 0.1.4 → 0.1.5

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

@@ -1,6 +1,5 @@
 <script context="module" lang="ts">
   import type {
-    BuilderRenderContext,
     BuilderRenderState,
     RegisteredComponent,
     RegisteredComponents,
@@ -13,31 +12,10 @@
 
   import type { Nullable } from "../../types/typescript.js";
 
-  export type RenderContentProps = {
-    content?: Nullable<BuilderContent>;
-    model?: string;
-    data?: {
-      [key: string]: any;
-    };
-    context?: BuilderRenderContext;
-    apiKey: string;
-    customComponents?: RegisteredComponent[];
-    canTrack?: boolean;
-    locale?: string;
-    includeRefs?: boolean;
-  };
-
-  interface BuilderComponentStateChange {
-    state: BuilderRenderState;
-    ref: {
-      name?: string;
-      props?: {
-        builderBlock?: {
-          id?: string;
-        };
-      };
-    };
-  }
+  import type {
+    RenderContentProps,
+    BuilderComponentStateChange,
+  } from "./render-content.types.js";
 </script>
 
 <script lang="ts">
@@ -65,35 +43,49 @@
   } 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: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
   export let canTrack: RenderContentProps["canTrack"];
   export let locale: RenderContentProps["locale"];
-  export let context: RenderContentProps["context"];
   export let customComponents: RenderContentProps["customComponents"];
   export let model: RenderContentProps["model"];
+  export let context: RenderContentProps["context"];
   export let apiKey: RenderContentProps["apiKey"];
   export let includeRefs: RenderContentProps["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) {
@@ -101,10 +93,12 @@
         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;
         }
@@ -117,7 +111,7 @@
             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.
           }
 
@@ -132,19 +126,19 @@
   }
   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,
@@ -163,8 +157,8 @@
     return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
       evaluate({
         code: group,
-        context: contextContext,
-        state: contentState(),
+        context: context || {},
+        state: contentState,
       })
     );
   }
@@ -172,18 +166,18 @@
     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);
@@ -199,7 +193,7 @@
       window.dispatchEvent(
         new CustomEvent("builder:component:stateChange", {
           detail: {
-            state: contentState(),
+            state: contentState,
             ref: {
               name: model,
             },
@@ -208,44 +202,9 @@
       );
     }
   }
-  $: 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) &&
+      (useContent?.data?.cssCode || useContent?.data?.customFonts?.length) &&
         TARGET !== "reactNative"
     );
   };
@@ -254,11 +213,17 @@
 
   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.
@@ -312,9 +277,9 @@
           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,
@@ -348,7 +313,7 @@
             apiKey: apiKey,
           }).then((content) => {
             if (content) {
-              overrideContent = content;
+              mergeNewContent(content);
             }
           });
         }
@@ -362,15 +327,36 @@
   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()) {
@@ -383,24 +369,22 @@
   });
 </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/src/components/render-content/render-content.types.ts

@@ -0,0 +1,31 @@
+import type {
+  BuilderRenderContext,
+  RegisteredComponent,
+  BuilderRenderState,
+} from '../../context/types';
+import type { BuilderContent } from '../../types/builder-content';
+import type { Nullable } from '../../types/typescript';
+
+export 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/src/constants/builder-registered-components.ts

@@ -28,15 +28,15 @@ import { componentInfo as customCodeInfo } from '../blocks/custom-code/component
  */
 export const getDefaultRegisteredComponents: () => RegisteredComponent[] =
   () => [
+    { 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/src/context/builder.context.ts

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

package/src/context/types.ts

@@ -16,6 +16,7 @@ export interface BuilderContextInterface {
   content: Nullable<BuilderContent>;
   context: BuilderRenderContext;
   state: BuilderRenderState;
+  setState?: (state: BuilderRenderState) => void;
   apiKey: string | null;
   registeredComponents: RegisteredComponents;
   // Used to recursively store all CSS coming from a parent that would apply to a Text block

package/src/index-helpers/blocks-exports.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/src/types/builder-content.ts

@@ -1,9 +1,7 @@
 import type { BuilderBlock } from './builder-block.js';
+import type { Input } from './components.js';
 import type { Nullable } from './typescript.js';
 
-// TODO
-type Input = any;
-
 export interface Breakpoints {
   small: number;
   medium: number;

package/src/types/input.ts

@@ -0,0 +1,120 @@
+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 */
+  // onChange?: Function | string;
+  /** @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;
+}