From 46c38b89ea87b8efc87a6e43d4bc2eb6c7bf36b2 Mon Sep 17 00:00:00 2001
From: Alexander Nortung <alex_nortung@live.dk>
Date: Thu, 30 May 2024 15:26:57 +0000
Subject: [PATCH] fix(sdk): Allow passing readonly arrays (#3308)

## Description

It should be possible to assign readonly types to `Component` and other
`@builder.io/sdk` types, since no mutations are(/should) happening.

This is needed to make type inference working in the
[`@oak-digital/builder-helpers`](https://github.com/Oak-Digital/builder-helpers)
package.

See the following example:

```ts
import Counter from './counter';

const registerCounter = {
    name: 'Counter',
    inputs: [
        {
            name: 'text',
            type: 'string',
        },
    ];
} as const;

Builder.registerComponent(Counter, registerCounter);
```

This example would result in a type error while registering the
component to builder. This is not really desired, so this PR makes it
possible to ALSO assign readonly types.

This PR fixes #3293

---------

Co-authored-by: Sami Jaber <me@sami.website>
---
 .changeset/happy-lobsters-cheer.md |  5 +++++
 packages/core/src/builder.class.ts | 20 +++++++++++---------
 2 files changed, 16 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/happy-lobsters-cheer.md

diff --git a/.changeset/happy-lobsters-cheer.md b/.changeset/happy-lobsters-cheer.md
new file mode 100644
index 0000000000..73826a296c
--- /dev/null
+++ b/.changeset/happy-lobsters-cheer.md
@@ -0,0 +1,5 @@
+---
+"@builder.io/sdk": patch
+---
+
+Fix: Mark component types as `readonly`.
diff --git a/packages/core/src/builder.class.ts b/packages/core/src/builder.class.ts
index 50071eb590..a927d3493c 100644
--- a/packages/core/src/builder.class.ts
+++ b/packages/core/src/builder.class.ts
@@ -543,7 +543,7 @@ export interface Input {
   required?: boolean;
   /** @hidden */
   autoFocus?: boolean;
-  subFields?: Input[];
+  subFields?: readonly Input[];
   /**
    * Additional text to render in the UI to give guidance on how to use this
    *
@@ -554,7 +554,7 @@ export interface Input {
    */
   helperText?: string;
   /** @hidden */
-  allowedFileTypes?: string[];
+  allowedFileTypes?: readonly string[];
   /** @hidden */
   imageHeight?: number;
   /** @hidden */
@@ -602,7 +602,9 @@ export interface Input {
   /**
    * For "text" input type, specifying an enum will show a dropdown of options instead
    */
-  enum?: string[] | { label: string; value: string | number | boolean; helperText?: string }[];
+  enum?:
+    | readonly string[]
+    | readonly { label: string; value: string | number | boolean; helperText?: string }[];
   /** Regex field validation for all string types (text, longText, html, url, etc) */
   regex?: {
     /** pattern to test, like "^\/[a-z]$" */
@@ -692,7 +694,7 @@ export interface Component {
    * Input schema for your component for users to fill in the options via a UI
    * that translate to this components props
    */
-  inputs?: Input[];
+  inputs?: readonly Input[];
   /** @hidden @deprecated */
   class?: any;
   /** @hidden @deprecated */
@@ -727,7 +729,7 @@ export interface Component {
   /**
    * Default children
    */
-  defaultChildren?: BuilderElement[];
+  defaultChildren?: readonly BuilderElement[];
   /**
    * Default options to merge in when creating this block
    */
@@ -745,7 +747,7 @@ export interface Component {
   /**
    * Passing a list of model names will restrict using the component to only the models listed here, otherwise it'll be available for all models
    */
-  models?: string[];
+  models?: readonly string[];
 
   /**
    * Specify restrictions direct children must match
@@ -844,7 +846,7 @@ export interface InsertMenuConfig {
   priority?: number;
   persist?: boolean;
   advanced?: boolean;
-  items: InsertMenuItem[];
+  items: readonly InsertMenuItem[];
 }
 
 export function BuilderComponent(info: Partial<Component> = {}) {
@@ -856,7 +858,7 @@ type Settings = any;
 
 export interface Action {
   name: string;
-  inputs?: Input[];
+  inputs?: readonly Input[];
   returnType?: Input;
   action: Function | string;
 }
@@ -997,7 +999,7 @@ export class Builder {
     }
   }
 
-  static fields(name: string, fields: Input[]) {
+  static fields(name: string, fields: readonly Input[]) {
     window.parent?.postMessage(
       {
         type: 'builder.fields',