@hubspot/ui-extensions-dev-server 0.10.2 → 1.0.0

package/dist/lib/__tests__/plugins/manifestPlugin.spec.js

@@ -0,0 +1,455 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { isExtensionFileMock } from "../../__mocks__/isExtensionFile.js";
+vi.mock('../../utils', async () => {
+    const originalModule = (await vi.importActual('../../utils'));
+    return {
+        ...originalModule,
+        isExtensionFile: isExtensionFileMock,
+    };
+});
+vi.mock('fs', () => {
+    const readFileSyncMock = vi.fn((filename) => JSON.stringify({
+        filename,
+    }));
+    return {
+        default: {
+            readFileSync: readFileSyncMock,
+        },
+        readFileSync: readFileSyncMock,
+    };
+});
+import manifestPlugin from "../../plugins/manifestPlugin.js";
+import fs from 'fs';
+import { MANIFEST_FILE } from "../../constants.js";
+import path from 'path';
+const bundleEntry = {
+    facadeModuleId: 'facadeModuleId',
+    moduleIds: ['foo', 'bar', 'baz', 'node_modules/lodash'],
+    modules: {
+        foo: {
+            renderedExports: ['bar'],
+        },
+        bar: {
+            renderedExports: ['baz'],
+        },
+        baz: {
+            renderedExports: [],
+        },
+        'node_modules/lodash': {
+            renderedExports: ['get'],
+        },
+    },
+};
+describe('manifestPlugin', () => {
+    let logger;
+    let options;
+    let bundle;
+    describe('metadata', () => {
+        beforeEach(() => {
+            logger = {
+                info: vi.fn(),
+                error: vi.fn(),
+                debug: vi.fn(),
+                warn: vi.fn(),
+            };
+            options = {
+                output: 'SomeFileName.js',
+                extensionPath: '/some/path/to/the/project',
+                logger,
+            };
+            bundle = {
+                [options.output]: bundleEntry,
+            };
+        });
+        afterEach(() => {
+            vi.clearAllMocks();
+        });
+        it('should return the correct metadata', () => {
+            const plugin = manifestPlugin({ output: '', logger });
+            expect(plugin).toStrictEqual(expect.objectContaining({
+                name: 'ui-extensions-manifest-generation-plugin',
+                enforce: 'post',
+                generateBundle: expect.any(Function),
+            }));
+        });
+        it('should handle extensionPath without trailing slash', () => {
+            const plugin = manifestPlugin({
+                ...options,
+                extensionPath: '/mock/extension/path',
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn();
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, bundle);
+            expect(fs.readFileSync).toHaveBeenCalledWith('/mock/extension/path/package-lock.json');
+        });
+        it('should handle extensionPath with trailing slash', () => {
+            const plugin = manifestPlugin({
+                ...options,
+                extensionPath: '/mock/extension/path/',
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn();
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, bundle);
+            expect(fs.readFileSync).toHaveBeenCalledWith('/mock/extension/path/package-lock.json');
+        });
+    });
+    describe('generateBundle', () => {
+        it('should load the package-lock.json file when no extensionsPath is provided', () => {
+            const plugin = manifestPlugin({ ...options, extensionPath: undefined });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn(); // Mock plugin function that gets bound
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, bundle);
+            expect(fs.readFileSync).toHaveBeenCalledWith(expect.stringMatching(/.*\/package-lock.json$/));
+            expect(fs.readFileSync).not.toHaveBeenCalledWith(expect.stringMatching(/.*\/package.json$/));
+        });
+        it('should load the package-lock.json file when extensionsPath is provided', () => {
+            const plugin = manifestPlugin(options);
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn(); // Mock plugin function that gets bound
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, bundle);
+            expect(fs.readFileSync).toHaveBeenCalledWith(`${options.extensionPath}/package-lock.json`);
+            expect(fs.readFileSync).not.toHaveBeenCalledWith(`${options.extensionPath}/package.json`);
+        });
+        it('should fallback to loading the package.json file if no lockfile is present', () => {
+            const plugin = manifestPlugin(options);
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn(); // Mock plugin function that gets bound
+            // @ts-expect-error TS thinks mockImplementationOnce doesn't exist on readFileSync
+            vi.mocked(fs.readFileSync).mockImplementationOnce((filename) => {
+                if (filename.includes('package-lock.json')) {
+                    throw new Error('YOU SHALL NOT PASS!');
+                }
+                return JSON.stringify({ filename });
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, bundle);
+            expect(fs.readFileSync).toHaveBeenCalledWith(`${options.extensionPath}/package-lock.json`);
+            expect(fs.readFileSync).toHaveBeenCalledWith(`${options.extensionPath}/package.json`);
+        });
+        it('should call emitFile with the manifest contents', () => {
+            const plugin = manifestPlugin(options);
+            let actualSource = '';
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn(({ source }) => {
+                actualSource = source;
+            }); // Mock plugin function that gets bound
+            vi.mocked(fs.readFileSync).mockImplementationOnce((filename) => {
+                return JSON.stringify({ filename });
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, bundle);
+            // @ts-expect-error TS thinks these aren't functions
+            expect(plugin.emitFile).toHaveBeenCalledTimes(1);
+            // @ts-expect-error TS thinks these aren't functions
+            expect(plugin.emitFile).toHaveBeenCalledWith(expect.objectContaining({
+                type: 'asset',
+                fileName: `${path.parse(options.output).name}-${MANIFEST_FILE}`,
+            }));
+            expect(JSON.parse(actualSource)).toEqual({
+                dataDeps: [],
+                entry: bundleEntry.facadeModuleId,
+                modules: {
+                    internal: [
+                        {
+                            module: 'foo',
+                            renderedExports: bundleEntry.modules.foo.renderedExports,
+                        },
+                        {
+                            module: 'bar',
+                            renderedExports: bundleEntry.modules.bar.renderedExports,
+                        },
+                        {
+                            module: 'baz',
+                            renderedExports: bundleEntry.modules.baz.renderedExports,
+                        },
+                    ],
+                    external: [
+                        {
+                            module: 'node_modules/lodash',
+                            renderedExports: bundleEntry.modules['node_modules/lodash'].renderedExports,
+                        },
+                    ],
+                },
+                package: {
+                    filename: expect.stringMatching(/.*\/package-lock.json$/),
+                },
+                variables: {},
+            });
+        });
+        it('should generate manifest for multiple bundles', () => {
+            const plugin = manifestPlugin(options);
+            let actualSource = '';
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn(({ source }) => {
+                actualSource = source;
+            }); // Mock plugin function that gets bound
+            const multiBundle = {
+                'bundle1.js': bundleEntry,
+                'bundle2.js': {
+                    facadeModuleId: 'facadeModuleId2',
+                    moduleIds: ['foo2', 'bar2'],
+                    modules: {
+                        foo2: {
+                            renderedExports: ['bar2'],
+                        },
+                        bar2: {
+                            renderedExports: [],
+                        },
+                    },
+                },
+            };
+            vi.mocked(fs.readFileSync).mockImplementationOnce((filename) => {
+                return JSON.stringify({ filename });
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, multiBundle);
+            // @ts-expect-error TS thinks these aren't functions
+            expect(plugin.emitFile).toHaveBeenCalledTimes(1);
+            // @ts-expect-error TS thinks these aren't functions
+            expect(plugin.emitFile).toHaveBeenCalledWith(expect.objectContaining({
+                type: 'asset',
+                fileName: `${path.parse(options.output).name}-${MANIFEST_FILE}`,
+            }));
+            const expectedManifest = {
+                'bundle1.js': {
+                    entry: 'facadeModuleId',
+                    modules: {
+                        internal: [
+                            {
+                                module: 'foo',
+                                renderedExports: bundleEntry.modules.foo.renderedExports,
+                            },
+                            {
+                                module: 'bar',
+                                renderedExports: bundleEntry.modules.bar.renderedExports,
+                            },
+                            {
+                                module: 'baz',
+                                renderedExports: bundleEntry.modules.baz.renderedExports,
+                            },
+                        ],
+                        external: [
+                            {
+                                module: 'node_modules/lodash',
+                                renderedExports: bundleEntry.modules['node_modules/lodash'].renderedExports,
+                            },
+                        ],
+                    },
+                },
+                'bundle2.js': {
+                    entry: 'facadeModuleId2',
+                    modules: {
+                        internal: [
+                            {
+                                module: 'foo2',
+                                renderedExports: multiBundle['bundle2.js'].modules.foo2.renderedExports,
+                            },
+                            {
+                                module: 'bar2',
+                                renderedExports: multiBundle['bundle2.js'].modules.bar2.renderedExports,
+                            },
+                        ],
+                        external: [],
+                    },
+                },
+                dataDeps: [],
+                package: {
+                    filename: expect.stringMatching(/.*\/package-lock.json$/),
+                },
+                variables: {},
+            };
+            expect(JSON.parse(actualSource)).toEqual(expectedManifest);
+        });
+        it('should include variables from manifestConfig when provided', () => {
+            const manifestConfig = {
+                variables: {
+                    ENV: 'development',
+                    DEBUG: true,
+                },
+            };
+            const optionsWithManifestConfig = { ...options, manifestConfig };
+            const plugin = manifestPlugin(optionsWithManifestConfig);
+            let actualSource = '';
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn(({ source }) => {
+                actualSource = source;
+            });
+            vi.mocked(fs.readFileSync).mockImplementationOnce((filename) => {
+                return JSON.stringify({ filename });
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, bundle);
+            expect(JSON.parse(actualSource)).toEqual({
+                dataDeps: [],
+                entry: bundleEntry.facadeModuleId,
+                modules: {
+                    internal: [
+                        {
+                            module: 'foo',
+                            renderedExports: bundleEntry.modules.foo.renderedExports,
+                        },
+                        {
+                            module: 'bar',
+                            renderedExports: bundleEntry.modules.bar.renderedExports,
+                        },
+                        {
+                            module: 'baz',
+                            renderedExports: bundleEntry.modules.baz.renderedExports,
+                        },
+                    ],
+                    external: [
+                        {
+                            module: 'node_modules/lodash',
+                            renderedExports: bundleEntry.modules['node_modules/lodash'].renderedExports,
+                        },
+                    ],
+                },
+                package: {
+                    filename: expect.stringMatching(/.*\/package-lock.json$/),
+                },
+                variables: {
+                    ENV: 'development',
+                    DEBUG: true,
+                },
+            });
+        });
+        it('should handle null variables in manifestConfig', () => {
+            const manifestConfig = {
+                variables: null,
+            };
+            const optionsWithManifestConfig = { ...options, manifestConfig };
+            const plugin = manifestPlugin(optionsWithManifestConfig);
+            let actualSource = '';
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn(({ source }) => {
+                actualSource = source;
+            });
+            vi.mocked(fs.readFileSync).mockImplementationOnce((filename) => {
+                return JSON.stringify({ filename });
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, bundle);
+            const manifest = JSON.parse(actualSource);
+            expect(manifest.variables).toEqual({});
+        });
+        it('should handle undefined manifestConfig', () => {
+            const optionsWithoutManifestConfig = {
+                ...options,
+                manifestConfig: undefined,
+            };
+            const plugin = manifestPlugin(optionsWithoutManifestConfig);
+            let actualSource = '';
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.emitFile = vi.fn(({ source }) => {
+                actualSource = source;
+            });
+            vi.mocked(fs.readFileSync).mockImplementationOnce((filename) => {
+                return JSON.stringify({ filename });
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.generateBundle({}, bundle);
+            const manifest = JSON.parse(actualSource);
+            expect(manifest.variables).toEqual({});
+        });
+        it('should handle empty variables object vs undefined variables', () => {
+            const manifestConfigWithEmptyVars = {
+                variables: {},
+            };
+            const plugin1 = manifestPlugin({
+                ...options,
+                manifestConfig: manifestConfigWithEmptyVars,
+            });
+            let actualSource1 = '';
+            // @ts-expect-error TS thinks these aren't functions
+            plugin1.emitFile = vi.fn(({ source }) => {
+                actualSource1 = source;
+            });
+            vi.mocked(fs.readFileSync).mockImplementationOnce((filename) => {
+                return JSON.stringify({ filename });
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin1.generateBundle({}, bundle);
+            const manifest1 = JSON.parse(actualSource1);
+            expect(manifest1.variables).toEqual({});
+            const manifestConfigWithUndefinedVars = {
+                variables: undefined,
+            };
+            const plugin2 = manifestPlugin({
+                ...options,
+                manifestConfig: manifestConfigWithUndefinedVars,
+            });
+            let actualSource2 = '';
+            // @ts-expect-error TS thinks these aren't functions
+            plugin2.emitFile = vi.fn(({ source }) => {
+                actualSource2 = source;
+            });
+            vi.mocked(fs.readFileSync).mockImplementationOnce((filename) => {
+                return JSON.stringify({ filename });
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            plugin2.generateBundle({}, bundle);
+            const manifest2 = JSON.parse(actualSource2);
+            expect(manifest2.variables).toEqual({});
+        });
+    });
+    describe('transform', () => {
+        let plugin;
+        const extensionPath = '/mock/extension/path';
+        beforeEach(() => {
+            logger = {
+                info: vi.fn(),
+                error: vi.fn(),
+                debug: vi.fn(),
+                warn: vi.fn(),
+            };
+            plugin = manifestPlugin({ output: 'output.js', extensionPath, logger });
+        });
+        afterEach(() => {
+            vi.clearAllMocks();
+        });
+        it('should parse extension files and collect data dependencies', () => {
+            const code = 'valid code';
+            const filename = `${extensionPath}/someFile.ts`;
+            // @ts-expect-error It does exist, I promise
+            plugin.parse = vi.fn(() => {
+                return {};
+            });
+            // @ts-expect-error Deep breath TS, it's ok
+            const result = plugin.transform(code, filename);
+            // @ts-expect-error It does exist, I promise
+            expect(plugin.parse).toBeCalledTimes(1);
+            // @ts-expect-error It does exist, I promise
+            expect(plugin.parse).toBeCalledWith(code);
+            expect(result.code).toBe(code);
+        });
+        it('should not parse non-extension files', () => {
+            const code = 'valid code';
+            const filename = 'node_modules/someFile.ts';
+            // @ts-expect-error It does exist, I promise
+            plugin.parse = vi.fn(() => {
+                return {};
+            });
+            // @ts-expect-error Deep breath TS, it's ok
+            const result = plugin.transform(code, filename);
+            // @ts-expect-error It does exist, I promise
+            expect(plugin.parse).not.toHaveBeenCalled();
+            expect(result.code).toBe(code);
+        });
+        it('should log an error if parsing fails', () => {
+            const code = 'invalid code';
+            const filename = `${extensionPath}/someFile.ts`;
+            // @ts-expect-error It does exist, I promise
+            plugin.parse = vi.fn(() => {
+                throw new Error('Parsing error');
+            });
+            // @ts-expect-error Deep breath TS, it's ok
+            const result = plugin.transform(code, filename);
+            expect(logger.error).toHaveBeenCalledWith(`Unable to parse source code for ${filename}, Error: Parsing error`);
+            expect(result.code).toBe(code);
+        });
+    });
+});

package/dist/lib/__tests__/plugins/relevantModulesPlugin.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/lib/__tests__/plugins/relevantModulesPlugin.spec.js

@@ -0,0 +1,81 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import relevantModulesPlugin, { getRelevantModules, } from "../../plugins/relevantModulesPlugin.js";
+describe('manifestPlugin', () => {
+    let logger;
+    let options;
+    let bundle;
+    beforeEach(() => {
+        logger = {
+            info: vi.fn(),
+            debug: vi.fn(),
+            warn: vi.fn(),
+            error: vi.fn(),
+        };
+        options = {
+            output: 'SomeFileName.js',
+            logger,
+        };
+        bundle = {
+            [options.output]: {
+                moduleIds: [
+                    'A.js',
+                    'B.js',
+                    'C.js',
+                    'node_modules/lodash',
+                    'node_modules/react',
+                ],
+            },
+            // @ts-expect-error We don't need all the other fields
+            empty: {
+                moduleIds: [],
+            },
+        };
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('metadata', () => {
+        it('should return the correct metadata', () => {
+            const plugin = relevantModulesPlugin(options);
+            expect(plugin).toStrictEqual(expect.objectContaining({
+                name: 'ui-extensions-relevant-modules-plugin',
+                generateBundle: expect.any(Function),
+            }));
+        });
+    });
+    describe('getRelevantModules', () => {
+        it('should return an empty array instead of undefined', () => {
+            const actual = getRelevantModules('this property does not exist');
+            expect(actual).toStrictEqual([]);
+        });
+    });
+    describe('generateBundle', () => {
+        it('should not update the relevantModules when output is not found in the bundle', () => {
+            const plugin = relevantModulesPlugin(options);
+            // @ts-expect-error TS thinks this isn't a function
+            plugin.generateBundle({}, {
+                output: 'no modules for this string',
+            });
+            const actual = getRelevantModules('something wrong');
+            expect(actual).toStrictEqual([]);
+            expect(logger.error).toBeCalledTimes(1);
+            expect(logger.error).toHaveBeenCalledWith('Invalid bundle format, please try saving the extension again.  If the problem persists try restarting `hs project dev`');
+        });
+        it('should not update the relevantModules when moduleIds is not defined', () => {
+            const plugin = relevantModulesPlugin({ output: 'empty', logger });
+            // @ts-expect-error TS thinks this isn't a function
+            plugin.generateBundle({}, bundle);
+            const actual = getRelevantModules(options.output);
+            expect(actual).toStrictEqual([]);
+            expect(logger.error).toBeCalledTimes(1);
+            expect(logger.error).toHaveBeenCalledWith('Unable to determine relevant files to watch, please try saving the extension again. If the problem persists try restarting `hs project dev`');
+        });
+        it('should update the relevantModules when generateBundle is called', () => {
+            const plugin = relevantModulesPlugin(options);
+            // @ts-expect-error TS thinks this isn't a function
+            plugin.generateBundle({}, bundle);
+            const actual = getRelevantModules(options.output);
+            expect(actual).toStrictEqual(['A.js', 'B.js', 'C.js']);
+        });
+    });
+});

package/dist/lib/__tests__/server.spec.d.ts

@@ -0,0 +1 @@
+export {};