@builder.io/sdk-svelte 0.12.0 → 0.12.1

package/lib/browser/blocks/slot/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/lib/browser/blocks/slot/component-info.js

@@ -0,0 +1,14 @@
+export const componentInfo = {
+    name: 'Slot',
+    isRSC: true,
+    description: 'Allow child blocks to be inserted into this content when used as a Symbol',
+    docsLink: 'https://www.builder.io/c/docs/symbols-with-blocks',
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56',
+    // Maybe wrap this for canHaveChildren so bind children to this hm
+    inputs: [{
+            name: 'name',
+            type: 'string',
+            required: true,
+            defaultValue: 'children'
+        }]
+};

package/lib/browser/blocks/slot/slot.svelte

@@ -0,0 +1,33 @@
+<script context="module"></script>
+
+<script>import Blocks from "../../components/blocks/blocks.svelte";
+import "../../functions/deopt.js";
+export let builderContext;
+export let name;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+</script>
+
+<div
+  use:mitosis_styling={{
+    pointerEvents: "auto",
+  }}
+  {...!$builderContext.context?.symbolId && {
+    "builder-slot": name,
+  }}
+>
+  <Blocks
+    parent={$builderContext.context?.symbolId}
+    path={`symbol.data.${name}`}
+    context={builderContext}
+    blocks={$builderContext.rootState?.[name]}
+  />
+</div>

package/lib/browser/blocks/slot/slot.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+export interface DropzoneProps {
+    name: string;
+    builderBlock: BuilderBlock;
+    builderContext: Writable<BuilderContextInterface>;
+    attributes: any;
+}
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        builderContext: DropzoneProps["builderContext"];
+        name: DropzoneProps["name"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SlotProps = typeof __propDef.props;
+export type SlotEvents = typeof __propDef.events;
+export type SlotSlots = typeof __propDef.slots;
+export default class Slot extends SvelteComponent<SlotProps, SlotEvents, SlotSlots> {
+}
+export {};

package/lib/browser/blocks/symbol/symbol.svelte

@@ -8,6 +8,7 @@ export let attributes = undefined;
 export let symbol = undefined;
 export let dynamic = undefined;
 export let builderContext;
+export let builderBlock;
 export let builderComponents;
 function setContent() {
     if (contentToUse)
@@ -51,7 +52,10 @@ $: onUpdateFn_0(...[symbol]);
     __isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
-    context={$builderContext.context}
+    context={{
+      ...$builderContext.context,
+      symbolId: builderBlock?.id,
+    }}
     customComponents={Object.values(builderComponents)}
     data={{
       ...symbol?.data,

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         symbol?: PropsWithBuilderData<SymbolProps>["symbol"];
         dynamic?: PropsWithBuilderData<SymbolProps>["dynamic"];
         builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
+        builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
         builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
     };
     events: {

package/lib/browser/constants/builder-registered-components.js

@@ -14,6 +14,8 @@ import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.
 import { default as Img } from '../blocks/img/img.svelte';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
 import { default as Section } from '../blocks/section/section.svelte';
+import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info.js';
+import { default as Slot } from '../blocks/slot/slot.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';
@@ -57,4 +59,7 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Video,
         ...videoComponentInfo
+    }, {
+        component: Slot,
+        ...slotComponentInfo
     }];

package/lib/browser/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.0";
+export declare const SDK_VERSION = "0.12.1";

package/lib/browser/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.0";
+export const SDK_VERSION = "0.12.1";

package/lib/edge/blocks/slot/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/lib/edge/blocks/slot/component-info.js

@@ -0,0 +1,14 @@
+export const componentInfo = {
+    name: 'Slot',
+    isRSC: true,
+    description: 'Allow child blocks to be inserted into this content when used as a Symbol',
+    docsLink: 'https://www.builder.io/c/docs/symbols-with-blocks',
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56',
+    // Maybe wrap this for canHaveChildren so bind children to this hm
+    inputs: [{
+            name: 'name',
+            type: 'string',
+            required: true,
+            defaultValue: 'children'
+        }]
+};

package/lib/edge/blocks/slot/slot.svelte

@@ -0,0 +1,33 @@
+<script context="module"></script>
+
+<script>import Blocks from "../../components/blocks/blocks.svelte";
+import "../../functions/deopt.js";
+export let builderContext;
+export let name;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+</script>
+
+<div
+  use:mitosis_styling={{
+    pointerEvents: "auto",
+  }}
+  {...!$builderContext.context?.symbolId && {
+    "builder-slot": name,
+  }}
+>
+  <Blocks
+    parent={$builderContext.context?.symbolId}
+    path={`symbol.data.${name}`}
+    context={builderContext}
+    blocks={$builderContext.rootState?.[name]}
+  />
+</div>

package/lib/edge/blocks/slot/slot.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+export interface DropzoneProps {
+    name: string;
+    builderBlock: BuilderBlock;
+    builderContext: Writable<BuilderContextInterface>;
+    attributes: any;
+}
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        builderContext: DropzoneProps["builderContext"];
+        name: DropzoneProps["name"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SlotProps = typeof __propDef.props;
+export type SlotEvents = typeof __propDef.events;
+export type SlotSlots = typeof __propDef.slots;
+export default class Slot extends SvelteComponent<SlotProps, SlotEvents, SlotSlots> {
+}
+export {};

package/lib/edge/blocks/symbol/symbol.svelte

@@ -8,6 +8,7 @@ export let attributes = undefined;
 export let symbol = undefined;
 export let dynamic = undefined;
 export let builderContext;
+export let builderBlock;
 export let builderComponents;
 function setContent() {
     if (contentToUse)
@@ -51,7 +52,10 @@ $: onUpdateFn_0(...[symbol]);
     __isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
-    context={$builderContext.context}
+    context={{
+      ...$builderContext.context,
+      symbolId: builderBlock?.id,
+    }}
     customComponents={Object.values(builderComponents)}
     data={{
       ...symbol?.data,

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         symbol?: PropsWithBuilderData<SymbolProps>["symbol"];
         dynamic?: PropsWithBuilderData<SymbolProps>["dynamic"];
         builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
+        builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
         builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
     };
     events: {

package/lib/edge/constants/builder-registered-components.js

@@ -14,6 +14,8 @@ import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.
 import { default as Img } from '../blocks/img/img.svelte';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
 import { default as Section } from '../blocks/section/section.svelte';
+import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info.js';
+import { default as Slot } from '../blocks/slot/slot.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';
@@ -57,4 +59,7 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Video,
         ...videoComponentInfo
+    }, {
+        component: Slot,
+        ...slotComponentInfo
     }];

package/lib/edge/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.0";
+export declare const SDK_VERSION = "0.12.1";

package/lib/edge/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.0";
+export const SDK_VERSION = "0.12.1";

package/lib/node/blocks/slot/component-info.d.ts

@@ -0,0 +1,2 @@
+import type { ComponentInfo } from '../../types/components.js';
+export declare const componentInfo: ComponentInfo;

package/lib/node/blocks/slot/component-info.js

@@ -0,0 +1,14 @@
+export const componentInfo = {
+    name: 'Slot',
+    isRSC: true,
+    description: 'Allow child blocks to be inserted into this content when used as a Symbol',
+    docsLink: 'https://www.builder.io/c/docs/symbols-with-blocks',
+    image: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56',
+    // Maybe wrap this for canHaveChildren so bind children to this hm
+    inputs: [{
+            name: 'name',
+            type: 'string',
+            required: true,
+            defaultValue: 'children'
+        }]
+};

package/lib/node/blocks/slot/slot.svelte

@@ -0,0 +1,33 @@
+<script context="module"></script>
+
+<script>import Blocks from "../../components/blocks/blocks.svelte";
+import "../../functions/deopt.js";
+export let builderContext;
+export let name;
+function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+        if (p.startsWith("--")) {
+            node.style.setProperty(p, v);
+        }
+        else {
+            node.style[p] = v;
+        }
+    });
+}
+</script>
+
+<div
+  use:mitosis_styling={{
+    pointerEvents: "auto",
+  }}
+  {...!$builderContext.context?.symbolId && {
+    "builder-slot": name,
+  }}
+>
+  <Blocks
+    parent={$builderContext.context?.symbolId}
+    path={`symbol.data.${name}`}
+    context={builderContext}
+    blocks={$builderContext.rootState?.[name]}
+  />
+</div>

package/lib/node/blocks/slot/slot.svelte.d.ts

@@ -0,0 +1,26 @@
+import { SvelteComponent } from "svelte";
+export interface DropzoneProps {
+    name: string;
+    builderBlock: BuilderBlock;
+    builderContext: Writable<BuilderContextInterface>;
+    attributes: any;
+}
+import type { BuilderContextInterface } from "../../context/types.js";
+import type { BuilderBlock } from "../../types/builder-block.js";
+import type { Writable } from "svelte/store";
+declare const __propDef: {
+    props: {
+        builderContext: DropzoneProps["builderContext"];
+        name: DropzoneProps["name"];
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SlotProps = typeof __propDef.props;
+export type SlotEvents = typeof __propDef.events;
+export type SlotSlots = typeof __propDef.slots;
+export default class Slot extends SvelteComponent<SlotProps, SlotEvents, SlotSlots> {
+}
+export {};

package/lib/node/blocks/symbol/symbol.svelte

@@ -8,6 +8,7 @@ export let attributes = undefined;
 export let symbol = undefined;
 export let dynamic = undefined;
 export let builderContext;
+export let builderBlock;
 export let builderComponents;
 function setContent() {
     if (contentToUse)
@@ -51,7 +52,10 @@ $: onUpdateFn_0(...[symbol]);
     __isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
-    context={$builderContext.context}
+    context={{
+      ...$builderContext.context,
+      symbolId: builderBlock?.id,
+    }}
     customComponents={Object.values(builderComponents)}
     data={{
       ...symbol?.data,

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

@@ -8,6 +8,7 @@ declare const __propDef: {
         symbol?: PropsWithBuilderData<SymbolProps>["symbol"];
         dynamic?: PropsWithBuilderData<SymbolProps>["dynamic"];
         builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
+        builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
         builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
     };
     events: {

package/lib/node/constants/builder-registered-components.js

@@ -14,6 +14,8 @@ import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.
 import { default as Img } from '../blocks/img/img.svelte';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
 import { default as Section } from '../blocks/section/section.svelte';
+import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info.js';
+import { default as Slot } from '../blocks/slot/slot.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';
@@ -57,4 +59,7 @@ export const getDefaultRegisteredComponents = () => [{
     }, {
         component: Video,
         ...videoComponentInfo
+    }, {
+        component: Slot,
+        ...slotComponentInfo
     }];

package/lib/node/constants/sdk-version.d.ts

@@ -1 +1 @@
-export declare const SDK_VERSION = "0.12.0";
+export declare const SDK_VERSION = "0.12.1";

package/lib/node/constants/sdk-version.js

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.0";
+export const SDK_VERSION = "0.12.1";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "type": "module",
   "files": [
     "lib",

package/src/blocks/slot/component-info.ts

@@ -0,0 +1,15 @@
+import type { ComponentInfo } from '../../types/components.js';
+export const componentInfo: ComponentInfo = {
+  name: 'Slot',
+  isRSC: true,
+  description: 'Allow child blocks to be inserted into this content when used as a Symbol',
+  docsLink: 'https://www.builder.io/c/docs/symbols-with-blocks',
+  image: 'https://cdn.builder.io/api/v1/image/assets%2FYJIGb4i01jvw0SRdL5Bt%2F3aad6de36eae43b59b52c85190fdef56',
+  // Maybe wrap this for canHaveChildren so bind children to this hm
+  inputs: [{
+    name: 'name',
+    type: 'string',
+    required: true,
+    defaultValue: 'children'
+  }]
+}

package/src/blocks/slot/slot.svelte

@@ -0,0 +1,45 @@
+<script context="module" lang="ts">
+  export interface DropzoneProps {
+    name: string;
+    builderBlock: BuilderBlock;
+    builderContext: Writable<BuilderContextInterface>;
+    attributes: any;
+  }
+</script>
+
+<script lang="ts">
+  import Blocks from "../../components/blocks/blocks.svelte";
+  import type { BuilderContextInterface } from "../../context/types.js";
+  import { deoptSignal } from "../../functions/deopt.js";
+  import type { BuilderBlock } from "../../types/builder-block.js";
+  import type { Writable } from "svelte/store";
+
+  export let builderContext: DropzoneProps["builderContext"];
+  export let name: DropzoneProps["name"];
+
+  function mitosis_styling(node, vars) {
+    Object.entries(vars || {}).forEach(([p, v]) => {
+      if (p.startsWith("--")) {
+        node.style.setProperty(p, v);
+      } else {
+        node.style[p] = v;
+      }
+    });
+  }
+</script>
+
+<div
+  use:mitosis_styling={{
+    pointerEvents: "auto",
+  }}
+  {...!$builderContext.context?.symbolId && {
+    "builder-slot": name,
+  }}
+>
+  <Blocks
+    parent={$builderContext.context?.symbolId}
+    path={`symbol.data.${name}`}
+    context={builderContext}
+    blocks={$builderContext.rootState?.[name]}
+  />
+</div>

package/src/blocks/symbol/symbol.svelte

@@ -16,6 +16,7 @@
   export let symbol: PropsWithBuilderData<SymbolProps>["symbol"] = undefined;
   export let dynamic: PropsWithBuilderData<SymbolProps>["dynamic"] = undefined;
   export let builderContext: PropsWithBuilderData<SymbolProps>["builderContext"];
+  export let builderBlock: PropsWithBuilderData<SymbolProps>["builderBlock"];
   export let builderComponents: PropsWithBuilderData<SymbolProps>["builderComponents"];
 
   function setContent() {
@@ -62,7 +63,10 @@
     __isNestedRender={true}
     apiVersion={$builderContext.apiVersion}
     apiKey={$builderContext.apiKey}
-    context={$builderContext.context}
+    context={{
+      ...$builderContext.context,
+      symbolId: builderBlock?.id,
+    }}
     customComponents={Object.values(builderComponents)}
     data={{
       ...symbol?.data,

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

@@ -14,6 +14,8 @@ import { componentInfo as imgComponentInfo } from '../blocks/img/component-info.
 import { default as Img } from '../blocks/img/img.svelte';
 import { componentInfo as sectionComponentInfo } from '../blocks/section/component-info.js';
 import { default as Section } from '../blocks/section/section.svelte';
+import { componentInfo as slotComponentInfo } from '../blocks/slot/component-info.js';
+import { default as Slot } from '../blocks/slot/slot.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';
@@ -59,4 +61,7 @@ export const getDefaultRegisteredComponents: () => RegisteredComponent[] = () =>
 }, {
   component: Video,
   ...videoComponentInfo
+}, {
+  component: Slot,
+  ...slotComponentInfo
 }]

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.12.0"
+export const SDK_VERSION = "0.12.1"