@corva/create-app 0.0.0-2576df8 → 0.0.0-5fb771a

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

@@ -0,0 +1,352 @@
+// 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);
+};
+
+// 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 = () => {
+    const tsconfigPath = resolve(pwd, 'tsconfig.json');
+
+    if (!existsSync(tsconfigPath)) {
+      return {};
+    }
+
+    const { compilerOptions } = JSON.parse(readFileSync(tsconfigPath, 'utf-8'));
+
+    return 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,
+          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,24 @@
+import '@testing-library/jest-dom/vitest';
+
+class FakeObserver {
+  observe() {}
+
+  unobserve() {}
+
+  disconnect() {}
+}
+
+globalThis.ResizeObserver = FakeObserver;
+globalThis.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/create.js

@@ -205,6 +205,10 @@ async function addTemplate(root, manifest, runtime, opts) {
 
   copyFolderRecursiveSync(templateFolder, root, excludeFiles);
 
+  if (manifest.isUi()) {
+    copyFolderRecursiveSync(join(cliRoot, 'common', 'ui'), root);
+  }
+
   if (manifest.isNode()) {
     copyFolderRecursiveSync(join(cliRoot, 'common', 'node'), root);
   }
@@ -236,7 +240,11 @@ async function addTemplate(root, manifest, runtime, opts) {
         const extPath = join(cliRoot, 'template_extensions', extension);
 
         if (fs.existsSync(extPath)) {
-          copyFolderRecursiveSync(extPath, root);
+          // the extension's .eslintrc is the typescript one; a javascript app keeps
+          // its own @babel/eslint-parser config instead
+          const excludeFiles = runtime.language === 'javascript' ? ['.eslintrc'] : [];
+
+          copyFolderRecursiveSync(extPath, root, excludeFiles);
         }
       });
 
@@ -345,7 +353,7 @@ function addPackageJSON(root, manifest, runtime, opts) {
     private: isPrivate,
     license,
     engines: {
-      node: `^${runtime.version}`,
+      node: runtime.enginesNode || `^${runtime.version}`,
       [runtime.packageManager]: '*',
     },
     scripts,
@@ -383,7 +391,7 @@ async function installDependencies(root, manifest, runtime) {
     args.push('--cache-folder=".yarn-cache"');
   }
 
-  logger.log(chalk.yellow(`Installing template dependencies using ${runtime.packageManager}...`));
+  logger.log(chalk.yellow(`Installing template dependencies using ${command}...`));
 
   const nvmOpts = {
     shell: true,

package/lib/commands/release.js

@@ -11,6 +11,8 @@ import { silentOption } from '../options/silent.js';
 import { ensureBumpVersion } from '../helpers/cli-version.js';
 import { ERROR_ICON } from '../constants/messages.js';
 import { appKeyOption } from '../options/app-key.js';
+import { zipFileNameOption } from '../options/zip-file-name.js';
+import { logger } from '../helpers/logger.js';
 
 export const releaseCommand = new Command('release')
   .description('Release app')
@@ -35,7 +37,7 @@ export const releaseCommand = new Command('release')
       'If package version is already taken - remove the previously published package and upload a new one',
     ).default(false),
   )
-  // .addOption(new Option('--zip-file-name [string]', 'Prebuilt zip file name in dir'))
+  .addOption(zipFileNameOption)
   .addOption(new Option('--author [string]', 'Author name for the audit'))
   .action(async (dirName, patterns, options) => {
     // if author is present in CLI, save it to process.env
@@ -43,7 +45,20 @@ export const releaseCommand = new Command('release')
       process.env.githubUsername = options.author;
     }
 
-    options.bumpVersion = await ensureBumpVersion(options.bumpVersion);
+    // Only the zip flow bumps the version, and a prebuilt archive skips it — nothing to prompt for.
+    if (options.zipFileName) {
+      if (options.bumpVersion && options.bumpVersion !== 'skip') {
+        logger.log(
+          `⚠️ ${chalk.yellow(
+            `--bump-version=${options.bumpVersion} is ignored with --zip-file-name: the version inside ${options.zipFileName} is used as is.`,
+          )}`,
+        );
+      }
+
+      options.bumpVersion = 'skip';
+    } else {
+      options.bumpVersion = await ensureBumpVersion(options.bumpVersion);
+    }
 
     await runFlow(RELEASE_FLOW, {
       dirName: getRealWorkingDir(dirName, options),

package/lib/constants/cli.js

@@ -3,18 +3,15 @@ export const APP_RUNTIMES = {
   // NODE12: 'nodejs12.x',
   // NODE14: 'nodejs14.x',
   // NODE16: 'nodejs16.x',
-  NODE18: 'nodejs18.x',
-  NODE20: 'nodejs20.x',
-  NODE22: 'nodejs22.x',
   NODE24: 'nodejs24.x',
-  // PYTHON3_8: 'python3.8',
-  // PYTHON3_9: 'python3.9',
-  // PYTHON3_10: 'python3.10',
-  PYTHON3_11: 'python3.11',
-  PYTHON3_12: 'python3.12',
   PYTHON3_13: 'python3.13',
+  PYTHON3_14: 'python3.14',
 };
 
+export const SUPPORTED_NODE_APP_RUNTIMES = [APP_RUNTIMES.NODE24];
+export const SUPPORTED_PYTHON_APP_RUNTIMES = [APP_RUNTIMES.PYTHON3_14, APP_RUNTIMES.PYTHON3_13];
+export const SUPPORTED_NON_UI_APP_RUNTIMES = [...SUPPORTED_NODE_APP_RUNTIMES, ...SUPPORTED_PYTHON_APP_RUNTIMES];
+
 export const TEMPLATE_TYPES = {
   UI: 'js',
   UI_TS: 'ts',

package/lib/constants/manifest.js

@@ -1,4 +1,4 @@
-import { APP_RUNTIMES, APP_TYPES, TEMPLATE_TYPES } from './cli.js';
+import { APP_RUNTIMES, APP_TYPES, SUPPORTED_NON_UI_APP_RUNTIMES, TEMPLATE_TYPES } from './cli.js';
 
 export const defaultManifest = {
   format: 1,
@@ -215,10 +215,10 @@ export const manifestOptions = (projectName = 'Corva Dev Center App') => [
     message: 'Choose runtime',
     choices: (answers) => {
       if (answers && answers.appType !== APP_TYPES.UI) {
-        return Object.values(APP_RUNTIMES).filter((value) => value !== APP_RUNTIMES.UI);
+        return SUPPORTED_NON_UI_APP_RUNTIMES;
       }
 
-      return Object.values(APP_RUNTIMES);
+      return [APP_RUNTIMES.UI, ...SUPPORTED_NON_UI_APP_RUNTIMES];
     },
     when: (answers) => answers.appType !== APP_TYPES.UI,
   },