@tanstack/router-plugin
Version:
Modern and scalable routing for React applications
62 lines (61 loc) • 2.61 kB
JavaScript
import { getHandleRouteUpdateCode } from "./handle-route-update.js";
import * as template from "@babel/template";
//#region src/core/hmr/webpack-adapter.ts
/**
* Emits HMR accept code for bundlers with webpack-compatible `module.hot`
* semantics (classic webpack via `import.meta.webpackHot`, and Rspack).
*
* Unlike Vite's `hot.accept((newModule) => {...})` — where the callback receives
* the freshly re-imported module — webpack re-executes the module factory on
* accept, so our HMR logic must live at module top level and read the previous
* `routeId` out of `hot.data`. `hot.dispose` stashes it for the next run, and
* `hot.accept()` (no callback) enrolls us as a self-accepting boundary.
*
* Returns an array of statements so that for React we can prepend an
* `import { performReactRefresh } from 'react-refresh/runtime'` hoisted to the
* top of the module.
*/
function createWebpackHmrStatement(stableRouteOptionKeys, opts) {
const handleRouteUpdateCode = getHandleRouteUpdateCode(stableRouteOptionKeys);
const staticRouteIdLiteral = typeof opts.routeId === "string" ? JSON.stringify(opts.routeId) : "undefined";
const statements = [];
const reactRefreshCall = opts.targetFramework === "react" ? `
const tsrRefreshState = globalThis.__TSR_HMR__ ??= {}
try {
if (!tsrRefreshState.refreshScheduled) {
tsrRefreshState.refreshScheduled = true
setTimeout(() => {
tsrRefreshState.refreshScheduled = false
try { __tsr_performReactRefresh() } catch (_e) { /* noop */ }
}, 30)
}
} catch (_err) { /* noop */ }` : "";
if (opts.targetFramework === "react") statements.push(template.statement(`import { performReactRefresh as __tsr_performReactRefresh } from 'react-refresh/runtime'`)());
statements.push(template.statement(`
if (import.meta.webpackHot) {
const hot = import.meta.webpackHot
const hotData = hot.data ??= {}
const routeId = hotData['tsr-route-id'] ?? Route.id ?? (Route.isRoot ? '__root__' : ${staticRouteIdLiteral})
if (routeId) {
hotData['tsr-route-id'] = routeId
}
const existingRoute =
typeof window !== 'undefined' && routeId
? window.__TSR_ROUTER__?.routesById?.[routeId]
: undefined
if (routeId && existingRoute && existingRoute !== Route) {
(${handleRouteUpdateCode})(routeId, Route)${reactRefreshCall}
}
hot.dispose((data) => {
if (routeId) {
data['tsr-route-id'] = routeId
}
})
hot.accept()
}
`, { syntacticPlaceholders: true })());
return statements;
}
//#endregion
export { createWebpackHmrStatement };
//# sourceMappingURL=webpack-adapter.js.map