From c7eb8f7802e564b33857fc588dd955e4c20ab53f Mon Sep 17 00:00:00 2001
From: Owen Buckley <owenbuckley13@gmail.com>
Date: Mon, 17 Jun 2024 21:19:31 -0400
Subject: [PATCH] typescript sandbox example

---
 package.json                   |  2 +-
 sandbox.js                     |  7 ++++---
 sandbox/components/greeting.ts | 17 +++++++++++++++++
 sandbox/index.html             | 12 ++++++++++++
 4 files changed, 34 insertions(+), 4 deletions(-)
 create mode 100644 sandbox/components/greeting.ts

diff --git a/package.json b/package.json
index 101ff43..20c8c12 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "docs:dev": "concurrently \"nodemon --watch src --watch docs -e js,md,css,html,jsx ./build.js\" \"http-server ./dist --open\"",
     "docs:build": "node ./build.js",
     "docs:serve": "npm run clean && npm run docs:build && http-server ./dist --open",
-    "sandbox": "npm run clean && concurrently \"nodemon --loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
+    "sandbox": "npm run clean && concurrently \"nodemon --loader ./test-exp-loader.js --watch src --watch sandbox -e js,md,css,html,jsx,ts ./sandbox.js\" \"http-server ./dist --open\" \"livereload ./dist\"",
     "start": "npm run docs:serve",
     "test": "mocha --exclude \"./test/cases/jsx*/**\" --exclude \"./test/cases/ts*/**\" --exclude \"./test/cases/custom-extension/**\" \"./test/**/**/*.spec.js\"",
     "test:exp": "c8 node --loader ./test-exp-loader.js ./node_modules/mocha/bin/mocha \"./test/**/**/*.spec.js\"",
diff --git a/sandbox.js b/sandbox.js
index e074238..d9baa9f 100644
--- a/sandbox.js
+++ b/sandbox.js
@@ -5,7 +5,8 @@ const clientSideComponents = [
   'card.js',
   'card.jsx',
   'counter.jsx',
-  'counter-dsd.jsx'
+  'counter-dsd.jsx',
+  'greeting.ts'
 ];
 
 async function init() {
@@ -20,7 +21,7 @@ async function init() {
     const ext = component.split('.').pop();
     const outputName = ext === 'js'
       ? component
-      : component.replace('.jsx', '-jsx.js');
+      : component.replace('.jsx', '-jsx.js').replace('.ts', '-ts.js');
 
     return `<script type="module" src="./components/${outputName}"></script>`;
   }).join('\n');
@@ -29,7 +30,7 @@ async function init() {
     const ext = component.split('.').pop();
     const outputName = ext === 'js'
       ? component
-      : component.replace('.jsx', '-jsx.js');
+      : component.replace('.jsx', '-jsx.js').replace('.ts', '-ts.js');
     const source = new URL(`./components/${component}`, sandboxRoot);
     const destination = new URL(`./components/${outputName}`, distRoot);
 
diff --git a/sandbox/components/greeting.ts b/sandbox/components/greeting.ts
new file mode 100644
index 0000000..b1de27f
--- /dev/null
+++ b/sandbox/components/greeting.ts
@@ -0,0 +1,17 @@
+interface User {
+  name: string;
+}
+
+export default class Greeting extends HTMLElement {
+  connectedCallback() {
+    const user: User = {
+      name: this.getAttribute('name') || 'World'
+    };
+
+    this.innerHTML = `
+      <h3 style="text-align: center">Hello ${user.name}! 👋</h3>
+    `;
+  }
+}
+
+customElements.define('sb-greeting-ts', Greeting);
\ No newline at end of file
diff --git a/sandbox/index.html b/sandbox/index.html
index 8ca8030..a321b1c 100644
--- a/sandbox/index.html
+++ b/sandbox/index.html
@@ -138,5 +138,17 @@ <h2>JSX + DSD + inferredObservability (has JS)</h2>
       &gt;&lt;/sb-counter-dsd-jsx&gt;
     </pre>
 
+    <h2>TypeScript</h2>
+
+    <sb-greeting-ts
+      name="TypeScript"
+    ></sb-greeting-ts>
+
+    <pre>
+      &lt;sb-greeting-ts
+        name="TypeScript"
+      &gt;&lt;/sb-greeting-ts&gt;
+    </pre>
+
   </body>
 </html>
\ No newline at end of file