@servicetitan/startup 37.0.2 → 38.1.0

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', () => {

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

@@ -7,7 +7,7 @@ jest.mock('../../../core', () => ({
 }));
 
 describe(virtualModulesPlugin.name, () => {
-    const VIRTUAL_PREFIX = '\0VIRTUAL';
+    const VIRTUAL_PREFIX = '\0virtual-modules:';
     const indexCode = "import App from './app';\nregister(App, 'my-component');";
     const designSystemCss = '@import "design-system";';
 
@@ -33,7 +33,7 @@ describe(virtualModulesPlugin.name, () => {
         beforeEach(() => (modules.index = indexCode));
 
         test('returns plugin with correct name', () => {
-            expect(subject()!.name).toBe('virtual-modules');
+            expect(subject()!.name).toBe('st:virtual-modules');
         });
 
         describe('resolveId', () => {
@@ -62,19 +62,30 @@ describe(virtualModulesPlugin.name, () => {
             });
         });
 
+        describe('load filter', () => {
+            const subject = () => {
+                const plugin = virtualModulesPlugin(context)!;
+                return (plugin.load as { filter: { id: RegExp } }).filter.id;
+            };
+
+            test('matches virtual module ids', () => {
+                expect(subject().test(`${VIRTUAL_PREFIX}./index`)).toBe(true);
+            });
+
+            test('ignores ordinary module ids', () => {
+                expect(subject().test('/src/app.tsx')).toBe(false);
+            });
+        });
+
         describe('load', () => {
             const subject = () => {
                 const plugin = virtualModulesPlugin(context)!;
-                return (id: string) => (plugin.load as Function).call(plugin, id);
+                return (id: string) => (plugin.load as { handler: Function }).handler.call({}, id);
             };
 
             test('returns module code for virtual id', () => {
                 expect(subject()(`${VIRTUAL_PREFIX}./index`)).toBe(indexCode);
             });
-
-            test('returns undefined for non-virtual id', () => {
-                expect(subject()('./index')).toBeUndefined();
-            });
         });
     });
 
@@ -90,8 +101,8 @@ describe(virtualModulesPlugin.name, () => {
 
         test('loads design system code', () => {
             const plugin = subject()!;
-            const result = (plugin.load as Function).call(
-                plugin,
+            const result = (plugin.load as { handler: Function }).handler.call(
+                {},
                 `${VIRTUAL_PREFIX}./design-system.css`
             );
 

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

@@ -0,0 +1,128 @@
+import { windowExternalsPlugin } from '../window-externals-plugin';
+
+describe(`[startup] ${windowExternalsPlugin.name}`, () => {
+    const VIRTUAL_PREFIX = '\0window-externals:';
+    const plugin = windowExternalsPlugin({
+        jQuery: /^jquery$/,
+        moment: /^(moment|moment-timezone)$/,
+        accounting: { match: /^accounting$/, exports: ['formatMoney', 'formatNumber'] },
+        arcgis: { match: /^@arcgis\/core\//, member: s => s.split('/').pop() },
+    });
+
+    test("resolves before Vite's own resolver", () => {
+        expect(plugin.enforce).toBe('pre');
+    });
+
+    describe('resolveId filter', () => {
+        const subject = () => (plugin.resolveId as { filter: unknown }).filter;
+
+        test('scopes the hook to each entry regex', () => {
+            expect(subject()).toEqual({
+                id: [/^jquery$/, /^(moment|moment-timezone)$/, /^accounting$/, /^@arcgis\/core\//],
+            });
+        });
+    });
+
+    describe('resolveId', () => {
+        let source: string;
+
+        const subject = () =>
+            (plugin.resolveId as { handler: (s: string) => string | null }).handler(source);
+
+        function itClaimsTheId() {
+            test('claims the id', () => {
+                expect(subject()).toBe(`${VIRTUAL_PREFIX}${source}`);
+            });
+        }
+
+        describe('when source matches a regex entry', () => {
+            beforeEach(() => (source = 'jquery'));
+
+            itClaimsTheId();
+        });
+
+        describe.each(['moment', 'moment-timezone'])(
+            'when source matches a multi-specifier regex',
+            specifier => {
+                beforeEach(() => (source = specifier));
+
+                itClaimsTheId();
+            }
+        );
+
+        describe('when source matches a { match, exports } entry', () => {
+            beforeEach(() => (source = 'accounting'));
+
+            itClaimsTheId();
+        });
+
+        describe('when source matches a { match, member } entry', () => {
+            beforeEach(() => (source = '@arcgis/core/views/MapView'));
+
+            itClaimsTheId();
+        });
+    });
+
+    describe('load filter', () => {
+        const subject = () => (plugin.load as { filter: { id: RegExp } }).filter.id;
+
+        test('matches the plugin virtual module ids', () => {
+            expect(subject().test(`${VIRTUAL_PREFIX}jquery`)).toBe(true);
+        });
+
+        test('ignores ordinary module ids', () => {
+            expect(subject().test('/src/app.tsx')).toBe(false);
+        });
+    });
+
+    describe('load', () => {
+        let id: string;
+
+        const subject = () =>
+            (plugin.load as { handler: (i: string) => string | null }).handler(id);
+
+        function itEmitsWindowGlobal(name: string) {
+            test('emits window.<global>', () => {
+                expect(subject()).toBe(`export default window.${name};`);
+            });
+        }
+
+        describe('when id matches a regex entry', () => {
+            beforeEach(() => (id = `${VIRTUAL_PREFIX}jquery`));
+
+            itEmitsWindowGlobal('jQuery');
+        });
+
+        describe.each(['moment', 'moment-timezone'])(
+            'when id matches a multi-specifier regex',
+            specifier => {
+                beforeEach(() => (id = `${VIRTUAL_PREFIX}${specifier}`));
+
+                itEmitsWindowGlobal('moment');
+            }
+        );
+
+        describe('when id matches a { match, member } entry', () => {
+            beforeEach(() => (id = `${VIRTUAL_PREFIX}@arcgis/core/views/MapView`));
+
+            test('emits window.<global>[<member>]', () => {
+                expect(subject()).toBe('export default window.arcgis["MapView"];');
+            });
+        });
+
+        describe('when id matches a { match, exports } entry', () => {
+            beforeEach(() => (id = `${VIRTUAL_PREFIX}accounting`));
+
+            test('emits the default plus a named re-export per declared name', () => {
+                expect(subject()).toBe(
+                    [
+                        'const _m = window.accounting;',
+                        'export default _m;',
+                        'export const formatMoney = _m.formatMoney;',
+                        'export const formatNumber = _m.formatNumber;',
+                    ].join('\n')
+                );
+            });
+        });
+    });
+});

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

@@ -9,7 +9,7 @@ import type { Plugin } from 'rolldown';
  */
 export function chainSourceMapsPlugin(): Plugin {
     return {
-        name: 'chain-source-maps',
+        name: 'st:chain-source-maps',
         load(id) {
             const mapPath = `${id}.map`;
             if (id.endsWith('.js') && fs.existsSync(mapPath)) {

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

@@ -13,7 +13,7 @@ export function cleanPlugin(context: BuildContext): Plugin {
     let outDir = '';
 
     return {
-        name: 'clean',
+        name: 'st:clean',
         apply: 'build',
         config: () => ({ build: { emptyOutDir: isWebComponent } }),
         configResolved(config) {

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

@@ -23,7 +23,7 @@ export function cssInjectorPlugin(context: BuildContext): Plugin | undefined {
     }
 
     return {
-        name: 'mfe-css-injector',
+        name: 'st:mfe-css-injector',
         enforce: 'post',
         transform(code, id) {
             if (!id.endsWith('.css') && !id.endsWith('.less') && !id.endsWith('.scss')) {

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

@@ -20,15 +20,18 @@ export function designSystemGuardPlugin(context: BuildContext): Plugin {
         !emitExposedDependencies;
 
     return {
-        name: 'design-system-guard',
+        name: 'st:design-system-guard',
         enforce: 'pre',
-        resolveId(source, importer) {
-            if (designSystemInSharedBundle && importer && DESIGN_SYSTEM_CSS.test(source)) {
-                const filename = path.parse(importer).name;
-                this.error(
-                    `do not import design-system.css in "${filename}"; it is automatically included as a shared dependency`
-                );
-            }
+        resolveId: {
+            filter: { id: DESIGN_SYSTEM_CSS },
+            handler(source, importer) {
+                if (designSystemInSharedBundle && importer && DESIGN_SYSTEM_CSS.test(source)) {
+                    const filename = path.parse(importer).name;
+                    this.error(
+                        `do not import design-system.css in "${filename}"; it is automatically included as a shared dependency`
+                    );
+                }
+            },
         },
     };
 }

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

@@ -1,6 +1,6 @@
 import fs from 'fs';
 import path from 'path';
-import type { Plugin } from 'vite';
+import { normalizePath, type Plugin } from 'vite';
 import { getBundleType, type BuildContext } from '../../core';
 import { log } from '../../utils';
 
@@ -38,14 +38,14 @@ export function devServerRoutingPlugin(context: BuildContext): Plugin {
     };
 
     return {
-        name: 'dev-server-routing',
+        name: 'st:dev-server-routing',
 
         configResolved(config) {
             outDir = config.build.outDir;
         },
 
         configureServer(server) {
-            const outDirRelative = `/${path.relative(process.cwd(), outDir)}/`;
+            const outDirRelative = `/${normalizePath(path.relative(process.cwd(), outDir))}/`;
 
             server.middlewares.use((req, _res, next) => {
                 logRequest(req);
@@ -72,7 +72,7 @@ export function devServerRoutingPlugin(context: BuildContext): Plugin {
             }
 
             const destDir = path.resolve(destination);
-            const mountPath = '/' + path.relative(process.cwd(), destDir);
+            const mountPath = '/' + normalizePath(path.relative(process.cwd(), destDir));
 
             const contentTypes: Record<string, string> = {
                 '.js': 'application/javascript',

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

@@ -3,6 +3,10 @@ import path from 'path';
 import type { Plugin } from 'vite';
 import { BuildContext, getExternals } from '../../core';
 
+/* Dots are the only valid regex-special character in package names */
+const buildEscapedRegExp = (dependency: string) =>
+    new RegExp(`^${dependency.replace(/\./g, '\\.')}$`);
+
 /*
  * Externalizes shared dependencies by redirecting imports to CJS proxy modules
  * that read from the host's global shared deps registry at runtime.
@@ -55,14 +59,14 @@ export function externalsPlugin(context: BuildContext): Plugin | undefined {
     const { isProduction } = context.build;
 
     return {
-        name: 'externals',
+        name: 'st:externals',
         enforce: 'pre',
         config: isProduction
             ? undefined
             : () => ({
                   resolve: {
                       alias: Object.keys(entries).map(dep => ({
-                          find: new RegExp(`^${dep.replace('/', '\\/')}$`),
+                          find: buildEscapedRegExp(dep),
                           replacement: path.join(proxyNodeModules, dep),
                       })),
                   },
@@ -71,10 +75,15 @@ export function externalsPlugin(context: BuildContext): Plugin | undefined {
                   },
               }),
         resolveId: isProduction
-            ? (source: string) => {
-                  if (source in entries) {
-                      return path.join(proxyNodeModules, source, 'index.cjs');
-                  }
+            ? {
+                  filter: {
+                      id: Object.keys(entries).map(buildEscapedRegExp),
+                  },
+                  handler(source: string) {
+                      if (source in entries) {
+                          return path.join(proxyNodeModules, source, 'index.cjs');
+                      }
+                  },
               }
             : undefined,
     };

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

@@ -7,7 +7,7 @@ import { ViteBuildContext } from '../types';
 
 export function htmlPlugin(context: ViteBuildContext): Plugin {
     const { name, isProduction } = context.build;
-    const { isWebComponent } = context.package;
+    const { isWebComponent, destination } = context.package;
     const { css, js } = getSharedEntryPoints(context);
     const { pluginOverrides } = context.bundlerConfig;
 
@@ -26,6 +26,7 @@ export function htmlPlugin(context: ViteBuildContext): Plugin {
             isProduction,
             isWebComponent,
             name,
+            tsOutDir: destination,
         });
     }
 
@@ -42,7 +43,7 @@ export function htmlPlugin(context: ViteBuildContext): Plugin {
     const VIRTUAL_HTML_PATH = path.resolve(INDEX_HTML);
 
     return {
-        name: 'html',
+        name: 'st:html',
         /*
          * Auto-detect favicon.ico in vite's publicDir so projects following
          * the convention get a working favicon link without explicit config.
@@ -64,6 +65,7 @@ export function htmlPlugin(context: ViteBuildContext): Plugin {
                     }
                     let html = renderHtml();
                     html = await server.transformIndexHtml(req.url, html);
+                    res.setHeader('Content-Type', 'text/html');
                     res.end(html);
                 });
             };

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

@@ -2,8 +2,11 @@ import type { Plugin } from 'vite';
 import { checkResource } from '../../core';
 import type { PackageContext } from '../../core/types';
 
-export const THROW_PREFIX = '\0IGNORE_THROW:';
-export const EMPTY_PREFIX = '\0IGNORE_EMPTY:';
+const VIRTUAL_PREFIX = '\0ignore-modules:';
+const VIRTUAL_ID_PATTERN = new RegExp(`^${VIRTUAL_PREFIX}`);
+
+export const THROW_PREFIX = `${VIRTUAL_PREFIX}throw:`;
+export const EMPTY_PREFIX = `${VIRTUAL_PREFIX}empty:`;
 
 /**
  * Handles optional peer dependencies that are not installed.
@@ -26,29 +29,35 @@ export function ignoreModulesPlugin(context: {
     const checker = checkResource(context);
 
     return {
-        name: 'ignore-modules',
+        name: 'st:ignore-modules',
         enforce: 'pre',
-        resolveId(source, importer) {
-            if (!importer) {
-                return;
-            }
-            const mode = checker({ resource: source, importer });
-            if (mode === 'throw') {
-                return `${THROW_PREFIX}${source}`;
-            }
-            if (mode === 'empty') {
-                return `${EMPTY_PREFIX}${source}`;
-            }
+        resolveId: {
+            filter: { id: /^[@a-z]/ }, // Only bare specifiers can be optional peers
+            handler(source, importer) {
+                if (!importer) {
+                    return;
+                }
+                const mode = checker({ resource: source, importer });
+                if (mode === 'throw') {
+                    return `${THROW_PREFIX}${source}`;
+                }
+                if (mode === 'empty') {
+                    return `${EMPTY_PREFIX}${source}`;
+                }
+            },
         },
-        load(id) {
-            if (id.startsWith(THROW_PREFIX)) {
-                const source = id.slice(THROW_PREFIX.length);
-                const message = JSON.stringify(`Cannot find module '${source}'`);
-                return `throw Object.assign(new Error(${message}), { code: 'MODULE_NOT_FOUND' });`;
-            }
-            if (id.startsWith(EMPTY_PREFIX)) {
-                return 'export {};';
-            }
+        load: {
+            filter: { id: VIRTUAL_ID_PATTERN },
+            handler(id) {
+                if (id.startsWith(THROW_PREFIX)) {
+                    const source = id.slice(THROW_PREFIX.length);
+                    const message = JSON.stringify(`Cannot find module '${source}'`);
+                    return `throw Object.assign(new Error(${message}), { code: 'MODULE_NOT_FOUND' });`;
+                }
+                if (id.startsWith(EMPTY_PREFIX)) {
+                    return 'export {};';
+                }
+            },
         },
     };
 }

package/src/vite/plugins/index.ts

@@ -8,9 +8,12 @@ export * from './externals-plugin';
 export * from './html-plugin';
 export * from './ignore-modules-plugin';
 export * from './istanbul-plugin';
+export * from './less-tilde-plugin';
 export * from './magic-comments-plugin';
 export * from './metadata-plugin';
 export * from './moment-locales-plugin';
+export * from './react-refresh-plugin';
 export * from './style-urls-plugin';
 export * from './svgr-plugin';
 export * from './virtual-modules-plugin';
+export * from './window-externals-plugin';