@builder.io/sdk-solid 0.5.8 → 0.6.0

package/package.json

@@ -1,41 +1,113 @@
 {
   "name": "@builder.io/sdk-solid",
-  "version": "0.5.8",
+  "version": "0.6.0",
   "description": "",
+  "files": [
+    "dist",
+    "lib"
+  ],
+  "sideEffects": false,
   "type": "module",
-  "main": "./solid-index.jsx",
-  "module": "./solid-index.jsx",
+  "main": "./lib/browser/index.js",
+  "module": "./lib/browser/index.js",
+  "types": "./dist/index.d.ts",
+  "browser": {},
   "exports": {
-    ".": {
-      "default": "./solid-index.jsx",
-      "solid": "./solid-index.jsx"
+    "solid": {
+      "node": {
+        "development": "./lib/node/dev.jsx",
+        "import": "./lib/node/index.jsx"
+      },
+      "browser": {
+        "development": "./lib/browser/dev.jsx",
+        "import": "./lib/browser/index.jsx"
+      },
+      "edge-routine": {
+        "development": "./lib/edge/dev.jsx",
+        "import": "./lib/edge/index.jsx"
+      },
+      "workerd": {
+        "development": "./lib/edge/dev.jsx",
+        "import": "./lib/edge/index.jsx"
+      },
+      "deno": {
+        "development": "./lib/edge/dev.jsx",
+        "import": "./lib/edge/index.jsx"
+      },
+      "lagon": {
+        "development": "./lib/edge/dev.jsx",
+        "import": "./lib/edge/index.jsx"
+      },
+      "netlify": {
+        "development": "./lib/edge/dev.jsx",
+        "import": "./lib/edge/index.jsx"
+      },
+      "edge-light": {
+        "development": "./lib/edge/dev.jsx",
+        "import": "./lib/edge/index.jsx"
+      },
+      "bun": {
+        "development": "./lib/edge/dev.jsx",
+        "import": "./lib/edge/index.jsx"
+      },
+      "electron": {
+        "development": "./lib/node/dev.jsx",
+        "import": "./lib/node/index.jsx"
+      },
+      "default": {
+        "development": "./lib/browser/dev.jsx",
+        "import": "./lib/browser/index.jsx"
+      }
+    },
+    "development": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./lib/browser/dev.js"
+      }
+    },
+    "import": {
+      "types": "./dist/index.d.ts",
+      "default": "./lib/browser/index.js"
     }
   },
+  "typesVersions": {},
   "scripts": {
-    "build": "echo 'no need to build solid SDK'"
+    "build": "nx run-many -p @builder.io/sdk-solid -t build:node build:edge build:browser",
+    "build:one": "tsup",
+    "build:node": "SDK_ENV=node yarn build:one",
+    "build:edge": "SDK_ENV=edge yarn build:one",
+    "build:browser": "SDK_ENV=browser yarn build:one"
   },
   "dependencies": {
     "solid-styled-components": "^0.27.6"
   },
   "peerDependencies": {
-    "solid-js": ">=1.5.7"
+    "solid-js": "^1.6.0"
   },
   "devDependencies": {
+    "@builder.io/sdks": "workspace:*",
+    "esbuild": "^0.18.15",
+    "esbuild-plugin-solid": "^0.5.0",
     "nx": "^16.6.0",
     "nx-cloud": "^16.2.0",
-    "solid-js": ">=1.5.7",
-    "vite": "^3.0.4",
-    "vite-plugin-solid": "^2.2.6"
+    "solid-js": "^1.7.8",
+    "tsup": "^7.1.0",
+    "tsup-preset-solid": "^2.0.1",
+    "typescript": "^5.1.6"
   },
+  "keywords": [
+    "solid"
+  ],
   "nx": {
-    "implicitDependencies": [
-      "@builder.io/sdks"
-    ],
     "targets": {
       "build": {
         "dependsOn": [
           "^build:solid",
           "^build"
+        ],
+        "outputs": [
+          "{projectRoot}/lib",
+          "{projectRoot}/dist"
         ]
       }
     }

package/CHANGELOG.md

@@ -1,98 +0,0 @@
-### 0.5.8
-
-- Fix: properly serialize messages sent to visual editor.
-
-### 0.5.7
-
-- No Changes.
-
-### 0.5.6
-
-- No Changes.
-
-### 0.5.5
-
-- Fix: remove `lru-cache` import and usage.
-
-### 0.5.4
-
-- Fix build issues caused by extraneous `acorn` import.
-- Put Edge runtime evaluator behind dynamic import.
-
-### 0.5.2
-
-- No Changes.
-
-### 0.5.1
-
-- Fix: make `RenderBlocks` properties `context` and `registeredComponents` optional for external use.
-
-### 0.5.0
-
-- Feature: Added support for rudimentary data-bindings in Non-Node.js (edge, serverless, etc.) server runtimes.
-
-### 0.4.5
-
-- Fix: show dynamic symbols correctly in Preview mode.
-- Feature: SSR A/B test Symbols nested inside page content.
-
-### 0.4.4
-
-- Fix: tracking URL from `builder.io/api/v1/track` to `cdn.builder.io/api/v1/track` for improved reliability.
-
-### 0.4.3
-
-- Fix: SSR A/B test environment check (`isHydrationTarget`) now accurately checks current environment.
-
-### 0.4.2
-
-- No external changes.
-
-### 0.4.1
-
-- Fix: bring back `getBuilderSearchParams` export that was accidentally removed.
-
-### 0.4.0
-
-- Feature: A/B tests are now rendered correctly during server-side rendering (SSR) when applicable. This behaviour is backwards compatible with previous versions.
-- Feature: Add support for `enrich` API flag.
-- Mark `noTraverse` and `includeRefs` as deprecated.
-
-### 0.3.1
-
-- Feature: Added SDK version to data sent to visual editor for improved debugging.
-- Fix: Columns block: removed redundant margin-left in first column.
-
-### 0.3.0
-
-- No Changes.
-
-### 0.2.3
-
-- No Changes.
-
-### 0.2.2
-
-- Fix: dynamic bindings for Link URLs.
-- Fix: previewing content that includes a symbol whose `model` property is a `page`.
-- Fix: "Show If"/"Hide If" bindings when the initial value is `undefined`.
-
-### 0.2.1
-
-- No Changes.
-
-### 0.2.0
-
-- Sets the default `apiVersion` to `v3`.
-
-In case you feel the need to use our older API Version `v2`, reach out to us at support@builder.io first. But you can override the default by setting `apiVersion` explicitly to `v2` as follows:
-
-```jsx
-<RenderContent apiVersion="v2" />
-```
-
-```js
-getContent({ apiVersion: 'v2' });
-```
-
-More details on the Builder API Versions visit [this link](https://www.builder.io/c/docs/content-api-versions).

package/solid-index.jsx

@@ -1,5 +0,0 @@
-/**
- * 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/src/blocks/BaseText.jsx

@@ -1,11 +0,0 @@
-import { useContext } from "solid-js";
-
-import BuilderContext from "../context/builder.context.js";
-
-function BaseText(props) {
-  const builderContext = useContext(BuilderContext);
-
-  return <span style={builderContext.inheritedStyles}>{props.text}</span>;
-}
-
-export default BaseText;

package/src/blocks/button/button.jsx

@@ -1,41 +0,0 @@
-import { Show } from "solid-js";
-
-import { css } from "solid-styled-components";
-
-import { filterAttrs } from "../helpers.js";
-
-function Button(props) {
-  return (
-    <Show
-      fallback={
-        <button
-          class={
-            props.attributes.class +
-            " " +
-            css({
-              all: "unset",
-            })
-          }
-          {...{}}
-          {...props.attributes}
-          style={props.attributes.style}
-        >
-          {props.text}
-        </button>
-      }
-      when={props.link}
-    >
-      <a
-        role="button"
-        {...{}}
-        {...props.attributes}
-        href={props.link}
-        target={props.openLinkInNewTab ? "_blank" : undefined}
-      >
-        {props.text}
-      </a>
-    </Show>
-  );
-}
-
-export default Button;

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

@@ -1,34 +0,0 @@
-const componentInfo = {
-  name: "Core:Button",
-  image: "https://cdn.builder.io/api/v1/image/assets%2FIsxPKMo2gPRRKeakUztj1D6uqed2%2F81a15681c3e74df09677dfc57a615b13",
-  defaultStyles: {
-    appearance: "none",
-    paddingTop: "15px",
-    paddingBottom: "15px",
-    paddingLeft: "25px",
-    paddingRight: "25px",
-    backgroundColor: "#000000",
-    color: "white",
-    borderRadius: "4px",
-    textAlign: "center",
-    cursor: "pointer"
-  },
-  inputs: [{
-    name: "text",
-    type: "text",
-    defaultValue: "Click me!",
-    bubble: true
-  }, {
-    name: "link",
-    type: "url",
-    bubble: true
-  }, {
-    name: "openLinkInNewTab",
-    type: "boolean",
-    defaultValue: false,
-    friendlyName: "Open link in new tab"
-  }],
-  static: true,
-  noWrap: true
-};
-export { componentInfo }

package/src/blocks/columns/columns.jsx

@@ -1,174 +0,0 @@
-import { Show, For, createSignal } from "solid-js";
-
-import { css } from "solid-styled-components";
-
-import Blocks from "../../components/blocks/blocks";
-import { getSizesForBreakpoints } from "../../constants/device-sizes.js";
-import InlinedStyles from "../../components/inlined-styles";
-import { TARGET } from "../../constants/target.js";
-
-function Columns(props) {
-  const [gutterSize, setGutterSize] = createSignal(
-    typeof props.space === "number" ? props.space || 0 : 20
-  );
-
-  const [cols, setCols] = createSignal(props.columns || []);
-
-  const [stackAt, setStackAt] = createSignal(props.stackColumnsAt || "tablet");
-
-  const [flexDir, setFlexDir] = createSignal(
-    props.stackColumnsAt === "never"
-      ? "row"
-      : props.reverseColumnsWhenStacked
-      ? "column-reverse"
-      : "column"
-  );
-
-  function getWidth(index) {
-    return cols()[index]?.width || 100 / cols().length;
-  }
-
-  function getColumnCssWidth(index) {
-    const subtractWidth = (gutterSize() * (cols().length - 1)) / cols().length;
-    return `calc(${getWidth(index)}% - ${subtractWidth}px)`;
-  }
-
-  function getTabletStyle({ stackedStyle, desktopStyle }) {
-    return stackAt() === "tablet" ? stackedStyle : desktopStyle;
-  }
-
-  function getMobileStyle({ stackedStyle, desktopStyle }) {
-    return stackAt() === "never" ? desktopStyle : stackedStyle;
-  }
-
-  function columnsCssVars() {
-    return {
-      "--flex-dir": flexDir(),
-      "--flex-dir-tablet": getTabletStyle({
-        stackedStyle: flexDir(),
-        desktopStyle: "row",
-      }),
-    };
-  }
-
-  function columnCssVars(index) {
-    const gutter = index === 0 ? 0 : gutterSize();
-    if (TARGET === "reactNative") {
-      return {
-        marginLeft: props.stackColumnsAt === "never" ? gutter : 0,
-      };
-    }
-    const width = getColumnCssWidth(index);
-    const gutterPixels = `${gutter}px`;
-    const mobileWidth = "100%";
-    const mobileMarginLeft = 0;
-    const marginLeftKey = "margin-left";
-    return {
-      width,
-      [marginLeftKey]: gutterPixels,
-      "--column-width-mobile": getMobileStyle({
-        stackedStyle: mobileWidth,
-        desktopStyle: width,
-      }),
-      "--column-margin-left-mobile": getMobileStyle({
-        stackedStyle: mobileMarginLeft,
-        desktopStyle: gutterPixels,
-      }),
-      "--column-width-tablet": getTabletStyle({
-        stackedStyle: mobileWidth,
-        desktopStyle: width,
-      }),
-      "--column-margin-left-tablet": getTabletStyle({
-        stackedStyle: mobileMarginLeft,
-        desktopStyle: gutterPixels,
-      }),
-    };
-  }
-
-  function getWidthForBreakpointSize(size) {
-    const breakpointSizes = getSizesForBreakpoints(
-      props.builderContext.content?.meta?.breakpoints || {}
-    );
-    return breakpointSizes[size].max;
-  }
-
-  function columnsStyles() {
-    return `
-        @media (max-width: ${getWidthForBreakpointSize("medium")}px) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir-tablet);
-            align-items: stretch;
-          }
-
-          .${props.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-tablet) !important;
-            margin-left: var(--column-margin-left-tablet) !important;
-          }
-        }
-
-        @media (max-width: ${getWidthForBreakpointSize("small")}px) {
-          .${props.builderBlock.id}-breakpoints {
-            flex-direction: var(--flex-dir);
-            align-items: stretch;
-          }
-
-          .${props.builderBlock.id}-breakpoints > .builder-column {
-            width: var(--column-width-mobile) !important;
-            margin-left: var(--column-margin-left-mobile) !important;
-          }
-        },
-      `;
-  }
-
-  return (
-    <div
-      class={
-        `builder-columns ${props.builderBlock.id}-breakpoints` +
-        " " +
-        css({
-          display: "flex",
-          lineHeight: "normal",
-        })
-      }
-      style={columnsCssVars()}
-      {...{}}
-    >
-      <Show when={TARGET !== "reactNative"}>
-        <InlinedStyles styles={columnsStyles()}></InlinedStyles>
-      </Show>
-      <For each={props.columns}>
-        {(column, _index) => {
-          const index = _index();
-          return (
-            <div
-              class={
-                "builder-column " +
-                css({
-                  display: "flex",
-                  flexDirection: "column",
-                  alignItems: "stretch",
-                })
-              }
-              style={columnCssVars(index)}
-              {...{}}
-              key={index}
-            >
-              <Blocks
-                blocks={column.blocks}
-                path={`component.options.columns.${index}.blocks`}
-                parent={props.builderBlock.id}
-                styleProp={{
-                  flexGrow: "1",
-                }}
-                context={props.builderContext}
-                registeredComponents={props.builderComponents}
-              ></Blocks>
-            </div>
-          );
-        }}
-      </For>
-    </div>
-  );
-}
-
-export default Columns;