@builder.io/sdk-svelte 0.0.2 → 0.0.4

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

@@ -1,91 +0,0 @@
-<script context="module" lang="ts">
-  export type RenderBlockProps = {
-    blocks?: BuilderBlock[];
-    parent?: string;
-    path?: string;
-  };
-</script>
-
-<script lang="ts">
-  import { getContext, setContext } from "svelte";
-
-  import BuilderContext from "../context/builder.context.js";
-  import { isEditing } from "../functions/is-editing.js";
-  import { BuilderBlock } from "../types/builder-block.js";
-  import BlockStyles from "./render-block/block-styles.svelte";
-  import RenderBlock from "./render-block/render-block.svelte";
-
-  export let blocks: RenderBlockProps["blocks"];
-  export let parent: RenderBlockProps["parent"];
-  export let path: RenderBlockProps["path"];
-
-  let builderContext = getContext(BuilderContext.key);
-
-  function onClick() {
-    if (isEditing() && !blocks?.length) {
-      window.parent?.postMessage(
-        {
-          type: "builder.clickEmptyBlocks",
-          data: {
-            parentElementId: parent,
-            dataPath: path,
-          },
-        },
-        "*"
-      );
-    }
-  }
-
-  function onMouseEnter() {
-    if (isEditing() && !blocks?.length) {
-      window.parent?.postMessage(
-        {
-          type: "builder.hoverEmptyBlocks",
-          data: {
-            parentElementId: parent,
-            dataPath: path,
-          },
-        },
-        "*"
-      );
-    }
-  }
-  $: className = () => {
-    return "builder-blocks" + (!blocks?.length ? " no-blocks" : "");
-  };
-</script>
-
-<div
-  class={className() + " div"}
-  builder-path={path}
-  builder-parent-id={parent}
-  dataSet={{
-    class: className(),
-  }}
-  on:click={(event) => {
-    onClick();
-  }}
-  on:mouseenter={(event) => {
-    onMouseEnter();
-  }}
->
-  {#if blocks}
-    {#each blocks as block ("render-block-" + block.id)}
-      <RenderBlock {block} context={builderContext} />
-    {/each}
-  {/if}
-
-  {#if blocks}
-    {#each blocks as block ("block-style-" + block.id)}
-      <BlockStyles {block} context={builderContext} />
-    {/each}
-  {/if}
-</div>
-
-<style>
-  .div {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-  }
-</style>

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

@@ -1,86 +0,0 @@
-<script context="module" lang="ts">
-  interface CustomFont {
-    family?: string;
-    kind?: string;
-    fileUrl?: string;
-    files?: {
-      [key: string]: string;
-    };
-  }
-
-  interface Props {
-    cssCode?: string;
-    customFonts?: CustomFont[];
-  }
-</script>
-
-<script lang="ts">
-  import RenderInlinedStyles from "../../render-inlined-styles.svelte";
-
-  export let cssCode: Props["cssCode"];
-  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 (!builder.allowCustomFonts) {
-    //   return '';
-    // }
-    // TODO: separate internal data from external
-    return customFonts?.map((font) => getCssFromFont(font))?.join(" ") || "";
-  }
-  $: injectedStyles = () => {
-    return `
-${cssCode || ""}
-${getFontCss({
-  customFonts: customFonts,
-})}`;
-  };
-</script>
-
-<RenderInlinedStyles styles={injectedStyles()} />

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

@@ -1,356 +0,0 @@
-<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-inlined-styles.lite.tsx

@@ -1,27 +0,0 @@
-<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/functions/convert-style-object.d.ts

@@ -1 +0,0 @@
-export declare const convertStyleObject: (obj?: Partial<CSSStyleDeclaration>) => Partial<CSSStyleDeclaration> | undefined;

package/package/functions/convert-style-object.js

@@ -1,3 +0,0 @@
-export const convertStyleObject = (obj) => {
-    return obj;
-};

package/package/functions/get-block-styles.d.ts

@@ -1,2 +0,0 @@
-import { BuilderBlock } from '../types/builder-block.js';
-export declare function getBlockStyles(block: BuilderBlock): any;

package/package/functions/get-block-styles.js

@@ -1,21 +0,0 @@
-import { getMaxWidthQueryForSize } from '../constants/device-sizes.js';
-import '../types/builder-block.js';
-import { convertStyleObject } from './convert-style-object.js';
-import { sanitizeBlockStyles } from './sanitize-styles.js';
-export function getBlockStyles(block) {
-    const styles = {
-        ...convertStyleObject(block.responsiveStyles?.large),
-        /**
-         * TO-DO: remove?
-         */
-        ...block.styles,
-    };
-    if (block.responsiveStyles?.medium) {
-        styles[getMaxWidthQueryForSize('medium')] = convertStyleObject(block.responsiveStyles?.medium);
-    }
-    if (block.responsiveStyles?.small) {
-        styles[getMaxWidthQueryForSize('small')] = convertStyleObject(block.responsiveStyles?.small);
-    }
-    sanitizeBlockStyles(styles);
-    return styles;
-}

package/package/functions/sanitize-styles.d.ts

@@ -1,4 +0,0 @@
-/**
- * No-op function, sanitize on a per-framework basis by overriding.
- */
-export declare const sanitizeBlockStyles: (_styles: Partial<CSSStyleDeclaration>) => void;

package/package/functions/sanitize-styles.js

@@ -1,6 +0,0 @@
-/**
- * No-op function, sanitize on a per-framework basis by overriding.
- */
-export const sanitizeBlockStyles = (_styles
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-) => { };