riot/hot-reload

Riot hot reload API

Riot hot reload api

Api that will extend riot making your tags hot reloadable.

Important

If you are using Riot.js < 4.0.0 please check the v3 branch

Usage

import reload from '@riotjs/hot-reload'
import Component from './my-component'
// refresh all the DOM nodes called 'my-component' without losing their state
reload(Component)

hot-reload's Issues

[BUG] Component CSS not updated when using hot reload

1. Describe your issue:

Modified CSS doesn't get updated when component re-added, ex. via hot reload.
HTML and JS is updated properly.

2. Can you reproduce the issue? Yes, but it should be pretty obvious.

3. On which browser/OS does the issue appear? All.

4. Which version of Riot does it affect? 4.0.0-rc.6

I've created a pull request riot/riot#2677

riot.reload breaks the app

With the following complete basic riot example: a counter with an increment and a decrement buttons.

Before adding the line riot.reload('app') a change to the file + a save would hot reload by losing the state (counter gets back to 0), now when trying to add .reload the whole interface no longer reacts.

Please check the example for more explanation.

Example

app.tag

<app>
  <div>
    <button onclick="{ increment }">Increment</button>
    <span>{ count }</span>
    <button onclick="{ decrement }">Decrement</button>
  </div>
  <script>
    this.on('before-mount', () => {
      this.count = 0;
    });

    this.increment = () => {
      this.count += 1;
      console.debug('incr', this.count);
    };

    this.decrement = () => {
      this.count -= 1;
      console.debug('decr', this.count);
    };
  </script>

index.js

import riot from 'riot';
import 'riot-hot-reload';

import '../components/app.tag';

riot.mount('app');
console.warn('mounted');

if (module.hot) {
  module.hot.accept('../components/app.tag', () => {
    console.warn('hot reloaded');

    riot.mount('app'); // current thing, works but kills the context

    // riot.reload('app'); // as soon as I use this instead, the UI doesn't get updated anymore,
    // the count stays visually at its last value even though in the console.log it show the real value,
    // `reload` instead of doing what it should, it's just breaking the UI
  });
}

Versions

• "riot": "^3.8.1",
• "riot-tag-loader": "^2.0.2",
• "riot-hot-reload": "^1.0.0",
• "webpack": "^3.10.0",
• "webpack-dev-middleware": "^2.0.2",
• "webpack-hot-middleware": "^2.21.0",

Riot 3 with browser-sync?

Heyo! We love Riot at our shop, thanks so much for all of the work!

We're trying to setup browser-sync now and I am running into a problem attempting to use 0.0.2:

builder_1  | [0] [debug] +  Step Complete: Checking online status
builder_1  | [0] [debug] -> Starting Step: Resolve user plugins from options
builder_1  | [0] /app/node_modules/browser-sync/dist/plugins.js:151
builder_1  | [0]         throw e;
builder_1  | [0]         ^
builder_1  | [0]
builder_1  | [0] TypeError: Cannot set property 'reload' of undefined
builder_1  | [0]     at /app/node_modules/riot-hot-reload/index.js:52:35
builder_1  | [0]     at /app/node_modules/riot-hot-reload/index.js:2:65
builder_1  | [0]     at Object.<anonymous> (/app/node_modules/riot-hot-reload/index.js:5:2)
builder_1  | [0]     at Module._compile (internal/modules/cjs/loader.js:778:30)
builder_1  | [0]     at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
builder_1  | [0]     at Module.load (internal/modules/cjs/loader.js:653:32)
builder_1  | [0]     at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
builder_1  | [0]     at Function.Module._load (internal/modules/cjs/loader.js:585:3)
builder_1  | [0]     at Module.require (internal/modules/cjs/loader.js:692:17)
builder_1  | [0]     at require (internal/modules/cjs/helpers.js:25:18)
builder_1  | [0] npm ERR! code ELIFECYCLE
builder_1  | [0] npm ERR! errno 1

Probably a mismatch of versions or something? Should we even be trying to use 0.0.2?

..maybe time to try out Riot4! This is our setup so far, though:

  "dependencies": {
    "browser-sync": "^2.26.7",
    "concurrently": "^4.1.2",
    "riot": "^3.13.2",
    "riot-hot-reload": "0.0.2",
    "stylus": "^0.54.5"
  }

error if not all instances initially mounted

I'm using hot-reload in combination with webpack-loader

I've placed the same component multiple times on my page but I'm only mounting one of them (dependent on viewport)
When I make changes to the component's file I expect only the mounted component to be updated.

However it seems hot-reload tries to (re)mount all tags of that component on the page what causes the following error:

TypeError: Cannot read property 'unmount' of undefined

Some debugging showed me that oldTag is undefined when it's getting reloaded without being mounted before.
Therefore I'd suggest to simply check if oldTag isn't undefined before trying to unmount it
https://github.com/riot/hot-reload/blob/master/src/index.js#L19

@GianlucaGuarini what do you think?

update needed for riot 7.X

assume you checking out a project fresh, when no node_modules, no package-lock.json is available.

when package.json references riot 7.0.3 and riot@hot-reload 6.0.0
npm install
shows error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: undefined@undefined
npm ERR! Found: [email protected]
npm ERR! node_modules/riot
npm ERR!   riot@"^7.0.3" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer riot@"^6.0.0" from @riotjs/[email protected]
npm ERR! node_modules/@riotjs/hot-reload
npm ERR!   @riotjs/hot-reload@"^6.0.0" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

steps to reproduce:

1. use https://github.com/riot/webpack-template
2. verify no node_modules folder available
3. verify no package-lock.json file available
4. update reference to riot 7.0.3 in package.json
5. run npm install

workaround available:

1. temporarily reference riot 6.0.0 in package.json
2. run npm install
3. reference riot 7.0.3 in package.json
4. run npm install again; it will succeed