@builder.io/sdk-svelte 0.0.3 → 0.0.4

package/package/helpers/localStorage.d.ts

@@ -1,9 +1,8 @@
+import type { CanTrack } from '../types/can-track.js';
 export declare const getLocalStorageItem: ({ key, canTrack, }: {
     key: string;
-    canTrack: boolean;
-}) => string | null | undefined;
+} & CanTrack) => string | null | undefined;
 export declare const setLocalStorageItem: ({ key, canTrack, value, }: {
     key: string;
     value: string;
-    canTrack: boolean;
-}) => void;
+} & CanTrack) => void;

package/package/helpers/sessionId.d.ts

@@ -1,7 +1,6 @@
-import { CanTrack } from '../types/can-track.js';
-export declare const getSessionId: ({ canTrack }: CanTrack) => string | undefined;
+import type { CanTrack } from '../types/can-track.js';
+export declare const getSessionId: ({ canTrack }: CanTrack) => Promise<string | undefined>;
 export declare const createSessionId: () => string;
 export declare const setSessionId: ({ id, canTrack, }: {
     id: string;
-    canTrack: boolean;
-}) => undefined;
+} & CanTrack) => Promise<undefined>;

package/package/helpers/sessionId.js

@@ -1,13 +1,15 @@
-import '../types/can-track.js';
 import { getCookie, setCookie } from './cookie.js';
 import { checkIsDefined } from './nullable.js';
 import { uuid } from './uuid.js';
 const SESSION_LOCAL_STORAGE_KEY = 'builderSessionId';
-export const getSessionId = ({ canTrack }) => {
+export const getSessionId = async ({ canTrack }) => {
     if (!canTrack) {
         return undefined;
     }
-    const sessionId = getCookie({ name: SESSION_LOCAL_STORAGE_KEY, canTrack });
+    const sessionId = await getCookie({
+        name: SESSION_LOCAL_STORAGE_KEY,
+        canTrack,
+    });
     if (checkIsDefined(sessionId)) {
         return sessionId;
     }

package/package/helpers/visitorId.d.ts

@@ -1,8 +1,6 @@
-export declare const getVisitorId: ({ canTrack }: {
-    canTrack: boolean;
-}) => string | undefined;
+import type { CanTrack } from '../types/can-track.js';
+export declare const getVisitorId: ({ canTrack }: CanTrack) => string | undefined;
 export declare const createVisitorId: () => string;
 export declare const setVisitorId: ({ id, canTrack, }: {
     id: string;
-    canTrack: boolean;
-}) => void;
+} & CanTrack) => void;

package/package/scripts/init-editing.js

@@ -31,52 +31,56 @@ export const setupBrowserForEditing = () => {
                 // type: process.env.SDK_TYPE,
                 // version: process.env.SDK_VERSION,
                 supportsPatchUpdates: false,
+                // Supports builder-model="..." attribute which is needed to
+                // scope our '+ add block' button styling
+                supportsAddBlockScoping: true,
             },
         }, '*');
         window.addEventListener('message', ({ data }) => {
-            if (data) {
-                switch (data.type) {
-                    case 'builder.evaluate': {
-                        const text = data.data.text;
-                        const args = data.data.arguments || [];
-                        const id = data.data.id;
-                        // tslint:disable-next-line:no-function-constructor-with-string-args
-                        const fn = new Function(text);
-                        let result;
-                        let error = null;
-                        try {
-                            // eslint-disable-next-line prefer-spread
-                            result = fn.apply(null, args);
-                        }
-                        catch (err) {
-                            error = err;
-                        }
-                        if (error) {
-                            window.parent?.postMessage({
-                                type: 'builder.evaluateError',
-                                data: { id, error: error.message },
-                            }, '*');
-                        }
-                        else {
-                            if (result && typeof result.then === 'function') {
-                                result
-                                    .then((finalResult) => {
-                                    window.parent?.postMessage({
-                                        type: 'builder.evaluateResult',
-                                        data: { id, result: finalResult },
-                                    }, '*');
-                                })
-                                    .catch(console.error);
-                            }
-                            else {
+            if (!data?.type) {
+                return;
+            }
+            switch (data.type) {
+                case 'builder.evaluate': {
+                    const text = data.data.text;
+                    const args = data.data.arguments || [];
+                    const id = data.data.id;
+                    // tslint:disable-next-line:no-function-constructor-with-string-args
+                    const fn = new Function(text);
+                    let result;
+                    let error = null;
+                    try {
+                        // eslint-disable-next-line prefer-spread
+                        result = fn.apply(null, args);
+                    }
+                    catch (err) {
+                        error = err;
+                    }
+                    if (error) {
+                        window.parent?.postMessage({
+                            type: 'builder.evaluateError',
+                            data: { id, error: error.message },
+                        }, '*');
+                    }
+                    else {
+                        if (result && typeof result.then === 'function') {
+                            result
+                                .then((finalResult) => {
                                 window.parent?.postMessage({
                                     type: 'builder.evaluateResult',
-                                    data: { result, id },
+                                    data: { id, result: finalResult },
                                 }, '*');
-                            }
+                            })
+                                .catch(console.error);
+                        }
+                        else {
+                            window.parent?.postMessage({
+                                type: 'builder.evaluateResult',
+                                data: { result, id },
+                            }, '*');
                         }
-                        break;
                     }
+                    break;
                 }
             }
         });

package/package/types/builder-content.d.ts

@@ -1,4 +1,4 @@
-import { BuilderBlock } from './builder-block.js';
+import type { BuilderBlock } from './builder-block.js';
 declare type Input = any;
 export interface BuilderContentVariation {
     data?: {

package/package/types/builder-content.js

@@ -1 +1 @@
-import './builder-block.js';
+export {};

package/package/types/targets.d.ts

@@ -1,3 +1,3 @@
 declare type MitosisTargets = import('@builder.io/mitosis').Target;
-export declare type Target = Extract<MitosisTargets, 'vue3' | 'vue2' | 'reactNative' | 'svelte'>;
+export declare type Target = Extract<MitosisTargets, 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik'>;
 export {};

package/package/types/typescript.d.ts

@@ -2,3 +2,4 @@ export declare type Nullable<T> = T | null | undefined;
 export declare type Dictionary<T> = {
     [key: string]: T;
 };
+export declare type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "type": "module",
   "files": [
     "package"
@@ -14,8 +14,12 @@
   },
   "main": "./package/index.js",
   "module": "./package/index.js",
-  "svelte": "./package/index.js",
+  "svelte": "./src/index.ts",
   "exports": {
+    "./src": {
+      "import": "./src/index.js",
+      "require": "./src/index.js"
+    },
     ".": {
       "import": "./package/index.js",
       "require": "./package/index.js"
@@ -26,7 +30,8 @@
     "release:patch": "yarn run build && npm version patch --no-git-tag-version && npm publish --access public",
     "release:dev": "yarn run build && npm version prerelease --no-git-tag-version && npm publish --tag dev --access public",
     "dev": "vite dev",
-    "build": "svelte-kit sync && svelte-package && rm package/package.json",
+    "build": "svelte-kit sync && svelte-package",
+    "build:watch": "svelte-kit sync && svelte-package --watch",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
   },

package/package/blocks/button/button.lite.tsx

@@ -1,36 +0,0 @@
-<script context="module" lang="ts">
-  export interface ButtonProps {
-    attributes?: any;
-    text?: string;
-    link?: string;
-    openLinkInNewTab?: boolean;
-  }
-</script>
-
-<script lang="ts">
-  export let attributes: ButtonProps["attributes"];
-  export let text: ButtonProps["text"];
-  export let link: ButtonProps["link"];
-  export let openLinkInNewTab: ButtonProps["openLinkInNewTab"];
-</script>
-
-{#if link}
-  <a
-    {...attributes}
-    role="button"
-    href={link}
-    target={openLinkInNewTab ? "_blank" : undefined}
-  >
-    {text}
-  </a>
-{:else}
-  <button {...attributes} class="button">
-    {text}
-  </button>
-{/if}
-
-<style>
-  .button {
-    all: unset;
-  }
-</style>

package/package/blocks/columns/columns.lite.tsx

@@ -1,139 +0,0 @@
-<script context="module" lang="ts">
-  type Column = {
-    blocks: any; // TODO: Implement this when support for dynamic CSS lands
-
-    width?: number;
-  };
-
-  type StackColumnsAt = "tablet" | "mobile" | "never";
-
-  export interface ColumnProps {
-    columns?: Column[];
-    builderBlock: BuilderBlock; // TODO: Implement this when support for dynamic CSS lands
-
-    space?: number; // TODO: Implement this when support for dynamic CSS lands
-
-    stackColumnsAt?: StackColumnsAt; // TODO: Implement this when support for dynamic CSS lands
-
-    reverseColumnsWhenStacked?: boolean;
-  }
-</script>
-
-<script lang="ts">
-  import RenderBlocks from "../../components/render-blocks.svelte";
-  import { BuilderBlock } from "../../types/builder-block";
-  import { markMutable } from "../../functions/mark-mutable";
-
-  export let space: ColumnProps["space"];
-  export let columns: ColumnProps["columns"];
-  export let stackColumnsAt: ColumnProps["stackColumnsAt"];
-  export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
-  export let builderBlock: ColumnProps["builderBlock"];
-
-  function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-      node.style[p] = v;
-    });
-  }
-
-  function getGutterSize() {
-    return typeof space === "number" ? space || 0 : 20;
-  }
-
-  function getColumns() {
-    return columns || [];
-  }
-
-  function getWidth(index) {
-    const columns = getColumns();
-    return columns[index]?.width || 100 / columns.length;
-  }
-
-  function getColumnCssWidth(index) {
-    const columns = getColumns();
-    const gutterSize = getGutterSize();
-    const subtractWidth = (gutterSize * (columns.length - 1)) / columns.length;
-    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-  }
-
-  function maybeApplyForTablet(prop) {
-    const _stackColumnsAt = stackColumnsAt || "tablet";
-
-    return _stackColumnsAt === "tablet" ? prop : "inherit";
-  }
-  $: columnsCssVars = () => {
-    const flexDir =
-      stackColumnsAt === "never"
-        ? "inherit"
-        : reverseColumnsWhenStacked
-        ? "column-reverse"
-        : "column";
-    return {
-      "--flex-dir": flexDir,
-      "--flex-dir-tablet": maybeApplyForTablet(flexDir),
-    };
-  };
-
-  $: columnCssVars = () => {
-    const width = "100%";
-    const marginLeft = "0";
-    return {
-      "--column-width": width,
-      "--column-margin-left": marginLeft,
-      "--column-width-tablet": maybeApplyForTablet(width),
-      "--column-margin-left-tablet": maybeApplyForTablet(marginLeft),
-    };
-  };
-</script>
-
-<div use:mitosis_styling={columnsCssVars()} class="builder-columns div">
-  {#each columns as column, index (index)}
-    <div
-      use:mitosis_styling={{
-        width: getColumnCssWidth(index),
-        marginLeft: `${index === 0 ? 0 : getGutterSize()}px`,
-        ...columnCssVars(),
-      }}
-      class="builder-column div-2"
-    >
-      <RenderBlocks
-        blocks={markMutable(column.blocks)}
-        path={`component.options.columns.${index}.blocks`}
-        parent={builderBlock.id}
-      />
-    </div>
-  {/each}
-</div>
-
-<style>
-  .div {
-    display: flex;
-    align-items: stretch;
-    line-height: normal;
-  }
-  @media (max-width: 991px) {
-    .div {
-      flex-direction: var(--flex-dir-tablet);
-    }
-  }
-  @media (max-width: 639px) {
-    .div {
-      flex-direction: var(--flex-dir);
-    }
-  }
-  .div-2 {
-    flex-grow: 1;
-  }
-  @media (max-width: 991px) {
-    .div-2 {
-      width: var(--column-width-tablet) !important;
-      margin-left: var(--column-margin-left-tablet) !important;
-    }
-  }
-  @media (max-width: 639px) {
-    .div-2 {
-      width: var(--column-width) !important;
-      margin-left: var(--column-margin-left) !important;
-    }
-  }
-</style>

package/package/blocks/custom-code/custom-code.lite.tsx

@@ -1,70 +0,0 @@
-<script context="module" lang="ts">
-  export interface CustomCodeProps {
-    code: string;
-    replaceNodes?: boolean;
-  }
-</script>
-
-<script lang="ts">
-  import { onMount } from "svelte";
-
-  export let replaceNodes: CustomCodeProps["replaceNodes"];
-  export let code: CustomCodeProps["code"];
-
-  function findAndRunScripts() {
-    // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem && typeof window !== "undefined") {
-      const scripts = elem.getElementsByTagName("script");
-
-      for (let i = 0; i < scripts.length; i++) {
-        const script = scripts[i];
-
-        if (script.src) {
-          if (scriptsInserted.includes(script.src)) {
-            continue;
-          }
-
-          scriptsInserted.push(script.src);
-          const newScript = document.createElement("script");
-          newScript.async = true;
-          newScript.src = script.src;
-          document.head.appendChild(newScript);
-        } else if (
-          !script.type ||
-          [
-            "text/javascript",
-            "application/javascript",
-            "application/ecmascript",
-          ].includes(script.type)
-        ) {
-          if (scriptsRun.includes(script.innerText)) {
-            continue;
-          }
-
-          try {
-            scriptsRun.push(script.innerText);
-            new Function(script.innerText)();
-          } catch (error) {
-            console.warn("`CustomCode`: Error running script:", error);
-          }
-        }
-      }
-    }
-  }
-
-  let elem;
-
-  let scriptsInserted = [];
-  let scriptsRun = [];
-
-  onMount(() => {
-    findAndRunScripts();
-  });
-</script>
-
-<div
-  bind:this={elem}
-  class={"builder-custom-code" + (replaceNodes ? " replace-nodes" : "")}
->
-  {@html code}
-</div>

package/package/blocks/embed/embed.lite.tsx

@@ -1,52 +0,0 @@
-<script context="module" lang="ts">
-  export interface EmbedProps {
-    content: string;
-  }
-</script>
-
-<script lang="ts">
-  import { afterUpdate } from "svelte";
-
-  import { isJsScript } from "./helpers.js";
-
-  export let content: EmbedProps["content"];
-
-  function findAndRunScripts() {
-    const scripts = elem.getElementsByTagName("script");
-
-    for (let i = 0; i < scripts.length; i++) {
-      const script = scripts[i];
-
-      if (script.src && !scriptsInserted.includes(script.src)) {
-        scriptsInserted.push(script.src);
-        const newScript = document.createElement("script");
-        newScript.async = true;
-        newScript.src = script.src;
-        document.head.appendChild(newScript);
-      } else if (isJsScript(script) && !scriptsRun.includes(script.innerText)) {
-        try {
-          scriptsRun.push(script.innerText);
-          new Function(script.innerText)();
-        } catch (error) {
-          console.warn("`Embed`: Error running script:", error);
-        }
-      }
-    }
-  }
-
-  let elem;
-
-  let scriptsInserted = [];
-  let scriptsRun = [];
-  let ranInitFn = false;
-
-  function onUpdateFn_0() {
-    if (elem && !ranInitFn) {
-      ranInitFn = true;
-      findAndRunScripts();
-    }
-  }
-  $: onUpdateFn_0(...[elem, ranInitFn]);
-</script>
-
-<div class="builder-embed" bind:this={elem}>{@html content}</div>