JSX does not reload if included as import

[RitzyMage]

(this may be related to issue #135)

If JSX contains a component using the comp object (e.g.

export default ({comp}) =><div>
  {comp.componentName({
      prop: "value",
  })}
</div>

),
then the hot reloading works just fine. Specifically, Lume outputs

Changes detected:
- /_components/componentName.jsx

🔥 / /index.jsx
Changes sent to the browser

However, if included via an import (e.g.

import ComponentName from "./_components/componentName.jsx";
export default () => <div>
   <ComponentName prop="value" />
</div>

), then the reload does not work for changes in the included component (componentName in this example). In fact, the server must be completely restarted to get these changes. Specifically, Lume outputs

Changes detected:
- /_components/componentName.jsx

but does not output the hot reloading text.

[oscarotero]

This is a know limitation of Deno, see denoland/deno#8327

ATM, there isn't a good way to implement a hot module reload system for imported modules. But you can use jsx with Lume modules. In your example, you could do this:

export default ({comp}) => <div>
  <comp.componentName prop="value" />
</div>

This is the only way to use jsx modules supporting hot reloading in Lume. And it's even more convenient because you don't need to import the modules, they are automatically available.

[RitzyMage]

Just tested on v1.7.2 and the <comp.componentName /> syntax does hot reload. Thanks!