@hubspot/ui-extensions-dev-server 1.0.1 → 1.0.2

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

@@ -1,82 +1,111 @@
-import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
-vi.mock('fs');
+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 fs from 'fs';
-describe('codeCheckingPlugin', () => {
-    let options;
-    let plugin;
-    let logger;
-    beforeEach(() => {
-        logger = {
-            info: vi.fn(),
-            error: vi.fn(),
-            debug: vi.fn(),
-            warn: vi.fn(),
-        };
-        options = {
-            output: 'test.jsx',
-            logger,
-        };
-        plugin = codeCheckingPlugin(options);
-    });
-    afterEach(() => {
-        vi.clearAllMocks();
+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,
+        },
     });
-    describe('metadata', () => {
-        it('should create the correct plugin metadata', () => {
-            expect(plugin).toStrictEqual(expect.objectContaining({
-                name: 'ui-extensions-code-checking-plugin',
-                enforce: 'post',
-                writeBundle: expect.any(Function),
-            }));
+}
+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');
         });
-    });
-    describe('writeBundle', () => {
-        it('should log a warning if the expected code is not found', () => {
-            // @ts-expect-error Mock
-            fs.readFileSync = vi.fn(() => {
-                return `not the code we want, not hubspot extend call in here`;
-            });
-            // @ts-expect-error TS thinks these aren't functions
-            plugin.writeBundle('', '');
+        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);
-            expect(logger.warn).toHaveBeenCalledWith('Unable to determine if your extension entry point is calling hubspot.extend, this may prevent it from rendering as expected');
         });
-        it('should not log a warning if the old extend method is found', () => {
-            // @ts-expect-error Mock
-            fs.readFileSync = vi.fn(() => {
-                return `someFunction();const extend = (...args) => self.extend(...args);someOtherFunc()`;
-            });
-            // @ts-expect-error TS thinks these aren't functions
-            plugin.writeBundle('', '');
+    });
+    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 if the new extend method is found', () => {
-            // @ts-expect-error Mock
-            fs.readFileSync = vi.fn(() => {
-                return `someFunction();self.extend_V2(renderExtensionCallback);someOtherFunc()`;
-            });
-            // @ts-expect-error TS thinks these aren't functions
-            plugin.writeBundle('', '');
+        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 if the v0.11.3+ extend method implementation is found', () => {
-            // @ts-expect-error Mock
-            fs.readFileSync = vi.fn(() => {
-                return `someFunction();const extend_V2 = getWorkerGlobals().extend_V2;someOtherFunc()`;
-            });
-            // @ts-expect-error TS thinks these aren't functions
-            plugin.writeBundle('', '');
+        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 log an error if we are unable to load the code', () => {
-            fs.readFileSync = vi.fn(() => {
-                throw new Error('OH NO');
-            });
-            // @ts-expect-error TS thinks these aren't functions
-            plugin.writeBundle('', '');
-            expect(logger.error).toHaveBeenCalledTimes(1);
-            expect(logger.error).toHaveBeenCalledWith('Unable to load bundle for code checking');
+        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/bin/cli.js

@@ -6,7 +6,7 @@ import { exec } from 'node:child_process';
 import { Command } from 'commander';
 import ora from 'ora';
 import chalk from 'chalk';
-import { remoteBuild } from "../build.js";
+import { remoteBuild, buildSingleExtension } from "../build.js";
 const program = new Command()
     .name('ui-extension-tools')
     .alias('uie')
@@ -30,6 +30,12 @@ const buildSteps = {
         success: 'Extension build complete',
         error: 'Error building extension',
     },
+    devBuild: {
+        start: 'Building single extension in development mode...',
+        fn: devBuild,
+        success: 'Extension build complete',
+        error: 'Error building extension',
+    },
 };
 program
     .option('-v, --profile-variables <path>', 'path to a json file with profile variables')
@@ -41,6 +47,13 @@ program
     await runCommand('install', options);
     await runCommand('build', options);
 });
+program
+    .command('build-dev <module>')
+    .description('Build extension source code in development mode (no minification).')
+    .action(async (module) => {
+    const options = getOptions(module);
+    await runCommand('devBuild', options);
+});
 program.parse(process.argv);
 async function runCommand(command, options) {
     const { start, fn, success, error } = buildSteps[command];
@@ -69,6 +82,18 @@ function build({ extensionRoot, extensionDist, entrypoint, profileVariables, })
         },
     });
 }
+async function devBuild({ extensionRoot, extensionDist, entrypoint, profileVariables, }) {
+    return buildSingleExtension({
+        file: entrypoint,
+        outputDir: extensionDist,
+        root: extensionRoot,
+        minify: false,
+        appConfig: {
+            variables: profileVariables,
+        },
+        codeCheckingPluginEnabled: true,
+    });
+}
 // Mirrors: https://git.hubteam.com/HubSpot/Artifactor/blob/f5cbea91d7a7dfb6278e878ae583e69022384fb5/ArtifactorFunctions/functions/node_18x/uie-remote-build/index.js#L53-L57
 async function installDeps(options) {
     await execAsync('npm ci --ignore-scripts --no-audit --no-optional --no-fund', options);

package/dist/lib/build.d.ts

@@ -8,6 +8,7 @@ interface BuildSingleExtensionArgs {
     root?: string;
     logLevel?: InlineConfig['logLevel'];
     appConfig?: ManifestConfig;
+    codeCheckingPluginEnabled?: boolean;
 }
 interface RemoteBuildArgs {
     root: string;
@@ -18,6 +19,6 @@ interface RemoteBuildArgs {
 }
 export declare const extensionErrorBaseMessage: string;
 export declare function buildSingleExtension({ file, outputDir, emptyOutDir, minify, root, // This is the vite default, so using that as our default
-logLevel, appConfig, }: BuildSingleExtensionArgs): Promise<void>;
+logLevel, appConfig, codeCheckingPluginEnabled, }: BuildSingleExtensionArgs): Promise<void>;
 export declare function remoteBuild(args: RemoteBuildArgs): Promise<void>;
 export {};

package/dist/lib/build.js

@@ -5,10 +5,11 @@ import path from 'path';
 import { getUrlSafeFileName } from "./utils.js";
 import codeBlockingPlugin from "./plugins/codeBlockingPlugin.js";
 import friendlyLoggingPlugin from "./plugins/friendlyLoggingPlugin.js";
+import codeCheckingPlugin from "./plugins/codeCheckingPlugin.js";
 const allowedExtensions = ['.js', '.ts', '.tsx', '.jsx'];
 export const extensionErrorBaseMessage = `Supported file extensions are [${allowedExtensions.join(', ')}], received:`;
 export async function buildSingleExtension({ file, outputDir = OUTPUT_DIR, emptyOutDir = true, minify = false, root = process.cwd(), // This is the vite default, so using that as our default
-logLevel = 'info', appConfig, }) {
+logLevel = 'info', appConfig, codeCheckingPluginEnabled = false, }) {
     const output = getUrlSafeFileName(file);
     await build({
         logLevel,
@@ -34,6 +35,10 @@ logLevel = 'info', appConfig, }) {
                     }),
                     friendlyLoggingPlugin({ logger: console }),
                     codeBlockingPlugin({ logger: console, extensionPath: root }),
+                    codeCheckingPluginEnabled &&
+                        codeCheckingPlugin({
+                            logger: console,
+                        }),
                 ],
             },
             outDir: outputDir,
@@ -63,5 +68,6 @@ export async function remoteBuild(args) {
         root,
         logLevel,
         appConfig,
+        codeCheckingPluginEnabled: false,
     });
 }

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

@@ -1,7 +1,6 @@
 import { Rollup } from 'vite';
 import { Logger } from '../types.ts';
 export interface CodeCheckingPluginOptions {
-    output: string;
     logger: Logger;
 }
 export type CodeCheckingPlugin = (options: CodeCheckingPluginOptions) => Rollup.Plugin;

package/dist/lib/plugins/codeCheckingPlugin.js

@@ -1,23 +1,87 @@
-import fs from 'fs';
+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 { output, logger } = options;
+    const { logger } = options;
+    let foundHubspotImport = false;
     return {
         name: 'ui-extensions-code-checking-plugin',
-        enforce: 'post',
-        writeBundle() {
-            try {
-                const code = fs.readFileSync(output).toString();
-                if (
-                // These checks are for older versions of our library
-                !code.includes('const extend = (...args) => self.extend(...args);') &&
-                    !code.includes('self.extend_V2(renderExtensionCallback)') &&
-                    // This is for version 0.11.3+ of our library where we changed the worker globals function name
-                    !code.includes('getWorkerGlobals().extend_V2')) {
-                    logger.warn('Unable to determine if your extension entry point is calling hubspot.extend, this may prevent it from rendering as expected');
-                }
+        /**
+         * 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;
             }
-            catch (e) {
-                logger.error('Unable to load bundle for code checking');
+            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() {
+            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 />;
+  });
+`);
             }
         },
     };

package/dist/lib/plugins/devBuildPlugin.js

@@ -3,7 +3,6 @@ import { build } from 'vite';
 import manifestPlugin from "./manifestPlugin.js";
 import { stripAnsiColorCodes } from "../utils.js";
 import codeCheckingPlugin from "./codeCheckingPlugin.js";
-import path from 'path';
 import friendlyLoggingPlugin from "./friendlyLoggingPlugin.js";
 import relevantModulesPlugin, { getRelevantModules, } from "./relevantModulesPlugin.js";
 import codeBlockingPlugin from "./codeBlockingPlugin.js";
@@ -29,18 +28,27 @@ const devBuildPlugin = (options) => {
         const { error: { plugin, errors, frame, loc, id }, extensionMetadata, } = error;
         // Filter out our custom plugins, but send everything else
         if (!plugin?.startsWith('ui-extensions')) {
-            devServerState.getExtensionsWebSocket().broadcast({
-                ...addVersionToBaseMessage(extensionMetadata.baseMessage),
-                event: 'error',
-                error: {
-                    details: {
-                        errors,
-                        formattedError: stripAnsiColorCodes(frame),
-                        location: loc,
-                        file: id,
+            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) => {
@@ -86,7 +94,6 @@ const devBuildPlugin = (options) => {
                                 manifestConfig,
                             }),
                             codeCheckingPlugin({
-                                output: path.join(devServerState.outputDir, extensionConfig.output),
                                 logger,
                             }),
                             friendlyLoggingPlugin({ logger }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "",
   "type": "module",
   "bin": {
@@ -32,7 +32,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@hubspot/app-functions-dev-server": "0.10.2",
+    "@hubspot/app-functions-dev-server": "0.11.0",
     "chalk": "5.4.1",
     "commander": "13.1.0",
     "cors": "2.8.5",
@@ -68,15 +68,6 @@
   "engines": {
     "node": ">=18"
   },
-  "peerDependencies": {
-    "typescript": "^5.1.6",
-    "vite": "^4.4.9"
-  },
-  "peerDependenciesMeta": {
-    "typescript": {
-      "optional": true
-    }
-  },
   "gitHead": "3da4a07183d48528ef431d46a8d327c053c4fe94",
   "lint-staged": {
     "**/*.{js,ts}": [