@builder.io/sdk-svelte 0.5.9 → 0.6.1

package/lib/node/types/input.d.ts

@@ -0,0 +1,121 @@
+export interface Input {
+    /** This is the name of the component prop this input represents */
+    name: string;
+    /** A friendlier name to show in the UI if the component prop name is not ideal for end users */
+    friendlyName?: string;
+    /** @hidden @deprecated */
+    description?: string;
+    /** A default value to use */
+    defaultValue?: any;
+    /**
+     * The type of input to use, such as 'text'
+     *
+     * See all available inputs [here](https://www.builder.io/c/docs/custom-react-components#input-types)
+     * and you can create your own custom input types and associated editor UIs with [plugins](https://www.builder.io/c/docs/extending/plugins)
+     */
+    type: string;
+    /** Is this input mandatory or not */
+    required?: boolean;
+    /** @hidden */
+    autoFocus?: boolean;
+    subFields?: Input[];
+    /**
+     * Additional text to render in the UI to give guidance on how to use this
+     *
+     * @example
+     * ```js
+     * helperText: 'Be sure to use a proper URL, starting with "https://"'
+     * 111
+     */
+    helperText?: string;
+    /** @hidden */
+    allowedFileTypes?: string[];
+    /** @hidden */
+    imageHeight?: number;
+    /** @hidden */
+    imageWidth?: number;
+    /** @hidden */
+    mediaHeight?: number;
+    /** @hidden */
+    mediaWidth?: number;
+    /** @hidden */
+    hideFromUI?: boolean;
+    /** @hidden */
+    modelId?: string;
+    /**
+     * Number field type validation maximum accepted input
+     */
+    max?: number;
+    /**
+     * Number field type validation minimum accepted input
+     */
+    min?: number;
+    /**
+     * Number field type step size when using arrows
+     */
+    step?: number;
+    /**
+     * Set this to `true` to show the editor for this input when
+     * children of this component are selected. This is useful for things
+     * like Tabs, such that users may not always select the Tabs component
+     * directly but will still be looking for how to add additional tabs
+     */
+    broadcast?: boolean;
+    /**
+     * Set this to `true` to show the editor for this input when
+     * group locked parents of this component are selected. This is useful
+     * to bubble up important inputs for locked groups, like text and images
+     */
+    bubble?: boolean;
+    /**
+     * Set this to `true` if you want this component to be translatable
+     */
+    localized?: boolean;
+    /** @hidden */
+    options?: {
+        [key: string]: any;
+    };
+    /**
+     * For "text" input type, specifying an enum will show a dropdown of options instead
+     */
+    enum?: string[] | {
+        label: string;
+        value: any;
+        helperText?: string;
+    }[];
+    /** Regex field validation for all string types (text, longText, html, url, etc) */
+    regex?: {
+        /** pattern to test, like "^\/[a-z]$" */
+        pattern: string;
+        /** flags for the RegExp constructor, e.g. "gi"  */
+        options?: string;
+        /**
+         * Friendly message to display to end-users if the regex fails, e.g.
+         * "You must use a relative url starting with '/...' "
+         */
+        message: string;
+    };
+    /**
+     * Set this to `true` to put this under the "show more" section of
+     * the options editor. Useful for things that are more advanced
+     * or more rarely used and don't need to be too prominent
+     */
+    advanced?: boolean;
+    /** @hidden */
+    /** @hidden */
+    code?: boolean;
+    /** @hidden */
+    richText?: boolean;
+    /** @hidden */
+    showIf?: ((options: Map<string, any>) => boolean) | string;
+    /** @hidden */
+    copyOnAdd?: boolean;
+    /**
+     * Use optionally with inputs of type `reference`. Restricts the content entry picker to a specific model by name.
+     */
+    model?: string;
+    valueType?: {
+        type?: string;
+    };
+    onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
+}

package/lib/node/types/input.js

@@ -0,0 +1 @@
+export {};

package/lib/node/types/targets.d.ts

@@ -0,0 +1 @@
+export type Target = 'vue3' | 'vue2' | 'reactNative' | 'svelte' | 'qwik' | 'react' | 'solid' | 'rsc';

package/lib/node/types/targets.js

@@ -0,0 +1 @@
+export {};

package/lib/node/types/typescript.d.ts

@@ -0,0 +1,11 @@
+export type Nullable<T> = T | null | undefined;
+export type Dictionary<T> = {
+    [key: string]: T;
+};
+export type Overwrite<T, U> = keyof U extends keyof T ? Pick<T, Exclude<keyof T, keyof U>> & U : never;
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};
+export type PropsWithChildren<P> = P & {
+    children?: any;
+};

package/lib/node/types/typescript.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.5.9",
+  "version": "0.6.1",
   "type": "module",
   "files": [
-    "package",
+    "lib",
     "src"
   ],
   "homepage": "https://github.com/BuilderIO/builder/tree/main/packages/sdks/output/svelte#readme",
@@ -13,33 +13,45 @@
     "url": "https://github.com/BuilderIO/builder.git",
     "directory": "packages/sdks/output/svelte"
   },
-  "main": "./package/index.js",
-  "module": "./package/index.js",
-  "svelte": "./package/index.js",
+  "main": "./lib/node/index.js",
+  "module": "./lib/node/index.js",
+  "svelte": "./lib/browser/index.js",
   "exports": {
-    "./src": {
-      "import": "./src/index.js",
-      "require": "./src/index.js"
-    },
     ".": {
-      "import": "./package/index.js",
-      "require": "./package/index.js"
-    }
+      "svelte": "./lib/browser/index.js",
+      "node": "./lib/node/index.js",
+      "browser": "./lib/browser/index.js",
+      "edge-routine": "./lib/edge/index.js",
+      "workerd": "./lib/edge/index.js",
+      "deno": "./lib/edge/index.js",
+      "lagon": "./lib/edge/index.js",
+      "netlify": "./lib/edge/index.js",
+      "edge-light": "./lib/edge/index.js",
+      "bun": "./lib/edge/index.js",
+      "electron": "./lib/node/index.js",
+      "default": "./lib/browser/index.js"
+    },
+    "./edge": "./lib/edge/index.js",
+    "./node": "./lib/node/index.js",
+    "./browser": "./lib/browser/index.js"
   },
-  "types": "./package/index.d.ts",
+  "types": "./lib/browser/index.d.ts",
   "scripts": {
-    "build": "svelte-kit sync && svelte-package",
-    "build:watch": "svelte-kit sync && svelte-package --watch",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
+    "prepare": "SDK_ENV=browser svelte-kit sync",
+    "build": "nx run-many -p @builder.io/sdk-svelte -t build:node build:edge build:browser",
+    "build:node": "SDK_ENV=node svelte-package -i src/ -o lib/node",
+    "build:edge": "SDK_ENV=edge svelte-package -i src/ -o lib/edge",
+    "build:browser": "SDK_ENV=browser svelte-package -i src/ -o lib/browser",
+    "check": "SDK_ENV=browser svelte-check --tsconfig ./tsconfig.json"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "1.0.0-next.71",
-    "@sveltejs/kit": "^1.16.2",
-    "@sveltejs/package": "1.0.0-next.1",
+    "@builder.io/sdks": "workspace:*",
+    "@sveltejs/adapter-auto": "^2.1.0",
+    "@sveltejs/kit": "^1.22.4",
+    "@sveltejs/package": "^2.2.0",
     "nx": "^16.6.0",
     "nx-cloud": "^16.2.0",
-    "svelte": "^3.59.1",
+    "svelte": "^4.1.2",
     "svelte-check": "^3.4.6",
     "svelte-preprocess": "^5.0.4",
     "tslib": "^2.3.1",
@@ -47,19 +59,29 @@
     "vite": "^4.4.8"
   },
   "nx": {
-    "implicitDependencies": [
-      "@builder.io/sdks"
-    ],
     "targets": {
-      "build": {
+      "prepare": {
         "dependsOn": [
           "^build:svelte",
           "^build"
         ],
         "outputs": [
-          "{projectRoot}/package"
+          "{projectRoot}/.svelte-kit"
+        ]
+      },
+      "build": {
+        "dependsOn": [
+          "^build:svelte",
+          "^build",
+          "prepare"
+        ],
+        "outputs": [
+          "{projectRoot}/lib"
         ]
       }
     }
+  },
+  "peerDependencies": {
+    "svelte": "^4.1.2"
   }
 }

package/src/blocks/columns/columns.svelte

@@ -29,6 +29,7 @@
     BuilderComponentsProp,
     PropsWithBuilderData,
   } from "../../types/builder-props.js";
+  import { deoptSignal } from "../../functions/deopt.js";
 
   export let js: PropsWithBuilderData<ColumnProps>["js"];
   export let space: PropsWithBuilderData<ColumnProps>["space"] = undefined;
@@ -78,11 +79,6 @@
   }
   function columnCssVars(index: number) {
     const gutter = index === 0 ? 0 : gutterSize;
-    if (TARGET === "reactNative") {
-      return {
-        marginLeft: stackColumnsAt === "never" ? gutter : 0,
-      } as any as Dictionary<string>;
-    }
     const width = getColumnCssWidth(index);
     const gutterPixels = `${gutter}px`;
     const mobileWidth = "100%";
@@ -107,7 +103,7 @@
         stackedStyle: mobileMarginLeft,
         desktopStyle: gutterPixels,
       }),
-    } as any as Dictionary<string>;
+    } as Dictionary<string>;
   }
   function getWidthForBreakpointSize(size: SizeName) {
     const breakpointSizes = getSizesForBreakpoints(
@@ -179,7 +175,6 @@
       {...{}}
     >
       <Blocks
-        blocks={column.blocks}
         path={`component.options.columns.${index}.blocks`}
         parent={builderBlock.id}
         styleProp={{
@@ -187,6 +182,7 @@
         }}
         context={builderContext}
         registeredComponents={builderComponents}
+        blocks={column.blocks}
       />
     </div>
   {/each}

package/src/blocks/text/text.svelte

@@ -22,6 +22,5 @@
   use:mitosis_styling={{
     outline: "none",
   }}
-  class="builder-text"
-  {...{}}>{@html text?.toString() || ""}</span
+  class="builder-text">{@html text?.toString() || ""}</span
 >

package/src/constants/sdk-version.ts

@@ -1 +1 @@
-export const SDK_VERSION = "0.5.9"
+export const SDK_VERSION = "0.6.1"

package/src/functions/deopt.ts

@@ -0,0 +1,6 @@
+/**
+ * Workaround until https://github.com/BuilderIO/qwik/issues/5017 is fixed.
+ */
+export function deoptSignal<T>(value: T): T {
+  return value;
+}

package/src/functions/evaluate/edge-runtime/edge-runtime.ts

@@ -0,0 +1,96 @@
+import { logger } from '../../../helpers/logger.js';
+import { set } from '../../set.js';
+import Interpreter from './acorn-interpreter.js';
+import type { ExecutorArgs } from '../helpers.js';
+import { getFunctionArguments } from '../helpers.js';
+const processCode = (code: string) => {
+  return code.split('\n').map(line => {
+    const trimmed = line.trim();
+
+    // this async wrapper doesn't work in JS-interpreter, so we drop it.
+    if (line.includes('__awaiter')) return undefined;
+
+    // we find all state setter expressions and append a call to setRootState afterwards
+    const isStateSetter = trimmed.startsWith('state.');
+    if (!isStateSetter) return line;
+    const [lhs, rhs] = trimmed.split('=');
+    const setStr = lhs.replace('state.', '').trim();
+    const setExpr = `setRootState('${setStr}', ${rhs.trim()})`;
+    return `
+  ${line}
+  ${setExpr}
+  `;
+  }).filter(Boolean).join('\n');
+};
+const getJSONValName = (val: string) => val + 'JSON';
+export const runInEdge = ({
+  builder,
+  context,
+  event,
+  rootState,
+  localState,
+  rootSetState,
+  code
+}: ExecutorArgs) => {
+  const state = {
+    ...rootState,
+    ...localState
+  };
+  const properties = getFunctionArguments({
+    builder,
+    context,
+    event,
+    state
+  });
+
+  /**
+   * Deserialize all properties from JSON strings to JS objects
+   */
+  const prependedCode = properties.map(([key]) => {
+    const jsonValName = getJSONValName(key);
+    return `var ${key} = ${jsonValName} === undefined ? undefined : JSON.parse(${jsonValName});`;
+  }).join('\n');
+  const cleanedCode = processCode(code);
+  if (cleanedCode === '') {
+    logger.warn('Skipping evaluation of empty code block.');
+    return;
+  }
+  const transformed = `
+function theFunction() {
+  ${prependedCode}
+
+  ${cleanedCode}
+}
+theFunction();
+`;
+  const setRootState = (prop: string, value: any) => {
+    const newState = set(state, prop, value);
+    rootSetState?.(newState);
+  };
+  const initFunc = function (interpreter: any, globalObject: any) {
+    /**
+     * serialize all function args to JSON strings
+     */
+    properties.forEach(([key, val]) => {
+      const jsonVal = JSON.stringify(val);
+      interpreter.setProperty(globalObject, getJSONValName(key), jsonVal);
+    });
+
+    /**
+     * Add a JavaScript function "setRootState" to the interpreter's global object, that will be called whenever a
+     * state property is set. This function will update the state object.
+     */
+    interpreter.setProperty(globalObject, 'setRootState', interpreter.createNativeFunction(setRootState));
+  };
+  try {
+    const myInterpreter = new Interpreter(transformed, initFunc);
+    myInterpreter.run();
+    const output = myInterpreter.pseudoToNative(myInterpreter.value);
+    return output;
+  } catch (e) {
+    logger.warn('Custom code error in edge runtime. NOTE: your code must be ES5 JavaScript.', {
+      e
+    });
+    return;
+  }
+}

package/src/functions/evaluate/edge-runtime/index.ts

@@ -0,0 +1 @@
+export { runInEdge as evaluator } from './edge-runtime.js'

package/src/functions/evaluate/evaluate.ts

@@ -3,9 +3,19 @@ import { isBrowser } from '../is-browser.js';
 import { isEditing } from '../is-editing.js';
 import type { BuilderGlobals, ExecutorArgs } from './helpers.js';
 import { getUserAttributes } from '../track/helpers.js';
-import { runInBrowser } from './browser-runtime/browser.js';
-import { runInNonNode } from './non-node-runtime/index.js';
-import { isNonNodeServer } from '../is-non-node-server.js';
+
+/**
+ * THIS IS A MAGICAL IMPORT. It is aliased by the build process of every SDK configuration, so that
+ * it points to the correct runtime for that configuration, which are expected to live exactly at:
+ *  - ./browser-runtime/index.js
+ *  - ./node-runtime/index.js
+ *  - ./edge-runtime/index.js
+ *
+ * We have code in `/output-generation` that does this aliasing, and is re-used by each SDK.
+ * Also, each individual `tsconfig.json` aliases this import to the browser runtime so that the
+ * types can be resolved correctly.
+ */
+import { evaluator } from 'placeholder-runtime';
 export type EvaluatorArgs = Omit<ExecutorArgs, 'builder' | 'event'> & {
   event?: Event;
   isExpression?: boolean;
@@ -46,9 +56,7 @@ export function evaluate({
     localState
   };
   try {
-    if (isBrowser()) return runInBrowser(args);
-    if (isNonNodeServer()) return runInNonNode(args);
-    return runInBrowser(args);
+    return evaluator(args);
   } catch (e: any) {
     logger.error('Failed code evaluation: ' + e.message, {
       code

package/src/functions/evaluate/placeholder-runtime.ts

@@ -0,0 +1,4 @@
+import type { ExecutorArgs } from './helpers.js';
+export const evaluator = (_args: ExecutorArgs) => {
+  throw new Error('Placeholder evaluator not implemented. Make sure the SDK is properly replacing the import to the evaluator with one of edge/node/browser runtime evaluators.');
+}

package/src/functions/fetch-builder-props.ts

@@ -37,7 +37,8 @@ type GetBuilderPropsOptions = (Omit<GetContentOptions, 'model'> & {
 });
 
 /**
- * Fetches builder content, and returns it along with sensible defaults for other props that `Content` needs to render.
+ * Given an `apiKey` and `url` (or `path` + `searchParams`), provides all props that `Content` needs to render Builder Content.
+ *
  */
 export const fetchBuilderProps = async (_args: GetBuilderPropsOptions): Promise<ContentVariantsPrps> => {
   const urlPath = _args.path || _args.url?.pathname || _args.userAttributes?.urlPath;

package/src/functions/get-content/index.ts

@@ -25,10 +25,9 @@ export async function fetchOneEntry(options: GetContentOptions): Promise<Builder
 }
 
 /**
- * @deprecated
- * Consider using `fetchBuilderProps` instead for easier setup.
+ * @deprecated `getContent` was renamed to `fetchOneEntry`. This is a temporary alias to avoid breaking changes.
  *
- * NOTE: `getContent` was renamed to `fetchOneEntry` and will be removed in a future release.
+ * NOTE: consider using `fetchBuilderProps` instead for easier setup.
  */
 export const getContent = fetchOneEntry;
 type ContentResults = {
@@ -46,7 +45,7 @@ const _fetchContent = async (options: GetContentOptions) => {
 };
 
 /**
- * Exported only for testing purposes. Should not be used directly.
+ * @internal Exported only for testing purposes. Do not use.
  */
 export const _processContentResult = async (options: GetContentOptions, content: ContentResults, url: URL = generateContentUrl(options)) => {
   const canTrack = getDefaultCanTrack(options.canTrack);
@@ -106,6 +105,6 @@ export async function fetchEntries(options: GetContentOptions) {
 }
 
 /**
- * @deprecated Use `fetchEntries` instead.
+ * @deprecated `getAllContent` was renamed to `fetchEntries`. This is a temporary alias to avoid breaking changes.
  */
 export const getAllContent = fetchEntries

package/src/functions/is-edge-runtime.ts

@@ -0,0 +1,9 @@
+import { isBrowser } from './is-browser.js';
+
+/**
+ * Identifies edge runtimes (edge, workers, serverless, etc.)
+ */
+export function isEdgeRuntime(): boolean {
+  const hasNode = () => typeof process !== 'undefined' && process?.versions?.node;
+  return !isBrowser() && !hasNode();
+}

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

@@ -11,10 +11,10 @@ import { default as Content } from '../components/content-variants/content-varia
 export { Blocks, Content };
 
 /**
- * @deprecated Use `Blocks` instead.
+ * @deprecated Renamed to `Blocks`.
  */
 export const RenderBlocks = Blocks;
 /**
- * @deprecated Use `Content` instead.
+ * @deprecated Renamed to `Content`.
  */
 export const RenderContent = Content