From f1c4f1b694322881266c35162ac6c08cb1c229a9 Mon Sep 17 00:00:00 2001 From: Owen Buckley Date: Sat, 22 Jun 2024 12:15:21 -0400 Subject: [PATCH] feature/issue 161 typescript (#162) * typescript parsing support * typescript parsing support * tweak test case * typescript sandbox example * custom ts loader * TypeScript documentation * fix test label * revert formatting --- docs/pages/docs.md | 36 +- docs/pages/index.md | 2 + package-lock.json | 694 ++++++++++++++++++++++++++++++--- package.json | 7 +- sandbox.js | 7 +- sandbox/components/greeting.ts | 17 + sandbox/index.html | 12 + src/jsx-loader.js | 7 +- src/ts-loader.js | 32 ++ src/wcc.js | 16 +- test-exp-loader.js | 13 +- test/cases/ts/src/app.ts | 11 + test/cases/ts/src/greeting.ts | 17 + test/cases/ts/ts.spec.js | 44 +++ 14 files changed, 845 insertions(+), 70 deletions(-) create mode 100644 sandbox/components/greeting.ts create mode 100644 src/ts-loader.js create mode 100644 test/cases/ts/src/app.ts create mode 100644 test/cases/ts/src/greeting.ts create mode 100644 test/cases/ts/ts.spec.js diff --git a/docs/pages/docs.md b/docs/pages/docs.md index b23aa2e..e56915c 100644 --- a/docs/pages/docs.md +++ b/docs/pages/docs.md @@ -228,6 +228,40 @@ export async function getData() { - Avoid [touching the DOM in `constructor` methods](https://twitter.com/techytacos/status/1514029967981494280) +## TypeScript + +TypeScript is supported through "type stripping", which is effectively just removing all the TypeScript and leaving only valid JavaScript, before handing off to WCC to do its compiling. + +```ts +interface User { + name: string; +} + +export default class Greeting extends HTMLElement { + connectedCallback() { + const user: User = { + name: this.getAttribute('name') || 'World' + }; + + this.innerHTML = ` +

Hello ${user.name}! 👋

+ `; + } +} + +customElements.define('wcc-greeting', Greeting); +``` + +### Prerequisites + +There are of couple things you will need to do to use WCC with TypeScript parsing: +1. NodeJS version needs to be >= `18.20.0` +1. You will need to use the _.ts_ extension +1. Requires the `--loader` flag when invoking NodeJS + ```shell + $ node --loader ./node_modules/wc-compiler/src/ts-loader.js main.ts + ``` + ## JSX > ⚠️ _Very Experimental!_ @@ -284,7 +318,7 @@ There are of couple things you will need to do to use WCC with JSX: 1. You will need to use the _.jsx_ extension 1. Requires the `--loader` flag when invoking NodeJS ```shell - $ node --loader ./node_modules/wc-compiler/src/jsx-loader.js server.js + $ node --loader ./node_modules/wc-compiler/src/jsx-loader.js main.js ``` > _See our [example's page](/examples#jsx) for some usages of WCC + JSX._ 👀 diff --git a/docs/pages/index.md b/docs/pages/index.md index fffc4cf..bd39427 100644 --- a/docs/pages/index.md +++ b/docs/pages/index.md @@ -21,6 +21,8 @@ $ npm install wc-compiler --save-dev 1. `