@lilaquadrat/design-core 0.2.1 → 0.3.0

package/tooling/eslint.config.js

@@ -1,223 +1 @@
-import eslint from '@eslint/js';
-import tseslint from '@typescript-eslint/eslint-plugin';
-import pluginVue from 'eslint-plugin-vue'
-import typescriptParser from '@typescript-eslint/parser';
-import vueParser from 'vue-eslint-parser';
-import globals from 'globals';
-
-export default [
-  // Default ignores - including all patterns from .eslintignore
-  { 
-    ignores: [
-      // Project specific ignores
-      'src/views/viewData/*',
-      'config.ts',
-      'stats.html',
-      
-      // Build outputs
-      'dist/**',
-      'dist-ssr/**',
-      'coverage/**',
-      '*.local',
-      
-      // Logs
-      'logs/**',
-      '*.log',
-      'npm-debug.log*',
-      'yarn-debug.log*',
-      'yarn-error.log*',
-      'pnpm-debug.log*',
-      'lerna-debug.log*',
-      
-      // Dependencies
-      'node_modules/**',
-      '.yarn/**',
-      '*.tsbuildinfo',
-      '.lila/**',
-      
-      // System files
-      '.DS_Store',
-      
-      // Editor directories and files
-      '.vscode/**',
-      '!.vscode/extensions.json',
-      '.idea/**',
-      '*.suo',
-      '*.ntvs*',
-      '*.njsproj',
-      '*.sln',
-      '*.sw?',
-      
-      // Test files
-      '/cypress/videos/',
-      '/cypress/screenshots/',
-    ] 
-  },
-
-  // Cypress test files
-  {
-    files          : ['cypress/**/*.{cy,spec}.{js,jsx,ts,tsx}', 'cypress/support/**/*.{js,jsx,ts,tsx}'],
-    languageOptions: {
-      parser : typescriptParser,
-      globals: {
-        ...globals.browser,
-        ...globals.node,
-        ...globals.mocha,
-        cy     : 'readonly',
-        Cypress: 'readonly',
-        expect : 'readonly',
-        assert : 'readonly',
-      }
-    }
-  },
-
-  // Base eslint recommended config
-  eslint.configs.recommended,
-  ...pluginVue.configs['flat/recommended'],
-
-  // Common environment settings for all files
-  {
-    languageOptions: {
-      ecmaVersion: 'latest',
-      globals    : {
-        ...globals.browser, 
-        // Browser globals
-        console  : 'readonly',
-        document : 'readonly',
-        window   : 'readonly',
-        navigator: 'readonly',
-        
-        // Timer functions
-        setTimeout   : 'readonly',
-        clearTimeout : 'readonly',
-        setInterval  : 'readonly',
-        clearInterval: 'readonly',
-        
-        // JS objects
-        Promise: 'readonly',
-        
-        // DOM elements and types
-        HTMLElement     : 'readonly',
-        HTMLInputElement: 'readonly',
-        Element         : 'readonly',
-        Node            : 'readonly',
-        NodeList        : 'readonly',
-        Event           : 'readonly',
-        MouseEvent      : 'readonly',
-        KeyboardEvent   : 'readonly',
-        CustomEvent     : 'readonly',
-        DOMParser       : 'readonly',
-        
-        // Web APIs
-        localStorage  : 'readonly',
-        sessionStorage: 'readonly',
-        fetch         : 'readonly',
-        XMLHttpRequest: 'readonly',
-
-        // compile time defines, injected by vite.config.ts
-        __FRONTEND_CONFIG__: 'readonly',
-        __TARGET__         : 'readonly',
-        __PREVIEW__        : 'readonly'
-      }
-    }
-  },
-
-  // the build config runs in node, not in the browser
-  {
-    files          : ['vite.config.ts', 'build/**/*.ts', 'build/**/*.mjs'],
-    languageOptions: {
-      globals: {
-        ...globals.node
-      }
-    }
-  },
-
-  // Vue plugin config
-  {
-    files          : ['**/*.vue'],
-    languageOptions: {
-      parser       : vueParser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        parser     : typescriptParser,
-      },
-    },
-    rules: {
-      'vue/multi-word-component-names': 'off',
-      'vue/max-len'                   : ['warn', {
-        code                     : 250,
-        template                 : 350,
-        tabWidth                 : 2,
-        ignoreComments           : true,
-        ignoreUrls               : true,
-        ignoreStrings            : true,
-        ignoreTemplateLiterals   : true,
-        ignoreRegExpLiterals     : true,
-        ignoreHTMLAttributeValues: false,
-        ignoreHTMLTextContents   : false,
-      }],
-      'vue/max-attributes-per-line'     : 'off',
-      'vue/first-attribute-linebreak'   : 'off',
-      'vue/html-closing-bracket-newline': 'off',
-      'vue/require-default-prop'        : 'off',
-      'vue/html-indent'                 : ['error', 4],
-    }
-  },
-
-  // TypeScript files
-  {
-    files  : ['**/*.ts', '**/*.tsx'],
-    plugins: {
-      '@typescript-eslint': tseslint,
-    },
-    languageOptions: {
-      parser       : typescriptParser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-      }
-    },
-  },
-
-  // Common config for all files
-  {
-    languageOptions: {
-      ecmaVersion: 'latest',
-    },
-    rules: {
-      semi               : 'off',
-      'brace-style'      : ['error', '1tbs', { allowSingleLine: true }],
-      'multiline-ternary': ['error', 'always-multiline'],
-      'no-param-reassign': ['error', { props: false }],
-      'import/no-cycle'  : 'off',
-      'max-len'          : [
-        'warn',
-        {
-          code: 250, // Updated this from 240 to 250 for consistency
-        },
-      ],
-      curly                        : [2, 'multi-line'],
-      'prefer-destructuring'       : 'off',
-      'no-multiple-empty-lines'    : [1, { max: 1 }],
-      'no-multi-spaces'            : ['error', { ignoreEOLComments: false }],
-      'arrow-spacing'              : ['error', { 'before': true, 'after': true }],
-      'space-before-function-paren': ['error', {
-        'anonymous' : 'never',
-        'named'     : 'never',
-        'asyncArrow': 'always'
-      }],
-      'one-var'                        : ['error', 'never'],
-      'comma-spacing'                  : ['error', { 'before': false, 'after': true }],
-      'key-spacing'                    : ['error', { 'afterColon': true }],
-      'indent'                         : ['error', 4],
-      quotes            : ['error', 'single'],
-      'arrow-body-style': ['error', 'as-needed'],
-      'prefer-const'    : 'error'
-    },
-  },
-
-  // Fully disable eslint-plugin-vue (template/html linting) - script rules above still apply
-  {
-    files: ['**/*.vue'],
-    rules: Object.fromEntries(Object.keys(pluginVue.rules).map(name => [`vue/${name}`, 'off'])),
-  },
-];
+export { default } from '@lilaquadrat/frontend/eslint';

package/tooling/preview.plugin.js

@@ -0,0 +1,132 @@
+const OUTPUT_DIR = 'dist/preview';
+const PREVIEW_ASSET_DIR = 'previewAssets';
+
+function escapeRegExp(input) {
+
+    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() {
+
+    return {
+        name: 'drop-preview-assets',
+        enforce: 'post',
+        apply: 'build',
+        generateBundle(_options, bundle) {
+
+            Object.keys(bundle).forEach((fileName) => {
+
+                const single = bundle[fileName];
+
+                if(single.type !== 'asset') return;
+
+                const origins = [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) {
+
+    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() {
+
+    return {
+        name: 'preview-bundle',
+        enforce: 'post',
+        apply: 'build',
+        generateBundle(_options, bundle) {
+
+            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>`);
+
+        }
+    };
+
+}