@builder.io/sdk-svelte 0.1.5 → 0.1.7

package/package/--package.json

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

package/package/CHANGELOG.md

@@ -1,3 +1,7 @@
+### 0.1.6
+
+- Types: removed redundant `builtIn` field in `customComponents` prop types
+
 ### 0.1.5
 
 - Feature: Global CSS Nesting (`&` operator) support

package/package/blocks/button/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Core:Button',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
     defaultStyles: {
         // TODO: make min width more intuitive and set one

package/package/blocks/columns/columns.svelte

@@ -1,15 +1,16 @@
 <script context="module"></script>
 
-<script>import RenderBlocks from "../../components/render-blocks.svelte";
+<script>import { getContext } from "svelte";
+import RenderBlocks from "../../components/render-blocks.svelte";
 import { getSizesForBreakpoints } from "../../constants/device-sizes";
 import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
 import { TARGET } from "../../constants/target.js";
 import { convertStyleMapToCSS } from "../../helpers/css";
+import BuilderContext from "../../context/builder.context.js";
 export let space;
 export let columns;
 export let stackColumnsAt;
 export let reverseColumnsWhenStacked;
-export let customBreakpoints;
 export let builderBlock;
 function mitosis_styling(node, vars) {
     Object.entries(vars || {}).forEach(([p, v]) => {
@@ -21,6 +22,7 @@ function mitosis_styling(node, vars) {
         }
     });
 }
+let builderContext = getContext(BuilderContext.key);
 function getGutterSize() {
     return typeof space === "number" ? space || 0 : 20;
 }
@@ -42,7 +44,7 @@ function maybeApplyForTablet(prop) {
     return _stackColumnsAt === "tablet" ? prop : "inherit";
 }
 function getWidthForBreakpointSize(size) {
-    const breakpointSizes = getSizesForBreakpoints(customBreakpoints || {});
+    const breakpointSizes = getSizesForBreakpoints(builderContext.content?.meta?.breakpoints || {});
     return breakpointSizes[size].max;
 }
 $: columnsCssVars = () => {

package/package/blocks/columns/columns.svelte.d.ts

@@ -1,6 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
 import type { BuilderBlock } from "../../types/builder-block";
-import type { Breakpoints } from "../../types/builder-content";
 declare type Column = {
     blocks: any;
     width?: number;
@@ -12,7 +11,6 @@ export interface ColumnProps {
     space?: number;
     stackColumnsAt?: StackColumnsAt;
     reverseColumnsWhenStacked?: boolean;
-    customBreakpoints?: Breakpoints;
 }
 declare const __propDef: {
     props: {
@@ -20,7 +18,6 @@ declare const __propDef: {
         columns: ColumnProps["columns"];
         stackColumnsAt: ColumnProps["stackColumnsAt"];
         reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
-        customBreakpoints: ColumnProps["customBreakpoints"];
         builderBlock: ColumnProps["builderBlock"];
     };
     events: {

package/package/blocks/columns/component-info.js

@@ -2,7 +2,6 @@ import { serializeFn } from '../util.js';
 export const componentInfo = {
     // TODO: ways to statically preprocess JSON for references, functions, etc
     name: 'Columns',
-    builtIn: true,
     inputs: [
         {
             name: 'columns',

package/package/blocks/custom-code/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     name: 'Custom Code',
     static: true,
-    builtIn: true,
     requiredPermissions: ['editCode'],
     inputs: [
         {

package/package/blocks/embed/component-info.js

@@ -2,7 +2,6 @@ import { serializeFn } from '../util.js';
 export const componentInfo = {
     name: 'Embed',
     static: true,
-    builtIn: true,
     inputs: [
         {
             name: 'url',

package/package/blocks/form/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:Form',
-    builtIn: true,
     // editableTags: ['builder-form-error']
     defaults: {
         responsiveStyles: {

package/package/blocks/fragment/component-info.js

@@ -2,7 +2,6 @@ export const componentInfo = {
     name: 'Fragment',
     static: true,
     hidden: true,
-    builtIn: true,
     canHaveChildren: true,
     noWrap: true,
 };

package/package/blocks/image/component-info.js

@@ -2,7 +2,6 @@ import { serializeFn } from '../util.js';
 export const componentInfo = {
     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',

package/package/blocks/img/component-info.js

@@ -2,7 +2,6 @@ export const componentInfo = {
     // friendlyName?
     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: [
         {

package/package/blocks/input/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:Input',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
     inputs: [
         {

package/package/blocks/raw-text/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     name: 'Builder:RawText',
     hideFromInsertMenu: true,
-    builtIn: true,
     inputs: [
         {
             name: 'text',

package/package/blocks/section/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     name: 'Core:Section',
     static: true,
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a',
     inputs: [
         {

package/package/blocks/select/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:Select',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
     defaultStyles: {
         alignSelf: 'flex-start',

package/package/blocks/submit-button/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:SubmitButton',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
     defaultStyles: {
         appearance: 'none',

package/package/blocks/symbol/component-info.js

@@ -2,7 +2,6 @@ export const componentInfo = {
     name: 'Symbol',
     noWrap: true,
     static: true,
-    builtIn: true,
     inputs: [
         {
             name: 'symbol',

package/package/blocks/text/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     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: [
         {

package/package/blocks/textarea/component-info.js

@@ -1,6 +1,5 @@
 export const componentInfo = {
     name: 'Form:TextArea',
-    builtIn: true,
     image: 'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
     inputs: [
         {

package/package/blocks/video/component-info.js

@@ -1,7 +1,6 @@
 export const componentInfo = {
     name: 'Video',
     canHaveChildren: true,
-    builtIn: true,
     defaultStyles: {
         minHeight: '20px',
         minWidth: '20px',

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

@@ -99,7 +99,6 @@ $: renderComponentProps = () => {
                         ...actions(),
                     },
                 }),
-            customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
         },
         context: childrenContext(),
     };

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

@@ -1,10 +1,8 @@
 import { SvelteComponentTyped } from "svelte";
 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;
     };
@@ -14,7 +12,6 @@ export interface RenderComponentProps {
     componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
-    customBreakpoints?: Breakpoints;
 }
 declare const __propDef: {
     props: {

package/package/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
      */

package/package.json

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

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

@@ -2,7 +2,7 @@ import type { ComponentInfo } from '../../types/components';
 
 export const componentInfo: ComponentInfo = {
   name: 'Core:Button',
-  builtIn: true,
+
   image:
     'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13',
   defaultStyles: {

package/src/blocks/columns/columns.svelte

@@ -3,8 +3,6 @@
 
   import type { SizeName } from "../../constants/device-sizes";
 
-  import type { Breakpoints } from "../../types/builder-content";
-
   type Column = {
     blocks: any;
     // TODO: Implement this when support for dynamic CSS lands
@@ -23,22 +21,23 @@
     stackColumnsAt?: StackColumnsAt;
     // TODO: Implement this when support for dynamic CSS lands
     reverseColumnsWhenStacked?: boolean;
-    customBreakpoints?: Breakpoints;
   }
 </script>
 
 <script lang="ts">
+  import { getContext } from "svelte";
+
   import RenderBlocks from "../../components/render-blocks.svelte";
   import { getSizesForBreakpoints } from "../../constants/device-sizes";
   import RenderInlinedStyles from "../../components/render-inlined-styles.svelte";
   import { TARGET } from "../../constants/target.js";
   import { convertStyleMapToCSS } from "../../helpers/css";
+  import BuilderContext from "../../context/builder.context.js";
 
   export let space: ColumnProps["space"];
   export let columns: ColumnProps["columns"];
   export let stackColumnsAt: ColumnProps["stackColumnsAt"];
   export let reverseColumnsWhenStacked: ColumnProps["reverseColumnsWhenStacked"];
-  export let customBreakpoints: ColumnProps["customBreakpoints"];
   export let builderBlock: ColumnProps["builderBlock"];
 
   function mitosis_styling(node, vars) {
@@ -51,6 +50,8 @@
     });
   }
 
+  let builderContext = getContext(BuilderContext.key);
+
   function getGutterSize() {
     return typeof space === "number" ? space || 0 : 20;
   }
@@ -72,7 +73,9 @@
     return _stackColumnsAt === "tablet" ? prop : "inherit";
   }
   function getWidthForBreakpointSize(size) {
-    const breakpointSizes = getSizesForBreakpoints(customBreakpoints || {});
+    const breakpointSizes = getSizesForBreakpoints(
+      builderContext.content?.meta?.breakpoints || {}
+    );
     return breakpointSizes[size].max;
   }
   $: columnsCssVars = () => {

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

@@ -4,7 +4,7 @@ import { serializeFn } from '../util.js';
 export const componentInfo: ComponentInfo = {
   // TODO: ways to statically preprocess JSON for references, functions, etc
   name: 'Columns',
-  builtIn: true,
+
   inputs: [
     {
       name: 'columns',

package/src/blocks/custom-code/component-info.ts

@@ -3,7 +3,7 @@ import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Custom Code',
   static: true,
-  builtIn: true,
+
   requiredPermissions: ['editCode'],
   inputs: [
     {

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

@@ -4,7 +4,7 @@ import { serializeFn } from '../util.js';
 export const componentInfo: ComponentInfo = {
   name: 'Embed',
   static: true,
-  builtIn: true,
+
   inputs: [
     {
       name: 'url',

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

@@ -2,7 +2,7 @@ import type { ComponentInfo } from '../../types/components';
 
 export const componentInfo: ComponentInfo = {
   name: 'Form:Form',
-  builtIn: true,
+
   // editableTags: ['builder-form-error']
   defaults: {
     responsiveStyles: {

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

@@ -4,7 +4,7 @@ export const componentInfo: ComponentInfo = {
   name: 'Fragment',
   static: true,
   hidden: true,
-  builtIn: true,
+
   canHaveChildren: true,
   noWrap: true,
 };

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

@@ -4,7 +4,7 @@ import { serializeFn } from '../util.js';
 export const componentInfo: ComponentInfo = {
   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: {

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

@@ -4,7 +4,7 @@ export const componentInfo: ComponentInfo = {
   // friendlyName?
   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: [

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

@@ -2,7 +2,7 @@ import type { ComponentInfo } from '../../types/components';
 
 export const componentInfo: ComponentInfo = {
   name: 'Form:Input',
-  builtIn: true,
+
   image:
     'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fad6f37889d9e40bbbbc72cdb5875d6ca',
   inputs: [

package/src/blocks/raw-text/component-info.ts

@@ -3,7 +3,7 @@ import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Builder:RawText',
   hideFromInsertMenu: true,
-  builtIn: true,
+
   inputs: [
     {
       name: 'text',

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

@@ -3,7 +3,7 @@ import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Core:Section',
   static: true,
-  builtIn: true,
+
   image:
     'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F682efef23ace49afac61748dd305c70a',
   inputs: [

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

@@ -2,7 +2,7 @@ import type { ComponentInfo } from '../../types/components';
 
 export const componentInfo: ComponentInfo = {
   name: 'Form:Select',
-  builtIn: true,
+
   image:
     'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F83acca093fb24aaf94dee136e9a4b045',
   defaultStyles: {

package/src/blocks/submit-button/component-info.ts

@@ -2,7 +2,7 @@ import type { ComponentInfo } from '../../types/components';
 
 export const componentInfo: ComponentInfo = {
   name: 'Form:SubmitButton',
-  builtIn: true,
+
   image:
     'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Fdf2820ffed1f4349a94c40b3221f5b98',
   defaultStyles: {

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

@@ -4,7 +4,7 @@ export const componentInfo: ComponentInfo = {
   name: 'Symbol',
   noWrap: true,
   static: true,
-  builtIn: true,
+
   inputs: [
     {
       name: 'symbol',

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

@@ -3,7 +3,7 @@ import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   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: [

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

@@ -2,7 +2,7 @@ import type { ComponentInfo } from '../../types/components';
 
 export const componentInfo: ComponentInfo = {
   name: 'Form:TextArea',
-  builtIn: true,
+
   image:
     'https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2Ff74a2f3de58c4c3e939204e5b6b8f6c3',
   inputs: [

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

@@ -3,7 +3,7 @@ import type { ComponentInfo } from '../../types/components';
 export const componentInfo: ComponentInfo = {
   name: 'Video',
   canHaveChildren: true,
-  builtIn: true,
+
   defaultStyles: {
     minHeight: '20px',
     minWidth: '20px',

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

@@ -125,7 +125,6 @@
                 ...actions(),
               },
             }),
-        customBreakpoints: childrenContext?.()?.content?.meta?.breakpoints,
       },
       context: childrenContext(),
     };

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

@@ -3,11 +3,8 @@
 
   import type { BuilderContextInterface } from "../../context/types.js";
 
-  import type { Breakpoints } from "../../types/builder-content.js";
-
   type ComponentOptions = {
     [index: string]: any;
-    customBreakpoints?: Breakpoints;
     attributes?: {
       [index: string]: any;
     };
@@ -18,7 +15,6 @@
     componentOptions: ComponentOptions;
     blockChildren: BuilderBlock[];
     context: BuilderContextInterface;
-    customBreakpoints?: Breakpoints;
   }
 </script>
 

package/src/types/components.ts

@@ -118,10 +118,6 @@ export interface ComponentInfo {
    */
   models?: string[];
 
-  // TO-DO specific to new SDKs?
-  // not used in visual editor. Can likely be removed
-  builtIn: true;
-
   /**
    * Specify restrictions direct children must match
    */