@hubspot/ui-extensions-dev-server 0.8.6 → 0.8.7

package/dist/lib/DevModeInterface.js

@@ -33,7 +33,7 @@ class DevModeInterface {
             const extensionsConfigForApp = (0, config_1.loadExtensionConfig)(component.config, component.path);
             const extensionConfigKeys = Object.keys(extensionsConfigForApp);
             // Loop over the loaded extension configs and generate the list of choices to use to prompt the user for input
-            extensionConfigKeys.forEach(extensionKey => {
+            extensionConfigKeys.forEach((extensionKey) => {
                 const extensionConfig = extensionsConfigForApp[extensionKey];
                 appExtensionMappings.push({
                     name: `${componentName}/${extensionConfig.data.title}`,
@@ -81,7 +81,7 @@ class DevModeInterface {
                         if (!input || input.length === 0) {
                             return 'Select at least one extension to run';
                         }
-                        const appNames = new Set(input.map(choice => choice.data.appName));
+                        const appNames = new Set(input.map((choice) => choice.data.appName));
                         if (appNames.size > 1) {
                             return 'Running multiple extensions is only supported for a single application';
                         }
@@ -100,7 +100,7 @@ class DevModeInterface {
             if (!this.devServerState || !this.devServerState.extensionsMetadata) {
                 return;
             }
-            const relevantConfigFileChanged = this.devServerState.extensionsMetadata.some(metadata => metadata.config.extensionConfigPath === filePath);
+            const relevantConfigFileChanged = this.devServerState.extensionsMetadata.some((metadata) => metadata.config.extensionConfigPath === filePath);
             if (relevantConfigFileChanged && this.onUploadRequired) {
                 this.onUploadRequired();
             }
@@ -135,7 +135,7 @@ class DevModeInterface {
                 webSocketPort,
             });
             this.shutdown = yield (0, dev_1.startDevMode)(this.devServerState);
-            this.devServerState.extensionsMetadata.forEach(metadata => {
+            this.devServerState.extensionsMetadata.forEach((metadata) => {
                 const { config: { data: { title, appName }, }, } = metadata;
                 logger_1.logger.info(`Running extension '${title}' from app '${appName}'`);
             });

package/dist/lib/DevServerState.js

@@ -12,7 +12,7 @@ class DevServerState {
             throw new Error('Unable to load the required extension configuration files');
         }
         const extensionsMetadata = [];
-        extensionConfigs.forEach(config => {
+        extensionConfigs.forEach((config) => {
             const { appName, title, sourceId } = config.data;
             extensionsMetadata.push({
                 config,

package/dist/lib/ast.d.ts

@@ -0,0 +1,5 @@
+import { SourceCodeChecks } from './types';
+import { Program } from 'estree';
+export declare function traverseAbstractSyntaxTree(ast: Program, checks: SourceCodeChecks): {
+    functions: {};
+};

package/dist/lib/ast.js

@@ -0,0 +1,65 @@
+"use strict";
+/* eslint-disable hubspot-dev/no-unsupported-ts-syntax */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.traverseAbstractSyntaxTree = void 0;
+// @ts-expect-error no type defs
+const estraverse_1 = require("estraverse");
+function _isVariableImported(node, variableName) {
+    if (!node) {
+        return false;
+    }
+    return ((node.type === 'ImportSpecifier' && node.imported.name === variableName) ||
+        (node.type === 'ImportDefaultSpecifier' &&
+            node.local.name === variableName) ||
+        (node.type === 'ImportNamespaceSpecifier' &&
+            node.local.name === variableName));
+}
+function _isIdentifierDefined(node, parent, name) {
+    if (parent &&
+        (parent.type === 'MemberExpression' || parent.type === 'CallExpression')) {
+        return false;
+    }
+    return node.type === 'Identifier' && node.name === name;
+}
+function _isFunctionInvoked(node, functionName) {
+    return (node.type === 'CallExpression' &&
+        node.callee &&
+        'name' in node.callee &&
+        node.callee.name === functionName);
+}
+function _checkForFunctionMetadata(node, parent, output, functionName) {
+    if (!node) {
+        return;
+    }
+    if (!output.functions[functionName]) {
+        output.functions[functionName] = {};
+    }
+    if (_isFunctionInvoked(node, functionName)) {
+        output.functions[functionName].invoked = true;
+        // If the function is invoked before being defined we will assume it is a global function
+        output.functions[functionName].scope = output.functions[functionName]
+            .defined
+            ? 'Local'
+            : 'Global';
+    }
+    else if (_isIdentifierDefined(node, parent, functionName) ||
+        _isVariableImported(node, functionName)) {
+        output.functions[functionName].defined = true;
+    }
+}
+// Traverses an ESTree as defined by the EsTree spec https://github.com/estree/estree
+// Uses the checks array to search the source code for matches
+function traverseAbstractSyntaxTree(ast, checks) {
+    const state = {
+        functions: {},
+    };
+    (0, estraverse_1.traverse)(ast, {
+        enter(node, parent) {
+            checks.forEach((check) => {
+                _checkForFunctionMetadata(node, parent, state, check.functionName);
+            });
+        },
+    });
+    return state;
+}
+exports.traverseAbstractSyntaxTree = traverseAbstractSyntaxTree;

package/dist/lib/build.js

@@ -19,6 +19,7 @@ const manifestPlugin_1 = __importDefault(require("./plugins/manifestPlugin"));
 const path_1 = __importDefault(require("path"));
 const utils_1 = require("./utils");
 const codeInjectionPlugin_1 = __importDefault(require("./plugins/codeInjectionPlugin"));
+const codeBlockingPlugin_1 = __importDefault(require("./plugins/codeBlockingPlugin"));
 const allowedExtensions = ['.js', '.ts', '.tsx', '.jsx'];
 exports.extensionErrorBaseMessage = `Supported file extensions are [${allowedExtensions.join(', ')}], received:`;
 function buildSingleExtension({ file, outputDir = constants_1.OUTPUT_DIR, emptyOutDir = true, minify = false, root = process.cwd(), // This is the vite default, so using that as our default
@@ -40,6 +41,7 @@ function buildSingleExtension({ file, outputDir = constants_1.OUTPUT_DIR, emptyO
                 rollupOptions: Object.assign(Object.assign({}, constants_1.ROLLUP_OPTIONS), { plugins: [
                         (0, manifestPlugin_1.default)({ output, extensionPath: root }),
                         (0, codeInjectionPlugin_1.default)({ file }),
+                        (0, codeBlockingPlugin_1.default)(),
                     ] }),
                 outDir: outputDir,
                 emptyOutDir,

package/dist/lib/config.js

@@ -18,7 +18,7 @@ function loadExtensionConfig(appConfig, appPath) {
     var _a, _b;
     const crmCardsSubConfigFiles = (_b = (_a = appConfig === null || appConfig === void 0 ? void 0 : appConfig.extensions) === null || _a === void 0 ? void 0 : _a.crm) === null || _b === void 0 ? void 0 : _b.cards;
     const outputConfig = {};
-    crmCardsSubConfigFiles.forEach(card => {
+    crmCardsSubConfigFiles.forEach((card) => {
         var _a, _b;
         const cardConfigPath = path_1.default.join(appPath, card.file);
         try {

package/dist/lib/extensionsService.js

@@ -18,7 +18,7 @@ class ExtensionsService {
     generateExtensionsHandler(devServerState, capabilities = []) {
         return function extensionsHandler(_req, res) {
             try {
-                const extensions = devServerState.extensionsMetadata.map(metadata => {
+                const extensions = devServerState.extensionsMetadata.map((metadata) => {
                     const { baseMessage } = metadata;
                     const output = path_1.default.parse(baseMessage.callback).name;
                     return Object.assign(Object.assign({}, baseMessage), { manifest: (0, utils_1.loadManifest)(devServerState.outputDir, output) });

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

@@ -0,0 +1,4 @@
+import { Rollup } from 'vite';
+export type CodeBlockingPlugin = () => Rollup.Plugin;
+declare const codeBlockingPlugin: CodeBlockingPlugin;
+export default codeBlockingPlugin;

package/dist/lib/plugins/codeBlockingPlugin.js

@@ -0,0 +1,39 @@
+"use strict";
+/* eslint-disable hubspot-dev/no-unsupported-ts-syntax */
+Object.defineProperty(exports, "__esModule", { value: true });
+const utils_1 = require("../utils");
+const ast_1 = require("../ast");
+// @ts-expect-error no types
+const logger_1 = require("@hubspot/cli-lib/logger");
+const codeBlockingPlugin = () => {
+    return {
+        name: 'ui-extensions-code-blocking-plugin',
+        enforce: 'post',
+        transform(code, filename) {
+            if ((0, utils_1.isNodeModule)(filename)) {
+                return { code, map: null }; // We don't want to parse node modules
+            }
+            let sourceCodeMetadata = { functions: {} };
+            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 = (0, ast_1.traverseAbstractSyntaxTree)(abstractSyntaxTree, [
+                    { functionName: requireFunctionName },
+                ]);
+            }
+            catch (e) {
+                logger_1.logger.debug('Unable to parse and traverse source code');
+                return { code, map: null };
+            }
+            if (sourceCodeMetadata.functions[requireFunctionName] &&
+                sourceCodeMetadata.functions[requireFunctionName].scope === 'Global') {
+                logger_1.logger.warn('require statements are not supported, replace require statements with import');
+            }
+            return { code, map: null };
+        },
+    };
+};
+exports.default = codeBlockingPlugin;

package/dist/lib/plugins/codeCheckingPlugin.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const fs_1 = __importDefault(require("fs"));
 // @ts-expect-error no type defs for the logger
 const logger_1 = require("@hubspot/cli-lib/logger");
-const codeCheckingPlugin = options => {
+const codeCheckingPlugin = (options) => {
     const { output } = options;
     return {
         name: 'ui-extensions-code-checking-plugin',

package/dist/lib/plugins/codeInjectionPlugin.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const path_1 = __importDefault(require("path"));
-const codeInjectionPlugin = options => {
+const codeInjectionPlugin = (options) => {
     const { file, root = process.cwd() } = options;
     return {
         name: 'ui-extensions-code-injection-plugin',

package/dist/lib/plugins/devBuildPlugin.js

@@ -47,10 +47,11 @@ const path_1 = __importDefault(require("path"));
 const logger_1 = require("@hubspot/cli-lib/logger");
 const friendlyLoggingPlugin_1 = __importDefault(require("./friendlyLoggingPlugin"));
 const relevantModulesPlugin_1 = __importStar(require("./relevantModulesPlugin"));
+const codeBlockingPlugin_1 = __importDefault(require("./codeBlockingPlugin"));
 function addVersionToBaseMessage(baseMessage) {
     return Object.assign(Object.assign({}, baseMessage), { version: constants_1.WEBSOCKET_MESSAGE_VERSION });
 }
-const devBuildPlugin = options => {
+const devBuildPlugin = (options) => {
     const { devServerState } = options;
     let lastBuildErrorContext;
     const handleBuildError = (error, server) => {
@@ -102,6 +103,7 @@ const devBuildPlugin = options => {
                             }),
                             (0, friendlyLoggingPlugin_1.default)(),
                             (0, relevantModulesPlugin_1.default)({ output: extensionConfig.output }),
+                            (0, codeBlockingPlugin_1.default)(),
                         ], output: Object.assign(Object.assign({}, constants_1.ROLLUP_OPTIONS.output), { sourcemap: 'inline' }) }),
                     outDir: devServerState.outputDir,
                     emptyOutDir,
@@ -132,7 +134,7 @@ const devBuildPlugin = options => {
             localServer = server;
             localServer.ws.on('connection', () => {
                 logger_1.logger.info('Browser connected and listening for bundle updates');
-                devServerState.extensionsMetadata.forEach(metadata => {
+                devServerState.extensionsMetadata.forEach((metadata) => {
                     // @ts-expect-error Our websocket messages don't match Vite format
                     localServer.ws.send(Object.assign(Object.assign({}, addVersionToBaseMessage(metadata.baseMessage)), { event: 'start' }));
                 });
@@ -146,7 +148,7 @@ const devBuildPlugin = options => {
         }),
         handleHotUpdate: ({ file, server }) => __awaiter(void 0, void 0, void 0, function* () {
             // If the file is not in the relevantModules list, it's update is inconsequential
-            const extensionsToRebuild = devServerState.extensionsMetadata.filter(metadata => {
+            const extensionsToRebuild = devServerState.extensionsMetadata.filter((metadata) => {
                 const { config } = metadata;
                 return (0, relevantModulesPlugin_1.getRelevantModules)(config.output).includes(file);
             });
@@ -174,7 +176,7 @@ const devBuildPlugin = options => {
             }
             if (localServer && localServer.ws) {
                 logger_1.logger.debug('Sending shutdown message to connected browsers');
-                devServerState.extensionsMetadata.forEach(metadata => {
+                devServerState.extensionsMetadata.forEach((metadata) => {
                     // @ts-expect-error Our websocket messages don't match Vite format
                     localServer.ws.send(Object.assign(Object.assign({}, addVersionToBaseMessage(metadata.baseMessage)), { event: 'shutdown' }));
                 });

package/dist/lib/plugins/manifestPlugin.js

@@ -15,7 +15,7 @@ const utils_1 = require("../utils");
 const PACKAGE_LOCK_FILE = 'package-lock.json';
 const PACKAGE_FILE = 'package.json';
 const EXTENSIONS_PATH = 'src/app/extensions/';
-const manifestPlugin = options => {
+const manifestPlugin = (options) => {
     return {
         name: 'ui-extensions-manifest-generation-plugin',
         enforce: 'post',
@@ -43,7 +43,7 @@ function _generateManifestContents(bundle, extensionPath) {
         package: _loadPackageFile(extensionPath),
     };
     // The keys to bundle are the filename without any path information
-    const bundles = Object.keys(bundle).filter(cur => cur.endsWith('.js'));
+    const bundles = Object.keys(bundle).filter((cur) => cur.endsWith('.js'));
     if (bundles.length === 1) {
         return Object.assign(Object.assign({}, _generateManifestEntry(bundle[bundles[0]])), baseManifest);
     }

package/dist/lib/plugins/relevantModulesPlugin.js

@@ -19,7 +19,7 @@ const relevantModulesPlugin = ({ output }) => {
                 logger_1.logger.error('Invalid bundle format, please try saving the extension again.  If the problem persists try restarting `hs project dev`');
                 return;
             }
-            const updatedRelevantModules = subBundle.moduleIds.filter(moduleId => !(0, utils_1.isNodeModule)(moduleId));
+            const updatedRelevantModules = subBundle.moduleIds.filter((moduleId) => !(0, utils_1.isNodeModule)(moduleId));
             if (updatedRelevantModules.length === 0) {
                 logger_1.logger.error('Unable to determine relevant files to watch, please try saving the extension again. If the problem persists try restarting `hs project dev`');
                 return;

package/dist/lib/server.js

@@ -27,7 +27,7 @@ function listen(app, port) {
             .listen({ port }, () => {
             resolve(server);
         })
-            .on('error', err => {
+            .on('error', (err) => {
             reject(err);
         });
     });
@@ -43,7 +43,7 @@ function startDevServer({ devServerState, viteDevServer, }) {
         logger_1.logger.info(`Serving app functions locally (platform version ${devServerState.functionsConfig.platformVersion})`);
         const endpointsAdded = extensionsService_1.default.add(app, devServerState, constants_1.SERVER_CAPABILITIES);
         const { expressPort } = devServerState;
-        endpointsAdded.forEach(endpoint => {
+        endpointsAdded.forEach((endpoint) => {
             logger_1.logger.debug(`Listening at http://hslocal.net:${expressPort}${endpoint}`);
         });
         // Vite middlewares needs to go last because it's greedy and will block other middleware
@@ -58,7 +58,7 @@ function startDevServer({ devServerState, viteDevServer, }) {
             }
             throw new Error(e);
         }
-        (_a = devServerState.extensionsMetadata) === null || _a === void 0 ? void 0 : _a.forEach(metadata => {
+        (_a = devServerState.extensionsMetadata) === null || _a === void 0 ? void 0 : _a.forEach((metadata) => {
             const { baseMessage } = metadata;
             logger_1.logger.debug(`Listening at ${baseMessage.callback}`);
         });

package/dist/lib/types.d.ts

@@ -56,5 +56,19 @@ export interface ExtensionMetadata {
     baseMessage: BaseMessage;
     config: ExtensionConfig;
 }
-export type PlatformVersion = typeof PLATFORM_VERSION[keyof typeof PLATFORM_VERSION];
+export type PlatformVersion = (typeof PLATFORM_VERSION)[keyof typeof PLATFORM_VERSION];
+export interface FunctionMetadata {
+    scope?: 'Global' | 'Local';
+    defined?: boolean;
+    invoked?: boolean;
+}
+export interface SourceCodeMetadata {
+    functions: {
+        [functionName: string]: FunctionMetadata;
+    };
+}
+export interface FunctionInvocationCheck {
+    functionName: string;
+}
+export type SourceCodeChecks = FunctionInvocationCheck[];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.8.6",
+  "version": "0.8.7",
   "description": "",
   "scripts": {
     "test": "jest",
@@ -9,7 +9,8 @@
     "watch": "npm run clean && tsc --watch",
     "prepare": "npm run build",
     "lint": "echo 'no lint step for @hubspot/ui-extensions-dev-server'",
-    "jest": "jest --watch"
+    "jest": "jest --watch",
+    "integration-test": "npm run build && npm run integration-test --prefix ./integrationTests/fixtures"
   },
   "publishConfig": {
     "access": "public"
@@ -24,21 +25,24 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@hubspot/app-functions-dev-server": "^0.8.3",
+    "@hubspot/app-functions-dev-server": "^0.8.7",
     "@hubspot/cli-lib": "^4.1.6",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^7.0.1",
     "console-log-colors": "^0.4.0",
     "cors": "^2.8.5",
     "detect-port": "1.5.1",
+    "estraverse": "^5.3.0",
     "express": "^4.18.2",
     "inquirer": "8.2.0",
     "vite": "^4.4.9"
   },
   "devDependencies": {
+    "@types/estree": "^1.0.5",
     "@types/express": "types/express",
     "@types/inquirer": "^9.0.3",
     "@types/jest": "^29.5.4",
+    "acorn": "^8.11.2",
     "axios": "^1.4.0",
     "jest": "^29.5.0",
     "ts-jest": "^29.1.1",
@@ -63,5 +67,5 @@
       "optional": true
     }
   },
-  "gitHead": "621bee406c8dfa9ca133f1d76f4bde725a2b9f43"
+  "gitHead": "0c1330256590bf0b553b2710c3d1e17acbcc099c"
 }