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

package/dist/lib/parsing-utils.js

@@ -0,0 +1,289 @@
+/**
+ * Extracts the value from a given AST node based on its type.
+ * This function handles various node types such as Literal, Identifier (aka variables), ArrayExpression,
+ * ObjectExpression, SpreadElement, TemplateLiteral, UnaryExpression, and MemberExpression (accessing props on objects).
+ * It also supports nested structures and handles special cases like undefined, NaN, and Infinity.
+ *
+ * It does not handle function calls, complex expressions, or anything that requires evaluation of code logic.
+ * This is not a full JavaScript interpreter, but rather a utility to extract static values from the AST.
+ *
+ * Use this function carefully, as it assumes that the AST is well-formed and that the node types are as expected.
+ * Many types are not yet supported. Anything this function is used for should have a backup runtime evaluation,
+ * or be set up to fail gracefully if parsing fails.
+ *
+ * @param node - The AST node from which to extract the value.
+ * @param state - The current state of the source code metadata, including variable declarations.
+ * @returns An object containing the status of the operation, the extracted node value,
+ *          or an error message if the extraction fails.
+ *          The status can be 'SUCCESS' or 'FAIL'.
+ *          If the status is 'SUCCESS', nodeValue will contain the extracted value.
+ *          If the status is 'FAIL', error will contain the error message.
+ */
+export function getValueFromNode(node, state) {
+    try {
+        switch (node.type) {
+            case 'Literal':
+                return { status: 'SUCCESS', nodeValue: node.value };
+            case 'Identifier': {
+                const name = node.name;
+                switch (name) {
+                    case 'undefined':
+                        return { status: 'SUCCESS', nodeValue: undefined };
+                    case 'NaN':
+                        return { status: 'SUCCESS', nodeValue: NaN };
+                    case 'Infinity':
+                        return { status: 'SUCCESS', nodeValue: Infinity };
+                    default:
+                        if (state.variableDeclarations.has(name)) {
+                            return {
+                                status: 'SUCCESS',
+                                nodeValue: state.variableDeclarations.get(name),
+                            };
+                        }
+                        // If for some reason the variable tracking fails, return unsupported.
+                        return { status: 'FAIL', error: `Identifier ${name} is not found` };
+                }
+            }
+            case 'ArrayExpression': {
+                const arrayValue = [];
+                if (node.elements.length === 0) {
+                    return { status: 'SUCCESS', nodeValue: arrayValue };
+                }
+                // Arrays have to be built from their elements, to handle special cases like nested arrays from spread operators.
+                for (const element of node.elements) {
+                    if (typeof element === 'object' && element !== null) {
+                        if (element.type === 'SpreadElement') {
+                            const result = getValueFromNode(element, state);
+                            if (result.status === 'FAIL') {
+                                return {
+                                    status: 'FAIL',
+                                    error: `Array spread element failed: ${result.error}`,
+                                };
+                            }
+                            const value = result.nodeValue;
+                            if (Array.isArray(value)) {
+                                arrayValue.push(...value);
+                            }
+                            else {
+                                arrayValue.push(value);
+                            }
+                        }
+                        else {
+                            const result = getValueFromNode(element, state);
+                            if (result.status === 'FAIL') {
+                                return {
+                                    status: 'FAIL',
+                                    error: `Array element failed: ${result.error}`,
+                                };
+                            }
+                            arrayValue.push(result.nodeValue);
+                        }
+                    }
+                    else {
+                        arrayValue.push(element);
+                    }
+                }
+                return { status: 'SUCCESS', nodeValue: arrayValue };
+            }
+            case 'ObjectExpression': {
+                const obj = {};
+                for (const prop of node.properties) {
+                    switch (prop.type) {
+                        case 'Property': {
+                            const property = prop;
+                            let key = undefined;
+                            if (property.key.type === 'Identifier') {
+                                key = property.key.name;
+                            }
+                            else if (property.key.type === 'Literal') {
+                                key = String(property.key.value);
+                            }
+                            if (key) {
+                                const result = getValueFromNode(property.value, state);
+                                if (result.status === 'FAIL') {
+                                    return {
+                                        status: 'FAIL',
+                                        error: `Object property '${key}' failed: ${result.error}`,
+                                    };
+                                }
+                                obj[key] = result.nodeValue;
+                            }
+                            break;
+                        }
+                        case 'SpreadElement': {
+                            const result = getValueFromNode(prop, state);
+                            if (result.status === 'FAIL') {
+                                return {
+                                    status: 'FAIL',
+                                    error: `Object spread element failed: ${result.error}`,
+                                };
+                            }
+                            const spreadValue = result.nodeValue;
+                            if (spreadValue && typeof spreadValue === 'object') {
+                                Object.assign(obj, spreadValue);
+                            }
+                            break;
+                        }
+                        default:
+                            // Ignore unsupported property types, as we don't have a key for them.
+                            // This could be a computed property or something else we don't handle.
+                            break;
+                    }
+                }
+                return { status: 'SUCCESS', nodeValue: obj };
+            }
+            /**
+             * Spread elements are a bit tricky. They can be used to directly spread an array or object,
+             * or they can be used to spread a variable that is defined elsewhere. Our strategy is to return
+             * whatever element should be spread, and then handle the spreading in the parent array or object.
+             *
+             * There are also trickier cases we don't handle, like spreading a function call that returns an
+             * array or object. When the spread element is unsupported, we return a special symbol.
+             */
+            case 'SpreadElement':
+                if (node.argument) {
+                    if (node.argument.type === 'Identifier' && node.argument.name) {
+                        return {
+                            status: 'SUCCESS',
+                            nodeValue: state.variableDeclarations.get(node.argument.name) || null,
+                        };
+                    }
+                    else if (node.argument.type === 'ArrayExpression' ||
+                        node.argument.type === 'ObjectExpression') {
+                        return getValueFromNode(node.argument, state);
+                    }
+                }
+                return {
+                    status: 'FAIL',
+                    error: `Unsupported SpreadElement type: ${node.argument.type}`,
+                };
+            /**
+             * Template literals are built of an alternating sequence of static
+             * strings and expressions. We will concatenate the static strings and
+             * evaluate the expressions to build the final string.
+             */
+            case 'TemplateLiteral': {
+                let result = '';
+                if (node.expressions && node.quasis) {
+                    const { quasis, expressions } = node;
+                    for (let i = 0; i < quasis.length; i++) {
+                        // Prefer cooked value if available, otherwise use raw.
+                        result += quasis[i].value.cooked || quasis[i].value.raw;
+                        if (i < expressions.length) {
+                            const expression = expressions[i];
+                            const expressionResult = getValueFromNode(expression, state);
+                            if (expressionResult.status === 'SUCCESS') {
+                                const expressionValue = expressionResult.nodeValue;
+                                if (expressionValue === null ||
+                                    expressionValue === undefined ||
+                                    typeof expressionValue === 'string' ||
+                                    typeof expressionValue === 'number' ||
+                                    typeof expressionValue === 'boolean') {
+                                    result += String(expressionValue);
+                                }
+                                else if (Array.isArray(expressionValue)) {
+                                    result += expressionValue.join(',');
+                                }
+                                else if (typeof expressionValue === 'object') {
+                                    result += '[object Object]';
+                                }
+                                else {
+                                    result += `Unsupported TemplateLiteral expression value type: ${typeof expressionValue}`;
+                                }
+                            }
+                            else {
+                                result += expressionResult.error;
+                            }
+                        }
+                    }
+                }
+                return { status: 'SUCCESS', nodeValue: result };
+            }
+            case 'UnaryExpression': {
+                const argResult = getValueFromNode(node.argument, state);
+                if (argResult.status === 'FAIL') {
+                    return argResult;
+                }
+                const arg = argResult.nodeValue;
+                switch (node.operator) {
+                    case '-':
+                        return {
+                            status: 'SUCCESS',
+                            nodeValue: typeof arg === 'number' ? -arg : NaN,
+                        };
+                    case '+':
+                        return {
+                            status: 'SUCCESS',
+                            nodeValue: typeof arg === 'number' ? +arg : NaN,
+                        };
+                    case '!':
+                        return { status: 'SUCCESS', nodeValue: !arg };
+                    case 'typeof':
+                        return { status: 'SUCCESS', nodeValue: typeof arg };
+                    default:
+                        return {
+                            status: 'FAIL',
+                            error: `Unsupported unary operator: ${node.operator}`,
+                        };
+                }
+            }
+            // Member expressions are used to access properties of objects.
+            case 'MemberExpression': {
+                if (node.property.type === 'Identifier' && node.property.name) {
+                    // We have to recursively get the value of the object, due to the way that nested objects are parsed.
+                    const objectResult = getValueFromNode(node.object, state);
+                    if (objectResult.status === 'FAIL') {
+                        return objectResult;
+                    }
+                    const objectData = objectResult.nodeValue;
+                    if (objectData &&
+                        typeof objectData === 'object' &&
+                        !Array.isArray(objectData) &&
+                        !(objectData instanceof RegExp)) {
+                        return {
+                            status: 'SUCCESS',
+                            nodeValue: objectData[node.property.name],
+                        };
+                    }
+                }
+                return {
+                    status: 'FAIL',
+                    error: `Unsupported MemberExpression property type: ${node.property.type}`,
+                };
+            }
+            default:
+                return { status: 'FAIL', error: `Unsupported node type: ${node.type}` };
+        }
+    }
+    catch (error) {
+        return {
+            status: 'FAIL',
+            error: error instanceof Error ? error.message : String(error),
+        };
+    }
+}
+export function isVariableImported(node, variableName) {
+    if (!node) {
+        return false;
+    }
+    return ((node.type === 'ImportSpecifier' &&
+        node.imported.type === 'Identifier' &&
+        node.imported.name === variableName) ||
+        (node.type === 'ImportDefaultSpecifier' &&
+            node.local.name === variableName) ||
+        (node.type === 'ImportNamespaceSpecifier' &&
+            node.local.name === variableName));
+}
+export function isIdentifierDefined(node, parent, name) {
+    if (parent &&
+        (parent.type === 'MemberExpression' || parent.type === 'CallExpression')) {
+        return false;
+    }
+    return node.type === 'Identifier' && node.name === name;
+}
+export function isFunctionInvoked(node, functionName) {
+    return (node.type === 'CallExpression' &&
+        node.callee &&
+        'name' in node.callee &&
+        node.callee.name === functionName);
+}

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

@@ -0,0 +1,8 @@
+import { Rollup } from 'vite';
+import { Logger } from '../types.ts';
+export type CodeBlockingPlugin = ({ logger, extensionPath, }: {
+    logger: Logger;
+    extensionPath: string;
+}) => Rollup.Plugin;
+declare const codeBlockingPlugin: CodeBlockingPlugin;
+export default codeBlockingPlugin;

package/dist/lib/plugins/codeBlockingPlugin.js

@@ -0,0 +1,45 @@
+import { isNodeModule } from "../utils.js";
+import { traverseAbstractSyntaxTree } from "../ast.js";
+const codeBlockingPlugin = ({ logger, extensionPath }) => {
+    return {
+        name: 'ui-extensions-code-blocking-plugin',
+        enforce: 'post', // run after default rollup plugins
+        transform(code, filename) {
+            if (isNodeModule(filename)) {
+                return { code, map: null }; // We don't want to parse node modules
+            }
+            let sourceCodeMetadata = {
+                functions: {},
+                badImports: [],
+                dataDependencies: {
+                    importedHooks: {},
+                    dependencies: [],
+                },
+                variableDeclarations: new Map(),
+            };
+            const requireFunctionName = 'require';
+            try {
+                //  Not sure why the types don't match for this.parse and the Rollup docs, but
+                // the docs over on rollup's site specify ESTree.Program as the return type,
+                // and the underlying data matches that https://rollupjs.org/plugin-development/#this-parse
+                const abstractSyntaxTree = this.parse(code);
+                sourceCodeMetadata = traverseAbstractSyntaxTree(abstractSyntaxTree, [{ functionName: requireFunctionName }], extensionPath, logger);
+                if (sourceCodeMetadata.badImports) {
+                    for (const badImport of sourceCodeMetadata.badImports) {
+                        logger.warn(`Importing files from outside of the extension directory is not supported. Please move the import ${badImport} into the extension directory.`);
+                    }
+                }
+            }
+            catch (e) {
+                logger.debug('Unable to parse and traverse source code');
+                return { code, map: null };
+            }
+            if (sourceCodeMetadata.functions[requireFunctionName] &&
+                sourceCodeMetadata.functions[requireFunctionName].scope === 'Global') {
+                logger.warn('require statements are not supported, replace require statements with import');
+            }
+            return { code, map: null };
+        },
+    };
+};
+export default codeBlockingPlugin;

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

@@ -0,0 +1,8 @@
+import { Rollup } from 'vite';
+import { Logger } from '../types.ts';
+export interface CodeCheckingPluginOptions {
+    logger: Logger;
+}
+export type CodeCheckingPlugin = (options: CodeCheckingPluginOptions) => Rollup.Plugin;
+declare const codeCheckingPlugin: CodeCheckingPlugin;
+export default codeCheckingPlugin;

package/dist/lib/plugins/codeCheckingPlugin.js

@@ -0,0 +1,93 @@
+import chalk from 'chalk';
+// Matches import statements from @hubspot/ui-extensions that include "hubspot" in the import list.
+// Example matches: "import { hubspot } from '@hubspot/ui-extensions'"
+//                  "import { hubspot, other } from '@hubspot/ui-extensions'"
+//                  "import { some, hubspot, more } from \"@hubspot/ui-extensions\""
+const HUBSPOT_IMPORT_REGEX = /import\s*\{[^}]*\bhubspot\b[^}]*\}\s*from\s*['"]@hubspot\/ui-extensions['"]/;
+// Matches namespace import statements from @hubspot/ui-extensions.
+// Example matches: "import * as hubspot from '@hubspot/ui-extensions'"
+//                  "import * as uie from '@hubspot/ui-extensions'"
+const NAMESPACE_IMPORT_REGEX = /import\s+\*\s+as\s+\w+\s+from\s+['"]@hubspot\/ui-extensions['"]/;
+const codeCheckingPlugin = (options) => {
+    const { logger } = options;
+    let foundHubspotImport = false;
+    return {
+        name: 'ui-extensions-code-checking-plugin',
+        /**
+         * Called by Rollup once at the beginning of each build, before any modules are processed.
+         * This hook is invoked when a new build starts, allowing plugins to reset state or
+         * perform initialization tasks. In watch mode, this is called each time a rebuild is triggered.
+         *
+         * We reset the `foundHubspotImport` flag here to ensure we check for the import
+         * in each new build cycle.
+         */
+        buildStart() {
+            foundHubspotImport = false;
+        },
+        /**
+         * Called by Rollup for each module during the build process, after the module's source code
+         * has been loaded but before it's parsed and analyzed. This hook allows plugins to transform
+         * the source code or perform analysis on it.
+         *
+         * The `code` parameter contains the raw source code of the module being processed.
+         * This hook is called for every module that Rollup processes, including entry points
+         * and all their dependencies.
+         *
+         * We use this hook to scan each module's source code for the required `hubspot` import
+         * from `@hubspot/ui-extensions`. Once we find it, we set a flag to avoid unnecessary
+         * regex matching on subsequent modules.
+         *
+         * @param code - The source code of the module being transformed
+         * @returns `null` to indicate no transformation is needed (we're only analyzing the code)
+         */
+        transform(code) {
+            if (foundHubspotImport) {
+                return null;
+            }
+            if (!code.includes('@hubspot/ui-extensions')) {
+                return null;
+            }
+            if (HUBSPOT_IMPORT_REGEX.test(code) ||
+                NAMESPACE_IMPORT_REGEX.test(code)) {
+                foundHubspotImport = true;
+            }
+            return null;
+        },
+        /**
+         * Called by Rollup once at the end of the build, after all modules have been processed
+         * and the build is complete. This hook is invoked regardless of whether the build
+         * succeeded or failed, making it useful for cleanup tasks or final validation checks.
+         *
+         * In watch mode, this hook is called after each rebuild completes.
+         *
+         * We use this hook to check if we found the required `hubspot` import during the build.
+         * If not found, we log a warning to help developers understand why their extension
+         * might not render correctly.
+         */
+        buildEnd(error) {
+            // Don't display the warning if there was a build error
+            if (error) {
+                return;
+            }
+            if (!foundHubspotImport) {
+                logger.warn(`
+
+${chalk.yellow.bold('WARNING:')} Your extension does not appear to import ${chalk.cyan('hubspot')} from ${chalk.cyan('@hubspot/ui-extensions')}.
+
+${chalk.red('Without this import, your extension will not render.')} To fix this:
+
+${chalk.bold('1.')} Import ${chalk.cyan('hubspot')} from ${chalk.cyan('@hubspot/ui-extensions')}
+${chalk.bold('2.')} Call ${chalk.cyan('hubspot.extend()')} with your render function
+
+${chalk.bold('Example:')}
+  ${chalk.gray('import')} ${chalk.cyan('{ hubspot }')} ${chalk.gray('from')} ${chalk.yellow("'@hubspot/ui-extensions'")};
+
+  ${chalk.cyan('hubspot')}.${chalk.cyan('extend')}${chalk.gray("<'crm.record.tab'>")}((${chalk.gray('{ context }')}) => {
+    ${chalk.gray('return')} <MyExtension />;
+  });
+`);
+            }
+        },
+    };
+};
+export default codeCheckingPlugin;

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

@@ -0,0 +1,8 @@
+import * as Vite from 'vite';
+import { DevServerState } from '../DevServerState.ts';
+export interface DevBuildPluginOptions {
+    devServerState: DevServerState;
+}
+export type DevBuildPlugin = (options: DevBuildPluginOptions) => Vite.Plugin;
+declare const devBuildPlugin: DevBuildPlugin;
+export default devBuildPlugin;

package/dist/lib/plugins/devBuildPlugin.js

@@ -0,0 +1,212 @@
+import { ROLLUP_OPTIONS, WEBSOCKET_MESSAGE_VERSION } from "../constants.js";
+import { build } from 'vite';
+import manifestPlugin from "./manifestPlugin.js";
+import { stripAnsiColorCodes } from "../utils.js";
+import codeCheckingPlugin from "./codeCheckingPlugin.js";
+import friendlyLoggingPlugin from "./friendlyLoggingPlugin.js";
+import relevantModulesPlugin, { getRelevantModules, addRelevantModule, } from "./relevantModulesPlugin.js";
+import codeBlockingPlugin from "./codeBlockingPlugin.js";
+function addVersionToBaseMessage(baseMessage) {
+    return {
+        ...baseMessage,
+        version: WEBSOCKET_MESSAGE_VERSION,
+    };
+}
+function isValidVariablesRecord(obj) {
+    if (!obj || typeof obj !== 'object')
+        return false;
+    return Object.entries(obj).every(([key, value]) => typeof key === 'string' &&
+        (typeof value === 'string' ||
+            typeof value === 'number' ||
+            typeof value === 'boolean'));
+}
+const devBuildPlugin = (options) => {
+    const { devServerState } = options;
+    const { logger } = devServerState;
+    let lastBuildErrorContext;
+    const handleBuildError = (error) => {
+        const { error: { plugin, errors, frame, loc, id }, extensionMetadata, } = error;
+        // Filter out our custom plugins, but send everything else
+        if (!plugin?.startsWith('ui-extensions')) {
+            const ws = devServerState.extensionsWebSocket;
+            /**
+             * If there's no WebSocket, there are no connected clients to notify of the error.
+             * In this case, the error data is already stored in `lastBuildErrorContext` to be sent when a client connects.
+             *
+             * If there is a WebSocket, broadcast the error to all connected clients
+             */
+            if (ws) {
+                devServerState.getExtensionsWebSocket().broadcast({
+                    ...addVersionToBaseMessage(extensionMetadata.baseMessage),
+                    event: 'error',
+                    error: {
+                        details: {
+                            errors,
+                            formattedError: stripAnsiColorCodes(frame),
+                            location: loc,
+                            file: id,
+                        },
+                    },
+                });
+            }
+        }
+    };
+    const devBuild = async (server, extensionMetadata, emptyOutDir = false) => {
+        const { config: extensionConfig } = extensionMetadata;
+        const { extensionPath } = extensionConfig;
+        try {
+            let manifestConfig = {};
+            if (devServerState.appConfig &&
+                'variables' in devServerState.appConfig &&
+                isValidVariablesRecord(devServerState.appConfig.variables)) {
+                manifestConfig = {
+                    variables: devServerState.appConfig.variables,
+                };
+            }
+            await build({
+                logLevel: 'warn',
+                mode: 'development',
+                define: {
+                    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
+                },
+                esbuild: {
+                    tsconfigRaw: {
+                        compilerOptions: {
+                            preserveValueImports: true,
+                        },
+                    },
+                },
+                build: {
+                    lib: {
+                        entry: extensionConfig.data.module.file,
+                        name: extensionConfig.output,
+                        formats: ['iife'],
+                        fileName: () => extensionConfig.output,
+                    },
+                    rollupOptions: {
+                        ...ROLLUP_OPTIONS,
+                        plugins: [
+                            manifestPlugin({
+                                minify: false,
+                                output: extensionConfig.output,
+                                extensionPath,
+                                logger,
+                                manifestConfig,
+                            }),
+                            codeCheckingPlugin({
+                                logger,
+                            }),
+                            friendlyLoggingPlugin({ logger }),
+                            relevantModulesPlugin({
+                                output: extensionConfig.output,
+                                logger,
+                            }),
+                            codeBlockingPlugin({ logger, extensionPath }),
+                        ],
+                        output: {
+                            ...ROLLUP_OPTIONS.output,
+                        },
+                    },
+                    outDir: devServerState.outputDir,
+                    emptyOutDir,
+                    minify: false,
+                    sourcemap: 'inline',
+                },
+                clearScreen: false,
+            });
+            lastBuildErrorContext = null;
+            return true;
+        }
+        catch (error) {
+            lastBuildErrorContext = {
+                error: error,
+                extensionMetadata,
+            };
+            // 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;
+        }
+    };
+    let localServer;
+    return {
+        name: 'ui-extensions-dev-build-plugin',
+        enforce: 'pre',
+        configureServer: async (server) => {
+            // Store a reference to the server to be used in hooks that don't get the server injected
+            // See https://vitejs.dev/guide/api-plugin.html#configureserver for information on this pattern
+            localServer = server;
+            // Store the WebSocket setup to be called after the WebSocket is initialized
+            devServerState.setWebSocketSetupCallback(() => {
+                devServerState.getExtensionsWebSocket().onConnection(() => {
+                    logger.info('Browser connected and listening for bundle updates');
+                    devServerState.extensionsMetadata.forEach((metadata) => {
+                        devServerState.getExtensionsWebSocket().broadcast({
+                            ...addVersionToBaseMessage(metadata.baseMessage),
+                            event: 'start',
+                        });
+                    });
+                    if (lastBuildErrorContext) {
+                        handleBuildError(lastBuildErrorContext);
+                    }
+                });
+            });
+            for (let i = 0; i < devServerState.extensionsMetadata.length; ++i) {
+                await devBuild(localServer, devServerState.extensionsMetadata[i], i === 0);
+            }
+        },
+        handleHotUpdate: async ({ file, server }) => {
+            // If the file is not in the relevantModules list, it's update is inconsequential
+            const extensionsToRebuild = devServerState.extensionsMetadata.filter((metadata) => {
+                const { config } = metadata;
+                return getRelevantModules(config.output).includes(file);
+            });
+            for (let i = 0; i < extensionsToRebuild.length; ++i) {
+                const toRebuild = extensionsToRebuild[i];
+                const successful = await devBuild(server, toRebuild);
+                if (!successful) {
+                    return [];
+                }
+                const { config: extensionConfig } = toRebuild;
+                logger.info(`Extension ${extensionConfig.data.title} updated, compiled`);
+                const ws = devServerState.getExtensionsWebSocket();
+                if (ws.clientCount === 0) {
+                    logger.debug('Bundle updated, no browsers connected to notify');
+                    return [];
+                }
+                logger.debug('Bundle updated, notifying connected browsers');
+                ws.broadcast({
+                    ...addVersionToBaseMessage(toRebuild.baseMessage),
+                    event: 'update',
+                });
+            }
+            return [];
+        },
+        buildEnd(error) {
+            if (error) {
+                logger.error(error);
+            }
+            const ws = devServerState.extensionsWebSocket;
+            if (ws) {
+                logger.debug('Sending shutdown message to connected browsers');
+                devServerState.extensionsMetadata.forEach((metadata) => {
+                    ws.broadcast({
+                        ...addVersionToBaseMessage(metadata.baseMessage),
+                        event: 'shutdown',
+                    });
+                });
+            }
+        },
+    };
+};
+export default devBuildPlugin;