@lilaquadrat/design-core 0.2.2 → 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

@@ -1,9 +1,9 @@
 const OUTPUT_DIR = 'dist/preview';
 const PREVIEW_ASSET_DIR = 'previewAssets';
 
-function escapeRegExp (input) {
+function escapeRegExp(input) {
 
-  return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    return input.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 
 }
 
@@ -14,28 +14,28 @@ function escapeRegExp (input) {
  * 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 () {
+export function dropPreviewAssets() {
 
-  return {
-    name   : 'drop-preview-assets',
-    enforce: 'post',
-    apply  : 'build',
-    generateBundle (_options, bundle) {
+    return {
+        name: 'drop-preview-assets',
+        enforce: 'post',
+        apply: 'build',
+        generateBundle(_options, bundle) {
 
-      Object.keys(bundle).forEach((fileName) => {
+            Object.keys(bundle).forEach((fileName) => {
 
-        const single = bundle[fileName];
+                const single = bundle[fileName];
 
-        if(single.type !== 'asset') return;
+                if(single.type !== 'asset') return;
 
-        const origins = [single.originalFileName, ...single.originalFileNames ?? []].filter(Boolean);
+                const origins = [single.originalFileName, ...single.originalFileNames ?? []].filter(Boolean);
 
-        if(origins.some((origin) => origin.includes(PREVIEW_ASSET_DIR))) delete bundle[fileName];
+                if(origins.some((origin) => origin.includes(PREVIEW_ASSET_DIR))) delete bundle[fileName];
 
-      });
+            });
 
-    }
-  };
+        }
+    };
 
 }
 
@@ -45,27 +45,27 @@ export function dropPreviewAssets () {
  * everything here exists because the output is opened straight from disk, where
  * each file is its own opaque origin.
  */
-export function previewBuildOptions (base) {
+export function previewBuildOptions(base) {
 
-  return {
-    ...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',
-      }
-    }
-  };
+        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',
+            }
+        }
+    };
 
 }
 
@@ -73,60 +73,60 @@ export function previewBuildOptions (base) {
  * 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 () {
+export default function previewBundle() {
 
-  return {
-    name   : 'preview-bundle',
-    enforce: 'post',
-    apply  : 'build',
-    generateBundle (_options, bundle) {
+    return {
+        name: 'preview-bundle',
+        enforce: 'post',
+        apply: 'build',
+        generateBundle(_options, bundle) {
 
-      const html = bundle['index.html'];
+            const html = bundle['index.html'];
 
-      if(!html) return;
+            if(!html) return;
 
-      let source = html.source.toString();
-      let script = '';
+            let source = html.source.toString();
+            let script = '';
 
-      Object.keys(bundle).forEach((fileName) => {
+            Object.keys(bundle).forEach((fileName) => {
 
-        const single = bundle[fileName];
+                const single = bundle[fileName];
 
-        if(fileName === 'index.html') return;
+                if(fileName === 'index.html') return;
 
-        if(single.type === 'chunk') {
+                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;
+                    // 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')) {
+                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];
+                    // 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]);
+            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>`);
+            html.source = source.replace('</body>', () => `<script>${script}</script>\n</body>`);
 
-    }
-  };
+        }
+    };
 
 }