@servicetitan/startup 36.3.1 → 37.0.0

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

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

@@ -0,0 +1,360 @@
+import { Eta } from 'eta';
+import { fs, vol } from 'memfs';
+import path from 'path';
+import { getSharedEntryPoints } from '../../../core';
+import type { ViteBuildContext } from '../../types';
+import { htmlPlugin } from '../html-plugin';
+
+const mockRender = jest.fn();
+
+jest.mock('fs', () => fs);
+jest.mock('eta', () => ({
+    Eta: jest.fn(() => ({ render: mockRender })),
+}));
+jest.mock('../../../core', () => ({
+    getSharedEntryPoints: jest.fn(),
+}));
+
+describe(htmlPlugin.name, () => {
+    const VIRTUAL_HTML_PATH = path.resolve('index.html');
+    const RENDERED_HTML = '<html><body>rendered</body></html>';
+
+    let context: ViteBuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        vol.fromJSON({});
+        mockRender.mockReturnValue(RENDERED_HTML);
+        jest.mocked(getSharedEntryPoints).mockReturnValue({ css: [], js: [] });
+        context = {
+            build: { name: 'my-app', isProduction: false },
+            package: { isWebComponent: false, source: 'src' },
+            bundlerConfig: { pluginOverrides: {} },
+        } as ViteBuildContext;
+    });
+
+    afterEach(() => vol.reset());
+
+    const subject = () => htmlPlugin(context);
+
+    test('returns plugin with correct name', () => {
+        expect(subject().name).toBe('html');
+    });
+
+    test('constructs Eta with default template directory', () => {
+        subject();
+
+        const defaultTemplateDir = path.resolve(__dirname, '../..');
+        expect(Eta).toHaveBeenCalledWith({ views: defaultTemplateDir });
+    });
+
+    describe.each(['index.ejs', 'index.html'])('when source contains %s', name => {
+        beforeEach(() => {
+            vol.fromJSON({ [path.resolve(context.package.source, name)]: '' });
+        });
+
+        test('constructs Eta with the source directory', () => {
+            subject();
+
+            expect(Eta).toHaveBeenCalledWith({ views: path.resolve(context.package.source) });
+        });
+    });
+
+    describe('when template is overridden', () => {
+        beforeEach(() => {
+            context.bundlerConfig.pluginOverrides.html = { template: '/templates/custom.ejs' };
+        });
+
+        test('constructs Eta with template directory', () => {
+            subject();
+
+            const templateDir = path.dirname(
+                path.resolve(context.bundlerConfig.pluginOverrides.html!.template!)
+            );
+
+            expect(Eta).toHaveBeenCalledWith({ views: templateDir });
+        });
+    });
+
+    describe('resolveId', () => {
+        let source: string;
+        let importer: string | undefined;
+
+        beforeEach(() => {
+            source = './app';
+            importer = undefined;
+        });
+
+        const subject = () => {
+            const plugin = htmlPlugin(context);
+            return (plugin.resolveId as Function).call(plugin, source, importer);
+        };
+
+        const itReturnsUndefined = () => {
+            test('returns undefined', () => {
+                expect(subject()).toBeUndefined();
+            });
+        };
+
+        itReturnsUndefined();
+
+        describe('when source is virtual HTML path', () => {
+            beforeEach(() => (source = VIRTUAL_HTML_PATH));
+
+            test('returns source', () => {
+                expect(subject()).toBe(VIRTUAL_HTML_PATH);
+            });
+        });
+
+        describe('when importer includes index.html', () => {
+            beforeEach(() => (importer = VIRTUAL_HTML_PATH));
+
+            itReturnsUndefined();
+
+            describe('when source JS file exists', () => {
+                let sourcePath: string;
+
+                beforeEach(() => {
+                    sourcePath = path.resolve(source + '.js');
+                    vol.fromJSON({ [sourcePath]: '' });
+                });
+
+                test('resolves to .js path', () => {
+                    expect(subject()).toBe(sourcePath);
+                });
+
+                describe('when source is not relative path', () => {
+                    beforeEach(() => {
+                        source = 'react';
+                        sourcePath = path.resolve(source + '.js');
+                        vol.fromJSON({ [sourcePath]: '' });
+                    });
+
+                    itReturnsUndefined();
+                });
+            });
+        });
+    });
+
+    describe('load', () => {
+        let id: string;
+
+        beforeEach(() => (id = ''));
+
+        const subject = () => {
+            const plugin = htmlPlugin(context);
+            return (plugin.load as Function).call(plugin, id);
+        };
+
+        test('does nothing', () => {
+            subject();
+
+            expect(mockRender).not.toHaveBeenCalled();
+        });
+
+        describe('when id is virtual HTML path', () => {
+            beforeEach(() => (id = VIRTUAL_HTML_PATH));
+
+            test('returns rendered HTML', () => {
+                expect(subject()).toBe(RENDERED_HTML);
+            });
+
+            test('passes context values to template', () => {
+                subject();
+
+                expect(mockRender).toHaveBeenCalledWith('index.html', {
+                    title: 'ServiceTitan',
+                    favicon: undefined,
+                    css: [],
+                    js: [],
+                    isProduction: context.build.isProduction,
+                    isWebComponent: context.package.isWebComponent,
+                    name: context.build.name,
+                });
+            });
+
+            describe.each(['index.ejs', 'index.html'])('when source contains %s', name => {
+                beforeEach(() => {
+                    vol.fromJSON({ [path.resolve(context.package.source, name)]: '' });
+                });
+
+                test(`renders the ${name} template`, () => {
+                    subject();
+
+                    expect(mockRender).toHaveBeenCalledWith(name, expect.anything());
+                });
+            });
+
+            describe('when source contains both index.ejs and index.html', () => {
+                beforeEach(() => {
+                    vol.fromJSON({
+                        [path.resolve(context.package.source, 'index.ejs')]: '',
+                        [path.resolve(context.package.source, 'index.html')]: '',
+                    });
+                });
+
+                test('renders index.ejs', () => {
+                    subject();
+
+                    expect(mockRender).toHaveBeenCalledWith('index.ejs', expect.anything());
+                });
+            });
+
+            describe('when template is overridden', () => {
+                beforeEach(() => {
+                    context.bundlerConfig.pluginOverrides.html = {
+                        template: '/templates/custom.ejs',
+                    };
+                });
+
+                test('renders the template', () => {
+                    subject();
+
+                    const name = path.basename(
+                        context.bundlerConfig.pluginOverrides.html!.template!
+                    );
+                    expect(mockRender).toHaveBeenCalledWith(name, expect.anything());
+                });
+            });
+
+            describe('when title is overridden', () => {
+                beforeEach(() => {
+                    context.bundlerConfig.pluginOverrides.html = { title: 'Custom Title' };
+                });
+
+                test('passes overridden title to template', () => {
+                    subject();
+
+                    expect(mockRender).toHaveBeenCalledWith(
+                        expect.anything(),
+                        expect.objectContaining({ title: 'Custom Title' })
+                    );
+                });
+            });
+
+            describe('when favicon is overridden', () => {
+                beforeEach(() => {
+                    context.bundlerConfig.pluginOverrides.html = { favicon: '/favicon.ico' };
+                });
+
+                test('passes overridden favicon to template', () => {
+                    subject();
+
+                    expect(mockRender).toHaveBeenCalledWith(
+                        expect.anything(),
+                        expect.objectContaining({ favicon: '/favicon.ico' })
+                    );
+                });
+            });
+        });
+    });
+
+    describe('configResolved', () => {
+        const publicDir = path.resolve('public');
+
+        const subject = () => {
+            const plugin = htmlPlugin(context);
+            (plugin.configResolved as Function).call(plugin, { publicDir });
+            (plugin.load as Function).call(plugin, VIRTUAL_HTML_PATH);
+        };
+
+        test('ignores favicon', () => {
+            subject();
+
+            expect(mockRender).toHaveBeenCalledWith(
+                expect.anything(),
+                expect.objectContaining({ favicon: undefined })
+            );
+        });
+
+        describe('when public directory contains favicon.ico', () => {
+            beforeEach(() => {
+                vol.fromJSON({ [path.join(publicDir, 'favicon.ico')]: '' });
+            });
+
+            test('configures favicon', () => {
+                subject();
+
+                expect(mockRender).toHaveBeenCalledWith(
+                    expect.anything(),
+                    expect.objectContaining({ favicon: '/favicon.ico' })
+                );
+            });
+
+            describe('when favicon is explicitly configured', () => {
+                const favicon = '/custom.ico';
+
+                beforeEach(() => {
+                    context.bundlerConfig.pluginOverrides.html = { favicon };
+                });
+
+                test('uses configured value', () => {
+                    subject();
+
+                    expect(mockRender).toHaveBeenCalledWith(
+                        expect.anything(),
+                        expect.objectContaining({ favicon })
+                    );
+                });
+            });
+        });
+    });
+
+    describe('configureServer', () => {
+        const TRANSFORMED_HTML = '<html>transformed</html>';
+
+        let req: any;
+        let res: any;
+        let next: jest.Mock;
+        let server: any;
+
+        beforeEach(() => {
+            req = { url: '/other' };
+            res = { end: jest.fn() };
+            next = jest.fn();
+
+            const plugin = htmlPlugin(context);
+            server = {
+                middlewares: { use: jest.fn() },
+                transformIndexHtml: jest.fn(() => Promise.resolve(TRANSFORMED_HTML)),
+            };
+            const postHook = (plugin.configureServer as Function).call(plugin, server);
+            postHook();
+        });
+
+        const subject = async () => {
+            const middleware = server.middlewares.use.mock.calls[0][0];
+            await middleware(req, res, next);
+        };
+
+        test('calls next middleware', async () => {
+            await subject();
+
+            expect(next).toHaveBeenCalled();
+        });
+
+        test('does not serve transformed HTML', async () => {
+            await subject();
+
+            expect(server.transformIndexHtml).not.toHaveBeenCalled();
+            expect(res.end).not.toHaveBeenCalled();
+        });
+
+        describe('when request URL ends with index.html', () => {
+            beforeEach(() => (req.url = '/index.html'));
+
+            test('serves transformed HTML', async () => {
+                await subject();
+
+                expect(server.transformIndexHtml).toHaveBeenCalledWith(req.url, RENDERED_HTML);
+                expect(res.end).toHaveBeenCalledWith(TRANSFORMED_HTML);
+            });
+
+            test('does not call next middleware', async () => {
+                await subject();
+
+                expect(next).not.toHaveBeenCalled();
+            });
+        });
+    });
+});

package/src/vite/plugins/__tests__/html-template.test.ts

@@ -0,0 +1,103 @@
+import path from 'path';
+import { getSharedEntryPoints } from '../../../core';
+import type { ViteBuildContext } from '../../types';
+import { htmlPlugin } from '../html-plugin';
+
+jest.mock('../../../core', () => ({
+    getSharedEntryPoints: jest.fn(),
+}));
+
+describe('Vite host HTML template', () => {
+    const VIRTUAL_HTML_PATH = path.resolve('index.html');
+    const css = ['shared/anvil2.bundle.css', 'shared/design-system.bundle.css'];
+    const js = ['shared/shared.bundle.js'];
+
+    let context: ViteBuildContext;
+
+    beforeEach(() => {
+        jest.clearAllMocks();
+        jest.mocked(getSharedEntryPoints).mockReturnValue({ css, js });
+        context = {
+            build: { name: 'my-mfe', isProduction: true },
+            package: { isWebComponent: false, source: __dirname },
+            bundlerConfig: { pluginOverrides: {} },
+        } as ViteBuildContext;
+    });
+
+    const subject = () => {
+        const plugin = htmlPlugin(context);
+        return (plugin.load as Function).call(plugin, VIRTUAL_HTML_PATH) as string;
+    };
+
+    test('renders the default title', () => {
+        expect(subject()).toContain('<title>ServiceTitan</title>');
+    });
+
+    test('renders the viewport meta tag', () => {
+        expect(subject()).toContain(
+            '<meta name="viewport" content="width=device-width,initial-scale=1" />'
+        );
+    });
+
+    describe('with a configured title', () => {
+        beforeEach(() => (context.bundlerConfig.pluginOverrides.html = { title: 'My App' }));
+
+        test('renders the configured title', () => {
+            expect(subject()).toContain('<title>My App</title>');
+        });
+    });
+
+    describe('with a configured favicon', () => {
+        beforeEach(
+            () => (context.bundlerConfig.pluginOverrides.html = { favicon: '/favicon.ico' })
+        );
+
+        test('renders the favicon link', () => {
+            expect(subject()).toContain('<link rel="icon" href="/favicon.ico" />');
+        });
+    });
+
+    test('renders each shared CSS link with crossorigin', () => {
+        const html = subject();
+
+        css.forEach(item =>
+            expect(html).toContain(
+                `<link href="./${item}" rel="stylesheet" crossorigin="anonymous" />`
+            )
+        );
+    });
+
+    test('renders each shared JS script', () => {
+        const html = subject();
+
+        js.forEach(item => expect(html).toContain(`<script src="./${item}"></script>`));
+    });
+
+    test('imports the host entry module', () => {
+        expect(subject()).toContain("import './dist/index'");
+    });
+
+    describe('when web component', () => {
+        beforeEach(() => {
+            context.package.isWebComponent = true;
+        });
+
+        test('imports the MFE entry module', () => {
+            expect(subject()).toContain("import './index'");
+        });
+
+        test('renders the custom element', () => {
+            expect(subject()).toContain(`<${context.build.name} />`);
+        });
+
+        test('initializes the element on load', () => {
+            expect(subject()).toContain(
+                `document.querySelector('${context.build.name}')?.provide(`
+            );
+        });
+
+        test('self-hosts', () => {
+            expect(subject()).toContain('window.__mfeSelfHosted__ = true');
+        });
+    });
+});

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

@@ -0,0 +1,107 @@
+import { BuildContext, checkResource } from '../../../core';
+import { EMPTY_PREFIX, ignoreModulesPlugin, THROW_PREFIX } from '../ignore-modules-plugin';
+
+jest.mock('../../../core', () => ({
+    checkResource: jest.fn(),
+}));
+
+describe(ignoreModulesPlugin.name, () => {
+    const moduleName = 'some-module';
+    const context = {} as BuildContext;
+    const checker = jest.fn();
+
+    beforeEach(() => {
+        jest.mocked(checkResource).mockReturnValue(checker);
+        checker.mockReturnValue(false);
+    });
+
+    const subject = () => ignoreModulesPlugin(context);
+
+    test('creates plugin with correct name', () => {
+        expect(subject().name).toBe('ignore-modules');
+    });
+
+    test('enforces pre order so it runs before built-in resolvers', () => {
+        expect(subject().enforce).toBe('pre');
+    });
+
+    describe('resolveId', () => {
+        let importer: string | undefined;
+
+        beforeEach(() => (importer = '/importer.ts'));
+
+        const subject = () => {
+            const plugin = ignoreModulesPlugin(context);
+            return (plugin.resolveId as Function).call(plugin, moduleName, importer);
+        };
+
+        const itReturnsUndefined = () => {
+            test('returns undefined', () => {
+                expect(subject()).toBeUndefined();
+            });
+        };
+
+        itReturnsUndefined();
+
+        describe('when checker returns "throw"', () => {
+            beforeEach(() => checker.mockReturnValue('throw'));
+
+            test('returns throw-prefixed virtual id', () => {
+                expect(subject()).toBe(`${THROW_PREFIX}${moduleName}`);
+            });
+
+            describe('when importer is not provided', () => {
+                beforeEach(() => (importer = undefined));
+
+                itReturnsUndefined();
+            });
+        });
+
+        describe('when checker returns "empty"', () => {
+            beforeEach(() => checker.mockReturnValue('empty'));
+
+            test('returns empty-prefixed virtual id', () => {
+                expect(subject()).toBe(`${EMPTY_PREFIX}${moduleName}`);
+            });
+
+            describe('when importer is not provided', () => {
+                beforeEach(() => (importer = undefined));
+
+                itReturnsUndefined();
+            });
+        });
+    });
+
+    describe('load', () => {
+        let id: string;
+
+        beforeEach(() => (id = moduleName));
+
+        const subject = () => {
+            const plugin = ignoreModulesPlugin(context);
+            return (plugin.load as Function).call(plugin, id);
+        };
+
+        test('returns undefined', () => {
+            expect(subject()).toBeUndefined();
+        });
+
+        describe('when id has throw prefix', () => {
+            beforeEach(() => (id = `${THROW_PREFIX}${moduleName}`));
+
+            test('returns module that throws MODULE_NOT_FOUND on evaluation', () => {
+                expect(subject()).toBe(
+                    `throw Object.assign(new Error("Cannot find module '${moduleName}'"), { code: 'MODULE_NOT_FOUND' });`
+                );
+            });
+        });
+
+        describe('when id has empty prefix', () => {
+            beforeEach(() => (id = `${EMPTY_PREFIX}${moduleName}`));
+
+            test('returns module with no exports', () => {
+                expect(subject()).toBe('export {};');
+            });
+        });
+    });
+});