@servicetitan/startup 37.0.2 → 38.1.0

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' })),
@@ -119,6 +121,10 @@ describe(createBaseConfig.name, () => {
         expect(subject().server!.port).toBe(8080);
     });
 
+    test('binds dev server to 127.0.0.1', () => {
+        expect(subject().server!.host).toBe('127.0.0.1');
+    });
+
     test('sets development mode', () => {
         expect(subject().mode).toBe(bundleConstants.mode.development);
     });
@@ -195,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';
@@ -219,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)],
@@ -231,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

@@ -47,5 +47,14 @@ describe(createFilteringLogger.name, () => {
 
             itSuppressesMessage();
         });
+
+        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'";
+            });
+
+            itSuppressesMessage();
+        });
     });
 });

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

@@ -29,6 +29,7 @@ describe(createViteBuildContext.name, () => {
             omitDefault: [],
             pluginOverrides: { html: {}, svgr: {} },
             minify: {},
+            outDir: undefined,
         });
     });
 
@@ -86,4 +87,28 @@ describe(createViteBuildContext.name, () => {
             });
         });
     });
+
+    describe('when package.json contains build.outDir', () => {
+        const pkgJsonOutDir = 'pkg-dist';
+
+        beforeEach(() => {
+            pkgJsonConfig = { config: { build: { outDir: pkgJsonOutDir } } };
+        });
+
+        test('configures outDir', () => {
+            expect(subject().bundlerConfig.outDir).toBe(pkgJsonConfig.config?.build?.outDir);
+        });
+
+        describe('when file config also contains build.outDir', () => {
+            const fileOutDir = 'file-dist';
+
+            beforeEach(() => {
+                fileConfig = { config: { build: { outDir: fileOutDir } } };
+            });
+
+            test('file config takes precedence', () => {
+                expect(subject().bundlerConfig.outDir).toBe(fileOutDir);
+            });
+        });
+    });
 });

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)],
@@ -83,7 +85,11 @@ export function createBaseConfig(context: ViteBuildContext): InlineConfig {
     let config: InlineConfig = {
         cacheDir: `node_modules/.vite/${getBundleType(context) ?? 'host'}`,
         customLogger: createFilteringLogger(),
-        server: { port: context.bundlerConfig.port ?? (isWebComponent ? 8888 : 8080) },
+        server: {
+            // Windows machines can fail to connect to "localhost"; bind to a fixed address instead.
+            host: '127.0.0.1',
+            port: context.bundlerConfig.port ?? (isWebComponent ? 8888 : 8080),
+        },
         mode: isProduction ? bundleConstants.mode.production : bundleConstants.mode.development,
         configFile: false,
         oxc: { legalComments: 'none' },
@@ -102,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),
@@ -110,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

@@ -11,13 +11,24 @@ const SHARED_ASSET_WARNINGS = [
 ];
 
 /*
- * Wraps Vite's logger to drop the shared-asset HTML warnings. Everything else passes through.
+ * 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.
+ */
+const IGNORED_MODULE_WARNINGS = [
+    /Import `\w+` will always be undefined because there is no matching export in '\\0IGNORE_EMPTY:[^']+'/,
+];
+
+const SUPPRESSED_WARNINGS = [...SHARED_ASSET_WARNINGS, ...IGNORED_MODULE_WARNINGS];
+
+/*
+ * Wraps Vite's logger to drop expected warnings. Everything else passes through.
  */
 export function createFilteringLogger(): Logger {
     const logger = createLogger();
     const { warn, warnOnce } = logger;
     const isSuppressed = (message: string) =>
-        SHARED_ASSET_WARNINGS.some(pattern => pattern.test(message));
+        SUPPRESSED_WARNINGS.some(pattern => pattern.test(message));
 
     logger.warn = (message, options) => {
         if (!isSuppressed(message)) {

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

@@ -31,6 +31,7 @@ function createBundlerConfig(
             svgr: { ...pkgPluginOverrides.svgr, ...filePluginOverrides.svgr },
         },
         minify: { ...pkgMinify, ...fileMinify },
+        outDir: fileConfig.config?.build?.outDir ?? packageJsonConfig.config?.build?.outDir,
     };
 }
 

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() {