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

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

@@ -0,0 +1,256 @@
+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();
+        });
+    });
+});

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

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

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