@corva/create-app 0.123.0 → 0.125.0

package/README.md

@@ -114,8 +114,16 @@ For `frontend` apps:
 - `package.json`
 - `yarn.lock`
 - `.npmrc`
-- `config-overrides.js`
+- `config-overrides.js` (webpack apps)
+- `vite.config.mjs`
+- `index.html`
+- `devApp.js`
+- `isolatedApp.js`
+- `vitest.setup.js`
+- `vitest.global-setup.js`
 - all files under `src`
+- all files under `config`
+- all files under `public`
 - `tsconfig.json`
 
 For apps that written in `node`:

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

@@ -0,0 +1,551 @@
+// 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, statSync, unlinkSync, writeFileSync } from 'node:fs';
+import { join, relative, 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, mergeConfig } 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;
+};
+
+// webpack's `output.publicPath: 'auto'` read the bundle's own <script> src once, at bundle
+// init, and served every emitted asset from next to it. Same expression, same moment.
+const ASSET_BASE_EXPR =
+  '(function(){var d=document,s=d.currentScript;if(!s||s.tagName.toUpperCase()!=="SCRIPT"){' +
+  'var a=d.getElementsByTagName("script");s=a[a.length-1];}' +
+  'return((s&&s.src)||d.baseURI).replace(/[^/]*(?:[?#].*)?$/,"");})()';
+
+// url() in the extracted CSS carries this marker instead of a path (see renderBuiltUrl); the
+// marker is spliced out into a concatenation with the base, so the injected stylesheet points
+// at the CDN directory rather than at the host document's.
+const ASSET_MARKER = '__CORVA_ASSET__';
+
+const createCssInjection = cssContent =>
+  `(function(){var B=${ASSET_BASE_EXPR};var s=document.createElement('style');s.textContent=${JSON.stringify(
+    cssContent,
+  ).replaceAll(ASSET_MARKER, '"+B+"')};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('');
+  // normalise first: the fallbacks read the head of the bundle, so a stylesheet
+  // sitting in front of it would take the global assignment for itself
+  const jsContent = normalizeIifeGlobalAssignment(
+    readFileSync(jsPath, 'utf-8'),
+    appIdentifier,
+    emittedGlobalName,
+  );
+
+  writeFileSync(jsPath, css ? createCssInjection(css) + jsContent : jsContent);
+
+  cssFileNames.forEach(fileName => unlinkSync(join(outDir, fileName)));
+};
+
+// webpack emitted binaries as files (`asset/resource`, publicPath resolved at runtime) and
+// inlined only SVGs under svg-url-loader's 10 KB limit. Vite's library mode inlines every asset
+// whatever `assetsInlineLimit` says — `?no-inline` is the one thing it still honours, so the
+// same split is restored by tagging the id.
+const EMITTED_ASSET_RE = /\.(png|jpe?g|gif|webp|avif|woff2?|eot|ttf|otf|mp4|webm|ogg|mp3|wav)$/i;
+const SVG_INLINE_LIMIT = 10000;
+
+const emitAssetsAsFilesPlugin = () => {
+  const resolving = new Set();
+
+  return {
+    name: 'corva-emit-assets-as-files',
+    // before vite:resolve, which would otherwise resolve the asset id first and never let this
+    // hook see it
+    enforce: 'pre',
+    async resolveId(source, importer, options) {
+      if (source.includes('?') || (!EMITTED_ASSET_RE.test(source) && !/\.svg$/i.test(source))) {
+        return null;
+      }
+
+      const key = `${importer}\u0000${source}`;
+
+      if (resolving.has(key)) {
+        return null;
+      }
+
+      resolving.add(key);
+
+      try {
+        const resolved = await this.resolve(source, importer, options);
+
+        if (!resolved || resolved.external) {
+          return null;
+        }
+
+        if (/\.svg$/i.test(resolved.id) && statSync(resolved.id).size < SVG_INLINE_LIMIT) {
+          return null;
+        }
+
+        return `${resolved.id}?no-inline`;
+      } finally {
+        resolving.delete(key);
+      }
+    },
+  };
+};
+
+// Every DC app on a dashboard renders into the same document, which is why webpack's css-loader
+// ran with `modules` on for every stylesheet: nothing an app shipped could leak onto its
+// neighbours. Vite decides by filename, so a plain `.css` would quietly become global. Refuse it
+// instead — the selectors that really have to be global still go through `:global(...)`, exactly
+// as they did under webpack.
+const UNSCOPED_CSS_RE = /(?<!\.module)\.(css|scss|sass)(\?|$)/;
+const STYLESHEET_IMPORTER_RE = /\.(css|scss|sass)(\?|$)/;
+
+const rejectUnscopedCssPlugin = pwd => {
+  const resolving = new Set();
+
+  return {
+    name: 'corva-reject-unscoped-css',
+    enforce: 'pre',
+    async resolveId(source, importer, options) {
+      // no importer: an entry. Stylesheet importer: a sass/postcss partial, which is not a module
+      // in either build system.
+      if (!importer || !UNSCOPED_CSS_RE.test(source) || STYLESHEET_IMPORTER_RE.test(importer)) {
+        return null;
+      }
+
+      const key = `${importer}\u0000${source}`;
+
+      if (resolving.has(key)) {
+        return null;
+      }
+
+      resolving.add(key);
+
+      let resolved;
+
+      try {
+        resolved = await this.resolve(source, importer, options);
+      } finally {
+        resolving.delete(key);
+      }
+
+      // a dependency's own stylesheet is its business, and it was never scoped to this app
+      if (!resolved || resolved.external || resolved.id.includes('node_modules')) {
+        return null;
+      }
+
+      throw new Error(
+        `${relative(pwd, resolved.id)} is imported as a plain stylesheet by ${relative(pwd, importer)}.\n` +
+          'Please use *.module.css — global styles may leak into other platform elements, and ' +
+          'that surfaces later as weird bugs nobody traces back to this file.\n' +
+          'If you really do want a global style and know what you are doing, keep the .module.css ' +
+          'file and wrap that one selector:\n' +
+          '  :global(.my-global-class) { color: red; }',
+      );
+    },
+  };
+};
+
+const getCorvaApiEnvVariables = () => {
+  const apiEnv = process.env.CORVA_API_ENV || CORVA_API_ENVS.production;
+
+  if (Object.hasOwn(CORVA_API_ENVS, apiEnv)) {
+    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', () => {
+        let update;
+
+        // webpack's dev server parsed the body with express.json(), which answers
+        // 400 on a malformed one; parsing it here would take the server down
+        try {
+          update = JSON.parse(Buffer.concat(chunks));
+        } catch {
+          res.statusCode = 400;
+          res.end();
+
+          return;
+        }
+
+        const currentEnv = existsSync(envPath) ? readFileSync(envPath, 'utf-8') : '';
+
+        writeFileSync(envPath, updateDotEnv(currentEnv, update));
+        res.statusCode = 200;
+        res.end();
+      });
+    });
+  },
+});
+
+export const createViteConfig = ({ pwd, overrides = {} }) => {
+  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`.
+  // The name has to match on a package boundary, as isExternal does: matching on a
+  // bare prefix maps react-dom/client onto react and emits `this["react"]-dom.client`.
+  const toGlobal = id => {
+    const dep = globalDependencies.find(libName => id === libName || id.startsWith(`${libName}/`));
+
+    if (!dep) {
+      throw new Error(`Unknown dependency: ${id}`);
+    }
+
+    if (dep === id) {
+      return `this["${dep}"].default || this["${dep}"]`;
+    }
+
+    return `this["${dep}"]${id
+      .slice(dep.length)
+      .split('/')
+      .filter(Boolean)
+      .map(segment => `.${segment}`)
+      .join('')}`;
+  };
+
+  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;
+    }
+
+    // tsconfig.json is JSONC, which JSON.parse rejects; a comment in it must not
+    // take the build down
+    let compilerOptions;
+
+    try {
+      ({ compilerOptions } = JSON.parse(readFileSync(tsconfigPath, 'utf-8')));
+    } catch {
+      console.warn(`Could not read compilerOptions.paths from ${tsconfigPath}; only '~' is aliased.`);
+
+      return defaultAlias;
+    }
+
+    return {
+      ...defaultAlias,
+      ...Object.fromEntries(
+        Object.entries(compilerOptions?.paths || {}).map(([key, [value]]) => [
+          key.replace('/*', ''),
+          resolve(pwd, value.replace('/*', '')),
+        ]),
+      ),
+    };
+  };
+
+  const resolveConfig = ({ 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' },
+        // webpack's postcss-loader ran preset-env with no options, i.e. stage 2; a narrower
+        // stage silently stops transpiling CSS features the app already relies on
+        postcss: { plugins: [presetEnv()] },
+      },
+      plugins: [react(), dotEnvEndpointPlugin(pwd), rejectUnscopedCssPlugin(pwd)],
+      // webpack ran with `resolve.symlinks: false`; a yarn-linked @corva/ui has to keep
+      // resolving through the link, not through its real path
+      resolve: { alias: getAlias(), preserveSymlinks: true },
+      test: {
+        watch: false,
+        globals: true,
+        // jest ran with resetMocks: true; vitest defaults it to false
+        mockReset: 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: {
+        // webpack's prod config ran `EnvironmentPlugin(process.env)`: one textual replacement
+        // per key, so only the keys the source actually reads reach the bundle. Without it an
+        // app reading e.g. process.env.CORVA_API_ENV silently compiles to undefined.
+        ...Object.fromEntries(
+          Object.entries(process.env)
+            .filter(([key]) => /^[A-Za-z_$][A-Za-z0-9_$]*$/.test(key))
+            .map(([key, value]) => [`process.env.${key}`, JSON.stringify(value)]),
+        ),
+        'process.env': { NODE_ENV: 'production' },
+        'process.env.NODE_ENV': '"production"',
+      },
+      plugins: [
+        ...config.plugins,
+        emitAssetsAsFilesPlugin(),
+        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,
+            });
+          },
+        },
+      ],
+      // an asset URL has to be resolved at runtime, from the bundle's own location: the same
+      // app.js is served from a different package directory for every version
+      experimental: {
+        renderBuiltUrl: (filename, { hostType }) =>
+          (hostType === 'css'
+            ? `${ASSET_MARKER}${filename}`
+            : { runtime: `__CORVA_ASSET_BASE__+${JSON.stringify(filename)}` }),
+      },
+      build: {
+        outDir: 'dist',
+        emptyOutDir: true,
+        copyPublicDir: false,
+        sourcemap: false,
+        cssCodeSplit: false,
+        minify: 'terser',
+        terserOptions: {
+          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',
+            // flat next to app.js, the way webpack's default assetModuleFilename emitted them
+            assetFileNames: '[hash][extname]',
+            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;};` +
+              `var __CORVA_ASSET_BASE__=${ASSET_BASE_EXPR};`,
+          },
+          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') },
+            }),
+          ],
+        },
+      },
+    };
+  };
+
+  return defineConfig(env => mergeConfig(resolveConfig(env), overrides));
+};

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,4 @@
+import { createViteConfig } from './config/vite/corva-vite-config.mjs';
+
+// NOTE: app-specific Vite plugins and options can be provided as `overrides`
+export default createViteConfig({ pwd: import.meta.dirname, overrides: {} });

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/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);
   }