@builder.io/sdk-svelte 0.0.1-8 → 0.0.1

package/package/components/render-content/render-content.lite.tsx

@@ -0,0 +1,356 @@
+<script context="module" lang="ts">
+  import type { Dictionary, 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;
+  };
+
+  interface BuilderComponentStateChange {
+    state: BuilderRenderState;
+    ref: {
+      name?: string;
+      props?: {
+        builderBlock?: {
+          id?: string;
+        };
+      };
+    };
+  }
+</script>
+
+<script lang="ts">
+  import {
+    afterUpdate,
+    getContext,
+    onDestroy,
+    onMount,
+    setContext,
+  } from "svelte";
+
+  import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+  import { TARGET } from "../../constants/target.js";
+  import BuilderContext from "../../context/builder.context.js";
+  import {
+    BuilderRenderContext,
+    BuilderRenderState,
+    RegisteredComponent,
+    RegisteredComponents,
+  } from "../../context/types.js";
+  import { evaluate } from "../../functions/evaluate.js";
+  import { getContent } from "../../functions/get-content/index.js";
+  import { getFetch } from "../../functions/get-fetch.js";
+  import { isBrowser } from "../../functions/is-browser.js";
+  import { isEditing } from "../../functions/is-editing.js";
+  import { isPreviewing } from "../../functions/is-previewing.js";
+  import {
+    components,
+    createRegisterComponentMessage,
+  } from "../../functions/register-component.js";
+  import { track } from "../../functions/track.js";
+  import { BuilderContent } from "../../types/builder-content.js";
+  import RenderBlocks from "../render-blocks.svelte";
+  import RenderContentStyles from "./components/render-styles.svelte";
+  import {
+    registerInsertMenu,
+    setupBrowserForEditing,
+  } from "../../scripts/init-editing.js";
+  import { markMutable } from "../../functions/mark-mutable.js";
+
+  export let content: RenderContentProps["content"];
+  export let data: RenderContentProps["data"];
+  export let canTrack: RenderContentProps["canTrack"];
+  export let context: RenderContentProps["context"];
+  export let customComponents: RenderContentProps["customComponents"];
+  export let model: RenderContentProps["model"];
+  export let apiKey: RenderContentProps["apiKey"];
+
+  setContext(BuilderContext.key, {
+    get content() {
+      return useContent();
+    },
+    get state() {
+      return contentState();
+    },
+    get context() {
+      return contextContext();
+    },
+    get apiKey() {
+      return apiKey;
+    },
+    get registeredComponents() {
+      return allRegisteredComponents();
+    },
+  });
+
+  function processMessage(event) {
+    const { data } = event;
+
+    if (data) {
+      switch (data.type) {
+        case "builder.contentUpdate": {
+          const messageContent = data.data;
+          const key =
+            messageContent.key ||
+            messageContent.alias ||
+            messageContent.entry ||
+            messageContent.modelName;
+          const contentData = messageContent.data;
+
+          if (key === model) {
+            overrideContent = contentData;
+            forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+          }
+
+          break;
+        }
+
+        case "builder.patchUpdates": {
+          // TODO
+          break;
+        }
+      }
+    }
+  }
+
+  function evaluateJsCode() {
+    // run any dynamic JS code attached to content
+    const jsCode = useContent?.()?.data?.jsCode;
+
+    if (jsCode) {
+      evaluate({
+        code: jsCode,
+        context: contextContext(),
+        state: contentState(),
+      });
+    }
+  }
+
+  function onClick(_event) {
+    if (useContent()) {
+      track({
+        type: "click",
+        canTrack: canTrackToUse(),
+        contentId: useContent?.()?.id,
+        orgId: apiKey,
+      });
+    }
+  }
+
+  function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) =>
+      evaluate({
+        code: group,
+        context: contextContext(),
+        state: contentState(),
+      })
+    );
+  }
+
+  function handleRequest({ url, key }) {
+    getFetch()
+      .then((fetch) => fetch(url))
+      .then((response) => response.json())
+      .then((json) => {
+        const newOverrideState = { ...overrideState, [key]: json };
+        overrideState = newOverrideState;
+      })
+      .catch((err) => {
+        console.log("error fetching dynamic data", url, err);
+      });
+  }
+
+  function runHttpRequests() {
+    const requests = useContent?.()?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url]) => {
+      if (url && (!httpReqsData()[key] || isEditing())) {
+        const evaluatedUrl = evalExpression(url);
+        handleRequest({
+          url: evaluatedUrl,
+          key,
+        });
+      }
+    });
+  }
+
+  function emitStateUpdate() {
+    if (isEditing()) {
+      window.dispatchEvent(
+        new CustomEvent("builder:component:stateChange", {
+          detail: {
+            state: contentState(),
+            ref: {
+              name: model,
+            },
+          },
+        })
+      );
+    }
+  }
+  $: useContent = () => {
+    if (!content && !overrideContent) {
+      return undefined;
+    }
+
+    const mergedContent = {
+      ...content,
+      ...overrideContent,
+      data: { ...content?.data, ...data, ...overrideContent?.data },
+    };
+    return mergedContent;
+  };
+
+  $: canTrackToUse = () => {
+    return canTrack || true;
+  };
+
+  $: contentState = () => {
+    return { ...content?.data?.state, ...data, ...overrideState };
+  };
+
+  $: contextContext = () => {
+    return context || {};
+  };
+
+  $: allRegisteredComponents = () => {
+    const allComponentsArray = [
+      ...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components,
+      ...(customComponents || []),
+    ];
+    const allComponents = allComponentsArray.reduce(
+      (acc, curr) => ({ ...acc, [curr.name]: curr }),
+      {}
+    );
+    return allComponents;
+  };
+
+  $: httpReqsData = () => {
+    return {};
+  };
+
+  $: shouldRenderContentStyles = () => {
+    return Boolean(
+      (useContent?.()?.data?.cssCode ||
+        useContent?.()?.data?.customFonts?.length) &&
+        TARGET !== "reactNative"
+    );
+  };
+
+  let elementRef;
+
+  let forceReRenderCount = 0;
+  let overrideContent = null;
+  let update = 0;
+  let overrideState = {};
+
+  onMount(() => {
+    if (isBrowser()) {
+      if (isEditing()) {
+        forceReRenderCount = forceReRenderCount + 1; // QWIK-REPLACE: _useMutableProps
+
+        registerInsertMenu();
+        setupBrowserForEditing();
+        Object.values(allRegisteredComponents()).forEach(
+          (registeredComponent) => {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
+        );
+        window.addEventListener("message", processMessage);
+        window.addEventListener(
+          "builder:component:stateChangeListenerActivated",
+          emitStateUpdate
+        );
+      }
+
+      if (useContent()) {
+        track({
+          type: "impression",
+          canTrack: canTrackToUse(),
+          contentId: useContent?.()?.id,
+          orgId: apiKey,
+        });
+      } // override normal content in preview mode
+
+      if (isPreviewing()) {
+        const searchParams = new URL(location.href).searchParams;
+
+        if (model && searchParams.get("builder.preview") === model) {
+          const previewApiKey =
+            searchParams.get("apiKey") || searchParams.get("builder.space");
+
+          if (previewApiKey) {
+            getContent({
+              model: model,
+              apiKey: previewApiKey,
+            }).then((content) => {
+              if (content) {
+                overrideContent = content;
+              }
+            });
+          }
+        }
+      }
+
+      evaluateJsCode();
+      runHttpRequests();
+      emitStateUpdate();
+    }
+  });
+
+  function onUpdateFn_0() {
+    evaluateJsCode();
+  }
+  $: onUpdateFn_0(...[useContent?.()?.data?.jsCode]);
+  function onUpdateFn_1() {
+    runHttpRequests();
+  }
+  $: onUpdateFn_1(...[useContent?.()?.data?.httpRequests]);
+  function onUpdateFn_2() {
+    emitStateUpdate();
+  }
+  $: onUpdateFn_2(...[contentState()]);
+
+  onDestroy(() => {
+    if (isBrowser()) {
+      window.removeEventListener("message", processMessage);
+      window.removeEventListener(
+        "builder:component:stateChangeListenerActivated",
+        emitStateUpdate
+      );
+    }
+  });
+</script>
+
+{#if useContent()}
+  <div
+    bind:this={elementRef}
+    on:click={(event) => {
+      onClick(event);
+    }}
+    builder-content-id={useContent?.()?.id}
+  >
+    {#if shouldRenderContentStyles()}
+      <RenderContentStyles
+        cssCode={useContent?.()?.data?.cssCode}
+        customFonts={useContent?.()?.data?.customFonts}
+      />
+    {/if}
+    <RenderBlocks
+      blocks={markMutable(useContent?.()?.data?.blocks)}
+      key={forceReRenderCount}
+    />
+  </div>
+{/if}

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

@@ -0,0 +1,260 @@
+<script context="module"></script>
+
+<script>import { onDestroy, onMount, setContext, } from "svelte";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
+import { TARGET } from "../../constants/target.js";
+import BuilderContext from "../../context/builder.context.js";
+import "../../context/types.js";
+import { evaluate } from "../../functions/evaluate.js";
+import { getContent } from "../../functions/get-content/index.js";
+import { getFetch } from "../../functions/get-fetch.js";
+import { isBrowser } from "../../functions/is-browser.js";
+import { isEditing } from "../../functions/is-editing.js";
+import { isPreviewing } from "../../functions/is-previewing.js";
+import { components, createRegisterComponentMessage, } from "../../functions/register-component.js";
+import { track } from "../../functions/track.js";
+import "../../types/builder-content.js";
+import RenderBlocks from "../render-blocks.svelte";
+import RenderContentStyles from "./components/render-styles.svelte";
+import { registerInsertMenu, setupBrowserForEditing, } from "../../scripts/init-editing.js";
+import { markMutable } from "../../functions/mark-mutable.js";
+export let content;
+export let data;
+export let canTrack;
+export let context;
+export let customComponents;
+export let model;
+export let apiKey;
+setContext(BuilderContext.key, {
+    get content() {
+        return useContent();
+    },
+    get state() {
+        return contentState();
+    },
+    get context() {
+        return contextContext();
+    },
+    get apiKey() {
+        return apiKey;
+    },
+    get registeredComponents() {
+        return allRegisteredComponents();
+    },
+});
+function processMessage(event) {
+    const { data } = event;
+    if (data) {
+        switch (data.type) {
+            case "builder.contentUpdate": {
+                const messageContent = data.data;
+                const key = messageContent.key ||
+                    messageContent.alias ||
+                    messageContent.entry ||
+                    messageContent.modelName;
+                const contentData = messageContent.data;
+                if (key === model) {
+                    overrideContent = contentData;
+                    forceReRenderCount = forceReRenderCount + 1; // This is a hack to force Qwik to re-render.
+                }
+                break;
+            }
+            case "builder.patchUpdates": {
+                // TODO
+                break;
+            }
+        }
+    }
+}
+function evaluateJsCode() {
+    // run any dynamic JS code attached to content
+    const jsCode = useContent?.()?.data?.jsCode;
+    if (jsCode) {
+        evaluate({
+            code: jsCode,
+            context: contextContext(),
+            state: contentState(),
+        });
+    }
+}
+function onClick(_event) {
+    if (useContent()) {
+        track({
+            type: "click",
+            canTrack: canTrackToUse(),
+            contentId: useContent?.()?.id,
+            orgId: apiKey,
+        });
+    }
+}
+function evalExpression(expression) {
+    return expression.replace(/{{([^}]+)}}/g, (_match, group) => evaluate({
+        code: group,
+        context: contextContext(),
+        state: contentState(),
+    }));
+}
+function handleRequest({ url, key }) {
+    getFetch()
+        .then((fetch) => fetch(url))
+        .then((response) => response.json())
+        .then((json) => {
+        const newOverrideState = { ...overrideState, [key]: json };
+        overrideState = newOverrideState;
+    })
+        .catch((err) => {
+        console.log("error fetching dynamic data", url, err);
+    });
+}
+function runHttpRequests() {
+    const requests = useContent?.()?.data?.httpRequests ?? {};
+    Object.entries(requests).forEach(([key, url]) => {
+        if (url && (!httpReqsData()[key] || isEditing())) {
+            const evaluatedUrl = evalExpression(url);
+            handleRequest({
+                url: evaluatedUrl,
+                key,
+            });
+        }
+    });
+}
+function emitStateUpdate() {
+    if (isEditing()) {
+        window.dispatchEvent(new CustomEvent("builder:component:stateChange", {
+            detail: {
+                state: contentState(),
+                ref: {
+                    name: model,
+                },
+            },
+        }));
+    }
+}
+$: useContent = () => {
+    if (!content && !overrideContent) {
+        return undefined;
+    }
+    const mergedContent = {
+        ...content,
+        ...overrideContent,
+        data: { ...content?.data, ...data, ...overrideContent?.data },
+    };
+    return mergedContent;
+};
+$: canTrackToUse = () => {
+    return canTrack || true;
+};
+$: contentState = () => {
+    return { ...content?.data?.state, ...data, ...overrideState };
+};
+$: contextContext = () => {
+    return context || {};
+};
+$: allRegisteredComponents = () => {
+    const allComponentsArray = [
+        ...getDefaultRegisteredComponents(),
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...(customComponents || []),
+    ];
+    const allComponents = allComponentsArray.reduce((acc, curr) => ({ ...acc, [curr.name]: curr }), {});
+    return allComponents;
+};
+$: httpReqsData = () => {
+    return {};
+};
+$: shouldRenderContentStyles = () => {
+    return Boolean((useContent?.()?.data?.cssCode ||
+        useContent?.()?.data?.customFonts?.length) &&
+        TARGET !== "reactNative");
+};
+let elementRef;
+let forceReRenderCount = 0;
+let overrideContent = null;
+let update = 0;
+let overrideState = {};
+onMount(() => {
+    if (isBrowser()) {
+        if (isEditing()) {
+            forceReRenderCount = forceReRenderCount + 1; // QWIK-REPLACE: _useMutableProps
+            registerInsertMenu();
+            setupBrowserForEditing();
+            Object.values(allRegisteredComponents()).forEach((registeredComponent) => {
+                const message = createRegisterComponentMessage(registeredComponent);
+                window.parent?.postMessage(message, "*");
+            });
+            window.addEventListener("message", processMessage);
+            window.addEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+        }
+        if (useContent()) {
+            track({
+                type: "impression",
+                canTrack: canTrackToUse(),
+                contentId: useContent?.()?.id,
+                orgId: apiKey,
+            });
+        } // override normal content in preview mode
+        if (isPreviewing()) {
+            const searchParams = new URL(location.href).searchParams;
+            if (model && searchParams.get("builder.preview") === model) {
+                const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
+                if (previewApiKey) {
+                    getContent({
+                        model: model,
+                        apiKey: previewApiKey,
+                    }).then((content) => {
+                        if (content) {
+                            overrideContent = content;
+                        }
+                    });
+                }
+            }
+        }
+        evaluateJsCode();
+        runHttpRequests();
+        emitStateUpdate();
+    }
+});
+function onUpdateFn_0() {
+    evaluateJsCode();
+}
+$: onUpdateFn_0(...[useContent?.()?.data?.jsCode]);
+function onUpdateFn_1() {
+    runHttpRequests();
+}
+$: onUpdateFn_1(...[useContent?.()?.data?.httpRequests]);
+function onUpdateFn_2() {
+    emitStateUpdate();
+}
+$: onUpdateFn_2(...[contentState()]);
+onDestroy(() => {
+    if (isBrowser()) {
+        window.removeEventListener("message", processMessage);
+        window.removeEventListener("builder:component:stateChangeListenerActivated", emitStateUpdate);
+    }
+});
+</script>
+
+{#if useContent()}
+  <div
+    bind:this={elementRef}
+    on:click={(event) => {
+      onClick(event);
+    }}
+    builder-content-id={useContent?.()?.id}
+  >
+    {#if shouldRenderContentStyles()}
+      <RenderContentStyles
+        cssCode={useContent?.()?.data?.cssCode}
+        customFonts={useContent?.()?.data?.customFonts}
+      />
+    {/if}
+    <RenderBlocks
+      blocks={markMutable(useContent?.()?.data?.blocks)}
+      key={forceReRenderCount}
+    />
+  </div>
+{/if}

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

@@ -0,0 +1,36 @@
+import { SvelteComponentTyped } from "svelte";
+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;
+};
+import { BuilderRenderContext, RegisteredComponent } from "../../context/types.js";
+import { BuilderContent } from "../../types/builder-content.js";
+declare const __propDef: {
+    props: {
+        content: RenderContentProps["content"];
+        data: RenderContentProps["data"];
+        canTrack: RenderContentProps["canTrack"];
+        context: RenderContentProps["context"];
+        customComponents: RenderContentProps["customComponents"];
+        model: RenderContentProps["model"];
+        apiKey: RenderContentProps["apiKey"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type RenderContentProps = typeof __propDef.props;
+export declare type RenderContentEvents = typeof __propDef.events;
+export declare type RenderContentSlots = typeof __propDef.slots;
+export default class RenderContent extends SvelteComponentTyped<RenderContentProps, RenderContentEvents, RenderContentSlots> {
+}
+export {};

package/package/components/render-inlined-styles.lite.tsx

@@ -0,0 +1,27 @@
+<script context="module" lang="ts">
+  interface Props {
+    styles: string;
+  }
+</script>
+
+<script lang="ts">
+  import { TARGET } from "../constants/target.js";
+
+  export let styles: Props["styles"];
+
+  $: injectedStyleScript = () => {
+    return `<${tagName()}>${styles}</${tagName()}>`;
+  };
+
+  $: tagName = () => {
+    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+    return "sty" + "le";
+  };
+</script>
+
+{#if TARGET === "svelte"}
+  {@html injectedStyleScript()}
+{:else}
+  <svelte:element this={tagName()}>{styles}</svelte:element>
+{/if}

package/package/components/render-inlined-styles.svelte

@@ -0,0 +1,19 @@
+<script context="module"></script>
+
+<script>import { TARGET } from "../constants/target.js";
+export let styles;
+$: injectedStyleScript = () => {
+    return `<${tagName()}>${styles}</${tagName()}>`;
+};
+$: tagName = () => {
+    // NOTE: we have to obfusctate the name of the tag due to a limitation in the svelte-preprocessor plugin.
+    // https://github.com/sveltejs/vite-plugin-svelte/issues/315#issuecomment-1109000027
+    return "sty" + "le";
+};
+</script>
+
+{#if TARGET === "svelte"}
+  {@html injectedStyleScript()}
+{:else}
+  <svelte:element this={tagName()}>{styles}</svelte:element>
+{/if}