@builder.io/sdk-solid 0.0.8-3 → 0.0.8-4

package/entry-point/index.jsx

@@ -0,0 +1,5 @@
+/**
+ * We need to have a `.jsx` entry point for our SolidJS SDK. To avoid enforcing this to all other frameworks,
+ * we add this file and use it to re-export the index.js file from the Mitosis-generated code.
+ */
+export * from '../src/index.js'

package/package.json

@@ -1,27 +1,27 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.0.8-3",
+  "version": "0.0.8-4",
   "description": "",
   "type": "module",
-  "main": "./src/index.js",
-  "module": "./src/index.js",
+  "main": "./entry-point/index.jsx",
+  "module": "./entry-point/index.jsx",
   "exports": {
-    ".": "./src/index.js"
+    ".": "./entry-point/index.jsx"
   },
   "scripts": {
-    "build": "vite build",
     "release:dev": "npm version prerelease --no-git-tag-version && npm publish --tag dev --access public"
   },
   "dependencies": {
+    "node-fetch": "^2.6.7",
     "solid-styled-components": "^0.27.6"
   },
   "peerDependencies": {
     "solid-js": "^1.3.15"
   },
   "devDependencies": {
-    "vite": "^2.9.8",
-    "vite-plugin-solid": "^2.2.6",
     "babel-preset-solid": "^1.3.17",
-    "solid-js": "^1.3.15"
+    "solid-js": "^1.3.15",
+    "vite": "^2.9.8",
+    "vite-plugin-solid": "^2.2.6"
   }
 }

package/src/blocks/button/button.jsx

@@ -2,7 +2,7 @@ import { Show } from "solid-js";
 
 function Button(props) {
   return <>
-      <Show when={props.link}>
+      <Show fallback={<span {...props.attributes}>{props.text}</span>} when={props.link}>
         <a {...props.attributes} role="button" href={props.link} target={props.openLinkInNewTab ? "_blank" : undefined}>
           {props.text}
         </a>

package/src/blocks/button/button.lite.tsx

@@ -3,7 +3,10 @@ import { Show } from "solid-js";
 function Button(props) {
   return (
     <>
-      <Show when={props.link}>
+      <Show
+        fallback={<span {...props.attributes}>{props.text}</span>}
+        when={props.link}
+      >
         <a
           {...props.attributes}
           role="button"

package/src/blocks/custom-code/custom-code.jsx

@@ -1,3 +1,4 @@
+import { onMount } from "solid-js";
 import { createMutable } from "solid-js/store";
 
 function CustomCode(props) {

package/src/blocks/custom-code/custom-code.lite.tsx

@@ -1,3 +1,5 @@
+import { onMount } from "solid-js";
+
 import { createMutable } from "solid-js/store";
 
 function CustomCode(props) {

package/src/blocks/embed/embed.jsx

@@ -1,3 +1,4 @@
+import { onMount } from "solid-js";
 import { createMutable } from "solid-js/store";
 
 function Embed(props) {

package/src/blocks/embed/embed.lite.tsx

@@ -1,3 +1,5 @@
+import { onMount } from "solid-js";
+
 import { createMutable } from "solid-js/store";
 
 function Embed(props) {

package/src/blocks/symbol/symbol.jsx

@@ -1,3 +1,4 @@
+import { useContext, onMount } from "solid-js";
 import { createMutable } from "solid-js/store";
 import RenderContent from "../../components/render-content/render-content";
 import BuilderContext from "../../context/builder.context";
@@ -16,7 +17,7 @@ function Symbol(props) {
   }}>
       <RenderContent apiKey={builderContext.apiKey} context={builderContext.context} data={{ ...props.symbol?.data,
       ...builderContext.state,
-      ...props.symbol?.state.content?.data?.state
+      ...props.symbol?.content?.data?.state
     }} model={props.symbol?.model} content={state.content}></RenderContent>
     </div>;
 }

package/src/blocks/symbol/symbol.lite.tsx

@@ -1,3 +1,5 @@
+import { useContext, onMount } from "solid-js";
+
 import { createMutable } from "solid-js/store";
 
 import RenderContent from "../../components/render-content/render-content.lite";
@@ -27,7 +29,7 @@ function Symbol(props) {
         data={{
           ...props.symbol?.data,
           ...builderContext.state,
-          ...props.symbol?.state.content?.data?.state,
+          ...props.symbol?.content?.data?.state,
         }}
         model={props.symbol?.model}
         content={state.content}

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

@@ -9,7 +9,6 @@ import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockStyles } from "../../functions/get-block-styles.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { components } from "../../functions/register-component.js";
 import BlockStyles from "./block-styles";
 
 function RenderBlock(props) {
@@ -21,16 +20,17 @@ function RenderBlock(props) {
         return null;
       }
 
-      const ref = components[componentName];
+      const ref = builderContext.registeredComponents[componentName];
 
-      if (componentName && !ref) {
+      if (!ref) {
         // TODO: Public doc page with more info about this message
         console.warn(`
         Could not find a registered component named "${componentName}". 
         If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return undefined;
+      } else {
+        return ref;
       }
-
-      return ref;
     },
 
     get componentInfo() {
@@ -86,7 +86,15 @@ function RenderBlock(props) {
   });
   const builderContext = useContext(BuilderContext);
   return <>
-      <Show when={!state.componentInfo?.noWrap}>
+      <Show fallback={<Dynamic {...state.componentOptions} attributes={state.propertiesAndActions} builderBlock={state.useBlock} style={state.css} component={state.componentRef}>
+            <For each={state.children}>
+              {(child, _index) => {
+          const index = _index();
+
+          return <RenderBlock block={child}></RenderBlock>;
+        }}
+            </For>
+          </Dynamic>} when={!state.componentInfo?.noWrap}>
         <Dynamic {...state.propertiesAndActions} style={state.css} component={state.tagName}>
           <Show when={TARGET === "vue" || TARGET === "svelte"}>
             <BlockStyles block={state.useBlock}></BlockStyles>

package/src/components/render-block/render-block.lite.tsx

@@ -10,7 +10,6 @@ import { getBlockProperties } from "../../functions/get-block-properties.js";
 import { getBlockStyles } from "../../functions/get-block-styles.js";
 import { getBlockTag } from "../../functions/get-block-tag.js";
 import { getProcessedBlock } from "../../functions/get-processed-block.js";
-import { components } from "../../functions/register-component.js";
 import BlockStyles from "./block-styles.lite";
 
 function RenderBlock(props) {
@@ -22,16 +21,17 @@ function RenderBlock(props) {
         return null;
       }
 
-      const ref = components[componentName];
+      const ref = builderContext.registeredComponents[componentName];
 
-      if (componentName && !ref) {
+      if (!ref) {
         // TODO: Public doc page with more info about this message
         console.warn(`
         Could not find a registered component named "${componentName}". 
         If you registered it, is the file that registered it imported by the file that needs to render it?`);
+        return undefined;
+      } else {
+        return ref;
       }
-
-      return ref;
     },
     get componentInfo() {
       return state.component?.info;
@@ -81,7 +81,25 @@ function RenderBlock(props) {
 
   return (
     <>
-      <Show when={!state.componentInfo?.noWrap}>
+      <Show
+        fallback={
+          <Dynamic
+            {...state.componentOptions}
+            attributes={state.propertiesAndActions}
+            builderBlock={state.useBlock}
+            style={state.css}
+            component={state.componentRef}
+          >
+            <For each={state.children}>
+              {(child, _index) => {
+                const index = _index();
+                return <RenderBlock block={child}></RenderBlock>;
+              }}
+            </For>
+          </Dynamic>
+        }
+        when={!state.componentInfo?.noWrap}
+      >
         <Dynamic
           {...state.propertiesAndActions}
           style={state.css}

package/src/components/render-content/render-content.jsx

@@ -1,6 +1,7 @@
 import { Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { evaluate } from "../../functions/evaluate.js";
@@ -11,6 +12,7 @@ import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { previewingModelName } from "../../functions/previewing-model-name.js";
+import { components, createRegisterComponentMessage } from "../../functions/register-component.js";
 import { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks";
 import RenderContentStyles from "./components/render-styles";
@@ -43,6 +45,19 @@ function RenderContent(props) {
       return {};
     },
 
+    get allRegisteredComponents() {
+      const allComponentsArray = [...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+      // Since users are able to override our default components, we need to make sure that we do not break such
+      // existing usage.
+      // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+      // which is the new standard way of providing custom components, and must therefore take precedence.
+      ...components, ...(props.customComponents || [])];
+      const allComponents = allComponentsArray.reduce((acc, curr) => ({ ...acc,
+        [curr.info.name]: curr
+      }), {});
+      return allComponents;
+    },
+
     processMessage(event) {
       const {
         data
@@ -142,6 +157,10 @@ function RenderContent(props) {
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
+        Object.values(state.allRegisteredComponents).forEach(registeredComponent => {
+          const message = createRegisterComponentMessage(registeredComponent);
+          window.parent?.postMessage(message, "*");
+        });
         window.addEventListener("message", state.processMessage);
         window.addEventListener("builder:component:stateChangeListenerActivated", state.emitStateUpdate);
       }
@@ -192,6 +211,10 @@ function RenderContent(props) {
 
     get apiKey() {
       return props.apiKey;
+    },
+
+    get registeredComponents() {
+      return state.allRegisteredComponents;
     }
 
   }} component={BuilderContext.Provider}>

package/src/components/render-content/render-content.lite.tsx

@@ -2,6 +2,7 @@ import { useContext, Show, onMount } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 
+import { getDefaultRegisteredComponents } from "../../constants/builder-registered-components.js";
 import { TARGET } from "../../constants/target.js";
 import BuilderContext from "../../context/builder.context";
 import { evaluate } from "../../functions/evaluate.js";
@@ -15,6 +16,10 @@ import { isBrowser } from "../../functions/is-browser.js";
 import { isEditing } from "../../functions/is-editing.js";
 import { isPreviewing } from "../../functions/is-previewing.js";
 import { previewingModelName } from "../../functions/previewing-model-name.js";
+import {
+  components,
+  createRegisterComponentMessage,
+} from "../../functions/register-component.js";
 import { track } from "../../functions/track.js";
 import RenderBlocks from "../render-blocks.lite";
 import RenderContentStyles from "./components/render-styles.lite";
@@ -44,9 +49,23 @@ function RenderContent(props) {
       };
     },
     get context() {
-      return {} as {
-        [index: string]: any;
-      };
+      return {} as Dictionary<any>;
+    },
+    get allRegisteredComponents() {
+      const allComponentsArray = [
+        ...getDefaultRegisteredComponents(), // While this `components` object is deprecated, we must maintain support for it.
+        // Since users are able to override our default components, we need to make sure that we do not break such
+        // existing usage.
+        // This is why we spread `components` after the default Builder.io components, but before the `props.customComponents`,
+        // which is the new standard way of providing custom components, and must therefore take precedence.
+        ...components,
+        ...(props.customComponents || []),
+      ];
+      const allComponents = allComponentsArray.reduce(
+        (acc, curr) => ({ ...acc, [curr.info.name]: curr }),
+        {} as RegisteredComponents
+      );
+      return allComponents;
     },
     processMessage(event: MessageEvent) {
       const { data } = event;
@@ -143,6 +162,12 @@ function RenderContent(props) {
   onMount(() => {
     if (isBrowser()) {
       if (isEditing()) {
+        Object.values(state.allRegisteredComponents).forEach(
+          (registeredComponent) => {
+            const message = createRegisterComponentMessage(registeredComponent);
+            window.parent?.postMessage(message, "*");
+          }
+        );
         window.addEventListener("message", state.processMessage);
         window.addEventListener(
           "builder:component:stateChangeListenerActivated",
@@ -198,6 +223,9 @@ function RenderContent(props) {
         get apiKey() {
           return props.apiKey;
         },
+        get registeredComponents() {
+          return state.allRegisteredComponents;
+        },
       }}
       component={BuilderContext.Provider}
     >

package/src/components/render-inlined-styles.jsx

@@ -1,4 +1,5 @@
 import { Show } from "solid-js";
+import { Dynamic } from "solid-js/web";
 import { createMutable } from "solid-js/store";
 import { TARGET } from "../constants/target.js";
 
@@ -15,7 +16,7 @@ function RenderInlinedStyles(props) {
     }
 
   });
-  return <Show when={TARGET === "svelte"}>
+  return <Show fallback={<Dynamic component={state.tagName}>{props.styles}</Dynamic>} when={TARGET === "svelte"}>
       <div innerHTML={state.injectedStyleScript}></div>
     </Show>;
 }

package/src/components/render-inlined-styles.lite.tsx

@@ -17,7 +17,10 @@ function RenderInlinedStyles(props) {
   });
 
   return (
-    <Show when={TARGET === "svelte"}>
+    <Show
+      fallback={<Dynamic component={state.tagName}>{props.styles}</Dynamic>}
+      when={TARGET === "svelte"}
+    >
       <div innerHTML={state.injectedStyleScript}></div>
     </Show>
   );

package/src/constants/builder-registered-components.js

@@ -0,0 +1,29 @@
+import { default as Button } from "../blocks/button/button.jsx";
+import { componentInfo as buttonComponentInfo } from "../blocks/button/component-info";
+import { default as Columns } from "../blocks/columns/columns.jsx";
+import { componentInfo as columnsComponentInfo } from "../blocks/columns/component-info";
+import { componentInfo as fragmentComponentInfo } from "../blocks/fragment/component-info";
+import { default as Fragment } from "../blocks/fragment/fragment.jsx";
+import { componentInfo as imageComponentInfo } from "../blocks/image/component-info";
+import { default as Image } from "../blocks/image/image.jsx";
+import { componentInfo as sectionComponentInfo } from "../blocks/section/component-info";
+import { default as Section } from "../blocks/section/section.jsx";
+import { componentInfo as symbolComponentInfo } from "../blocks/symbol/component-info";
+import { default as Symbol } from "../blocks/symbol/symbol.jsx";
+import { componentInfo as textComponentInfo } from "../blocks/text/component-info";
+import { default as Text } from "../blocks/text/text.jsx";
+import { componentInfo as videoComponentInfo } from "../blocks/video/component-info";
+import { default as Video } from "../blocks/video/video.jsx";
+const getDefaultRegisteredComponents = () => [
+  { component: Columns, info: columnsComponentInfo },
+  { component: Image, info: imageComponentInfo },
+  { component: Text, info: textComponentInfo },
+  { component: Video, info: videoComponentInfo },
+  { component: Symbol, info: symbolComponentInfo },
+  { component: Button, info: buttonComponentInfo },
+  { component: Section, info: sectionComponentInfo },
+  { component: Fragment, info: fragmentComponentInfo }
+];
+export {
+  getDefaultRegisteredComponents
+};

package/src/context/builder.context.js

@@ -3,7 +3,8 @@ var stdin_default = createContext({
   content: null,
   context: {},
   state: {},
-  apiKey: null
+  apiKey: null,
+  registeredComponents: {}
 });
 export {
   stdin_default as default

package/src/functions/fast-clone.js

@@ -0,0 +1,4 @@
+const fastClone = (obj) => JSON.parse(JSON.stringify(obj));
+export {
+  fastClone
+};

package/src/functions/register-component.js

@@ -17,27 +17,26 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { isBrowser } from "./is-browser.js";
-const components = {};
+import { fastClone } from "./fast-clone.js";
+const components = [];
 function registerComponent(component, info) {
-  var _a;
-  components[info.name] = { component, info };
-  if (isBrowser()) {
-    const sendInfo = prepareComponentInfoToSend(info);
-    (_a = window.parent) == null ? void 0 : _a.postMessage({
-      type: "builder.registerComponent",
-      data: sendInfo
-    }, "*");
-  }
+  components.push({ component, info });
+  console.warn("registerComponent is deprecated. Use the `customComponents` prop in RenderContent instead to provide your custom components to the builder SDK.");
   return component;
 }
+const createRegisterComponentMessage = ({
+  info
+}) => ({
+  type: "builder.registerComponent",
+  data: prepareComponentInfoToSend(fastClone(info))
+});
 function prepareComponentInfoToSend(info) {
   return __spreadValues(__spreadValues({}, info), info.inputs && {
     inputs: info.inputs.map((input) => {
       const keysToConvertFnToString = ["onChange", "showIf"];
       for (const key of keysToConvertFnToString) {
-        if (input[key] && typeof input[key] === "function") {
-          const fn = input[key];
+        const fn = input[key];
+        if (fn && typeof fn === "function") {
           input = __spreadProps(__spreadValues({}, input), {
             [key]: `return (${fn.toString()}).apply(this, arguments)`
           });
@@ -49,5 +48,6 @@ function prepareComponentInfoToSend(info) {
 }
 export {
   components,
+  createRegisterComponentMessage,
   registerComponent
 };

package/src/index-helpers/blocks-exports.js

@@ -1,12 +1,12 @@
-import { default as default2 } from "../blocks/columns/index.js";
-import { default as default3 } from "../blocks/image/index.js";
-import { default as default4 } from "../blocks/text/index.js";
-import { default as default5 } from "../blocks/video/index.js";
-import { default as default6 } from "../blocks/symbol/index.js";
-import { default as default7 } from "../blocks/button/index.js";
-import { default as default8 } from "../blocks/section/index.js";
-import { default as default9 } from "../blocks/fragment/index.js";
-import { default as default10 } from "../components/render-content/index.js";
+import { default as default2 } from "../blocks/columns/columns.jsx";
+import { default as default3 } from "../blocks/image/image.jsx";
+import { default as default4 } from "../blocks/text/text.jsx";
+import { default as default5 } from "../blocks/video/video.jsx";
+import { default as default6 } from "../blocks/symbol/symbol.jsx";
+import { default as default7 } from "../blocks/button/button.jsx";
+import { default as default8 } from "../blocks/section/section.jsx";
+import { default as default9 } from "../blocks/fragment/fragment.jsx";
+import { default as default10 } from "../components/render-content/render-content.jsx";
 export {
   default7 as Button,
   default2 as Columns,

package/src/blocks/button/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import component from "./button.jsx";
-import { componentInfo } from "./component-info.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/columns/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import component from "./columns.jsx";
-import { componentInfo } from "./component-info.js";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/custom-code/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./custom-code.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/embed/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./embed.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/form/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./form.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/fragment/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./fragment.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/image/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./image.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/img/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./img.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/input/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./input.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/raw-text/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./raw-text.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/section/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./section.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/select/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./select.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/submit-button/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./submit-button.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/symbol/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./symbol.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/text/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./text.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/textarea/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./textarea.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/src/blocks/video/index.js

@@ -1,7 +0,0 @@
-import { registerComponent } from "../../functions/register-component.js";
-import { componentInfo } from "./component-info.js";
-import component from "./video.jsx";
-var stdin_default = registerComponent(component, componentInfo);
-export {
-  stdin_default as default
-};

package/vite.config.js

@@ -1,19 +0,0 @@
-import path from 'path';
-import { defineConfig } from 'vite';
-import solidPlugin from 'vite-plugin-solid';
-
-export default defineConfig({
-  plugins: [solidPlugin()],
-  publicDir: false,
-  build: {
-    outDir: 'pkg-dist',
-    lib: {
-      entry: 'src/index.js',
-      formats: ['es', 'cjs'],
-      fileName: (format) => `sdk-solid.${format}.js`,
-    },
-    // rollupOptions: {
-    //   external: ['solid-styled-components'],
-    // }
-  },
-});