From af366a9f7daf2ee0275f330b51e1626045285eab Mon Sep 17 00:00:00 2001
From: Josh Crites <josh@getwyz.com>
Date: Tue, 29 Apr 2025 16:56:34 -0400
Subject: [PATCH 1/4] fix error typescript configuration error

Option 'module' must be set to 'Node16' when option 'moduleResolution' is set to 'Node16'.
---
 examples/islands/islands-project/islands-app/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/islands/islands-project/islands-app/tsconfig.json b/examples/islands/islands-project/islands-app/tsconfig.json
index 085425a..91d66fc 100644
--- a/examples/islands/islands-project/islands-app/tsconfig.json
+++ b/examples/islands/islands-project/islands-app/tsconfig.json
@@ -1,7 +1,7 @@
 {
   "compilerOptions": {
     "target": "ES2017",
-    "module": "commonjs",
+    "module": "Node16",
     "moduleResolution": "node16",
     "strict": true,
     "esModuleInterop": true,

From 751ffcdbb20ac0f508324b4052ee6b8da8a65e25 Mon Sep 17 00:00:00 2001
From: Josh Crites <josh@getwyz.com>
Date: Tue, 29 Apr 2025 17:00:58 -0400
Subject: [PATCH 2/4] fix editor inline eslint errors

teach eslint how to parse typescript files. configuration taken directly from: https://typescript-eslint.io/getting-started/legacy-eslint-setup
---
 examples/islands/.eslintrc.js | 10 +++++++++-
 examples/islands/package.json |  5 ++++-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/examples/islands/.eslintrc.js b/examples/islands/.eslintrc.js
index eff4443..422b9ce 100644
--- a/examples/islands/.eslintrc.js
+++ b/examples/islands/.eslintrc.js
@@ -1,4 +1,6 @@
 module.exports = {
+  root: true,
+  parser: '@typescript-eslint/parser',
   parserOptions: {
     sourceType: 'module',
     ecmaFeatures: {
@@ -9,7 +11,13 @@ module.exports = {
     node: true,
     es2021: true,
   },
-  extends: ['eslint:recommended', 'prettier', 'plugin:react/recommended'],
+  plugins: ['@typescript-eslint'],
+  extends: [
+    'eslint:recommended',
+    'prettier',
+    'plugin:react/recommended',
+    'plugin:@typescript-eslint/recommended',
+  ],
   rules: {
     'react/react-in-jsx-scope': 'off',
     'react/prop-types': 'off',
diff --git a/examples/islands/package.json b/examples/islands/package.json
index 11dab8b..2c0cefb 100644
--- a/examples/islands/package.json
+++ b/examples/islands/package.json
@@ -5,16 +5,19 @@
   "devDependencies": {
     "@hubspot/cli": "latest",
     "@hubspot/prettier-plugin-hubl": "latest",
+    "@typescript-eslint/eslint-plugin": "^8.31.1",
+    "@typescript-eslint/parser": "^8.31.1",
     "eslint": "^8.24.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-react": "^7.31.10",
     "prettier": "^2.7.1",
+    "typescript": "^5.8.3",
     "yarpm": "^1.2.0"
   },
   "scripts": {
     "start": "cd islands-project/islands-app && yarpm start --",
     "postinstall": "cd islands-project/islands-app && yarpm install",
-    "lint:js": "eslint . --ext .js,.jsx",
+    "lint:js": "eslint . --ext .js,.jsx,.ts,.tsx",
     "prettier": "prettier . --check",
     "watch:hubl": "hs watch islands-theme islands-theme",
     "upload:hubl": "hs upload islands-theme islands-theme",

From 8b486da9da69001c7b7996d07f62769bbbe81dd5 Mon Sep 17 00:00:00 2001
From: Josh Crites <josh@getwyz.com>
Date: Tue, 29 Apr 2025 17:02:47 -0400
Subject: [PATCH 3/4] add global type for island imports

copied directly from global types in @hubspot/cms-components
---
 .../islands/islands-project/islands-app/Globals.d.ts  | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/examples/islands/islands-project/islands-app/Globals.d.ts b/examples/islands/islands-project/islands-app/Globals.d.ts
index 60260a3..a4adf5b 100644
--- a/examples/islands/islands-project/islands-app/Globals.d.ts
+++ b/examples/islands/islands-project/islands-app/Globals.d.ts
@@ -1 +1,12 @@
 declare module '*.module.css';
+
+// copied directly from @hubspot/cms-components
+declare module '*?island' {
+  const lazyComponent: {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    (): Promise<{ default: React.ComponentType<any> }>;
+    moduleName: string;
+    moduleId: string;
+  };
+  export default lazyComponent;
+}

From 7130513b45a4c1aa71cb99b153ad00ef9390bcac Mon Sep 17 00:00:00 2001
From: Josh Crites <josh@getwyz.com>
Date: Tue, 29 Apr 2025 17:13:09 -0400
Subject: [PATCH 4/4] ts partial that imports an island with no errors

Signed-off-by: Josh Crites <josh@getwyz.com>
---
 .../{IslandsTester.jsx => IslandsTester.tsx}  | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)
 rename examples/islands/islands-project/islands-app/components/partials/{IslandsTester.jsx => IslandsTester.tsx} (57%)

diff --git a/examples/islands/islands-project/islands-app/components/partials/IslandsTester.jsx b/examples/islands/islands-project/islands-app/components/partials/IslandsTester.tsx
similarity index 57%
rename from examples/islands/islands-project/islands-app/components/partials/IslandsTester.jsx
rename to examples/islands/islands-project/islands-app/components/partials/IslandsTester.tsx
index 9024128..94364b3 100644
--- a/examples/islands/islands-project/islands-app/components/partials/IslandsTester.jsx
+++ b/examples/islands/islands-project/islands-app/components/partials/IslandsTester.tsx
@@ -2,20 +2,18 @@ import { Island } from '@hubspot/cms-components';
 
 import ButtonCounterIsland from '../ButtonCounter?island';
 
-const IslandsTester = ({
+export default function IslandsTester({
   numIslands = 1,
   marginTop,
   marginBetween = '50vh',
   hydrateOn = 'load',
   islandIdPrefix = '',
-}) => {
-  numIslands = parseInt(numIslands, 10);
-
-  const islandElements = new Array(numIslands).fill('').map((_, i) => {
-    let style = { marginTop: marginTop ?? marginBetween };
-    if (i === 0 && marginTop == null) {
-      delete style.marginTop;
-    }
+}: Props) {
+  const islandElements = Array.from({ length: Number(numIslands) }, (_, i) => {
+    const style =
+      i === 0 && marginTop == null
+        ? null
+        : { marginTop: marginTop ?? marginBetween };
 
     const islandId = `${islandIdPrefix}island-${i}`;
 
@@ -30,7 +28,14 @@ const IslandsTester = ({
       />
     );
   });
+
   return <div style={{ fontSize: '1.5em' }}>{islandElements}</div>;
-};
+}
 
-export default IslandsTester;
+interface Props {
+  numIslands?: number | string;
+  marginTop?: string | null;
+  marginBetween?: string;
+  hydrateOn?: string;
+  islandIdPrefix?: string;
+}