@hubspot/ui-extensions-dev-server 1.1.0 → 1.1.1

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

@@ -0,0 +1,111 @@
+import { tmpdir } from 'os';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import { build } from 'vite';
+import { describe, expect, it, vi } from 'vitest';
+import codeCheckingPlugin from "../../plugins/codeCheckingPlugin.js";
+import { ROLLUP_OPTIONS } from "../../constants.js";
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const fixturesDir = path.join(__dirname, 'fixtures/codeCheckingPlugin');
+async function runViteBuild(fixtureFile, plugin) {
+    const fixturePath = path.join(fixturesDir, fixtureFile);
+    const outputDir = path.join(tmpdir(), `vite-test-${Date.now()}-${Math.random().toString(36).substring(7)}`);
+    await build({
+        logLevel: 'silent',
+        root: fixturesDir,
+        build: {
+            lib: {
+                entry: fixturePath,
+                name: 'test',
+                formats: ['es'],
+                fileName: () => 'test.js',
+            },
+            rollupOptions: {
+                ...ROLLUP_OPTIONS,
+                external: [
+                    ...(ROLLUP_OPTIONS.external || []),
+                    '@hubspot/ui-extensions',
+                    'other-package',
+                ],
+                plugins: [plugin],
+            },
+            outDir: outputDir,
+            emptyOutDir: true,
+            write: false,
+        },
+    });
+}
+const createPlugin = (options) => {
+    const logger = options?.logger || {
+        info: vi.fn(),
+        error: vi.fn(),
+        debug: vi.fn(),
+        warn: vi.fn(),
+    };
+    return {
+        logger,
+        plugin: codeCheckingPlugin({ logger, ...options }),
+    };
+};
+describe('codeCheckingPlugin', () => {
+    describe('with warning', () => {
+        it('should log a warning when entry point has no imports from @hubspot/ui-extensions', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('emptyFile.js', plugin);
+            expect(logger.warn).toHaveBeenCalledTimes(1);
+            const warnCall = logger.warn.mock
+                .calls[0][0];
+            expect(warnCall).toContain('WARNING:');
+            expect(warnCall).toContain('hubspot');
+            expect(warnCall).toContain('@hubspot/ui-extensions');
+        });
+        it('should log a warning when code does not contain @hubspot/ui-extensions package at all', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('withoutHubspotPackage.js', plugin);
+            expect(logger.warn).toHaveBeenCalledTimes(1);
+        });
+        it('should log a warning when code imports from @hubspot/ui-extensions but does not import hubspot', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('withoutHubspotImport.js', plugin);
+            expect(logger.warn).toHaveBeenCalledTimes(1);
+        });
+    });
+    describe('without warning', () => {
+        it('should not log a warning when hubspot is imported from a separate entry point', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('withHubspotImportInSeparateEntry.js', plugin);
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+        it('should not log a warning when hubspot is imported from @hubspot/ui-extensions', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('withHubspotImport.js', plugin);
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+        it('should not log a warning when hubspot is imported alongside other exports from @hubspot/ui-extensions', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('withHubspotAndOtherExports.js', plugin);
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+        it('should not log a warning when hubspot is imported with other exports in any order', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('withHubspotInMixedExports.js', plugin);
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+        it('should not log a warning when hubspot is imported using single quotes', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('withHubspotImportSingleQuotes.js', plugin);
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+        it('should not log a warning when using namespace import from @hubspot/ui-extensions', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('withNamespaceImport.js', plugin);
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+        it('should not log a warning when hubspot is imported in TypeScript files', async () => {
+            const { logger, plugin } = createPlugin();
+            await runViteBuild('ts-withHubspotImport.ts', plugin);
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
+    });
+});

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

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

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

@@ -0,0 +1,345 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+vi.mock('../../plugins/relevantModulesPlugin', () => {
+    return {
+        __esModule: true,
+        getRelevantModules: () => {
+            return ['extension.js', 'helper-file.js'];
+        },
+        default: () => {
+            return {
+                name: 'ui-extensions-relevant-modules-plugin',
+            };
+        },
+    };
+});
+vi.mock('vite');
+import devBuildPlugin from "../../plugins/devBuildPlugin.js";
+import { build } from 'vite';
+import { PLATFORM_VERSION, WEBSOCKET_MESSAGE_VERSION, } from "../../constants.js";
+import { DevServerState } from "../../DevServerState.js";
+import { transformedUnifiedCardOneConfig } from "../fixtures/extensionConfig.js";
+import { urls } from "../fixtures/urls.js";
+describe('devBuildPlugin', () => {
+    let options;
+    let plugin;
+    let server;
+    let logger;
+    let mockWebSocket;
+    beforeEach(() => {
+        logger = {
+            info: vi.fn(),
+            error: vi.fn(),
+            debug: vi.fn(),
+            warn: vi.fn(),
+        };
+        // Create mock ExtensionsWebSocket
+        mockWebSocket = {
+            broadcast: vi.fn(),
+            onConnection: vi.fn(),
+            clientCount: 1,
+        };
+        options = {
+            devServerState: new DevServerState({
+                extensionConfigs: [transformedUnifiedCardOneConfig],
+                accountId: 88888,
+                platformVersion: PLATFORM_VERSION.V20232,
+                expressPort: 1234,
+                logger,
+                urls,
+            }),
+        };
+        // Set the mock websocket on the devServerState
+        // @ts-expect-error Setting private property for testing
+        options.devServerState._mutableState.extensionsWebSocket =
+            mockWebSocket;
+        plugin = devBuildPlugin(options);
+        server = {};
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('metadata', () => {
+        it('should create the correct plugin metadata', () => {
+            expect(plugin).toStrictEqual(expect.objectContaining({
+                name: 'ui-extensions-dev-build-plugin',
+                enforce: 'pre',
+                configureServer: expect.any(Function),
+                handleHotUpdate: expect.any(Function),
+                buildEnd: expect.any(Function),
+            }));
+        });
+    });
+    describe('configureServer', () => {
+        it('should setup event handlers and perform initial build', async () => {
+            // @ts-expect-error TS thinks these aren't functions
+            await plugin.configureServer(server);
+            options.devServerState.triggerWebSocketSetup();
+            expect(mockWebSocket.onConnection).toHaveBeenCalledTimes(1);
+            expect(mockWebSocket.onConnection).toHaveBeenCalledWith(expect.any(Function));
+            // Should also perform initial build for all extensions
+            expect(build).toHaveBeenCalledTimes(1);
+        });
+        it('should broadcast start messages when a client connects', async () => {
+            // @ts-expect-error TS thinks these aren't functions
+            await plugin.configureServer(server);
+            options.devServerState.triggerWebSocketSetup();
+            // Get the connection handler that was registered
+            const connectionHandler = mockWebSocket.onConnection.mock.calls[0][0];
+            // Simulate a connection
+            connectionHandler();
+            const baseMessage = options.devServerState.extensionsMetadata[0].baseMessage;
+            expect(mockWebSocket.broadcast).toHaveBeenCalledWith({
+                event: 'start',
+                ...baseMessage,
+                version: WEBSOCKET_MESSAGE_VERSION,
+            });
+            expect(logger.info).toHaveBeenCalledWith('Browser connected and listening for bundle updates');
+        });
+    });
+    describe('handleHotUpdate', () => {
+        it('should trigger a vite build', async () => {
+            // @ts-expect-error TS thinks these aren't functions
+            await plugin.handleHotUpdate({ file: 'extension.js', server });
+            expect(build).toHaveBeenCalledTimes(1);
+            const extensionConfig = options.devServerState.extensionsMetadata[0].config;
+            expect(build).toHaveBeenCalledWith(expect.objectContaining({
+                mode: 'development',
+                logLevel: 'warn',
+                clearScreen: false,
+                define: expect.objectContaining({
+                    'process.env.NODE_ENV': expect.any(String),
+                }),
+                esbuild: expect.objectContaining({
+                    tsconfigRaw: expect.any(Object),
+                }),
+                build: expect.objectContaining({
+                    lib: {
+                        entry: extensionConfig.data.module.file,
+                        name: extensionConfig.output,
+                        formats: ['iife'],
+                        fileName: expect.any(Function),
+                    },
+                    rollupOptions: expect.objectContaining({
+                        plugins: expect.arrayContaining([
+                            expect.objectContaining({
+                                name: 'ui-extensions-manifest-generation-plugin',
+                            }),
+                            expect.objectContaining({
+                                name: 'ui-extensions-code-checking-plugin',
+                            }),
+                            expect.objectContaining({
+                                name: 'ui-extensions-friendly-logging-plugin',
+                            }),
+                            expect.objectContaining({
+                                name: 'ui-extensions-relevant-modules-plugin',
+                            }),
+                            expect.objectContaining({
+                                name: 'ui-extensions-code-blocking-plugin',
+                            }),
+                        ]),
+                    }),
+                    outDir: options.devServerState.outputDir,
+                    emptyOutDir: false,
+                    minify: false,
+                    sourcemap: 'inline',
+                }),
+            }));
+        });
+        it('should broadcast error message on build failure', async () => {
+            const error = {
+                plugin: 'vite:esbuild',
+                errors: ['you did something wrong'],
+                frame: 'It broke on this line',
+                loc: {
+                    column: 1,
+                    line: 5,
+                },
+                id: 'this is the file where things broke',
+            };
+            vi.mocked(build).mockImplementationOnce(() => {
+                // eslint-disable-next-line no-throw-literal
+                throw error;
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            await plugin.handleHotUpdate({ file: 'extension.js', server });
+            expect(mockWebSocket.broadcast).toHaveBeenCalled();
+            const baseMessage = options.devServerState.extensionsMetadata[0].baseMessage;
+            expect(mockWebSocket.broadcast).toHaveBeenCalledWith({
+                event: 'error',
+                ...baseMessage,
+                error: {
+                    details: {
+                        errors: error.errors,
+                        file: error.id,
+                        formattedError: error.frame,
+                        location: error.loc,
+                    },
+                },
+                version: WEBSOCKET_MESSAGE_VERSION,
+            });
+        });
+        it('should not broadcast when error is from ui-extensions plugin', async () => {
+            const error = {
+                plugin: 'ui-extensions-some-plugin-that-threw-an-error',
+            };
+            vi.mocked(build).mockImplementationOnce(() => {
+                throw error;
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            await plugin.handleHotUpdate({ file: 'extension.js', server });
+            expect(mockWebSocket.broadcast).not.toHaveBeenCalled();
+        });
+        it('should not trigger a build if it is not a relevant file', async () => {
+            const file = 'card config file';
+            plugin = devBuildPlugin({
+                ...options,
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            await plugin.handleHotUpdate({ server, file });
+            expect(build).not.toHaveBeenCalled();
+        });
+        it('should not broadcast if there are no connected clients', async () => {
+            // Set clientCount to 0
+            mockWebSocket.clientCount = 0;
+            // @ts-expect-error TS thinks these aren't functions
+            await plugin.handleHotUpdate({
+                server,
+                file: 'extension.js',
+            });
+            expect(mockWebSocket.broadcast).not.toHaveBeenCalled();
+            expect(logger.debug).toHaveBeenCalledWith('Bundle updated, no browsers connected to notify');
+        });
+        it('should broadcast update message to connected clients on build success', async () => {
+            // @ts-expect-error TS thinks these aren't functions
+            await plugin.handleHotUpdate({
+                server,
+                file: 'extension.js',
+            });
+            expect(mockWebSocket.broadcast).toHaveBeenCalledTimes(1);
+            const baseMessage = options.devServerState.extensionsMetadata[0].baseMessage;
+            expect(mockWebSocket.broadcast).toHaveBeenCalledWith({
+                event: 'update',
+                ...baseMessage,
+                version: WEBSOCKET_MESSAGE_VERSION,
+            });
+            expect(logger.debug).toHaveBeenCalledWith('Bundle updated, notifying connected browsers');
+        });
+    });
+    describe('buildEnd', () => {
+        it('should log an error if one is provided', () => {
+            const error = 'Error message';
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.buildEnd(error);
+            expect(logger.error).toHaveBeenCalledWith(error);
+        });
+        it('should broadcast shutdown message when websocket is available', () => {
+            // @ts-expect-error TS thinks these aren't functions
+            plugin.buildEnd(null);
+            const baseMessage = options.devServerState.extensionsMetadata[0].baseMessage;
+            expect(mockWebSocket.broadcast).toHaveBeenCalledWith({
+                event: 'shutdown',
+                ...baseMessage,
+                version: WEBSOCKET_MESSAGE_VERSION,
+            });
+            expect(logger.debug).toHaveBeenCalledWith('Sending shutdown message to connected browsers');
+        });
+        it('should not crash if websocket is not initialized', () => {
+            // Remove the websocket
+            // @ts-expect-error Setting private property for testing
+            options.devServerState._mutableState.extensionsWebSocket = null;
+            expect(() => {
+                // @ts-expect-error TS thinks these aren't functions
+                plugin.buildEnd(null);
+            }).not.toThrow();
+        });
+    });
+    describe('handleBuildError', () => {
+        it('should not crash if websocket is not initialized during configureServer', async () => {
+            // Remove the websocket to simulate it not being initialized yet
+            // @ts-expect-error Setting private property for testing
+            options.devServerState._mutableState.extensionsWebSocket = null;
+            const error = {
+                plugin: 'vite:esbuild',
+                errors: ['build error'],
+                frame: 'Error on this line',
+                loc: { column: 1, line: 5 },
+                id: 'src/file.ts',
+            };
+            vi.mocked(build).mockImplementationOnce(() => {
+                throw error;
+            });
+            // Should not throw even though websocket doesn't exist
+            await expect(
+            // @ts-expect-error TS thinks this isn't a function
+            plugin.configureServer(server)).resolves.not.toThrow();
+            // Verify broadcast was NOT called (since websocket doesn't exist)
+            expect(mockWebSocket.broadcast).not.toHaveBeenCalled();
+        });
+        it('should broadcast error when websocket exists and browser connects', async () => {
+            // Websocket is already set up in beforeEach
+            const error = {
+                plugin: 'vite:esbuild',
+                errors: ['build error'],
+                frame: 'Error on this line',
+                loc: { column: 1, line: 5 },
+                id: 'src/file.ts',
+            };
+            vi.mocked(build).mockImplementationOnce(() => {
+                throw error;
+            });
+            // @ts-expect-error TS thinks this isn't a function
+            await plugin.configureServer(server);
+            options.devServerState.triggerWebSocketSetup();
+            // Get the connection handler
+            const connectionHandler = mockWebSocket.onConnection.mock.calls[0][0];
+            // Simulate browser connection - should broadcast the stored error
+            connectionHandler();
+            expect(mockWebSocket.broadcast).toHaveBeenCalledWith(expect.objectContaining({
+                event: 'error',
+                error: expect.objectContaining({
+                    details: expect.objectContaining({
+                        file: error.id,
+                    }),
+                }),
+            }));
+        });
+        it('should broadcast error after websocket is initialized and browser connects', async () => {
+            // Remove the websocket to simulate it not being initialized yet
+            // @ts-expect-error Setting private property for testing
+            options.devServerState._mutableState.extensionsWebSocket = null;
+            const error = {
+                plugin: 'vite:esbuild',
+                errors: ['build error'],
+                frame: 'Error on this line',
+                loc: { column: 1, line: 5 },
+                id: 'src/file.ts',
+            };
+            vi.mocked(build).mockImplementationOnce(() => {
+                throw error;
+            });
+            // configureServer runs with error, but websocket doesn't exist yet
+            // @ts-expect-error TS thinks this isn't a function
+            await plugin.configureServer(server);
+            // At this point, broadcast should not have been called
+            expect(mockWebSocket.broadcast).not.toHaveBeenCalled();
+            // Now initialize the websocket (simulating what happens in server.ts)
+            // @ts-expect-error Setting private property for testing
+            options.devServerState._mutableState.extensionsWebSocket =
+                mockWebSocket;
+            // Trigger the websocket setup callback
+            options.devServerState.triggerWebSocketSetup();
+            // Get the connection handler
+            const connectionHandler = mockWebSocket.onConnection.mock.calls[0][0];
+            // Simulate browser connection - should NOW broadcast the stored error
+            connectionHandler();
+            expect(mockWebSocket.broadcast).toHaveBeenCalledWith(expect.objectContaining({
+                event: 'error',
+                error: expect.objectContaining({
+                    details: expect.objectContaining({
+                        file: error.id,
+                    }),
+                }),
+            }));
+        });
+    });
+});

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

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

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

@@ -0,0 +1,65 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+import friendlyLoggingPlugin from "../../plugins/friendlyLoggingPlugin.js";
+describe('friendlyLoggingPlugin', () => {
+    let plugin;
+    let logger;
+    beforeEach(() => {
+        logger = {
+            info: vi.fn(),
+            error: vi.fn(),
+            debug: vi.fn(),
+            warn: vi.fn(),
+        };
+        plugin = friendlyLoggingPlugin({ logger });
+    });
+    afterEach(() => {
+        vi.clearAllMocks();
+    });
+    describe('metadata', () => {
+        it('should create the correct plugin metadata', () => {
+            expect(plugin).toStrictEqual(expect.objectContaining({
+                name: 'ui-extensions-friendly-logging-plugin',
+                enforce: 'post',
+                onLog: expect.any(Function),
+            }));
+        });
+    });
+    describe('onLog', () => {
+        it('should return true if it is a log message we do not want altered', () => {
+            // @ts-expect-error TS doesn't think lifecycle hooks are functions
+            const result = plugin.onLog('error', {
+                code: "it's an older code but it checks out",
+            });
+            expect(result).toBe(true);
+        });
+        it('should return false if it is a log message we want to transform', () => {
+            // @ts-expect-error TS doesn't think lifecycle hooks are functions
+            const result = plugin.onLog('error', {
+                code: 'MISSING_GLOBAL_NAME',
+            });
+            expect(result).toBe(false);
+        });
+        it('should not log MISSING_GLOBAL_NAME errors', () => {
+            // @ts-expect-error TS doesn't think lifecycle hooks are functions
+            const result = plugin.onLog('error', {
+                code: 'MISSING_GLOBAL_NAME',
+            });
+            expect(result).toBe(false);
+            expect(logger.error).toHaveBeenCalledTimes(0);
+            expect(logger.info).toHaveBeenCalledTimes(0);
+            expect(logger.debug).toHaveBeenCalledTimes(0);
+            expect(logger.warn).toHaveBeenCalledTimes(0);
+        });
+        it('should call the logger correctly for UNRESOLVED_IMPORT errors', () => {
+            // @ts-expect-error TS doesn't think lifecycle hooks are functions
+            const result = plugin.onLog('we ignore this for now', {
+                code: 'UNRESOLVED_IMPORT',
+                id: 'the/file/that/imported/the/bad/import.jsx',
+                exporter: '@hubspot/extensions',
+            });
+            expect(result).toBe(false);
+            expect(logger.error).toHaveBeenCalledTimes(1);
+            expect(logger.error).toHaveBeenCalledWith('@hubspot/extensions is imported by import.jsx, but @hubspot/extensions cannot be resolved. Make sure @hubspot/extensions is installed by running `hs project install-deps`.');
+        });
+    });
+});

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

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