@servicetitan/startup 36.3.1 → 36.4.0

package/src/cli/commands/__tests__/install.test.ts

@@ -1,12 +1,16 @@
 import { execSync } from 'child_process';
-import { getStartupVersion, log } from '../../../utils';
+import { getStartupVersion } from '../../../core';
+import { log } from '../../../utils';
 import { Install } from '../install';
 import { entry } from '../registry/install';
 
 jest.mock('child_process', () => ({ execSync: jest.fn() }));
+jest.mock('../../../core', () => ({
+    ...jest.requireActual('../../../core'),
+    getStartupVersion: jest.fn(),
+}));
 jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
-    getStartupVersion: jest.fn(),
     log: { debug: jest.fn(), info: jest.fn() }, // suppress log output
 }));
 

package/src/cli/commands/__tests__/mfe-generate-metadata.test.ts

@@ -1,8 +1,11 @@
 import { fs, vol } from 'memfs';
 import path from 'node:path';
-import { getPackageData, getStartupVersion, loadSharedDependencies, log } from '../../../utils';
-import { getLaunchDarklySdkVersion } from '../../../webpack/configs/utils/get-launchdarkly-sdk-version';
-import { getWebComponentsVersion } from '../../../webpack/configs/utils/get-web-components-version';
+import {
+    getLaunchDarklySdkVersion,
+    getStartupVersion,
+    getWebComponentsVersion,
+} from '../../../core';
+import { getPackageData, loadSharedDependencies, log } from '../../../utils';
 import { MfeGenerateMetadata } from '../mfe-generate-metadata';
 import { entry } from '../registry/mfe-generate-metadata';
 
@@ -11,14 +14,14 @@ jest.mock('../../../utils', () => ({
     ...jest.requireActual('../../../utils'),
     log: { info: jest.fn() },
 }));
-jest.mock('../../../webpack/configs/utils/get-web-components-version', () => ({
-    getWebComponentsVersion: jest.fn(() => '1.0.0'),
-}));
-jest.mock('../../../utils/get-startup-version', () => ({
-    getStartupVersion: jest.fn(() => '33.0.0'),
-}));
-jest.mock('../../../webpack/configs/utils/get-launchdarkly-sdk-version', () => ({
+/*
+ * Mock get-version (not core) because internal modules import from get-version
+ * directly. Mocking the core barrel doesn't intercept those internal imports.
+ */
+jest.mock('../../../core/get-version', () => ({
     getLaunchDarklySdkVersion: jest.fn(() => '3.4.5'),
+    getStartupVersion: jest.fn(() => '33.0.0'),
+    getWebComponentsVersion: jest.fn(() => '1.0.0'),
 }));
 
 describe(`[startup] ${MfeGenerateMetadata.name}`, () => {

package/src/cli/commands/__tests__/mfe-publish.test.ts

@@ -50,7 +50,7 @@ describe(`[startup] ${MFEPublish.name}`, () => {
         } catch {
             /* ignore */
         }
-        expect(getPackages).toHaveBeenCalledWith({ type: PackageType.Webpack });
+        expect(getPackages).toHaveBeenCalledWith({ type: PackageType.Bundle });
     });
 
     describe('with no packages', () => {
@@ -76,7 +76,7 @@ describe(`[startup] ${MFEPublish.name}`, () => {
         }
 
         beforeEach(() => {
-            packages.push(createPackage({ type: PackageType.Webpack }));
+            packages.push(createPackage({ type: PackageType.Bundle }));
             mockPackageJson(packages);
         });
 
@@ -226,12 +226,12 @@ describe(`[startup] ${MFEPublish.name}`, () => {
                 packages.push(
                     createPackage({
                         name: '@servicetitan/bar',
-                        type: PackageType.Webpack,
+                        type: PackageType.Bundle,
                         location: 'packages/bar',
                     }),
                     createPackage({
                         name: '@servicetitan/baz',
-                        type: PackageType.Webpack,
+                        type: PackageType.Bundle,
                         location: 'packages/baz',
                     })
                 );

package/src/cli/commands/__tests__/start.test.ts

@@ -121,7 +121,7 @@ describe(`[startup] ${Start.name}`, () => {
     });
 
     describe('with Webpack package', () => {
-        beforeEach(() => packages.push(createPackage({ type: PackageType.Webpack })));
+        beforeEach(() => packages.push(createPackage({ type: PackageType.Bundle })));
 
         itPreparesThePackages();
         itRunsCompileAndTypeCheck();

package/src/cli/commands/build.ts

@@ -11,7 +11,7 @@ enum BuildProcesses {
     PreparePackage,
     TypeCheck,
     BundleExposedDependencies,
-    BundlePackage,
+    Bundle,
 }
 
 export class Build extends Command<typeof entry> {
@@ -20,11 +20,13 @@ export class Build extends Command<typeof entry> {
         checkArgs(this.args, { obsolete: ['--esbuild', '--experimental-bundlers'] });
 
         const useTsc = this.args.useTsc;
+        const useVite = this.args.useVite;
+        const cmd = useVite ? 'startup bundle-vite' : 'startup bundle-package';
 
         const packages = getPackages({
             scope: this.args.scope,
             ignore: this.args.ignore,
-            type: [PackageType.TSC, PackageType.Webpack],
+            type: [PackageType.TSC, PackageType.Bundle],
         });
         if (packages.length === 0) {
             return;
@@ -35,8 +37,8 @@ export class Build extends Command<typeof entry> {
         }
 
         const scope = packages.map(({ name }) => name);
-        const webpackScope = packages
-            .filter(({ type }) => type === PackageType.Webpack)
+        const bundleScope = packages
+            .filter(({ type }) => type === PackageType.Bundle)
             .map(({ name }) => name);
         const precompileScope = packages
             .filter(({ scripts }) => !!scripts?.precompile)
@@ -72,12 +74,12 @@ export class Build extends Command<typeof entry> {
         processTree.add(
             BuildProcesses.BundleExposedDependencies,
             () => {
-                if (webpackScope.length === 0) {
+                if (bundleScope.length === 0) {
                     return Promise.resolve();
                 }
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
-                    'scope': webpackScope,
+                    cmd,
+                    'scope': bundleScope,
                     'parallel': true,
                     'stream': true,
                     '--': ['--exposed-dependencies'],
@@ -92,20 +94,21 @@ export class Build extends Command<typeof entry> {
             }
         );
         processTree.add(
-            BuildProcesses.BundlePackage,
+            BuildProcesses.Bundle,
             () => {
-                if (webpackScope.length === 0) {
+                if (bundleScope.length === 0) {
                     return Promise.resolve();
                 }
 
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
-                    'scope': webpackScope,
+                    cmd,
+                    'scope': bundleScope,
                     'stream': true,
                     '--': [
                         ...[this.args.config ? `--config "${this.args.config}"` : undefined],
                         ...[this.args.codeCoverage ? '--code-coverage' : undefined],
                         ...[this.args.stat ? '--stat' : undefined],
+                        ...[useVite && this.args.preview ? '--preview' : undefined],
                     ].filter(item => !!item) as string[],
                 });
             },

package/src/cli/commands/bundle-vite.ts

@@ -0,0 +1,82 @@
+import { build, createServer, preview as previewServer } from 'vite';
+import { BuildContextOptions, getBuildName, stringifyConfig } from '../../core';
+import {
+    hasHeadlessBundle,
+    isExposeSharedDependencies,
+    isWebComponent,
+    log,
+    logErrors,
+} from '../../utils';
+import { buildSharedDependencies } from '../../vite/build-shared-dependencies';
+import { createViteConfig } from '../../vite/config';
+import { validateViteSharedDependencies } from '../../vite/validate-shared-dependencies';
+import { entry } from './registry/bundle-vite';
+import { Command } from './types';
+
+export class BundleVite extends Command<typeof entry> {
+    @logErrors
+    async execute() {
+        validateViteSharedDependencies();
+
+        const { preview = false, useWatchConfig = false, watch = false } = this.args;
+        const isProduction = !(watch || useWatchConfig);
+
+        const options: BuildContextOptions = {
+            name: getBuildName(),
+            isProduction,
+        };
+
+        if (this.args.printConfig) {
+            const config = await createViteConfig(options);
+            log.text(stringifyConfig(config));
+            return;
+        }
+
+        if (this.args.exposedDependencies) {
+            if (watch) {
+                throw new Error('cannot bundle exposed dependencies in watch mode');
+            }
+            if (!isExposeSharedDependencies()) {
+                return;
+            }
+            await buildSharedDependencies(options);
+            return;
+        }
+
+        if (isWebComponent()) {
+            // Start builds sequentially to avoid I/O contention during startup
+            await buildAndServe({ ...options, light: true }, { watch });
+            if (hasHeadlessBundle()) {
+                await buildAndServe({ ...options, headless: true }, { watch });
+            }
+        }
+
+        await buildAndServe(options, { watch, preview });
+    }
+}
+
+async function buildAndServe(
+    options: BuildContextOptions,
+    { watch, preview = false }: { watch: boolean; preview?: boolean }
+): Promise<void> {
+    const config = await createViteConfig(options);
+    if (watch) {
+        await serve(config);
+        return;
+    }
+
+    await build(config);
+    if (preview) {
+        await serve({ ...config, preview: { port: config.server?.port, open: true } }, true);
+    }
+}
+
+async function serve(config: import('vite').InlineConfig, preview = false) {
+    const server = preview ? await previewServer(config) : await createServer(config);
+    if ('listen' in server) {
+        await server.listen();
+    }
+    server.printUrls();
+    server.bindCLIShortcuts({ print: true });
+    return server;
+}

package/src/cli/commands/{bundle-package.ts → bundle-webpack.ts}

@@ -1,11 +1,14 @@
-import { getTsConfig, log, logErrors } from '../../utils';
-import { bundle, getModuleType } from '../utils';
-import type { entry } from './registry/bundle-package';
+import { getTsConfig, log, logErrors, validateSharedDependencies } from '../../utils';
+import { bundleWebpack } from '../../webpack';
+import { getModuleType } from '../utils';
+import type { entry } from './registry/bundle-webpack';
 import { Command } from './types';
 
-export class BundlePackage extends Command<typeof entry> {
+export class BundleWebpack extends Command<typeof entry> {
     @logErrors
     async execute() {
+        validateSharedDependencies();
+
         const {
             config,
             codeCoverage,
@@ -21,13 +24,13 @@ export class BundlePackage extends Command<typeof entry> {
             );
         }
 
-        const options: Parameters<typeof bundle>[0] = {
+        const options: Parameters<typeof bundleWebpack>[0] = {
             ...(emitExposedDependencies ? {} : { config }),
             codeCoverage,
             emitExposedDependencies,
             useWatchConfig,
         };
 
-        await bundle({ buildStat: stat, ...options, watch });
+        await bundleWebpack({ buildStat: stat, ...options, watch });
     }
 }

package/src/cli/commands/install.ts

@@ -1,5 +1,6 @@
 import { execSync } from 'child_process';
-import { getStartupVersion, log, logErrors } from '../../utils';
+import { getStartupVersion } from '../../core';
+import { log, logErrors } from '../../utils';
 import type { entry } from './registry/install';
 import { Command } from './types';
 

package/src/cli/commands/mfe-check.ts

@@ -1,6 +1,7 @@
 import { getPackageManager } from '@servicetitan/install';
 import { getVersionMismatches } from '@servicetitan/startup-utils';
 import path from 'node:path';
+import { getExposedDependencies, Metadata } from '../../core';
 import {
     isWebComponent,
     loadSharedDependencies,
@@ -9,8 +10,6 @@ import {
     readJson,
     toArray,
 } from '../../utils';
-import { Metadata } from '../../webpack/configs/types';
-import { getExposedDependencies } from '../../webpack/configs/utils';
 import type { entry } from './registry/mfe-check';
 import { Command } from './types';
 

package/src/cli/commands/mfe-generate-metadata.ts

@@ -1,6 +1,7 @@
 import { getPackageManager } from '@servicetitan/install';
 import fs from 'node:fs';
 import path from 'node:path';
+import { buildMetadata } from '../../core';
 import {
     getFolders,
     getPackageData,
@@ -10,7 +11,6 @@ import {
     log,
     logErrors,
 } from '../../utils';
-import { buildMetadata } from '../../webpack/configs/utils/build-metadata';
 import type { entry } from './registry/mfe-generate-metadata';
 import { Command } from './types';
 

package/src/cli/commands/mfe-list.ts

@@ -140,7 +140,7 @@ export class MFEList extends Command<typeof entry> {
             return [..._, ...packageNames];
         }
 
-        return getPackages({ ignore: this.args.ignore, type: PackageType.Webpack })
+        return getPackages({ ignore: this.args.ignore, type: PackageType.Bundle })
             .filter(isWebComponent)
             .map(({ name }) => name)
             .sort((a, b) => collator.compare(a, b));

package/src/cli/commands/mfe-package-publish.ts

@@ -1,5 +1,6 @@
 import fs from 'fs';
 import path from 'path';
+import { EntryPoint, EntryPoints, Metadata } from '../../core';
 import {
     getBranchesConfigs,
     getFolders,
@@ -8,7 +9,6 @@ import {
     logErrors,
     readJson,
 } from '../../utils';
-import { EntryPoint, EntryPoints, Metadata } from '../../webpack/configs';
 import {
     DRY_RUN_PREFIX,
     getDefaultBuildVersion,

package/src/cli/commands/mfe-publish.ts

@@ -17,7 +17,7 @@ type MFEPublishOptions = (typeof entry)['options'] &
 export class MFEPublish extends Command<{ options: MFEPublishOptions }> {
     @logErrors
     async execute() {
-        const packages = getPackages({ scope: this.args.scope, type: PackageType.Webpack }).filter(
+        const packages = getPackages({ scope: this.args.scope, type: PackageType.Bundle }).filter(
             ({ location }) => isWebComponent(location)
         );
 

package/src/cli/commands/registry/__tests__/command-registry.test.ts

@@ -1,6 +1,7 @@
 import { commandRegistry } from '../command-registry';
 
 jest.mock('stylelint', () => ({ lint: jest.fn() }));
+jest.mock('../../bundle-vite', () => ({ BundleVite: class {} }));
 
 describe('[startup] commandRegistry', () => {
     test.each(Object.entries(commandRegistry))(

package/src/cli/commands/registry/build.ts

@@ -9,8 +9,10 @@ export const entry = defineEntry({
         codeCoverage: { boolean: true, description: 'Instrument code for coverage analysis?' },
         config: { string: true, hidden: true, description: 'Use specified configuration' },
         ignore: { array: true, string: true, description: 'Packages to skip' },
+        preview: { boolean: true, description: 'Start preview server after build?' },
         scope: { array: true, string: true, description: 'Packages to build' },
         stat: { boolean: true, description: 'Generate bundle report?' },
         useTsc: { boolean: true, description: 'Use tsc to compile packages?' },
+        useVite: { boolean: true, description: 'Use Vite to bundle packages?' },
     },
 } satisfies CommandEntry);

package/src/cli/commands/registry/bundle-vite.ts

@@ -0,0 +1,14 @@
+import type { CommandEntry } from '../types';
+import { defineEntry } from './define-entry';
+
+export const entry = defineEntry({
+    options: {
+        codeCoverage: { boolean: true, hidden: true },
+        exposedDependencies: { boolean: true, hidden: true },
+        preview: { boolean: true, hidden: true },
+        printConfig: { boolean: true, hidden: true },
+        stat: { boolean: true, hidden: true },
+        useWatchConfig: { boolean: true, hidden: true },
+        watch: { boolean: true, hidden: true },
+    },
+} satisfies CommandEntry);

package/src/cli/commands/registry/command-registry.ts

@@ -1,7 +1,8 @@
 import { CommandName } from '../../../utils';
 import { Command, CommandEntry, Newable } from '../types';
 import { entry as build } from './build';
-import { entry as bundlePackage } from './bundle-package';
+import { entry as bundleVite } from './bundle-vite';
+import { entry as bundleWebpack } from './bundle-webpack';
 import { entry as clean } from './clean';
 import { entry as convertEslintConfig } from './convert-eslint-config';
 import { entry as eslint } from './eslint';
@@ -63,7 +64,9 @@ function makeEntry<K extends CommandName, T extends CommandEntry>(
  */
 export const commandRegistry = {
     ...makeEntry(CommandName.build, build),
-    ...makeEntry(CommandName['bundle-package'], bundlePackage),
+    ...makeEntry(CommandName['bundle-package'], bundleWebpack, { path: 'bundle-webpack' }),
+    ...makeEntry(CommandName['bundle-vite'], bundleVite),
+    ...makeEntry(CommandName['bundle-webpack'], bundleWebpack),
     ...makeEntry(CommandName.clean, clean),
     ...makeEntry(CommandName['convert-eslint-config'], convertEslintConfig),
     ...makeEntry(CommandName.eslint, eslint, { className: 'ESLintCommand' }),

package/src/cli/commands/registry/start.ts

@@ -10,5 +10,6 @@ export const entry = defineEntry({
         ignore: { array: true, string: true, description: 'Packages to skip' },
         scope: { array: true, string: true, description: 'Packages to run and watch' },
         useTsc: { boolean: true, description: 'Use tsc to compile packages?' },
+        useVite: { boolean: true, description: 'Use Vite to bundle packages?' },
     },
 } satisfies CommandEntry);

package/src/cli/commands/start.ts

@@ -1,4 +1,4 @@
-import { getPackages, log, logErrors, PackageType } from '../../utils';
+import { getPackages, logErrors, PackageType } from '../../utils';
 import {
     checkArgs,
     compile,
@@ -19,7 +19,7 @@ enum StartProcesses {
     PreparePackageWatch,
     TypeCheck,
     BundleExposedDependencies,
-    BundlePackage,
+    Bundle,
 }
 
 export class Start extends Command<typeof entry> {
@@ -28,19 +28,21 @@ export class Start extends Command<typeof entry> {
         checkArgs(this.args, { obsolete: ['--esbuild', '--experimental-bundlers'] });
 
         const useTsc = this.args.useTsc;
+        const useVite = this.args.useVite;
+        const cmd = useVite ? 'startup bundle-vite' : 'startup bundle-package';
 
         const packages = getPackages({
             scope: this.args.scope,
             ignore: this.args.ignore,
-            type: [PackageType.TSC, PackageType.Webpack],
+            type: [PackageType.TSC, PackageType.Bundle],
         });
         if (packages.length === 0) {
             return;
         }
 
         const scope = packages.map(({ name }) => name);
-        const webpackScope = packages
-            .filter(({ type }) => type === PackageType.Webpack)
+        const bundleScope = packages
+            .filter(({ type }) => type === PackageType.Bundle)
             .map(({ name }) => name);
         const precompileScope = packages
             .filter(({ scripts }) => !!scripts?.precompile)
@@ -73,23 +75,8 @@ export class Start extends Command<typeof entry> {
 
                 const onComplete = new Promise<void>(resolve => {
                     let counter = 0;
-                    let timeout: NodeJS.Timeout;
 
-                    if (!useTsc) {
-                        /*
-                         * Running the timer as a fallback
-                         * In case there are no files in the package swc will not print out completion indicator
-                         */
-                        timeout = setTimeout(() => {
-                            log.warning(
-                                'Compilation timeout exceeded. Proceeding without waiting.'
-                            );
-                            resolve();
-                            unwatch();
-                        }, 30000);
-                    }
-
-                    const unwatch = watchStdout(
+                    watchStdout(
                         process,
                         useTsc
                             ? 'Initial tsc-compile-package task completed'
@@ -99,7 +86,6 @@ export class Start extends Command<typeof entry> {
 
                             if (counter === scope.length) {
                                 resolve();
-                                clearTimeout(timeout);
                             }
                         }
                     );
@@ -136,12 +122,12 @@ export class Start extends Command<typeof entry> {
         processTree.add(
             StartProcesses.BundleExposedDependencies,
             () => {
-                if (webpackScope.length === 0) {
+                if (bundleScope.length === 0) {
                     return Promise.resolve();
                 }
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
-                    'scope': webpackScope,
+                    cmd,
+                    'scope': bundleScope,
                     'parallel': true,
                     'stream': true,
                     '--': ['--exposed-dependencies', '--use-watch-config'],
@@ -150,14 +136,14 @@ export class Start extends Command<typeof entry> {
             { dependsOn: [StartProcesses.Compile, StartProcesses.PreparePackage] }
         );
         processTree.add(
-            StartProcesses.BundlePackage,
+            StartProcesses.Bundle,
             () => {
-                if (webpackScope.length === 0) {
+                if (bundleScope.length === 0) {
                     return Promise.resolve();
                 }
                 return lernaExec({
-                    'cmd': 'startup bundle-package',
-                    'scope': webpackScope,
+                    cmd,
+                    'scope': bundleScope,
                     'parallel': true,
                     'stream': true,
                     '--': [

package/src/cli/index.ts

@@ -4,7 +4,8 @@ import kebabCase from 'lodash.kebabcase';
 import path from 'path';
 import yargs from 'yargs';
 import { hideBin } from 'yargs/helpers';
-import { CommandName, getStartupVersion, log } from '../utils';
+import { getStartupVersion } from '../core';
+import { CommandName, log } from '../utils';
 import { commandRegistry } from './commands/registry';
 import type { CommandOptions } from './commands/types';
 import { checkStartupLocation, setNodeOptions } from './utils';

package/src/cli/tasks/swc-compile-package/__tests__/swc-compile-package.test.ts

@@ -8,7 +8,7 @@ import { SwcCompilePackage } from '../swc-compile-package';
 
 jest.mock('fs', () => fs);
 jest.mock('@swc/cli', () => ({
-    swcDir: jest.fn(),
+    swcDir: jest.fn(() => Promise.resolve()),
 }));
 
 jest.mock('../../../../utils', () => ({
@@ -191,9 +191,29 @@ describe(`[startup] ${SwcCompilePackage.name} task`, () => {
         );
     });
 
+    /*
+     * This test covers the case where swcDir resolves without calling either callback,
+     * which will happen in watch mode when no files are compiled
+     */
+    test('logs completion message', async () => {
+        await subject();
+
+        expect(log.info).toHaveBeenCalledWith(
+            expect.stringMatching('swc-compile-package task completed in 0ms')
+        );
+    });
+
     describe('in watch mode', () => {
         beforeEach(() => (watch = true));
 
+        test('logs completion message', async () => {
+            await subject();
+
+            expect(log.info).toHaveBeenCalledWith(
+                expect.stringMatching('Initial swc-compile-package task completed in 0ms')
+            );
+        });
+
         test('calls swcDir with watch=true', () => {
             subject();
 

package/src/cli/tasks/swc-compile-package/swc-cli.d.ts

@@ -18,5 +18,5 @@ declare module '@swc/cli' {
 
     type SwcOptions = NonNullable<Options['swcOptions']>;
 
-    function swcDir(options: Options): void;
+    function swcDir(options: Options): Promise<void>;
 }

package/src/cli/tasks/swc-compile-package/swc-compile-package.ts

@@ -25,17 +25,18 @@ export class SwcCompilePackage extends Task {
         /* istanbul ignore next: debug only */
         log.debug('swc-compile-package:config', () => JSON.stringify(config, null, 2));
 
+        let callbackFired = false;
+
         return new Promise((resolve, reject) => {
             swcDir({
                 ...config,
                 callbacks: {
                     onSuccess: (e: { duration: number }) => {
+                        callbackFired = true;
                         this.logCompletionResults(this.taskTimer.add(e.duration));
-                        if (!this.watch) {
-                            resolve();
-                        }
                     },
                     onFail: (e: { duration: number; reasons: Map<string, string> }) => {
+                        callbackFired = true;
                         log.text([...e.reasons.values()][0]);
                         this.logCompletionResults(this.taskTimer.add(e.duration));
                         if (!this.watch) {
@@ -43,6 +44,11 @@ export class SwcCompilePackage extends Task {
                         }
                     },
                 },
+            }).then(() => {
+                if (!callbackFired) {
+                    this.logCompletionResults(this.taskTimer.add(0));
+                }
+                resolve();
             });
         });
     }

package/src/cli/tasks/tsc-compile/tsc-compile.ts

@@ -31,7 +31,7 @@ export class TscCompile extends CliTask {
         const packages = getPackages({
             scope: this.args.scope,
             ignore: this.args.ignore,
-            type: [PackageType.TSC, PackageType.Webpack],
+            type: [PackageType.TSC, PackageType.Bundle],
         });
 
         const tsConfigs = collapsePackages(packages).map(({ location }) => getTsConfig(location));