@corva/create-app 0.0.0-210a1a8

package/common/ui/config/vite/corva-vite-config.mjs

@@ -0,0 +1,384 @@
+// Ported from corva-monorepo-frontend tools/vite-config. Moves to
+// @corva/dc-platform-shared once the standalone flow is proven, which is why
+// nothing here imports from the app's own source.
+import { createRequire } from 'node:module';
+import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'node:fs';
+import { join, resolve } from 'node:path';
+
+import dotenv from 'dotenv';
+import { expand } from 'dotenv-expand';
+import react from '@vitejs/plugin-react';
+import license from 'rollup-plugin-license';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
+import presetEnv from 'postcss-preset-env';
+import { defineConfig } from 'vitest/config';
+
+const require = createRequire(import.meta.url);
+
+const {
+  CORVA_API_ENVS,
+  CORVA_API_ENV_VARIABLES,
+  CORVA_GLOBAL_DEPENDENCIES,
+} = require('@corva/dc-platform-shared/cjs/devcenter/webpack/constants.js');
+const validateDependencies = require('@corva/dc-platform-shared/cjs/devcenter/webpack/validators/index.js');
+const { updateDotEnv } = require('@corva/dc-platform-shared/cjs/devcenter/webpack/utils/serializeDotEnv.js');
+
+const PLATFORM_SHARED_DIR = join(
+  require.resolve('@corva/dc-platform-shared/package.json'),
+  '..',
+);
+// NOTE: These imports are always bundled, never taken from the platform globals
+const SKIP_IN_EXTERNALS = ['react/jsx-runtime', 'highcharts/'];
+
+const isLegalIdentifier = value => /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(value);
+
+const toLegalIdentifier = value => {
+  const identifier = value.replace(/[^A-Za-z0-9_$]/g, '_');
+
+  return isLegalIdentifier(identifier) ? identifier : `_${identifier}`;
+};
+
+const toGlobalSegmentAccess = segment =>
+  /^\d+$/.test(segment) ? `[${segment}]` : `[${JSON.stringify(segment)}]`;
+
+const getSegmentedGlobalAssignmentPrefix = appIdentifier => {
+  const [rootSegment, ...segments] = appIdentifier.split('.');
+  const rootAccessor = `this[${JSON.stringify(rootSegment)}]`;
+
+  if (segments.length === 0) {
+    return `${rootAccessor}=`;
+  }
+
+  let currentAccessor = rootAccessor;
+  const initializers = [`${rootAccessor}=${rootAccessor}||{}`];
+
+  segments.slice(0, -1).forEach(segment => {
+    currentAccessor += toGlobalSegmentAccess(segment);
+    initializers.push(`${currentAccessor}=${currentAccessor}||{}`);
+  });
+
+  currentAccessor += toGlobalSegmentAccess(segments[segments.length - 1]);
+
+  return `${initializers.join(',')},${currentAccessor}=`;
+};
+
+const getGlobalAssignmentPrefixes = globalName =>
+  [
+    ...new Set([
+      isLegalIdentifier(globalName) ? `var ${globalName}=` : '',
+      isLegalIdentifier(globalName)
+        ? `this.${globalName}=`
+        : `this[${JSON.stringify(globalName)}]=`,
+      `this[${JSON.stringify(globalName)}]=`,
+      getSegmentedGlobalAssignmentPrefix(globalName),
+    ]),
+  ].filter(Boolean);
+
+const normalizeIifeGlobalAssignment = (jsContent, appIdentifier, emittedGlobalName) => {
+  const normalizedAssignment = `this[${JSON.stringify(appIdentifier)}]=`;
+
+  if (jsContent.includes(normalizedAssignment)) {
+    return jsContent;
+  }
+
+  const assignmentPrefix = getGlobalAssignmentPrefixes(emittedGlobalName).find(prefix =>
+    jsContent.includes(prefix),
+  );
+
+  if (assignmentPrefix) {
+    return jsContent.replace(assignmentPrefix, normalizedAssignment);
+  }
+
+  // Rolldown doesn't emit a global assignment for IIFE output — inject one.
+  // Terser rewrites `(function(){})()` → `!function(){}()` when the result is discarded.
+  // Replacing `!` with the assignment (`this["name"]=function(){}()`) is valid JS
+  // because after `=` the `function` keyword is an expression, not a declaration.
+  if (jsContent.trimStart().startsWith('!function')) {
+    return jsContent.replace('!function', `${normalizedAssignment}function`);
+  }
+
+  return normalizedAssignment + jsContent;
+};
+
+const createCssInjection = cssContent =>
+  `(function(){var s=document.createElement('style');s.textContent=${JSON.stringify(
+    cssContent,
+  )};document.head.appendChild(s)})();`;
+
+// The platform loads a single file, so the emitted stylesheets are folded back into it.
+const finalizeJsBundle = ({ outDir, cssFileNames, appIdentifier, emittedGlobalName }) => {
+  const jsPath = join(outDir, 'app.js');
+  const css = cssFileNames
+    .map(fileName => readFileSync(join(outDir, fileName), 'utf-8'))
+    .join('');
+  const jsContent = readFileSync(jsPath, 'utf-8');
+
+  writeFileSync(
+    jsPath,
+    normalizeIifeGlobalAssignment(
+      css ? createCssInjection(css) + jsContent : jsContent,
+      appIdentifier,
+      emittedGlobalName,
+    ),
+  );
+
+  cssFileNames.forEach(fileName => unlinkSync(join(outDir, fileName)));
+};
+
+const getCorvaApiEnvVariables = () => {
+  const apiEnv = process.env.CORVA_API_ENV || CORVA_API_ENVS.production;
+
+  if (apiEnv in CORVA_API_ENVS) {
+    return CORVA_API_ENV_VARIABLES[apiEnv];
+  }
+
+  console.error(`CORVA_API_ENV should be one of [${Object.keys(CORVA_API_ENVS).join(', ')}]`);
+
+  return process.exit(1);
+};
+
+// webpack's dev config added this entry point whenever the app depends on
+// mapbox-gl: it reads the access token off @corva/ui and publishes the
+// configured instance as window['mapbox-gl'].
+// A virtual module rather than a direct node_modules URL: mapbox-gl's dist is
+// CJS, so it only imports cleanly once Vite's resolver and dep optimizer see it.
+const MAPBOX_DEV_SETUP_ID = 'virtual:corva-mapbox-dev-setup';
+
+const mapboxDevSetupPlugin = () => ({
+  name: 'corva-mapbox-dev-setup',
+  resolveId(id) {
+    return id === MAPBOX_DEV_SETUP_ID ? `\0${MAPBOX_DEV_SETUP_ID}` : null;
+  },
+  load(id) {
+    return id === `\0${MAPBOX_DEV_SETUP_ID}`
+      ? "import '@corva/dc-platform-shared/cjs/devcenter/webpack/MapboxGlDevSetupEntryPoint.js';"
+      : null;
+  },
+  transformIndexHtml: () => [
+    {
+      tag: 'script',
+      attrs: { type: 'module', src: `/@id/__x00__${MAPBOX_DEV_SETUP_ID}` },
+      injectTo: 'body',
+    },
+  ],
+});
+
+// The DevCenter dev page edits the app's .env through this endpoint.
+const dotEnvEndpointPlugin = appDirectory => ({
+  name: 'corva-dotenv-endpoint',
+  configureServer(server) {
+    server.middlewares.use('/dotenv', (req, res, next) => {
+      if (req.method !== 'PATCH') {
+        return next();
+      }
+
+      const envPath = resolve(appDirectory, '.env');
+      const chunks = [];
+
+      req.on('data', chunk => chunks.push(chunk));
+      req.on('end', () => {
+        const currentEnv = existsSync(envPath) ? readFileSync(envPath, 'utf-8') : '';
+
+        writeFileSync(envPath, updateDotEnv(currentEnv, JSON.parse(Buffer.concat(chunks))));
+        res.statusCode = 200;
+        res.end();
+      });
+    });
+  },
+});
+
+export const createViteConfig = ({ pwd }) => {
+  expand(dotenv.config({ path: resolve(pwd, '.env'), quiet: true }));
+
+  const packageJson = JSON.parse(readFileSync(resolve(pwd, 'package.json'), 'utf-8'));
+  const manifestJson = JSON.parse(readFileSync(resolve(pwd, 'manifest.json'), 'utf-8'));
+
+  const appKey = manifestJson.application.key;
+  const version = packageJson.version;
+  const appIdentifier = `${appKey.replace(/\./g, '_')}-${version}`;
+  const appIifeName = toLegalIdentifier(appIdentifier);
+
+  const globalDependencies = Object.keys(CORVA_GLOBAL_DEPENDENCIES);
+  const externalPatterns = globalDependencies.map(
+    libName => new RegExp(`(^${libName}$|^${libName}/)([^]+)?`),
+  );
+
+  const isExternal = source =>
+    !SKIP_IN_EXTERNALS.some(skipped => source.startsWith(skipped)) &&
+    externalPatterns.some(pattern => pattern.test(source));
+
+  // Package names are not valid JS identifiers, so every global is read off `this`.
+  const toGlobal = id => {
+    const staticGlobal = globalDependencies.find(libName => libName === id);
+
+    if (staticGlobal) {
+      return `this["${staticGlobal}"].default || this["${staticGlobal}"]`;
+    }
+
+    const dep = globalDependencies.find(libName => id.startsWith(libName));
+
+    if (!dep) {
+      throw new Error(`Unknown dependency: ${id}`);
+    }
+
+    return `this["${dep}"]${id.replace(dep, '').replace(/\//g, '.')}`;
+  };
+
+  const getAlias = () => {
+    // jest resolved '~' to src for both templates; keep it in the build too
+    const defaultAlias = { '~': resolve(pwd, 'src') };
+    const tsconfigPath = resolve(pwd, 'tsconfig.json');
+
+    if (!existsSync(tsconfigPath)) {
+      return defaultAlias;
+    }
+
+    const { compilerOptions } = JSON.parse(readFileSync(tsconfigPath, 'utf-8'));
+
+    return {
+      ...defaultAlias,
+      ...Object.fromEntries(
+        Object.entries(compilerOptions?.paths || {}).map(([key, [value]]) => [
+          key.replace('/*', ''),
+          resolve(pwd, value.replace('/*', '')),
+        ]),
+      ),
+    };
+  };
+
+  return defineConfig(({ command }) => {
+    validateDependencies({ packageJson });
+
+    const config = {
+      root: pwd,
+      server: {
+        host: process.env.HOST || 'app.local.corva.ai',
+        port: Number(process.env.PORT) || 8080,
+      },
+      css: {
+        modules: { localsConvention: 'camelCase' },
+        postcss: { plugins: [presetEnv({ stage: 3 })] },
+      },
+      plugins: [react(), dotEnvEndpointPlugin(pwd)],
+      resolve: { alias: getAlias() },
+      test: {
+        watch: false,
+        globals: true,
+        environment: 'jsdom',
+        setupFiles: ['./vitest.setup.js'],
+        globalSetup: ['./vitest.global-setup.js'],
+        coverage: {
+          provider: 'v8',
+          include: ['src/**/*.{js,jsx,ts,tsx}'],
+          thresholds: { branches: 60, functions: 60, lines: 60, statements: 60 },
+        },
+      },
+    };
+
+    if (command === 'serve') {
+      return {
+        ...config,
+        define: {
+          global: {},
+          // Webpack's EnvironmentPlugin exposed the whole environment, so apps read
+          // their own REACT_APP_* vars straight off process.env.
+          'process.env': {
+            ...process.env,
+            DEV_CENTER_APP_PATH: '',
+            NODE_ENV: 'development',
+            REACT_APP_ENVIRONMENT: process.env.REACT_APP_ENVIRONMENT || 'development',
+            ...getCorvaApiEnvVariables(),
+          },
+        },
+        plugins: [
+          ...config.plugins,
+          ...(packageJson.dependencies?.['mapbox-gl'] ? [mapboxDevSetupPlugin()] : []),
+          viteStaticCopy({
+            watch: { reloadPageOnChange: false },
+            targets: [
+              { src: `${PLATFORM_SHARED_DIR}/assets/*`, dest: 'static/media' },
+              {
+                src: `${join(PLATFORM_SHARED_DIR, '../ui/assets')}/*`,
+                dest: 'static/media',
+              },
+            ],
+          }),
+        ],
+      };
+    }
+
+    return {
+      ...config,
+      define: {
+        'process.env': { NODE_ENV: 'production' },
+        'process.env.NODE_ENV': '"production"',
+      },
+      plugins: [
+        ...config.plugins,
+        viteStaticCopy({ targets: [{ src: 'manifest.json', dest: '.' }] }),
+        {
+          name: 'corva-single-file-bundle',
+          writeBundle(_options, bundle) {
+            finalizeJsBundle({
+              outDir: resolve(pwd, 'dist'),
+              cssFileNames: Object.keys(bundle).filter(fileName => fileName.endsWith('.css')),
+              appIdentifier,
+              emittedGlobalName: appIifeName,
+            });
+          },
+        },
+      ],
+      build: {
+        outDir: 'dist',
+        emptyOutDir: true,
+        copyPublicDir: false,
+        sourcemap: false,
+        cssCodeSplit: false,
+        minify: 'terser',
+        terserOptions: {
+          compress: { drop_console: true, drop_debugger: true },
+          format: { comments: false },
+        },
+        // lib mode plus named exports keeps the IIFE compatible with the platform
+        // loader, which reads `this["appKey-version"].default.component`.
+        lib: {
+          entry: resolve(pwd, 'src/index.js'),
+          name: appIifeName,
+          fileName: () => 'app.js',
+          formats: ['iife'],
+        },
+        rolldownOptions: {
+          external: isExternal,
+          moduleTypes: { '.cjs': 'js' },
+          output: {
+            format: 'iife',
+            name: appIifeName,
+            entryFileNames: 'app.js',
+            globals: toGlobal,
+            exports: 'named',
+            // Rolldown doesn't rewrite `require()` inside bundled CJS modules (e.g.
+            // react-is) to their external global references. This shim resolves them
+            // to the globals the IIFE receives as params.
+            intro:
+              'var require=function(id){var g=globalThis[id];return g&&g.default||g;};',
+          },
+          plugins: [
+            {
+              // Rolldown rejects `typeof require` as a define key (not an identifier),
+              // so the CJS-detection branches are stripped by transform instead.
+              name: 'replace-typeof-require',
+              transform(code) {
+                if (!code.includes('typeof require')) return null;
+
+                return { code: code.replaceAll('typeof require', '"undefined"'), map: null };
+              },
+            },
+            license({
+              thirdParty: { output: resolve(pwd, 'dist/app.js.LICENSE.txt') },
+            }),
+          ],
+        },
+      },
+    };
+  });
+};

package/common/ui/devApp.js

@@ -0,0 +1 @@
+import '@corva/dc-platform-shared/cjs/devcenter/webpack/DevServerEntryPoint.js';

package/common/ui/index.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <title>Corva React App</title>
+  </head>
+  <body data-corva-theme-dark>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="/devApp.js"></script>
+  </body>
+</html>

package/common/ui/isolatedApp.js

@@ -0,0 +1 @@
+import '@corva/dc-platform-shared/cjs/devcenter/webpack/DevServerIsolatedAppEntryPoint.js';

package/common/ui/public/DevCenterIsolatedAppPage.html

@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />
+    <title>Corva React App</title>
+  </head>
+  <body data-corva-theme-dark>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!-- Vite only injects the react-refresh preamble into index.html, so this page installs it itself. -->
+    <script type="module">
+      import RefreshRuntime from '/@react-refresh';
+
+      RefreshRuntime.injectIntoGlobalHook(window);
+      window.$RefreshReg$ = () => {};
+      window.$RefreshSig$ = () => type => type;
+      window.__vite_plugin_react_preamble_installed__ = true;
+    </script>
+    <script type="module" src="/isolatedApp.js"></script>
+  </body>
+</html>

package/common/ui/vite.config.mjs

@@ -0,0 +1,3 @@
+import { createViteConfig } from './config/vite/corva-vite-config.mjs';
+
+export default createViteConfig({ pwd: import.meta.dirname });

package/common/ui/vitest.global-setup.js

@@ -0,0 +1,4 @@
+export const setup = () => {
+  // UTC keeps tests independent of the machine's timezone
+  process.env.TZ = 'UTC';
+};

package/common/ui/vitest.setup.js

@@ -0,0 +1,26 @@
+import { vi } from 'vitest';
+
+import '@testing-library/jest-dom/vitest';
+
+class FakeObserver {
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+}
+
+vi.stubGlobal('ResizeObserver', FakeObserver);
+vi.stubGlobal('MutationObserver', FakeObserver);
+
+// jsdom 22 cannot parse the container queries @corva/ui's components inject, and
+// reports that straight to stderr on every import. Drop those lines only.
+const writeToStderr = process.stderr.write.bind(process.stderr);
+
+process.stderr.write = (chunk, ...rest) => {
+  if (String(chunk).includes('Could not parse CSS stylesheet')) {
+    return true;
+  }
+
+  return writeToStderr(chunk, ...rest);
+};

package/lib/commands/attach.js

@@ -0,0 +1,28 @@
+import chalk from 'chalk';
+import { Command } from 'commander';
+import { ERROR_ICON } from '../constants/messages.js';
+import { runFlow } from '../flow.js';
+import { ATTACH_FLOW } from '../flows/attach.js';
+import { getRealWorkingDir } from '../helpers/commands.js';
+import { apiKeyOption } from '../options/api-key.js';
+import { appVersion } from '../options/app-version.js';
+import { envOption } from '../options/env.js';
+import { originalCwdOption } from '../options/original-cwd.js';
+import { silentOption } from '../options/silent.js';
+
+export const attachCommand = new Command('attach')
+  .description('Add app to live assets streams')
+  .argument('<project-directory>', 'Project directory to work with')
+  .addOption(apiKeyOption)
+  .addOption(envOption)
+  .addOption(silentOption)
+  .addOption(appVersion)
+  .addOption(originalCwdOption)
+  .action(async (dirName, options) => {
+    await runFlow(ATTACH_FLOW, { dirName: getRealWorkingDir(dirName, options), options });
+  })
+  .showHelpAfterError()
+  .showSuggestionAfterError(true)
+  .configureOutput({
+    outputError: (str, write) => write(chalk.red(`${ERROR_ICON} ${str}`)),
+  });