@builder.io/sdk-svelte 0.0.4 → 0.0.6

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

@@ -0,0 +1,360 @@
+<script context="module" lang="ts">
+  import type {
+    BuilderRenderContext,
+    BuilderRenderState,
+    RegisteredComponent,
+    RegisteredComponents,
+  } from "../../context/types.js";
+
+  import type { BuilderContent } from "../../types/builder-content.js";
+
+  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 { 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 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()) {
+      const variationId = useContent?.()?.testVariationId;
+      const contentId = useContent?.()?.id;
+      _track({
+        type: "click",
+        canTrack: canTrackToUse(),
+        contentId,
+        apiKey: apiKey,
+        variationId: variationId !== contentId ? variationId : undefined,
+      });
+    }
+  }
+  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()) {
+        const variationId = useContent?.()?.testVariationId;
+        const contentId = useContent?.()?.id;
+        _track({
+          type: "impression",
+          canTrack: canTrackToUse(),
+          contentId,
+          apiKey: apiKey,
+          variationId: variationId !== contentId ? variationId : undefined,
+        });
+      }
+
+      // 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}
+    builder-model={model}
+  >
+    {#if shouldRenderContentStyles()}
+      <RenderContentStyles
+        cssCode={useContent?.()?.data?.cssCode}
+        customFonts={useContent?.()?.data?.customFonts}
+      />
+    {/if}
+    <RenderBlocks
+      blocks={markMutable(useContent?.()?.data?.blocks)}
+      key={forceReRenderCount}
+    />
+  </div>
+{/if}

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

@@ -0,0 +1,26 @@
+<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/src/constants/builder-registered-components.ts

@@ -0,0 +1,42 @@
+import { default as Button } from '../blocks/button/button.svelte';
+import { componentInfo as buttonComponentInfo } from '../blocks/button/component-info.js';
+import { default as Columns } from '../blocks/columns/columns.svelte';
+import { componentInfo as columnsComponentInfo } from '../blocks/columns/component-info.js';
+import { componentInfo as fragmentComponentInfo } from '../blocks/fragment/component-info.js';
+import { default as Fragment } from '../blocks/fragment/fragment.svelte';
+import { componentInfo as imageComponentInfo } from '../blocks/image/component-info.js';
+import { default as Image } from '../blocks/image/image.svelte';
+import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
+import { default as Section } from '../blocks/section/section.svelte';
+import { componentInfo as symbolComponentInfo } from '../blocks/symbol/component-info.js';
+import { default as Symbol } from '../blocks/symbol/symbol.svelte';
+import { componentInfo as textComponentInfo } from '../blocks/text/component-info.js';
+import { default as Text } from '../blocks/text/text.svelte';
+import { componentInfo as videoComponentInfo } from '../blocks/video/component-info.js';
+import { default as Video } from '../blocks/video/video.svelte';
+import type { RegisteredComponent } from '../context/types.js';
+import { componentInfo as embedComponentInfo } from '../blocks/embed/component-info.js';
+import { default as embed } from '../blocks/embed/embed.svelte';
+import { default as Img } from '../blocks/img/img.svelte';
+import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.js';
+import { default as customCode } from '../blocks/custom-code/custom-code.svelte';
+import { componentInfo as customCodeInfo } from '../blocks/custom-code/component-info.js';
+
+/**
+ * Returns a list of all registered components.
+ * NOTE: This needs to be a function to work around ESM circular dependencies.
+ */
+export const getDefaultRegisteredComponents: () => RegisteredComponent[] =
+  () => [
+    { component: Columns, ...columnsComponentInfo },
+    { component: Image, ...imageComponentInfo },
+    { component: Img, ...imgComponentInfo },
+    { 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/constants/device-sizes.ts

@@ -0,0 +1,28 @@
+export type SizeName = 'large' | 'medium' | 'small';
+
+interface Size {
+  min: number;
+  default: number;
+  max: number;
+}
+
+const SIZES: Record<SizeName, Size> = {
+  small: {
+    min: 320,
+    default: 321,
+    max: 640,
+  },
+  medium: {
+    min: 641,
+    default: 642,
+    max: 991,
+  },
+  large: {
+    min: 990,
+    default: 991,
+    max: 1200,
+  },
+};
+
+export const getMaxWidthQueryForSize = (size: SizeName) =>
+  `@media (max-width: ${SIZES[size].max}px)`;

package/src/constants/target.ts

@@ -0,0 +1,2 @@
+/** This file should be overriden for each framework. Ideally this would be implemented in Mitosis.  */
+export const TARGET = 'svelte';

package/src/context/builder.context.ts

@@ -0,0 +1,13 @@
+const key = Symbol();
+
+export default {
+  Builder: {
+    content: null,
+    context: {},
+    state: {},
+    apiKey: null,
+    registeredComponents: {},
+    inheritedStyles: {},
+  },
+  key,
+};

package/src/context/types.ts

@@ -0,0 +1,23 @@
+import type { BuilderContent } from '../types/builder-content.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Dictionary, Nullable } from '../types/typescript.js';
+
+export type RegisteredComponent = ComponentInfo & {
+  component: any;
+};
+
+export type RegisteredComponents = Dictionary<RegisteredComponent>;
+
+export type BuilderRenderState = Record<string, unknown>;
+
+export type BuilderRenderContext = Record<string, unknown>;
+
+export interface BuilderContextInterface {
+  content: Nullable<BuilderContent>;
+  context: BuilderRenderContext;
+  state: BuilderRenderState;
+  apiKey: string | null;
+  registeredComponents: RegisteredComponents;
+  // Used to recursively store all CSS coming from a parent that would apply to a Text block
+  inheritedStyles: Record<string, unknown>;
+}

package/src/functions/camel-to-kebab-case.ts

@@ -0,0 +1,2 @@
+export const camelToKebabCase = (string: string) =>
+  string.replace(/([a-z0-9]|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();

package/src/functions/evaluate.ts

@@ -0,0 +1,52 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import { isBrowser } from './is-browser.js';
+import { isEditing } from './is-editing.js';
+
+export function evaluate({
+  code,
+  context,
+  state,
+  event,
+}: {
+  code: string;
+  event?: Event;
+} & Pick<BuilderContextInterface, 'state' | 'context'>): any {
+  if (code === '') {
+    console.warn('Skipping evaluation of empty code block.');
+    return;
+  }
+
+  const builder = {
+    isEditing: isEditing(),
+    isBrowser: isBrowser(),
+    isServer: !isBrowser(),
+  };
+
+  // Be able to handle simple expressions like "state.foo" or "1 + 1"
+  // as well as full blocks like "var foo = "bar"; return foo"
+  const useReturn = !(
+    code.includes(';') ||
+    code.includes(' return ') ||
+    code.trim().startsWith('return ')
+  );
+
+  const useCode = useReturn ? `return (${code});` : code;
+
+  try {
+    return new Function(
+      'builder',
+      'Builder' /* <- legacy */,
+      'state',
+      'context',
+      'event',
+      useCode
+    )(builder, builder, state, context, event);
+  } catch (e) {
+    console.warn(
+      'Builder custom code error: \n While Evaluating: \n ',
+      useCode,
+      '\n',
+      (e as any).message || e
+    );
+  }
+}

package/src/functions/event-handler-name.ts

@@ -0,0 +1,6 @@
+function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export const getEventHandlerName = (key: string) =>
+  `on${capitalizeFirstLetter(key)}`;

package/src/functions/extract-text-styles.ts

@@ -0,0 +1,39 @@
+const TEXT_STYLE_KEYS = [
+  'color',
+  'whiteSpace',
+  'direction',
+  'hyphens',
+  'overflowWrap',
+];
+
+/**
+ * Check if the key represent a CSS style property that applies to text
+ * See MDN docs for refrence of what properties apply to text.
+ * https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Fundamentals#summary
+ */
+const isTextStyle = (key: string) => {
+  return (
+    TEXT_STYLE_KEYS.includes(key) ||
+    key.startsWith('font') ||
+    key.startsWith('text') ||
+    key.startsWith('letter') ||
+    key.startsWith('line') ||
+    key.startsWith('word') ||
+    key.startsWith('writing')
+  );
+};
+
+/**
+ * Extract styles that apply to text from a style object.
+ */
+export const extractTextStyles = (styles: Partial<CSSStyleDeclaration>) => {
+  const textStyles: Partial<CSSStyleDeclaration> = {};
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  Object.entries(styles).forEach(([key, value]: [any, any]) => {
+    if (isTextStyle(key)) {
+      textStyles[key] = value;
+    }
+  });
+
+  return textStyles;
+};

package/src/functions/fast-clone.ts

@@ -0,0 +1,5 @@
+/**
+ * We need to serialize values to a string in case there are Proxy values, as is the case with SolidJS etc.
+ */
+export const fastClone = <T extends object>(obj: T): T =>
+  JSON.parse(JSON.stringify(obj));

package/src/functions/get-block-actions-handler.ts

@@ -0,0 +1,19 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { evaluate } from './evaluate.js';
+
+export function crateEventHandler(
+  value: string,
+  options: { block: BuilderBlock } & Pick<
+    BuilderContextInterface,
+    'state' | 'context'
+  >
+): (event: Event) => any {
+  return (event: Event) =>
+    evaluate({
+      code: value,
+      context: options.context,
+      state: options.state,
+      event,
+    });
+}

package/src/functions/get-block-actions.ts

@@ -0,0 +1,25 @@
+import type { BuilderContextInterface } from '../context/types.js';
+import type { BuilderBlock } from '../types/builder-block.js';
+import { getEventHandlerName } from './event-handler-name.js';
+import { crateEventHandler } from './get-block-actions-handler.js';
+
+type Actions = { [index: string]: (event: Event) => any };
+
+export function getBlockActions(
+  options: {
+    block: BuilderBlock;
+  } & Pick<BuilderContextInterface, 'state' | 'context'>
+): Actions {
+  const obj: Actions = {};
+  const optionActions = options.block.actions ?? {};
+
+  for (const key in optionActions) {
+    // eslint-disable-next-line no-prototype-builtins
+    if (!optionActions.hasOwnProperty(key)) {
+      continue;
+    }
+    const value = optionActions[key];
+    obj[getEventHandlerName(key)] = crateEventHandler(value, options);
+  }
+  return obj;
+}

package/src/functions/get-block-component-options.ts

@@ -0,0 +1,12 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+
+export function getBlockComponentOptions(block: BuilderBlock) {
+  return {
+    ...block.component?.options,
+    ...(block as any).options,
+    /**
+     * Our built-in components frequently make use of the block, so we provide all of it under `builderBlock`
+     */
+    builderBlock: block,
+  };
+}

package/src/functions/get-block-properties.ts

@@ -0,0 +1,11 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+
+export function getBlockProperties(block: BuilderBlock) {
+  return {
+    ...block.properties,
+    'builder-id': block.id,
+    class: [block.id, 'builder-block', block.class, block.properties?.class]
+      .filter(Boolean)
+      .join(' '),
+  };
+}

package/src/functions/get-block-tag.ts

@@ -0,0 +1,7 @@
+import type { BuilderBlock } from '../types/builder-block.js';
+
+export type TagName = string;
+
+export function getBlockTag(block: BuilderBlock): TagName {
+  return block.tagName || 'div';
+}