@servicetitan/startup 38.0.0 → 38.1.0

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

@@ -38,7 +38,7 @@ export function devServerRoutingPlugin(context: BuildContext): Plugin {
     };
 
     return {
-        name: 'dev-server-routing',
+        name: 'st:dev-server-routing',
 
         configResolved(config) {
             outDir = config.build.outDir;

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

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

@@ -0,0 +1,64 @@
+import fs from 'fs';
+import path from 'path';
+import { findUp } from '../../utils';
+
+interface LessPluginManager {
+    addFileManager(manager: unknown): void;
+}
+
+/*
+ * Less plugin that resolves webpack-style `~pkg` imports (e.g. `~@servicetitan/tokens/...`) from
+ * node_modules. Vite's Less integration does not understand the `~` prefix, so without this every
+ * style importing a package with `~` fails to resolve. Mirrors the old less-loader behavior to
+ * ease webpack-to-Vite migration.
+ */
+export function lessTildePlugin() {
+    return {
+        install(less: any, pluginManager: LessPluginManager) {
+            const TildeFileManager = createTildeFileManager(less);
+            pluginManager.addFileManager(new TildeFileManager());
+        },
+    };
+}
+
+/*
+ * A FileManager subclass bound to the Less instance Vite passes to the plugin. It claims `~`
+ * imports and rewrites them to a node_modules path before delegating to the base loader.
+ */
+function createTildeFileManager(less: any) {
+    return class extends less.FileManager {
+        supports(filename: string) {
+            return filename.startsWith('~');
+        }
+
+        loadFile(
+            filename: string,
+            currentDirectory: string,
+            options: unknown,
+            environment: unknown
+        ) {
+            return super.loadFile(
+                resolveFromNodeModules(filename.slice(1), currentDirectory),
+                currentDirectory,
+                options,
+                environment
+            );
+        }
+    };
+}
+
+/*
+ * Resolve a bare `pkg/path` specifier against the nearest node_modules, walking up from the
+ * importing file's directory, so the import binds to the importer's dependencies (matching
+ * webpack, and covering both pnpm's symlinked store and npm's hoisted tree).
+ */
+function resolveFromNodeModules(specifier: string, fromDirectory: string): string {
+    const withExtension = path.extname(specifier) ? specifier : `${specifier}.less`;
+
+    const resolved = findUp(directory => {
+        const candidate = path.join(directory, 'node_modules', withExtension);
+        return fs.existsSync(candidate) ? candidate : undefined;
+    }, fromDirectory);
+
+    return resolved ?? withExtension;
+}

package/src/vite/plugins/magic-comments-plugin/magic-comments-plugin.ts

@@ -19,7 +19,7 @@ export function magicCommentsPlugin(context: ViteBuildContext): Plugin | undefin
     const moduleByName = new Map<string, string>();
 
     return {
-        name: 'magic-comments',
+        name: 'st:magic-comments',
         apply: 'build',
         enforce: 'pre',
         config: () => ({

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

@@ -12,7 +12,7 @@ export function metadataPlugin(context: BuildContext): Plugin | undefined {
     let outDir = '';
 
     return {
-        name: 'metadata',
+        name: 'st:metadata',
         configResolved(config) {
             outDir = config.build.outDir;
         },

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

@@ -1,7 +1,8 @@
 import type { Plugin } from 'vite';
 import { BuildContext, MOMENT_LOCALES } from '../../core';
 
-export const VIRTUAL_MOMENT = '\0VIRTUAL_MOMENT';
+export const VIRTUAL_MOMENT = '\0moment-locales';
+const VIRTUAL_ID_PATTERN = new RegExp(`^${VIRTUAL_MOMENT}`);
 
 const UMD_LOCALE = /^moment\/locale\/(.+)$/;
 
@@ -15,27 +16,36 @@ const UMD_LOCALE = /^moment\/locale\/(.+)$/;
  */
 export function momentLocalesPlugin(_context: BuildContext): Plugin {
     return {
-        name: 'moment-locales',
+        name: 'st:moment-locales',
         enforce: 'pre',
-        resolveId(source, importer, options) {
-            if (source === 'moment') {
-                return VIRTUAL_MOMENT;
-            }
-            // Redirect explicit UMD locale imports to the ESM build so they share that instance.
-            const locale = UMD_LOCALE.exec(source)?.[1];
-            if (locale) {
-                return this.resolve(`moment/dist/locale/${locale}`, importer, options);
-            }
+        resolveId: {
+            filter: { id: [/^moment$/, UMD_LOCALE] },
+            handler(source, importer, options) {
+                if (source === 'moment') {
+                    return VIRTUAL_MOMENT;
+                }
+                // Redirect explicit UMD locale imports to the ESM build so they share that instance.
+                const locale = UMD_LOCALE.exec(source)?.[1];
+                if (locale) {
+                    return this.resolve(`moment/dist/locale/${locale}`, importer, options);
+                }
+            },
         },
-        load(id) {
-            if (id === VIRTUAL_MOMENT) {
+        load: {
+            filter: { id: VIRTUAL_ID_PATTERN },
+            handler() {
                 return [
                     ...MOMENT_LOCALES.map(locale => `import 'moment/dist/locale/${locale}';`),
                     `import moment from 'moment/dist/moment.js';`,
                     `export * from 'moment/dist/moment.js';`,
                     `export default moment;`,
+                    /*
+                     * moment attaches these to the function itself rather than declaring them as
+                     * real ES named exports, so `export *` above doesn't forward them.
+                     */
+                    `export const isMoment = moment.isMoment;`,
                 ].join('\n');
-            }
+            },
         },
     };
 }