@builder.io/sdk-svelte 0.2.1 → 0.2.2

package/package/--package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "type": "module",
   "files": [
     "package",
@@ -128,6 +128,7 @@
     "./helpers/css": "./helpers/css.js",
     "./helpers/flatten": "./helpers/flatten.js",
     "./helpers/localStorage": "./helpers/localStorage.js",
+    "./helpers/logger": "./helpers/logger.js",
     "./helpers/nullable": "./helpers/nullable.js",
     "./helpers/sessionId": "./helpers/sessionId.js",
     "./helpers/time": "./helpers/time.js",
@@ -152,7 +153,7 @@
   "types": "./package/index.d.ts",
   "devDependencies": {
     "@sveltejs/adapter-auto": "1.0.0-next.71",
-    "@sveltejs/kit": "1.0.0-next.474",
+    "@sveltejs/kit": "^1.15.2",
     "@sveltejs/package": "1.0.0-next.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.7.1",

package/package/CHANGELOG.md

@@ -1,3 +1,9 @@
+### 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.

package/package/blocks/symbol/symbol.svelte

@@ -7,6 +7,7 @@ import { getContent } from "../../functions/get-content/index.js";
 import "../../types/builder-content.js";
 import "../../types/builder-block.js";
 import { TARGET } from "../../constants/target";
+import { logger } from "../../helpers/logger";
 const isEvent = (attr) => attr.startsWith("on:");
 const isNonEvent = (attr) => !attr.startsWith("on:");
 const filterAttrs = (attrs = {}, filter) => {
@@ -66,7 +67,7 @@ function fetchContent() {
             }
         })
             .catch((err) => {
-            console.error("[Builder.io]: Could not fetch symbol content: ", err);
+            logger.error("Could not fetch symbol content: ", err);
         });
     }
 }

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

@@ -14,7 +14,6 @@ import { TARGET } from "../../constants/target.js";
 import { extractTextStyles } from "../../functions/extract-text-styles.js";
 import RenderComponent from "./render-component.svelte";
 import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-import { checkIsDefined } from "../../helpers/nullable.js";
 const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
     const setup = (attr) => node.addEventListener(attr.substr(3), attrs[attr]);
@@ -44,10 +43,10 @@ $: useBlock = () => {
         });
 };
 $: canShowBlock = () => {
-    if (checkIsDefined(useBlock().hide)) {
+    if ("hide" in useBlock()) {
         return !useBlock().hide;
     }
-    if (checkIsDefined(useBlock().show)) {
+    if ("show" in useBlock()) {
         return useBlock().show;
     }
     return true;

package/package/components/render-content/render-content.svelte

@@ -20,6 +20,7 @@ import { getInteractionPropertiesForEvent } from "../../functions/track/interact
 import "./render-content.types.js";
 import { getContentInitialValue, getContextStateInitialValue, } from "./render-content.helpers.js";
 import { TARGET } from "../../constants/target.js";
+import { logger } from "../../helpers/logger.js";
 export let content;
 export let data;
 export let canTrack;
@@ -198,7 +199,7 @@ let httpReqsData = {};
 let clicked = false;
 onMount(() => {
     if (!apiKey) {
-        console.error("[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
+        logger.error("No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop.");
     }
     if (isBrowser()) {
         if (isEditing()) {
@@ -237,20 +238,21 @@ onMount(() => {
         // override normal content in preview mode
         if (isPreviewing()) {
             const searchParams = new URL(location.href).searchParams;
-            const searchParamPreview = searchParams.get("builder.preview");
+            const searchParamPreviewModel = searchParams.get("builder.preview");
+            const searchParamPreviewId = searchParams.get(`builder.preview.${searchParamPreviewModel}`);
             const previewApiKey = searchParams.get("apiKey") || searchParams.get("builder.space");
             /**
              * Make sure that:
              * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
              *  at the same time, e.g. header/page/footer.
              * - the API key is the same, since we don't want to preview content from other organizations.
-             *
-             * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
-             * this break scenarios where the item is not published yet?
+             * - if there is content, that the preview ID is the same as that of the one we receive.
              *
              * TO-DO: should we only update the state when there is a change?
              **/
-            if (searchParamPreview === model && previewApiKey === apiKey) {
+            if (searchParamPreviewModel === model &&
+                previewApiKey === apiKey &&
+                (!content || searchParamPreviewId === content.id)) {
                 getContent({
                     model: model,
                     apiKey: apiKey,

package/package/functions/get-block-properties.d.ts

@@ -3,4 +3,5 @@ export declare function getBlockProperties(block: BuilderBlock): {
     'builder-id': string | undefined;
     style: string | Partial<CSSStyleDeclaration> | undefined;
     class: string;
+    href: any;
 };

package/package/functions/get-block-properties.js

@@ -1,8 +1,39 @@
 import { TARGET } from '../constants/target.js';
 import { convertStyleMapToCSSArray } from '../helpers/css.js';
 import { transformBlockProperties } from './transform-block-properties.js';
+const extractRelevantRootBlockProperties = (block) => {
+    // currently we are only spreading the `href` property
+    // TO-DO: potentially spread all properties from block, but only if they are not already defined by BuilderBlock
+    // const {
+    //   '@type': _type,
+    //   '@version': _version,
+    //   id: _id,
+    //   tagName: _tagName,
+    //   layerName: _layerName,
+    //   groupLocked: _groupLocked,
+    //   layerLocked: _layerLocked,
+    //   class: _class,
+    //   children: _children,
+    //   responsiveStyles: _responsiveStyles,
+    //   component: _component,
+    //   bindings: _bindings,
+    //   meta: _meta,
+    //   actions: _actions,
+    //   properties: _properties,
+    //   code: _code,
+    //   repeat: _repeat,
+    //   animations: _animations,
+    //   style: _style,
+    //   hide: _hide,
+    //   show: _show,
+    //   // anything set by dynamic bindings outside of predefined `BuilderBlock` properties
+    //   ...remainingBlockProperties
+    // } = block;
+    return { href: block.href };
+};
 export function getBlockProperties(block) {
     const properties = {
+        ...extractRelevantRootBlockProperties(block),
         ...block.properties,
         'builder-id': block.id,
         style: getStyleAttribute(block.style),

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

@@ -7,5 +7,5 @@ type ContentResponse = {
     status: number;
     message: string;
 };
-export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse>;
+export declare function getAllContent(options: GetContentOptions): Promise<ContentResponse | null>;
 export {};

package/package/functions/get-content/index.js

@@ -1,33 +1,40 @@
+import { logger } from '../../helpers/logger.js';
 import { fetch } from '../get-fetch.js';
 import { handleABTesting } from './ab-testing.js';
 import { generateContentUrl } from './generate-content-url.js';
 export async function getContent(options) {
     const allContent = await getAllContent({ ...options, limit: 1 });
-    if ('results' in allContent) {
+    if (allContent && 'results' in allContent) {
         return allContent?.results[0] || null;
     }
     return null;
 }
 export async function getAllContent(options) {
-    const url = generateContentUrl(options);
-    const res = await fetch(url.href);
-    const content = await res.json();
-    if ('status' in content && !('results' in content)) {
-        console.error('[Builder.io]: Error fetching data. ', content, options);
-        return content;
-    }
-    const canTrack = options.canTrack !== false;
     try {
-        if (canTrack &&
-            // This makes sure we have a non-error response with the results array.
-            Array.isArray(content.results)) {
-            for (const item of content.results) {
-                await handleABTesting({ item, canTrack });
+        const url = generateContentUrl(options);
+        const res = await fetch(url.href);
+        const content = await res.json();
+        if ('status' in content && !('results' in content)) {
+            logger.error('Error fetching data. ', content, options);
+            return content;
+        }
+        const canTrack = options.canTrack !== false;
+        try {
+            if (canTrack &&
+                // This makes sure we have a non-error response with the results array.
+                Array.isArray(content.results)) {
+                for (const item of content.results) {
+                    await handleABTesting({ item, canTrack });
+                }
             }
         }
+        catch (e) {
+            logger.error('Could not setup A/B testing. ', e);
+        }
+        return content;
     }
-    catch (e) {
-        console.error('[Builder.io]: Could not setup A/B testing. ', e);
+    catch (error) {
+        logger.error('Error fetching data. ', error);
+        return null;
     }
-    return content;
 }

package/package/functions/track/index.js

@@ -1,4 +1,5 @@
 import { TARGET } from '../../constants/target.js';
+import { logger } from '../../helpers/logger.js';
 import { getSessionId } from '../../helpers/sessionId.js';
 import { getVisitorId } from '../../helpers/visitorId.js';
 import { isBrowser } from '../is-browser.js';
@@ -30,7 +31,7 @@ const createEvent = async ({ type: eventType, canTrack, apiKey, metadata, ...pro
 });
 export async function _track(eventProps) {
     if (!eventProps.apiKey) {
-        console.error('[Builder.io]: Missing API key for track call. Please provide your API key.');
+        logger.error('Missing API key for track call. Please provide your API key.');
         return;
     }
     if (!eventProps.canTrack) {

package/package/helpers/logger.d.ts

@@ -0,0 +1,5 @@
+export declare const logger: {
+    log: (...message: any[]) => void;
+    error: (...message: any[]) => void;
+    warn: (...message: any[]) => void;
+};

package/package/helpers/logger.js

@@ -0,0 +1,6 @@
+const MSG_PREFIX = '[Builder.io]: ';
+export const logger = {
+    log: (...message) => console.log(MSG_PREFIX, ...message),
+    error: (...message) => console.error(MSG_PREFIX, ...message),
+    warn: (...message) => console.warn(MSG_PREFIX, ...message),
+};

package/package/types/builder-content.d.ts

@@ -1,5 +1,5 @@
 import type { BuilderBlock } from './builder-block.js';
-import type { Input } from './components.js';
+import type { Input } from './input.js';
 import type { Nullable } from './typescript.js';
 export interface Breakpoints {
     small: number;

package/package/types/components.d.ts

@@ -1,76 +1,5 @@
 import type { BuilderElement } from './element';
-export interface Input {
-    name: string;
-    friendlyName?: string;
-    description?: string;
-    defaultValue?: any;
-    type: string;
-    valueType?: {
-        type?: string;
-    };
-    required?: boolean;
-    autoFocus?: boolean;
-    subFields?: Input[];
-    helperText?: string;
-    allowedFileTypes?: string[];
-    imageHeight?: number;
-    imageWidth?: number;
-    mediaHeight?: number;
-    mediaWidth?: number;
-    hideFromUI?: boolean;
-    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;
-    options?: {
-        [key: string]: any;
-    };
-    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;
-    };
-    advanced?: boolean;
-    onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
-    code?: boolean;
-    richText?: boolean;
-    showIf?: ((options: Map<string, any>) => boolean) | string;
-    copyOnAdd?: boolean;
-}
+import type { Input } from './input';
 export interface ComponentInfo {
     /**
      * Name your component something unique, e.g. 'MyButton'. You can override built-in components

package/package/types/input.d.ts

@@ -114,4 +114,8 @@ export interface Input {
      * 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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@builder.io/sdk-svelte",
   "description": "Builder.io SDK for Svelte",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "type": "module",
   "files": [
     "package",
@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "@sveltejs/adapter-auto": "1.0.0-next.71",
-    "@sveltejs/kit": "1.0.0-next.474",
+    "@sveltejs/kit": "^1.15.2",
     "@sveltejs/package": "1.0.0-next.1",
     "svelte": "^3.44.0",
     "svelte-check": "^2.7.1",

package/src/blocks/symbol/symbol.svelte

@@ -27,6 +27,7 @@
   import { BuilderContent } from "../../types/builder-content.js";
   import { BuilderBlock } from "../../types/builder-block.js";
   import { TARGET } from "../../constants/target";
+  import { logger } from "../../helpers/logger";
 
   const isEvent = (attr) => attr.startsWith("on:");
   const isNonEvent = (attr) => !attr.startsWith("on:");
@@ -93,7 +94,7 @@
           }
         })
         .catch((err) => {
-          console.error("[Builder.io]: Could not fetch symbol content: ", err);
+          logger.error("Could not fetch symbol content: ", err);
         });
     }
   }

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

@@ -25,7 +25,6 @@
   import { extractTextStyles } from "../../functions/extract-text-styles.js";
   import RenderComponent from "./render-component.svelte";
   import { getReactNativeBlockStyles } from "../../functions/get-react-native-block-styles.js";
-  import { checkIsDefined } from "../../helpers/nullable.js";
 
   const setAttrs = (node, attrs = {}) => {
     const attrKeys = Object.keys(attrs);
@@ -59,10 +58,10 @@
         });
   };
   $: canShowBlock = () => {
-    if (checkIsDefined(useBlock().hide)) {
+    if ("hide" in useBlock()) {
       return !useBlock().hide;
     }
-    if (checkIsDefined(useBlock().show)) {
+    if ("show" in useBlock()) {
       return useBlock().show;
     }
     return true;

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

@@ -38,6 +38,7 @@
     getContextStateInitialValue,
   } from "./render-content.helpers.js";
   import { TARGET } from "../../constants/target.js";
+  import { logger } from "../../helpers/logger.js";
 
   export let content: RenderContentProps["content"];
   export let data: RenderContentProps["data"];
@@ -236,8 +237,8 @@
 
   onMount(() => {
     if (!apiKey) {
-      console.error(
-        "[Builder.io]: No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
+      logger.error(
+        "No API key provided to `RenderContent` component. This can cause issues. Please provide an API key using the `apiKey` prop."
       );
     }
     if (isBrowser()) {
@@ -283,7 +284,10 @@
       // override normal content in preview mode
       if (isPreviewing()) {
         const searchParams = new URL(location.href).searchParams;
-        const searchParamPreview = searchParams.get("builder.preview");
+        const searchParamPreviewModel = searchParams.get("builder.preview");
+        const searchParamPreviewId = searchParams.get(
+          `builder.preview.${searchParamPreviewModel}`
+        );
         const previewApiKey =
           searchParams.get("apiKey") || searchParams.get("builder.space");
 
@@ -292,13 +296,15 @@
          * - the preview model name is the same as the one we're rendering, since there can be multiple models rendered
          *  at the same time, e.g. header/page/footer.
          * - the API key is the same, since we don't want to preview content from other organizations.
-         *
-         * TO-DO: should we check that the preview item ID is the same as the initial one being rendered? Or would
-         * this break scenarios where the item is not published yet?
+         * - if there is content, that the preview ID is the same as that of the one we receive.
          *
          * TO-DO: should we only update the state when there is a change?
          **/
-        if (searchParamPreview === model && previewApiKey === apiKey) {
+        if (
+          searchParamPreviewModel === model &&
+          previewApiKey === apiKey &&
+          (!content || searchParamPreviewId === content.id)
+        ) {
           getContent({
             model: model,
             apiKey: apiKey,

package/src/functions/get-block-properties.ts

@@ -3,8 +3,42 @@ import { convertStyleMapToCSSArray } from '../helpers/css.js';
 import type { BuilderBlock } from '../types/builder-block.js';
 import { transformBlockProperties } from './transform-block-properties.js';
 
+const extractRelevantRootBlockProperties = (block: BuilderBlock) => {
+  // currently we are only spreading the `href` property
+  // TO-DO: potentially spread all properties from block, but only if they are not already defined by BuilderBlock
+
+  // const {
+  //   '@type': _type,
+  //   '@version': _version,
+  //   id: _id,
+  //   tagName: _tagName,
+  //   layerName: _layerName,
+  //   groupLocked: _groupLocked,
+  //   layerLocked: _layerLocked,
+  //   class: _class,
+  //   children: _children,
+  //   responsiveStyles: _responsiveStyles,
+  //   component: _component,
+  //   bindings: _bindings,
+  //   meta: _meta,
+  //   actions: _actions,
+  //   properties: _properties,
+  //   code: _code,
+  //   repeat: _repeat,
+  //   animations: _animations,
+  //   style: _style,
+  //   hide: _hide,
+  //   show: _show,
+  //   // anything set by dynamic bindings outside of predefined `BuilderBlock` properties
+  //   ...remainingBlockProperties
+  // } = block;
+
+  return { href: (block as any).href };
+};
+
 export function getBlockProperties(block: BuilderBlock) {
   const properties = {
+    ...extractRelevantRootBlockProperties(block),
     ...block.properties,
     'builder-id': block.id,
     style: getStyleAttribute(block.style),

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

@@ -1,3 +1,4 @@
+import { logger } from '../../helpers/logger.js';
 import type { BuilderContent } from '../../types/builder-content.js';
 import { fetch } from '../get-fetch.js';
 import { handleABTesting } from './ab-testing.js';
@@ -8,7 +9,7 @@ export async function getContent(
   options: GetContentOptions
 ): Promise<BuilderContent | null> {
   const allContent = await getAllContent({ ...options, limit: 1 });
-  if ('results' in allContent) {
+  if (allContent && 'results' in allContent) {
     return allContent?.results[0] || null;
   }
 
@@ -26,31 +27,36 @@ type ContentResponse =
 
 export async function getAllContent(
   options: GetContentOptions
-): Promise<ContentResponse> {
-  const url = generateContentUrl(options);
+): Promise<ContentResponse | null> {
+  try {
+    const url = generateContentUrl(options);
 
-  const res = await fetch(url.href);
-  const content = await (res.json() as Promise<ContentResponse>);
+    const res = await fetch(url.href);
+    const content = await (res.json() as Promise<ContentResponse>);
 
-  if ('status' in content && !('results' in content)) {
-    console.error('[Builder.io]: Error fetching data. ', content, options);
-    return content;
-  }
+    if ('status' in content && !('results' in content)) {
+      logger.error('Error fetching data. ', content, options);
+      return content;
+    }
 
-  const canTrack = options.canTrack !== false;
-  try {
-    if (
-      canTrack &&
-      // This makes sure we have a non-error response with the results array.
-      Array.isArray(content.results)
-    ) {
-      for (const item of content.results) {
-        await handleABTesting({ item, canTrack });
+    const canTrack = options.canTrack !== false;
+    try {
+      if (
+        canTrack &&
+        // This makes sure we have a non-error response with the results array.
+        Array.isArray(content.results)
+      ) {
+        for (const item of content.results) {
+          await handleABTesting({ item, canTrack });
+        }
       }
+    } catch (e) {
+      logger.error('Could not setup A/B testing. ', e);
     }
-  } catch (e) {
-    console.error('[Builder.io]: Could not setup A/B testing. ', e);
-  }
 
-  return content;
+    return content;
+  } catch (error) {
+    logger.error('Error fetching data. ', error);
+    return null;
+  }
 }

package/src/functions/register-component.ts

@@ -1,6 +1,7 @@
 import { serializeFn } from '../blocks/util.js';
 import type { RegisteredComponent } from '../context/types.js';
-import type { ComponentInfo, Input } from '../types/components.js';
+import type { ComponentInfo } from '../types/components.js';
+import type { Input } from '../types/input.js';
 import { fastClone } from './fast-clone.js';
 
 /**
@@ -37,14 +38,13 @@ const prepareComponentInfoToSend = ({
   ...info
 }: ComponentInfo): ComponentInfo => ({
   ...fastClone(info),
-  inputs: inputs?.map(
-    (input): Input =>
-      Object.entries(input).reduce(
-        (acc, [key, value]) => ({
-          ...acc,
-          [key]: serializeValue(value),
-        }),
-        {} as Input
-      )
+  inputs: inputs?.map((input) =>
+    Object.entries(input).reduce(
+      (acc, [key, value]) => ({
+        ...acc,
+        [key]: serializeValue(value),
+      }),
+      {} as Input
+    )
   ),
 });

package/src/functions/track/index.ts

@@ -1,4 +1,5 @@
 import { TARGET } from '../../constants/target.js';
+import { logger } from '../../helpers/logger.js';
 import { getSessionId } from '../../helpers/sessionId.js';
 import { getVisitorId } from '../../helpers/visitorId.js';
 import type { CanTrack } from '../../types/can-track.js';
@@ -100,8 +101,8 @@ const createEvent = async ({
 
 export async function _track(eventProps: EventProps) {
   if (!eventProps.apiKey) {
-    console.error(
-      '[Builder.io]: Missing API key for track call. Please provide your API key.'
+    logger.error(
+      'Missing API key for track call. Please provide your API key.'
     );
     return;
   }

package/src/helpers/logger.ts

@@ -0,0 +1,6 @@
+const MSG_PREFIX = '[Builder.io]: ';
+export const logger = {
+  log: (...message: any[]) => console.log(MSG_PREFIX, ...message),
+  error: (...message: any[]) => console.error(MSG_PREFIX, ...message),
+  warn: (...message: any[]) => console.warn(MSG_PREFIX, ...message),
+};

package/src/types/builder-content.ts

@@ -1,5 +1,5 @@
 import type { BuilderBlock } from './builder-block.js';
-import type { Input } from './components.js';
+import type { Input } from './input.js';
 import type { Nullable } from './typescript.js';
 
 export interface Breakpoints {

package/src/types/components.ts

@@ -1,72 +1,5 @@
 import type { BuilderElement } from './element';
-
-export interface Input {
-  name: string;
-  friendlyName?: string;
-  description?: string;
-  defaultValue?: any;
-  type: string;
-  valueType?: {
-    type?: string;
-  };
-  required?: boolean;
-  autoFocus?: boolean;
-  subFields?: Input[];
-  helperText?: string;
-  allowedFileTypes?: string[];
-  imageHeight?: number;
-  imageWidth?: number;
-  mediaHeight?: number;
-  mediaWidth?: number;
-  hideFromUI?: boolean;
-  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;
-  options?: { [key: string]: any };
-  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;
-  };
-  advanced?: boolean;
-  onChange?: ((options: Map<string, any>) => void | Promise<void>) | string;
-  code?: boolean;
-  richText?: boolean;
-  showIf?: ((options: Map<string, any>) => boolean) | string;
-  copyOnAdd?: boolean;
-}
+import type { Input } from './input';
 
 export interface ComponentInfo {
   /**

package/src/types/input.ts

@@ -117,4 +117,9 @@ export interface Input {
    * 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;
 }