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

WIP: Refactor to prepare for Vite's environment API #12807

Draft
wants to merge 6 commits into
base: dev
Choose a base branch
from
+230 −174
Draft

WIP: Refactor to prepare for Vite's environment API #12807

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
59d5f65
Refactor to use unified build context type
markdalgleish Jan 22, 2025
90f902e
Add more env names, remove ServerBundleBuildConfig
markdalgleish Jan 22, 2025
107b982
Remove unused getServerBundleBuildVars
markdalgleish Jan 22, 2025
0ab9b86
Remove unused ServerBundleBuildVars
markdalgleish Jan 22, 2025
d7ea776
Move build config to build context object
markdalgleish Jan 22, 2025
3fbfe69
Remove serverBundleId from env context
markdalgleish Jan 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
161 changes: 89 additions & 72 deletions packages/react-router-dev/vite/build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,12 @@ import colors from "picocolors";

import {
type ReactRouterPluginContext,
type ServerBundleBuildConfig,
type ReactRouterPluginBuildContext,
resolveViteConfig,
extractPluginContext,
getClientBuildDirectory,
getServerBuildDirectory,
virtual,
} from "./plugin";
import {
type BuildManifest,
Expand Down Expand Up @@ -59,31 +61,47 @@ function getRouteBranch(routes: RouteManifest, routeId: string) {
return branch.reverse();
}

type ReactRouterClientBuildArgs = {
ssr: false;
serverBundleBuildConfig?: never;
};

type ReactRouterServerBuildArgs = {
ssr: true;
serverBundleBuildConfig?: ServerBundleBuildConfig;
};

type ReactRouterBuildArgs =
| ReactRouterClientBuildArgs
| ReactRouterServerBuildArgs;

async function getServerBuilds(ctx: ReactRouterPluginContext): Promise<{
serverBuilds: ReactRouterServerBuildArgs[];
async function getBuildContext(ctx: ReactRouterPluginContext): Promise<{
clientBuild: ReactRouterPluginBuildContext;
serverBuilds: ReactRouterPluginBuildContext[];
buildManifest: BuildManifest;
}> {
let { rootDirectory } = ctx;
const { routes, serverBuildFile, serverBundles, appDirectory } =
ctx.reactRouterConfig;
let serverBuildDirectory = getServerBuildDirectory(ctx);

let clientBuild: ReactRouterPluginBuildContext = {
environment: {
name: "client",
build: {
outDir: getClientBuildDirectory(ctx.reactRouterConfig),
},
},
shared: {
routesByServerBundleId: {},
},
};

if (!serverBundles) {
return {
serverBuilds: [{ ssr: true }],
clientBuild,
serverBuilds: [
{
environment: {
name: "ssr",
build: {
outDir: getServerBuildDirectory(ctx),
rollupOptions: {
input: virtual.serverBuild.id,
},
},
},
shared: {
routesByServerBundleId: {},
},
},
],
buildManifest: { routes },
};
}
Expand All @@ -107,7 +125,7 @@ async function getServerBuilds(ctx: ReactRouterPluginContext): Promise<{
routes: rootRelativeRoutes,
};

let serverBundleBuildConfigById = new Map<string, ServerBundleBuildConfig>();
let routesByServerBundleId: Record<string, RouteManifest> = {};

await Promise.all(
getAddressableRoutes(routes).map(async (route) => {
Expand All @@ -131,41 +149,53 @@ async function getServerBuilds(ctx: ReactRouterPluginContext): Promise<{
}
buildManifest.routeIdToServerBundleId[route.id] = serverBundleId;

let relativeServerBundleDirectory = path.relative(
rootDirectory,
path.join(serverBuildDirectory, serverBundleId)
);
let serverBuildConfig = serverBundleBuildConfigById.get(serverBundleId);
if (!serverBuildConfig) {
buildManifest.serverBundles[serverBundleId] = {
id: serverBundleId,
file: normalizePath(
path.join(relativeServerBundleDirectory, serverBuildFile)
),
};
serverBuildConfig = {
routes: {},
serverBundleId,
};
serverBundleBuildConfigById.set(serverBundleId, serverBuildConfig);
}
buildManifest.serverBundles[serverBundleId] = buildManifest.serverBundles[
serverBundleId
] ?? {
id: serverBundleId,
file: normalizePath(
path.join(
path.relative(
rootDirectory,
path.join(serverBuildDirectory, serverBundleId)
),
serverBuildFile
)
),
};

routesByServerBundleId[serverBundleId] =
routesByServerBundleId[serverBundleId] || {};
for (let route of branch) {
serverBuildConfig.routes[route.id] = route;
routesByServerBundleId[serverBundleId][route.id] = route;
}
})
);

let serverBuilds = Array.from(serverBundleBuildConfigById.values()).map(
(serverBundleBuildConfig): ReactRouterServerBuildArgs => {
let serverBuild: ReactRouterServerBuildArgs = {
ssr: true,
serverBundleBuildConfig,
let serverBundleIds = Object.keys(routesByServerBundleId);
let serverBuilds: ReactRouterPluginBuildContext[] = serverBundleIds.map(
(serverBundleId): ReactRouterPluginBuildContext => {
return {
environment: {
name: `server-bundle-${serverBundleId}`,
build: {
outDir: getServerBuildDirectory(ctx, { serverBundleId }),
rollupOptions: {
input:
virtual.serverBuild.id +
(serverBundleId ? `?server-bundle-id=${serverBundleId}` : ""),
},
},
},
shared: {
routesByServerBundleId,
},
};
return serverBuild;
}
);

return {
clientBuild,
serverBuilds,
buildManifest,
};
Expand All @@ -186,23 +216,12 @@ async function cleanBuildDirectory(
}
}

function getViteManifestPaths(
ctx: ReactRouterPluginContext,
serverBuilds: Array<ReactRouterServerBuildArgs>
) {
let buildRelative = (pathname: string) =>
path.resolve(ctx.reactRouterConfig.buildDirectory, pathname);

let viteManifestPaths: Array<string> = [
"client/.vite/manifest.json",
...serverBuilds.map(({ serverBundleBuildConfig }) => {
let serverBundleId = serverBundleBuildConfig?.serverBundleId;
let serverBundlePath = serverBundleId ? serverBundleId + "/" : "";
return `server/${serverBundlePath}.vite/manifest.json`;
}),
].map((srcPath) => buildRelative(srcPath));

return viteManifestPaths;
function getViteManifestPaths(builds: ReactRouterPluginBuildContext[]) {
return builds.map((build) => {
let outDir = build.environment.build.outDir;
invariant(outDir, "Expected build.outDir for build environment");
return path.join(outDir, ".vite/manifest.json");
});
}

export interface ViteBuildOptions {
Expand Down Expand Up @@ -253,10 +272,9 @@ export async function build(

let vite = getVite();

async function viteBuild({
ssr,
serverBundleBuildConfig,
}: ReactRouterBuildArgs) {
async function viteBuild(buildContext: ReactRouterPluginBuildContext) {
let ssr = buildContext.environment.name !== "client";

await vite.build({
root,
mode,
Expand All @@ -271,22 +289,21 @@ export async function build(
optimizeDeps: { force },
clearScreen,
logLevel,
...(serverBundleBuildConfig
? { __reactRouterServerBundleBuildConfig: serverBundleBuildConfig }
: {}),
...{ __reactRouterBuildContext: buildContext },
});
}

await cleanBuildDirectory(viteConfig, ctx);

let { clientBuild, serverBuilds, buildManifest } = await getBuildContext(ctx);

// Run the Vite client build first
await viteBuild({ ssr: false });
await viteBuild(clientBuild);

// Then run Vite SSR builds in parallel
let { serverBuilds, buildManifest } = await getServerBuilds(ctx);
await Promise.all(serverBuilds.map(viteBuild));
await Promise.all(serverBuilds.map((serverBuild) => viteBuild(serverBuild)));

let viteManifestPaths = getViteManifestPaths(ctx, serverBuilds);
let viteManifestPaths = getViteManifestPaths([clientBuild, ...serverBuilds]);
await Promise.all(
viteManifestPaths.map(async (viteManifestPath) => {
let manifestExists = await fse.pathExists(viteManifestPath);
Expand Down
Loading
Loading