@hubspot/ui-extensions-dev-server 0.7.3-canary.8 → 0.7.3

package/lib/DevModeInterface.js

@@ -20,6 +20,11 @@ class DevModeInterface {
       if (!component.config.extensions?.crm?.cards) {
         return appExtensionMappings; // It's not an app
       }
+
+      this.cardConfigs = component.config.extensions.crm.cards.map(card =>
+        path.join(component.path, card.file)
+      );
+
       // Load all of the extension configs for a particular app.json file
       const extensionsConfigForApp = loadExtensionConfig(
         component.config,
@@ -47,10 +52,12 @@ class DevModeInterface {
     promptUser,
     components,
     extensionConfig,
+    onUploadRequired,
   }) {
     setLogLevel(debug ? LOG_LEVEL.DEBUG : LOG_LEVEL.LOG);
     this.accountId = accountId;
     this.httpClient = httpClient;
+    this.onUploadRequired = onUploadRequired;
     if (extensionConfig) {
       this._setDataFromExtensionConfig(extensionConfig);
       return;
@@ -73,6 +80,18 @@ class DevModeInterface {
     }
   }
 
+  // The contract is for this to be async, so eslint can chill
+  // eslint-disable-next-line require-await
+  async fileChange(filePath, __event) {
+    if (
+      this.cardConfigs &&
+      this.cardConfigs.includes(filePath) &&
+      this.onUploadRequired
+    ) {
+      this.onUploadRequired();
+    }
+  }
+
   async start({ debug = null }) {
     if (debug !== null) {
       setLogLevel(debug ? LOG_LEVEL.DEBUG : LOG_LEVEL.LOG);
@@ -96,6 +115,7 @@ class DevModeInterface {
       outputDir: path.join(this.config.extensionPath, OUTPUT_DIR),
       functionsConfig,
       root: appPath,
+      cardConfigs: this.cardConfigs || [],
     });
 
     logger.info(`Running extension '${this.title}' from app '${this.appName}'`);

package/lib/build.js

@@ -31,17 +31,8 @@ async function buildSingleExtension({
   emptyOutDir = true,
   minify = false,
   root = process.cwd(), // This is the vite default, so using that as our default
-  logger = console,
-  injectOverrides = true,
 }) {
   const output = getUrlSafeFileName(file);
-
-  const plugins = [manifestPlugin({ minify, output, logger })];
-
-  if (injectOverrides) {
-    plugins.push(codeInjectionPlugin({ file }));
-  }
-
   await build({
     root,
     define: {
@@ -58,7 +49,7 @@ async function buildSingleExtension({
       },
       rollupOptions: {
         ...ROLLUP_OPTIONS,
-        plugins,
+        plugins: [manifestPlugin({ output }), codeInjectionPlugin({ file })],
       },
       outDir: outputDir,
       emptyOutDir,
@@ -67,26 +58,23 @@ async function buildSingleExtension({
   });
 }
 
-async function remoteBuild({
-  root,
-  entryPoint,
-  outputDir = OUTPUT_DIR,
-  injectOverrides = true,
-  logger = console,
-}) {
+async function remoteBuild(root, entryPoint, outputDir = OUTPUT_DIR) {
   const fileInfo = path.parse(entryPoint);
 
   if (!allowedExtensions.includes(fileInfo.ext)) {
     throw new Error(`${extensionErrorBaseMessage} ${fileInfo.ext}`);
   }
 
+  const output = getUrlSafeFileName(entryPoint);
   await buildSingleExtension({
     file: entryPoint,
+    outputFileName: output,
     outputDir,
+    plugins: {
+      rollup: [manifestPlugin({ minify: true, output })],
+    },
     minify: true,
     root,
-    logger,
-    injectOverrides,
   });
 }
 

package/lib/dev.js

@@ -9,21 +9,23 @@ const {
   OUTPUT_DIR,
 } = require('./constants');
 
-async function _createViteDevServer(
+async function _createViteDevServer({
   outputDir,
   extensionConfig,
-  websocketPort,
+  webSocketPort,
   baseMessage,
-  root
-) {
+  root,
+  cardConfigs,
+}) {
   return await createServer({
     root,
+    logLevel: 'silent',
     appType: 'custom',
     mode: 'development',
     server: {
       middlewareMode: true,
       hmr: {
-        port: websocketPort,
+        port: webSocketPort,
       },
       watch: {
         ignored: [
@@ -46,6 +48,7 @@ async function _createViteDevServer(
         extensionConfig,
         outputDir,
         baseMessage,
+        cardConfigs,
       }),
     ],
     clearScreen: false,
@@ -59,6 +62,7 @@ async function startDevMode({
   expressPort = VITE_DEFAULT_PORT,
   webSocketPort = WEBSOCKET_PORT,
   root = process.cwd(),
+  cardConfigs,
 }) {
   if (!extensionConfig) {
     throw new Error('Unable to determine which extension to run');
@@ -70,13 +74,14 @@ async function startDevMode({
     callback: `http://hslocal.net:${expressPort}/${extensionConfig.output}`,
   });
 
-  const viteDevServer = await _createViteDevServer(
+  const viteDevServer = await _createViteDevServer({
     outputDir,
     extensionConfig,
     webSocketPort,
     baseMessage,
-    root
-  );
+    root,
+    cardConfigs,
+  });
 
   return startDevServer({
     outputDir,

package/lib/plugins/codeInjectionPlugin.js

@@ -1,13 +1,16 @@
 const path = require('path');
 
-function codeInjectionPlugin() {
+function codeInjectionPlugin(options = {}) {
+  const { file, root = process.cwd() } = options;
   return {
     name: 'ui-extensions-code-injection-plugin',
     enforce: 'post', // run after default rollup plugins
-    transform(code, file) {
-      const { dir } = path.parse(file);
+    transform(code, fileBeingTransformed) {
+      const absoluteFilePath = path.isAbsolute(file)
+        ? file
+        : path.join(root, file);
 
-      if (dir.includes('node_modules')) {
+      if (fileBeingTransformed !== absoluteFilePath) {
         return { code, map: null }; // Not the file we care about, return the same code
       }
 

package/lib/plugins/devBuildPlugin.js

@@ -7,24 +7,21 @@ const path = require('path');
 const { logger } = require('@hubspot/cli-lib/logger');
 
 function devBuildPlugin(options = {}) {
-  const { extensionConfig, outputDir, baseMessage } = options;
+  let lastBuildError;
+  const { extensionConfig, outputDir, baseMessage, cardConfigs } = options;
   const versionedBaseMessage = {
     ...baseMessage,
     version: WEBSOCKET_MESSAGE_VERSION,
   };
 
   const handleBuildError = (error, server) => {
-    const { plugin, hook, code, errors, frame, loc, id } = error;
-    if (
-      plugin === 'vite:esbuild' &&
-      hook === 'transform' &&
-      code === 'PLUGIN_ERROR'
-    ) {
+    const { plugin, errors, frame, loc, id } = error;
+    // Filter out our custom plugins, but send everything else
+    if (!plugin?.startsWith('ui-extensions')) {
       server.ws.send({
         ...versionedBaseMessage,
         event: 'error',
         error: {
-          type: 'transformation',
           details: {
             errors,
             formattedError: stripAnsiColorCodes(frame),
@@ -82,8 +79,10 @@ function devBuildPlugin(options = {}) {
         },
         clearScreen: false,
       });
+      lastBuildError = null;
       return true;
     } catch (error) {
+      lastBuildError = error;
       logger.debug(error);
       handleBuildError(error, server);
       return false;
@@ -92,7 +91,7 @@ function devBuildPlugin(options = {}) {
 
   let localServer;
   return {
-    name: 'ui-extensibility-dev-build-plugin',
+    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
@@ -104,20 +103,18 @@ function devBuildPlugin(options = {}) {
           ...versionedBaseMessage,
           event: 'start',
         });
-      });
-      localServer.ws.on('build', async () => {
-        logger.debug('Browser has requested a build, rebuilding');
-        const successful = await devBuild(localServer);
-        if (successful) {
-          server.ws.send({
-            ...versionedBaseMessage,
-            event: 'update',
-          });
+
+        if (lastBuildError) {
+          handleBuildError(lastBuildError, server);
         }
       });
+
       await devBuild(localServer);
     },
-    handleHotUpdate: async ({ server }) => {
+    handleHotUpdate: async ({ file, server }) => {
+      if (cardConfigs.includes(file)) {
+        return [];
+      }
       const successful = await devBuild(server);
 
       if (!successful) {

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@hubspot/ui-extensions-dev-server",
-  "version": "0.7.3-canary.8+f0ea707c",
+  "version": "0.7.3",
   "description": "",
   "main": "index.js",
   "scripts": {
     "test": "jest",
     "build": "echo 'no build step for @hubspot/ui-extensions-dev-server'",
+    "lint": "echo 'no lint step for @hubspot/ui-extensions-dev-server'",
     "jest": "jest --watch"
   },
   "publishConfig": {
@@ -33,7 +34,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@hubspot/app-functions-dev-server": "^0.7.2",
+    "@hubspot/app-functions-dev-server": "^0.7.3",
     "@hubspot/cli-lib": "^4.1.6",
     "command-line-args": "^5.2.1",
     "command-line-usage": "^7.0.1",
@@ -68,5 +69,5 @@
       "optional": true
     }
   },
-  "gitHead": "f0ea707c3fdcb5cd043e5e34fb82354364ca156b"
+  "gitHead": "663cfa5f4b81bb923da5e8679e5be5437d1ddd00"
 }