@servicetitan/startup 38.0.0 → 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' })),
@@ -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-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-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;

package/src/vite/plugins/__tests__/ignore-modules-plugin.test.ts

@@ -5,7 +5,7 @@ jest.mock('../../../core', () => ({
     checkResource: jest.fn(),
 }));
 
-describe(ignoreModulesPlugin.name, () => {
+describe(`[startup] ${ignoreModulesPlugin.name}`, () => {
     const moduleName = 'some-module';
     const context = {} as BuildContext;
     const checker = jest.fn();
@@ -18,21 +18,32 @@ describe(ignoreModulesPlugin.name, () => {
     const subject = () => ignoreModulesPlugin(context);
 
     test('creates plugin with correct name', () => {
-        expect(subject().name).toBe('ignore-modules');
+        expect(subject().name).toBe('st:ignore-modules');
     });
 
     test('enforces pre order so it runs before built-in resolvers', () => {
         expect(subject().enforce).toBe('pre');
     });
 
+    describe('resolveId filter', () => {
+        const subject = () =>
+            (ignoreModulesPlugin(context) as { resolveId: { filter: unknown } }).resolveId.filter;
+
+        test('runs the hook only for bare specifiers', () => {
+            expect(subject()).toEqual({ id: /^[@a-z]/ });
+        });
+    });
+
     describe('resolveId', () => {
         let importer: string | undefined;
 
         beforeEach(() => (importer = '/importer.ts'));
 
         const subject = () => {
-            const plugin = ignoreModulesPlugin(context);
-            return (plugin.resolveId as Function).call(plugin, moduleName, importer);
+            const { resolveId } = ignoreModulesPlugin(context) as {
+                resolveId: { handler: Function };
+            };
+            return resolveId.handler.call({}, moduleName, importer);
         };
 
         const itReturnsUndefined = () => {
@@ -72,14 +83,27 @@ describe(ignoreModulesPlugin.name, () => {
         });
     });
 
+    describe('load filter', () => {
+        const subject = () =>
+            (ignoreModulesPlugin(context) as { load: { filter: { id: RegExp } } }).load.filter.id;
+
+        test('matches the plugin virtual module ids', () => {
+            expect(subject().test(`${THROW_PREFIX}${moduleName}`)).toBe(true);
+        });
+
+        test('ignores ordinary module ids', () => {
+            expect(subject().test('/src/app.tsx')).toBe(false);
+        });
+    });
+
     describe('load', () => {
         let id: string;
 
         beforeEach(() => (id = moduleName));
 
         const subject = () => {
-            const plugin = ignoreModulesPlugin(context);
-            return (plugin.load as Function).call(plugin, id);
+            const { load } = ignoreModulesPlugin(context) as { load: { handler: Function } };
+            return load.handler.call({}, id);
         };
 
         test('returns undefined', () => {

package/src/vite/plugins/__tests__/less-tilde-plugin.test.ts

@@ -0,0 +1,91 @@
+import { fs, vol } from 'memfs';
+import path from 'path';
+import { lessTildePlugin } from '../less-tilde-plugin';
+
+jest.mock('fs', () => fs);
+
+describe(lessTildePlugin.name, () => {
+    class FakeFileManager {
+        loadFile(...args: unknown[]) {
+            return loadFile(...args);
+        }
+    }
+
+    let loadFile: jest.Mock;
+    let fileManager: any;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        vol.reset();
+        loadFile = jest.fn();
+        const pluginManager = { addFileManager: (manager: any) => (fileManager = manager) };
+        lessTildePlugin().install({ FileManager: FakeFileManager } as any, pluginManager);
+    });
+
+    describe('supports', () => {
+        let filename: string;
+
+        beforeEach(() => {
+            filename = '@servicetitan/tokens/x.less';
+        });
+
+        const subject = () => fileManager.supports(filename);
+
+        test('returns false', () => {
+            expect(subject()).toBe(false);
+        });
+
+        describe('with a tilde-prefixed import', () => {
+            beforeEach(() => (filename = '~' + filename));
+
+            test('returns true', () => {
+                expect(subject()).toBe(true);
+            });
+        });
+    });
+
+    describe('loadFile', () => {
+        const options = {};
+        const environment = {};
+        const packagePath = '@servicetitan/tokens/dist/x.less';
+        /* The same file is resolved in every case; only the input that reaches it changes. */
+        const resolved = path.resolve('app/node_modules', packagePath);
+
+        let specifier: string;
+        let importer: string;
+
+        const subject = () => fileManager.loadFile(specifier, importer, options, environment);
+
+        beforeEach(() => {
+            vol.fromJSON({ [resolved]: '' });
+            importer = path.resolve('app');
+            specifier = `~${packagePath}`;
+        });
+
+        test("drops the tilde and loads the file from the importer's node_modules", () => {
+            subject();
+
+            expect(loadFile).toHaveBeenCalledWith(resolved, importer, options, environment);
+        });
+
+        describe('when the specifier omits the extension', () => {
+            beforeEach(() => (specifier = specifier.replace('.less', '')));
+
+            test('appends .less', () => {
+                subject();
+
+                expect(loadFile).toHaveBeenCalledWith(resolved, importer, options, environment);
+            });
+        });
+
+        describe("when the package lives in an ancestor's node_modules", () => {
+            beforeEach(() => (importer = path.resolve('app/feature/styles')));
+
+            test('walks up from the importer to find it', () => {
+                subject();
+
+                expect(loadFile).toHaveBeenCalledWith(resolved, importer, options, environment);
+            });
+        });
+    });
+});

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

@@ -32,7 +32,7 @@ describe(metadataPlugin.name, () => {
     });
 
     test('returns plugin with correct name', () => {
-        expect(subject()!.name).toBe('metadata');
+        expect(subject()!.name).toBe('st:metadata');
     });
 
     const defaultAddress = { port: 3000 };

package/src/vite/plugins/__tests__/moment-locales-plugin.test.ts

@@ -4,17 +4,26 @@ import { VIRTUAL_MOMENT, momentLocalesPlugin } from '../moment-locales-plugin';
 const LOCALES_TO_KEEP = ['en-au', 'en-ca', 'en-gb'];
 const context = {} as BuildContext;
 
-describe(momentLocalesPlugin.name, () => {
+describe(`[startup] ${momentLocalesPlugin.name}`, () => {
     const subject = () => momentLocalesPlugin(context);
 
     test('creates plugin with correct name', () => {
-        expect(subject().name).toBe('moment-locales');
+        expect(subject().name).toBe('st:moment-locales');
     });
 
     test('enforces pre order so it runs before built-in resolvers', () => {
         expect(subject().enforce).toBe('pre');
     });
 
+    describe('resolveId filter', () => {
+        const subject = () =>
+            (momentLocalesPlugin(context) as { resolveId: { filter: unknown } }).resolveId.filter;
+
+        test('runs the hook only for moment and its subpaths', () => {
+            expect(subject()).toEqual({ id: [/^moment$/, /^moment\/locale\/(.+)$/] });
+        });
+    });
+
     describe('resolveId', () => {
         const importer = 'importer.ts';
         let source: string;
@@ -26,8 +35,10 @@ describe(momentLocalesPlugin.name, () => {
         });
 
         const subject = () => {
-            const plugin = momentLocalesPlugin(context);
-            return (plugin.resolveId as Function).call({ resolve }, source, importer, {});
+            const { resolveId } = momentLocalesPlugin(context) as {
+                resolveId: { handler: Function };
+            };
+            return resolveId.handler.call({ resolve }, source, importer, {});
         };
 
         const itReturnsUndefined = () => {
@@ -71,34 +82,33 @@ describe(momentLocalesPlugin.name, () => {
         });
     });
 
-    describe('load', () => {
-        let id: string;
-
-        beforeEach(() => (id = 'react'));
+    describe('load filter', () => {
+        const subject = () =>
+            (momentLocalesPlugin(context) as { load: { filter: { id: RegExp } } }).load.filter.id;
 
-        const subject = () => {
-            const plugin = momentLocalesPlugin(context);
-            return (plugin.load as Function).call(plugin, id) as string | undefined;
-        };
+        test('matches the virtual moment module id', () => {
+            expect(subject().test(VIRTUAL_MOMENT)).toBe(true);
+        });
 
-        test('returns undefined', () => {
-            expect(subject()).toBeUndefined();
+        test('ignores ordinary module ids', () => {
+            expect(subject().test('/src/app.tsx')).toBe(false);
         });
+    });
 
-        describe('when id is the virtual module', () => {
-            beforeEach(() => (id = VIRTUAL_MOMENT));
+    describe('load', () => {
+        const subject = () =>
+            (momentLocalesPlugin(context) as { load: { handler: Function } }).load.handler();
 
-            test.each(LOCALES_TO_KEEP)('imports the ESM %s locale', locale => {
-                expect(subject()).toContain(`import 'moment/dist/locale/${locale}';`);
-            });
+        test.each(LOCALES_TO_KEEP)('imports the ESM %s locale', locale => {
+            expect(subject()).toContain(`import 'moment/dist/locale/${locale}';`);
+        });
 
-            test('imports moment from the ESM build', () => {
-                expect(subject()).toContain("import moment from 'moment/dist/moment.js';");
-            });
+        test('imports moment from the ESM build', () => {
+            expect(subject()).toContain("import moment from 'moment/dist/moment.js';");
+        });
 
-            test('re-exports moment as the default', () => {
-                expect(subject()).toContain('export default moment;');
-            });
+        test('re-exports moment as the default', () => {
+            expect(subject()).toContain('export default moment;');
         });
     });
 });

package/src/vite/plugins/__tests__/style-urls-plugin.test.ts

@@ -21,7 +21,7 @@ describe(styleUrlsPlugin.name, () => {
     };
 
     test('returns plugin with correct name', () => {
-        expect(subject()!.name).toBe('style-urls');
+        expect(subject()!.name).toBe('st:style-urls');
     });
 
     describe('when package is not a web component', () => {