@corva/create-app 0.124.0 → 0.125.0

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

@@ -2,8 +2,8 @@
 // @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 { existsSync, readFileSync, statSync, unlinkSync, writeFileSync } from 'node:fs';
+import { join, relative, resolve } from 'node:path';
 
 import dotenv from 'dotenv';
 import { expand } from 'dotenv-expand';
@@ -100,10 +100,22 @@ const normalizeIifeGlobalAssignment = (jsContent, appIdentifier, emittedGlobalNa
   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 s=document.createElement('style');s.textContent=${JSON.stringify(
+  `(function(){var B=${ASSET_BASE_EXPR};var s=document.createElement('style');s.textContent=${JSON.stringify(
     cssContent,
-  )};document.head.appendChild(s)})();`;
+  ).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 }) => {
@@ -124,6 +136,107 @@ const finalizeJsBundle = ({ outDir, cssFileNames, appIdentifier, emittedGlobalNa
   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;
 
@@ -233,7 +346,12 @@ export const createViteConfig = ({ pwd, overrides = {} }) => {
       return `this["${dep}"].default || this["${dep}"]`;
     }
 
-    return `this["${dep}"]${id.slice(dep.length).replace(/\//g, '.')}`;
+    return `this["${dep}"]${id
+      .slice(dep.length)
+      .split('/')
+      .filter(Boolean)
+      .map(segment => `.${segment}`)
+      .join('')}`;
   };
 
   const getAlias = () => {
@@ -279,10 +397,14 @@ export const createViteConfig = ({ pwd, overrides = {} }) => {
       },
       css: {
         modules: { localsConvention: 'camelCase' },
-        postcss: { plugins: [presetEnv({ stage: 3 })] },
+        // 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)],
-      resolve: { alias: getAlias() },
+      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,
@@ -334,11 +456,20 @@ export const createViteConfig = ({ pwd, overrides = {} }) => {
     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',
@@ -352,6 +483,14 @@ export const createViteConfig = ({ pwd, overrides = {} }) => {
           },
         },
       ],
+      // 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,
@@ -360,7 +499,6 @@ export const createViteConfig = ({ pwd, overrides = {} }) => {
         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
@@ -378,13 +516,16 @@ export const createViteConfig = ({ pwd, overrides = {} }) => {
             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 require=function(id){var g=globalThis[id];return g&&g.default||g;};` +
+              `var __CORVA_ASSET_BASE__=${ASSET_BASE_EXPR};`,
           },
           plugins: [
             {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@corva/create-app",
-  "version": "0.124.0",
+  "version": "0.125.0",
   "private": false,
   "description": "Create an app to use it in CORVA.AI",
   "keywords": [

package/template_extensions/corva/.github/workflows/feat-fix.yml

@@ -20,4 +20,5 @@ jobs:
           prod-api-key: ${{ secrets.API_KEY }}
           npm-token: ${{ secrets.CORVA_NPM_TOKEN }}
           jira-user-email: ${{ secrets.JIRA_AUTOTEST_USERNAME }}
+          linear-api-key: ${{ secrets.LINEAR_API_KEY }}
           jira-api-token: ${{ secrets.JIRA_AUTOTEST_API_TOKEN }}