@servicetitan/startup 38.0.0 → 38.1.0

package/src/vite/plugins/react-refresh-plugin/__tests__/refresh-runtime.test.ts

@@ -0,0 +1,193 @@
+import {
+    __hmr_import,
+    registerExportsForReactRefresh,
+    validateRefreshBoundaryAndEnqueueUpdate,
+} from '../refresh-runtime.js';
+
+declare global {
+    interface Window {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        __registerBeforePerformReactRefresh: (callback: () => Promise<void>) => void;
+    }
+}
+
+describe('[startup] react refresh runtime helpers', () => {
+    const moduleId = '/dist/app.js';
+    const component = () => null;
+
+    let nextExports: Record<string, unknown>;
+    let prevExports: Record<string, unknown>;
+    let RefreshRuntime: {
+        isLikelyComponentType: jest.Mock;
+        performReactRefresh: jest.Mock;
+        register: jest.Mock;
+    };
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.useFakeTimers();
+
+        RefreshRuntime = {
+            isLikelyComponentType: jest.fn(value => value === component),
+            performReactRefresh: jest.fn(),
+            register: jest.fn(),
+        };
+        Object.defineProperty(window, '__ReactRefreshRuntime', {
+            configurable: true,
+            value: RefreshRuntime,
+        });
+    });
+
+    afterEach(() => {
+        jest.useRealTimers();
+    });
+
+    describe('registerExportsForReactRefresh', () => {
+        const subject = () => {
+            const moduleExports = {
+                App: component,
+                count: 1,
+            };
+            Object.defineProperty(moduleExports, '__esModule', {
+                enumerable: true,
+                value: true,
+            });
+
+            registerExportsForReactRefresh(moduleId, moduleExports);
+        };
+
+        test('registers component exports', () => {
+            subject();
+
+            expect(RefreshRuntime.register).toHaveBeenCalledWith(
+                component,
+                `${moduleId} export App`
+            );
+        });
+
+        test('skips non-component exports', () => {
+            subject();
+
+            expect(RefreshRuntime.register).toHaveBeenCalledTimes(1);
+        });
+    });
+
+    describe('validateRefreshBoundaryAndEnqueueUpdate', () => {
+        beforeEach(() => {
+            prevExports = { App: component };
+            nextExports = { App: component };
+        });
+
+        const subject = () =>
+            validateRefreshBoundaryAndEnqueueUpdate(moduleId, prevExports, nextExports);
+
+        function itQueuesASingleRefresh() {
+            test('queues a single refresh', async () => {
+                subject();
+                await jest.advanceTimersByTimeAsync(16);
+
+                expect(RefreshRuntime.performReactRefresh).toHaveBeenCalledTimes(1);
+            });
+        }
+
+        itQueuesASingleRefresh();
+
+        describe('with a before refresh callback', () => {
+            const callback = jest.fn(async () => {});
+
+            beforeEach(() => window.__registerBeforePerformReactRefresh(callback));
+
+            test('runs the callback before refreshing', async () => {
+                subject();
+                await jest.advanceTimersByTimeAsync(16);
+
+                expect(callback).toHaveBeenCalledTimes(1);
+                expect(RefreshRuntime.performReactRefresh).toHaveBeenCalledTimes(1);
+            });
+        });
+
+        describe('with __esModule exports', () => {
+            beforeEach(() => {
+                Object.defineProperty(prevExports, '__esModule', {
+                    enumerable: true,
+                    value: true,
+                });
+                Object.defineProperty(nextExports, '__esModule', {
+                    enumerable: true,
+                    value: true,
+                });
+            });
+
+            itQueuesASingleRefresh();
+        });
+
+        describe('with unchanged non-component exports', () => {
+            const unchangedValue = { stable: true };
+
+            beforeEach(() => {
+                prevExports.value = unchangedValue;
+                nextExports.value = unchangedValue;
+            });
+
+            itQueuesASingleRefresh();
+        });
+
+        describe('with changed non-component exports', () => {
+            beforeEach(() => {
+                prevExports.value = 'before';
+                nextExports.value = 'after';
+            });
+
+            test('returns an incompatible export message', () => {
+                expect(subject()).toBe('Could not Fast Refresh ("value" export is incompatible).');
+            });
+        });
+
+        describe('with removed exports', () => {
+            beforeEach(() => {
+                prevExports.value = 'before';
+            });
+
+            test('returns an export removed message', () => {
+                expect(subject()).toBe('Could not Fast Refresh (export removed)');
+            });
+        });
+
+        describe('with new exports', () => {
+            beforeEach(() => {
+                nextExports.value = 'after';
+            });
+
+            test('returns a new export message', () => {
+                expect(subject()).toBe('Could not Fast Refresh (new export)');
+            });
+        });
+
+        describe('with getter exports', () => {
+            beforeEach(() => {
+                Object.defineProperty(nextExports, 'value', {
+                    enumerable: true,
+                    get: () => {
+                        throw new Error('getter should not run');
+                    },
+                });
+                Object.defineProperty(prevExports, 'value', {
+                    enumerable: true,
+                    value: 'before',
+                });
+            });
+
+            test('returns an invalidation message', () => {
+                expect(subject()).toContain('Could not Fast Refresh');
+            });
+        });
+    });
+
+    describe('__hmr_import', () => {
+        const subject = () => __hmr_import('missing-refresh-runtime-test-module');
+
+        test('delegates to native dynamic import', async () => {
+            await expect(subject()).rejects.toThrow();
+        });
+    });
+});

package/src/vite/plugins/react-refresh-plugin/index.ts

@@ -0,0 +1 @@
+export * from './react-refresh-plugin';

package/src/vite/plugins/react-refresh-plugin/react-refresh-plugin.ts

@@ -0,0 +1,144 @@
+import fs from 'fs';
+import MagicString from 'magic-string';
+import path from 'path';
+import type { Plugin } from 'vite';
+import type { BuildContext } from '../../../core';
+import { findPackages } from '../../../utils';
+
+const RUNTIME_ID = '/@react-refresh';
+const RUNTIME_HELPERS_PATH = path.join(__dirname, 'refresh-runtime.js');
+
+/* Triggers injectIntoGlobalHook (via the virtual module's side effect) before app code executes. */
+const preamble = `import "${RUNTIME_ID}";`;
+
+/*
+ * Per-module locals satisfy swc's $RefreshReg$/$RefreshSig$ calls without relying on
+ * window globals. Scoping the registration id to the served module URL ensures host and
+ * MFE servers sharing one runtime singleton cannot produce colliding refresh families.
+ */
+const modulePrelude = `import RefreshRuntime from "${RUNTIME_ID}";
+const __react_refresh_id__ = import.meta.url.replace(/[?#].*$/, "");
+var $RefreshReg$ = (type, id) => RefreshRuntime.register(type, __react_refresh_id__ + " " + id);
+var $RefreshSig$ = () => RefreshRuntime.createSignatureFunctionForTransform();\n`;
+
+/* Makes refreshable modules self-accepting and runs React Fast Refresh after safe updates. */
+const postlude = `
+import {
+    __hmr_import,
+    registerExportsForReactRefresh,
+    validateRefreshBoundaryAndEnqueueUpdate,
+} from "${RUNTIME_ID}";
+if (import.meta.hot) {
+    __hmr_import(__react_refresh_id__).then(currentExports => {
+        registerExportsForReactRefresh(__react_refresh_id__, currentExports);
+        import.meta.hot.accept(nextExports => {
+            if (!nextExports) {
+                return;
+            }
+
+            const invalidateMessage = validateRefreshBoundaryAndEnqueueUpdate(
+                __react_refresh_id__,
+                currentExports,
+                nextExports
+            );
+
+            if (invalidateMessage) {
+                import.meta.hot.invalidate(invalidateMessage);
+            }
+        });
+    });
+}`;
+
+function transformWithSourceMap(source: MagicString, id: string) {
+    return {
+        code: source.toString(),
+        map: source.generateMap({ hires: true, source: id }),
+    };
+}
+
+function normalizeSlashes(filePath: string) {
+    return filePath.replaceAll('\\', '/');
+}
+
+function getRefreshRuntimeCode() {
+    return `\
+import _RefreshRuntime from "react-refresh/runtime";
+const RefreshRuntime = window.__ReactRefreshRuntime || _RefreshRuntime;
+if (!window.__ReactRefreshRuntime) {
+    _RefreshRuntime.injectIntoGlobalHook(window);
+}
+window.__ReactRefreshRuntime = RefreshRuntime;
+${fs.readFileSync(RUNTIME_HELPERS_PATH, 'utf8')}
+export default RefreshRuntime;`;
+}
+
+/* Bridges swc's refresh markers to Vite HMR and the React Fast Refresh runtime. */
+export function reactRefreshPlugin(context: BuildContext): Plugin | undefined {
+    if (context.build.isProduction) {
+        return;
+    }
+
+    const refreshableModuleDirs = findPackages().map(
+        ({ location }) => normalizeSlashes(location) + '/'
+    );
+
+    return {
+        name: 'react-refresh',
+        enforce: 'pre',
+        /* Serve react-refresh/runtime as an ESM virtual module. */
+        resolveId(source) {
+            if (source === RUNTIME_ID) {
+                return { id: RUNTIME_ID, moduleSideEffects: true };
+            }
+        },
+        load(id) {
+            if (id === RUNTIME_ID) {
+                return { code: getRefreshRuntimeCode() };
+            }
+        },
+        /* Inject the preamble before React and app code load. */
+        transformIndexHtml() {
+            return [
+                {
+                    tag: 'script',
+                    attrs: { type: 'module' },
+                    children: preamble,
+                    injectTo: 'head-prepend',
+                },
+            ];
+        },
+        /* Handle modules compiled with swc refresh markers. */
+        transform: {
+            filter: { code: /\$RefreshReg\$|\$RefreshSig\$/ },
+            handler(code, id) {
+                const normalizedId = normalizeSlashes(id);
+                const isRefreshableModule = refreshableModuleDirs.some(dir =>
+                    normalizedId.startsWith(dir)
+                );
+
+                /* Prevent non-workspace libraries from registering duplicate refresh families. */
+                if (!isRefreshableModule) {
+                    const source = new MagicString(code);
+                    const noopPreamble =
+                        'var $RefreshReg$ = () => {};\nvar $RefreshSig$ = () => (t) => t;\n';
+                    source.prepend(noopPreamble);
+                    return transformWithSourceMap(source, id);
+                }
+
+                /*
+                 * Workspace modules always get per-module refresh locals. This satisfies
+                 * $RefreshSig$ calls in HOC-wrapped modules without relying on window globals.
+                 * Modules with registered component families additionally get an HMR postlude.
+                 */
+                const source = new MagicString(code);
+                source.prepend(modulePrelude);
+
+                if (code.includes('$RefreshReg$')) {
+                    source.append(postlude);
+                }
+
+                return transformWithSourceMap(source, id);
+            },
+        },
+    };
+}

package/src/vite/plugins/react-refresh-plugin/refresh-runtime.js

@@ -0,0 +1,113 @@
+/*
+ * MIT License
+ *
+ * Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+/*
+ * Adapted from https://github.com/vitejs/vite-plugin-react/blob/84693214ef8cccc3357561fe4654f401a30dab62/packages/common/refresh-runtime.js.
+ * Keep this local because the helpers are bundled into that plugin's virtual
+ * runtime and are not exposed as stable public package exports.
+ *
+ * This file is served inside the browser-only /@react-refresh virtual module.
+ * It relies on that module storing the runtime on window.__ReactRefreshRuntime.
+ */
+const refreshCallbacks = [];
+
+function getRefreshRuntime() {
+    return window.__ReactRefreshRuntime;
+}
+
+// Hook for integrations to finish async work before the debounced refresh flush.
+window.__registerBeforePerformReactRefresh = callback => {
+    refreshCallbacks.push(callback);
+};
+
+function debounce(fn, delay) {
+    let handle;
+    return () => {
+        clearTimeout(handle);
+        handle = setTimeout(fn, delay);
+    };
+}
+
+const enqueueUpdate = debounce(async () => {
+    if (refreshCallbacks.length) {
+        await Promise.all(refreshCallbacks.map(callback => callback()));
+    }
+    getRefreshRuntime().performReactRefresh();
+}, 16);
+
+function predicateOnExport(moduleExports, predicate) {
+    for (const key in moduleExports) {
+        if (key === '__esModule') {
+            continue;
+        }
+        const descriptor = Object.getOwnPropertyDescriptor(moduleExports, key);
+        if (descriptor?.get) {
+            return key;
+        }
+        if (!predicate(key, moduleExports[key])) {
+            return key;
+        }
+    }
+    return true;
+}
+
+export function registerExportsForReactRefresh(id, moduleExports) {
+    for (const key in moduleExports) {
+        if (key === '__esModule') {
+            continue;
+        }
+        const exportValue = moduleExports[key];
+        if (getRefreshRuntime().isLikelyComponentType(exportValue)) {
+            getRefreshRuntime().register(exportValue, `${id} export ${key}`);
+        }
+    }
+}
+
+export function validateRefreshBoundaryAndEnqueueUpdate(id, prevExports, nextExports) {
+    if (predicateOnExport(prevExports, key => key in nextExports) !== true) {
+        return 'Could not Fast Refresh (export removed)';
+    }
+    if (predicateOnExport(nextExports, key => key in prevExports) !== true) {
+        return 'Could not Fast Refresh (new export)';
+    }
+
+    let hasExports = false;
+    const allExportsAreComponentsOrUnchanged = predicateOnExport(nextExports, (key, value) => {
+        hasExports = true;
+        if (getRefreshRuntime().isLikelyComponentType(value)) {
+            return true;
+        }
+        return prevExports[key] === nextExports[key];
+    });
+
+    if (hasExports && allExportsAreComponentsOrUnchanged === true) {
+        enqueueUpdate();
+    } else {
+        return `Could not Fast Refresh ("${allExportsAreComponentsOrUnchanged}" export is incompatible).`;
+    }
+}
+
+export function __hmr_import(module) {
+    return import(/* @vite-ignore */ module);
+}

package/src/vite/plugins/shared-dependencies-plugin/__tests__/shared-dependencies-plugin.test.ts

@@ -14,7 +14,7 @@ jest.mock('../../../../core', () => ({
 }));
 
 describe(sharedDependenciesPlugin.name, () => {
-    const CSS_VIRTUAL_PREFIX = '\0SHARED_DEPENDENCY_CSS';
+    const CSS_VIRTUAL_PREFIX = '\0shared-dependencies:css:';
     const mockDependencies: Record<string, string> = {
         'react': 'globalReact',
         '@scope/lib': 'globalScopeLib',
@@ -32,7 +32,7 @@ describe(sharedDependenciesPlugin.name, () => {
     const subject = () => sharedDependenciesPlugin(options);
 
     test('returns plugin with correct name', () => {
-        expect(subject().name).toBe('shared-dependencies');
+        expect(subject().name).toBe('st:shared-dependencies');
     });
 
     test('enforces pre', () => {
@@ -204,6 +204,21 @@ describe(sharedDependenciesPlugin.name, () => {
         });
     });
 
+    describe('load filter', () => {
+        const subject = () => {
+            const plugin = sharedDependenciesPlugin(options);
+            return (plugin.load as { filter: { id: RegExp } }).filter.id;
+        };
+
+        test('matches the CSS virtual module ids', () => {
+            expect(subject().test(`${CSS_VIRTUAL_PREFIX}design-system`)).toBe(true);
+        });
+
+        test('ignores ordinary module ids', () => {
+            expect(subject().test('/src/app.tsx')).toBe(false);
+        });
+    });
+
     describe('load', () => {
         const cssName = 'design-system';
         const cssImports = ['tokens.css', 'fonts.css'];
@@ -217,29 +232,19 @@ describe(sharedDependenciesPlugin.name, () => {
 
         const subject = () => {
             const plugin = sharedDependenciesPlugin(options);
-            return (plugin.load as Function).call(plugin, id);
-        };
-
-        const itReturnsUndefined = () => {
-            test('returns undefined', () => {
-                expect(subject()).toBeUndefined();
-            });
+            return (plugin.load as { handler: Function }).handler.call({}, id);
         };
 
         test('returns import statements', () => {
             expect(subject()).toBe(cssImports.map(p => `import '${p}';`).join('\n'));
         });
 
-        describe('when id is not a CSS virtual module', () => {
-            beforeEach(() => (id = ''));
-
-            itReturnsUndefined();
-        });
-
         describe('with unknown CSS module', () => {
             beforeEach(() => (id = CSS_VIRTUAL_PREFIX + 'unknown'));
 
-            itReturnsUndefined();
+            test('returns undefined', () => {
+                expect(subject()).toBeUndefined();
+            });
         });
     });
 

package/src/vite/plugins/shared-dependencies-plugin/shared-dependencies-plugin.ts

@@ -20,7 +20,8 @@ export function sharedDependenciesPlugin({
     css,
     metadataDir,
 }: SharedDependenciesPluginOptions): Plugin {
-    const CSS_VIRTUAL_PREFIX = '\0SHARED_DEPENDENCY_CSS';
+    const CSS_VIRTUAL_PREFIX = '\0shared-dependencies:css:';
+    const CSS_VIRTUAL_ID_PATTERN = new RegExp(`^${CSS_VIRTUAL_PREFIX}`);
 
     const dependencyNames = Object.keys(dependencies);
     const dependencySet = new Set(dependencyNames);
@@ -29,7 +30,7 @@ export function sharedDependenciesPlugin({
     let isProduction = false;
 
     return {
-        name: 'shared-dependencies',
+        name: 'st:shared-dependencies',
         enforce: 'pre',
 
         config(_, env) {
@@ -100,16 +101,16 @@ export function sharedDependenciesPlugin({
             }
         },
 
-        load(id: string) {
-            if (!id.startsWith(CSS_VIRTUAL_PREFIX)) {
-                return;
-            }
-            const name = id.slice(CSS_VIRTUAL_PREFIX.length);
-            const imports = cssEntries[name];
-            if (!imports) {
-                return;
-            }
-            return imports.map(p => `import '${p}';`).join('\n');
+        load: {
+            filter: { id: CSS_VIRTUAL_ID_PATTERN },
+            handler(id: string) {
+                const name = id.slice(CSS_VIRTUAL_PREFIX.length);
+                const imports = cssEntries[name];
+                if (!imports) {
+                    return;
+                }
+                return imports.map(p => `import '${p}';`).join('\n');
+            },
         },
 
         generateBundle(_options, bundle) {

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

@@ -7,7 +7,7 @@ export function styleUrlsPlugin(context: BuildContext): Plugin | undefined {
     const { isWebComponent } = context.package;
     if (isWebComponent && isProduction) {
         return {
-            name: 'style-urls',
+            name: 'st:style-urls',
             transformIndexHtml: {
                 order: 'post',
                 handler(html, ctx) {

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

@@ -3,7 +3,8 @@ import type { Plugin } from 'vite';
 import { BuildContext, virtualModules } from '../../core';
 
 export function virtualModulesPlugin(context: BuildContext): Plugin | undefined {
-    const VIRTUAL_PREFIX = '\0VIRTUAL';
+    const VIRTUAL_PREFIX = '\0virtual-modules:';
+    const VIRTUAL_ID_PATTERN = new RegExp(`^${VIRTUAL_PREFIX}`);
 
     const { destination } = context.package;
 
@@ -24,7 +25,7 @@ export function virtualModulesPlugin(context: BuildContext): Plugin | undefined
     }
 
     return {
-        name: 'virtual-modules',
+        name: 'st:virtual-modules',
         resolveId(source, importer) {
             if (pluginModules[source]) {
                 return VIRTUAL_PREFIX + source;
@@ -36,11 +37,11 @@ export function virtualModulesPlugin(context: BuildContext): Plugin | undefined
                 }
             }
         },
-        load(id) {
-            if (id.startsWith(VIRTUAL_PREFIX)) {
-                const idNoPrefix = id.slice(VIRTUAL_PREFIX.length);
-                return pluginModules[idNoPrefix];
-            }
+        load: {
+            filter: { id: VIRTUAL_ID_PATTERN },
+            handler(id) {
+                return pluginModules[id.slice(VIRTUAL_PREFIX.length)];
+            },
         },
     };
 }