@servicetitan/startup 36.3.1 → 37.0.0

package/src/cli/commands/build.ts

@@ -1,5 +1,5 @@
 import { getPackages, logErrors, PackageType } from '../../utils';
-import { checkArgs, compile, lernaExec, ProcessTree, typeCheck } from '../utils';
+import { checkArgs, compile, getBundleCommand, lernaExec, ProcessTree, typeCheck } from '../utils';
 import { kendoUILicense } from './kendo-ui-license';
 import type { entry } from './registry/build';
 import { Command } from './types';
@@ -11,7 +11,7 @@ enum BuildProcesses {
     PreparePackage,
     TypeCheck,
     BundleExposedDependencies,
-    BundlePackage,
+    Bundle,
 }
 
 export class Build extends Command<typeof entry> {
@@ -24,7 +24,7 @@ export class Build extends Command<typeof entry> {
         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,9 +35,10 @@ 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 bundleCmd = getBundleCommand(this.args);
         const precompileScope = packages
             .filter(({ scripts }) => !!scripts?.precompile)
             .map(({ name }) => name);
@@ -72,12 +73,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': bundleCmd,
+                    'scope': bundleScope,
                     'parallel': true,
                     'stream': true,
                     '--': ['--exposed-dependencies'],
@@ -92,20 +93,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': bundleCmd,
+                    'scope': bundleScope,
                     'stream': true,
                     '--': [
                         ...[this.args.config ? `--config "${this.args.config}"` : undefined],
                         ...[this.args.codeCoverage ? '--code-coverage' : undefined],
                         ...[this.args.stat ? '--stat' : undefined],
+                        ...[this.args.preview ? '--preview' : undefined],
                     ].filter(item => !!item) as string[],
                 });
             },

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

@@ -0,0 +1,95 @@
+import { build, createServer, preview as previewServer } from 'vite';
+import { BuildContextOptions, getBuildName, stringifyConfig } from '../../core';
+import {
+    hasHeadlessBundle,
+    isExposeSharedDependencies,
+    isViteDevServerDisabled,
+    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,
+            buildStat: this.args.stat,
+        };
+
+        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) {
+        if (isViteDevServerDisabled()) {
+            /*
+             * Create a development build with no HTTP server, using Vite's watcher to rebuild
+             * on change. `vite build` forces NODE_ENV to production regardless of `mode`, because
+             * Vite treats the two as independent. Set NODE_ENV directly to get a development
+             * build; `mode` alone does not change it.
+             */
+            process.env.NODE_ENV = 'development';
+            await build({ ...config, build: { ...config.build, watch: {} } });
+            return;
+        }
+        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

@@ -5,12 +5,19 @@ export const entry = defineEntry({
     description: 'Build project for production',
     greedy: true,
     options: {
+        bundler: {
+            choices: ['vite', 'webpack'] as const,
+            description: 'Bundler',
+            defaultDescription: 'webpack',
+        },
         cdnPath: { string: true, description: 'Base url for application assets' },
         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, hidden: true, description: 'Deprecated: use --bundler=vite' },
     },
 } 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,8 @@ function makeEntry<K extends CommandName, T extends CommandEntry>(
  */
 export const commandRegistry = {
     ...makeEntry(CommandName.build, build),
-    ...makeEntry(CommandName['bundle-package'], bundlePackage),
+    ...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

@@ -5,10 +5,16 @@ export const entry = defineEntry({
     description: 'Run project in development mode',
     greedy: true,
     options: {
+        bundler: {
+            choices: ['vite', 'webpack'] as const,
+            description: 'Bundler',
+            defaultDescription: 'webpack',
+        },
         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' },
         scope: { array: true, string: true, description: 'Packages to run and watch' },
         useTsc: { boolean: true, description: 'Use tsc to compile packages?' },
+        useVite: { boolean: true, hidden: true, description: 'Deprecated: use --bundler=vite' },
     },
 } satisfies CommandEntry);

package/src/cli/commands/review/rules/__tests__/require-compatible-typescript.test.ts

@@ -0,0 +1,127 @@
+import chalk from 'chalk';
+import { execSync } from 'node:child_process';
+import { expectCalls, MockPackageManager } from '../../__mocks__';
+import { FixCategory, PackageError } from '../../types';
+import { mockProject } from '../__mocks__';
+import { RequireCompatibleTypescript } from '../require-compatible-typescript';
+
+jest.mock('child_process', () => ({ execSync: jest.fn() }));
+
+const STARTUP = '@servicetitan/startup';
+const TYPESCRIPT = 'typescript';
+const REQUIRED_VERSION = '6.0.3';
+const OLDER_VERSION = '5.9.3';
+
+describe(`[startup] Review ${RequireCompatibleTypescript.name}`, () => {
+    const id = 'require-compatible-typescript';
+    const rule = new RequireCompatibleTypescript();
+    const mockPackageManager = new MockPackageManager();
+
+    let requiredVersion: string | undefined;
+    let actualVersion: string | undefined;
+
+    beforeAll(() => {
+        jest.spyOn(mockPackageManager, 'getDeclaredVersion').mockImplementation(
+            ({ declaredBy, dependency }) =>
+                declaredBy === STARTUP && dependency === TYPESCRIPT ? requiredVersion : undefined
+        );
+        jest.spyOn(mockPackageManager, 'getResolvedVersion').mockImplementation(({ dependency }) =>
+            dependency === TYPESCRIPT ? actualVersion : undefined
+        );
+    });
+
+    beforeEach(() => {
+        requiredVersion = REQUIRED_VERSION;
+        actualVersion = undefined;
+        mockPackageManager.command = 'npm';
+        jest.clearAllMocks();
+    });
+
+    const project = () => mockProject({ packageManager: mockPackageManager as any });
+
+    const subject = () => rule.run(project());
+
+    const fixSubject = () => rule.fix!(subject()!);
+
+    function itReturnsNothing() {
+        test('returns nothing', () => {
+            expect(subject()).toBeUndefined();
+        });
+    }
+
+    function itReturnsError() {
+        test('returns error', () => {
+            expect(subject()).toEqual({
+                id,
+                message: `project's top-level "${TYPESCRIPT}" is older than the version required by ${STARTUP}`,
+                details: `${chalk.yellow(actualVersion)} is older than ${requiredVersion}`,
+                fixable: FixCategory.lockFile,
+                location: mockPackageManager.lockFileName,
+                data: { actualVersion, requiredVersion },
+            } satisfies PackageError);
+        });
+    }
+
+    itReturnsNothing();
+
+    describe('when startup is not a dependency', () => {
+        beforeEach(() => {
+            requiredVersion = undefined;
+            actualVersion = REQUIRED_VERSION;
+        });
+
+        itReturnsNothing();
+    });
+
+    describe('when top-level typescript is older than startup requires', () => {
+        beforeEach(() => (actualVersion = OLDER_VERSION));
+
+        itReturnsError();
+
+        test('fixes error', () => {
+            fixSubject();
+
+            expectCalls(
+                ...[
+                    `npm pkg set dependencies["${TYPESCRIPT}"]="${REQUIRED_VERSION}"`,
+                    'npx @servicetitan/install --fix --quiet',
+                    `npm pkg delete dependencies["${TYPESCRIPT}"]`,
+                ].map(command => [execSync, command, { stdio: 'inherit' }])
+            );
+        });
+
+        describe('when package manager is pnpm', () => {
+            beforeEach(() => (mockPackageManager.command = 'pnpm'));
+
+            itReturnsNothing();
+        });
+    });
+
+    describe('when top-level typescript equals the version startup requires', () => {
+        beforeEach(() => (actualVersion = REQUIRED_VERSION));
+
+        itReturnsNothing();
+    });
+
+    describe('when top-level typescript is newer than startup requires', () => {
+        beforeEach(() => (actualVersion = '6.1.0'));
+
+        itReturnsNothing();
+    });
+
+    describe('when startup declares typescript as a range', () => {
+        beforeEach(() => (requiredVersion = '^6.0.0'));
+
+        describe('when top-level typescript is below the range floor', () => {
+            beforeEach(() => (actualVersion = OLDER_VERSION));
+
+            itReturnsError();
+        });
+
+        describe('when top-level typescript is at the range floor', () => {
+            beforeEach(() => (actualVersion = '6.0.0'));
+
+            itReturnsNothing();
+        });
+    });
+});

package/src/cli/commands/review/rules/index.ts

@@ -6,6 +6,7 @@ import { NoTypescriptEntryPoint } from './no-typescript-entry-point';
 import { PreferOpenEndedPeerDependencies } from './prefer-open-ended-peer-dependencies';
 import { RequireAllReactDependencies } from './require-all-react-dependencies';
 import { RequireCompatibleLaunchDarklySdk } from './require-compatible-launch-darkly-sdk';
+import { RequireCompatibleTypescript } from './require-compatible-typescript';
 import { RequireExplicitSideEffects } from './require-explicit-side-effects';
 import { RequireNpmrc } from './require-npmrc';
 import { RequireOneAnvilUikitContribVersion } from './require-one-anvil-uikit-contrib-version';
@@ -24,6 +25,7 @@ export const rules: PackageRule[] = [
     new RequireOneUikitVersion(),
     new RequireProjectVersionInRootNodeModules(),
     new RequireCompatibleLaunchDarklySdk(),
+    new RequireCompatibleTypescript(),
     new NoDeprecatedContentBase(),
     new NoDirectPeerDependencies(),
     new NoDeprecatedStartupInstall(),

package/src/cli/commands/review/rules/require-compatible-typescript.ts

@@ -0,0 +1,64 @@
+import chalk from 'chalk';
+import { execSync } from 'node:child_process';
+import { lt, minVersion, valid } from 'semver';
+import { FixCategory, PackageError, PackageRule, Project } from '../types';
+
+const STARTUP = '@servicetitan/startup';
+const TYPESCRIPT = 'typescript';
+
+interface ErrorData {
+    actualVersion: string;
+    requiredVersion: string;
+}
+
+type RuleError = PackageError<ErrorData>;
+
+export class RequireCompatibleTypescript implements PackageRule {
+    get id() {
+        return 'require-compatible-typescript';
+    }
+
+    run({ packageManager }: Project): RuleError | undefined {
+        if (packageManager.command === 'pnpm') {
+            return;
+        }
+
+        const requiredVersion = packageManager.getDeclaredVersion({
+            workspacePackage: '',
+            declaredBy: STARTUP,
+            dependency: TYPESCRIPT,
+        });
+        const actualVersion = packageManager.getResolvedVersion({
+            workspacePackage: '',
+            dependency: TYPESCRIPT,
+        });
+        if (!(requiredVersion && actualVersion)) {
+            return;
+        }
+
+        const floor = minVersion(requiredVersion);
+        if (floor && valid(actualVersion) && lt(actualVersion, floor)) {
+            return {
+                id: this.id,
+                message: `project's top-level "${TYPESCRIPT}" is older than the version required by ${STARTUP}`,
+                details: `${chalk.yellow(actualVersion)} is older than ${requiredVersion}`,
+                fixable: FixCategory.lockFile,
+                location: packageManager.lockFileName,
+                data: { actualVersion, requiredVersion },
+            };
+        }
+    }
+
+    fix({ data }: RuleError) {
+        const { requiredVersion } = data ?? {};
+        if (!requiredVersion) {
+            return;
+        }
+
+        [
+            `npm pkg set dependencies["${TYPESCRIPT}"]="${requiredVersion}"`,
+            'npx @servicetitan/install --fix --quiet',
+            `npm pkg delete dependencies["${TYPESCRIPT}"]`,
+        ].forEach(command => execSync(command, { stdio: 'inherit' }));
+    }
+}