@builder.io/sdk-svelte 0.0.3 → 0.0.4

package/package/--package.json

@@ -0,0 +1,159 @@
+{
+  "name": "@builder.io/sdk-svelte",
+  "description": "Builder.io SDK for Svelte",
+  "version": "0.0.3",
+  "type": "module",
+  "files": [
+    "package"
+  ],
+  "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/svelte#readme",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BuilderIO/builder.git",
+    "directory": "packages/sdks/output/svelte"
+  },
+  "main": "./package/index.js",
+  "module": "./package/index.js",
+  "svelte": "./src/index.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./src": {
+      "import": "./src/index.js",
+      "require": "./src/index.js"
+    },
+    ".": {
+      "import": "./package/index.js",
+      "require": "./package/index.js"
+    },
+    "./blocks/BaseText.svelte": "./blocks/BaseText.svelte",
+    "./blocks/button/button.svelte": "./blocks/button/button.svelte",
+    "./blocks/button/component-info": "./blocks/button/component-info.js",
+    "./blocks/columns/columns.svelte": "./blocks/columns/columns.svelte",
+    "./blocks/columns/component-info": "./blocks/columns/component-info.js",
+    "./blocks/custom-code/component-info": "./blocks/custom-code/component-info.js",
+    "./blocks/custom-code/custom-code.svelte": "./blocks/custom-code/custom-code.svelte",
+    "./blocks/embed/component-info": "./blocks/embed/component-info.js",
+    "./blocks/embed/embed.svelte": "./blocks/embed/embed.svelte",
+    "./blocks/embed/helpers": "./blocks/embed/helpers.js",
+    "./blocks/form/component-info": "./blocks/form/component-info.js",
+    "./blocks/form/form.svelte": "./blocks/form/form.svelte",
+    "./blocks/fragment/component-info": "./blocks/fragment/component-info.js",
+    "./blocks/fragment/fragment.svelte": "./blocks/fragment/fragment.svelte",
+    "./blocks/image/component-info": "./blocks/image/component-info.js",
+    "./blocks/image/image.helpers": "./blocks/image/image.helpers.js",
+    "./blocks/image/image.svelte": "./blocks/image/image.svelte",
+    "./blocks/img/component-info": "./blocks/img/component-info.js",
+    "./blocks/img/img.svelte": "./blocks/img/img.svelte",
+    "./blocks/input/component-info": "./blocks/input/component-info.js",
+    "./blocks/input/input.svelte": "./blocks/input/input.svelte",
+    "./blocks/raw-text/component-info": "./blocks/raw-text/component-info.js",
+    "./blocks/raw-text/raw-text.svelte": "./blocks/raw-text/raw-text.svelte",
+    "./blocks/section/component-info": "./blocks/section/component-info.js",
+    "./blocks/section/section.svelte": "./blocks/section/section.svelte",
+    "./blocks/select/component-info": "./blocks/select/component-info.js",
+    "./blocks/select/select.svelte": "./blocks/select/select.svelte",
+    "./blocks/submit-button/component-info": "./blocks/submit-button/component-info.js",
+    "./blocks/submit-button/submit-button.svelte": "./blocks/submit-button/submit-button.svelte",
+    "./blocks/symbol/component-info": "./blocks/symbol/component-info.js",
+    "./blocks/symbol/symbol.svelte": "./blocks/symbol/symbol.svelte",
+    "./blocks/text/component-info": "./blocks/text/component-info.js",
+    "./blocks/text/text.svelte": "./blocks/text/text.svelte",
+    "./blocks/textarea/component-info": "./blocks/textarea/component-info.js",
+    "./blocks/textarea/textarea.svelte": "./blocks/textarea/textarea.svelte",
+    "./blocks/util": "./blocks/util.js",
+    "./blocks/video/component-info": "./blocks/video/component-info.js",
+    "./blocks/video/video.svelte": "./blocks/video/video.svelte",
+    "./components/render-block/block-styles.svelte": "./components/render-block/block-styles.svelte",
+    "./components/render-block/render-block.helpers": "./components/render-block/render-block.helpers.js",
+    "./components/render-block/render-block.svelte": "./components/render-block/render-block.svelte",
+    "./components/render-block/render-component-with-context.svelte": "./components/render-block/render-component-with-context.svelte",
+    "./components/render-block/render-component.svelte": "./components/render-block/render-component.svelte",
+    "./components/render-block/render-repeated-block.svelte": "./components/render-block/render-repeated-block.svelte",
+    "./components/render-block/types": "./components/render-block/types.js",
+    "./components/render-blocks.svelte": "./components/render-blocks.svelte",
+    "./components/render-content/components/render-styles.svelte": "./components/render-content/components/render-styles.svelte",
+    "./components/render-content": "./components/render-content/index.js",
+    "./components/render-content/render-content.svelte": "./components/render-content/render-content.svelte",
+    "./components/render-inlined-styles.svelte": "./components/render-inlined-styles.svelte",
+    "./constants/builder-registered-components": "./constants/builder-registered-components.js",
+    "./constants/device-sizes": "./constants/device-sizes.js",
+    "./constants/target": "./constants/target.js",
+    "./context/builder.context": "./context/builder.context.js",
+    "./context/types": "./context/types.js",
+    "./functions/camel-to-kebab-case": "./functions/camel-to-kebab-case.js",
+    "./functions/evaluate": "./functions/evaluate.js",
+    "./functions/event-handler-name": "./functions/event-handler-name.js",
+    "./functions/extract-text-styles": "./functions/extract-text-styles.js",
+    "./functions/fast-clone": "./functions/fast-clone.js",
+    "./functions/get-block-actions-handler": "./functions/get-block-actions-handler.js",
+    "./functions/get-block-actions": "./functions/get-block-actions.js",
+    "./functions/get-block-component-options": "./functions/get-block-component-options.js",
+    "./functions/get-block-properties": "./functions/get-block-properties.js",
+    "./functions/get-block-tag": "./functions/get-block-tag.js",
+    "./functions/get-builder-search-params/fn.test": "./functions/get-builder-search-params/fn.test.js",
+    "./functions/get-builder-search-params": "./functions/get-builder-search-params/index.js",
+    "./functions/get-content/ab-testing": "./functions/get-content/ab-testing.js",
+    "./functions/get-content/fn.test": "./functions/get-content/fn.test.js",
+    "./functions/get-content": "./functions/get-content/index.js",
+    "./functions/get-content/types": "./functions/get-content/types.js",
+    "./functions/get-fetch": "./functions/get-fetch.js",
+    "./functions/get-global-this": "./functions/get-global-this.js",
+    "./functions/get-processed-block.test": "./functions/get-processed-block.test.js",
+    "./functions/get-processed-block": "./functions/get-processed-block.js",
+    "./functions/get-react-native-block-styles": "./functions/get-react-native-block-styles.js",
+    "./functions/if-target": "./functions/if-target.js",
+    "./functions/is-browser": "./functions/is-browser.js",
+    "./functions/is-editing": "./functions/is-editing.js",
+    "./functions/is-iframe": "./functions/is-iframe.js",
+    "./functions/is-previewing": "./functions/is-previewing.js",
+    "./functions/mark-mutable": "./functions/mark-mutable.js",
+    "./functions/on-change.test": "./functions/on-change.test.js",
+    "./functions/on-change": "./functions/on-change.js",
+    "./functions/register-component": "./functions/register-component.js",
+    "./functions/register": "./functions/register.js",
+    "./functions/sanitize-react-native-block-styles": "./functions/sanitize-react-native-block-styles.js",
+    "./functions/set-editor-settings": "./functions/set-editor-settings.js",
+    "./functions/set.test": "./functions/set.test.js",
+    "./functions/set": "./functions/set.js",
+    "./functions/track": "./functions/track.js",
+    "./functions/transform-block": "./functions/transform-block.js",
+    "./helpers/ab-tests": "./helpers/ab-tests.js",
+    "./helpers/cookie": "./helpers/cookie.js",
+    "./helpers/css": "./helpers/css.js",
+    "./helpers/flatten": "./helpers/flatten.js",
+    "./helpers/localStorage": "./helpers/localStorage.js",
+    "./helpers/nullable": "./helpers/nullable.js",
+    "./helpers/sessionId": "./helpers/sessionId.js",
+    "./helpers/time": "./helpers/time.js",
+    "./helpers/url.test": "./helpers/url.test.js",
+    "./helpers/url": "./helpers/url.js",
+    "./helpers/uuid": "./helpers/uuid.js",
+    "./helpers/visitorId": "./helpers/visitorId.js",
+    "./index-helpers/blocks-exports": "./index-helpers/blocks-exports.js",
+    "./index-helpers/top-of-file": "./index-helpers/top-of-file.js",
+    "./scripts/init-editing": "./scripts/init-editing.js",
+    "./types/builder-block": "./types/builder-block.js",
+    "./types/builder-content": "./types/builder-content.js",
+    "./types/can-track": "./types/can-track.js",
+    "./types/components": "./types/components.js",
+    "./types/deep-partial": "./types/deep-partial.js",
+    "./types/element": "./types/element.js",
+    "./types/targets": "./types/targets.js",
+    "./types/typescript": "./types/typescript.js"
+  },
+  "types": "./package/index.d.ts",
+  "devDependencies": {
+    "@sveltejs/adapter-auto": "1.0.0-next.71",
+    "@sveltejs/kit": "1.0.0-next.474",
+    "@sveltejs/package": "1.0.0-next.1",
+    "svelte": "^3.44.0",
+    "svelte-check": "^2.7.1",
+    "svelte-preprocess": "^4.10.6",
+    "tslib": "^2.3.1",
+    "typescript": "^4",
+    "vite": "^3.0.4"
+  },
+  "dependencies": {
+    "node-fetch": "^2.6.1"
+  }
+}

package/package/blocks/BaseText.svelte

@@ -0,0 +1,19 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import BuilderContext from "../context/builder.context.js";
+export let text;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+let builderContext = getContext(BuilderContext.key);
+</script>
+
+<span use:mitosis_styling={builderContext.inheritedStyles}>{text}</span>

package/package/blocks/BaseText.svelte.d.ts

@@ -0,0 +1,19 @@
+import { SvelteComponentTyped } from "svelte";
+export interface BaseTextProps {
+    text: string;
+}
+declare const __propDef: {
+    props: {
+        text: BaseTextProps["text"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export declare type BaseTextProps = typeof __propDef.props;
+export declare type BaseTextEvents = typeof __propDef.events;
+export declare type BaseTextSlots = typeof __propDef.slots;
+export default class BaseText extends SvelteComponentTyped<BaseTextProps, BaseTextEvents, BaseTextSlots> {
+}
+export {};

package/package/blocks/columns/columns.svelte

@@ -1,7 +1,6 @@
 <script context="module"></script>
 
 <script>import RenderBlocks from "../../components/render-blocks.svelte";
-import "../../types/builder-block";
 import { markMutable } from "../../functions/mark-mutable";
 export let space;
 export let columns;
@@ -9,8 +8,13 @@ export let stackColumnsAt;
 export let reverseColumnsWhenStacked;
 export let builderBlock;
 function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-        node.style[p] = v;
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
     });
 }
 function getGutterSize() {
@@ -70,6 +74,9 @@ $: columnCssVars = () => {
         blocks={markMutable(column.blocks)}
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
+        styleProp={{
+          flexGrow: "1",
+        }}
       />
     </div>
   {/each}
@@ -92,7 +99,9 @@ $: columnCssVars = () => {
     }
   }
   .div-2 {
-    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
   }
   @media (max-width: 991px) {
     .div-2 {

package/package/blocks/columns/columns.svelte.d.ts

@@ -1,4 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
+import type { BuilderBlock } from "../../types/builder-block";
 declare type Column = {
     blocks: any;
     width?: number;
@@ -11,7 +12,6 @@ export interface ColumnProps {
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
 }
-import { BuilderBlock } from "../../types/builder-block";
 declare const __propDef: {
     props: {
         space: ColumnProps["space"];

package/package/blocks/custom-code/custom-code.svelte

@@ -5,7 +5,7 @@ export let replaceNodes;
 export let code;
 function findAndRunScripts() {
     // TODO: Move this function to standalone one in '@builder.io/utils'
-    if (elem && typeof window !== "undefined") {
+    if (elem && elem.getElementsByTagName && typeof window !== "undefined") {
         const scripts = elem.getElementsByTagName("script");
         for (let i = 0; i < scripts.length; i++) {
             const script = scripts[i];

package/package/blocks/embed/embed.svelte

@@ -4,6 +4,8 @@
 import { isJsScript } from "./helpers.js";
 export let content;
 function findAndRunScripts() {
+    if (!elem || !elem.getElementsByTagName)
+        return;
     const scripts = elem.getElementsByTagName("script");
     for (let i = 0; i < scripts.length; i++) {
         const script = scripts[i];

package/package/blocks/form/form.svelte

@@ -39,7 +39,8 @@ function onSubmit(event) {
         const el = event.currentTarget;
         const headers = customHeaders || {};
         let body;
-        const formData = new FormData(el); // TODO: maybe support null
+        const formData = new FormData(el);
+        // TODO: maybe support null
         const formPairs = Array.from(event.currentTarget.querySelectorAll("input,select,textarea"))
             .filter((el) => !!el.name)
             .map((el) => {
@@ -90,7 +91,8 @@ function onSubmit(event) {
                 value instanceof FileList) {
                 contentType = "multipart/form-data";
             }
-        }); // TODO: send as urlEncoded or multipart by default
+        });
+        // TODO: send as urlEncoded or multipart by default
         // because of ease of use and reliability in browser API
         // for encoding the form?
         if (contentType !== "application/json") {
@@ -124,9 +126,9 @@ function onSubmit(event) {
         }
         formState = "sending";
         const formUrl = `${builder.env === "dev" ? "http://localhost:5000" : "https://builder.io"}/api/v1/form-submit?apiKey=${builder.apiKey}&to=${btoa(sendSubmissionsToEmail || "")}&name=${encodeURIComponent(name || "")}`;
-        fetch(sendSubmissionsTo === "email" ? formUrl : action, 
-        /* TODO: throw error if no action URL */
-        {
+        fetch(sendSubmissionsTo === "email"
+            ? formUrl
+            : action /* TODO: throw error if no action URL */, {
             body,
             headers,
             method: method || "post",

package/package/blocks/image/image.svelte

@@ -10,17 +10,23 @@ export let backgroundSize;
 export let className;
 export let sizes;
 export let aspectRatio;
-export let fitContent;
 export let builderBlock;
+export let fitContent;
 function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-        node.style[p] = v;
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
     });
 }
 $: srcSetToUse = () => {
     const imageToUse = image || src;
     const url = imageToUse;
-    if (!url || // We can auto add srcset for cdn.builder.io and shopify
+    if (!url ||
+        // We can auto add srcset for cdn.builder.io and shopify
         // images, otherwise you can supply this prop manually
         !(url.match(/builder\.io/) || url.match(/cdn\.shopify\.com/))) {
         return srcset;
@@ -46,52 +52,48 @@ $: webpSrcSet = () => {
 };
 </script>
 
-<div class="div">
-  <picture>
-    {#if webpSrcSet()}
-      <source type="image/webp" srcset={webpSrcSet()} />
-    {/if}
-    <img
-      use:mitosis_styling={{
-        objectPosition: backgroundSize || "center",
-        objectFit: backgroundSize || "cover",
-      }}
-      loading="lazy"
-      alt={altText}
-      role={altText ? "presentation" : undefined}
-      class={"builder-image" + (className ? " " + className : "") + " img"}
-      src={image}
-      srcset={srcSetToUse()}
-      {sizes}
-    />
-    <source srcset={srcSetToUse()} />
-  </picture>
+<picture>
+  {#if webpSrcSet()}
+    <source type="image/webp" srcset={webpSrcSet()} />
+  {/if}
+  <img
+    use:mitosis_styling={{
+      objectPosition: backgroundSize || "center",
+      objectFit: backgroundSize || "cover",
+    }}
+    loading="lazy"
+    alt={altText}
+    role={altText ? "presentation" : undefined}
+    class={"builder-image" + (className ? " " + className : "") + " img"}
+    src={image}
+    srcset={srcSetToUse()}
+    {sizes}
+  />
+  <source srcset={srcSetToUse()} />
+</picture>
 
-  {#if aspectRatio && !(fitContent && builderBlock?.children?.length)}
-    <div
-      use:mitosis_styling={{
+{#if aspectRatio && !(builderBlock?.children?.length && fitContent)}
+  <div
+    use:mitosis_styling={{
+      paddingTop:
         // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-        paddingTop: aspectRatio * 100 + "%",
-      }}
-      class="builder-image-sizer div-2"
-    />
-  {/if}
+        aspectRatio * 100 + "%",
+    }}
+    class="builder-image-sizer div"
+  />
+{/if}
 
-  {#if builderBlock?.children?.length && fitContent}
-    <slot />
-  {/if}
+{#if builderBlock?.children?.length && fitContent}
+  <slot />
+{/if}
 
-  {#if !fitContent}
-    <div class="div-3">
-      <slot />
-    </div>
-  {/if}
-</div>
+{#if !fitContent && $$slots.default}
+  <div class="div-2">
+    <slot />
+  </div>
+{/if}
 
 <style>
-  .div {
-    position: relative;
-  }
   .img {
     opacity: 1;
     transition: opacity 0.2s ease-in-out;
@@ -101,12 +103,12 @@ $: webpSrcSet = () => {
     top: 0px;
     left: 0px;
   }
-  .div-2 {
+  .div {
     width: 100%;
     pointer-events: none;
     font-size: 0;
   }
-  .div-3 {
+  .div-2 {
     display: flex;
     flex-direction: column;
     align-items: stretch;

package/package/blocks/image/image.svelte.d.ts

@@ -30,8 +30,8 @@ declare const __propDef: {
         className: ImageProps["className"];
         sizes: ImageProps["sizes"];
         aspectRatio: ImageProps["aspectRatio"];
-        fitContent: ImageProps["fitContent"];
         builderBlock: ImageProps["builderBlock"];
+        fitContent: ImageProps["fitContent"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/img/img.svelte

@@ -8,8 +8,13 @@ export let altText;
 export let image;
 export let attributes;
 function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-        node.style[p] = v;
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
     });
 }
 </script>

package/package/blocks/section/section.svelte

@@ -3,8 +3,13 @@
 <script>export let attributes;
 export let maxWidth;
 function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-        node.style[p] = v;
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
     });
 }
 </script>

package/package/blocks/symbol/symbol.svelte

@@ -1,21 +1,18 @@
 <script context="module"></script>
 
-<script>import { getContext, onMount } from "svelte";
+<script>import { getContext } from "svelte";
 import RenderContent from "../../components/render-content/render-content.svelte";
 import BuilderContext from "../../context/builder.context.js";
 import { getContent } from "../../functions/get-content/index.js";
-import "../../types/builder-content.js";
-import "../../types/typescript.js";
-import "../../types/builder-block.js";
 import { markMutable } from "../../functions/mark-mutable";
-export let attributes;
 export let symbol;
+export let attributes;
 let builderContext = getContext(BuilderContext.key);
+$: contentToUse = () => {
+    return symbol?.content || fetchedContent;
+};
 let className = "builder-symbol";
-let content = null;
-onMount(() => {
-    content = symbol?.content;
-});
+let fetchedContent = null;
 function onUpdateFn_0() {
     const symbolToUse = symbol;
     /**
@@ -27,7 +24,10 @@ function onUpdateFn_0() {
      *
      * then we want to re-fetch the symbol content.
      */
-    if (symbolToUse && !symbolToUse.content && !content && symbolToUse.model) {
+    if (symbolToUse &&
+        !symbolToUse.content &&
+        !fetchedContent &&
+        symbolToUse.model) {
         getContent({
             model: symbolToUse.model,
             apiKey: builderContext.apiKey,
@@ -35,11 +35,11 @@ function onUpdateFn_0() {
                 id: symbolToUse.entry,
             },
         }).then((response) => {
-            content = response;
+            fetchedContent = response;
         });
     }
 }
-$: onUpdateFn_0(...[symbol, content]);
+$: onUpdateFn_0(...[symbol, fetchedContent]);
 </script>
 
 <div
@@ -61,6 +61,6 @@ $: onUpdateFn_0(...[symbol, content]);
       ...symbol?.content?.data?.state,
     })}
     model={symbol?.model}
-    content={markMutable(content)}
+    content={markMutable(contentToUse())}
   />
 </div>

package/package/blocks/symbol/symbol.svelte.d.ts

@@ -1,4 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
+import type { BuilderContent } from "../../types/builder-content.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
 export interface SymbolInfo {
     model?: string;
     entry?: string;
@@ -15,12 +17,10 @@ export interface SymbolProps {
     attributes?: any;
     inheritState?: boolean;
 }
-import { BuilderContent } from "../../types/builder-content.js";
-import { BuilderBlock } from "../../types/builder-block.js";
 declare const __propDef: {
     props: {
-        attributes: SymbolProps["attributes"];
         symbol: SymbolProps["symbol"];
+        attributes: SymbolProps["attributes"];
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/package/blocks/video/video.svelte

@@ -11,8 +11,13 @@ export let position;
 export let video;
 export let posterImage;
 function mitosis_styling(node, vars) {
-    Object.entries(vars).forEach(([p, v]) => {
-        node.style[p] = v;
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
     });
 }
 $: videoProps = () => {
@@ -44,10 +49,16 @@ $: videoProps = () => {
             : {}),
     };
 };
+$: spreadProps = () => {
+    return {
+        ...attributes,
+        ...videoProps(),
+    };
+};
 </script>
 
 <video
-  {...videoProps()}
+  {...spreadProps()}
   use:mitosis_styling={{
     width: "100%",
     height: "100%",