Ts-module-browser NPM

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.

Compile typescript in browser
Load packages from CDN
Compile local files
Compile from script[src]
Load packages from local files
Load packages from /node_modules
Parse versions from package.json and lock
- package-lock.json
- yarn.lock v1
- yarn.lock v2
- parse protocols