@builder.io/sdk-svelte 0.0.1-31 → 0.0.1-32

package/src/blocks/util.js

@@ -0,0 +1,7 @@
+function markSerializable(fn) {
+  fn.__qwik_serializable__ = true;
+  return fn;
+}
+export {
+  markSerializable
+};

package/src/blocks/video/video.svelte

@@ -1,14 +1,42 @@
-<script>
-  export let autoPlay;
-  export let muted;
-  export let controls;
-  export let loop;
-  export let playsInline;
-  export let attributes;
-  export let fit;
-  export let position;
-  export let video;
-  export let posterImage;
+<script context="module" lang="ts">
+  export interface VideoProps {
+    attributes?: any;
+    video?: string;
+    autoPlay?: boolean;
+    controls?: boolean;
+    muted?: boolean;
+    loop?: boolean;
+    playsInline?: boolean;
+    aspectRatio?: number;
+    width?: number;
+    height?: number;
+    fit?: "contain" | "cover" | "fill";
+    position?:
+      | "center"
+      | "top"
+      | "left"
+      | "right"
+      | "bottom"
+      | "top left"
+      | "top right"
+      | "bottom left"
+      | "bottom right";
+    posterImage?: string;
+    lazyLoad?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  export let autoPlay: VideoProps["autoPlay"];
+  export let muted: VideoProps["muted"];
+  export let controls: VideoProps["controls"];
+  export let loop: VideoProps["loop"];
+  export let playsInline: VideoProps["playsInline"];
+  export let attributes: VideoProps["attributes"];
+  export let fit: VideoProps["fit"];
+  export let position: VideoProps["position"];
+  export let video: VideoProps["video"];
+  export let posterImage: VideoProps["posterImage"];
 
   function mitosis_styling(node, vars) {
     Object.entries(vars).forEach(([p, v]) => {

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

@@ -1,21 +1,26 @@
-<script>
+<script context="module" lang="ts">
+  export type BlockStylesProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+  };
+</script>
+
+<script lang="ts">
+  import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
   import { TARGET } from "../../constants/target.js";
-  import BuilderContext from "../../context/builder.context";
   import { getProcessedBlock } from "../../functions/get-processed-block.js";
-  import RenderInlinedStyles from "../render-inlined-styles.svelte";
   import { convertStyleMaptoCSS } from "../../helpers/css.js";
-  import { getMaxWidthQueryForSize } from "../../constants/device-sizes.js";
-
-  import { getContext, setContext } from "svelte";
+  import RenderInlinedStyles from "../render-inlined-styles.svelte";
 
-  export let block;
+  export let block: BlockStylesProps["block"];
+  export let context: BlockStylesProps["context"];
 
   $: useBlock = () => {
     return getProcessedBlock({
       block: block,
-      state: builderContext.state,
-      context: builderContext.context,
-      evaluateBindings: true,
+      state: context.state,
+      context: context.context,
+      shouldEvaluateBindings: true,
     });
   };
 
@@ -46,8 +51,6 @@
       }
     }`;
   };
-
-  let builderContext = getContext(BuilderContext.key);
 </script>
 
 {#if TARGET === "vue2" || TARGET === "vue3" || TARGET === "svelte"}

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

@@ -1,5 +1,11 @@
-<script>
-  import BuilderContext from "../../context/builder.context";
+<script context="module" lang="ts">
+  export type RenderBlockProps = {
+    block: BuilderBlock;
+    context: BuilderContextInterface;
+  }; // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
+</script>
+
+<script lang="ts">
   import { getBlockActions } from "../../functions/get-block-actions.js";
   import { getBlockComponentOptions } from "../../functions/get-block-component-options.js";
   import { getBlockProperties } from "../../functions/get-block-properties.js";
@@ -12,23 +18,22 @@
   import RenderComponent from "./render-component.svelte";
   import RenderRepeatedBlock from "./render-repeated-block.svelte";
 
-  import { getContext, setContext } from "svelte";
-
-  export let block;
+  export let block: RenderBlockProps["block"];
+  export let context: RenderBlockProps["context"];
 
   $: component = () => {
     const componentName = getProcessedBlock({
       block: block,
-      state: builderContext.state,
-      context: builderContext.context,
-      evaluateBindings: false,
+      state: context.state,
+      context: context.context,
+      shouldEvaluateBindings: false,
     }).component?.name;
 
     if (!componentName) {
       return null;
     }
 
-    const ref = builderContext.registeredComponents[componentName];
+    const ref = context.registeredComponents[componentName];
 
     if (!ref) {
       // TODO: Public doc page with more info about this message
@@ -63,9 +68,9 @@
       ? block
       : getProcessedBlock({
           block: block,
-          state: builderContext.state,
-          context: builderContext.context,
-          evaluateBindings: true,
+          state: context.state,
+          context: context.context,
+          shouldEvaluateBindings: true,
         });
   };
 
@@ -74,8 +79,8 @@
       ...getBlockProperties(useBlock()),
       ...getBlockActions({
         block: useBlock(),
-        state: builderContext.state,
-        context: builderContext.context,
+        state: context.state,
+        context: context.context,
       }),
       style: getBlockStyles(useBlock()),
     };
@@ -106,6 +111,7 @@
       blockChildren: children(),
       componentRef: componentRef(),
       componentOptions: componentOptions(),
+      context: context,
     };
   };
 
@@ -141,8 +147,8 @@
 
     const itemsArray = evaluate({
       code: repeat.collection,
-      state: builderContext.state,
-      context: builderContext.context,
+      state: context.state,
+      context: context.context,
     });
 
     if (!Array.isArray(itemsArray)) {
@@ -154,9 +160,9 @@
       repeat.itemName || (collectionName ? collectionName + "Item" : "item");
     const repeatArray = itemsArray.map((item, index) => ({
       context: {
-        ...builderContext,
+        ...context,
         state: {
-          ...builderContext.state,
+          ...context.state,
           $index: index,
           $item: item,
           [itemNameToUse]: item,
@@ -167,8 +173,6 @@
     }));
     return repeatArray;
   };
-
-  let builderContext = getContext(BuilderContext.key);
 </script>
 
 {#if shouldWrap()}
@@ -187,17 +191,17 @@
         <RenderComponent {...renderComponentProps()} />
       {/if}
 
-      {#each childrenWithoutParentComponent() as child, undefined ("render-block-" + child.id)}
-        <svelte:self block={child} />
+      {#each childrenWithoutParentComponent() as child ("render-block-" + child.id)}
+        <svelte:self block={child} {context} />
       {/each}
 
-      {#each childrenWithoutParentComponent() as child, undefined ("block-style-" + child.id)}
-        <BlockStyles block={child} />
+      {#each childrenWithoutParentComponent() as child ("block-style-" + child.id)}
+        <BlockStyles block={child} {context} />
       {/each}
     </svelte:element>
   {:else}
     <svelte:element this={tagName()} {...attributes()} />
   {/if}
 {:else}
-  <RenderComponent {...renderComponentProps()} />
+  <RenderComponent {...renderComponentProps()} {context} />
 {/if}

package/src/components/render-block/render-component.svelte

@@ -1,20 +1,30 @@
-<script>
+<script context="module" lang="ts">
+  export interface RenderComponentProps {
+    componentRef: any;
+    componentOptions: any;
+    blockChildren: BuilderBlock[];
+    context: BuilderContextInterface;
+  } // eslint-disable-next-line @builder.io/mitosis/only-default-function-and-imports
+</script>
+
+<script lang="ts">
   import BlockStyles from "./block-styles.svelte";
   import RenderBlock from "./render-block.svelte";
 
-  export let componentRef;
-  export let componentOptions;
-  export let blockChildren;
+  export let componentRef: RenderComponentProps["componentRef"];
+  export let componentOptions: RenderComponentProps["componentOptions"];
+  export let blockChildren: RenderComponentProps["blockChildren"];
+  export let context: RenderComponentProps["context"];
 </script>
 
 {#if componentRef}
   <svelte:component this={componentRef} {...componentOptions}>
-    {#each blockChildren as child, undefined ("render-block-" + child.id)}
-      <RenderBlock block={child} />
+    {#each blockChildren as child ("render-block-" + child.id)}
+      <RenderBlock block={child} {context} />
     {/each}
 
-    {#each blockChildren as child, undefined ("block-style-" + child.id)}
-      <BlockStyles block={child} />
+    {#each blockChildren as child ("block-style-" + child.id)}
+      <BlockStyles block={child} {context} />
     {/each}
   </svelte:component>
 {/if}

package/src/components/render-block/render-repeated-block.svelte

@@ -1,11 +1,27 @@
-<script>
+<script context="module" lang="ts">
+  type Props = {
+    block: BuilderBlock;
+    repeatContext: BuilderContextInterface;
+  };
+  /**
+   * We can't make this a generic `ProvideContext` function because Vue 2 won't support root slots, e.g.
+   *
+   * ```vue
+   * <template>
+   *  <slot></slot>
+   * </template>
+   * ```
+   */
+</script>
+
+<script lang="ts">
   import BuilderContext from "../../context/builder.context";
   import RenderBlock from "./render-block.svelte";
 
   import { getContext, setContext } from "svelte";
 
-  export let block;
-  export let repeatContext;
+  export let block: Props["block"];
+  export let repeatContext: Props["repeatContext"];
 
   setContext(BuilderContext.key, {
     get content() {
@@ -26,4 +42,4 @@
   });
 </script>
 
-<RenderBlock {block} />
+<RenderBlock {block} context={repeatContext} />

package/src/components/render-blocks.svelte

@@ -1,11 +1,24 @@
-<script>
+<script context="module" lang="ts">
+  export type RenderBlockProps = {
+    blocks?: BuilderBlock[];
+    parent?: string;
+    path?: string;
+  };
+</script>
+
+<script lang="ts">
+  import BuilderContext from "../context/builder.context";
   import { isEditing } from "../functions/is-editing.js";
   import BlockStyles from "./render-block/block-styles.svelte";
   import RenderBlock from "./render-block/render-block.svelte";
 
-  export let blocks;
-  export let parent;
-  export let path;
+  import { getContext, setContext } from "svelte";
+
+  export let blocks: RenderBlockProps["blocks"];
+  export let parent: RenderBlockProps["parent"];
+  export let path: RenderBlockProps["path"];
+
+  let builderContext = getContext(BuilderContext.key);
 
   const onClick = function onClick() {
     if (isEditing() && !blocks?.length) {
@@ -56,14 +69,14 @@
   }}
 >
   {#if blocks}
-    {#each blocks as block, undefined ("render-block-" + block.id)}
-      <RenderBlock {block} />
+    {#each blocks as block ("render-block-" + block.id)}
+      <RenderBlock {block} context={builderContext} />
     {/each}
   {/if}
 
   {#if blocks}
-    {#each blocks as block, undefined ("block-style-" + block.id)}
-      <BlockStyles {block} />
+    {#each blocks as block ("block-style-" + block.id)}
+      <BlockStyles {block} context={builderContext} />
     {/each}
   {/if}
 </div>

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

@@ -1,8 +1,24 @@
-<script>
+<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;
-  export let customFonts;
+  export let cssCode: Props["cssCode"];
+  export let customFonts: Props["customFonts"];
 
   const getCssFromFont = function getCssFromFont(font) {
     // TODO: compute what font sizes are used and only load those.......

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

@@ -1,4 +1,30 @@
-<script>
+<script context="module" lang="ts">
+  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 { onMount } from "svelte";
   import { afterUpdate } from "svelte";
   import { onDestroy } from "svelte";
@@ -19,16 +45,39 @@
   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 { getContext, setContext } from "svelte";
 
-  export let content;
-  export let data;
-  export let canTrack;
-  export let context;
-  export let customComponents;
-  export let model;
-  export let apiKey;
+  export let elementRef: RenderContentProps["elementRef"];
+  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();
+    },
+  });
 
   const processMessage = function processMessage(event) {
     const { data } = event;
@@ -182,23 +231,7 @@
     );
   };
 
-  setContext(BuilderContext.key, {
-    get content() {
-      return useContent();
-    },
-    get state() {
-      return contentState();
-    },
-    get context() {
-      return contextContext();
-    },
-    get apiKey() {
-      return apiKey;
-    },
-    get registeredComponents() {
-      return allRegisteredComponents();
-    },
-  });
+  let forceReRenderCount = 0;
   let overrideContent = null;
   let update = 0;
   let overrideState = {};
@@ -206,6 +239,10 @@
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
+        forceReRenderCount = forceReRenderCount + 1; // QWIK-REPLACE: _useMutableProps
+
+        registerInsertMenu();
+        setupBrowserForEditing();
         Object.values(allRegisteredComponents()).forEach(
           (registeredComponent) => {
             const message = createRegisterComponentMessage(registeredComponent);
@@ -280,6 +317,7 @@
 
 {#if useContent()}
   <div
+    bind:this={elementRef}
     on:click={(event) => {
       onClick(event);
     }}
@@ -291,7 +329,9 @@
         customFonts={useContent?.()?.data?.customFonts}
       />
     {/if}
-
-    <RenderBlocks blocks={useContent?.()?.data?.blocks} />
+    <RenderBlocks
+      blocks={useContent?.()?.data?.blocks}
+      key={forceReRenderCount}
+    />
   </div>
 {/if}

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

@@ -1,7 +1,13 @@
-<script>
+<script context="module" lang="ts">
+  interface Props {
+    styles: string;
+  }
+</script>
+
+<script lang="ts">
   import { TARGET } from "../constants/target.js";
 
-  export let styles;
+  export let styles: Props["styles"];
 
   $: injectedStyleScript = () => {
     return `<${tagName()}>${styles}</${tagName()}>`;

package/src/constants/builder-registered-components.js

@@ -32,9 +32,12 @@ import { componentInfo as videoComponentInfo } from "../blocks/video/component-i
 import { default as Video } from "../blocks/video/video.svelte";
 import { componentInfo as embedComponentInfo } from "../blocks/embed/component-info";
 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";
 const getDefaultRegisteredComponents = () => [
   __spreadValues({ component: Columns }, columnsComponentInfo),
   __spreadValues({ component: Image }, imageComponentInfo),
+  __spreadValues({ component: Img }, imgComponentInfo),
   __spreadValues({ component: Text }, textComponentInfo),
   __spreadValues({ component: Video }, videoComponentInfo),
   __spreadValues({ component: Symbol }, symbolComponentInfo),

package/src/functions/get-fetch.js

@@ -24,9 +24,9 @@ function getFetch() {
     const globalFetch = getGlobalThis().fetch;
     if (typeof globalFetch === "undefined" && typeof global !== "undefined") {
       const nodeFetch = import("node-fetch").then((d) => d.default);
-      return nodeFetch;
+      return nodeFetch.default || nodeFetch;
     }
-    return globalFetch;
+    return globalFetch.default || globalFetch;
   });
 }
 export {

package/src/functions/get-processed-block.js

@@ -39,13 +39,17 @@ const evaluateBindings = ({
   }
   return copied;
 };
-function getProcessedBlock(options) {
-  const { state, context } = options;
-  const block = transformBlock(options.block);
-  if (evaluateBindings) {
-    return evaluateBindings({ block, state, context });
+function getProcessedBlock({
+  block,
+  context,
+  shouldEvaluateBindings,
+  state
+}) {
+  const transformedBlock = transformBlock(block);
+  if (shouldEvaluateBindings) {
+    return evaluateBindings({ block: transformedBlock, state, context });
   } else {
-    return block;
+    return transformedBlock;
   }
 }
 export {

package/src/functions/get-processed-block.test.js

@@ -21,7 +21,7 @@ test("Can process bindings", () => {
     block,
     context: {},
     state: { test: "hello" },
-    evaluateBindings: true
+    shouldEvaluateBindings: true
   });
   expect(processed).not.toEqual(block);
   expect((_a = processed.properties) == null ? void 0 : _a.foo).toEqual("baz");

package/src/scripts/init-editing.js

@@ -1,6 +1,5 @@
 import { TARGET } from "../constants/target.js";
 import { isBrowser } from "../functions/is-browser.js";
-import { isEditing } from "../functions/is-editing.js";
 import { register } from "../functions/register.js";
 const registerInsertMenu = () => {
   register("insertMenu", {
@@ -74,7 +73,7 @@ const setupBrowserForEditing = () => {
     });
   }
 };
-if (isEditing()) {
-  registerInsertMenu();
-  setupBrowserForEditing();
-}
+export {
+  registerInsertMenu,
+  setupBrowserForEditing
+};