https://github.com/sevinf/heiss
Hot module reloading prototype with native (almost) ES6 modules
https://github.com/sevinf/heiss
es2015 es6 hmr hot-module-replacement modules
Last synced: 3 days ago
JSON representation
Hot module reloading prototype with native (almost) ES6 modules
- Host: GitHub
- URL: https://github.com/sevinf/heiss
- Owner: SevInf
- License: mit
- Created: 2018-08-18T16:57:14.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-05-27T19:05:00.000Z (almost 3 years ago)
- Last Synced: 2025-04-24T02:48:15.933Z (3 days ago)
- Topics: es2015, es6, hmr, hot-module-replacement, modules
- Language: TypeScript
- Size: 702 KB
- Stars: 28
- Watchers: 2
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# heiss
Static server, which implements hot module replacement for native ES2015
modules.
[How it works](https://medium.com/@SevInf/hot-reloading-native-es2015-modules-dc54cd8cca01).
**Warning**: This is an early prototype. It serves more as a playground for
various ideas then as a finished stable tool.
## Limitations
Due to the nature of implementation, it is not possible to hot reload modules in
the following cases:
- export names or their count have changed.
- module, that exports mutable variable bindings (`let` or `const`).
## Requirements
Server part requires node.js 8 or greater.
For the client to work properly, you'll need the browser which natively
supports:
- [ES2015 modules](https://caniuse.com/#feat=es6-module)
- [Dynamic import](https://caniuse.com/#feat=es6-module-dynamic-import)
- `import.meta`
## Command-line
```
heiss
```
Starts a static server, serving the files from ``. Hot reloading
will be available for every `.js` or `.mjs` file (see limitations sections
above).
You can change hostname or port of the server with `--host` and `--port`
arguments respectively.
## HMR API
API is served as `/@hmr/api` module. The main function you'll need is `hot`. It
accepts current module url as a parameter and returns object with the following
methods:
- `accept(dependencies: string[], updateCallback)` — called when any of the
specified dependencies change. `dependencies` can be either absolute or
relative URLs. Inside the `updateCallback` all imports will be already updated
to their new values, there is no need to re-import anything:
```js
import { init } from './init.mjs';
import { hot } from '/@hmr/api';
init();
hot(import.meta.url).accept(['./init.mjs'], () => {
init();
});
```
- `selfAccept()` — marks current-module as self-accepting. In this case, current
module will be automatically re-evaluted when it or any of its dependecies
change:
```js
import { init } from './init.mjs';
import { hot } from '/@hmr/api';
init();
hot(import.meta.url).selfAccept();
```
- `dispose(callback)` — called when current module is about to unload. Can be
used for cleaning up any side-effects:
```js
import { addWidgetToDocument, removeWidgetFromDocument } from './widget.mjs';
import { hot } from '/@hmr/api';
addWidgetToDocument();
hot(import.meta.url).dispose(() => removeWidgetFromDocument());
```
## Example in the repo
```
npm install
npm start
```
After that, open http://localhost:8080 in any supported browser support and edit
'example/text.mjs'