@builder.io/sdk-qwik 0.1.5 → 0.1.7

package/README.md

@@ -89,7 +89,7 @@ export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
   {
     component: MyFunComponent,
     name: 'MyFunComponent',
-    builtIn: true,
+
     inputs: [
       {
         name: 'text',

package/lib/index.qwik.cjs

@@ -611,8 +611,7 @@ const renderComponentProps = function renderComponentProps2(props, state) {
           ...attributes(props),
           ...actions(props)
         }
-      },
-      customBreakpoints: childrenContext(props)?.content?.meta?.breakpoints
+      }
     },
     context: childrenContext(props)
   };
@@ -781,48 +780,48 @@ const STYLES$2 = `
   flex-direction: column;
   align-items: stretch;
 }`;
-const getGutterSize = function getGutterSize2(props, state) {
+const getGutterSize = function getGutterSize2(props, state, builderContext2) {
   return typeof props.space === "number" ? props.space || 0 : 20;
 };
-const getColumns = function getColumns2(props, state) {
+const getColumns = function getColumns2(props, state, builderContext2) {
   return props.columns || [];
 };
-const getWidth = function getWidth2(props, state, index) {
+const getWidth = function getWidth2(props, state, builderContext2, index) {
   const columns = getColumns(props);
   return columns[index]?.width || 100 / columns.length;
 };
-const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
+const getColumnCssWidth = function getColumnCssWidth2(props, state, builderContext2, index) {
   const columns = getColumns(props);
   const gutterSize = getGutterSize(props);
   const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-  return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
+  return `calc(${getWidth(props, state, builderContext2, index)}% - ${subtractWidth}px)`;
 };
-const maybeApplyForTablet = function maybeApplyForTablet2(props, state, prop) {
+const maybeApplyForTablet = function maybeApplyForTablet2(props, state, builderContext2, prop) {
   const _stackColumnsAt = props.stackColumnsAt || "tablet";
   return _stackColumnsAt === "tablet" ? prop : "inherit";
 };
-const columnsCssVars = function columnsCssVars2(props, state) {
+const columnsCssVars = function columnsCssVars2(props, state, builderContext2) {
   const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
   return {
     "--flex-dir": flexDir,
-    "--flex-dir-tablet": maybeApplyForTablet(props, state, flexDir)
+    "--flex-dir-tablet": maybeApplyForTablet(props, state, builderContext2, flexDir)
   };
 };
-const columnCssVars = function columnCssVars2(props, state) {
+const columnCssVars = function columnCssVars2(props, state, builderContext2) {
   const width = "100%";
   const marginLeft = "0";
   return {
     "--column-width": width,
     "--column-margin-left": marginLeft,
-    "--column-width-tablet": maybeApplyForTablet(props, state, width),
-    "--column-margin-left-tablet": maybeApplyForTablet(props, state, marginLeft)
+    "--column-width-tablet": maybeApplyForTablet(props, state, builderContext2, width),
+    "--column-margin-left-tablet": maybeApplyForTablet(props, state, builderContext2, marginLeft)
   };
 };
-const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
-  const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, builderContext2, size) {
+  const breakpointSizes = getSizesForBreakpoints(builderContext2.content?.meta?.breakpoints || {});
   return breakpointSizes[size].max;
 };
-const columnStyleObjects = function columnStyleObjects2(props, state) {
+const columnStyleObjects = function columnStyleObjects2(props, state, builderContext2) {
   return {
     columns: {
       small: {
@@ -846,9 +845,9 @@ const columnStyleObjects = function columnStyleObjects2(props, state) {
     }
   };
 };
-const columnsStyles = function columnsStyles2(props, state) {
+const columnsStyles = function columnsStyles2(props, state, builderContext2) {
   return `
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "medium")}px) {
           .${props.builderBlock.id}-breakpoints {
             ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
           }
@@ -858,7 +857,7 @@ const columnsStyles = function columnsStyles2(props, state) {
           }
         }
 
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "small")}px) {
           .${props.builderBlock.id}-breakpoints {
             ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
           }
@@ -871,25 +870,26 @@ const columnsStyles = function columnsStyles2(props, state) {
 };
 const Columns = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
   qwik.useStylesScopedQrl(qwik.inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  const builderContext$1 = qwik.useContext(builderContext);
   const state = {};
   return /* @__PURE__ */ jsxRuntime.jsxs("div", {
     class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
     style: {
       ...{},
-      ...columnsCssVars(props, state)
+      ...columnsCssVars(props, state, builderContext$1)
     },
     children: [
       /* @__PURE__ */ jsxRuntime.jsx(RenderInlinedStyles, {
-        styles: columnsStyles(props, state)
+        styles: columnsStyles(props, state, builderContext$1)
       }, "c0_0"),
       (props.columns || []).map(function(column, index) {
         return /* @__PURE__ */ jsxRuntime.jsx("div", {
           class: "builder-column div-Columns-2",
           style: {
-            width: getColumnCssWidth(props, state, index),
+            width: getColumnCssWidth(props, state, builderContext$1, index),
             marginLeft: `${index === 0 ? 0 : getGutterSize(props)}px`,
             ...{},
-            ...columnCssVars(props, state)
+            ...columnCssVars(props, state, builderContext$1)
           },
           children: /* @__PURE__ */ jsxRuntime.jsx(RenderBlocks, {
             get blocks() {
@@ -1091,7 +1091,6 @@ const STYLES = `
 }`;
 const componentInfo$a = {
   name: "Core:Button",
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
     appearance: "none",
@@ -1134,7 +1133,6 @@ const serializeFn = (fnValue) => {
 };
 const componentInfo$9 = {
   name: "Columns",
-  builtIn: true,
   inputs: [
     {
       name: "columns",
@@ -1377,14 +1375,12 @@ const componentInfo$8 = {
   name: "Fragment",
   static: true,
   hidden: true,
-  builtIn: true,
   canHaveChildren: true,
   noWrap: true
 };
 const componentInfo$7 = {
   name: "Image",
   static: true,
-  builtIn: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
   defaultStyles: {
     position: "relative",
@@ -1533,7 +1529,6 @@ const componentInfo$7 = {
 const componentInfo$6 = {
   name: "Core:Section",
   static: true,
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
   inputs: [
     {
@@ -1598,7 +1593,6 @@ const componentInfo$5 = {
   name: "Symbol",
   noWrap: true,
   static: true,
-  builtIn: true,
   inputs: [
     {
       name: "symbol",
@@ -1963,7 +1957,6 @@ const Symbol$1 = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
 const componentInfo$4 = {
   name: "Text",
   static: true,
-  builtIn: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
   inputs: [
     {
@@ -1995,7 +1988,6 @@ const Text = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
 const componentInfo$3 = {
   name: "Video",
   canHaveChildren: true,
-  builtIn: true,
   defaultStyles: {
     minHeight: "20px",
     minWidth: "20px"
@@ -2153,7 +2145,6 @@ const Video = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) => {
 const componentInfo$2 = {
   name: "Embed",
   static: true,
-  builtIn: true,
   inputs: [
     {
       name: "url",
@@ -2265,7 +2256,6 @@ const ImgComponent = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =
 const componentInfo$1 = {
   name: "Raw:Img",
   hideFromInsertMenu: true,
-  builtIn: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
   inputs: [
     {
@@ -2342,7 +2332,6 @@ const CustomCode = /* @__PURE__ */ qwik.componentQrl(qwik.inlinedQrl((props) =>
 const componentInfo = {
   name: "Custom Code",
   static: true,
-  builtIn: true,
   requiredPermissions: [
     "editCode"
   ],

package/lib/index.qwik.mjs

@@ -609,8 +609,7 @@ const renderComponentProps = function renderComponentProps2(props, state) {
           ...attributes(props),
           ...actions(props)
         }
-      },
-      customBreakpoints: childrenContext(props)?.content?.meta?.breakpoints
+      }
     },
     context: childrenContext(props)
   };
@@ -779,48 +778,48 @@ const STYLES$2 = `
   flex-direction: column;
   align-items: stretch;
 }`;
-const getGutterSize = function getGutterSize2(props, state) {
+const getGutterSize = function getGutterSize2(props, state, builderContext2) {
   return typeof props.space === "number" ? props.space || 0 : 20;
 };
-const getColumns = function getColumns2(props, state) {
+const getColumns = function getColumns2(props, state, builderContext2) {
   return props.columns || [];
 };
-const getWidth = function getWidth2(props, state, index) {
+const getWidth = function getWidth2(props, state, builderContext2, index) {
   const columns = getColumns(props);
   return columns[index]?.width || 100 / columns.length;
 };
-const getColumnCssWidth = function getColumnCssWidth2(props, state, index) {
+const getColumnCssWidth = function getColumnCssWidth2(props, state, builderContext2, index) {
   const columns = getColumns(props);
   const gutterSize = getGutterSize(props);
   const subtractWidth = gutterSize * (columns.length - 1) / columns.length;
-  return `calc(${getWidth(props, state, index)}% - ${subtractWidth}px)`;
+  return `calc(${getWidth(props, state, builderContext2, index)}% - ${subtractWidth}px)`;
 };
-const maybeApplyForTablet = function maybeApplyForTablet2(props, state, prop) {
+const maybeApplyForTablet = function maybeApplyForTablet2(props, state, builderContext2, prop) {
   const _stackColumnsAt = props.stackColumnsAt || "tablet";
   return _stackColumnsAt === "tablet" ? prop : "inherit";
 };
-const columnsCssVars = function columnsCssVars2(props, state) {
+const columnsCssVars = function columnsCssVars2(props, state, builderContext2) {
   const flexDir = props.stackColumnsAt === "never" ? "inherit" : props.reverseColumnsWhenStacked ? "column-reverse" : "column";
   return {
     "--flex-dir": flexDir,
-    "--flex-dir-tablet": maybeApplyForTablet(props, state, flexDir)
+    "--flex-dir-tablet": maybeApplyForTablet(props, state, builderContext2, flexDir)
   };
 };
-const columnCssVars = function columnCssVars2(props, state) {
+const columnCssVars = function columnCssVars2(props, state, builderContext2) {
   const width = "100%";
   const marginLeft = "0";
   return {
     "--column-width": width,
     "--column-margin-left": marginLeft,
-    "--column-width-tablet": maybeApplyForTablet(props, state, width),
-    "--column-margin-left-tablet": maybeApplyForTablet(props, state, marginLeft)
+    "--column-width-tablet": maybeApplyForTablet(props, state, builderContext2, width),
+    "--column-margin-left-tablet": maybeApplyForTablet(props, state, builderContext2, marginLeft)
   };
 };
-const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, size) {
-  const breakpointSizes = getSizesForBreakpoints(props.customBreakpoints || {});
+const getWidthForBreakpointSize = function getWidthForBreakpointSize2(props, state, builderContext2, size) {
+  const breakpointSizes = getSizesForBreakpoints(builderContext2.content?.meta?.breakpoints || {});
   return breakpointSizes[size].max;
 };
-const columnStyleObjects = function columnStyleObjects2(props, state) {
+const columnStyleObjects = function columnStyleObjects2(props, state, builderContext2) {
   return {
     columns: {
       small: {
@@ -844,9 +843,9 @@ const columnStyleObjects = function columnStyleObjects2(props, state) {
     }
   };
 };
-const columnsStyles = function columnsStyles2(props, state) {
+const columnsStyles = function columnsStyles2(props, state, builderContext2) {
   return `
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "medium")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "medium")}px) {
           .${props.builderBlock.id}-breakpoints {
             ${convertStyleMapToCSS(columnStyleObjects().columns.medium)}
           }
@@ -856,7 +855,7 @@ const columnsStyles = function columnsStyles2(props, state) {
           }
         }
 
-        @media (max-width: ${getWidthForBreakpointSize(props, state, "small")}px) {
+        @media (max-width: ${getWidthForBreakpointSize(props, state, builderContext2, "small")}px) {
           .${props.builderBlock.id}-breakpoints {
             ${convertStyleMapToCSS(columnStyleObjects().columns.small)}
           }
@@ -869,25 +868,26 @@ const columnsStyles = function columnsStyles2(props, state) {
 };
 const Columns = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
   useStylesScopedQrl(inlinedQrl(STYLES$1, "Columns_component_useStylesScoped_s7JLZz7MCCQ"));
+  const builderContext$1 = useContext(builderContext);
   const state = {};
   return /* @__PURE__ */ jsxs("div", {
     class: `builder-columns ${props.builderBlock.id}-breakpoints div-Columns`,
     style: {
       ...{},
-      ...columnsCssVars(props, state)
+      ...columnsCssVars(props, state, builderContext$1)
     },
     children: [
       /* @__PURE__ */ jsx(RenderInlinedStyles, {
-        styles: columnsStyles(props, state)
+        styles: columnsStyles(props, state, builderContext$1)
       }, "c0_0"),
       (props.columns || []).map(function(column, index) {
         return /* @__PURE__ */ jsx("div", {
           class: "builder-column div-Columns-2",
           style: {
-            width: getColumnCssWidth(props, state, index),
+            width: getColumnCssWidth(props, state, builderContext$1, index),
             marginLeft: `${index === 0 ? 0 : getGutterSize(props)}px`,
             ...{},
-            ...columnCssVars(props, state)
+            ...columnCssVars(props, state, builderContext$1)
           },
           children: /* @__PURE__ */ jsx(RenderBlocks, {
             get blocks() {
@@ -1089,7 +1089,6 @@ const STYLES = `
 }`;
 const componentInfo$a = {
   name: "Core:Button",
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
   defaultStyles: {
     appearance: "none",
@@ -1132,7 +1131,6 @@ const serializeFn = (fnValue) => {
 };
 const componentInfo$9 = {
   name: "Columns",
-  builtIn: true,
   inputs: [
     {
       name: "columns",
@@ -1375,14 +1373,12 @@ const componentInfo$8 = {
   name: "Fragment",
   static: true,
   hidden: true,
-  builtIn: true,
   canHaveChildren: true,
   noWrap: true
 };
 const componentInfo$7 = {
   name: "Image",
   static: true,
-  builtIn: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
   defaultStyles: {
     position: "relative",
@@ -1531,7 +1527,6 @@ const componentInfo$7 = {
 const componentInfo$6 = {
   name: "Core:Section",
   static: true,
-  builtIn: true,
   image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a",
   inputs: [
     {
@@ -1596,7 +1591,6 @@ const componentInfo$5 = {
   name: "Symbol",
   noWrap: true,
   static: true,
-  builtIn: true,
   inputs: [
     {
       name: "symbol",
@@ -1961,7 +1955,6 @@ const Symbol$1 = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
 const componentInfo$4 = {
   name: "Text",
   static: true,
-  builtIn: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-text_fields-24px%20(1).svg?alt=media&token=12177b73-0ee3-42ca-98c6-0dd003de1929",
   inputs: [
     {
@@ -1993,7 +1986,6 @@ const Text = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
 const componentInfo$3 = {
   name: "Video",
   canHaveChildren: true,
-  builtIn: true,
   defaultStyles: {
     minHeight: "20px",
     minWidth: "20px"
@@ -2151,7 +2143,6 @@ const Video = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
 const componentInfo$2 = {
   name: "Embed",
   static: true,
-  builtIn: true,
   inputs: [
     {
       name: "url",
@@ -2263,7 +2254,6 @@ const ImgComponent = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
 const componentInfo$1 = {
   name: "Raw:Img",
   hideFromInsertMenu: true,
-  builtIn: true,
   image: "https://firebasestorage.googleapis.com/v0/b/builder-3b0a2.appspot.com/o/images%2Fbaseline-insert_photo-24px.svg?alt=media&token=4e5d0ef4-f5e8-4e57-b3a9-38d63a9b9dc4",
   inputs: [
     {
@@ -2340,7 +2330,6 @@ const CustomCode = /* @__PURE__ */ componentQrl(inlinedQrl((props) => {
 const componentInfo = {
   name: "Custom Code",
   static: true,
-  builtIn: true,
   requiredPermissions: [
     "editCode"
   ],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@builder.io/sdk-qwik",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "description": "Builder.io Qwik SDK",
   "type": "module",
   "main": "./lib/index.qwik.cjs",

package/types/blocks/columns/columns.d.ts

@@ -1,6 +1,5 @@
 import type { BuilderBlock } from "../../types/builder-block";
 import type { SizeName } from "../../constants/device-sizes";
-import type { Breakpoints } from "../../types/builder-content";
 declare type Column = {
     blocks: any;
     width?: number;
@@ -12,25 +11,24 @@ export interface ColumnProps {
     space?: number;
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
-    customBreakpoints?: Breakpoints;
 }
-export declare const getGutterSize: (props: any, state: any) => any;
-export declare const getColumns: (props: any, state: any) => any;
-export declare const getWidth: (props: any, state: any, index: number) => any;
-export declare const getColumnCssWidth: (props: any, state: any, index: number) => string;
-export declare const maybeApplyForTablet: (props: any, state: any, prop: string | undefined) => string | undefined;
-export declare const columnsCssVars: (props: any, state: any) => {
+export declare const getGutterSize: (props: any, state: any, builderContext: any) => any;
+export declare const getColumns: (props: any, state: any, builderContext: any) => any;
+export declare const getWidth: (props: any, state: any, builderContext: any, index: number) => any;
+export declare const getColumnCssWidth: (props: any, state: any, builderContext: any, index: number) => string;
+export declare const maybeApplyForTablet: (props: any, state: any, builderContext: any, prop: string | undefined) => string | undefined;
+export declare const columnsCssVars: (props: any, state: any, builderContext: any) => {
     "--flex-dir": string;
     "--flex-dir-tablet": string | undefined;
 };
-export declare const columnCssVars: (props: any, state: any) => {
+export declare const columnCssVars: (props: any, state: any, builderContext: any) => {
     "--column-width": string;
     "--column-margin-left": string;
     "--column-width-tablet": string | undefined;
     "--column-margin-left-tablet": string | undefined;
 };
-export declare const getWidthForBreakpointSize: (props: any, state: any, size: SizeName) => number;
-export declare const columnStyleObjects: (props: any, state: any) => {
+export declare const getWidthForBreakpointSize: (props: any, state: any, builderContext: any, size: SizeName) => number;
+export declare const columnStyleObjects: (props: any, state: any, builderContext: any) => {
     columns: {
         small: {
             flexDirection: string;
@@ -52,12 +50,12 @@ export declare const columnStyleObjects: (props: any, state: any) => {
         };
     };
 };
-export declare const columnsStyles: (props: any, state: any) => string;
-export declare const reactNativeColumnsStyles: (props: any, state: any) => {
+export declare const columnsStyles: (props: any, state: any, builderContext: any) => string;
+export declare const reactNativeColumnsStyles: (props: any, state: any, builderContext: any) => {
     flexDirection: string;
     alignItems: string;
 };
-export declare const reactNativeColumnStyles: (props: any, state: any) => {
+export declare const reactNativeColumnStyles: (props: any, state: any, builderContext: any) => {
     width: string;
     marginLeft: string;
 };

package/types/components/render-block/render-component.d.ts

@@ -1,9 +1,7 @@
 import type { BuilderBlock } from "../../types/builder-block.js";
 import type { BuilderContextInterface } from "../../context/types.js";
-import type { Breakpoints } from "../../types/builder-content.js";
 declare type ComponentOptions = {
     [index: string]: any;
-    customBreakpoints?: Breakpoints;
     attributes?: {
         [index: string]: any;
     };
@@ -13,7 +11,6 @@ export interface RenderComponentProps {
     componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
-    customBreakpoints?: Breakpoints;
 }
 export declare const RenderComponent: (props: RenderComponentProps & {
     key?: any;

package/types/types/components.d.ts

@@ -122,7 +122,6 @@ export interface ComponentInfo {
      * Passing a list of model names will restrict using the component to only the models listed here, otherwise it'll be available for all models
      */
     models?: string[];
-    builtIn: true;
     /**
      * Specify restrictions direct children must match
      */