@lilaquadrat/design-core 0.1.0

package/tooling/vite.ts

@@ -0,0 +1,246 @@
+import { fileURLToPath, URL } from 'node:url';
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { defineConfig, type UserConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+import { visualizer } from 'rollup-plugin-visualizer';
+
+import previewBundle, { dropPreviewAssets, previewBuildOptions } from './preview.plugin.ts';
+
+export type Target = 'local' | 'next' | 'live';
+
+export interface ViteFactoryOptions {
+  /**
+   * the project config keyed by target, as exported from its own config.ts.
+   * it is only serialised into __FRONTEND_CONFIG__, so its shape is the
+   * project's business
+   */
+  config: Record<Target, unknown>
+  /**
+   * absolute path to the project root (the folder holding index.html)
+   */
+  root: string
+  /**
+   * project relative path to the less folder holding variables, mixins and
+   * fonts - these are the design and never ship with the package
+   */
+  lessDir?: string
+  /**
+   * project relative entry for the ssr build
+   */
+  ssrEntry?: string
+  /**
+   * project relative entry for the ssr preflight fixtures (mode ssr-test).
+   * it exports the design's viewData and module registries so the test suite
+   * can read them without a bundler of its own
+   */
+  ssrFixturesEntry?: string
+  /**
+   * additional defines merged over the framework ones
+   */
+  define?: Record<string, string>
+}
+
+function resolveTarget (mode: string): Target {
+
+  if(mode === 'production') return 'live';
+  if(mode === 'next') return 'next';
+
+  return 'local';
+
+}
+
+/**
+ * the html templates the ssr build emits alongside the bundle. a project may
+ * override either by keeping a file of the same name in its root, otherwise the
+ * package template is used.
+ */
+function resolveTemplate (root: string, name: string) {
+
+  const projectTemplate = resolve(root, name);
+
+  if(existsSync(projectTemplate)) return projectTemplate;
+
+  return fileURLToPath(new URL(`../html/${name}`, import.meta.url));
+
+}
+
+export function createViteConfig (options: ViteFactoryOptions) {
+
+  /**
+   * absolute on purpose: the globalVars below are prepended to every less file,
+   * including the ones inside the package, where a project relative path would
+   * resolve against node_modules
+   */
+  const lessDir = resolve(options.root, options.lessDir ?? './src/assets/less');
+  const ssrEntry = options.ssrEntry ?? '/src/server-entry.ts';
+  const ssrFixturesEntry = options.ssrFixturesEntry ?? '/src/ssr-test.fixtures.ts';
+
+  return defineConfig((settings): UserConfig => {
+
+    const target = resolveTarget(settings.mode);
+    const isProduction = target === 'live';
+    /**
+     * shareable static module gallery: preview routes, hash history, no auth and
+     * inlined assets, so the output runs from file:// without a server
+     */
+    const isPreview = settings.mode === 'preview';
+    /**
+     * a second ssr bundle holding nothing but the design's fixtures, so the ssr
+     * preflight can read viewData and the registries while still rendering
+     * through the real dist/server build
+     */
+    const isSsrTest = settings.mode === 'ssr-test';
+    /**
+     * builds meant to be handed out rather than debugged: minified, no
+     * sourcemaps, no vue dev instrumentation
+     */
+    const isOptimized = isProduction || isPreview;
+    const config = options.config[target];
+    const viteConfig: UserConfig = {
+      plugins: [
+        vue(),
+        visualizer(),
+        ...isPreview ? [previewBundle()] : [dropPreviewAssets()]
+      ],
+      base  : './',
+      server: {
+        host: '0.0.0.0',
+      },
+      optimizeDeps: {
+        // keep both packages in source form: their less needs the project
+        // variables injected below, which a prebundle would not see
+        exclude: ['@lilaquadrat/studio', '@lilaquadrat/design-core']
+      },
+      build: {
+        cssCodeSplit   : false,
+        cssMinify      : isOptimized,
+        sourcemap      : !isOptimized,
+        minify         : isOptimized,
+        rolldownOptions: {
+          output: {
+            dir          : 'dist/app',
+            // rolldown manual chunking: split deps into a vendor chunk, but
+            // never emit a chunk smaller than minSize - small groups fall back
+            // into the entry instead of producing hundreds of tiny files.
+            codeSplitting: {
+              minSize: 30_000,
+              groups : [
+                { name: 'qrcode', test: /[\\/]node_modules[\\/]qrcode[\\/]/, minSize: 0 },
+                { name: 'vendor', test: /[\\/]node_modules[\\/]/ },
+              ],
+            },
+            assetFileNames: (assetInfo: { name?: string }) => {
+              if (assetInfo.name?.endsWith('woff') || assetInfo.name?.endsWith('png')) {
+                return '[name][extname]';
+              }
+
+              return '[name]-[hash][extname]';
+            },
+            chunkFileNames: '[name]-[hash].js',
+            entryFileNames: '[name]-[hash].js',
+          }
+        }
+      },
+      css: {
+        devSourcemap       : true,
+        preprocessorOptions: {
+          less: {
+            sourceMap : true,
+            globalVars: {
+              globalVariables: `true; @import (reference) "${lessDir}/variables.less";`,
+              globalMixins   : `true; @import (reference) "${lessDir}/mixins.less";`,
+              globalFonts    : `true; @import (reference) "${lessDir}/fonts.less";`,
+            },
+          }
+        }
+      },
+      resolve: {
+        alias: {
+          '~fonts': resolve(options.root, 'src/assets/fonts'),
+          '@'     : resolve(options.root, 'src'),
+        },
+        /**
+         * a linked @lilaquadrat/design-core resolves these from its own
+         * node_modules, which would give the app a second vue and a second
+         * pinia - one app instance registering into a store nobody reads.
+         * dedupe pins every shared runtime to the project copy.
+         */
+        dedupe: [
+          'vue',
+          'vue-router',
+          'vue-i18n',
+          'pinia',
+          '@lilaquadrat/interfaces',
+          '@lilaquadrat/sdk',
+          '@lilaquadrat/studio',
+          '@auth0/auth0-spa-js',
+          'axios',
+          'dayjs',
+        ],
+      },
+      define: {
+        '__FRONTEND_CONFIG__'                  : JSON.stringify(config),
+        '__TARGET__'                           : JSON.stringify(target),
+        '__PREVIEW__'                          : JSON.stringify(isPreview),
+        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: isOptimized ? 'false' : 'true',
+        __VUE_PROD_DEVTOOLS__                  : isOptimized ? 'false' : 'true',
+        ...options.define
+      }
+    };
+
+    if (isPreview) {
+
+      viteConfig.build = previewBuildOptions(viteConfig.build);
+
+    }
+
+    if (settings.isSsrBuild) {
+
+      viteConfig.build = {
+        ...viteConfig.build,
+        rolldownOptions: {
+          input  : isSsrTest ? ssrFixturesEntry : ssrEntry,
+          plugins: isSsrTest ? [] : [
+            {
+              name: 'emit-html-templates',
+              async generateBundle () {
+                const { readFile } = await import('node:fs/promises');
+                const [mailHtml, serverHtml] = await Promise.all([
+                  readFile(resolveTemplate(options.root, 'index.mail.html'), 'utf-8'),
+                  readFile(resolveTemplate(options.root, 'index.server.html'), 'utf-8'),
+                ]);
+
+                this.emitFile({ type: 'asset', fileName: 'index.mail.html', source: mailHtml });
+                this.emitFile({ type: 'asset', fileName: 'index.server.html', source: serverHtml });
+              }
+            }
+          ],
+          output: {
+            ...viteConfig.build?.rolldownOptions?.output,
+            codeSplitting       : false,
+            inlineDynamicImports: true,
+            dir                 : isSsrTest ? 'dist/ssr-test' : 'dist/server',
+            entryFileNames      : '[name].js',
+          }
+        },
+        ssrManifest: !isSsrTest,
+      }
+      viteConfig.ssr = {
+        target    : 'webworker',
+        noExternal: true,
+        external  : ['node:stream', 'http', 'https', 'crypto', 'path', 'highlight.js'],
+      }
+
+    }
+
+    return viteConfig;
+
+  });
+
+}
+
+export default createViteConfig;
+export { previewBundle, dropPreviewAssets, previewBuildOptions };