@builder.io/sdk-svelte 0.4.5 → 0.5.0

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

@@ -1,254 +1,219 @@
-import type { ComponentInfo } from '../../types/components';
-import { serializeFn } from '../util.js';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   // TODO: ways to statically preprocess JSON for references, functions, etc
   name: 'Columns',
-
-  inputs: [
-    {
-      name: 'columns',
+  isRSC: true,
+  inputs: [{
+    name: 'columns',
+    type: 'array',
+    broadcast: true,
+    subFields: [{
+      name: 'blocks',
       type: 'array',
-      broadcast: true,
-      subFields: [
-        {
-          name: 'blocks',
-          type: 'array',
-          hideFromUI: true,
-          defaultValue: [
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                  minHeight: '20px',
-                  minWidth: '20px',
-                  overflow: 'hidden',
-                },
-              },
-              component: {
-                name: 'Image',
-                options: {
-                  image:
-                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-                  backgroundPosition: 'center',
-                  backgroundSize: 'cover',
-                  aspectRatio: 0.7004048582995948,
-                },
-              },
-            },
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                },
-              },
-              component: {
-                name: 'Text',
-                options: {
-                  text: '<p>Enter some text...</p>',
-                },
-              },
-            },
-          ],
+      hideFromUI: true,
+      defaultValue: [{
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto',
+            minHeight: '20px',
+            minWidth: '20px',
+            overflow: 'hidden'
+          }
+        },
+        component: {
+          name: 'Image',
+          options: {
+            image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto'
+          }
         },
-        {
-          name: 'width',
-          type: 'number',
-          hideFromUI: true,
-          helperText: 'Width %, e.g. set to 50 to fill half of the space',
+        component: {
+          name: 'Text',
+          options: {
+            text: '<p>Enter some text...</p>'
+          }
+        }
+      }]
+    }, {
+      name: 'width',
+      type: 'number',
+      hideFromUI: true,
+      helperText: 'Width %, e.g. set to 50 to fill half of the space'
+    }, {
+      name: 'link',
+      type: 'url',
+      helperText: 'Optionally set a url that clicking this column will link to'
+    }],
+    defaultValue: [{
+      blocks: [{
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto',
+            minHeight: '20px',
+            minWidth: '20px',
+            overflow: 'hidden'
+          }
         },
-        {
-          name: 'link',
-          type: 'url',
-          helperText:
-            'Optionally set a url that clicking this column will link to',
+        component: {
+          name: 'Image',
+          options: {
+            image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto'
+          }
         },
-      ],
-      defaultValue: [
-        {
-          blocks: [
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                  minHeight: '20px',
-                  minWidth: '20px',
-                  overflow: 'hidden',
-                },
-              },
-              component: {
-                name: 'Image',
-                options: {
-                  image:
-                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-                  backgroundPosition: 'center',
-                  backgroundSize: 'cover',
-                  aspectRatio: 0.7004048582995948,
-                },
-              },
-            },
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                },
-              },
-              component: {
-                name: 'Text',
-                options: {
-                  text: '<p>Enter some text...</p>',
-                },
-              },
-            },
-          ],
+        component: {
+          name: 'Text',
+          options: {
+            text: '<p>Enter some text...</p>'
+          }
+        }
+      }]
+    }, {
+      blocks: [{
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto',
+            minHeight: '20px',
+            minWidth: '20px',
+            overflow: 'hidden'
+          }
         },
-        {
-          blocks: [
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                  minHeight: '20px',
-                  minWidth: '20px',
-                  overflow: 'hidden',
-                },
-              },
-              component: {
-                name: 'Image',
-                options: {
-                  image:
-                    'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
-                  backgroundPosition: 'center',
-                  backgroundSize: 'cover',
-                  aspectRatio: 0.7004048582995948,
-                },
-              },
-            },
-            {
-              '@type': '@builder.io/sdk:Element',
-              responsiveStyles: {
-                large: {
-                  display: 'flex',
-                  flexDirection: 'column',
-                  alignItems: 'stretch',
-                  flexShrink: '0',
-                  position: 'relative',
-                  marginTop: '30px',
-                  textAlign: 'center',
-                  lineHeight: 'normal',
-                  height: 'auto',
-                },
-              },
-              component: {
-                name: 'Text',
-                options: {
-                  text: '<p>Enter some text...</p>',
-                },
-              },
-            },
-          ],
+        component: {
+          name: 'Image',
+          options: {
+            image: 'https://builder.io/api/v1/image/assets%2Fpwgjf0RoYWbdnJSbpBAjXNRMe9F2%2Ffb27a7c790324294af8be1c35fe30f4d',
+            backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            aspectRatio: 0.7004048582995948
+          }
+        }
+      }, {
+        '@type': '@builder.io/sdk:Element',
+        responsiveStyles: {
+          large: {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'stretch',
+            flexShrink: '0',
+            position: 'relative',
+            marginTop: '30px',
+            textAlign: 'center',
+            lineHeight: 'normal',
+            height: 'auto'
+          }
         },
-      ],
-      onChange: serializeFn((options: Map<string, any>) => {
-        function clearWidths() {
-          columns.forEach((col) => {
-            col.delete('width');
-          });
+        component: {
+          name: 'Text',
+          options: {
+            text: '<p>Enter some text...</p>'
+          }
         }
-
-        const columns: Array<Map<string, any>> = options.get('columns');
-
-        if (Array.isArray(columns)) {
-          const containsColumnWithWidth = !!columns.find((col) =>
-            col.get('width')
-          );
-
-          if (containsColumnWithWidth) {
-            const containsColumnWithoutWidth = !!columns.find(
-              (col) => !col.get('width')
-            );
-            if (containsColumnWithoutWidth) {
+      }]
+    }],
+    onChange: (options: Map<string, any>) => {
+      function clearWidths() {
+        columns.forEach(col => {
+          col.delete('width');
+        });
+      }
+      const columns: Array<Map<string, any>> = options.get('columns');
+      if (Array.isArray(columns)) {
+        const containsColumnWithWidth = !!columns.find(col => col.get('width'));
+        if (containsColumnWithWidth) {
+          const containsColumnWithoutWidth = !!columns.find(col => !col.get('width'));
+          if (containsColumnWithoutWidth) {
+            clearWidths();
+          } else {
+            const sumWidths = columns.reduce((memo, col) => {
+              return memo + col.get('width');
+            }, 0);
+            const widthsDontAddUp = sumWidths !== 100;
+            if (widthsDontAddUp) {
               clearWidths();
-            } else {
-              const sumWidths = columns.reduce((memo, col) => {
-                return memo + col.get('width');
-              }, 0);
-              const widthsDontAddUp = sumWidths !== 100;
-              if (widthsDontAddUp) {
-                clearWidths();
-              }
             }
           }
         }
-      }),
-    },
-    {
-      name: 'space',
-      type: 'number',
-      defaultValue: 20,
-      helperText: 'Size of gap between columns',
-      advanced: true,
-    },
-    {
-      name: 'stackColumnsAt',
-      type: 'string',
-      defaultValue: 'tablet',
-      helperText: 'Convert horizontal columns to vertical at what device size',
-      enum: ['tablet', 'mobile', 'never'],
-      advanced: true,
-    },
-    {
-      name: 'reverseColumnsWhenStacked',
-      type: 'boolean',
-      defaultValue: false,
-      helperText:
-        'When stacking columns for mobile devices, reverse the ordering',
-      advanced: true,
-    },
-  ],
-};
+      }
+    }
+  }, {
+    name: 'space',
+    type: 'number',
+    defaultValue: 20,
+    helperText: 'Size of gap between columns',
+    advanced: true
+  }, {
+    name: 'stackColumnsAt',
+    type: 'string',
+    defaultValue: 'tablet',
+    helperText: 'Convert horizontal columns to vertical at what device size',
+    enum: ['tablet', 'mobile', 'never'],
+    advanced: true
+  }, {
+    name: 'reverseColumnsWhenStacked',
+    type: 'boolean',
+    defaultValue: false,
+    helperText: 'When stacking columns for mobile devices, reverse the ordering',
+    advanced: true
+  }]
+}

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

@@ -1,31 +1,24 @@
-import type { ComponentInfo } from '../../types/components';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Custom Code',
   static: true,
-
   requiredPermissions: ['editCode'],
-  inputs: [
-    {
-      name: 'code',
-      type: 'html',
-      required: true,
-      defaultValue: '<p>Hello there, I am custom HTML code!</p>',
-      code: true,
-    },
-    {
-      name: 'replaceNodes',
-      type: 'boolean',
-      helperText: 'Preserve server rendered dom nodes',
-      advanced: true,
-    },
-    {
-      name: 'scriptsClientOnly',
-      type: 'boolean',
-      defaultValue: false,
-      helperText:
-        'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
-      advanced: true,
-    },
-  ],
-};
+  inputs: [{
+    name: 'code',
+    type: 'html',
+    required: true,
+    defaultValue: '<p>Hello there, I am custom HTML code!</p>',
+    code: true
+  }, {
+    name: 'replaceNodes',
+    type: 'boolean',
+    helperText: 'Preserve server rendered dom nodes',
+    advanced: true
+  }, {
+    name: 'scriptsClientOnly',
+    type: 'boolean',
+    defaultValue: false,
+    helperText: 'Only print and run scripts on the client. Important when scripts influence DOM that could be replaced when client loads',
+    advanced: true
+  }]
+}

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

@@ -1,55 +1,38 @@
-import type { ComponentInfo } from '../../types/components';
-import { serializeFn } from '../util.js';
-
+import type { ComponentInfo } from '../../types/components.js';
 export const componentInfo: ComponentInfo = {
   name: 'Embed',
   static: true,
-
-  inputs: [
-    {
-      name: 'url',
-      type: 'url',
-      required: true,
-      defaultValue: '',
-      helperText: 'e.g. enter a youtube url, google map, etc',
-      onChange: serializeFn(
-        (options: Map<string, any>): void | Promise<void> => {
-          const url = options.get('url');
-          if (url) {
-            options.set('content', 'Loading...');
-            // TODO: get this out of here!
-            const apiKey = 'ae0e60e78201a3f2b0de4b';
-            return fetch(
-              `https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`
-            )
-              .then((res) => res.json())
-              .then((data) => {
-                if (options.get('url') === url) {
-                  if (data.html) {
-                    options.set('content', data.html);
-                  } else {
-                    options.set('content', 'Invalid url, please try another');
-                  }
-                }
-              })
-              .catch((_err) => {
-                options.set(
-                  'content',
-                  'There was an error embedding this URL, please try again or another URL'
-                );
-              });
-          } else {
-            options.delete('content');
+  inputs: [{
+    name: 'url',
+    type: 'url',
+    required: true,
+    defaultValue: '',
+    helperText: 'e.g. enter a youtube url, google map, etc',
+    onChange: (options: Map<string, any>): void | Promise<void> => {
+      const url = options.get('url');
+      if (url) {
+        options.set('content', 'Loading...');
+        // TODO: get this out of here!
+        const apiKey = 'ae0e60e78201a3f2b0de4b';
+        return fetch(`https://iframe.ly/api/iframely?url=${url}&api_key=${apiKey}`).then(res => res.json()).then(data => {
+          if (options.get('url') === url) {
+            if (data.html) {
+              options.set('content', data.html);
+            } else {
+              options.set('content', 'Invalid url, please try another');
+            }
           }
-        }
-      ),
-    },
-    {
-      name: 'content',
-      type: 'html',
-      defaultValue:
-        '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
-      hideFromUI: true,
-    },
-  ],
-};
+        }).catch(_err => {
+          options.set('content', 'There was an error embedding this URL, please try again or another URL');
+        });
+      } else {
+        options.delete('content');
+      }
+    }
+  }, {
+    name: 'content',
+    type: 'html',
+    defaultValue: '<div style="padding: 20px; text-align: center">(Choose an embed URL)<div>',
+    hideFromUI: true
+  }]
+}

package/src/blocks/embed/helpers.ts

@@ -1,8 +1,2 @@
-const SCRIPT_MIME_TYPES = [
-  'text/javascript',
-  'application/javascript',
-  'application/ecmascript',
-];
-
-export const isJsScript = (script: HTMLScriptElement) =>
-  SCRIPT_MIME_TYPES.includes(script.type);
+const SCRIPT_MIME_TYPES = ['text/javascript', 'application/javascript', 'application/ecmascript'];
+export const isJsScript = (script: HTMLScriptElement) => SCRIPT_MIME_TYPES.includes(script.type)