page does not refresh when _components/XXX.tsx is modified

[iacore]

Version

v2.0.1

Platform

Linux

What steps will reproduce the bug?

• Enable TSX
• have a .tsx page reference a component in _components/
• load the .tsx page in browser
• edit the component

How often does it reproduce? Is there a required condition?

100%

What is the expected behavior?

the page should refresh to new content

What do you see instead?

The page is stuck. Manual refresh doesn't work. I have to restart lume to see the new page.

Additional information

No response

[oscarotero]

Hi.
Can I see the code of how you're using the component?

In Lume, components are loaded automatically in the comp variable. Example:

export default function ({ comp}: Lume.Data ) {
  return <p><comp.Button /></p>
}

[scarf005]

this can be workaround using watch or hmr.

1. run echo 'import "lume/cli.ts"' > _main.ts on terminal.
2. change tasks in deno.json to following:

 	"tasks": {
-		"lume": "echo \"import 'lume/cli.ts'\" | deno run -A -",
-		"build": "deno task lume",
-		"serve": "deno task lume -s"
+		"build": "deno run -A _main.ts",
+		"serve": "deno run -A --unstable-hmr _main.ts -s"
 	},

it should work like following:

$ deno task serve
Task serve deno run -A --unstable-hmr _main.ts -s
HMR Process started.
Loading config file file:///home/scarf/repo/etc/esbuild-issue/_config.ts
🔥 /main.js <- /main.tsx
🍾 Site built into ./_site
  1 files generated in 0.01 seconds
  Server started at:
  http://localhost:3000/ (local)
  http://192.168.1.90:3000/ (network)
Changes detected:
- /_config.ts
HMR Replaced changed module file:///home/scarf/repo/etc/esbuild-issue/_config.ts

[iacore]

In Lume, components are loaded automatically in the comp variable. Example:

I use import Component from '../Component.tsx'.

I use a lot of functions between files too.

import { generate } from "./all.atom.xml.tsx"

[oscarotero]

The problem is Deno caches the imported modules and there's no way to invalidate the cache to refresh the modules.

In Lume, this limitation is solved loading the file with a hash (for example, import foo from "./foo.ts#hash123"). Components are loaded in this way so if a file changes, Lume reload the file with a different hash.

Deno added recently a way to do hot module replacement (https://deno.com/blog/v1.38#hot-module-replacement) but it's still unstable and doesn't work well with Lume.

[iacore]

Related: denoland/deno#8327