proteum 2.1.7 → 2.1.9-1

package/cli/commands/dev.ts

@@ -23,6 +23,20 @@ import Compiler from '../compiler';
 import { createDevEventServer } from './devEvents';
 import { ensureProjectAgentSymlinks } from '../utils/agents';
 import { renderDevSession, renderServerReadyBanner, renderDevShutdownBanner } from '../presentation/devSession';
+import { clearInteractiveConsole } from '../presentation/welcome';
+import {
+    createDevSessionRecord,
+    inspectDevSessionFile,
+    listDevSessionInspections,
+    removeDevSessionRecord,
+    removeDevSessionRecordSync,
+    resolveDevSessionFilePath,
+    stopDevSessionFile,
+    updateDevSessionRecord,
+    type TDevSessionInspection,
+    type TStopDevSessionResult,
+} from '../runtime/devSessions';
+import { resolveFrameworkInstallInfo } from '../paths';
 import { logVerbose } from '../runtime/verbose';
 
 // Core
@@ -51,6 +65,8 @@ const hotReloadableRoots = [() => app.paths.root, () => cli.paths.core.root];
 let cp: ChildProcess | undefined = undefined;
 let devSessionStopping = false;
 let appProcessOperation: Promise<void> = Promise.resolve();
+let currentDevSessionFilePath: string | undefined = undefined;
+let devSessionExitCleanupRegistered = false;
 type TDevWatching = ReturnType<Awaited<ReturnType<Compiler['create']>>['watch']>;
 type TIndexedSourceWatching = { close: () => Promise<void> };
 
@@ -122,6 +138,7 @@ const createIgnoredWatchMatcher = (outputPaths: string[]) => (watchPath: string)
 
     return ignoredWatchPathPatterns.test(normalizedWatchPath);
 };
+
 const getDevAppName = (app: App) =>
     app.identity.web?.fullTitle || app.identity.web?.title || app.identity.name || app.packageJson.name || app.paths.root;
 
@@ -159,6 +176,190 @@ const signalAppProcess = (child: ChildProcess, signal: NodeJS.Signals) => {
     }
 };
 
+const getRequestedSessionFilePath = () =>
+    typeof cli.args.sessionFile === 'string' && cli.args.sessionFile.trim() ? cli.args.sessionFile : undefined;
+
+const getResolvedDevSessionFilePath = () =>
+    resolveDevSessionFilePath({
+        appRoot: app.paths.root,
+        port: app.env.router.port,
+        sessionFilePath: getRequestedSessionFilePath(),
+    });
+
+const registerDevSessionExitCleanup = () => {
+    if (devSessionExitCleanupRegistered) return;
+
+    devSessionExitCleanupRegistered = true;
+    process.once('exit', () => {
+        if (!currentDevSessionFilePath) return;
+        removeDevSessionRecordSync(currentDevSessionFilePath);
+    });
+};
+
+const updateCurrentDevSession = async (patch: { publicUrl?: string; state?: 'starting' | 'ready' }) => {
+    if (!currentDevSessionFilePath) return;
+
+    await updateDevSessionRecord({
+        sessionFilePath: currentDevSessionFilePath,
+        patch,
+    });
+};
+
+const cleanupCurrentDevSession = async () => {
+    if (!currentDevSessionFilePath) return;
+
+    const sessionFilePath = currentDevSessionFilePath;
+    currentDevSessionFilePath = undefined;
+    await removeDevSessionRecord(sessionFilePath);
+};
+
+const describeInspection = (inspection: TDevSessionInspection) => {
+    if (!inspection.record) {
+        return [
+            'stale invalid',
+            inspection.sessionFilePath,
+            inspection.parseError || 'Unreadable session file.',
+        ].join(' | ');
+    }
+
+    const parts = [
+        inspection.live ? 'live' : 'stale',
+        inspection.record.state,
+        `pid ${inspection.record.pid}`,
+        `port ${inspection.record.routerPort}`,
+    ];
+
+    if (inspection.record.publicUrl) parts.push(inspection.record.publicUrl);
+    parts.push(inspection.sessionFilePath);
+
+    return parts.join(' | ');
+};
+
+const describeStopResult = (result: TStopDevSessionResult) => {
+    if (!result.matched) return `missing | ${result.sessionFilePath}`;
+    if (result.invalid)
+        return `removed stale invalid | ${result.sessionFilePath} | ${result.parseError || 'Unreadable session file.'}`;
+    if (result.removed && result.stopped && !result.live) {
+        return [
+            result.pid !== null ? `stopped pid ${result.pid}` : 'stopped',
+            result.routerPort !== null ? `port ${result.routerPort}` : '',
+            result.publicUrl,
+            result.sessionFilePath,
+        ]
+            .filter(Boolean)
+            .join(' | ');
+    }
+
+    return [
+        'failed',
+        result.pid !== null ? `pid ${result.pid}` : '',
+        result.routerPort !== null ? `port ${result.routerPort}` : '',
+        result.publicUrl,
+        result.sessionFilePath,
+    ]
+        .filter(Boolean)
+        .join(' | ');
+};
+
+const printJson = (payload: unknown) => {
+    process.stdout.write(JSON.stringify(payload, null, 2) + '\n');
+};
+
+const runListCommand = async () => {
+    const inspections = await listDevSessionInspections({
+        appRoot: app.paths.root,
+        sessionFilePath: getRequestedSessionFilePath(),
+    });
+    const filteredInspections = cli.args.stale === true ? inspections.filter((inspection) => inspection.stale) : inspections;
+
+    if (cli.args.json === true) {
+        printJson({
+            appRoot: app.paths.root,
+            sessions: filteredInspections.map((inspection) => ({
+                sessionFilePath: inspection.sessionFilePath,
+                live: inspection.live,
+                stale: inspection.stale,
+                invalid: inspection.invalid,
+                parseError: inspection.parseError,
+                record: inspection.record,
+            })),
+        });
+        return;
+    }
+
+    if (filteredInspections.length === 0) {
+        console.info(`No Proteum dev sessions found for ${app.paths.root}.`);
+        return;
+    }
+
+    console.info(filteredInspections.map(describeInspection).join('\n'));
+};
+
+const runStopCommand = async () => {
+    const stopAll = cli.args.all === true;
+    const filterStale = cli.args.stale === true;
+
+    const targetSessionFilePaths = stopAll
+        ? (await listDevSessionInspections({
+              appRoot: app.paths.root,
+              sessionFilePath: getRequestedSessionFilePath(),
+          }))
+              .filter((inspection) => !filterStale || inspection.stale)
+              .map((inspection) => inspection.sessionFilePath)
+        : [getResolvedDevSessionFilePath()];
+
+    const results = await Promise.all(targetSessionFilePaths.map((sessionFilePath) => stopDevSessionFile(sessionFilePath)));
+    const failedResults = results.filter((result) => result.matched && !result.stopped);
+
+    if (cli.args.json === true) {
+        printJson({ appRoot: app.paths.root, results });
+    } else if (results.length === 0) {
+        console.info(`No Proteum dev sessions matched for ${app.paths.root}.`);
+    } else {
+        console.info(results.map(describeStopResult).join('\n'));
+    }
+
+    if (failedResults.length > 0) {
+        process.exitCode = 1;
+    }
+};
+
+const ensureDevSessionSlot = async () => {
+    const sessionFilePath = getResolvedDevSessionFilePath();
+    const existingInspection = await inspectDevSessionFile(sessionFilePath);
+
+    if (existingInspection?.record && existingInspection.live && existingInspection.record.pid !== process.pid) {
+        if (cli.args.replaceExisting !== true) {
+            throw new Error(
+                `A Proteum dev session is already registered at ${sessionFilePath} (pid ${existingInspection.record.pid}, port ${existingInspection.record.routerPort}). ` +
+                    'Use `proteum dev stop` or restart with `proteum dev --replace-existing`.',
+            );
+        }
+
+        const stopResult = await stopDevSessionFile(sessionFilePath);
+        if (!stopResult.stopped) {
+            throw new Error(`Could not stop the existing Proteum dev session registered at ${sessionFilePath}.`);
+        }
+    } else if (existingInspection) {
+        await stopDevSessionFile(sessionFilePath);
+    }
+
+    currentDevSessionFilePath = sessionFilePath;
+    registerDevSessionExitCleanup();
+    await fs.ensureDir(path.dirname(sessionFilePath));
+    await fs.writeJson(
+        sessionFilePath,
+        createDevSessionRecord({
+            appRoot: app.paths.root,
+            port: app.env.router.port,
+            sessionFilePath,
+        }),
+        { spaces: 2 },
+    );
+
+    logVerbose(`Registered Proteum dev session at ${sessionFilePath}.`);
+};
+
 async function startApp(app: App) {
     await runSerializedAppProcessOperation(async () => {
         if (devSessionStopping) return;
@@ -166,6 +367,7 @@ async function startApp(app: App) {
         await stopAppInternal('Restart asked');
         if (devSessionStopping) return;
 
+        await updateCurrentDevSession({ state: 'starting', publicUrl: '' });
         logVerbose('Launching new server ...');
         cp = spawn('node', ['--preserve-symlinks', app.outputPath('dev') + '/server.js'], {
             // stdin, stdout, stderr
@@ -191,10 +393,11 @@ async function startApp(app: App) {
             if (isServerReadyMessage(message)) {
                 childReady = true;
                 void (async () => {
+                    await updateCurrentDevSession({ publicUrl: message.publicUrl, state: 'ready' });
                     console.info(
                         await renderServerReadyBanner({
                             appName: getDevAppName(app),
-                            connectedProjectsCount: Object.keys(app.env.connectedProjects).length,
+                            connectedProjects: message.connectedProjects,
                             publicUrl: message.publicUrl,
                             routerPort: app.env.router.port,
                         }),
@@ -351,12 +554,15 @@ const createIndexedSourceWatching = ({
     };
 };
 
-/*----------------------------------
-- MAIN PROCESS
-----------------------------------*/
-export const run = async () => {
+const runDevLoop = async () => {
     devSessionStopping = false;
+    clearInteractiveConsole();
     ensureProjectAgentSymlinks({ appRoot: app.paths.root, coreRoot: cli.paths.core.root });
+    await ensureDevSessionSlot();
+    const proteumInstall = resolveFrameworkInstallInfo({
+        appRoot: app.paths.root,
+        framework: cli.paths.framework,
+    });
 
     const devEventServer = await createDevEventServer(app.env.router.port + 1);
     app.devEventPort = devEventServer.port;
@@ -367,6 +573,7 @@ export const run = async () => {
             connectedProjects: Object.values(app.env.connectedProjects),
             routerPort: app.env.router.port,
             devEventPort: devEventServer.port,
+            proteumInstallSummary: proteumInstall.summary,
             proteumVersion: String(cli.packageJson.version || ''),
         }),
     );
@@ -472,6 +679,7 @@ export const run = async () => {
             await stopApp(reason);
             await cleanupPersistedDevTraces(app);
             await devEventServer.close();
+            await cleanupCurrentDevSession();
             console.info(await renderDevShutdownBanner());
         })();
 
@@ -508,3 +716,22 @@ export const run = async () => {
     process.once('SIGTERM', () => exitAfterShutdown('SIGTERM', 0));
     process.once('SIGHUP', () => exitAfterShutdown('SIGHUP', 0));
 };
+
+/*----------------------------------
+- MAIN PROCESS
+----------------------------------*/
+export const run = async () => {
+    const action = typeof cli.args.action === 'string' ? cli.args.action : 'start';
+
+    if (action === 'list') {
+        await runListCommand();
+        return;
+    }
+
+    if (action === 'stop') {
+        await runStopCommand();
+        return;
+    }
+
+    await runDevLoop();
+};

package/cli/compiler/artifacts/commands.ts

@@ -22,8 +22,15 @@ const readServerTsconfigPaths = () => {
     return compilerOptions.paths || {};
 };
 
-const createCommandsTsconfigContent = () =>
-    `${JSON.stringify(
+const getCommandsTsconfigFilepath = () => path.join(app.paths.root, 'commands', 'tsconfig.json');
+
+const getCommandsGlobalTypesPath = (commandsTsconfigFilepath: string) =>
+    cli.paths.relativeFrameworkPathFrom(commandsTsconfigFilepath, 'types', 'global');
+
+const createCommandsTsconfigContent = () => {
+    const commandsTsconfigFilepath = getCommandsTsconfigFilepath();
+
+    return `${JSON.stringify(
         {
             extends: '../server/tsconfig.json',
             compilerOptions: {
@@ -35,12 +42,13 @@ const createCommandsTsconfigContent = () =>
                     '@models/types': ['./.proteum/server/models.ts'],
                 },
             },
-            include: ['.', '../var/typings', '../node_modules/proteum/types/global', '../.proteum/server/commands.d.ts'],
+            include: ['.', '../var/typings', getCommandsGlobalTypesPath(commandsTsconfigFilepath), '../.proteum/server/commands.d.ts'],
         },
         null,
         4,
     )}
 `;
+};
 
 const legacyCommandsTsconfigContent = `{
     "extends": "../server/tsconfig.json",
@@ -105,8 +113,15 @@ const isManagedCommandsTsconfig = (content: string) => {
         };
 
         if (parsed.extends !== '../server/tsconfig.json') return false;
-        if (JSON.stringify(parsed.include || []) !== JSON.stringify(['.', '../var/typings', '../node_modules/proteum/types/global', '../.proteum/server/commands.d.ts']))
+        if (!Array.isArray(parsed.include) || parsed.include.length !== 4) return false;
+        if (parsed.include[0] !== '.' || parsed.include[1] !== '../var/typings') return false;
+        if (parsed.include[3] !== '../.proteum/server/commands.d.ts') return false;
+        if (
+            parsed.include[2] !== getCommandsGlobalTypesPath(getCommandsTsconfigFilepath()) &&
+            !parsed.include[2].includes('node_modules/proteum/types/global')
+        ) {
             return false;
+        }
 
         if (parsed.compilerOptions?.baseUrl !== undefined && parsed.compilerOptions.baseUrl !== '..') return false;
         if (parsed.compilerOptions?.rootDir !== undefined && parsed.compilerOptions.rootDir !== '..') return false;
@@ -119,7 +134,7 @@ const isManagedCommandsTsconfig = (content: string) => {
 
 const ensureCommandsTsconfig = () => {
     const commandsRoot = path.join(app.paths.root, 'commands');
-    const commandsTsconfigFilepath = path.join(commandsRoot, 'tsconfig.json');
+    const commandsTsconfigFilepath = getCommandsTsconfigFilepath();
     const nextContent = createCommandsTsconfigContent();
 
     if (!fs.existsSync(commandsRoot)) return;

package/cli/compiler/client/index.ts

@@ -21,22 +21,40 @@ import type { App } from '../../app';
 
 const debug = false;
 const ssrScriptPattern = /\.ssr\.(ts|tsx)$/;
-const normalizedCoreRoot = cli.paths.core.root.replace(/\\/g, '/');
-const hmrClientEntry = path.join(cli.paths.core.root, 'client', 'dev', 'hmr.ts');
-
 const normalizeModulePath = (value?: string) => (value || '').replace(/\\/g, '/');
-const resolveFromAppOrCore = (app: App, request: string) =>
-    require.resolve(request, { paths: [app.paths.root, cli.paths.core.root] });
-const rewriteFrameworkAliasTargets = (app: App, aliases: Record<string, string | string[]>) => {
-    const installedCoreRoot = normalizeModulePath(path.join(app.paths.root, 'node_modules', 'proteum'));
-    const activeCoreRoot = normalizeModulePath(cli.paths.core.root);
+const getFrameworkSourceRoot = () => {
+    const installedCoreRoot = cli.paths.framework.installedRoot
+        ? normalizeModulePath(cli.paths.framework.installedRoot)
+        : undefined;
+    const activeCoreRoot = normalizeModulePath(cli.paths.framework.activeRoot);
+
+    if (installedCoreRoot && activeCoreRoot.includes('/node_modules/')) {
+        return installedCoreRoot;
+    }
+
+    return activeCoreRoot;
+};
 
-    if (installedCoreRoot === activeCoreRoot) return aliases;
+const resolveFromAppOrCore = (_app: App, request: string) => cli.paths.resolveRequest(request);
+const rewriteFrameworkAliasTargets = (aliases: Record<string, string | string[]>) => {
+    const visibleFrameworkRoots = [
+        ...cli.paths.getVisiblePackageInstallRoots('proteum'),
+        cli.paths.framework.installedRoot,
+        cli.paths.framework.activeRoot,
+    ]
+        .filter((rootPath): rootPath is string => typeof rootPath === 'string' && rootPath !== '')
+        .map((rootPath) => normalizeModulePath(rootPath))
+        .filter((rootPath, index, list) => list.indexOf(rootPath) === index);
+    const frameworkSourceRoot = getFrameworkSourceRoot();
 
     const rewriteCandidate = (candidate: string) =>
-        normalizeModulePath(candidate).startsWith(installedCoreRoot + '/')
-            ? activeCoreRoot + normalizeModulePath(candidate).substring(installedCoreRoot.length)
-            : candidate;
+        visibleFrameworkRoots.reduce((nextCandidate, rootPath) => {
+                const normalizedCandidate = normalizeModulePath(nextCandidate);
+
+                return normalizedCandidate.startsWith(rootPath + '/')
+                    ? frameworkSourceRoot + normalizedCandidate.substring(rootPath.length)
+                    : nextCandidate;
+            }, candidate);
 
     return Object.fromEntries(
         Object.entries(aliases).map(([alias, value]) => [
@@ -61,8 +79,9 @@ const isExternalVendorModule = (module: Module) => {
 
 const isCoreSourceModule = (module: Module) => {
     const modulePath = getModulePath(module);
+    const frameworkSourceRoot = getFrameworkSourceRoot();
 
-    return modulePath.startsWith(normalizedCoreRoot + '/') || modulePath.includes('/node_modules/proteum/');
+    return modulePath.startsWith(frameworkSourceRoot + '/') || modulePath.includes('/node_modules/proteum/');
 };
 
 /*----------------------------------
@@ -76,9 +95,12 @@ export default function createCompiler(
     logVerbose(`Creating compiler for client (${mode}).`);
     const dev = mode === 'dev';
     const outputPath = app.outputPath(outputTarget);
-    const installedCoreRoot = path.join(app.paths.root, 'node_modules', 'proteum');
-    const frameworkRoots = [cli.paths.core.root, installedCoreRoot];
+    const frameworkSourceRoot = getFrameworkSourceRoot();
+    const frameworkRoots = [frameworkSourceRoot, ...cli.paths.getFrameworkRoots()].filter(
+        (rootPath, index, list) => list.indexOf(rootPath) === index,
+    );
     const transpileModuleDirectories = app.transpileModuleDirectories;
+    const hmrClientEntry = path.join(frameworkSourceRoot, 'client', 'dev', 'hmr.ts');
 
     const commonConfig = createCommonConfig(app, 'client', mode, outputTarget);
 
@@ -93,14 +115,15 @@ export default function createCompiler(
         );*/
 
     // Convert tsconfig paths into bundler aliases.
-    const { aliases } = app.aliases.client.forWebpack({ modulesPath: app.paths.root + '/node_modules' });
-    const resolvedAliases = rewriteFrameworkAliasTargets(app, aliases);
+    const { aliases } = app.aliases.client.forWebpack({ modulesPath: cli.paths.framework.appNodeModulesRoot });
+    const resolvedAliases = rewriteFrameworkAliasTargets(aliases);
 
     // We're not supposed in any case to import server libs from client
     delete resolvedAliases['@server'];
     delete resolvedAliases['@/server'];
     const rspackAliases = toRspackAliases(resolvedAliases);
-    rspackAliases['@/client/router$'] = cli.paths.core.root + '/client/router.ts';
+    rspackAliases['proteum'] = frameworkSourceRoot;
+    rspackAliases['@/client/router$'] = frameworkSourceRoot + '/client/router.ts';
     rspackAliases['preact/jsx-runtime$'] = resolveFromAppOrCore(app, 'preact/jsx-runtime');
     rspackAliases['react/jsx-runtime$'] = resolveFromAppOrCore(app, 'preact/jsx-runtime');
     rspackAliases['react/jsx-dev-runtime$'] = resolveFromAppOrCore(app, 'preact/jsx-dev-runtime');
@@ -113,8 +136,8 @@ export default function createCompiler(
         target: 'web',
         entry: {
             client: dev
-                ? [hmrClientEntry, cli.paths.core.root + '/client/index.ts']
-                : [cli.paths.core.root + '/client/index.ts'],
+                ? [hmrClientEntry, frameworkSourceRoot + '/client/index.ts']
+                : [frameworkSourceRoot + '/client/index.ts'],
         },
 
         output: {
@@ -168,7 +191,7 @@ export default function createCompiler(
                         ...transpileModuleDirectories,
                     ],
                     loader: path.join(
-                        cli.paths.core.root,
+                        frameworkSourceRoot,
                         'cli',
                         'compiler',
                         'common',
@@ -229,11 +252,11 @@ export default function createCompiler(
                 : [
                       new rspack.NormalModuleReplacementPlugin(
                           /^@client\/dev\/profiler$/,
-                          cli.paths.core.root + '/client/dev/profiler/noop.tsx',
+                          frameworkSourceRoot + '/client/dev/profiler/noop.tsx',
                       ),
                       new rspack.NormalModuleReplacementPlugin(
                           /^@client\/dev\/profiler\/runtime$/,
-                          cli.paths.core.root + '/client/dev/profiler/runtime.noop.ts',
+                          frameworkSourceRoot + '/client/dev/profiler/runtime.noop.ts',
                       ),
                   ]),
 

package/cli/compiler/common/bundleAnalysis.ts

@@ -1,6 +1,7 @@
 import fs from 'fs-extra';
 import path from 'path';
 import type { RspackPluginInstance } from '@rspack/core';
+import { UsageError } from 'clipanion';
 
 import cli from '../..';
 import type { App } from '../../app';
@@ -8,8 +9,56 @@ import type { App } from '../../app';
 const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
 
 export type TBundleAnalysisReportPaths = { reportPath: string; statsPath: string };
+export type TBundleAnalysisMode = 'server' | 'static';
+type TBundleAnalysisServerUrlArgs = {
+    listenHost: string;
+    listenPort: number | 'auto';
+    boundAddress?: string | { address?: string; port?: number } | null;
+};
+
+const defaultAnalyzerHost = '127.0.0.1';
+const defaultAnalyzerPort = 8888;
+let latestClientBundleAnalysisServerUrl: string | undefined;
 
 export const isBundleAnalysisEnabled = () => cli.args.analyze === true;
+export const isBundleAnalysisServerEnabled = () => cli.args.analyzeServe === true;
+export const getBundleAnalysisMode = (): TBundleAnalysisMode => (isBundleAnalysisServerEnabled() ? 'server' : 'static');
+
+const hasCliStringArg = (name: string) => typeof cli.args[name] === 'string' && (cli.args[name] as string).trim().length > 0;
+
+export const hasBundleAnalysisServerOverrides = () => hasCliStringArg('analyzeHost') || hasCliStringArg('analyzePort');
+
+export const getBundleAnalysisServerHost = () =>
+    hasCliStringArg('analyzeHost') ? String(cli.args.analyzeHost).trim() : defaultAnalyzerHost;
+
+export const getBundleAnalysisServerPort = (): number | 'auto' => {
+    const rawPort = hasCliStringArg('analyzePort') ? String(cli.args.analyzePort).trim() : '';
+    if (!rawPort) return defaultAnalyzerPort;
+    if (rawPort === 'auto') return 'auto';
+
+    const parsedPort = Number.parseInt(rawPort, 10);
+    if (!Number.isInteger(parsedPort) || parsedPort < 1 || parsedPort > 65535) {
+        throw new UsageError(`Invalid analyzer port "${rawPort}". Use a number between 1 and 65535, or \`auto\`.`);
+    }
+
+    return parsedPort;
+};
+
+const createBundleAnalysisServerUrl = ({ listenHost, listenPort, boundAddress }: TBundleAnalysisServerUrlArgs) => {
+    const port =
+        typeof boundAddress === 'object' && boundAddress !== null && typeof boundAddress.port === 'number'
+            ? boundAddress.port
+            : listenPort;
+    const url = `http://${listenHost}:${port}`;
+    latestClientBundleAnalysisServerUrl = url;
+    return url;
+};
+
+export const consumeClientBundleAnalysisServerUrl = () => {
+    const url = latestClientBundleAnalysisServerUrl;
+    latestClientBundleAnalysisServerUrl = undefined;
+    return url;
+};
 
 export const getClientBundleAnalysisReportPaths = (
     app: App,
@@ -23,19 +72,25 @@ export const getClientBundleAnalysisReportPaths = (
 export const createClientBundleAnalysisPlugins = (app: App, outputTarget: 'dev' | 'bin'): RspackPluginInstance[] => {
     if (!isBundleAnalysisEnabled()) return [];
 
+    latestClientBundleAnalysisServerUrl = undefined;
+
     const { reportPath, statsPath } = getClientBundleAnalysisReportPaths(app, outputTarget);
+    const analyzerMode = getBundleAnalysisMode();
 
     fs.ensureDirSync(path.dirname(reportPath));
 
     return [
         new BundleAnalyzerPlugin({
-            analyzerMode: 'static',
+            analyzerMode,
+            analyzerHost: getBundleAnalysisServerHost(),
+            analyzerPort: getBundleAnalysisServerPort(),
             openAnalyzer: false,
             defaultSizes: 'parsed',
             reportFilename: reportPath,
             generateStatsFile: true,
             statsFilename: statsPath,
             logLevel: 'info',
+            analyzerUrl: createBundleAnalysisServerUrl,
         }),
     ];
 };

package/cli/compiler/common/index.ts

@@ -45,6 +45,21 @@ export default function createCommonConfig(
 ): Configuration {
     const dev = mode === 'dev';
     const enableFilesystemCache = dev ? cli.args.cache !== false : cli.args.cache === true;
+    const frameworkPackageRoots = [cli.paths.framework.installedRoot, cli.paths.framework.activeRoot].filter(
+        (rootPath, index, list): rootPath is string => typeof rootPath === 'string' && list.indexOf(rootPath) === index,
+    );
+    const visibleNodeModulesRoots = [
+        ...cli.paths.getVisibleNodeModulesRootsForPath(app.paths.root),
+        ...frameworkPackageRoots.flatMap((rootPath) => cli.paths.getVisibleNodeModulesRootsForPath(rootPath)),
+        ...cli.paths.getVisibleNodeModulesRootsForPath(cli.paths.core.cli),
+    ].filter((moduleRoot, index, list) => list.indexOf(moduleRoot) === index);
+    const loaderModuleRoots = [
+        ...visibleNodeModulesRoots,
+        ...frameworkPackageRoots.map((rootPath) => path.join(rootPath, 'node_modules')),
+        cli.paths.framework.appNodeModulesRoot,
+        cli.paths.framework.frameworkNodeModulesRoot,
+        path.join(cli.paths.core.cli, 'node_modules'),
+    ].filter((moduleRoot, index, list) => list.indexOf(moduleRoot) === index);
     const config: Configuration = {
         // Project root
         context: app.paths.root,
@@ -55,11 +70,7 @@ export default function createCommonConfig(
             // Support both install modes:
             // - npm i: loaders are often hoisted in app/node_modules
             // - npm link: loaders often live in framework/node_modules
-            modules: [
-                app.paths.root + '/node_modules',
-                cli.paths.core.root + '/node_modules',
-                cli.paths.core.cli + '/node_modules',
-            ],
+            modules: loaderModuleRoots,
             mainFields: ['loader', 'main'],
         },
 

package/cli/compiler/index.ts

@@ -9,6 +9,7 @@ import { rspack, type Compiler as RspackCompiler } from '@rspack/core';
 
 // Core
 import app from '../app';
+import cli from '..';
 import createServerConfig from './server';
 import createClientConfig from './client';
 import { TCompileMode, TCompileOutputTarget } from './common';
@@ -62,15 +63,21 @@ export default class Compiler {
         - Including React, so VSCode shows that JSX is missing
     */
     public fixNpmLinkIssues() {
-        const corePath = path.join(app.paths.root, '/node_modules/proteum');
-        if (!fs.lstatSync(corePath).isSymbolicLink())
-            return logVerbose("Not fixing npm issue because proteum wasn't installed with npm link.");
+        const installedFrameworkRoot = cli.paths.framework.installedRoot;
+
+        if (!installedFrameworkRoot || !fs.existsSync(installedFrameworkRoot)) {
+            return logVerbose("Not fixing npm link issues because the app can't see an installed Proteum package.");
+        }
+
+        if (!fs.lstatSync(installedFrameworkRoot).isSymbolicLink()) {
+            return logVerbose("Not fixing npm link issues because Proteum wasn't installed with npm link.");
+        }
 
         this.debug && logVerbose(`Fix NPM link issues ...`);
         const outputPath = app.outputPath(this.outputTarget);
 
-        const appModules = path.join(app.paths.root, 'node_modules');
-        const coreModules = path.join(corePath, 'node_modules');
+        const appModules = cli.paths.framework.appNodeModulesRoot;
+        const coreModules = cli.paths.framework.frameworkNodeModulesRoot;
 
         // When the 5htp package is installed from npm link,
         // Modules are installed locally and not glbally as with with the 5htp package from NPM.