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

[iacore]

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:

I totally missed this... now my site is mostly stable I don't have a easy way to test this. Hopefully someone else will find this useful.

[soundstep]

This does not work for tsx files. It worked with Lume 1, and upgrading to Lume 2 seems to have broken this.

The terminal output this:

Changes detected:
- /scripts/feature-flags.page.tsx
Changes sent to the browser

But the brother never reloads that page.

Even though I can see:

Command run:

deno task lume -sw

[scarf005]

lume/middlewares/reload_client.js

Lines 112 to 115 in 972d55c

	case "js":
	// Reload the entire page for JavaScript changes
	location.reload();
	return;

looks like it's because live reload client doesn't handle extension other than js.