fix: HMR #2316

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

packages/router-plugin/src/core/code-splitter/compilers.ts

@@ -142,7 +142,7 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) {

                          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

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

-      }
-      return null
-    },
-


Look ma'! No resolveId!

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

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

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


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

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

packages/router-generator/src/generator.ts

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

packages/router-plugin/src/core/code-splitter/compilers.ts

+              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

packages/router-plugin/src/core/code-splitter/compilers.ts

@@ -142,7 +142,7 @@ export function compileCodeSplitReferenceRoute(opts: ParseAstOptions) {

                          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

packages/start/src/router-manifest/index.ts

@@ -20,7 +28,12 @@ export function getFullRouterManifest() {
  if (process.env.NODE_ENV === 'development') {
    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?

tannerlinsley commented Sep 10, 2024

View reviewed changes

packages/router-plugin/src/core/router-code-splitter-plugin.ts Show resolved Hide resolved

SeanCassiere reviewed Sep 10, 2024

View reviewed changes

packages/router-plugin/src/core/router-code-splitter-plugin.ts Show resolved Hide resolved

packages/router-plugin/src/core/router-code-splitter-plugin.ts Outdated Show resolved Hide resolved

packages/router-generator/src/generator.ts Outdated Show resolved Hide resolved

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

Open

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

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: HMR #2316

fix: HMR #2316

tannerlinsley commented Sep 10, 2024

nx-cloud bot commented Sep 10, 2024 •

edited

Loading

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

edited

Loading

tannerlinsley Sep 10, 2024

ArnaudBarre Sep 10, 2024

tannerlinsley Sep 10, 2024

tannerlinsley Sep 10, 2024

ArnaudBarre Sep 10, 2024

ArnaudBarre Sep 10, 2024

schiller-manuel Sep 12, 2024

Tsiangana commented Sep 28, 2024

KiwiKilian commented Oct 16, 2024

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

fix: HMR #2316

Are you sure you want to change the base?

fix: HMR #2316

Conversation

tannerlinsley commented Sep 10, 2024

nx-cloud bot commented Sep 10, 2024 • edited Loading

☁️ Nx Cloud Report

pkg-pr-new bot commented Sep 10, 2024 • edited Loading

tannerlinsley Sep 10, 2024

Choose a reason for hiding this comment

ArnaudBarre Sep 10, 2024

Choose a reason for hiding this comment

tannerlinsley Sep 10, 2024

Choose a reason for hiding this comment

tannerlinsley Sep 10, 2024

Choose a reason for hiding this comment

ArnaudBarre Sep 10, 2024

Choose a reason for hiding this comment

ArnaudBarre Sep 10, 2024

Choose a reason for hiding this comment

schiller-manuel Sep 12, 2024

Choose a reason for hiding this comment

Tsiangana commented Sep 28, 2024

KiwiKilian commented Oct 16, 2024

nx-cloud bot commented Sep 10, 2024 •

edited

Loading

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

edited

Loading