All Projects → SevInf → heiss

SevInf / heiss

Licence: MIT License
Hot module reloading prototype with native (almost) ES6 modules

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to heiss

minimal-hapi-react-webpack
Minimal Hapi + React + Webpack + HMR (hot module reloading) Sandbox
Stars: ✭ 55 (+150%)
Mutual labels:  hmr, hot-module-replacement
isomorphic-react-redux-saga-ssr
Isomorphic, React, Redux, Saga, Server Side rendering, Hot Module Reloading, Ducks, Code Splitting
Stars: ✭ 19 (-13.64%)
Mutual labels:  modules, hot-module-replacement
rollup-plugin-svelte-hot
Fork of official rollup-plugin-svelte with added HMR support (for both Nollup or Rollup)
Stars: ✭ 49 (+122.73%)
Mutual labels:  hmr, hot-module-replacement
svelte-template-hot
Copy of official Svelte template with added HMR support
Stars: ✭ 61 (+177.27%)
Mutual labels:  hmr, hot-module-replacement
webpack-hmr
🔨Easy implementation of webpack Hot-Module-Replacement(hmr)
Stars: ✭ 120 (+445.45%)
Mutual labels:  hmr, hot-module-replacement
svelte-loader-hot
Webpack loader for svelte components with HMR support
Stars: ✭ 22 (+0%)
Mutual labels:  hmr, hot-module-replacement
wordpress-starter
Timber (Twig) + Parceljs Bundler
Stars: ✭ 19 (-13.64%)
Mutual labels:  hot-module-replacement
nuxt-humans-txt
🧑🏻👩🏻 "We are people, not machines" - An initiative to know the creators of a website. Contains the information about humans to the web building - A Nuxt Module to statically integrate and generate a humans.txt author file - Based on the HumansTxt Project.
Stars: ✭ 27 (+22.73%)
Mutual labels:  modules
FunFacts
FunFacts is an example of Modular architecture
Stars: ✭ 42 (+90.91%)
Mutual labels:  modules
isomorphic-webapp-starter
Isomorphic webapp starter (MongoDB, Express, React, Redux, Node)
Stars: ✭ 13 (-40.91%)
Mutual labels:  hot-module-replacement
react-redux-typescript-dotnet-core-ssr-hmr
React + Redux + TypeScript + .NET Core + Server-Side Rendering (SSR) + Hot Module Replacement (HMR)
Stars: ✭ 17 (-22.73%)
Mutual labels:  hmr
generator-sf
Yeoman generator that scaffolds out a Symfony PHP app including Browsersync, various CSS preprocessors, jspm, webpack, browserify and Service Worker
Stars: ✭ 14 (-36.36%)
Mutual labels:  hmr
ModuleServices
Reusable ViewController with TableView, split in Sections (called here modules) that help you to develop faster in Swift
Stars: ✭ 21 (-4.55%)
Mutual labels:  modules
decentraland-dapps
🛠 Common modules for dApps
Stars: ✭ 96 (+336.36%)
Mutual labels:  modules
nuxt-modules
AX2's Nuxt modules
Stars: ✭ 30 (+36.36%)
Mutual labels:  modules
hot-reload
Riot hot reload API
Stars: ✭ 16 (-27.27%)
Mutual labels:  hmr
fastify-webpack-hmr
Webpack hot module reloading for Fastify
Stars: ✭ 29 (+31.82%)
Mutual labels:  hmr
lint-deps
Lint for unused or missing dependencies in your node.js projects. Customize with plugins or configuration.
Stars: ✭ 48 (+118.18%)
Mutual labels:  modules
react-ssr-starter
📚 Featuring Webpack 4, React 17-18, SSR, HMR, prefetching, universal lazy-loading, and more
Stars: ✭ 18 (-18.18%)
Mutual labels:  hmr
laravel-module-loader
THIS PACKAGE HAS BEEN DEPRECATED — A lightweight package to organize your code into contextual modules.
Stars: ✭ 76 (+245.45%)
Mutual labels:  modules

heiss

Static server, which implements hot module replacement for native ES2015 modules.

How it works.

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:

Command-line

heiss <rootDirectory>

Starts a static server, serving the files from <rootDirectory>. 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:

    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:

    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:

    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'

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].