type-script web component

This is a Web Component that lets you run typescript on the browser. Just like any other script tag, you link your typescript file and it will run in the browser. The component uses the official typescript transpiler - It does all the transpilation behind the scenes and also minifies the javascript - if you set the minification option to true. To see this in action open up devtools and check the typescript tags to see the injected Javascript.

<type-script src="app.ts" minify="true"></type-script>

Add the following script tag in the head of your .html page. The type should be module

<script type="module" src="https://unpkg.com/[email protected]/dist/type-script-component/type-script-component.esm.js"></script>

Then in your html

<type-script src="app.ts" minify="true"></type-script>

Using this component

• You can only use one script tag per html page. If you have multiple typescript files, separate them with a comma as shown below.

<type-script src="app1.ts, app2.ts, app3.ts"></type-script>

• Order Matters! The code will excute frome left to right. So if app2.ts depends on app1.ts you need to put app1.ts first.

Minification

• The code is not minified by default and the target is es6. If you choose to minify by setting minify to true, the code will first be tranpiled to es5 then get minified (the minification tool only understands es5. For now.)
• You can open devtools and open type-script tag to see the injected javascript.
• If you get an error. Try to run without setting minify to true. I'm still looking for a good es6+ compliant tool that runs in the browser.
• The minification tool is large, therfore it is loaded dynamically when you set minify to true. I am still in the process of testing to see the tool actually improves performance.

The Transpiler

• The component uses the official typescript transpiler. Since the transpiler is large, we only download it once from a cdn. We then store it as an array-buffer in indexed-db. That means you dont need an internet connection to run typescript after the first download.

Limitations

• The type-script tag cannot be a module.
• If you include a normal script tag it will be executed before the type-script tag as the typescript tag is asynchrounous relative to the page. The ts code that runs left to right is synchronous though relative to each other.

The Script tag

• Put a script tag similar to this <script type='module' src='https://unpkg.com/[email protected]/dist/type-script-component/type-script-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install type-script-webcomponent --save
• Put a script tag similar to this <script type='module' src='node_modules/type-script-webcomponent/dist/type-script-component/type-script-component.esm.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc

Demo

• Look at the DEMO for more information.