@hubspot/ui-extensions-dev-server 0.7.3 → 0.8.1

package/lib/constants.js

@@ -1,39 +0,0 @@
-const OUTPUT_DIR = 'dist';
-const MAIN_APP_CONFIG = 'app.json';
-const MANIFEST_FILE = 'manifest.json';
-
-const VITE_DEFAULT_PORT = 5173;
-const WEBSOCKET_PORT = 5174;
-
-const ROLLUP_OPTIONS = {
-  // Deps to exclude from the bundle
-  external: ['react', 'react-dom', '@remote-ui/react'],
-  output: {
-    // Maps libs to the variables to be injected via the window
-    globals: {
-      react: 'React',
-      '@remote-ui/react': 'RemoteUI',
-    },
-    extend: true,
-  },
-};
-
-const EXTENSIONS_MESSAGE_VERSION = 1;
-const WEBSOCKET_MESSAGE_VERSION = 0;
-
-const SERVER_CAPABILITIES = [
-  // Supports running app functions locally
-  'app-functions-local-dev',
-];
-
-module.exports = {
-  ROLLUP_OPTIONS,
-  OUTPUT_DIR,
-  MAIN_APP_CONFIG,
-  MANIFEST_FILE,
-  EXTENSIONS_MESSAGE_VERSION,
-  VITE_DEFAULT_PORT,
-  WEBSOCKET_MESSAGE_VERSION,
-  WEBSOCKET_PORT,
-  SERVER_CAPABILITIES,
-};

package/lib/dev.js

@@ -1,98 +0,0 @@
-const { createServer } = require('vite');
-const path = require('path');
-const startDevServer = require('./server');
-const devBuildPlugin = require('./plugins/devBuildPlugin');
-const { getUrlSafeFileName } = require('./utils');
-const {
-  VITE_DEFAULT_PORT,
-  WEBSOCKET_PORT,
-  OUTPUT_DIR,
-} = require('./constants');
-
-async function _createViteDevServer({
-  outputDir,
-  extensionConfig,
-  webSocketPort,
-  baseMessage,
-  root,
-  cardConfigs,
-}) {
-  return await createServer({
-    root,
-    logLevel: 'silent',
-    appType: 'custom',
-    mode: 'development',
-    server: {
-      middlewareMode: true,
-      hmr: {
-        port: webSocketPort,
-      },
-      watch: {
-        ignored: [
-          path.join(outputDir, '/**/*'),
-          '**/src/app/app.functions/**/*',
-          '**/app.json',
-          '**/package.json',
-          '**/package-lock.json',
-        ],
-      },
-    },
-    build: {
-      rollupOptions: {
-        input: extensionConfig.data.module.file,
-        output: getUrlSafeFileName(extensionConfig.data.module.file),
-      },
-    },
-    plugins: [
-      devBuildPlugin({
-        extensionConfig,
-        outputDir,
-        baseMessage,
-        cardConfigs,
-      }),
-    ],
-    clearScreen: false,
-  });
-}
-
-async function startDevMode({
-  extensionConfig,
-  functionsConfig,
-  outputDir = OUTPUT_DIR,
-  expressPort = VITE_DEFAULT_PORT,
-  webSocketPort = WEBSOCKET_PORT,
-  root = process.cwd(),
-  cardConfigs,
-}) {
-  if (!extensionConfig) {
-    throw new Error('Unable to determine which extension to run');
-  }
-
-  const baseMessage = Object.freeze({
-    appName: extensionConfig.data.appName,
-    title: extensionConfig.data.title,
-    callback: `http://hslocal.net:${expressPort}/${extensionConfig.output}`,
-  });
-
-  const viteDevServer = await _createViteDevServer({
-    outputDir,
-    extensionConfig,
-    webSocketPort,
-    baseMessage,
-    root,
-    cardConfigs,
-  });
-
-  return startDevServer({
-    outputDir,
-    expressPort,
-    webSocketPort,
-    baseMessage,
-    viteDevServer,
-    functionsConfig,
-  });
-}
-
-module.exports = {
-  startDevMode,
-};

package/lib/extensionsService.js

@@ -1,54 +0,0 @@
-const path = require('path');
-const { EXTENSIONS_MESSAGE_VERSION } = require('./constants');
-const { loadManifest } = require('./utils');
-
-class ExtensionsService {
-  constructor() {
-    this.endpoint = '/extensions';
-  }
-
-  add(server, webSocketPort, outputDir, baseMessage, capabilities) {
-    server.get(
-      this.endpoint,
-      this.generateExtensionsHandler(
-        baseMessage,
-        webSocketPort,
-        outputDir,
-        capabilities
-      )
-    );
-    return [this.endpoint];
-  }
-
-  generateExtensionsHandler(
-    baseMessage,
-    webSocketPort,
-    outputDir,
-    capabilities = []
-  ) {
-    return function extensionsHandler(_req, res) {
-      try {
-        const output = path.parse(baseMessage.callback).name;
-
-        const response = {
-          websocket: `ws://localhost:${webSocketPort}`,
-          version: EXTENSIONS_MESSAGE_VERSION,
-          capabilities,
-          extensions: [
-            {
-              ...baseMessage,
-              manifest: loadManifest(outputDir, output),
-            },
-          ],
-        };
-        res.status(200).json(response);
-      } catch (e) {
-        res.status(500).json({
-          message: 'Unable to determine which extensions are running',
-        });
-      }
-    };
-  }
-}
-
-module.exports = new ExtensionsService();

package/lib/plugins/codeCheckingPlugin.js

@@ -1,26 +0,0 @@
-const fs = require('fs');
-const { logger } = require('@hubspot/cli-lib/logger');
-
-function codeCheckingPlugin(options = {}) {
-  const { output } = options;
-  return {
-    name: 'ui-extensions-code-checking-plugin',
-    enforce: 'post',
-    writeBundle(__options, __bundle) {
-      try {
-        const code = fs.readFileSync(output).toString();
-        if (
-          !code.includes('const extend = (...args) => self.extend(...args);')
-        ) {
-          logger.warn(
-            'Unable to determine if your extension entry point is calling hubspot.extend, this may prevent it from rendering as expected'
-          );
-        }
-      } catch (e) {
-        logger.error('Unable to load bundle for code checking');
-      }
-    },
-  };
-}
-
-module.exports = codeCheckingPlugin;

package/lib/plugins/codeInjectionPlugin.js

@@ -1,30 +0,0 @@
-const path = require('path');
-
-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, fileBeingTransformed) {
-      const absoluteFilePath = path.isAbsolute(file)
-        ? file
-        : path.join(root, file);
-
-      if (fileBeingTransformed !== absoluteFilePath) {
-        return { code, map: null }; // Not the file we care about, return the same code
-      }
-
-      // Update the code to import the self script which houses our overrides
-      // This needs to be the first line in the source file so that the overrides get hoisted
-      // to the top of the generated source file
-      const updatedCode = `import "@hubspot/ui-extensions-dev-server/self"; ${code}`;
-
-      // Return the updated source code.  We don't need to include the new code in the
-      // sourcemap because we don't want it to show up in the users code when they
-      // view the source mapped code in the browser
-      return { code: updatedCode, map: null };
-    },
-  };
-}
-
-module.exports = codeInjectionPlugin;

package/lib/plugins/devBuildPlugin.js

@@ -1,153 +0,0 @@
-const { ROLLUP_OPTIONS, WEBSOCKET_MESSAGE_VERSION } = require('../constants');
-const { build } = require('vite');
-const manifestPlugin = require('./manifestPlugin');
-const { stripAnsiColorCodes } = require('../utils');
-const codeCheckingPlugin = require('./codeCheckingPlugin');
-const path = require('path');
-const { logger } = require('@hubspot/cli-lib/logger');
-
-function devBuildPlugin(options = {}) {
-  let lastBuildError;
-  const { extensionConfig, outputDir, baseMessage, cardConfigs } = options;
-  const versionedBaseMessage = {
-    ...baseMessage,
-    version: WEBSOCKET_MESSAGE_VERSION,
-  };
-
-  const handleBuildError = (error, server) => {
-    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: {
-          details: {
-            errors,
-            formattedError: stripAnsiColorCodes(frame),
-            location: loc,
-            file: id,
-          },
-        },
-      });
-    }
-  };
-
-  const devBuild = async server => {
-    try {
-      await build({
-        logLevel: 'warn',
-        mode: 'development',
-        define: {
-          'process.env.NODE_ENV': JSON.stringify(
-            process.env.NODE_ENV || 'development'
-          ),
-        },
-        esbuild: {
-          tsconfigRaw: {
-            compilerOptions: {
-              preserveValueImports: true,
-            },
-          },
-        },
-        build: {
-          lib: {
-            entry: extensionConfig.data.module.file,
-            name: extensionConfig.output,
-            formats: ['iife'],
-            fileName: () => extensionConfig.output,
-          },
-          rollupOptions: {
-            ...ROLLUP_OPTIONS,
-            plugins: [
-              manifestPlugin({
-                minify: false,
-                output: extensionConfig.output,
-              }),
-              codeCheckingPlugin({
-                output: path.join(outputDir, extensionConfig.output),
-              }),
-            ],
-            output: {
-              ...ROLLUP_OPTIONS.output,
-              sourcemap: 'inline',
-            },
-          },
-          outDir: outputDir,
-          emptyOutDir: true,
-          minify: false,
-        },
-        clearScreen: false,
-      });
-      lastBuildError = null;
-      return true;
-    } catch (error) {
-      lastBuildError = error;
-      logger.debug(error);
-      handleBuildError(error, server);
-      return false;
-    }
-  };
-
-  let localServer;
-  return {
-    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
-      // See https://vitejs.dev/guide/api-plugin.html#configureserver for information on this pattern
-      localServer = server;
-      localServer.ws.on('connection', () => {
-        logger.info('Browser connected and listening for bundle updates');
-        localServer.ws.send({
-          ...versionedBaseMessage,
-          event: 'start',
-        });
-
-        if (lastBuildError) {
-          handleBuildError(lastBuildError, server);
-        }
-      });
-
-      await devBuild(localServer);
-    },
-    handleHotUpdate: async ({ file, server }) => {
-      if (cardConfigs.includes(file)) {
-        return [];
-      }
-      const successful = await devBuild(server);
-
-      if (!successful) {
-        return [];
-      }
-
-      logger.info(`Extension ${extensionConfig.data.title} updated, compiled`);
-
-      if (server.ws.clients.size === 0) {
-        logger.debug('Bundle updated, no browsers connected to notify');
-        return [];
-      }
-
-      logger.debug('Bundle updated, notifying connected browsers');
-      server.ws.send({
-        ...versionedBaseMessage,
-        event: 'update',
-      });
-      return [];
-    },
-    buildEnd(error) {
-      if (error) {
-        logger.error(error);
-      }
-      logger.debug('Sending shutdown message to connected browsers');
-      if (localServer && localServer.ws) {
-        localServer.ws.send({
-          ...versionedBaseMessage,
-          event: 'shutdown',
-        });
-      }
-    },
-  };
-}
-
-module.exports = devBuildPlugin;

package/lib/plugins/manifestPlugin.js

@@ -1,109 +0,0 @@
-const { readFileSync } = require('fs');
-const { normalize } = require('path');
-const { MANIFEST_FILE } = require('../constants');
-const path = require('path');
-const { logger } = require('@hubspot/cli-lib/logger');
-
-const PACKAGE_LOCK_FILE = 'package-lock.json';
-const PACKAGE_FILE = 'package.json';
-const EXTENSIONS_PATH = 'src/app/extensions/';
-
-function manifestPlugin(options = {}) {
-  return {
-    name: 'ui-extensions-manifest-generation-plugin',
-    enforce: 'post', // run after default rollup plugins
-    generateBundle(_rollupOptions, bundle) {
-      const { output, minify = false } = options;
-      try {
-        const filename = path.parse(output).name;
-        const manifest = _generateManifestContents(bundle);
-        this.emitFile({
-          type: 'asset',
-          source: minify
-            ? JSON.stringify(manifest)
-            : JSON.stringify(manifest, null, 2),
-          fileName: normalize(`${filename}-${MANIFEST_FILE}`),
-        });
-      } 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).filter(cur => cur.endsWith('.js'));
-  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 = manifestPlugin;

package/lib/server.js

@@ -1,57 +0,0 @@
-const express = require('express');
-const cors = require('cors');
-const { SERVER_CAPABILITIES } = require('./constants');
-const extensionsService = require('./extensionsService');
-const {
-  AppFunctionExecutionService,
-} = require('@hubspot/app-functions-dev-server');
-const { logger } = require('@hubspot/cli-lib/logger');
-
-function startDevServer({
-  outputDir,
-  expressPort,
-  webSocketPort,
-  baseMessage,
-  viteDevServer,
-  functionsConfig,
-}) {
-  const app = express();
-
-  // Setup middleware
-  app.use(cors());
-  app.use(express.static(outputDir));
-
-  app.use(
-    '/api/crm-extensibility/execution/internal/v3',
-    AppFunctionExecutionService({ ...functionsConfig, logger })
-  );
-  logger.info('Serving app functions locally');
-
-  const endpointsAdded = extensionsService.add(
-    app,
-    webSocketPort,
-    outputDir,
-    baseMessage,
-    SERVER_CAPABILITIES
-  );
-
-  endpointsAdded.forEach(endpoint => {
-    logger.debug(`Listening at http://hslocal.net:${expressPort}${endpoint}`);
-  });
-
-  // Vite middlewares needs to go last because it's greedy and will block other middleware
-  app.use(viteDevServer.middlewares);
-
-  const server = app.listen({ port: expressPort }, () => {
-    logger.debug(`Listening at ${baseMessage.callback}`);
-  });
-
-  return async function shutdown() {
-    await viteDevServer.pluginContainer.close();
-    // Stop new connections to express server
-    server.close(() => {});
-    logger.info('Extension dev server done cleaning up');
-  };
-}
-
-module.exports = startDevServer;

package/lib/utils.js

@@ -1,36 +0,0 @@
-const path = require('path');
-const fs = require('fs');
-const { MANIFEST_FILE } = require('./constants');
-
-function getUrlSafeFileName(filePath) {
-  const { name } = path.parse(filePath);
-  return encodeURIComponent(`${name}.js`);
-}
-
-// Strips ANSI color codes out of strings because we don't want to pass them to the browser
-function stripAnsiColorCodes(stringWithColorCodes) {
-  if (!stringWithColorCodes) {
-    return null;
-  }
-  return stringWithColorCodes.replace(
-    // eslint-disable-next-line no-control-regex
-    /[\u001b][[]*([0-9]{1,4};?)*[m]/g,
-    ''
-  );
-}
-
-function loadManifest(outputDir, output) {
-  try {
-    return JSON.parse(
-      fs.readFileSync(path.join(outputDir, `${output}-${MANIFEST_FILE}`))
-    );
-  } catch (e) {
-    return {};
-  }
-}
-
-module.exports = {
-  getUrlSafeFileName,
-  stripAnsiColorCodes,
-  loadManifest,
-};