zwitterion
Auto-transpiling, live-reloading, and SPA-ing server for JavaScript, TypeScript, JSX, TSX, and WebAssembly.
Last updated 2 months ago by lastmjs .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install zwitterion 
SYNC missed versions from official npm registry.

CircleCI npm version dependency Status devDependency Status

Zwitterion

NOTICE - v0.30.0 and up use an experimental import maps feature, and will not work for most browsers. Install a prior version for general browser compatibility

Zwitterion is a server for web applications that provides automatic transpilation, live-reload, and SPA (single-page application) support out of the box. It allows you to develop web platform applications using the latest versions of JavaScript, TypeScript, JSX, TSX, or WebAssembly without a complicated build step.

Just include files directly in <script> tags:

<script src="hello-world.ts"></script>

or as ES module imports:

import {hello} from './hello-world';

All features that the TypeScript compiler provides are automatically available, including ES modules, async/await, and Object spread. Zwitterion even provides support for bare specifiers:

import {createStore} from 'redux';

Zwitterion lets you get back to the good old days of web development. Just write your source code and run it in the browser.

Current Features

  • Automatic JavaScript transpilation (JS -> JS)
  • Automatic TypeScript transpilation (TS -> JS)
  • Automatic JSX transpilation (JSX -> JS)
  • Automatic TSX transpilation (TSX -> JS)
  • Automatic WASM transpilation (WASM -> JS Module)
  • Automatic WAST transpilation (WAST -> JS Module)
  • Bare specifiers (import * as stuff from 'library'; instead of import * as stuff from '../node_modules/library/index.js';)

Installation and Basic Use

Local Installation and Use

Install Zwitterion in the directory that you would like to serve files from:

npm install zwitterion

Run Zwitterion by accessing its binary directly from the terminal:

node_modules/.bin/zwitterion

or from an npm script:

{
  ...
  "scripts": {
    "start": "zwitterion"
  }
  ...
}

Global Installation and Use

Install Zwitterion globally to use across projects:

npm install -g zwitterion

Run Zwitterion from the terminal:

zwitterion

or from an npm script:

{
  ...
  "scripts": {
    "start": "zwitterion"
  }
  ...
}

Production Use

To create a static build suitable for uploading to a CDN (content delivery network), run Zwitterion with the --build-static option. The static files will be created in a directory called dist in the directory Zwitterion is started from. You may need to add the application/javascript MIME type to your hosting provider for your TypeScript files.

From the terminal:

zwitterion --build-static

From an npm script:

{
  ...
  "scripts": {
    "build-static": "zwitterion --build-static"
  }
  ...
}

Special Considerations

Root File

It's important to note that Zwitterion assumes that the root file (the file found at /) of your web application is always an index.html file. That index.html file must have a <head> element for file watching to work (this will not be required in the future).

ES Modules

Zwitterion depends on native browser support for ES modules (import/export syntax). You must add the type="module" attribute to script tags that reference modules, for example:

<script type="module" src="amazing-module.ts"></script>

Or from a non-html file (if you leave out the file extension it will be assumed to be a TypeScript file):

import {amazingFunction} from './amazing-module';

WASM and WAST Files

Include .wast or .wasm files in your source code and imports just like any other file type. The exports of your WASM module will be available as the default export of the transpiled JS module:

;; /add.wast
(module
    (func $add (param i32 i32) (result i32)
        (i32.add
            (get_local 0)
            (get_local 1)))
    (export "add" (func $add)))
import AddWASM from './add.wast';

console.log(AddWASM.add(2, 2));
// 4

Performance

It's important to note that Zwitterion does not bundle files nor engage in tree shaking. This may impact the performance of your application. HTTP2 and ES modules may help with performance, but at this point in time signs tend to point toward worse performance. Zwitterion has plans to improve performance by automatically generating HTTP2 server push information from the static build, and looking into tree shaking, but it is unclear what affect this will have. Stay tuned for more information about performance as Zwitterion matures.

With all of the above being said, the performance implications are unclear. Measure for yourself.

Read the following for more information on bundling versus not bundling with HTTP2:

The Future

Here's a rough roadmap of the big future plans:

  • [ ] Investigate performance, make sure Zwitterion can beat out the complicated bundlers (tree shaking and bundling)
  • [ ] Add support for Rust, C, C++ and any other popular language that can compile to WebAssembly

Command-line Options

Port

Specify the server's port:

-p [port]

or

--port [port]

Watch Files

Watch files in current directory and reload browser on changes:

-w

or

--watch-files

Build Static

Create a static build of the current working directory. The output will be in a directory called dist in the current working directory:

--build-static

Exclude Dirs

A space-separated list of directories to exclude from the static build:

--exclude-dirs [excludeDirs...]

Target

The ECMAScript version to compile to; if omitted, defaults to ES2015. Any targets supported by the TypeScript compiler are supported here (ES3, ES5, ES6/ES2015, ES2016, ES2017, ESNext):

--target [target]

Disable SPA

Disable the SPA redirect to index.html:

--disable-spa

Under the Hood

Zwitterion is simple. It is more or less a static file server, but it rewrites requested files in memory as necessary to return to the client. For example, if a TypeScript file is requested from the client, Zwitterion will retrieve the text of the file, compile it to JavaScript, compile it from CommonJS to ES Modules, and then return the compiled text to the client. The same thing is done for JavaScript files. In fact, nearly the same process will be used for any file extension that we want to support in the future. For example, in the future, if a C file is requested it will be read into memory, the text will be compiled to WebAssembly, and the WebAssembly will be returned to the client. All of this compilation is done server-side and hidden from the user. To the user, it's just a static file server.

Current Tags

  • 0.31.0                                ...           latest (2 months ago)

95 Versions

  • 0.31.0                                ...           2 months ago
  • 0.30.0                                ...           2 months ago
  • 0.29.0                                ...           8 months ago
  • 0.28.1                                ...           10 months ago
  • 0.28.0                                ...           10 months ago
  • 0.27.3                                ...           a year ago
  • 0.27.2                                ...           a year ago
  • 0.27.1                                ...           a year ago
  • 0.27.0                                ...           a year ago
  • 0.26.0                                ...           2 years ago
  • 0.25.1                                ...           2 years ago
  • 0.25.0                                ...           2 years ago
  • 0.24.0                                ...           2 years ago
  • 0.23.1                                ...           2 years ago
  • 0.23.0                                ...           2 years ago
  • 0.22.4                                ...           2 years ago
  • 0.22.3                                ...           2 years ago
  • 0.22.2                                ...           2 years ago
  • 0.22.1                                ...           2 years ago
  • 0.22.0                                ...           2 years ago
  • 0.21.7                                ...           2 years ago
  • 0.21.6                                ...           2 years ago
  • 0.21.5                                ...           2 years ago
  • 0.21.4                                ...           2 years ago
  • 0.21.3                                ...           2 years ago
  • 0.21.2                                ...           2 years ago
  • 0.21.1                                ...           2 years ago
  • 0.21.0                                ...           2 years ago
  • 0.20.5                                ...           2 years ago
  • 0.20.4                                ...           2 years ago
  • 0.20.3                                ...           2 years ago
  • 0.20.2                                ...           2 years ago
  • 0.20.1                                ...           2 years ago
  • 0.20.0                                ...           2 years ago
  • 0.19.3                                ...           2 years ago
  • 0.19.2                                ...           2 years ago
  • 0.19.1                                ...           2 years ago
  • 0.18.0                                ...           2 years ago
  • 0.17.4                                ...           2 years ago
  • 0.17.3                                ...           2 years ago
  • 0.17.2                                ...           2 years ago
  • 0.17.1                                ...           2 years ago
  • 0.17.0                                ...           2 years ago
  • 0.16.1                                ...           2 years ago
  • 0.16.0                                ...           2 years ago
  • 0.15.0                                ...           2 years ago
  • 0.14.6                                ...           2 years ago
  • 0.14.5                                ...           2 years ago
  • 0.14.4                                ...           2 years ago
  • 0.14.3                                ...           2 years ago
  • 0.14.2                                ...           2 years ago
  • 0.14.1                                ...           2 years ago
  • 0.14.0                                ...           2 years ago
  • 0.13.0                                ...           2 years ago
  • 0.12.15                                ...           2 years ago
  • 0.12.14                                ...           2 years ago
  • 0.12.13                                ...           2 years ago
  • 0.12.12                                ...           2 years ago
  • 0.12.11                                ...           2 years ago
  • 0.12.10                                ...           2 years ago
  • 0.12.9                                ...           2 years ago
  • 0.12.8                                ...           2 years ago
  • 0.12.7                                ...           2 years ago
  • 0.12.6                                ...           2 years ago
  • 0.12.5                                ...           2 years ago
  • 0.12.4                                ...           2 years ago
  • 0.12.3                                ...           2 years ago
  • 0.12.2                                ...           2 years ago
  • 0.12.1                                ...           2 years ago
  • 0.12.0                                ...           2 years ago
  • 0.11.2                                ...           2 years ago
  • 0.11.1                                ...           2 years ago
  • 0.11.0                                ...           2 years ago
  • 0.10.0                                ...           2 years ago
  • 0.9.1                                ...           2 years ago
  • 0.9.0                                ...           2 years ago
  • 0.8.1                                ...           2 years ago
  • 0.8.0                                ...           2 years ago
  • 0.7.0                                ...           3 years ago
  • 0.6.1                                ...           3 years ago
  • 0.6.0                                ...           3 years ago
  • 0.5.0                                ...           3 years ago
  • 0.4.0                                ...           3 years ago
  • 0.3.0                                ...           3 years ago
  • 0.2.0                                ...           3 years ago
  • 0.1.0                                ...           3 years ago
  • 0.0.8                                ...           3 years ago
  • 0.0.7                                ...           3 years ago
  • 0.0.6                                ...           3 years ago
  • 0.0.5                                ...           3 years ago
  • 0.0.4                                ...           3 years ago
  • 0.0.3                                ...           3 years ago
  • 0.0.2                                ...           3 years ago
  • 0.0.1                                ...           3 years ago
  • 0.0.0                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 99
Last Day 0
Last Week 3
Last Month 144
Dependencies (6)
Dev Dependencies (0)
None

Copyright 2014 - 2017 © taobao.org |