fix: HMR by tannerlinsley · Pull Request #2316 · TanStack/router

tannerlinsley · 2024-09-10T20:02:13Z

No description provided.

nx-cloud · 2024-09-10T20:02:41Z

☁️ Nx Cloud Report

CI is running/has finished running commands for commit d6ccf25. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution

✅ Successfully ran 2 targets

Sent with 💌 from NxCloud.

pkg-pr-new · 2024-09-10T20:04:23Z

Open in Stackblitz

More templates

@tanstack/create-router

pnpm add https://pkg.pr.new/@tanstack/create-router@2316

@tanstack/eslint-plugin-router

pnpm add https://pkg.pr.new/@tanstack/eslint-plugin-router@2316

@tanstack/history

pnpm add https://pkg.pr.new/@tanstack/history@2316

@tanstack/react-cross-context

pnpm add https://pkg.pr.new/@tanstack/react-cross-context@2316

@tanstack/react-router

pnpm add https://pkg.pr.new/@tanstack/react-router@2316

@tanstack/react-router-with-query

pnpm add https://pkg.pr.new/@tanstack/react-router-with-query@2316

@tanstack/router-arktype-adapter

pnpm add https://pkg.pr.new/@tanstack/router-arktype-adapter@2316

@tanstack/router-cli

pnpm add https://pkg.pr.new/@tanstack/router-cli@2316

@tanstack/router-devtools

pnpm add https://pkg.pr.new/@tanstack/router-devtools@2316

@tanstack/router-generator

pnpm add https://pkg.pr.new/@tanstack/router-generator@2316

@tanstack/router-plugin

pnpm add https://pkg.pr.new/@tanstack/router-plugin@2316

@tanstack/router-valibot-adapter

pnpm add https://pkg.pr.new/@tanstack/router-valibot-adapter@2316

@tanstack/router-zod-adapter

pnpm add https://pkg.pr.new/@tanstack/router-zod-adapter@2316

@tanstack/router-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/router-vite-plugin@2316

@tanstack/start

pnpm add https://pkg.pr.new/@tanstack/start@2316

@tanstack/start-vite-plugin

pnpm add https://pkg.pr.new/@tanstack/start-vite-plugin@2316

@tanstack/virtual-file-routes

pnpm add https://pkg.pr.new/@tanstack/virtual-file-routes@2316

commit: d6ccf25

tannerlinsley · 2024-09-10T20:06:19Z

                          programPath.pushContainer('body', [
                            template.statement(
-                              `function DummyComponent() { return null }`,
+                              `export function TSR_DummyComponent() { return null }`,


This forces Fast Refresh to process the original route file even if we end up extracting the HMR passing conditions out of it.

Marking the route as an HMR boundary without handling HMR will lead to stale updates. Instead using the patch provided by @schiller-manuel in discord is good and both mark the module as an self accepting without fast refresh code and handle the update.

tannerlinsley · 2024-09-10T20:06:46Z

-      }
-      return null
-    },
-


Look ma'! No resolveId!

tannerlinsley · 2024-09-10T20:07:12Z

-
      if (
-        fileIsInRoutesDirectory(id, userConfig.routesDirectory) ||
-        id.includes(splitPrefix)


I honestly don't know if this was still necessary or not....

ArnaudBarre · 2024-09-10T22:26:12Z

+              componentId = splitNode.id?.name || componentId
              programPath.pushContainer(


This change is great. Now the component is registered to fast refresh. Ideally people should not write anonymous component, but in that case giving it the name SplitComponent is better than having anonymous one

ArnaudBarre · 2024-09-10T22:32:18Z

                          programPath.pushContainer('body', [
                            template.statement(
-                              `function DummyComponent() { return null }`,
+                              `export function TSR_DummyComponent() { return null }`,


Marking the route as an HMR boundary without handling HMR will lead to stale updates. Instead using the patch provided by @schiller-manuel in discord is good and both mark the module as an self accepting without fast refresh code and handle the update.

Forces the root to be HMR ready Co-Authored-By: Kenta Iwasaki <63115601+lithdew@users.noreply.github.com>

schiller-manuel · 2024-09-12T23:19:26Z

    rootRoute.assets.push({
      tag: 'script',
-      children: `window.__vite_plugin_react_preamble_installed__ = true`,
+      attrs: { type: 'module' },


@ArnaudBarre what's your take on this?

Tsiangana · 2024-09-28T14:56:50Z

Very good work!

KiwiKilian · 2024-10-16T06:42:15Z

We've been working quite successful on this branch, what's missing to merge?

SoloReverse · 2024-12-18T00:20:20Z

Any timeline on when this might be merged?

baptisteArno · 2024-12-18T16:18:19Z

Is it possible to have a status update on this? Having to refresh the page for every change is a terrible DX 😢

SeanCassiere · 2025-01-29T23:34:21Z

With exception to the work for mocking React Refresh in Start (as listed here), everything else in this PR has been pushed through in the merge of #3275 available in the https://github.com/TanStack/router/releases/tag/v1.98.2.

SeanCassiere · 2025-02-03T04:35:37Z

With exception to the work for mocking React Refresh in Start (as listed here), everything else in this PR has been pushed through in the merge of #3275 available in the v1.98.2 (release).

The remaining changes from this PR (changing the code snippet injected for Start's HMR) have been merged into main in #3313. As such, all the relevant changes from this PR have been merged in and as such I'll be closing this PR.

Thank you to everyone who's patiently waited till we worked on other fixes and changes for Start before focussing on merging this one in.

Edit: The changes to patch Start's HMR should be available from the https://github.com/TanStack/router/releases/tag/v1.99.3.

tannerlinsley commented Sep 10, 2024

View reviewed changes

Comment thread packages/router-plugin/src/core/router-code-splitter-plugin.ts

SeanCassiere reviewed Sep 10, 2024

View reviewed changes

Comment thread packages/router-plugin/src/core/router-code-splitter-plugin.ts

Comment thread packages/router-plugin/src/core/router-code-splitter-plugin.ts Outdated

Comment thread packages/router-generator/src/generator.ts Outdated

ArnaudBarre reviewed Sep 10, 2024

View reviewed changes

schiller-manuel force-pushed the fix-start-hmr branch from fd5f6d1 to a5c79f6 Compare September 12, 2024 22:42

tannerlinsley and others added 10 commits September 13, 2024 01:16

checkpoint

240a642

fix: simplify and fix HMR for router generator

2ff6771

fix: revert example changes

7e4de9f

fix(start): force root to be HMR ready from #2286

227e48c

Forces the root to be HMR ready Co-Authored-By: Kenta Iwasaki <63115601+lithdew@users.noreply.github.com>

chore: oops, undo these changes to the example

35fe647

fix bugs

17ca4a2

removed unused imports

61f2dc1

update snapshots

8d2740d

revert index

89ff13d

adapt bundlers

8e7ae0c

schiller-manuel force-pushed the fix-start-hmr branch from a5c79f6 to 8e7ae0c Compare September 12, 2024 23:17

schiller-manuel reviewed Sep 12, 2024

View reviewed changes

removed unused variables

01a6c43

KiwiKilian mentioned this pull request Sep 17, 2024

[TanStack Start] HMR is not working from root route (__root) #1992

Closed

SeanCassiere mentioned this pull request Sep 18, 2024

Replacing <StartClient /> with <RouterProvider /> fixes HMR #2292

Closed

SeanCassiere added 6 commits September 20, 2024 08:37

Merge branch 'main' into fix-start-hmr

9bca813

fix: whatever was broken from the branch update

5c19490

fix: add the dummy component export back in

f85171d

fix: dummy component should return null

ebe9476

Merge branch 'main' into fix-start-hmr

684eef6

Merge branch 'main' into fix-start-hmr

d6ccf25

SeanCassiere mentioned this pull request Oct 31, 2024

autoCodeSplitting causes entire app re-render #2676

Closed

SeanCassiere mentioned this pull request Feb 3, 2025

fix(start-router-manifest): change code snippet to ALWAYS have HMR ready in development #3313

Merged

SeanCassiere closed this Feb 3, 2025

SeanCassiere deleted the fix-start-hmr branch February 3, 2025 04:35

		componentId = splitNode.id?.name \|\| componentId
		programPath.pushContainer(

Uh oh!

Uh oh!

Conversation

tannerlinsley commented Sep 10, 2024

Uh oh!

nx-cloud Bot commented Sep 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

☁️ Nx Cloud Report

Uh oh!

pkg-pr-new Bot commented Sep 10, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

tannerlinsley Sep 10, 2024

Choose a reason for hiding this comment

Uh oh!

ArnaudBarre Sep 10, 2024

Choose a reason for hiding this comment

Uh oh!

tannerlinsley Sep 10, 2024

Choose a reason for hiding this comment

Uh oh!

tannerlinsley Sep 10, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

ArnaudBarre Sep 10, 2024

Choose a reason for hiding this comment

Uh oh!

ArnaudBarre Sep 10, 2024

Choose a reason for hiding this comment

Uh oh!

schiller-manuel Sep 12, 2024

Choose a reason for hiding this comment

Uh oh!

Tsiangana commented Sep 28, 2024

Uh oh!

KiwiKilian commented Oct 16, 2024

Uh oh!

SoloReverse commented Dec 18, 2024

Uh oh!

baptisteArno commented Dec 18, 2024

Uh oh!

SeanCassiere commented Jan 29, 2025

Uh oh!

SeanCassiere commented Feb 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

8 participants

nx-cloud Bot commented Sep 10, 2024 •

edited

Loading

pkg-pr-new Bot commented Sep 10, 2024 •

edited

Loading

SeanCassiere commented Feb 3, 2025 •

edited

Loading