@hubspot/ui-extensions-dev-server 0.0.1-prealpha.3 → 0.0.1-prealpha.5

package/build.js

@@ -6,21 +6,23 @@ async function buildAllExtensions(config, outputDir) {
   for (let i = 0; i < extensionKeys.length; ++i) {
     const { data } = config[extensionKeys[i]];
 
-    await buildSingleExtension(
-      data?.module.file,
-      data?.output,
+    await buildSingleExtension({
+      file: data?.module.file,
+      outputFileName: data?.output,
       outputDir,
-      i === 0
-    );
+      emptyOutDir: i === 0,
+    });
   }
 }
 
-async function buildSingleExtension(
+async function buildSingleExtension({
   file,
   outputFileName,
   outputDir,
-  emptyOutDir = true
-) {
+  emptyOutDir = true,
+  plugins = { rollup: [], vite: [] },
+  minify = false,
+}) {
   await build({
     build: {
       lib: {
@@ -29,10 +31,14 @@ async function buildSingleExtension(
         formats: ['iife'],
         fileName: () => outputFileName,
       },
-      rollupOptions: ROLLUP_OPTIONS,
+      rollupOptions: {
+        ...ROLLUP_OPTIONS,
+        plugins: [...(ROLLUP_OPTIONS.plugins || []), ...plugins?.rollup],
+      },
       outDir: outputDir,
       emptyOutDir,
-      minify: false,
+      minify,
+      plugins: plugins?.vite,
     },
   });
 }

package/cli.js

@@ -43,12 +43,14 @@ function showHelp(OUTPUT_DIR) {
       optionList: [
         {
           name: 'extension',
+          alias: 'e',
           typeLabel: '{underline file}',
           description:
-            'The extension entrypoint file build or start local development for',
+            'The extension entrypoint file to build or start local development for',
         },
         {
           name: 'help',
+          alias: 'h',
           description: 'Print this usage guide.',
         },
       ],

package/config.js

@@ -71,30 +71,47 @@ function loadConfig() {
 
   const mainAppConfig = _loadRequiredConfigFile(configPath);
 
-  if (!mainAppConfig?.extensions?.crm?.cards) {
+  const crmCardsSubConfigFiles = mainAppConfig?.extensions?.crm?.cards;
+  if (!crmCardsSubConfigFiles) {
     logger.error(
-      `"extensions.crm.cards" is missing in ${configPath}, it is a required configuration property`
+      `The "extensions.crm.cards" array in ${configPath} is missing, it is a required configuration property`
+    );
+    process.exit(1);
+  } else if (crmCardsSubConfigFiles.length === 0) {
+    logger.error(
+      `The "extensions.crm.cards" array in ${configPath} is empty, it is a required configuration property.`
     );
     process.exit(1);
   }
 
   const outputConfig = {};
 
-  mainAppConfig.extensions.crm.cards.forEach(card => {
+  crmCardsSubConfigFiles.forEach(card => {
     const extensionsRemoved = card.file.replace('extensions/', '');
-    const cardPath = path.join(process.cwd(), extensionsRemoved);
+    const cardConfigPath = path.join(process.cwd(), extensionsRemoved);
+    // Get the path to the config file relative to the extensions directory
+    const configPathRelativeToExtensions = path.parse(extensionsRemoved)?.dir;
+
     try {
-      const cardConfig = require(cardPath);
-      const extensionFileName = cardConfig.data?.module?.file;
-      outputConfig[extensionFileName] = cardConfig;
-      outputConfig[extensionFileName].data.output = getUrlSafeFileName(
+      const cardConfig = require(cardConfigPath);
+
+      // Join the two relative paths
+      const entryPointPath = path.join(
+        configPathRelativeToExtensions,
         cardConfig.data?.module?.file
       );
-      outputConfig[extensionFileName].data.appName = projectConfig.name;
+
+      cardConfig.data.module.file = entryPointPath;
+
+      outputConfig[entryPointPath] = cardConfig;
+      outputConfig[entryPointPath].data.output = getUrlSafeFileName(
+        entryPointPath
+      );
+      outputConfig[entryPointPath].data.appName = projectConfig.name;
     } catch (e) {
       let errorMessage = e?.message;
       if (e?.code === 'MODULE_NOT_FOUND') {
-        errorMessage = `Unable to load "${cardPath}" file. \nPlease make sure you are running the command from the src/app/extensions directory and that your card JSON config exists within it.`;
+        errorMessage = `Unable to load "${cardConfigPath}" file. \nPlease make sure you are running the command from the src/app/extensions directory and that your card JSON config exists within it.`;
       }
 
       logger.error(errorMessage);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.0.1-prealpha.3",
+  "version": "0.0.1-prealpha.5",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -22,7 +22,8 @@
     "utils.js",
     "tests/runTests.js",
     "tests/testBuild.js",
-    "tests/testDevServer.js"
+    "tests/testDevServer.js",
+    "plugins/manifestPlugin.js"
   ],
   "license": "MIT",
   "dependencies": {
@@ -45,5 +46,16 @@
       "node": true
     }
   },
-  "gitHead": "74dbffa7fe6e4ad7d5029897801c11dc5d5edae1"
+  "engines": {
+    "node": ">=16"
+  },
+  "peerDependencies": {
+    "typescript": "^5.0.4"
+  },
+  "peerDependenciesMeta": {
+    "typescript": {
+      "optional": true
+    }
+  },
+  "gitHead": "a4652eb58cbde813dbebc8b7127c36102b9b6ed6"
 }

package/plugins/manifestPlugin.js

@@ -0,0 +1,108 @@
+const { readFileSync } = require('fs');
+const { normalize } = require('path');
+const logger = require('../logger');
+
+const DEFAULT_MANIFEST_NAME = 'manifest.json';
+const PACKAGE_LOCK_FILE = 'package-lock.json';
+const PACKAGE_FILE = 'package.json';
+const EXTENSIONS_PATH = 'src/app/extensions/';
+
+function plugin(options = {}) {
+  return {
+    name: 'ui-extensions-manifest-generation-plugin',
+    enforce: 'post', // run after default rollup plugins
+    generateBundle(_rollupOptions, bundle) {
+      const { output = DEFAULT_MANIFEST_NAME, minify = false } = options;
+      try {
+        const manifest = _generateManifestContents(bundle);
+        this.emitFile({
+          type: 'asset',
+          source: minify
+            ? JSON.stringify(manifest)
+            : JSON.stringify(manifest, null, 2),
+          fileName: normalize(output),
+        });
+      } catch (e) {
+        logger.warn(`\nUnable to write manifest file in ${output}, ${e}`);
+      }
+    },
+  };
+}
+
+function _generateManifestContents(bundle) {
+  const baseManifest = {
+    package: _loadPackageFile(),
+  };
+
+  // The keys to bundle are the filename without any path information
+  const bundles = Object.keys(bundle);
+
+  if (bundles.length === 1) {
+    return {
+      ..._generateManifestEntry(bundle[bundles[0]]),
+      ...baseManifest,
+    };
+  }
+
+  const manifest = bundles.reduce((acc, current) => {
+    return {
+      ...acc,
+      [current]: _generateManifestEntry(bundle[current], false),
+    };
+  }, {});
+
+  return {
+    ...manifest,
+    ...baseManifest,
+  };
+}
+
+function _generateManifestEntry(subBundle) {
+  const { facadeModuleId, moduleIds, modules } = subBundle;
+  return {
+    entry: _stripPathPriorToExtDir(facadeModuleId),
+    modules: _buildModulesInfo(moduleIds, modules),
+  };
+}
+
+function _loadJsonFileSafely(filename) {
+  try {
+    return JSON.parse(readFileSync(filename).toString());
+  } catch (e) {
+    return undefined;
+  }
+}
+
+function _loadPackageFile() {
+  // Look for package-lock.json then fallback to package.json
+  return (
+    _loadJsonFileSafely(PACKAGE_LOCK_FILE) || _loadJsonFileSafely(PACKAGE_FILE)
+  );
+}
+
+function _stripPathPriorToExtDir(filepath) {
+  return filepath.split(EXTENSIONS_PATH).pop();
+}
+
+function _buildModulesInfo(moduleIds, modules) {
+  return moduleIds.reduce(
+    (acc, mod) => {
+      const { renderedExports } = modules[mod];
+
+      const moduleData = {
+        module: _stripPathPriorToExtDir(mod),
+        renderedExports,
+      };
+
+      if (moduleData.module.includes('node_modules')) {
+        acc.external.push(moduleData);
+      } else {
+        acc.internal.push(moduleData);
+      }
+      return acc;
+    },
+    { internal: [], external: [] }
+  );
+}
+
+module.exports = plugin;

package/remoteBuild.js

@@ -2,20 +2,29 @@
 const { OUTPUT_DIR } = require('./constants');
 const { getUrlSafeFileName } = require('./utils');
 const { buildSingleExtension } = require('./build');
+const path = require('path');
+const manifestPlugin = require('./plugins/manifestPlugin');
 
-// Regular expressions to match files ending in ts, js, tsx, and jsx
-const entryPointRegex = new RegExp(/.*\.(ts|js)[x]?$/);
+const entryPoint = process.argv[process.argv.length - 1];
 
-let extension = process.argv[process.argv.length - 1];
+const allowedExtensions = ['.js', '.ts', '.tsx', '.jsx'];
 
-if (!entryPointRegex.test(extension)) {
+const fileInfo = path.parse(entryPoint);
+
+if (!allowedExtensions.includes(fileInfo.ext)) {
   throw new Error(
-    'The last argument should be the filename you wish to build.  Supported file extensions are [ts, tsx, js, jsx]'
+    `The last argument should be the filename you wish to build.  Supported file extensions are [${allowedExtensions.join(
+      ', '
+    )}]`
   );
 }
 
-// The incoming filename may be the full path the the file, so split the string
-// to remove any directory prefix up until the extensions directory
-extension = extension.split('extensions/').pop();
-
-buildSingleExtension(extension, getUrlSafeFileName(extension), OUTPUT_DIR);
+buildSingleExtension({
+  file: entryPoint,
+  outputFileName: getUrlSafeFileName(entryPoint),
+  outputDir: OUTPUT_DIR,
+  plugins: {
+    rollup: [manifestPlugin({ minify: true })],
+  },
+  minify: true,
+});

package/run.js

@@ -6,6 +6,7 @@ const { buildAllExtensions, buildSingleExtension } = require('./build');
 const { VITE_DEFAULT_PORT, OUTPUT_DIR } = require('./constants');
 const { parseArgs, showHelp } = require('./cli');
 const { getUrlSafeFileName } = require('./utils');
+const manifestPlugin = require('./plugins/manifestPlugin');
 
 const { DEV_MODE, BUILD_MODE, port, extension, help } = parseArgs();
 const PORT = port || VITE_DEFAULT_PORT;
@@ -18,7 +19,12 @@ if (DEV_MODE) {
   startDevMode(loadConfig(), OUTPUT_DIR, PORT, extension);
 } else if (BUILD_MODE) {
   if (extension) {
-    buildSingleExtension(extension, getUrlSafeFileName(extension), OUTPUT_DIR);
+    buildSingleExtension({
+      file: extension,
+      outputFileName: getUrlSafeFileName(extension),
+      outputDir: OUTPUT_DIR,
+      plugins: { rollup: [manifestPlugin()] },
+    });
   } else {
     buildAllExtensions(loadConfig(), OUTPUT_DIR);
   }

package/tests/testBuild.js

@@ -14,19 +14,37 @@ function _testHelper(command, outputDirFiles) {
   // Spot check the file contents to make sure they seem ok
   filesInOutputDir.forEach(file => {
     const fileContents = fs.readFileSync(path.join(distDir, file)).toString();
-    const stringsToSpotCheck = [
-      '.createRemoteReactComponent',
-      '.createElement',
-      'hubspot.extend',
-      'React',
-      'RemoteUI',
-    ];
-    stringsToSpotCheck.forEach(stringToCheck => {
-      assert(
-        fileContents.includes(stringToCheck),
-        `File ${file} contents should contain: "${stringToCheck}"`
-      );
-    });
+    if (file === 'manifest.json') {
+      const manifest = JSON.parse(fileContents);
+      assert(manifest.entry);
+      assert(manifest.modules);
+      assert(manifest.modules.internal);
+      manifest.modules.internal.forEach(mod => {
+        assert(mod.module);
+        assert(mod.renderedExports);
+      });
+      assert(manifest.modules.external);
+      manifest.modules.external.forEach(mod => {
+        assert(mod.module);
+        assert(mod.renderedExports);
+      });
+      assert(manifest.package);
+      assert(manifest.package.packages);
+    } else {
+      const stringsToSpotCheck = [
+        '.createRemoteReactComponent',
+        '.createElement',
+        'hubspot.extend',
+        'React',
+        'RemoteUI',
+      ];
+      stringsToSpotCheck.forEach(stringToCheck => {
+        assert(
+          fileContents.includes(stringToCheck),
+          `File ${file} contents should contain: "${stringToCheck}"`
+        );
+      });
+    }
   });
 }
 
@@ -43,7 +61,7 @@ function testBuildWithExtensionFlag(logger) {
   logger.warn('- Test build with flags started 🤞');
   _testHelper(
     'hs-ui-extensions-dev-server build --extension ProgressBarApp.tsx',
-    ['ProgressBarApp.js']
+    ['ProgressBarApp.js', 'manifest.json']
   );
   logger.info('- Test build with flags passed 🚀');
 }
@@ -52,19 +70,11 @@ function testDefInfraBuildFileName(logger) {
   logger.warn('- Test build with entrypoint as arg 🤞');
   _testHelper('hs-ui-extensions-remote-build ProgressBarApp.tsx', [
     'ProgressBarApp.js',
+    'manifest.json',
   ]);
   logger.info('- Test build with entrypoint as arg 🚀');
 }
 
-function testDevInfraBuildFileNameWithPathPrefix(logger) {
-  logger.warn('- Test build with config file as arg 🤞');
-  _testHelper(
-    'hs-ui-extensions-remote-build some/super/long/file/path/to/the/extensions/PhoneLines.tsx',
-    ['PhoneLines.js']
-  );
-  logger.info('- Test build with config file as arg 🚀');
-}
-
 function testBuild(logger) {
   logger.warn('\nBuild Tests started - External Devs 🤞');
   testDefaultBuildPath(logger);
@@ -73,7 +83,6 @@ function testBuild(logger) {
 
   logger.warn('\nBuild Tests started - Dev Infra 🤞');
   testDefInfraBuildFileName(logger);
-  testDevInfraBuildFileNameWithPathPrefix(logger);
   logger.info('Build Tests passed - Dev Infra 🚀');
 }
 

package/utils.js

@@ -1,7 +1,8 @@
+const path = require('path');
+
 function getUrlSafeFileName(filePath) {
-  const fileName = filePath.split('/').pop();
-  const fileNameWithJsExtension = fileName.replace(/\.ts[x]?$|\.jsx$/g, '.js');
-  return encodeURIComponent(fileNameWithJsExtension);
+  const { name } = path.parse(filePath);
+  return encodeURIComponent(`${name}.js`);
 }
 
 module.exports = {