@servicetitan/startup 36.3.0 → 36.4.0

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__/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();
+                });
+            });
+        });
+    });
+});

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

@@ -0,0 +1,138 @@
+import { fs, vol } from 'memfs';
+import path from 'path';
+import { type BuildContext, getExternals } from '../../../core';
+import { externalsPlugin } from '../externals-plugin';
+
+jest.mock('fs', () => fs);
+jest.mock('../../../core', () => ({
+    getExternals: jest.fn(),
+}));
+
+describe(externalsPlugin.name, () => {
+    const mockExternals: Record<string, string> = {
+        'react': 'globalReact',
+        '@scope/lib': 'globalScopeLib',
+    };
+    const proxyNodeModules = path.resolve('node_modules', '.startup', 'externals', 'node_modules');
+
+    let context: BuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        vol.fromJSON({});
+        jest.mocked(getExternals).mockReturnValue(mockExternals);
+        context = {
+            build: {},
+        } as BuildContext;
+    });
+
+    afterEach(() => vol.reset());
+
+    const subject = () => externalsPlugin(context);
+
+    test('returns plugin with correct name', () => {
+        expect(subject()!.name).toBe('externals');
+    });
+
+    test('enforces pre', () => {
+        expect(subject()!.enforce).toBe('pre');
+    });
+
+    test('writes proxy CJS module for each dependency', () => {
+        subject();
+
+        for (const [dependency, proxy] of Object.entries(mockExternals)) {
+            const cjsPath = path.join(proxyNodeModules, dependency, 'index.cjs');
+            expect(fs.readFileSync(cjsPath, 'utf8')).toBe(`module.exports = ${proxy};`);
+        }
+    });
+
+    test('writes proxy package.json for each dependency', () => {
+        subject();
+
+        for (const [dependency] of Object.entries(mockExternals)) {
+            const pkgPath = path.join(proxyNodeModules, dependency, 'package.json');
+            expect(JSON.parse(fs.readFileSync(pkgPath, 'utf8') as string)).toEqual({
+                name: dependency,
+                main: './index.cjs',
+            });
+        }
+    });
+
+    describe('when no externals exist', () => {
+        beforeEach(() => jest.mocked(getExternals).mockReturnValue(undefined));
+
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+    });
+
+    describe('when build is production', () => {
+        beforeEach(() => (context.build.isProduction = true));
+
+        describe('resolveId', () => {
+            let source: string;
+
+            const subject = () => {
+                const plugin = externalsPlugin(context)!;
+                return (plugin.resolveId as Function).call(plugin, source);
+            };
+
+            describe('with known dependency', () => {
+                const knownDependency = Object.keys(mockExternals)[0];
+
+                beforeEach(() => (source = knownDependency));
+
+                test('resolves to proxy module', () => {
+                    expect(subject()).toBe(
+                        path.join(proxyNodeModules, knownDependency, 'index.cjs')
+                    );
+                });
+            });
+
+            describe('with unknown dependency', () => {
+                beforeEach(() => (source = 'unknown'));
+
+                test('returns undefined', () => {
+                    expect(subject()).toBeUndefined();
+                });
+            });
+        });
+
+        test('does not define config', () => {
+            expect(subject()!.config).toBeUndefined();
+        });
+    });
+
+    describe('when build is not production', () => {
+        beforeEach(() => (context.build.isProduction = false));
+
+        describe('config', () => {
+            const subject = () => {
+                const plugin = externalsPlugin(context)!;
+                return (plugin.config as Function).call(plugin);
+            };
+
+            test('returns resolve aliases for each dependency', () => {
+                expect(subject().resolve.alias).toEqual([
+                    {
+                        find: /^react$/,
+                        replacement: path.join(proxyNodeModules, 'react'),
+                    },
+                    {
+                        find: /^@scope\/lib$/,
+                        replacement: path.join(proxyNodeModules, '@scope/lib'),
+                    },
+                ]);
+            });
+
+            test('includes dependencies in optimizeDeps', () => {
+                expect(subject().optimizeDeps.include).toEqual(Object.keys(mockExternals));
+            });
+        });
+
+        test('does not define resolveId', () => {
+            expect(subject()!.resolveId).toBeUndefined();
+        });
+    });
+});