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

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

@@ -107,5 +107,18 @@ describe('codeCheckingPlugin', () => {
             await runViteBuild('ts-withHubspotImport.ts', plugin);
             expect(logger.warn).not.toHaveBeenCalled();
         });
+        it('should not log a warning when the build fails with an error', async () => {
+            const { logger, plugin } = createPlugin();
+            // Use a fixture file that would normally trigger the warning,
+            // but cause a build error by importing a non-existent file
+            try {
+                await runViteBuild('invalidSyntax.js', plugin);
+            }
+            catch (error) {
+                // Build should fail, which is expected
+            }
+            // Verify warning was not logged despite the fixture missing hubspot import
+            expect(logger.warn).not.toHaveBeenCalled();
+        });
     });
 });

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

@@ -5,6 +5,7 @@ vi.mock('../../plugins/relevantModulesPlugin', () => {
         getRelevantModules: () => {
             return ['extension.js', 'helper-file.js'];
         },
+        addRelevantModule: vi.fn(),
         default: () => {
             return {
                 name: 'ui-extensions-relevant-modules-plugin',
@@ -14,6 +15,7 @@ vi.mock('../../plugins/relevantModulesPlugin', () => {
 });
 vi.mock('vite');
 import devBuildPlugin from "../../plugins/devBuildPlugin.js";
+import { addRelevantModule } from "../../plugins/relevantModulesPlugin.js";
 import { build } from 'vite';
 import { PLATFORM_VERSION, WEBSOCKET_MESSAGE_VERSION, } from "../../constants.js";
 import { DevServerState } from "../../DevServerState.js";
@@ -148,6 +150,7 @@ describe('devBuildPlugin', () => {
         it('should broadcast error message on build failure', async () => {
             const error = {
                 plugin: 'vite:esbuild',
+                message: '[vite:esbuild] Transform failed with 1 error',
                 errors: ['you did something wrong'],
                 frame: 'It broke on this line',
                 loc: {
@@ -162,6 +165,12 @@ describe('devBuildPlugin', () => {
             });
             // @ts-expect-error TS thinks these aren't functions
             await plugin.handleHotUpdate({ file: 'extension.js', server });
+            expect(logger.error).toHaveBeenCalledWith(error.message);
+            // Verify entry file and error file are added to relevant modules for HMR
+            const extensionConfig = options.devServerState.extensionsMetadata[0].config;
+            const entryFile = extensionConfig.data.module.file;
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledWith(extensionConfig.output, entryFile);
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledWith(extensionConfig.output, error.id);
             expect(mockWebSocket.broadcast).toHaveBeenCalled();
             const baseMessage = options.devServerState.extensionsMetadata[0].baseMessage;
             expect(mockWebSocket.broadcast).toHaveBeenCalledWith({
@@ -178,6 +187,27 @@ describe('devBuildPlugin', () => {
                 version: WEBSOCKET_MESSAGE_VERSION,
             });
         });
+        it('should add only entry file when error file is same as entry file', async () => {
+            const extensionConfig = options.devServerState.extensionsMetadata[0].config;
+            const entryFile = extensionConfig.data.module.file;
+            const error = {
+                plugin: 'vite:esbuild',
+                message: '[vite:esbuild] Transform failed with 1 error',
+                errors: ['syntax error in entry file'],
+                frame: 'Error on this line',
+                loc: { column: 1, line: 5 },
+                id: entryFile, // Same as entry file
+            };
+            vi.mocked(build).mockImplementationOnce(() => {
+                throw error;
+            });
+            // @ts-expect-error TS thinks these aren't functions
+            await plugin.handleHotUpdate({ file: 'extension.js', server });
+            // Verify entry file is added
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledWith(extensionConfig.output, entryFile);
+            // Verify addRelevantModule is only called once (not twice for the same file)
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledTimes(1);
+        });
         it('should not broadcast when error is from ui-extensions plugin', async () => {
             const error = {
                 plugin: 'ui-extensions-some-plugin-that-threw-an-error',
@@ -260,6 +290,7 @@ describe('devBuildPlugin', () => {
             options.devServerState._mutableState.extensionsWebSocket = null;
             const error = {
                 plugin: 'vite:esbuild',
+                message: '[vite:esbuild] Build error',
                 errors: ['build error'],
                 frame: 'Error on this line',
                 loc: { column: 1, line: 5 },
@@ -272,6 +303,12 @@ describe('devBuildPlugin', () => {
             await expect(
             // @ts-expect-error TS thinks this isn't a function
             plugin.configureServer(server)).resolves.not.toThrow();
+            expect(logger.error).toHaveBeenCalledWith(error.message);
+            // Verify entry file and error file are added to relevant modules
+            const extensionConfig = options.devServerState.extensionsMetadata[0].config;
+            const entryFile = extensionConfig.data.module.file;
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledWith(extensionConfig.output, entryFile);
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledWith(extensionConfig.output, error.id);
             // Verify broadcast was NOT called (since websocket doesn't exist)
             expect(mockWebSocket.broadcast).not.toHaveBeenCalled();
         });
@@ -279,6 +316,7 @@ describe('devBuildPlugin', () => {
             // Websocket is already set up in beforeEach
             const error = {
                 plugin: 'vite:esbuild',
+                message: '[vite:esbuild] Build error',
                 errors: ['build error'],
                 frame: 'Error on this line',
                 loc: { column: 1, line: 5 },
@@ -289,6 +327,12 @@ describe('devBuildPlugin', () => {
             });
             // @ts-expect-error TS thinks this isn't a function
             await plugin.configureServer(server);
+            expect(logger.error).toHaveBeenCalledWith(error.message);
+            // Verify entry file and error file are added to relevant modules
+            const extensionConfig = options.devServerState.extensionsMetadata[0].config;
+            const entryFile = extensionConfig.data.module.file;
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledWith(extensionConfig.output, entryFile);
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledWith(extensionConfig.output, error.id);
             options.devServerState.triggerWebSocketSetup();
             // Get the connection handler
             const connectionHandler = mockWebSocket.onConnection.mock.calls[0][0];
@@ -309,6 +353,7 @@ describe('devBuildPlugin', () => {
             options.devServerState._mutableState.extensionsWebSocket = null;
             const error = {
                 plugin: 'vite:esbuild',
+                message: '[vite:esbuild] Build error',
                 errors: ['build error'],
                 frame: 'Error on this line',
                 loc: { column: 1, line: 5 },
@@ -320,6 +365,12 @@ describe('devBuildPlugin', () => {
             // configureServer runs with error, but websocket doesn't exist yet
             // @ts-expect-error TS thinks this isn't a function
             await plugin.configureServer(server);
+            expect(logger.error).toHaveBeenCalledWith(error.message);
+            // Verify entry file and error file are added to relevant modules
+            const extensionConfig = options.devServerState.extensionsMetadata[0].config;
+            const entryFile = extensionConfig.data.module.file;
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledWith(extensionConfig.output, entryFile);
+            expect(vi.mocked(addRelevantModule)).toHaveBeenCalledWith(extensionConfig.output, error.id);
             // At this point, broadcast should not have been called
             expect(mockWebSocket.broadcast).not.toHaveBeenCalled();
             // Now initialize the websocket (simulating what happens in server.ts)

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

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import relevantModulesPlugin, { getRelevantModules, } from "../../plugins/relevantModulesPlugin.js";
+import relevantModulesPlugin, { getRelevantModules, addRelevantModule, } from "../../plugins/relevantModulesPlugin.js";
 describe('manifestPlugin', () => {
     let logger;
     let options;
@@ -49,6 +49,40 @@ describe('manifestPlugin', () => {
             expect(actual).toStrictEqual([]);
         });
     });
+    describe('addRelevantModule', () => {
+        it('should add module to empty list', () => {
+            const output = 'TestOutput.js';
+            const modulePath = '/path/to/module.js';
+            addRelevantModule(output, modulePath);
+            const actual = getRelevantModules(output);
+            expect(actual).toStrictEqual([modulePath]);
+        });
+        it('should add module to existing list', () => {
+            const output = 'AnotherOutput.js';
+            addRelevantModule(output, 'module1.js');
+            addRelevantModule(output, 'module2.js');
+            const actual = getRelevantModules(output);
+            expect(actual).toStrictEqual(['module1.js', 'module2.js']);
+        });
+        it('should not add duplicate modules', () => {
+            const output = 'DuplicateTest.js';
+            const modulePath = '/path/to/module.js';
+            addRelevantModule(output, modulePath);
+            addRelevantModule(output, modulePath);
+            addRelevantModule(output, modulePath);
+            const actual = getRelevantModules(output);
+            expect(actual).toStrictEqual([modulePath]);
+        });
+        it('should create output entry if it does not exist', () => {
+            const output = 'NewOutput.js';
+            const modulePath = '/path/to/new/module.js';
+            // Verify output doesn't exist yet
+            expect(getRelevantModules(output)).toStrictEqual([]);
+            addRelevantModule(output, modulePath);
+            // Verify output was created with the module
+            expect(getRelevantModules(output)).toStrictEqual([modulePath]);
+        });
+    });
     describe('generateBundle', () => {
         it('should not update the relevantModules when output is not found in the bundle', () => {
             const plugin = relevantModulesPlugin(options);

package/dist/lib/plugins/codeCheckingPlugin.js

@@ -64,7 +64,11 @@ const codeCheckingPlugin = (options) => {
          * If not found, we log a warning to help developers understand why their extension
          * might not render correctly.
          */
-        buildEnd() {
+        buildEnd(error) {
+            // Don't display the warning if there was a build error
+            if (error) {
+                return;
+            }
             if (!foundHubspotImport) {
                 logger.warn(`
 

package/dist/lib/plugins/devBuildPlugin.js

@@ -4,7 +4,7 @@ import manifestPlugin from "./manifestPlugin.js";
 import { stripAnsiColorCodes } from "../utils.js";
 import codeCheckingPlugin from "./codeCheckingPlugin.js";
 import friendlyLoggingPlugin from "./friendlyLoggingPlugin.js";
-import relevantModulesPlugin, { getRelevantModules, } from "./relevantModulesPlugin.js";
+import relevantModulesPlugin, { getRelevantModules, addRelevantModule, } from "./relevantModulesPlugin.js";
 import codeBlockingPlugin from "./codeBlockingPlugin.js";
 function addVersionToBaseMessage(baseMessage) {
     return {
@@ -52,9 +52,9 @@ const devBuildPlugin = (options) => {
         }
     };
     const devBuild = async (server, extensionMetadata, emptyOutDir = false) => {
+        const { config: extensionConfig } = extensionMetadata;
+        const { extensionPath } = extensionConfig;
         try {
-            const { config: extensionConfig } = extensionMetadata;
-            const { extensionPath } = extensionConfig;
             let manifestConfig = {};
             if (devServerState.appConfig &&
                 'variables' in devServerState.appConfig &&
@@ -122,7 +122,18 @@ const devBuildPlugin = (options) => {
                 error: error,
                 extensionMetadata,
             };
-            logger.debug(error);
+            // Log the error for user visibility
+            const errorPayload = error;
+            if (errorPayload.message) {
+                logger.error(errorPayload.message);
+            }
+            // Ensure the files are tracked for HMR even when the build fails
+            const entryFile = extensionConfig.data.module.file;
+            addRelevantModule(extensionConfig.output, entryFile);
+            if (errorPayload.id && errorPayload.id !== entryFile) {
+                addRelevantModule(extensionConfig.output, errorPayload.id);
+            }
+            logger.debug('Full build error:', error);
             handleBuildError(lastBuildErrorContext);
             return false;
         }

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

@@ -4,6 +4,7 @@ export interface RelevantModules {
     [key: string]: string[];
 }
 export declare function getRelevantModules(output: string): string[];
+export declare function addRelevantModule(output: string, modulePath: string): void;
 export interface RelevantModulesPluginOptions {
     output: string;
     logger: Logger;

package/dist/lib/plugins/relevantModulesPlugin.js

@@ -3,6 +3,14 @@ const relevantModules = {};
 export function getRelevantModules(output) {
     return relevantModules[output] || [];
 }
+export function addRelevantModule(output, modulePath) {
+    if (!relevantModules[output]) {
+        relevantModules[output] = [];
+    }
+    if (!relevantModules[output].includes(modulePath)) {
+        relevantModules[output].push(modulePath);
+    }
+}
 const relevantModulesPlugin = ({ output, logger }) => {
     return {
         name: 'ui-extensions-relevant-modules-plugin',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "1.1.1",
+  "version": "1.1.3",
   "description": "",
   "type": "module",
   "bin": {
@@ -12,6 +12,7 @@
     "build": "npm run clean && tsc",
     "watch": "npm run clean && tsc --watch",
     "prepare": "husky",
+    "prepublishOnly": "npm run build",
     "prettier:write": "prettier --write '**/*.{ts,js,json}'",
     "lint": "echo 'Linting is disabled for Blazar'",
     "lint:local": "eslint . && prettier --check '**/*.{ts,js,json}'",
@@ -32,7 +33,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@hubspot/app-functions-dev-server": "0.11.0",
+    "@hubspot/app-functions-dev-server": "0.11.1",
     "chalk": "5.4.1",
     "commander": "13.1.0",
     "cors": "2.8.5",