update project config to match official create vue recommendations

.eslintrc.cjs

@@ -0,0 +1,18 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  },
+  rules: {
+    'vue/multi-word-component-names': 'off'
+  }
+}

.prettierrc.json

@@ -1,9 +1,10 @@
 {
-  "tabWidth": 2,
-  "useTabs": false,
+  "$schema": "https://json.schemastore.org/prettierrc",
   "semi": false,
+  "tabWidth": 2,
   "singleQuote": true,
-  "printWidth": 88,
+  "printWidth": 100,
+  "trailingComma": "none",
   "htmlWhitespaceSensitivity": "ignore",
   "plugins": [
     "prettier-plugin-tailwindcss"

package.json

@@ -1,12 +1,16 @@
 {
   "name": "contexted-v3",
   "private": true,
-  "version": "0.0.0",
+  "version": "0.1.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vue-tsc && vite build",
-    "preview": "vite preview"
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/"
   },
   "dependencies": {
     "@ckeditor/ckeditor5-autoformat": "^37.1.0",
@@ -33,15 +37,24 @@
     "marked": "^4.3.0",
     "shortid": "^2.2.16",
     "turndown": "^7.1.2",
-    "vue": "^3.3.1"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@tsconfig/node18": "^2.0.1",
     "@types/dompurify": "^3.0.2",
     "@types/lodash-es": "^4.17.7",
+    "@types/node": "^20.2.1",
     "@types/shortid": "^0.0.29",
     "@types/turndown": "^5.0.1",
     "@vitejs/plugin-vue": "^4.2.2",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.3",
+    "@vue/tsconfig": "^0.4.0",
     "autoprefixer": "^10.4.14",
+    "eslint": "^8.40.0",
+    "eslint-plugin-vue": "^9.13.0",
+    "npm-run-all": "^4.1.5",
     "postcss": "^8.4.23",
     "prettier": "^2.8.8",
     "prettier-plugin-tailwindcss": "^0.2.8",
@@ -50,7 +63,7 @@
     "typescript": "^5.0.2",
     "unplugin-auto-import": "^0.15.3",
     "unplugin-vue-components": "^0.24.1",
-    "vite": "^4.3.5",
+    "vite": "^4.3.8",
     "vue-tsc": "^1.6.4"
   }
 }

src/ckeditor/ContextedPlugin.ts

@@ -87,7 +87,7 @@ export default class ContextedLinkEditing extends Plugin {
         model.createRange(model.createPositionAt(block, 0), focus),
         model
       )
-      const inputText = (text as string).split(']]').at(-1)
+      const inputText = (text as string).split(']]').slice(-1)[0]
       const autocompleteText = (inputText as string).match(/(?<=\[\[).*/g)
       const cursorNodes = [focus.textNode, focus.nodeBefore, focus.nodeAfter]
       const autocompleteNode: any = cursorNodes.find((node) =>

src/components/Note/Autocomplete.vue

@@ -59,6 +59,7 @@ defineExpose({ handleKeypress })
     </li>
     <SearchResult
       v-for="result in results"
+      :key="result.id"
       :result="result"
       :active-result="activeResult"
       @go-to-note="emit('createLink', result.title)"

src/components/Note/NoteReferences.vue

@@ -14,7 +14,7 @@ const props = defineProps<{
             <div class="badge-outline badge">{{ props.references.length }}</div>
           </span>
         </li>
-        <li v-for="reference in props.references">
+        <li v-for="reference in props.references" :key="reference.id">
           <a class="rounded-md" @click="setActiveNote(reference.id)">
             <i class="far fa-file-alt fa-fw" />
             {{ reference.title }}

src/components/Search/SearchBar.vue

@@ -56,17 +56,16 @@ const handleKeydown = (event: KeyboardEvent) => {
       @keydown="handleKeydown"
     />
     <div class="z-1000 dropdown absolute left-0 right-0 top-[100%]" v-if="active">
-      <ul
-        tabindex="0"
-        class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow"
-      >
+      <ul tabindex="0" class="menu mt-1 w-full rounded-md bg-base-100 p-2 text-black shadow">
+        <template v-if="results.length > 0">
           <SearchResult
             v-for="result in results"
-          v-if="results.length > 0"
+            :key="result.id"
             :result="result"
             :active-result="activeResult"
             @go-to-note="() => goToNote(result)"
           />
+        </template>
         <li v-else><a>No notes found</a></li>
       </ul>
     </div>

src/components/SideBar.vue

@@ -32,6 +32,7 @@ const emit = defineEmits<{
       <template #items>
         <SideBarMenuItem
           v-for="viewMode in props.viewModes"
+          :key="viewMode.name"
           :icon="viewMode.icon"
           :active="viewMode.name === activeViewMode.name"
           @click="emit('setViewMode', viewMode)"
@@ -48,6 +49,7 @@ const emit = defineEmits<{
       <template #items>
         <SideBarMenuItem
           v-for="note in notes"
+          :key="note.id"
           icon="far fa-file-alt fa-fw"
           @click="setActiveNote(note.id)"
           :title="rootNote?.title"

src/components/ViewModes/ListView.vue

@@ -3,27 +3,29 @@ const rows = [
   {
     noteTitle: 'Cy Ganderton',
     references: 'Quality Control Specialist',
-    modified: 'Blue',
+    modified: 'Blue'
   },
   {
     noteTitle: 'Hart Hagerty',
     references: 'Desktop Support Technician',
     modified: 'Purple',
+    rootNote: true
   },
   {
     noteTitle: 'Brice Swyre',
     references: 'Tax Accountant',
-    modified: 'Red',
-  },
+    modified: 'Red'
+  }
 ].map((row) => ({
   ...row,
-  selected: false,
+  selected: false
 }))
 
 const checkedRows = ref<{ [key: string]: Boolean }>({})
 
-const toggleRow = (rowId: string) =>
-  (checkedRows.value[rowId] = !checkedRows.value[rowId])
+const toggleRow = (row: any) => {
+  if (!row.rootNote) checkedRows.value[row.noteTitle] = !checkedRows.value[row.noteTitle]
+}
 </script>
 <template>
   <div class="overflow-x-auto">
@@ -45,9 +47,10 @@ const toggleRow = (rowId: string) =>
       </thead>
       <tbody>
         <tr
-          class="hover hover:cursor-pointer"
           v-for="row in rows"
-          @click="toggleRow(row.noteTitle)"
+          :key="row.noteTitle"
+          class="hover hover:cursor-pointer"
+          @click="toggleRow(row)"
         >
           <th>
             <label>
@@ -55,6 +58,7 @@ const toggleRow = (rowId: string) =>
                 type="checkbox"
                 class="checkbox-primary checkbox checkbox-sm border-secondary"
                 v-model="checkedRows[row.noteTitle]"
+                :disabled="row.rootNote"
               />
             </label>
           </th>

src/composables/useNotes.ts

@@ -8,7 +8,7 @@ const baseNotes = reactive<{ [noteId: string]: BaseNote }>({})
 
 export const notes = computed<Note[]>(() => {
   return Object.entries(baseNotes)
-    .map(([_, note]) => ({
+    .map(([, note]) => ({
       ...note,
       wordCount: note.content.split(' ').filter((word) => word.length > 0).length,
     }))

tsconfig.app.json

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

tsconfig.json

@@ -1,44 +1,11 @@
 {
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": [
-      "ES2020",
-      "DOM",
-      "DOM.Iterable"
-    ],
-    "skipLibCheck": true,
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "preserve",
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": [
-        "./src/*"
-      ]
-    }
-  },
-  "include": [
-    "src/**/*.ts",
-    "src/**/*.d.ts",
-    "src/**/*.tsx",
-    "src/**/*.vue",
-    "auto-imports.d.ts",
-    "components.d.ts"
-  ],
+  "files": [],
   "references": [
     {
       "path": "./tsconfig.node.json"
+    },
+    {
+      "path": "./tsconfig.app.json"
     }
   ]
 }

tsconfig.node.json

@@ -1,10 +1,9 @@
 {
+  "extends": "@tsconfig/node18/tsconfig.json",
+  "include": ["vite.config.*", "vitest.config.*", "cypress.config.*", "playwright.config.*"],
   "compilerOptions": {
     "composite": true,
-    "skipLibCheck": true,
     "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
+    "types": ["node"]
+  }
 }

vite.config.ts

@@ -1,6 +1,7 @@
+import { fileURLToPath, URL } from 'node:url'
+
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
-import path from 'path'
 import AutoImport from 'unplugin-auto-import/vite'
 import Components from 'unplugin-vue-components/vite'
 // CKEditor
@@ -18,7 +19,7 @@ export default defineConfig({
   ],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src'),
+      '@': fileURLToPath(new URL('./src', import.meta.url)),
     },
   },
 })