@builder.io/sdk-solid 0.11.5 → 0.12.1

package/lib/browser/dev.js

@@ -2375,8 +2375,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,
@@ -2412,7 +2454,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2431,10 +2473,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$;
@@ -2443,7 +2485,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2525,7 +2567,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) {
@@ -2588,7 +2630,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;
       }
@@ -2670,13 +2712,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
@@ -2747,10 +2792,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$);
@@ -3250,7 +3295,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.11.5";
+var SDK_VERSION = "0.12.1";
 
 // src/functions/register.ts
 var registry = {};
@@ -4167,7 +4212,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() {
@@ -4193,7 +4238,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();
@@ -4208,7 +4253,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/browser/dev.jsx

@@ -2098,8 +2098,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,
@@ -2135,7 +2169,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2168,7 +2202,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2365,13 +2399,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
@@ -2938,7 +2975,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.11.5";
+var SDK_VERSION = "0.12.1";
 
 // src/functions/register.ts
 var registry = {};
@@ -3752,7 +3789,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/browser/index.js

@@ -2366,8 +2366,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,
@@ -2403,7 +2445,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2422,10 +2464,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$;
@@ -2434,7 +2476,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2516,7 +2558,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) {
@@ -2579,7 +2621,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;
       }
@@ -2661,13 +2703,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
@@ -2738,10 +2783,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$);
@@ -3236,7 +3281,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.11.5";
+var SDK_VERSION = "0.12.1";
 
 // src/functions/register.ts
 var registry = {};
@@ -4151,7 +4196,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() {
@@ -4177,7 +4222,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();
@@ -4192,7 +4237,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/browser/index.jsx

@@ -2089,8 +2089,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,
@@ -2126,7 +2160,7 @@ var componentInfo9 = {
 };
 
 // src/blocks/text/component-info.ts
-var componentInfo10 = {
+var componentInfo11 = {
   name: "Text",
   static: true,
   isRSC: true,
@@ -2159,7 +2193,7 @@ function Text(props) {
 var text_default = Text;
 
 // src/blocks/video/component-info.ts
-var componentInfo11 = {
+var componentInfo12 = {
   name: "Video",
   canHaveChildren: true,
   defaultStyles: {
@@ -2356,13 +2390,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
@@ -2924,7 +2961,7 @@ var getInteractionPropertiesForEvent = (event) => {
 };
 
 // src/constants/sdk-version.ts
-var SDK_VERSION = "0.11.5";
+var SDK_VERSION = "0.12.1";
 
 // src/functions/register.ts
 var registry = {};
@@ -3736,7 +3773,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,