WebMake is an opinionated TypeScript (w/ JSX) -> HTML compiler. It works by allowing you to embed an HTML document in your TypeScript modules. This signals to the compiler to invert your code by placing the encompassing TypeScript source code in a <script type="module"> tag within the embedded document.
There are a few key proposals that I've got my eyes on:
As web developers, we've decided to go the JS-first route, which opened a ton of doors for us, but my interpretation of where I think the platform is headed is more of an HTML-first approach. However, if we attempt to only write raw HTML modules, we lose the ability to write type-safe code with TypeScript. With this tool you'll be able to write type-safe code that will compile into fully web-compatible modules (and bundles).
While some of these proposals are a good ways off from being implemented, I intend to keep this tool up to date with the current direction of the specifications. The usefulness of this tool banks almost entirely on HTML modules, though, so that must be implemented before this tool can be taken seriously.
The only opinion webmake has is that your .tsx modules may contain an embedded HTML document, thanks to JSX. This HTML document will be extracted and used to house a <script> tag which will in turn house the rest of the module's source code.
Input: TypeScript Module
import { AnotherOne } from './another_one'
declare const name: string
<html lang="en">
<template id="index-page">
<section>
<header>
<h1>
Hello { name }
</h1>
</header>
<article>
<p>
Lorem ipsum dolor sit amet...
</p>
</article>
</section>
</template>
</html>
export class IndexPage extends HTMLElement {
#template = import.meta.document.getElementById('index-page') as HTMLTemplateElement
public constructor() {
super()
}
}
customElements.define('index-page', IndexPage)Output: HTML Module
<!doctype html>
<html lang="en">
<template id="index-page">
<section>
<header>
<h1>Hello {{name}}</h1>
</header>
<article>
<p>Lorem ipsum dolor sit amet...</p>
</article>
</section>
</template>
<script type="module">
import { AnotherOne } from "./another_one";
export class IndexPage extends HTMLElement {
#template = import.meta.document.getElementById("index-page");
constructor() {
super();
}
}
customElements.define("index-page", IndexPage);
</script>
</html>