@lilaquadrat/design-core 0.2.1 → 0.3.0

package/tooling/vite.js

@@ -0,0 +1,234 @@
+import { fileURLToPath, URL } from 'node:url';
+import { existsSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+
+import { visualizer } from 'rollup-plugin-visualizer';
+
+import previewBundle, { dropPreviewAssets, previewBuildOptions } from './preview.plugin.js';
+
+function resolveTarget(mode) {
+
+    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, name) {
+
+    const projectTemplate = resolve(root, name);
+
+    if(existsSync(projectTemplate)) return projectTemplate;
+
+    return fileURLToPath(new URL(`../html/${name}`, import.meta.url));
+
+}
+
+export function createViteConfig(options) {
+
+    /**
+   * 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) => {
+
+        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 = {
+            plugins: [
+                vue(),
+                visualizer(),
+                ...isPreview ? [previewBundle()] : [dropPreviewAssets()]
+            ],
+            base: './',
+            server: {
+                host: '0.0.0.0',
+            },
+            optimizeDeps: {
+                // design-core ships source, and its less needs the project variables
+                // injected below - a prebundle would not see them.
+                //
+                // @lilaquadrat/frontend rides along because design-core imports it:
+                // prebundling it there and serving it raw here would give the resize and
+                // inview singletons two module identities, and a second scroll listener
+                // with it
+                exclude: ['@lilaquadrat/design-core', '@lilaquadrat/frontend']
+            },
+            build: {
+                cssCodeSplit: false,
+                cssMinify: isOptimized,
+                sourcemap: !isOptimized,
+                minify: isOptimized,
+                rolldownOptions: {
+                    output: {
+                        dir: 'dist/app',
+                        // rolldown chunking: only auth0 and qrcode get their own files,
+                        // every other dependency stays in the entry. minSize 0 forces a
+                        // group to be captured regardless of size; the global minSize keeps
+                        // automatic grouping from emitting hundreds of tiny chunks.
+                        codeSplitting: {
+                            minSize: 30_000,
+                            groups: [
+                                { name: 'auth0', test: /[\\/]node_modules[\\/]@auth0[\\/]/, minSize: 0 },
+                                { name: 'qrcode', test: /[\\/]node_modules[\\/]qrcode[\\/]/, minSize: 0 },
+                            ],
+                        },
+                        assetFileNames: (assetInfo) => {
+
+                            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',
+                    // holds a static request cache, so a second copy would cache twice
+                    '@lilaquadrat/sdk',
+                    // resize and inview are singletons: a second copy means a second
+                    // scroll listener and a second set of refs nobody reads
+                    '@lilaquadrat/frontend',
+                    '@auth0/auth0-spa-js',
+                    'axios',
+                    'dayjs',
+                ],
+                /**
+         * @lilaquadrat/studio is deliberately NOT deduped: it is the backend
+         * package and a project may still hold a copy for other reasons, while
+         * a second one costs nothing here.
+         *
+         * @lilaquadrat/interfaces is types only, so it has nothing to dedupe.
+         */
+            },
+            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,
+                        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 };

package/src/interfaces/EditorConfiguration.interface.ts

@@ -1,15 +0,0 @@
-export interface EditorTitleDescription {
-    short?: string
-    full?: string
-}
-export default interface EditorConfiguration {
-
-    editorUrl?: string
-    breakpointTablet?: string
-    breakpointDesktop?: string
-    breakpointWide?: string
-    preloadImages?: boolean
-    title?: EditorTitleDescription
-    description?: EditorTitleDescription
-
-}

package/tooling/preview.plugin.ts

@@ -1,134 +0,0 @@
-import type { Plugin, UserConfig } from 'vite';
-
-const OUTPUT_DIR = 'dist/preview';
-const PREVIEW_ASSET_DIR = 'previewAssets';
-
-function escapeRegExp (input: string) {
-
-  return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-
-}
-
-/**
- * drops the gallery fixture images from every build that is not the preview.
- *
- * the viewData fixtures import them statically, and vite emits an imported asset
- * while transforming - so even though rolldown tree shakes preview.view.vue out
- * of the app bundle, the images survive as orphans nobody references.
- */
-export function dropPreviewAssets (): Plugin {
-
-  return {
-    name   : 'drop-preview-assets',
-    enforce: 'post',
-    apply  : 'build',
-    generateBundle (_options, bundle: Record<string, any>) {
-
-      Object.keys(bundle).forEach((fileName) => {
-
-        const single = bundle[fileName];
-
-        if(single.type !== 'asset') return;
-
-        const origins: string[] = [single.originalFileName, ...single.originalFileNames ?? []].filter(Boolean);
-
-        if(origins.some((origin) => origin.includes(PREVIEW_ASSET_DIR))) delete bundle[fileName];
-
-      });
-
-    }
-  };
-
-}
-
-/**
- * build overrides for the shareable static gallery (yarn build:preview).
- *
- * everything here exists because the output is opened straight from disk, where
- * each file is its own opaque origin.
- */
-export function previewBuildOptions (base: UserConfig['build']): UserConfig['build'] {
-
-  return {
-    ...base,
-    /**
-     * inline fonts and images as data URIs: browsers block the font fetches a
-     * separate .woff would need
-     */
-    assetsInlineLimit: 512 * 1024,
-    rolldownOptions  : {
-      ...base?.rolldownOptions,
-      output: {
-        ...base?.rolldownOptions?.output,
-        // a single classic script: file:// blocks `type="module"` as cross origin
-        dir           : OUTPUT_DIR,
-        format        : 'iife',
-        codeSplitting : false,
-        entryFileNames: '[name].js',
-      }
-    }
-  };
-
-}
-
-/**
- * folds the script and the stylesheet into index.html, so the preview is a self
- * contained file that opens over file:// with no server.
- */
-export default function previewBundle (): Plugin {
-
-  return {
-    name   : 'preview-bundle',
-    enforce: 'post',
-    apply  : 'build',
-    generateBundle (_options, bundle: Record<string, any>) {
-
-      const html = bundle['index.html'];
-
-      if(!html) return;
-
-      let source = html.source.toString();
-      let script = '';
-
-      Object.keys(bundle).forEach((fileName) => {
-
-        const single = bundle[fileName];
-
-        if(fileName === 'index.html') return;
-
-        if(single.type === 'chunk') {
-
-          // a literal </script> inside the code would end the tag early
-          script += single.code.replace(/<\/script>/gi, '<\\/script>');
-          source = source.replace(new RegExp(`<script[^>]*src="[^"]*${escapeRegExp(fileName)}"[^>]*></script>\\s*`), '');
-          delete bundle[fileName];
-          return;
-
-        }
-
-        if(fileName.endsWith('.css')) {
-
-          // replacer functions only: a replacement string would expand $& and
-          // $\` in the asset as substitution patterns
-          source = source.replace(new RegExp(`<link[^>]*href="[^"]*${escapeRegExp(fileName)}"[^>]*>`), () => `<style>${single.source}</style>`);
-          delete bundle[fileName];
-
-        }
-
-      });
-
-      source = source.replace(/<link[^>]*rel="modulepreload"[^>]*>\s*/g, '');
-      // the manifest is the one head asset a file:// origin cannot fetch
-      source = source.replace(/<link[^>]*rel="manifest"[^>]*>\s*/g, '');
-      Object.keys(bundle).filter((fileName) => fileName.endsWith('.webmanifest')).forEach((fileName) => delete bundle[fileName]);
-
-      /**
-       * at the end of the body, not in place: an inline script has no `defer`,
-       * so in the head it would run before #app exists
-       */
-      html.source = source.replace('</body>', () => `<script>${script}</script>\n</body>`);
-
-    }
-  };
-
-}

package/tooling/stylelint.config.mjs

@@ -1,24 +0,0 @@
-/** @type {import('stylelint').Config} */
-export default {
-  'extends': [
-    'stylelint-config-html',
-    'stylelint-config-recommended-vue'
-  ],
-  'plugins': [
-    'stylelint-order'
-  ],
-  'overrides': [
-    {
-      'files'       : ['*.vue', '**/*.vue'],
-      'customSyntax': 'postcss-html'
-    },
-    {
-      'files'       : ['*.less', '**/*.less'],
-      'customSyntax': 'postcss-less'
-    }
-  ],
-  'rules': {
-    'media-query-no-invalid'               : null,
-    'declaration-property-value-no-unknown': null
-  }
-}

package/tooling/vite.ts

@@ -1,260 +0,0 @@
-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: {
-        // design-core ships source, and its less needs the project variables
-        // injected below - a prebundle would not see them.
-        //
-        // @lilaquadrat/frontend rides along because design-core imports it:
-        // prebundling it there and serving it raw here would give the resize and
-        // inview singletons two module identities, and a second scroll listener
-        // with it
-        exclude: ['@lilaquadrat/design-core', '@lilaquadrat/frontend']
-      },
-      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',
-          // holds a static request cache, so a second copy would cache twice
-          '@lilaquadrat/sdk',
-          // resize and inview are singletons: a second copy means a second
-          // scroll listener and a second set of refs nobody reads
-          '@lilaquadrat/frontend',
-          '@auth0/auth0-spa-js',
-          'axios',
-          'dayjs',
-        ],
-        /**
-         * @lilaquadrat/studio is deliberately NOT deduped: it is the backend
-         * package and a project may still hold a copy for other reasons, while
-         * a second one costs nothing here.
-         *
-         * @lilaquadrat/interfaces is types only, so it has nothing to dedupe.
-         */
-      },
-      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 };