https://github.com/iam-medvedev/ts-module-browser

Run typescript in browser with script[type="ts-module-browser"]
https://github.com/iam-medvedev/ts-module-browser

browser es6 javascript module typescript

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/iam-medvedev/ts-module-browser
• Owner: iam-medvedev
• Created: 2021-08-18T09:38:57.000Z (over 3 years ago)
• Default Branch: master
• Last Pushed: 2021-09-03T05:58:58.000Z (over 3 years ago)
• Last Synced: 2024-10-15T04:12:09.644Z (3 months ago)
• Topics: browser, es6, javascript, module, typescript
• Language: TypeScript
• Homepage: https://ts-module-browser.js.org
• Size: 434 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        


  ts-module-browser [beta]





  

  

  

  

  

  





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



## Run examples

You can see the [source](http://github.com/iam-medvedev/ts-module-browser/tree/master/examples) code of the examples, or [see it in action](https://ts-module-browser.js.org/examples).

- React from CDN ([source](http://github.com/iam-medvedev/ts-module-browser/tree/master/examples/react-cdn), [live](https://ts-module-browser.js.org/examples/react-cdn), [codesandbox](https://githubbox.com/iam-medvedev/ts-module-browser/tree/master/examples/react-cdn))

- React + Styled Components from CDN ([source](http://github.com/iam-medvedev/ts-module-browser/tree/master/examples/react-styled-cdn), [live](https://ts-module-browser.js.org/examples/react-styled-cdn), [codesandbox](https://githubbox.com/iam-medvedev/ts-module-browser/tree/master/examples/react-styled-cdn))

- With preloader ([source](http://github.com/iam-medvedev/ts-module-browser/tree/master/examples/with-preloader), [live](https://ts-module-browser.js.org/examples/with-preloader), [codesandbox](https://githubbox.com/iam-medvedev/ts-module-browser/tree/master/examples/with-preloader))

Also you can run the examples locally using the command:

```bash

$ yarn examples

```

## Features

- Transpiling typescript code from `script[type="ts-module-browser"]` through Service Worker

- Ability to resolve packages through [CDN](#available-package-resolvers)

- 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`

```javascript

// 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`:

```html



  {

    "serviceWorkerPath": "/sw.js",

    "resolver": "skypack"

  }

  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'));

```

### Local usage

*Not implemented yet.*

```bash

yarn install ts-module-browser -D

```

`/index.html`:

```html

```

## Configuration

### Service worker

**`serviceWorkerPath`** (default: `undefined`)

Path to local `sw.js` (see [usage](#usage))

### Package resolvers

**`resolver`** (default: `local`)

All packages can be resolved using the following providers:

- [skypack](https://skypack.dev/)

- [jspm](https://jspm.dev)

- [jsdelivr](https://jsdelivr.com)

- 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](./LICENSE).