Giter VIP home page Giter VIP logo

hot-esm's Introduction

hot-esm

ESM hot-reloading for Node.js

hot ./server.js

Installation

Install hot-esm by running

yarn add hot-esm

Usage

hot-esm provides a loader that clears the module cache for files that are edited and the files that import them. This allows you to re-import your application and get updated code.

node --experimental-loader hot-esm ./server.js

# Or use this shorthand:
hot ./server.js
import * as http from 'http'

const server = http.createServer(async (request, response) => {
  const app = await import('./app.js')
  app.default(request, response)
})
server.listen(8080)

You'll have to find an appropriate place in your application to place an import() expression. This expression needs to run often enough to not miss updates.

State that is local to a file will be lost when that file is re-imported. To share state between the old and new copies of a file, put that state in global.

Also, any ongoing side-effects will need to be cleaned up when a new version of a file is imported. Otherwise, for example, multiple of the same event listener will be running. Again, this can be managed using global state.

Note that this only works with ECMAScript Modules and not with CommonJS modules.

Also, edits to files in node_modules, even if they are ECMAScript Modules are ignored by default as attaching filesystem watchers to so many directories is too expensive.

But, specific packages inside of node_modules can be watched for updates by setting the environment variable:

HOT_INCLUDE_PACKAGES=package1,package2

Development

hot-esm provides debug logging detailing which files are watched, when they get invalidated, and when they get re-imported. Those logs can be enabled by setting the environment variable:

DEBUG=hot-esm

hot-esm's People

Contributors

dependabot[bot] avatar vinsonchuong avatar hpx7 avatar vonagam avatar github-actions[bot] avatar

Stargazers

Viki avatar Lon Beshiri avatar omar avatar Manel R. Doménech avatar Pkmmte Xeleon avatar  avatar Munawwar avatar ForkΨKillet avatar Moritz Hedtke avatar  avatar  avatar

Watchers

 avatar James Cloos avatar  avatar

hot-esm's Issues

[NEW FEATURE] Possibility override default exclusion node_modules for hot ESM reloading.

As documented in https://www.npmjs.com/package/hot-esm

"Also, edits to files in node_modules, even if they are ECMAScript Modules are ignored as attaching filesystem watchers to so many directories is too expensive."

However sometimes it would be useful to override this behaviour for example if you would need to have hot esm reloading of ESM modules of a specific package in node_modules/ that was developed by ourself.

Configurable watch directory

For my use case (a monorepo), files can imported from outside the current working directory. Because of this line, hot-esm currently only watches for file changes inside the cwd, causing files outside to not be reloaded.

One way to solve this would be to use an environment variable HOT_ROOT_DIR as a way to the configure watch directory.

What do you think?

help

any more detailed explanation, how to use this for reload detection of all files except those in node_modules?

Windows support

Hi again!

Wanted to bring to your attention that I think hot-esm doesn't work on Windows. I recently disabled hot-esm in my project because it was causing issues.

I think it has something to do with paths on windows but I didn't get a chance to look into it too much -- just raising it to you in case you have some time to look into it!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.