@servicetitan/startup 36.3.1 → 37.0.0

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

@@ -0,0 +1,121 @@
+import { fs, vol } from 'memfs';
+import path from 'path';
+import type { BuildContext } from '../../../core';
+import { cleanPlugin } from '../clean-plugin';
+
+jest.mock('fs', () => fs);
+
+describe('[startup] cleanPlugin', () => {
+    let context: BuildContext;
+
+    beforeEach(() => {
+        vol.fromJSON({});
+        context = {
+            package: { isWebComponent: false, isExposeSharedDependencies: true },
+            build: { emitExposedDependencies: false },
+        } as BuildContext;
+    });
+
+    afterEach(() => vol.reset());
+
+    const plugin = () => cleanPlugin(context);
+
+    test('returns a plugin named clean', () => {
+        expect(plugin().name).toBe('clean');
+    });
+
+    test('applies only to build', () => {
+        expect(plugin().apply).toBe('build');
+    });
+
+    describe('config', () => {
+        const subject = () => (plugin().config as Function)();
+
+        test('sets build.emptyOutDir to false', () => {
+            expect(subject().build.emptyOutDir).toBe(false);
+        });
+
+        describe('when package is a web component', () => {
+            beforeEach(() => (context.package.isWebComponent = true));
+
+            test('sets build.emptyOutDir to true', () => {
+                expect(subject().build.emptyOutDir).toBe(true);
+            });
+        });
+    });
+
+    describe('buildStart', () => {
+        const outDir = '/dist/bundle';
+        const outputFiles = { [`${outDir}/foo.js`]: '', [`${outDir}/bar.css`]: '' };
+
+        beforeEach(() => vol.fromJSON(outputFiles));
+
+        const subject = () => {
+            const instance = plugin();
+            (instance.configResolved as Function).call(instance, { build: { outDir } });
+            (instance.buildStart as Function).call(instance);
+        };
+
+        function itRemovesAllOutputFiles() {
+            test('removes all output files', () => {
+                subject();
+
+                expect(fs.readdirSync(outDir)).toHaveLength(0);
+            });
+        }
+
+        itRemovesAllOutputFiles();
+
+        describe('when package is a web component', () => {
+            beforeEach(() => (context.package.isWebComponent = true));
+
+            test('removes nothing', () => {
+                subject();
+
+                expect(fs.readdirSync(outDir)).toHaveLength(Object.keys(outputFiles).length);
+            });
+        });
+
+        describe('when the output directory does not exist', () => {
+            beforeEach(() => vol.reset());
+
+            test('does not throw', () => {
+                expect(subject).not.toThrow();
+            });
+        });
+
+        describe('with shared dependencies', () => {
+            const sharedDependency = `${outDir}/shared/react.js`;
+
+            beforeEach(() => vol.fromJSON({ ...outputFiles, [sharedDependency]: '' }));
+
+            function getAllFilesSync(dirPath: string) {
+                const entries = fs.readdirSync(dirPath, {
+                    recursive: true,
+                    withFileTypes: true,
+                }) as unknown as { parentPath: string; name: string; isFile(): boolean }[];
+                return entries
+                    .filter(entry => entry.isFile())
+                    .map(entry => path.join(entry.parentPath, entry.name));
+            }
+
+            test('keeps only shared dependencies', () => {
+                subject();
+
+                expect(getAllFilesSync(outDir)).toEqual([path.normalize(sharedDependency)]);
+            });
+
+            describe('when emitting exposed dependencies', () => {
+                beforeEach(() => (context.build.emitExposedDependencies = true));
+
+                itRemovesAllOutputFiles();
+            });
+
+            describe('when not exposing shared dependencies', () => {
+                beforeEach(() => (context.package.isExposeSharedDependencies = false));
+
+                itRemovesAllOutputFiles();
+            });
+        });
+    });
+});

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

@@ -0,0 +1,119 @@
+import type { BuildContext } from '../../../core';
+import { cssInjectorPlugin } from '../css-injector-plugin';
+
+describe(cssInjectorPlugin.name, () => {
+    let context: BuildContext;
+
+    beforeEach(() => {
+        context = {
+            build: { name: 'my-component', isProduction: false },
+            package: { isWebComponent: true },
+        } as BuildContext;
+    });
+
+    const subject = () => cssInjectorPlugin(context);
+
+    test('returns a plugin with correct name', () => {
+        expect(subject()!.name).toBe('mfe-css-injector');
+    });
+
+    test('enforces post order', () => {
+        expect(subject()!.enforce).toBe('post');
+    });
+
+    describe('when package is not a web component', () => {
+        beforeEach(() => (context.package.isWebComponent = false));
+
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    });
+
+    describe('when build is production', () => {
+        beforeEach(() => (context.build.isProduction = true));
+
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    });
+
+    describe('transform', () => {
+        const viteId = '/path/to/component.css';
+
+        const viteCssOutput = [
+            `import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"`,
+            `const __vite__id = ${JSON.stringify(viteId)}`,
+            `const __vite__css = ".foo { color: red; }"`,
+            `__vite__updateStyle(__vite__id, __vite__css)`,
+            `import.meta.hot.accept()`,
+            `import.meta.hot.prune(() => __vite__removeStyle(__vite__id))`,
+        ].join('\n');
+
+        const pluginContext = {
+            error: jest.fn((msg: string) => {
+                throw new Error(msg);
+            }),
+        };
+
+        const transform = (code: string, id: string) => {
+            const plugin = subject()!;
+            return (plugin.transform as Function).call(pluginContext, code, id);
+        };
+
+        test('replaces updateStyle with MfeStyleRegistry import', () => {
+            const result = transform(viteCssOutput, viteId);
+
+            expect(result.code).toContain(
+                `import { MfeStyleRegistry as __mfe__Registry } from '@servicetitan/web-components'`
+            );
+        });
+
+        test('replaces updateStyle call with injectSheet using component name', () => {
+            const result = transform(viteCssOutput, viteId);
+
+            expect(result.code).toContain(
+                `__mfe__Registry.for("my-component").injectSheet(__vite__id, __vite__css)`
+            );
+        });
+
+        test('removes removeStyle prune handler', () => {
+            const result = transform(viteCssOutput, viteId);
+
+            expect(result.code).not.toContain('__vite__removeStyle');
+        });
+
+        test('preserves hot.accept()', () => {
+            const result = transform(viteCssOutput, viteId);
+
+            expect(result.code).toContain('import.meta.hot.accept()');
+        });
+
+        test('skips non-CSS files', () => {
+            expect(transform(viteCssOutput, '/path/to/file.ts')).toBeUndefined();
+        });
+
+        test('skips CSS files without vite style markers', () => {
+            expect(transform('export default ".foo {}"', viteId)).toBeUndefined();
+        });
+
+        test.each(['.css', '.less', '.scss'])('transforms %s files', ext => {
+            const result = transform(viteCssOutput, `/path/to/file${ext}`);
+
+            expect(result).toBeDefined();
+            expect(result.code).toContain('__mfe__Registry');
+        });
+
+        test('errors when transform produces no change', () => {
+            const unrecognizedOutput = [
+                `import { someNewApi } from "/@vite/client"`,
+                `const __vite__id = "/path/to/style.css"`,
+                `const __vite__css = ".foo { color: red; }"`,
+                `__vite__updateStyle(__vite__id, __vite__css)`,
+            ].join('\n');
+
+            expect(() => transform(unrecognizedOutput, '/path/to/style.css')).toThrow(
+                /Vite's internal output format may have changed/
+            );
+        });
+    });
+});

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

@@ -0,0 +1,83 @@
+import { BuildContext } from '../../../core';
+import { designSystemGuardPlugin } from '../design-system-guard-plugin';
+
+describe(designSystemGuardPlugin.name, () => {
+    let context: BuildContext;
+
+    beforeEach(() => {
+        context = {
+            package: {
+                isExposeSharedDependencies: true,
+                sharedDependencies: { '@servicetitan/design-system': '1.0.0' },
+            },
+            build: { emitExposedDependencies: false },
+        } as unknown as BuildContext;
+    });
+
+    const subject = () => designSystemGuardPlugin(context);
+
+    test('creates plugin with correct name', () => {
+        expect(subject().name).toBe('design-system-guard');
+    });
+
+    test('enforces pre order so it runs before built-in resolvers', () => {
+        expect(subject().enforce).toBe('pre');
+    });
+
+    describe('resolveId', () => {
+        let pluginContext: { error: jest.Mock };
+        let source: string;
+        let importer: string | undefined;
+
+        beforeEach(() => {
+            pluginContext = { error: jest.fn() };
+            source = './design-system.css';
+            importer = '/src/app.tsx';
+        });
+
+        const subject = () => {
+            const plugin = designSystemGuardPlugin(context);
+            return (plugin.resolveId as Function).call(pluginContext, source, importer);
+        };
+
+        function itReportsNoError() {
+            test('reports no error', () => {
+                subject();
+
+                expect(pluginContext.error).not.toHaveBeenCalled();
+            });
+        }
+
+        test('reports error when design-system.css is imported', () => {
+            subject();
+
+            expect(pluginContext.error).toHaveBeenCalledWith(
+                'do not import design-system.css in "app"; it is automatically included as a shared dependency'
+            );
+        });
+
+        describe('when other css is imported', () => {
+            beforeEach(() => (source = './styles.css'));
+
+            itReportsNoError();
+        });
+
+        describe('when the package does not expose shared dependencies', () => {
+            beforeEach(() => (context.package.isExposeSharedDependencies = false));
+
+            itReportsNoError();
+        });
+
+        describe('when the design system is not a shared dependency', () => {
+            beforeEach(() => (context.package.sharedDependencies = {}));
+
+            itReportsNoError();
+        });
+
+        describe('when building the shared dependencies bundle', () => {
+            beforeEach(() => (context.build.emitExposedDependencies = true));
+
+            itReportsNoError();
+        });
+    });
+});

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

@@ -0,0 +1,255 @@
+import { fs, vol } from 'memfs';
+import path from 'path';
+import { type BuildContext, getBundleType } from '../../../core';
+import { log } from '../../../utils';
+import { devServerRoutingPlugin } from '../dev-server-routing-plugin';
+
+jest.mock('fs', () => fs);
+jest.mock('../../../core', () => ({
+    getBundleType: jest.fn(),
+}));
+jest.mock('../../../utils', () => ({
+    log: { info: jest.fn(), timestamp: '00:00:00' },
+}));
+
+describe(devServerRoutingPlugin.name, () => {
+    const SHARED_DEPS_DIR = 'shared';
+    const destination = 'dist/bundle/full';
+    const destDir = path.resolve(destination);
+    const outDir = path.resolve('dist/bundle/full');
+    const outDirRelative = path.relative(process.cwd(), outDir);
+
+    let context: BuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        vol.fromJSON({});
+        jest.mocked(getBundleType).mockReturnValue(SHARED_DEPS_DIR);
+        context = {
+            build: { name: 'test-app' },
+            package: { destination },
+        } as BuildContext;
+    });
+
+    afterEach(() => {
+        jest.restoreAllMocks();
+        vol.reset();
+    });
+
+    const subject = () => devServerRoutingPlugin(context);
+
+    test('returns plugin with correct name', () => {
+        expect(subject().name).toBe('dev-server-routing');
+    });
+
+    const setupMiddleware = (resolvedOutDir: string) => {
+        const plugin = subject();
+        (plugin.configResolved as Function).call(plugin, {
+            build: { outDir: resolvedOutDir },
+        });
+
+        let middleware!: Function;
+        const server: any = {
+            middlewares: {
+                use: (handler: Function) => (middleware = handler),
+            },
+        };
+        (plugin.configureServer as Function).call(plugin, server);
+        return middleware;
+    };
+
+    describe('configResolved', () => {
+        test('captures outDir for use by configureServer', () => {
+            const middleware = setupMiddleware(outDir);
+            const req: any = { url: `/${SHARED_DEPS_DIR}/dep.js` };
+            const originalUrl = req.url;
+
+            middleware(req, {}, jest.fn());
+
+            expect(req.url).toBe(`/${outDirRelative}/${originalUrl.slice(1)}`);
+        });
+    });
+
+    describe('configureServer', () => {
+        const itPreservesUnmatchedUrls = () => {
+            test('preserves unmatched URL', () => {
+                const middleware = setupMiddleware(outDir);
+                const req: any = { url: '/other/path' };
+                const originalUrl = req.url;
+
+                middleware(req, {}, jest.fn());
+
+                expect(req.url).toBe(originalUrl);
+            });
+        };
+
+        test('logs request', () => {
+            const middleware = setupMiddleware(outDir);
+
+            middleware({ method: 'GET', url: '/anything' }, {}, jest.fn());
+
+            expect(log.info).toHaveBeenCalled();
+        });
+
+        test('calls next middleware', () => {
+            const middleware = setupMiddleware(outDir);
+            const next = jest.fn();
+
+            middleware({ url: '/anything' }, {}, next);
+
+            expect(next).toHaveBeenCalled();
+        });
+
+        describe('when package is a web component', () => {
+            beforeEach(() => (context.package.isWebComponent = true));
+
+            test('strips outDir prefix from URL', () => {
+                const middleware = setupMiddleware(outDir);
+                const req: any = { url: `/${outDirRelative}/index.js` };
+
+                middleware(req, {}, jest.fn());
+
+                expect(req.url).toBe('/index.js');
+            });
+
+            itPreservesUnmatchedUrls();
+        });
+
+        describe('when package is not a web component', () => {
+            beforeEach(() => (context.package.isWebComponent = false));
+
+            test('rewrites shared dependencies URL to outDir', () => {
+                const middleware = setupMiddleware(outDir);
+                const req: any = { url: `/${SHARED_DEPS_DIR}/dep.js` };
+
+                middleware(req, {}, jest.fn());
+
+                expect(req.url).toBe(`/${outDirRelative}/${SHARED_DEPS_DIR}/dep.js`);
+            });
+
+            itPreservesUnmatchedUrls();
+        });
+    });
+
+    describe('configurePreviewServer', () => {
+        const setupPreviewServer = () => {
+            const plugin = subject();
+            const uses: { path?: string; handler: Function }[] = [];
+            const server: any = {
+                middlewares: {
+                    use: (...args: any[]) => {
+                        if (typeof args[0] === 'string') {
+                            uses.push({ path: args[0], handler: args[1] });
+                        } else {
+                            uses.push({ handler: args[0] });
+                        }
+                    },
+                },
+            };
+            (plugin.configurePreviewServer as Function).call(plugin, server);
+            return {
+                logger: uses.find(u => !u.path)!.handler,
+                staticFiles: uses.find(u => u.path)?.handler,
+            };
+        };
+
+        test('logs request and calls next middleware', () => {
+            const { logger } = setupPreviewServer();
+            const req = { method: 'GET', url: '/index.html' };
+            const next = jest.fn();
+
+            logger(req, {}, next);
+
+            expect(log.info).toHaveBeenCalled();
+            expect(next).toHaveBeenCalled();
+        });
+
+        describe('when package is not a web component', () => {
+            beforeEach(() => (context.package.isWebComponent = false));
+
+            test('only registers logging middleware', () => {
+                const { logger, staticFiles } = setupPreviewServer();
+
+                expect(logger).toBeDefined();
+                expect(staticFiles).toBeUndefined();
+            });
+        });
+
+        describe('when package is a web component', () => {
+            beforeEach(() => (context.package.isWebComponent = true));
+
+            const serveStaticFile = (fileName: string) => {
+                const mockStream = { pipe: jest.fn() };
+                jest.spyOn(fs, 'createReadStream').mockReturnValue(mockStream as any);
+                const { staticFiles } = setupPreviewServer();
+                const res = { setHeader: jest.fn() };
+                staticFiles!({ url: `/${fileName}` }, res, jest.fn());
+                return { res, mockStream };
+            };
+
+            describe.each([
+                ['file.js', 'application/javascript'],
+                ['file.css', 'text/css'],
+                ['file.json', 'application/json'],
+            ])('when requested file is %s', (fileName, contentType) => {
+                beforeEach(() => {
+                    vol.fromJSON({ [path.join(destDir, fileName)]: 'content' });
+                });
+
+                test(`serves file as ${contentType}`, () => {
+                    const { res, mockStream } = serveStaticFile(fileName);
+
+                    expect(res.setHeader).toHaveBeenCalledWith('Content-Type', contentType);
+                    expect(mockStream.pipe).toHaveBeenCalledWith(res);
+                });
+            });
+
+            describe('when requested file has unrecognized extension', () => {
+                const fileName = 'file.txt';
+
+                beforeEach(() => {
+                    vol.fromJSON({ [path.join(destDir, fileName)]: 'content' });
+                });
+
+                test('serves file without content type', () => {
+                    const { res, mockStream } = serveStaticFile(fileName);
+
+                    expect(res.setHeader).not.toHaveBeenCalled();
+                    expect(mockStream.pipe).toHaveBeenCalledWith(res);
+                });
+            });
+
+            describe('when requested file does not exist', () => {
+                beforeEach(() => vol.reset());
+
+                test('calls next middleware', () => {
+                    const { staticFiles } = setupPreviewServer();
+                    const next = jest.fn();
+
+                    staticFiles!({ url: '/missing.js' }, {}, next);
+
+                    expect(next).toHaveBeenCalled();
+                });
+            });
+
+            describe('when requested URL traverses outside the mounted directory', () => {
+                beforeEach(() => {
+                    vol.fromJSON({
+                        [path.resolve(destDir, '../outside.js')]: 'content',
+                    });
+                });
+
+                test('does not serve the file', () => {
+                    const createReadStream = jest.spyOn(fs, 'createReadStream');
+                    const { staticFiles } = setupPreviewServer();
+                    const next = jest.fn();
+
+                    staticFiles!({ url: '/../outside.js' }, {}, next);
+
+                    expect(next).toHaveBeenCalled();
+                    expect(createReadStream).not.toHaveBeenCalled();
+                });
+            });
+        });
+    });
+});