@servicetitan/startup 38.0.0 → 38.2.0

package/src/utils/exit-when-parent-exits.ts

@@ -0,0 +1,33 @@
+import { log } from './log';
+
+const POLL_INTERVAL_MS = 1000;
+
+/**
+ * Exits current process when the parent identified by process.env.STARTUP_PARENT_PID
+ * is no longer running. Use `callback` to override default behavior.
+ */
+export function exitWhenParentExits(command: string, callback: () => void = () => process.exit(0)) {
+    const parentPid = Number(process.env.STARTUP_PARENT_PID);
+    if (!parentPid) {
+        return;
+    }
+
+    const interval = setInterval(() => {
+        if (!isRunning(parentPid)) {
+            clearInterval(interval);
+            log.info(`${command} shutting down`);
+            callback();
+        }
+    }, POLL_INTERVAL_MS);
+    interval.unref();
+}
+
+function isRunning(pid: number) {
+    try {
+        // signal 0 sends nothing; it only checks whether the pid exists
+        process.kill(pid, 0);
+        return true;
+    } catch {
+        return false;
+    }
+}

package/src/utils/find-up.ts

@@ -1,7 +1,7 @@
 import path from 'node:path';
 
-export function findUp<T>(callback: (directory: string) => T | undefined) {
-    let directory = path.resolve('./');
+export function findUp<T>(callback: (directory: string) => T | undefined, from = './') {
+    let directory = path.resolve(from);
     do {
         const result = callback(directory);
         if (result) {

package/src/utils/get-configuration.ts

@@ -8,6 +8,7 @@ import type svgr from 'vite-plugin-svgr';
 import type { ViteUserConfig } from 'vitest/config';
 import type { Configuration as WebpackDevServerConfiguration } from 'webpack-dev-server';
 import type { ReviewConfiguration } from '../cli/commands/review';
+import { bundleConstants } from '../core/constants';
 import { getFolders } from './get-folders';
 import { getPackageName } from './get-package-name';
 import { log } from './log';
@@ -18,7 +19,7 @@ type VitePluginSvgrOptions = NonNullable<Parameters<typeof svgr>[0]>;
 
 type ElementType<T> = T extends readonly (infer ElementType)[] ? ElementType : never;
 
-export type Bundler = 'vite' | 'webpack';
+export type Bundler = ElementType<typeof bundleConstants.bundlers>;
 
 export const allowedWebpackDevServerOptions = ['headers', 'port', 'proxy', 'static'] as const;
 
@@ -69,6 +70,7 @@ export interface NodeConfiguration {
 /* eslint-disable @typescript-eslint/naming-convention */
 export enum CommandName {
     'build' = 'build',
+    'bundle-package' = 'bundle-package',
     'bundle-vite' = 'bundle-vite',
     'bundle-webpack' = 'bundle-webpack',
     'clean' = 'clean',
@@ -144,7 +146,7 @@ interface WebComponentOptions {
     branches?: Record<string, WebComponentBranchConfigs>;
 }
 
-type Configuration = {
+export type Configuration = {
     'bundler'?: Bundler;
     'jest'?: JestConfiguration;
     'legacy'?: boolean;
@@ -277,10 +279,17 @@ export function isViteDevServerDisabled() {
     return getViteConfiguration().devServer === false;
 }
 
-export function isExposeSharedDependencies() {
+export function getSharedDependencies(locationOrJson?: LocationOrJson) {
     return (
-        (getConfiguration()['expose-shared-dependencies'] ??
-            getWebpackConfiguration()['expose-shared-dependencies']) === true
+        getConfiguration(locationOrJson)['shared-dependencies'] ??
+        getWebpackConfiguration(locationOrJson)['shared-dependencies']
+    );
+}
+
+export function isExposeSharedDependencies(locationOrJson?: LocationOrJson) {
+    return (
+        (getConfiguration(locationOrJson)['expose-shared-dependencies'] ??
+            getWebpackConfiguration(locationOrJson)['expose-shared-dependencies']) === true
     );
 }
 

package/src/utils/index.ts

@@ -1,3 +1,4 @@
+export * from './exit-when-parent-exits';
 export * from './find-packages';
 export * from './find-up';
 export * from './format-duration';

package/src/vite/__tests__/build-shared-dependencies.test.ts

@@ -18,11 +18,14 @@ jest.mock('../../core', () => ({
 jest.mock('../config', () => ({
     createViteConfig: jest.fn(),
 }));
+jest.mock('../plugins', () => ({
+    cleanPlugin: jest.fn(() => ({ name: 'clean' })),
+}));
 jest.mock('../plugins/shared-dependencies-plugin', () => ({
     sharedDependenciesPlugin: jest.fn(() => ({ name: 'shared-dependencies' })),
 }));
 
-describe(buildSharedDependencies.name, () => {
+describe(`[startup] ${buildSharedDependencies.name}`, () => {
     const viteConfig: any = {};
     let options: any;
     let context: BuildContext;
@@ -52,17 +55,48 @@ describe(buildSharedDependencies.name, () => {
         });
     });
 
-    test('passes shared dependencies and metadata directory to plugin', async () => {
+    test.each(['clean', 'shared-dependencies'])('registers the %s plugin', async name => {
         await subject();
 
-        expect(sharedDependenciesPlugin).toHaveBeenCalledWith(
+        expect(build).toHaveBeenCalledWith(
             expect.objectContaining({
-                dependencies: context.package.sharedDependencies,
-                metadataDir: context.package.destination,
+                plugins: expect.arrayContaining([{ name }]),
             })
         );
     });
 
+    test('passes dependencies and metadataDir to shared-dependencies plugin', async () => {
+        await subject();
+
+        expect(sharedDependenciesPlugin).toHaveBeenCalledWith({
+            css: {},
+            dependencies: context.package.sharedDependencies,
+            metadataDir: context.package.destination,
+        });
+    });
+
+    describe('when package depends on design system', () => {
+        beforeEach(() => {
+            context.package.sharedDependencies['@servicetitan/design-system'] = 'DesignSystem';
+        });
+
+        test('passes design system css to shared-dependencies plugin', async () => {
+            await subject();
+
+            expect(sharedDependenciesPlugin).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    css: {
+                        'design-system': [
+                            '@servicetitan/tokens/core/tokens.css',
+                            '@servicetitan/anvil-fonts/dist/css/anvil-fonts.css',
+                            '@servicetitan/design-system/dist/system.min.css',
+                        ],
+                    },
+                })
+            );
+        });
+    });
+
     test('builds with development mode', async () => {
         await subject();
 

package/src/vite/build-shared-dependencies.ts

@@ -7,6 +7,7 @@ import {
     resolveOutputPath,
 } from '../core';
 import { createViteConfig } from './config';
+import { cleanPlugin } from './plugins';
 import { sharedDependenciesPlugin } from './plugins/shared-dependencies-plugin';
 
 export async function buildSharedDependencies(options: BuildContextOptions) {
@@ -20,7 +21,7 @@ export async function buildSharedDependencies(options: BuildContextOptions) {
             legalComments: 'none',
         },
         mode: getMode(context),
-        plugins: [getSharedDependenciesPlugin(context)],
+        plugins: [cleanPlugin(context), getSharedDependenciesPlugin(context)],
         build: {
             outDir: resolveOutputPath(context, config.build?.outDir),
             minify: config.build?.minify,

package/src/vite/config/__tests__/base-config.test.ts

@@ -20,6 +20,7 @@ import {
     magicCommentsPlugin,
     metadataPlugin,
     momentLocalesPlugin,
+    reactRefreshPlugin,
     styleUrlsPlugin,
     svgrPlugin,
     virtualModulesPlugin,
@@ -62,6 +63,7 @@ jest.mock('../code-splitting', () => ({
 }));
 
 jest.mock('../../plugins', () => ({
+    reactRefreshPlugin: jest.fn(() => ({ name: 'reactRefresh' })),
     bundleStatPlugin: jest.fn(() => ({ name: 'bundleStat' })),
     chainSourceMapsPlugin: jest.fn(() => ({ name: 'chainSourceMaps' })),
     cleanPlugin: jest.fn(() => ({ name: 'clean' })),
@@ -199,6 +201,15 @@ describe(createBaseConfig.name, () => {
         }
     });
 
+    test('includes startup-utils, react refresh, and react JSX runtimes in optimized dependencies', () => {
+        expect(subject().optimizeDeps!.include).toEqual([
+            '@servicetitan/startup-utils',
+            'react-refresh/runtime',
+            'react/jsx-runtime',
+            'react/jsx-dev-runtime',
+        ]);
+    });
+
     describe('when exposeProcessEnv lists a variable', () => {
         const variable = 'API_URL';
         const value = 'https://api.example.com';
@@ -223,10 +234,6 @@ describe(createBaseConfig.name, () => {
         });
     });
 
-    test('includes startup-utils in optimized dependencies', () => {
-        expect(subject().optimizeDeps!.include).toEqual(['@servicetitan/startup-utils']);
-    });
-
     test('registers ignoreModulesPlugin for dependency pre-bundling', () => {
         expect(subject().optimizeDeps!.rolldownOptions).toEqual({
             plugins: [ignoreModulesPlugin(context)],
@@ -235,6 +242,7 @@ describe(createBaseConfig.name, () => {
 
     test('creates plugins from factories, passing context', () => {
         const factories = [
+            reactRefreshPlugin,
             bundleStatPlugin,
             cleanPlugin,
             cssInjectorPlugin,

package/src/vite/config/__tests__/create-css-config.test.ts

@@ -31,12 +31,8 @@ describe(createCssConfig.name, () => {
     });
 
     test('sets less math option', () => {
-        expect(subject()).toEqual(
-            expect.objectContaining({
-                preprocessorOptions: {
-                    less: { math: bundleConstants.less.math },
-                },
-            })
+        expect(subject().preprocessorOptions?.less).toEqual(
+            expect.objectContaining({ math: bundleConstants.less.math })
         );
     });
 

package/src/vite/config/__tests__/create-filtering-logger.test.ts

@@ -1,4 +1,5 @@
 import { createLogger, Logger } from 'vite';
+import { EMPTY_PREFIX } from '../../plugins/ignore-modules-plugin';
 import { createFilteringLogger } from '../create-filtering-logger';
 
 jest.mock('vite', () => ({ createLogger: jest.fn() }));
@@ -50,8 +51,8 @@ describe(createFilteringLogger.name, () => {
 
         describe('when message is an ignored-module import warning', () => {
             beforeEach(() => {
-                message =
-                    "[IMPORT_IS_UNDEFINED] Import `DefaultPortalContext` will always be undefined because there is no matching export in '\\0IGNORE_EMPTY:@servicetitan/design-system'";
+                const renderedPrefix = EMPTY_PREFIX.replace('\0', '\\0');
+                message = `[IMPORT_IS_UNDEFINED] Import \`DefaultPortalContext\` will always be undefined because there is no matching export in '${renderedPrefix}@servicetitan/design-system'`;
             });
 
             itSuppressesMessage();

package/src/vite/config/__tests__/create-vite-config.test.ts

@@ -118,7 +118,7 @@ describe(createViteConfig.name, () => {
     });
 
     test('sets warmup.clientFiles for the dev server', async () => {
-        expect((await subject()).server?.warmup?.clientFiles).toBe(warmupFiles);
+        expect((await subject()).server?.warmup?.clientFiles).toEqual(warmupFiles);
     });
 
     test('warms the resolved output root', async () => {
@@ -137,8 +137,11 @@ describe(createViteConfig.name, () => {
             })
         );
 
-        test('consumer clientFiles take precedence', async () => {
-            expect((await subject()).server?.warmup?.clientFiles).toEqual(['custom/**']);
+        test('appends consumer clientFiles to the defaults', async () => {
+            expect((await subject()).server?.warmup?.clientFiles).toEqual([
+                ...warmupFiles,
+                'custom/**',
+            ]);
         });
 
         test('preserves other consumer warmup options', async () => {

package/src/vite/config/base-config.ts

@@ -23,6 +23,7 @@ import {
     magicCommentsPlugin,
     metadataPlugin,
     momentLocalesPlugin,
+    reactRefreshPlugin,
     styleUrlsPlugin,
     svgrPlugin,
     virtualModulesPlugin,
@@ -51,6 +52,7 @@ function importMetaRemap(
 
 function createPlugins(context: ViteBuildContext) {
     const entries: [string, Plugin[] | Plugin | Promise<Plugin> | undefined][] = [
+        ['reactRefresh', reactRefreshPlugin(context)],
         ['bundleStat', bundleStatPlugin(context)],
         ['clean', cleanPlugin(context)],
         ['cssInjector', cssInjectorPlugin(context)],
@@ -106,6 +108,11 @@ export function createBaseConfig(context: ViteBuildContext): InlineConfig {
             },
         },
         define: {
+            /*
+             * Some dependencies assume Node's `global` exists (webpack polyfills this
+             * automatically for browser targets; Vite does not).
+             */
+            global: 'globalThis',
             ...importMetaRemap(
                 defineExposedDependencies(context),
                 defineExposedInstanceDependencies(context),
@@ -114,7 +121,12 @@ export function createBaseConfig(context: ViteBuildContext): InlineConfig {
             ...(getProcessEnv(context) ?? {}),
         },
         optimizeDeps: {
-            include: ['@servicetitan/startup-utils'],
+            include: [
+                '@servicetitan/startup-utils',
+                'react-refresh/runtime',
+                'react/jsx-runtime',
+                'react/jsx-dev-runtime',
+            ],
             /*
              * Top-level plugins don't run during dependency pre-bundling, so
              * register ignoreModulesPlugin again here. Without this, missing

package/src/vite/config/create-filtering-logger.ts

@@ -1,4 +1,5 @@
 import { createLogger, type Logger } from 'vite';
+import { EMPTY_PREFIX } from '../plugins/ignore-modules-plugin';
 
 /*
  * Expected warnings when a host's HTML references the shared-bundle assets created by
@@ -13,10 +14,15 @@ const SHARED_ASSET_WARNINGS = [
 /*
  * Expected when code feature-detects an optional peer dependency (e.g. `Package.Export
  * === undefined`) and ignoreModulesPlugin has substituted an empty module for it. Matched
- * on the plugin's IGNORE_EMPTY marker so a genuinely undefined export elsewhere still warns.
+ * on the plugin's EMPTY_PREFIX marker so a genuinely undefined export elsewhere still warns.
+ * Rolldown renders the marker's leading NUL control character as the visible characters "\"
+ * and "0" when it prints a warning, so match that instead of the raw NUL, doubled here
+ * because the backslash is also a regex metacharacter.
  */
 const IGNORED_MODULE_WARNINGS = [
-    /Import `\w+` will always be undefined because there is no matching export in '\\0IGNORE_EMPTY:[^']+'/,
+    new RegExp(
+        `Import \`\\w+\` will always be undefined because there is no matching export in '${EMPTY_PREFIX.replace('\0', '\\\\0')}[^']+'`
+    ),
 ];
 
 const SUPPRESSED_WARNINGS = [...SHARED_ASSET_WARNINGS, ...IGNORED_MODULE_WARNINGS];

package/src/vite/config/create-vite-config.ts

@@ -43,12 +43,15 @@ function createDevServerConfig(
     outputRoot: string
 ) {
     const { light, headless, emitExposedDependencies } = viteContext.build;
-
+    const warmup = finalConfig.server?.warmup;
     const server = {
         ...finalConfig.server,
         warmup: {
-            clientFiles: getWarmupClientFiles(viteContext, outputRoot),
-            ...finalConfig.server?.warmup,
+            ...warmup,
+            clientFiles: [
+                ...getWarmupClientFiles(viteContext, outputRoot),
+                ...(warmup?.clientFiles ?? []),
+            ],
         },
     };
 

package/src/vite/index.html

@@ -9,7 +9,7 @@
         <% } %> <% it.css.forEach(function(item) { %>
         <link href="./<%= item %>" rel="stylesheet" crossorigin="anonymous" />
         <% }); %> <% it.js.forEach(function(item) { %>
-        <script src="./<%= item %>"></script>
+        <script defer src="./<%= item %>"></script>
         <% }); %>
         <script type="text/javascript">
             <% if (it.isWebComponent) { %>
@@ -25,7 +25,7 @@
             <% if (it.isWebComponent) { %>
             import './index';
             <% } else { %>
-            import './dist/index';
+            import './<%= it.tsOutDir %>/index';
             <% } %>
         </script>
         <% if (it.isWebComponent) { %><<%~ it.name %> /><% } %>

package/src/vite/index.ts

@@ -1 +1,3 @@
 export * from './config/define-config';
+export { lessTildePlugin } from './plugins/less-tilde-plugin';
+export { windowExternalsPlugin, type WindowExternals } from './plugins/window-externals-plugin';

package/src/vite/plugins/__tests__/chain-source-maps-plugin.test.ts

@@ -23,7 +23,7 @@ describe(chainSourceMapsPlugin.name, () => {
     };
 
     test('has correct name', () => {
-        expect(chainSourceMapsPlugin().name).toBe('chain-source-maps');
+        expect(chainSourceMapsPlugin().name).toBe('st:chain-source-maps');
     });
 
     test('returns code with *.js.map sources as absolute paths', () => {

package/src/vite/plugins/__tests__/clean-plugin.test.ts

@@ -21,7 +21,7 @@ describe('[startup] cleanPlugin', () => {
     const plugin = () => cleanPlugin(context);
 
     test('returns a plugin named clean', () => {
-        expect(plugin().name).toBe('clean');
+        expect(plugin().name).toBe('st:clean');
     });
 
     test('applies only to build', () => {

package/src/vite/plugins/__tests__/css-injector-plugin.test.ts

@@ -14,7 +14,7 @@ describe(cssInjectorPlugin.name, () => {
     const subject = () => cssInjectorPlugin(context);
 
     test('returns a plugin with correct name', () => {
-        expect(subject()!.name).toBe('mfe-css-injector');
+        expect(subject()!.name).toBe('st:mfe-css-injector');
     });
 
     test('enforces post order', () => {

package/src/vite/plugins/__tests__/design-system-guard-plugin.test.ts

@@ -17,13 +17,23 @@ describe(designSystemGuardPlugin.name, () => {
     const subject = () => designSystemGuardPlugin(context);
 
     test('creates plugin with correct name', () => {
-        expect(subject().name).toBe('design-system-guard');
+        expect(subject().name).toBe('st:design-system-guard');
     });
 
     test('enforces pre order so it runs before built-in resolvers', () => {
         expect(subject().enforce).toBe('pre');
     });
 
+    describe('resolveId filter', () => {
+        const subject = () =>
+            (designSystemGuardPlugin(context) as { resolveId: { filter: unknown } }).resolveId
+                .filter;
+
+        test('runs the hook only for design-system.css imports', () => {
+            expect(subject()).toEqual({ id: /[\\/]design-system\.css$/ });
+        });
+    });
+
     describe('resolveId', () => {
         let pluginContext: { error: jest.Mock };
         let source: string;
@@ -36,8 +46,10 @@ describe(designSystemGuardPlugin.name, () => {
         });
 
         const subject = () => {
-            const plugin = designSystemGuardPlugin(context);
-            return (plugin.resolveId as Function).call(pluginContext, source, importer);
+            const { resolveId } = designSystemGuardPlugin(context) as {
+                resolveId: { handler: Function };
+            };
+            return resolveId.handler.call(pluginContext, source, importer);
         };
 
         function itReportsNoError() {

package/src/vite/plugins/__tests__/dev-server-routing-plugin.test.ts

@@ -40,7 +40,7 @@ describe(devServerRoutingPlugin.name, () => {
     const subject = () => devServerRoutingPlugin(context);
 
     test('returns plugin with correct name', () => {
-        expect(subject().name).toBe('dev-server-routing');
+        expect(subject().name).toBe('st:dev-server-routing');
     });
 
     describe('configureServer', () => {

package/src/vite/plugins/__tests__/externals-plugin.test.ts

@@ -31,7 +31,7 @@ describe(externalsPlugin.name, () => {
     const subject = () => externalsPlugin(context);
 
     test('returns plugin with correct name', () => {
-        expect(subject()!.name).toBe('externals');
+        expect(subject()!.name).toBe('st:externals');
     });
 
     test('enforces pre', () => {
@@ -70,12 +70,33 @@ describe(externalsPlugin.name, () => {
     describe('when build is production', () => {
         beforeEach(() => (context.build.isProduction = true));
 
+        describe('resolveId filter', () => {
+            const subject = () =>
+                (externalsPlugin(context) as { resolveId: { filter: unknown } }).resolveId.filter;
+
+            test('matches each dependency exactly', () => {
+                expect(subject()).toEqual({ id: [/^react$/, /^@scope\/lib$/] });
+            });
+
+            describe('when a dependency name contains regex characters', () => {
+                beforeEach(() =>
+                    jest.mocked(getExternals).mockReturnValue({ 'lodash.throttle': 'x' })
+                );
+
+                test('escapes them', () => {
+                    expect(subject()).toEqual({ id: [/^lodash\.throttle$/] });
+                });
+            });
+        });
+
         describe('resolveId', () => {
             let source: string;
 
             const subject = () => {
-                const plugin = externalsPlugin(context)!;
-                return (plugin.resolveId as Function).call(plugin, source);
+                const { resolveId } = externalsPlugin(context) as {
+                    resolveId: { handler: Function };
+                };
+                return resolveId.handler.call({}, source);
             };
 
             describe('with known dependency', () => {

package/src/vite/plugins/__tests__/html-plugin.test.ts

@@ -28,7 +28,7 @@ describe(htmlPlugin.name, () => {
         jest.mocked(getSharedEntryPoints).mockReturnValue({ css: [], js: [] });
         context = {
             build: { name: 'my-app', isProduction: false },
-            package: { isWebComponent: false, source: 'src' },
+            package: { isWebComponent: false, source: 'src', destination: 'dist' },
             bundlerConfig: { pluginOverrides: {} },
         } as ViteBuildContext;
     });
@@ -38,7 +38,7 @@ describe(htmlPlugin.name, () => {
     const subject = () => htmlPlugin(context);
 
     test('returns plugin with correct name', () => {
-        expect(subject().name).toBe('html');
+        expect(subject().name).toBe('st:html');
     });
 
     test('constructs Eta with default template directory', () => {
@@ -170,6 +170,7 @@ describe(htmlPlugin.name, () => {
                     isProduction: context.build.isProduction,
                     isWebComponent: context.package.isWebComponent,
                     name: context.build.name,
+                    tsOutDir: context.package.destination,
                 });
             });
 
@@ -310,7 +311,7 @@ describe(htmlPlugin.name, () => {
 
         beforeEach(() => {
             req = { url: '/other' };
-            res = { end: jest.fn() };
+            res = { end: jest.fn(), setHeader: jest.fn() };
             next = jest.fn();
 
             const plugin = htmlPlugin(context);
@@ -350,6 +351,12 @@ describe(htmlPlugin.name, () => {
                 expect(res.end).toHaveBeenCalledWith(TRANSFORMED_HTML);
             });
 
+            test('sets HTML content type', async () => {
+                await subject();
+
+                expect(res.setHeader).toHaveBeenCalledWith('Content-Type', 'text/html');
+            });
+
             test('does not call next middleware', async () => {
                 await subject();
 

package/src/vite/plugins/__tests__/html-template.test.ts

@@ -19,7 +19,7 @@ describe('Vite host HTML template', () => {
         jest.mocked(getSharedEntryPoints).mockReturnValue({ css, js });
         context = {
             build: { name: 'my-mfe', isProduction: true },
-            package: { isWebComponent: false, source: __dirname },
+            package: { isWebComponent: false, source: __dirname, destination: 'dist' },
             bundlerConfig: { pluginOverrides: {} },
         } as ViteBuildContext;
     });
@@ -70,13 +70,21 @@ describe('Vite host HTML template', () => {
     test('renders each shared JS script', () => {
         const html = subject();
 
-        js.forEach(item => expect(html).toContain(`<script src="./${item}"></script>`));
+        js.forEach(item => expect(html).toContain(`<script defer src="./${item}"></script>`));
     });
 
     test('imports the host entry module', () => {
         expect(subject()).toContain("import './dist/index'");
     });
 
+    describe('with a non-default tsconfig outDir', () => {
+        beforeEach(() => (context.package.destination = 'lib'));
+
+        test('imports the entry from that directory', () => {
+            expect(subject()).toContain(`import './${context.package.destination}/index'`);
+        });
+    });
+
     describe('when web component', () => {
         beforeEach(() => {
             context.package.isWebComponent = true;