Skip to content

Commit

Permalink
feature/issue 161 typescript (#162)
Browse files Browse the repository at this point in the history
* typescript parsing support

* typescript parsing support

* tweak test case

* typescript sandbox example

* custom ts loader

* TypeScript documentation

* fix test label

* revert formatting
  • Loading branch information
thescientist13 authored Jun 22, 2024
1 parent c28238a commit f1c4f1b
Show file tree
Hide file tree
Showing 14 changed files with 845 additions and 70 deletions.
36 changes: 35 additions & 1 deletion docs/pages/docs.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 = `
<h3>Hello ${user.name}! 👋</h3>
`;
}
}
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!_
Expand Down Expand Up @@ -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._ 👀
Expand Down
2 changes: 2 additions & 0 deletions docs/pages/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,8 @@ $ npm install wc-compiler --save-dev
1. `<template>` / `DocumentFragment`
1. `addEventListener` (as a no-op)
1. Supports `CSSStyleSheet` (all methods act as no-ops)
1. TypeScript
1. Custom JSX parsing
1. Recursive rendering of nested custom elements
1. Metadata and runtime hints to support various progressive hydration and lazy loading strategies

Expand Down
Loading

0 comments on commit f1c4f1b

Please sign in to comment.