@hubspot/ui-extensions-dev-server 0.8.41 → 0.8.43

package/dist/lib/ast.d.ts

@@ -1,6 +1,12 @@
-import { SourceCodeChecks } from './types';
-import { Program } from 'estree';
-export declare function traverseAbstractSyntaxTree(ast: Program, checks: SourceCodeChecks, extensionPath: string): {
+import { SourceCodeMetadata, SourceCodeChecks, Logger } from './types';
+import { Program, Node } from 'estree';
+/**
+ * We only support image imports that are within the extension directory.
+ * This function will check if an image is out of bounds and collect any that are out of bounds, so we can warn the user before they run into build issues.
+ */
+export declare function checkForOutOfBoundsImageImports(node: Node, output: SourceCodeMetadata, extensionPath: string): void;
+export declare function traverseAbstractSyntaxTree(ast: Program, checks: SourceCodeChecks, extensionPath: string, logger: Logger): {
     functions: {};
     badImports: never[];
+    dataDependencies: never[];
 };

package/dist/lib/ast.js

@@ -4,10 +4,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.traverseAbstractSyntaxTree = void 0;
+exports.traverseAbstractSyntaxTree = exports.checkForOutOfBoundsImageImports = void 0;
 const path_1 = __importDefault(require("path"));
 // @ts-expect-error no type defs
 const estraverse_1 = require("estraverse");
+const utils_1 = require("./utils");
 function _isVariableImported(node, variableName) {
     if (!node) {
         return false;
@@ -52,37 +53,106 @@ function _checkForFunctionMetadata(node, parent, output, functionName) {
     }
 }
 /**
- * We only support imports that are within the extension directory.
- * This function will check if an import is out of bounds and collect any that are out of bounds, so we can warn the user before they run into build issues.
+ * We only support image imports that are within the extension directory.
+ * This function will check if an image is out of bounds and collect any that are out of bounds, so we can warn the user before they run into build issues.
  */
-function _checkForOutOfBoundsImports(node, output, extensionPath) {
+function checkForOutOfBoundsImageImports(node, output, extensionPath) {
     if (!node) {
         return;
     }
     if (node.type === 'ImportDeclaration' &&
         typeof node.source.value === 'string') {
-        const importPath = path_1.default.join(extensionPath, node.source.value);
-        const { dir } = path_1.default.parse(importPath);
-        if (!dir.includes(extensionPath)) {
+        const importPath = node.source.value;
+        // Only do the check for images.
+        if (!(0, utils_1.isImage)(importPath)) {
+            return;
+        }
+        // Build the full path to the import, using the extension path as the base.
+        const absoluteImportPath = path_1.default.resolve(extensionPath, importPath);
+        if (!(0, utils_1.isExtensionFile)(absoluteImportPath, extensionPath)) {
             output.badImports.push(importPath);
         }
     }
 }
+exports.checkForOutOfBoundsImageImports = checkForOutOfBoundsImageImports;
+/**
+ * This function collects all internal data dependencies for the extension
+ * Specifically, it collects dependencies which are using our custom hooks, eg `useCrmProperties`
+ */
+function _collectDataDependencies(node, output, logger) {
+    if (!node) {
+        return;
+    }
+    try {
+        // For now we only support `useCrmProperties`, but we can generalize this in the future.
+        if (node.type === 'CallExpression' &&
+            node.callee.type === 'Identifier' &&
+            node.callee.name === 'useCrmProperties') {
+            const propertyType = 'CrmRecordDataProperties';
+            // Get the second argument, the properties array.
+            const propertiesNode = node.arguments[1];
+            const requestedProperties = [];
+            // If the second argument is an array with at least one element, we will collect the properties.
+            if (propertiesNode &&
+                propertiesNode.type === 'ArrayExpression' &&
+                propertiesNode.elements.length > 0) {
+                propertiesNode.elements.forEach((element) => {
+                    /**
+                     * We only support strings for now, and ignore the rest.
+                     * Again, this might be more generalized in the future as we support more hooks.
+                     */
+                    if (element &&
+                        element.type === 'Literal' &&
+                        typeof element.value === 'string') {
+                        requestedProperties.push(element.value);
+                    }
+                });
+                output.dataDependencies.push({
+                    /**
+                     * This refID is a hash of the property type and the requested properties.
+                     * This should allow us to create the same hash at execution time, to find the correct data from BE.
+                     */
+                    refId: (0, utils_1.generateHash)(propertyType, requestedProperties),
+                    properties: {
+                        type: propertyType,
+                        recordProperties: requestedProperties,
+                    },
+                });
+            }
+        }
+    }
+    catch (e) {
+        logger.warn(`Error collecting data dependencies (skipping): ${e instanceof Error ? e.message : String(e)}`);
+    }
+}
 // 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, extensionPath) {
+function traverseAbstractSyntaxTree(ast, checks, extensionPath, logger) {
     const state = {
         functions: {},
         badImports: [],
+        dataDependencies: [],
     };
-    (0, estraverse_1.traverse)(ast, {
-        enter(node, parent) {
-            checks.forEach((check) => {
-                _checkForFunctionMetadata(node, parent, state, check.functionName);
-                _checkForOutOfBoundsImports(node, state, extensionPath);
-            });
-        },
-    });
+    try {
+        (0, estraverse_1.traverse)(ast, {
+            enter(node, parent) {
+                try {
+                    checks.forEach((check) => {
+                        _checkForFunctionMetadata(node, parent, state, check.functionName);
+                    });
+                    checkForOutOfBoundsImageImports(node, state, extensionPath);
+                    _collectDataDependencies(node, state, logger);
+                }
+                catch (e) {
+                    // Don't let individual node processing errors crash the entire traverse.
+                    logger.warn(`Error processing node: ${JSON.stringify(node)}: ${e instanceof Error ? e.message : String(e)}`);
+                }
+            },
+        });
+    }
+    catch (e) {
+        logger.warn(`Unable to traverse AST: ${e instanceof Error ? e.message : String(e)}`);
+    }
     return state;
 }
 exports.traverseAbstractSyntaxTree = traverseAbstractSyntaxTree;

package/dist/lib/plugins/codeBlockingPlugin.js

@@ -14,6 +14,7 @@ const codeBlockingPlugin = ({ logger, extensionPath }) => {
             let sourceCodeMetadata = {
                 functions: {},
                 badImports: [],
+                dataDependencies: [],
             };
             const requireFunctionName = 'require';
             try {
@@ -21,7 +22,7 @@ const codeBlockingPlugin = ({ logger, extensionPath }) => {
                 // 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 }], extensionPath);
+                sourceCodeMetadata = (0, ast_1.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.`);

package/dist/lib/plugins/manifestPlugin.js

@@ -10,18 +10,45 @@ const path_1 = require("path");
 const constants_1 = require("../constants");
 const path_2 = __importDefault(require("path"));
 const utils_1 = require("../utils");
+const ast_1 = require("../ast");
 const PACKAGE_LOCK_FILE = 'package-lock.json';
 const PACKAGE_FILE = 'package.json';
 const EXTENSIONS_PATH = 'src/app/extensions/';
 const manifestPlugin = (options) => {
+    let allDataDependencies;
     return {
         name: 'ui-extensions-manifest-generation-plugin',
         enforce: 'post',
+        buildStart() {
+            // Reset the source metadata for the new build
+            allDataDependencies = [];
+        },
+        transform(code, filename) {
+            const { logger } = options;
+            // We only need to parse the AST for extension files, so check that first.
+            const isExtension = (0, utils_1.isExtensionFile)(filename, options.extensionPath || '');
+            if (!isExtension) {
+                return { code, map: null };
+            }
+            try {
+                const ast = this.parse(code);
+                const sourceCodeMetadata = (0, ast_1.traverseAbstractSyntaxTree)(ast, [], options.extensionPath || process.cwd(), logger);
+                allDataDependencies = [
+                    ...allDataDependencies,
+                    ...sourceCodeMetadata.dataDependencies,
+                ];
+            }
+            catch (e) {
+                logger.error(`Unable to parse source code for ${filename}, ${e}`);
+            }
+            // We don't need to actually transform anything, just collect data, so return the original code
+            return { code, map: null };
+        },
         generateBundle(_rollupOptions, bundle) {
             const { output, minify = false, extensionPath = process.cwd(), logger, } = options;
             try {
                 const filename = path_2.default.parse(output).name;
-                const manifest = _generateManifestContents(bundle, extensionPath);
+                const manifest = _generateManifestContents(bundle, extensionPath, allDataDependencies);
                 this.emitFile({
                     type: 'asset',
                     source: minify
@@ -36,19 +63,22 @@ const manifestPlugin = (options) => {
         },
     };
 };
-function _generateManifestContents(bundle, extensionPath) {
+function _generateManifestContents(bundle, extensionPath, allDataDependencies) {
     const baseManifest = {
         package: _loadPackageFile(extensionPath),
     };
+    const dataDependencies = {
+        dataDeps: allDataDependencies !== null && allDataDependencies !== void 0 ? allDataDependencies : [],
+    };
     // The keys to bundle are the filename without any path information
     const bundles = Object.keys(bundle).filter((cur) => cur.endsWith('.js'));
     if (bundles.length === 1) {
-        return Object.assign(Object.assign({}, _generateManifestEntry(bundle[bundles[0]])), baseManifest);
+        return Object.assign(Object.assign(Object.assign({}, _generateManifestEntry(bundle[bundles[0]])), dataDependencies), baseManifest);
     }
     const manifest = bundles.reduce((acc, current) => {
         return Object.assign(Object.assign({}, acc), { [current]: _generateManifestEntry(bundle[current]) });
     }, {});
-    return Object.assign(Object.assign({}, manifest), baseManifest);
+    return Object.assign(Object.assign(Object.assign({}, manifest), dataDependencies), baseManifest);
 }
 function _generateManifestEntry(subBundle) {
     const { facadeModuleId, moduleIds, modules } = subBundle;

package/dist/lib/types.d.ts

@@ -115,11 +115,19 @@ export interface FunctionMetadata {
     defined?: boolean;
     invoked?: boolean;
 }
+export type DataDependency = {
+    refId: string;
+    properties: {
+        type: string;
+        recordProperties: string[];
+    };
+};
 export interface SourceCodeMetadata {
     functions: {
         [functionName: string]: FunctionMetadata;
     };
     badImports: string[];
+    dataDependencies: DataDependency[];
 }
 export interface FunctionInvocationCheck {
     functionName: string;

package/dist/lib/utils.d.ts

@@ -4,8 +4,21 @@ export declare function stripAnsiColorCodes(stringWithColorCodes: string | undef
 export declare function loadManifest(outputDir: string, output: string): any;
 export declare function buildSourceId(appConfig: AppConfig, extensionConfig: ExtensionConfig): string | null;
 export declare function isNodeModule(filepath: string | undefined): boolean;
+/**
+ * Check if a given file is within the extension path
+ */
+export declare function isExtensionFile(filepath: string | undefined, extensionPath: string): boolean;
 export declare class UnhandledPlatformVersionError extends Error {
     constructor(platformVersion: never);
 }
 export declare function throwUnhandledPlatformVersionError(platformVersion: never): never;
 export declare function extractAllowedUrls(appConfig?: AppConfig): string[];
+/**
+ * This function generates a deterministic hash from any number of arguments
+ * Arrays and objects are stringified to ensure it works for all types.
+ */
+export declare function generateHash(...args: unknown[]): string;
+/**
+ * Check if a given URL is an image (of a type we support)
+ */
+export declare function isImage(url: string): boolean;

package/dist/lib/utils.js

@@ -3,9 +3,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.extractAllowedUrls = exports.throwUnhandledPlatformVersionError = exports.UnhandledPlatformVersionError = exports.isNodeModule = exports.buildSourceId = exports.loadManifest = exports.stripAnsiColorCodes = exports.getUrlSafeFileName = void 0;
+exports.isImage = exports.generateHash = exports.extractAllowedUrls = exports.throwUnhandledPlatformVersionError = exports.UnhandledPlatformVersionError = exports.isExtensionFile = exports.isNodeModule = exports.buildSourceId = exports.loadManifest = exports.stripAnsiColorCodes = exports.getUrlSafeFileName = void 0;
 const path_1 = __importDefault(require("path"));
 const fs_1 = __importDefault(require("fs"));
+const crypto_1 = require("crypto");
 const constants_1 = require("./constants");
 function getUrlSafeFileName(filePath) {
     const { name } = path_1.default.parse(filePath);
@@ -48,6 +49,19 @@ function isNodeModule(filepath) {
     return directory.includes('node_modules');
 }
 exports.isNodeModule = isNodeModule;
+/**
+ * Check if a given file is within the extension path
+ */
+function isExtensionFile(filepath, extensionPath) {
+    if (!filepath) {
+        return false;
+    }
+    const absoluteFilePath = path_1.default.resolve(filepath).toLowerCase();
+    const absoluteExtensionDirPath = path_1.default.resolve(extensionPath).toLowerCase();
+    const relativePath = path_1.default.relative(absoluteExtensionDirPath, absoluteFilePath);
+    return !relativePath.startsWith('..');
+}
+exports.isExtensionFile = isExtensionFile;
 class UnhandledPlatformVersionError extends Error {
     constructor(platformVersion) {
         super(`Unsupported platform version "${platformVersion}"`);
@@ -65,3 +79,37 @@ function extractAllowedUrls(appConfig) {
     return appConfig.allowedUrls;
 }
 exports.extractAllowedUrls = extractAllowedUrls;
+/**
+ * This function generates a deterministic hash from any number of arguments
+ * Arrays and objects are stringified to ensure it works for all types.
+ */
+function generateHash(...args) {
+    try {
+        // First make sure all the values are strings
+        const normalizedArgs = args.map((arg) => {
+            if (Array.isArray(arg)) {
+                return [...arg].sort().join('-');
+            }
+            if (arg && typeof arg === 'object') {
+                return JSON.stringify(arg, Object.keys(arg).sort());
+            }
+            return String(arg);
+        });
+        const input = [...normalizedArgs].join('::');
+        // Return the hash of the joined string.
+        return (0, crypto_1.createHash)('md5').update(input).digest('hex');
+    }
+    catch (e) {
+        console.error('Error generating hash: ', e);
+        // Just return an empty string if anything goes wrong.
+        return '';
+    }
+}
+exports.generateHash = generateHash;
+/**
+ * Check if a given URL is an image (of a type we support)
+ */
+function isImage(url) {
+    return /\.(png|jpg|jpeg|gif|svg|webp|avif|raw|url|inline)$/.test(url);
+}
+exports.isImage = isImage;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.8.41",
+  "version": "0.8.43",
   "description": "",
   "bin": {
     "uie": "./dist/lib/bin/cli.js"
@@ -27,16 +27,16 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@hubspot/app-functions-dev-server": "0.8.41",
-    "chalk": "^5.4.1",
-    "commander": "^13.0.0",
-    "cors": "^2.8.5",
+    "@hubspot/app-functions-dev-server": "0.8.43",
+    "chalk": "5.4.1",
+    "commander": "13.0.0",
+    "cors": "2.8.5",
     "detect-port": "1.5.1",
-    "estraverse": "^5.3.0",
-    "express": "^4.18.2",
+    "estraverse": "5.3.0",
+    "express": "4.18.2",
     "inquirer": "8.2.0",
-    "ora": "^8.1.1",
-    "vite": "^4.4.9"
+    "ora": "8.1.1",
+    "vite": "4.5.5"
   },
   "devDependencies": {
     "@types/estree": "^1.0.5",
@@ -45,7 +45,7 @@
     "@types/jest": "^29.5.4",
     "acorn": "^8.11.2",
     "ava": "4.3.3",
-    "axios": "^1.6.8",
+    "axios": "1.6.8",
     "jest": "^29.5.0",
     "ts-jest": "^29.1.1",
     "typescript": "^5.1.6",
@@ -69,5 +69,5 @@
       "optional": true
     }
   },
-  "gitHead": "ce6d6332d471d5c5ac127de88a8fa51dd7506c3e"
+  "gitHead": "a140eea0a991c41c86030a5017b54bfd6151ab4c"
 }