Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP: vite-plugin-react-swc integration #9092

Draft
wants to merge 3 commits into
base: dev
Choose a base branch
from
Draft

WIP: vite-plugin-react-swc integration #9092

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
d618bd5
wip
pcattori Mar 20, 2024
268e2d9
wip
pcattori Mar 26, 2024
cef3e66
Merge branch 'dev' into pedro/vite-plugin-react
markdalgleish May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions packages/remix-dev/package.json
View file
Open in desktop
Expand Up @@ -103,13 +103,15 @@
"strip-ansi": "^6.0.1",
"tiny-invariant": "^1.2.0",
"vite": "5.1.3",
"@vitejs/plugin-react-swc": "^3.6.0",
"wrangler": "^3.28.2"
},
"peerDependencies": {
"@remix-run/react": "^2.9.1",
"@remix-run/serve": "^2.9.1",
"typescript": "^5.1.0",
"vite": "^5.1.0",
"@vitejs/plugin-react-swc": "^3.6.0",
"wrangler": "^3.28.2"
},
"peerDependenciesMeta": {
Expand All @@ -122,6 +124,9 @@
"vite": {
"optional": true
},
"@vitejs/plugin-react-swc": {
"optional": true
},
"wrangler": {
"optional": true
}
Expand Down
155 changes: 15 additions & 140 deletions packages/remix-dev/vite/plugin.ts
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@ import { type BinaryLike, createHash } from "node:crypto";
import * as path from "node:path";
import * as url from "node:url";
import * as fse from "fs-extra";
import babel from "@babel/core";
import reactPlugin from "@vitejs/plugin-react-swc";
import {
type ServerBuild,
unstable_setDevServerHooks as setDevServerHooks,
Expand Down Expand Up @@ -289,7 +289,6 @@ let serverBuildId = VirtualModule.id("server-build");
let serverManifestId = VirtualModule.id("server-manifest");
let browserManifestId = VirtualModule.id("browser-manifest");
let hmrRuntimeId = VirtualModule.id("hmr-runtime");
let injectHmrRuntimeId = VirtualModule.id("inject-hmr-runtime");

const resolveRelativeRouteFilePath = (
route: ConfigRoute,
Expand Down Expand Up @@ -599,7 +598,9 @@ let deepFreeze = (o: any) => {
return o;
};

export type RemixVitePlugin = (config?: VitePluginConfig) => Vite.Plugin[];
export type RemixVitePlugin = (
config?: VitePluginConfig
) => Vite.PluginOption[];
export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => {
// Prevent mutations to the user config
remixUserConfig = deepFreeze(remixUserConfig);
Expand Down Expand Up @@ -984,7 +985,7 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => {
hmr: {
runtime: path.posix.join(
ctx.remixConfig.publicPath,
VirtualModule.url(injectHmrRuntimeId)
VirtualModule.url(hmrRuntimeId)
),
},
entry: {
Expand Down Expand Up @@ -1585,6 +1586,7 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => {
}
},
},
...reactPlugin(),
{
name: "remix-route-exports",
async transform(code, id, options) {
Expand Down Expand Up @@ -1630,93 +1632,28 @@ export const remixVitePlugin: RemixVitePlugin = (remixUserConfig = {}) => {
});
},
},
// TODO: combine HMR plugins
{
name: "remix-inject-hmr-runtime",
name: "remix-hmr",
enforce: "pre",
resolveId(id) {
if (id === injectHmrRuntimeId)
return VirtualModule.resolve(injectHmrRuntimeId);
if (id === hmrRuntimeId) return VirtualModule.resolve(hmrRuntimeId);
},
async load(id) {
if (id !== VirtualModule.resolve(injectHmrRuntimeId)) return;
if (id !== VirtualModule.resolve(hmrRuntimeId)) return;

return [
`import RefreshRuntime from "${hmrRuntimeId}"`,
// preamble
`import * as RefreshRuntime from "/@react-refresh"`,
"RefreshRuntime.injectIntoGlobalHook(window)",
"window.$RefreshReg$ = () => {}",
"window.$RefreshSig$ = () => (type) => type",
"window.__vite_plugin_react_preamble_installed__ = true",
// framework integration
`window.__registerBeforePerformReactRefresh(() => console.log('[remix] before react refresh'))`,
`window.__getReactRefreshIgnoredExports = ({id}) => {console.log('[remix] ignored exports: ', id); return ['meta', 'links', 'handle', 'clientLoader'];}`,
].join("\n");
},
},
{
name: "remix-hmr-runtime",
enforce: "pre",
resolveId(id) {
if (id === hmrRuntimeId) return VirtualModule.resolve(hmrRuntimeId);
},
async load(id) {
if (id !== VirtualModule.resolve(hmrRuntimeId)) return;

let reactRefreshDir = path.dirname(
require.resolve("react-refresh/package.json")
);
let reactRefreshRuntimePath = path.join(
reactRefreshDir,
"cjs/react-refresh-runtime.development.js"
);

return [
"const exports = {}",
await fse.readFile(reactRefreshRuntimePath, "utf8"),
await fse.readFile(
require.resolve("./static/refresh-utils.cjs"),
"utf8"
),
"export default exports",
].join("\n");
},
},
{
name: "remix-react-refresh-babel",
async transform(code, id, options) {
if (viteCommand !== "serve") return;
if (id.includes("/node_modules/")) return;

let [filepath] = id.split("?");
let extensionsRE = /\.(jsx?|tsx?|mdx?)$/;
if (!extensionsRE.test(filepath)) return;

let devRuntime = "react/jsx-dev-runtime";
let ssr = options?.ssr === true;
let isJSX = filepath.endsWith("x");
let useFastRefresh = !ssr && (isJSX || code.includes(devRuntime));
if (!useFastRefresh) return;

let result = await babel.transformAsync(code, {
configFile: false,
babelrc: false,
filename: id,
sourceFileName: filepath,
parserOpts: {
sourceType: "module",
allowAwaitOutsideFunction: true,
},
plugins: [[require("react-refresh/babel"), { skipEnvCheck: true }]],
sourceMaps: true,
});
if (result === null) return;

code = result.code!;
let refreshContentRE = /\$Refresh(?:Reg|Sig)\$\(/;
if (refreshContentRE.test(code)) {
code = addRefreshWrapper(ctx.remixConfig, code, id);
}
return { code, map: result.map };
},
},
{
name: "remix-hmr-updates",
async handleHotUpdate({ server, file, modules, read }) {
let route = getRoute(ctx.remixConfig, file);

Expand Down Expand Up @@ -1777,68 +1714,6 @@ function isEqualJson(v1: unknown, v2: unknown) {
return JSON.stringify(v1) === JSON.stringify(v2);
}

function addRefreshWrapper(
remixConfig: ResolvedVitePluginConfig,
code: string,
id: string
): string {
let route = getRoute(remixConfig, id);
let acceptExports = route
? [
"clientAction",
"clientLoader",
"handle",
"meta",
"links",
"shouldRevalidate",
]
: [];
return (
REACT_REFRESH_HEADER.replaceAll("__SOURCE__", JSON.stringify(id)) +
code +
REACT_REFRESH_FOOTER.replaceAll("__SOURCE__", JSON.stringify(id))
.replaceAll("__ACCEPT_EXPORTS__", JSON.stringify(acceptExports))
.replaceAll("__ROUTE_ID__", JSON.stringify(route?.id))
);
}

const REACT_REFRESH_HEADER = `
import RefreshRuntime from "${hmrRuntimeId}";

const inWebWorker = typeof WorkerGlobalScope !== 'undefined' && self instanceof WorkerGlobalScope;
let prevRefreshReg;
let prevRefreshSig;

if (import.meta.hot && !inWebWorker) {
if (!window.__vite_plugin_react_preamble_installed__) {
throw new Error(
"Remix Vite plugin can't detect preamble. Something is wrong."
);
}

prevRefreshReg = window.$RefreshReg$;
prevRefreshSig = window.$RefreshSig$;
window.$RefreshReg$ = (type, id) => {
RefreshRuntime.register(type, __SOURCE__ + " " + id)
};
window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;
}`.replace(/\n+/g, "");

const REACT_REFRESH_FOOTER = `
if (import.meta.hot && !inWebWorker) {
window.$RefreshReg$ = prevRefreshReg;
window.$RefreshSig$ = prevRefreshSig;
RefreshRuntime.__hmr_import(import.meta.url).then((currentExports) => {
RefreshRuntime.registerExportsForReactRefresh(__SOURCE__, currentExports);
import.meta.hot.accept((nextExports) => {
if (!nextExports) return;
__ROUTE_ID__ && window.__remixRouteModuleUpdates.set(__ROUTE_ID__, nextExports);
const invalidateMessage = RefreshRuntime.validateRefreshBoundaryAndEnqueueUpdate(currentExports, nextExports, __ACCEPT_EXPORTS__);
if (invalidateMessage) import.meta.hot.invalidate(invalidateMessage);
});
});
}`;

function getRoute(
pluginConfig: ResolvedVitePluginConfig,
file: string
Expand Down