🐛 [Vue] Restore the vue TS config

app/website/README.md

@@ -1,63 +1,3 @@
 # Earwurm app
 
 This repo hosts the website for the `earwurm` project.
-
-## TsConfig
-
-Originally, we isolated the `app` vs `node` configs. This had to be changed however because of the following bug: <https://github.com/antfu/eslint-config/issues/564>
-
-As a result, the following packages were removed:
-
-```json
-{
-  "@tsconfig/node20": "^20.1.4",
-  "@vue/tsconfig": "^0.5.1"
-}
-```
-
-### Record keeping
-
-In case we ever restore the original `tsconfig`:
-
-#### tsconfig.app.json
-
-```json
-{
-  "extends": "@vue/tsconfig/tsconfig.dom.json",
-  "compilerOptions": {
-    "composite": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["./src/*"]
-    }
-  },
-  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"]
-}
-```
-
-#### tsconfig.node.json
-
-```json
-{
-  "extends": "@tsconfig/node20/tsconfig.json",
-  "compilerOptions": {
-    "composite": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "types": ["node"]
-  },
-  "include": ["lightningcss-plugins.ts", "vite.config.ts"]
-}
-```
-
-#### tsconfig.json
-
-```json
-{
-  "references": [
-    { "path": "./tsconfig.node.json" },
-    { "path": "./tsconfig.app.json" }
-  ],
-  "files": []
-}
-```

app/website/eslint.config.mjs

@@ -4,8 +4,8 @@ import antfu from '@antfu/eslint-config';
 export default antfu(
   // Websites config
   {
+    name: 'website',
     type: 'app',
-    // ignores: [],
     formatters: {
       // Formats .css and .scss files, but also the `<style>` blocks in Vue.
       css: true,
@@ -33,34 +33,28 @@ export default antfu(
       },
     },
   },
+
   // General config
   {
     // Without a `files` scope, these rules will apply to everything.
+    name: 'Websites general',
     rules: {
       // General
       'no-console': 'warn',
 
       // Antfu
       'antfu/if-newline': 'off',
-      'perfectionist/sort-exports': 'off',
-      'perfectionist/sort-named-exports': 'off',
-      'perfectionist/sort-imports': 'off',
       'style/arrow-parens': ['error', 'always'],
       'style/object-curly-spacing': ['error', 'never'],
       'test/prefer-lowercase-title': 'off',
       'ts/explicit-function-return-type': 'off',
       'ts/strict-boolean-expressions': 'off',
 
-      // Would like this if I could differentiate between ternary and if conditions.
-      // 'style/operator-linebreak': ['error', 'after'],
-
-      // TODO: Try and solve broken if/else statements.
-      /*
-      'style/padding-line-between-statements': [
-        'error',
-        {blankLine: 'never', prev: 'if', next: 'block-like'},
-      ],
-      */
+      // I like sorted imports/exports... but the Antfu config doesn't
+      // quite order things the way I'd like, so I'm disabling it for now.
+      'perfectionist/sort-exports': 'off',
+      'perfectionist/sort-named-exports': 'off',
+      'perfectionist/sort-imports': 'off',
     },
   },
 );

app/website/package.json

@@ -33,7 +33,9 @@
   "devDependencies": {
     "@antfu/eslint-config": "^3.11.2",
     "@earwurm/types": "workspace:*",
+    "@tsconfig/node22": "^22.0.0",
     "@vitejs/plugin-vue": "^5.2.1",
+    "@vue/tsconfig": "^0.7.0",
     "eslint": "^9.16.0",
     "eslint-plugin-format": "^0.1.3",
     "lightningcss": "^1.28.2",

app/website/tsconfig.app.json

@@ -0,0 +1,11 @@
+{
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
+  "compilerOptions": {
+    "composite": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["env.d.ts", "src/**/*", "src/**/*.vue"]
+}

app/website/tsconfig.json

@@ -1,31 +1,7 @@
 {
-  "compilerOptions": {
-    // "types": ["node"],
-    "composite": true,
-    "target": "esnext",
-    "jsx": "preserve",
-    "jsxImportSource": "vue",
-    "lib": [
-      "es2020",
-      "dom",
-      "dom.iterable"
-    ],
-    "useDefineForClassFields": true,
-    "baseUrl": ".",
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "paths": {
-      "@/*": ["./src/*"]
-    },
-    "resolveJsonModule": true,
-    "types": [],
-    "strict": true,
-    "noImplicitThis": true,
-    "noEmit": true,
-    "esModuleInterop": true,
-    "forceConsistentCasingInFileNames": true,
-    "verbatimModuleSyntax": true,
-    "skipLibCheck": true
-  },
-  "include": ["env.d.ts", "lightningcss-plugins.ts", "vite.config.ts", "src/**/*", "src/**/*.vue"]
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.app.json" }
+  ],
+  "files": []
 }

app/website/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@tsconfig/node22/tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "types": ["node"]
+  },
+  "include": ["lightningcss-plugins.ts", "vite.config.ts"]
+}

eslint.config.mjs

@@ -5,10 +5,10 @@ import antfu from '@antfu/eslint-config';
 // 2. https://github.com/antfu/eslint-plugin-antfu
 // 3. https://github.com/antfu/eslint-plugin-format
 export default antfu(
-  // Library config
+  // Packages config
   {
+    name: 'Packages',
     type: 'lib',
-    // Antfu respects `gitignore`, so we don't need to repeat those directories.
     ignores: ['app/**'],
     formatters: {
       markdown: true,
@@ -21,24 +21,31 @@ export default antfu(
     },
     vue: false,
   },
+
+  // TODO: Is there not a way to have a separate entry for `/websites`?
+
   // General config
   {
     // Without a `files` scope, these rules will apply to everything.
+    name: 'Packages general',
     rules: {
       // General
       'no-console': 'warn',
 
       // Antfu
       'antfu/if-newline': 'off',
-      'perfectionist/sort-exports': 'off',
-      'perfectionist/sort-named-exports': 'off',
-      'perfectionist/sort-imports': 'off',
       'style/arrow-parens': ['error', 'always'],
       'style/object-curly-spacing': ['error', 'never'],
       'test/prefer-lowercase-title': 'off',
       'ts/explicit-function-return-type': 'off',
       'ts/strict-boolean-expressions': 'off',
 
+      // I like sorted imports/exports... but the Antfu config doesn't
+      // quite order things the way I'd like, so I'm disabling it for now.
+      'perfectionist/sort-exports': 'off',
+      'perfectionist/sort-named-exports': 'off',
+      'perfectionist/sort-imports': 'off',
+
       // Would like this if I could differentiate between ternary and if conditions.
       // 'style/operator-linebreak': ['error', 'after'],
 

package.json

@@ -23,6 +23,7 @@
     "clean": "pnpm -r clean && rm -rf coverage",
     "nuke": "pnpm clean && ./scripts/nuke.sh",
     "start": "pnpm --filter earwurm build && pnpm -r --parallel --stream start",
+    "preview": "pnpm --filter website preview",
     "build": "pnpm -r build",
     "lint": "pnpm -r build:only && pnpm -r lint && eslint .",
     "lint:fix": "pnpm -r build:only && pnpm -r lint:fix && eslint . --fix",