@servicetitan/startup 36.3.0 → 36.4.0

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));

package/src/cli/utils/copy-files.ts

@@ -7,7 +7,7 @@ import { compileLess } from './compile-less';
 import { compileSass } from './compile-sass';
 
 const assetExtensions = ['eot', 'gif', 'jpg', 'otf', 'png', 'svg', 'ttf', 'woff', 'woff2'];
-const resourceExtensions = ['json'];
+const resourceExtensions = ['html', 'json'];
 export const styleExtensions = ['css', 'less', 'scss'];
 const styleTypeDefinitionExtensions = styleExtensions.map(ext => `${ext}.d.ts`);
 

package/src/cli/utils/index.ts

@@ -1,4 +1,3 @@
-export * from './bundle';
 export * from './check-args';
 export * from './check-startup-location';
 export * from './cli-git';

package/src/core/__tests__/get-cdn-path.test.ts

@@ -0,0 +1,27 @@
+import { getCdnPath } from '../get-cdn-path';
+import { BuildContext } from '../types';
+
+describe(`[startup] ${getCdnPath.name}`, () => {
+    let context: Partial<BuildContext>;
+
+    beforeAll(() => (process.env.CLIENT_CDN_PATH = 'foo'));
+    afterAll(() => delete process.env.CLIENT_CDN_PATH);
+
+    beforeEach(() => {
+        context = { build: { name: '', isProduction: true } };
+    });
+
+    const subject = () => getCdnPath(context as any);
+
+    test('returns process.env.CLIENT_CDN_PATH', () => {
+        expect(subject()).toEqual(process.env.CLIENT_CDN_PATH);
+    });
+
+    describe('when not production', () => {
+        beforeEach(() => (context.build!.isProduction = false));
+
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    });
+});

package/src/core/__tests__/get-output-path.test.ts

@@ -0,0 +1,64 @@
+import path from 'path';
+import { getBundleType } from '../get-bundle-type';
+import { getOutputPath } from '../get-output-path';
+import { BuildContext } from '../types';
+
+jest.mock('../get-bundle-type', () => ({
+    getBundleType: jest.fn(),
+}));
+
+describe(`[startup] ${getOutputPath.name}`, () => {
+    const destination = 'dist';
+    let context: BuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        context = {
+            build: {},
+            package: { destination },
+        } as BuildContext;
+        jest.mocked(getBundleType).mockReturnValue(undefined);
+    });
+
+    const subject = () => getOutputPath(context);
+
+    test('returns default path under cwd', () => {
+        expect(subject()).toBe(path.join(process.cwd(), destination, 'bundle'));
+    });
+
+    describe('when getBundleType returns a subdir', () => {
+        const subdir = 'full';
+
+        beforeEach(() => {
+            jest.mocked(getBundleType).mockReturnValue(subdir);
+        });
+
+        test('appends subdir to default path', () => {
+            expect(subject()).toBe(path.join(process.cwd(), destination, 'bundle', subdir));
+        });
+    });
+
+    describe('when outputBasePath is set', () => {
+        const outputBasePath = '/custom/out';
+
+        beforeEach(() => {
+            context.build.outputBasePath = outputBasePath;
+        });
+
+        test('uses outputBasePath as base', () => {
+            expect(subject()).toBe(path.normalize(outputBasePath));
+        });
+
+        describe('with a subdir from getBundleType', () => {
+            const subdir = 'shared';
+
+            beforeEach(() => {
+                jest.mocked(getBundleType).mockReturnValue(subdir);
+            });
+
+            test('appends subdir to outputBasePath', () => {
+                expect(subject()).toBe(path.join(outputBasePath, subdir));
+            });
+        });
+    });
+});

package/src/core/check-resource/__tests__/check-resource.test.ts

@@ -0,0 +1,58 @@
+import { BuildContext } from '../../types';
+import { checkResource } from '../check-resource';
+import { getPeerDependencyMeta } from '../get-peer-dependency-meta';
+import { isManagedReactDomClientDependency } from '../is-managed-react-dom-client-dependency';
+
+jest.mock('../is-managed-react-dom-client-dependency');
+jest.mock('../get-peer-dependency-meta');
+
+describe(`${checkResource.name}`, () => {
+    const importer = 'node_modules/web-components/dist';
+    let context: BuildContext;
+    let resource: string;
+    let peerDependenciesMeta: ReturnType<typeof getPeerDependencyMeta>;
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+        jest.mocked(getPeerDependencyMeta).mockImplementation(() => peerDependenciesMeta);
+        peerDependenciesMeta = undefined;
+        resource = '@servicetitan/foo';
+        context = { package: { dependencies: {} } } as BuildContext;
+    });
+
+    const subject = () => checkResource(context)({ resource, importer });
+
+    function itReturns(value: boolean) {
+        test(`returns ${JSON.stringify(value)}`, () => expect(subject()).toBe(value));
+    }
+
+    itReturns(false);
+
+    describe('when resource is optional peer dependency', () => {
+        beforeEach(() => (peerDependenciesMeta = { optional: true }));
+
+        itReturns(true);
+
+        describe('when resource is package dependency', () => {
+            beforeEach(() => (context.package.dependencies[resource] = '*'));
+
+            itReturns(false);
+        });
+    });
+
+    describe('when resource is managed react-dom client dependency', () => {
+        beforeEach(() => jest.mocked(isManagedReactDomClientDependency).mockReturnValue(true));
+
+        describe('when resource is present', () => {
+            beforeEach(() => (resource = 'fs'));
+
+            itReturns(false);
+        });
+
+        describe('when resource is not present', () => {
+            beforeEach(() => (resource = 'foo'));
+
+            itReturns(true);
+        });
+    });
+});

package/src/{webpack/configs/plugins/ignore-plugin → core/check-resource}/__tests__/get-package-json.test.ts

@@ -8,6 +8,7 @@ describe(`[startup] ${getPackageJson.name}`, () => {
     let context: string;
 
     beforeEach(() => {
+        getPackageJson.cache.clear?.();
         context = 'node_modules/foo/dist';
         vol.fromNestedJSON({
             // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -39,7 +40,7 @@ describe(`[startup] ${getPackageJson.name}`, () => {
 
     describe('when context is not in node_modules', () => {
         beforeEach(() => {
-            context = 'foo/dist';
+            context = '/foo/dist';
             vol.fromNestedJSON({
                 foo: { 'package.json': JSON.stringify(packageJson) },
             });

package/src/core/check-resource/__tests__/get-peer-dependency-meta.test.ts

@@ -0,0 +1,51 @@
+import { getPackageJson } from '../get-package-json';
+import { getPeerDependencyMeta } from '../get-peer-dependency-meta';
+
+jest.mock('../get-package-json');
+
+describe(`[startup] ${getPeerDependencyMeta.name}`, () => {
+    const meta = { optional: true };
+    let importer: string;
+    let resource: string;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        importer = 'node_modules/pkg/dist';
+        resource = '@scope/a';
+        jest.mocked(getPackageJson).mockImplementation(() => ({
+            peerDependenciesMeta: { [resource]: meta },
+        }));
+    });
+
+    const subject = () => getPeerDependencyMeta({ resource, importer });
+
+    function itReturnsUndefined() {
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    }
+
+    test('returns peerDependenciesMeta for resource', () => {
+        expect(subject()).toEqual(meta);
+    });
+
+    describe('when resource is not a package name', () => {
+        beforeEach(() => (resource = './local'));
+
+        itReturnsUndefined();
+    });
+
+    describe('when peerDependenciesMeta omits resource', () => {
+        beforeEach(() => {
+            jest.mocked(getPackageJson).mockReturnValue({ peerDependenciesMeta: {} });
+        });
+
+        itReturnsUndefined();
+    });
+
+    describe('when package.json is not found', () => {
+        beforeEach(() => jest.mocked(getPackageJson).mockReturnValue(undefined));
+
+        itReturnsUndefined();
+    });
+});

package/src/core/check-resource/__tests__/is-managed-react-dom-client-dependency.test.ts

@@ -0,0 +1,35 @@
+import { isManagedReactDomClientDependency } from '../is-managed-react-dom-client-dependency';
+
+describe(`[startup] ${isManagedReactDomClientDependency.name}`, () => {
+    const subject = (...args: Parameters<typeof isManagedReactDomClientDependency>) =>
+        isManagedReactDomClientDependency(...args);
+
+    describe.each([
+        {
+            resource: 'react-dom/client',
+            importers: [
+                '@servicetitan/web-components',
+                'uikit/packages/web-components/dist',
+                '@servicetitan/ko-bridge',
+                'uikit/packages/ko-bridge/dist',
+            ],
+        },
+    ])('with dependency "$resource"', ({ resource, importers }) => {
+        importers.forEach(importer => {
+            test(`with importer ${importer}, returns true`, () => {
+                expect(subject({ importer, resource })).toBe(true);
+            });
+        });
+    });
+
+    describe.each([
+        { resource: 'react-dom', importers: ['@servicetitan/web-components'] },
+        { resource: 'react-dom/client', importers: ['@servicetitan/foo'] },
+    ])('with dependency "$resource"', ({ resource, importers }) => {
+        importers.forEach(importer => {
+            test(`with importer ${importer}, returns false`, () => {
+                expect(subject({ importer, resource })).toBe(false);
+            });
+        });
+    });
+});

package/src/core/check-resource/check-resource.ts

@@ -0,0 +1,30 @@
+import { log } from '../../utils';
+import { BuildContext } from '../types';
+import { getPeerDependencyMeta } from './get-peer-dependency-meta';
+import { isManagedReactDomClientDependency } from './is-managed-react-dom-client-dependency';
+import type { CheckerArgs } from './types';
+
+export function checkResource(context: BuildContext) {
+    return function ({ resource, importer }: CheckerArgs): boolean {
+        if (
+            !context.package.dependencies[resource] &&
+            getPeerDependencyMeta({ resource, importer })?.optional
+        ) {
+            log.debug('check-resource', `${JSON.stringify({ resource, importer })} => true`);
+            return true;
+        }
+
+        /**
+         * react-dom/client isn't an explicit dependency, so the peerDependenciesMeta
+         * path above can't catch it.
+         */
+        if (isManagedReactDomClientDependency({ resource, importer })) {
+            try {
+                require.resolve(resource);
+            } catch {
+                return true;
+            }
+        }
+        return false;
+    };
+}

package/src/core/check-resource/get-package-json.ts

@@ -0,0 +1,33 @@
+import fs from 'fs';
+import memoize from 'lodash.memoize';
+import path from 'path';
+import { log, readJson } from '../../utils';
+
+const containsExternalPackages = /[\\/](node_modules|\.yalc|ignore-plugin-test)([\\/]|$)/;
+const isNodeModules = /(node_modules|\.yalc)/;
+
+/**
+ * Find the nearest package.json for a file path by walking up the directory tree.
+ * Only searches paths inside node_modules or .yalc because the ignore plugin only
+ * needs to suppress missing optional peer dependencies from third-party packages.
+ * ignore-plugin-test is for local integration tests.
+ *
+ * Memoized to avoid re-walking parent directories on every import resolution.
+ */
+export const getPackageJson = memoize(function getPackageJson(context: string) {
+    const fullPath = path.resolve(context);
+    if (!containsExternalPackages.test(fullPath)) {
+        return;
+    }
+
+    for (let dir = path.dirname(fullPath); dir !== path.dirname(dir); dir = path.dirname(dir)) {
+        if (isNodeModules.test(path.basename(dir))) {
+            break;
+        }
+        const packageJsonFile = path.join(dir, 'package.json');
+        if (fs.existsSync(packageJsonFile)) {
+            log.debug('get-package-json', `${context} => ${packageJsonFile}`);
+            return readJson<Record<string, any>>(packageJsonFile);
+        }
+    }
+});

package/src/core/check-resource/get-peer-dependency-meta.ts

@@ -0,0 +1,15 @@
+import { getPackageJson } from './get-package-json';
+import type { CheckerArgs } from './types';
+
+interface PeerDependencyMeta {
+    optional?: boolean;
+}
+
+export function getPeerDependencyMeta({
+    resource,
+    importer,
+}: CheckerArgs): PeerDependencyMeta | undefined {
+    return /^[@a-z]/.test(resource)
+        ? getPackageJson(importer)?.peerDependenciesMeta?.[resource]
+        : undefined;
+}

package/src/core/check-resource/index.ts

@@ -0,0 +1,2 @@
+export { checkResource } from './check-resource';
+export type { CheckerArgs } from './types';

package/src/core/check-resource/is-managed-react-dom-client-dependency.ts

@@ -0,0 +1,13 @@
+import type { CheckerArgs } from './types';
+
+/**
+ * Matches both published paths (@servicetitan/ko-bridge, @servicetitan/web-components) and
+ * in-repo paths (packages/ko-bridge, packages/web-components) so the check works whether the
+ * importer is installed from npm/yalc or resolved locally during a uikit-internal build.
+ */
+export function isManagedReactDomClientDependency({ importer, resource }: CheckerArgs) {
+    return (
+        resource === 'react-dom/client' &&
+        /(@servicetitan|packages)\/(ko-bridge|web-components)/.test(importer)
+    );
+}

package/src/core/check-resource/types.ts

@@ -0,0 +1,4 @@
+export interface CheckerArgs {
+    resource: string;
+    importer: string;
+}

package/src/core/constants.ts

@@ -0,0 +1,16 @@
+export const bundleConstants = {
+    cssModules: {
+        classnameTemplate: {
+            production: '[local]__[hash:base64:5]',
+            development: '[path][name]__[local]',
+        },
+        localsConvention: 'camelCaseOnly',
+    },
+    less: {
+        math: 'always',
+    },
+    mode: {
+        production: 'production',
+        development: 'development',
+    },
+} as const;