ts-module-browser
v1.4.0
Published
Run typescript in browser with script[type="ts-module-browser"]
Downloads
9
Readme
Run examples
You can see the source code of the examples, or see it in action.
- React from CDN (source, live, codesandbox)
- React + Styled Components from CDN (source, live, codesandbox)
- With preloader (source, live, codesandbox)
Also you can run the examples locally using the command:
$ yarn examples
Features
- Transpiling typescript code from
script[type="ts-module-browser"]
through Service Worker - Ability to resolve packages through CDN
- Loading local typescript files
Usage
The code in the browser is transpiled using a Service Worker. Due to Service Worker does not work in another origin (another domain, protocol or CDN), you need to install it locally:
/sw.js
// Load typescript (you can use any version you want)
self.importScripts("https://cdn.jsdelivr.net/npm/[email protected]/lib/typescriptServices.js");
// Load sw code from CDN
self.importScripts("https://cdn.jsdelivr.net/npm/ts-module-browser@latest/dist/sw.js");
/index.html
:
<div id="container"></div>
<!-- Configure ts-module-browser instance -->
<script type="ts-module-browser-config">
{
"serviceWorkerPath": "/sw.js",
"resolver": "skypack"
}
</script>
<!-- Load ts-module-browser -->
<script src="https://cdn.jsdelivr.net/npm/ts-module-browser@latest"></script>
<!-- Write your code -->
<script type="ts-module-browser">
import * as lodash from "lodash";
import * as React from "react";
import * as ReactDOM from "react-dom";
import { Button } from "./some-local-component";
function App() {
return <Button>Hello world</Button>
}
ReactDOM.render(<App />, document.getElementById('container'));
</script>
Local usage
Not implemented yet.
yarn install ts-module-browser -D
/index.html
:
<!-- Provide path to ts-module-browser location -->
<script src="node_modules/ts-module-browser/dist/module.js" data-tsmb-sw="node_modules/ts-module-browser/dist/sw.js" data-tsmb-resolver="local"></script>
Configuration
Service worker
serviceWorkerPath
(default: undefined
)
Path to local sw.js
(see usage)
Package resolvers
resolver
(default: local
)
All packages can be resolved using the following providers:
Work In Progress
Please don't use ts-module-browser
in production.
- [x] Compile typescript in browser
- [x] Load packages from CDN
- [x] Compile local files
- [x] Compile from
script[src]
- [x] Load packages from local files
- [ ] Load packages from
/node_modules
- [ ] Parse versions from package.json and lock
- [x] package-lock.json
- [x] yarn.lock v1
- [x] yarn.lock v2
- [ ] parse protocols
License
ts-module-browser
is MIT licensed.