typescript sandbox example

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\"",

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);
 

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);

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>