ts-module-browser

ts-module-browser ^[beta]

Run typescript in browser with script[type="ts-module-browser"] without bundler

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/typescript@4.3.5/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:

• skypack
• jspm
• jsdelivr
• local (/node_modules) (not implemented yet)

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.