@builder.io/sdk-solid 0.12.0 → 0.12.1

package/lib/node/dev.js

@@ -2499,8 +2499,50 @@ var componentInfo8 = {
   }]
 };
 
-// src/blocks/symbol/component-info.ts
+// src/blocks/slot/component-info.ts
 var componentInfo9 = {
+  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"
+  }]
+};
+var _tmpl$11 = /* @__PURE__ */ template(`<div>`);
+function Slot(props) {
+  return (() => {
+    const _el$ = _tmpl$11();
+    _el$.style.setProperty("pointer-events", "auto");
+    spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
+      "builder-slot": props.name
+    }), false, true);
+    insert(_el$, createComponent(blocks_default, {
+      get parent() {
+        return props.builderContext.context?.symbolId;
+      },
+      get path() {
+        return `symbol.data.${props.name}`;
+      },
+      get context() {
+        return props.builderContext;
+      },
+      get blocks() {
+        return props.builderContext.rootState?.[props.name];
+      }
+    }));
+    return _el$;
+  })();
+}
+var slot_default = Slot;
+
+// src/blocks/symbol/component-info.ts
+var componentInfo10 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2536,7 +2578,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2555,10 +2597,10 @@ var componentInfo10 = {
     textAlign: "center"
   }
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<div class=builder-text>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
   return (() => {
-    const _el$ = _tmpl$11();
+    const _el$ = _tmpl$12();
     _el$.style.setProperty("outline", "none");
     effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
@@ -2567,7 +2609,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2649,7 +2691,7 @@ var componentInfo11 = {
     advanced: true
   }]
 };
-var _tmpl$12 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<source type=video/mp4>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
@@ -2712,7 +2754,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$12();
+        const _el$3 = _tmpl$13();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -2794,13 +2836,16 @@ var getDefaultRegisteredComponents = () => [{
   ...componentInfo8
 }, {
   component: symbol_default,
-  ...componentInfo9
+  ...componentInfo10
 }, {
   component: text_default,
-  ...componentInfo10
+  ...componentInfo11
 }, {
   component: video_default,
-  ...componentInfo11
+  ...componentInfo12
+}, {
+  component: slot_default,
+  ...componentInfo9
 }];
 
 // src/functions/register-component.ts
@@ -2871,10 +2916,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$13 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$13();
+    const _el$ = _tmpl$14();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id || "";
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -3374,7 +3419,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.0";
+var SDK_VERSION = "0.12.1";
 
 // src/functions/register.ts
 var registry = {};
@@ -4291,7 +4336,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$14 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   function className() {
@@ -4317,7 +4362,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [props.symbol], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$14();
+    const _el$ = _tmpl$15();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();
@@ -4332,7 +4377,10 @@ function Symbol(props) {
         return props.builderContext.apiKey;
       },
       get context() {
-        return props.builderContext.context;
+        return {
+          ...props.builderContext.context,
+          symbolId: props.builderBlock?.id
+        };
       },
       get customComponents() {
         return Object.values(props.builderComponents);

package/lib/node/dev.jsx

@@ -2224,8 +2224,42 @@ var componentInfo8 = {
   }]
 };
 
-// src/blocks/symbol/component-info.ts
+// src/blocks/slot/component-info.ts
 var componentInfo9 = {
+  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"
+  }]
+};
+
+// src/blocks/slot/slot.tsx
+function Slot(props) {
+  return <div
+    style={{
+      "pointer-events": "auto"
+    }}
+    {...!props.builderContext.context?.symbolId && {
+      "builder-slot": props.name
+    }}
+  ><Blocks_default
+    parent={props.builderContext.context?.symbolId}
+    path={`symbol.data.${props.name}`}
+    context={props.builderContext}
+    blocks={props.builderContext.rootState?.[props.name]}
+  /></div>;
+}
+var slot_default = Slot;
+
+// src/blocks/symbol/component-info.ts
+var componentInfo10 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2261,7 +2295,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2294,7 +2328,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2491,13 +2525,16 @@ var getDefaultRegisteredComponents = () => [{
   ...componentInfo8
 }, {
   component: symbol_default,
-  ...componentInfo9
+  ...componentInfo10
 }, {
   component: text_default,
-  ...componentInfo10
+  ...componentInfo11
 }, {
   component: video_default,
-  ...componentInfo11
+  ...componentInfo12
+}, {
+  component: slot_default,
+  ...componentInfo9
 }];
 
 // src/functions/register-component.ts
@@ -3064,7 +3101,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.0";
+var SDK_VERSION = "0.12.1";
 
 // src/functions/register.ts
 var registry = {};
@@ -3878,7 +3915,10 @@ function Symbol(props) {
     __isNestedRender={true}
     apiVersion={props.builderContext.apiVersion}
     apiKey={props.builderContext.apiKey}
-    context={props.builderContext.context}
+    context={{
+      ...props.builderContext.context,
+      symbolId: props.builderBlock?.id
+    }}
     customComponents={Object.values(props.builderComponents)}
     data={{
       ...props.symbol?.data,

package/lib/node/index.js

@@ -2489,8 +2489,50 @@ var componentInfo8 = {
   }]
 };
 
-// src/blocks/symbol/component-info.ts
+// src/blocks/slot/component-info.ts
 var componentInfo9 = {
+  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"
+  }]
+};
+var _tmpl$11 = /* @__PURE__ */ template(`<div>`);
+function Slot(props) {
+  return (() => {
+    const _el$ = _tmpl$11();
+    _el$.style.setProperty("pointer-events", "auto");
+    spread(_el$, mergeProps(() => !props.builderContext.context?.symbolId && {
+      "builder-slot": props.name
+    }), false, true);
+    insert(_el$, createComponent(blocks_default, {
+      get parent() {
+        return props.builderContext.context?.symbolId;
+      },
+      get path() {
+        return `symbol.data.${props.name}`;
+      },
+      get context() {
+        return props.builderContext;
+      },
+      get blocks() {
+        return props.builderContext.rootState?.[props.name];
+      }
+    }));
+    return _el$;
+  })();
+}
+var slot_default = Slot;
+
+// src/blocks/symbol/component-info.ts
+var componentInfo10 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2526,7 +2568,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2545,10 +2587,10 @@ var componentInfo10 = {
     textAlign: "center"
   }
 };
-var _tmpl$11 = /* @__PURE__ */ template(`<div class=builder-text>`);
+var _tmpl$12 = /* @__PURE__ */ template(`<div class=builder-text>`);
 function Text(props) {
   return (() => {
-    const _el$ = _tmpl$11();
+    const _el$ = _tmpl$12();
     _el$.style.setProperty("outline", "none");
     effect(() => _el$.innerHTML = props.text?.toString() || "");
     return _el$;
@@ -2557,7 +2599,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2639,7 +2681,7 @@ var componentInfo11 = {
     advanced: true
   }]
 };
-var _tmpl$12 = /* @__PURE__ */ template(`<source type=video/mp4>`);
+var _tmpl$13 = /* @__PURE__ */ template(`<source type=video/mp4>`);
 var _tmpl$23 = /* @__PURE__ */ template(`<div>`);
 var _tmpl$33 = /* @__PURE__ */ template(`<div><video class=builder-video>`);
 function Video(props) {
@@ -2702,7 +2744,7 @@ function Video(props) {
         return !props.lazyLoad;
       },
       get children() {
-        const _el$3 = _tmpl$12();
+        const _el$3 = _tmpl$13();
         effect(() => setAttribute(_el$3, "src", props.video));
         return _el$3;
       }
@@ -2784,13 +2826,16 @@ var getDefaultRegisteredComponents = () => [{
   ...componentInfo8
 }, {
   component: symbol_default,
-  ...componentInfo9
+  ...componentInfo10
 }, {
   component: text_default,
-  ...componentInfo10
+  ...componentInfo11
 }, {
   component: video_default,
-  ...componentInfo11
+  ...componentInfo12
+}, {
+  component: slot_default,
+  ...componentInfo9
 }];
 
 // src/functions/register-component.ts
@@ -2861,10 +2906,10 @@ var getUpdateVariantVisibilityScript = ({
 }) => `window.${UPDATE_VARIANT_VISIBILITY_SCRIPT_FN_NAME}(
     "${variationId}", "${contentId}", ${isHydrationTarget}
   )`;
-var _tmpl$13 = /* @__PURE__ */ template(`<script>`);
+var _tmpl$14 = /* @__PURE__ */ template(`<script>`);
 function InlinedScript(props) {
   return (() => {
-    const _el$ = _tmpl$13();
+    const _el$ = _tmpl$14();
     effect((_p$) => {
       const _v$ = props.scriptStr, _v$2 = props.id || "";
       _v$ !== _p$._v$ && (_el$.innerHTML = _p$._v$ = _v$);
@@ -3359,7 +3404,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.0";
+var SDK_VERSION = "0.12.1";
 
 // src/functions/register.ts
 var registry = {};
@@ -4274,7 +4319,7 @@ var fetchSymbolContent = async ({
 };
 
 // src/blocks/symbol/symbol.tsx
-var _tmpl$14 = /* @__PURE__ */ template(`<div>`);
+var _tmpl$15 = /* @__PURE__ */ template(`<div>`);
 function Symbol(props) {
   const [contentToUse, setContentToUse] = createSignal(props.symbol?.content);
   function className() {
@@ -4300,7 +4345,7 @@ function Symbol(props) {
   }
   createEffect(on(() => [props.symbol], onUpdateFn_0));
   return (() => {
-    const _el$ = _tmpl$14();
+    const _el$ = _tmpl$15();
     spread(_el$, mergeProps({
       get ["class"]() {
         return className();
@@ -4315,7 +4360,10 @@ function Symbol(props) {
         return props.builderContext.apiKey;
       },
       get context() {
-        return props.builderContext.context;
+        return {
+          ...props.builderContext.context,
+          symbolId: props.builderBlock?.id
+        };
       },
       get customComponents() {
         return Object.values(props.builderComponents);

package/lib/node/index.jsx

@@ -2214,8 +2214,42 @@ var componentInfo8 = {
   }]
 };
 
-// src/blocks/symbol/component-info.ts
+// src/blocks/slot/component-info.ts
 var componentInfo9 = {
+  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"
+  }]
+};
+
+// src/blocks/slot/slot.tsx
+function Slot(props) {
+  return <div
+    style={{
+      "pointer-events": "auto"
+    }}
+    {...!props.builderContext.context?.symbolId && {
+      "builder-slot": props.name
+    }}
+  ><Blocks_default
+    parent={props.builderContext.context?.symbolId}
+    path={`symbol.data.${props.name}`}
+    context={props.builderContext}
+    blocks={props.builderContext.rootState?.[props.name]}
+  /></div>;
+}
+var slot_default = Slot;
+
+// src/blocks/symbol/component-info.ts
+var componentInfo10 = {
   name: "Symbol",
   noWrap: true,
   static: true,
@@ -2251,7 +2285,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2284,7 +2318,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2481,13 +2515,16 @@ var getDefaultRegisteredComponents = () => [{
   ...componentInfo8
 }, {
   component: symbol_default,
-  ...componentInfo9
+  ...componentInfo10
 }, {
   component: text_default,
-  ...componentInfo10
+  ...componentInfo11
 }, {
   component: video_default,
-  ...componentInfo11
+  ...componentInfo12
+}, {
+  component: slot_default,
+  ...componentInfo9
 }];
 
 // src/functions/register-component.ts
@@ -3049,7 +3086,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.12.0";
+var SDK_VERSION = "0.12.1";
 
 // src/functions/register.ts
 var registry = {};
@@ -3861,7 +3898,10 @@ function Symbol(props) {
     __isNestedRender={true}
     apiVersion={props.builderContext.apiVersion}
     apiKey={props.builderContext.apiKey}
-    context={props.builderContext.context}
+    context={{
+      ...props.builderContext.context,
+      symbolId: props.builderBlock?.id
+    }}
     customComponents={Object.values(props.builderComponents)}
     data={{
       ...props.symbol?.data,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.12.0",
+  "version": "0.12.1",
   "description": "",
   "files": [
     "dist",