Vite 5 and updated all packages with eslint flat config

.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "antfu.unocss"
+  ]
+}

.vscode/settings.json

@@ -1,4 +1,51 @@
 {
+  // As per https://github.com/antfu/eslint-config#vs-code-support-auto-fix-on-save
+  "prettier.enable": false,
+  "editor.formatOnSave": false,
+
+  // Auto fix
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit",
+    "source.organizeImports": "never"
+  },
+
+  // Silent the stylistic rules in you IDE, but still auto fix them
+  "eslint.rules.customizations": [
+    { "rule": "style/*", "severity": "off", "fixable": true },
+    { "rule": "format/*", "severity": "off", "fixable": true },
+    { "rule": "*-indent", "severity": "off", "fixable": true },
+    { "rule": "*-spacing", "severity": "off", "fixable": true },
+    { "rule": "*-spaces", "severity": "off", "fixable": true },
+    { "rule": "*-order", "severity": "off", "fixable": true },
+    { "rule": "*-dangle", "severity": "off", "fixable": true },
+    { "rule": "*-newline", "severity": "off", "fixable": true },
+    { "rule": "*quotes", "severity": "off", "fixable": true },
+    { "rule": "*semi", "severity": "off", "fixable": true }
+  ],
+
+  // Enable eslint for all supported languages
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss"
+  ],
   "typescript.tsdk": "node_modules/typescript/lib",
   "files.exclude": {
     "**/dist": true
@@ -9,4 +56,4 @@
   "search.exclude": {
     "**/dist": true
   }
-}
+}

docs/cypress/e2e/dark-mode.cypress.cy.js

@@ -6,12 +6,12 @@ describe('Dark Mode', () => {
   }
 
   const assertTheme = (theme) =>
-    cy.get('html').then(html =>
+    cy.get('html').then((html) =>
       expect(html.hasClass('dark')).to.equal(theme === 'dark'))
 
   it('can toggle on and off', () => {
     visitHome()
-    cy.get('html').then(html => {
+    cy.get('html').then((html) => {
       if (html.hasClass('dark')) toggleTheme()
       assertTheme('light')
     })

docs/cypress/e2e/docsearch.cypress.cy.js

@@ -15,7 +15,7 @@ describe('DocSearch', () => {
   const searchModal = () =>
     cy.get('.DocSearch-Modal')
 
-  const closeSearchModal = () =>{
+  const closeSearchModal = () => {
     cy.get('body').type('{esc}')
     searchModal().should('not.exist')
   }

docs/iles.config.ts

@@ -6,7 +6,7 @@ import icons from '@islands/icons'
 import prism from '@islands/prism'
 import pwa from '@islands/pwa'
 
-import windicss from 'vite-plugin-windicss'
+import UnoCSS from 'unocss/vite'
 import inspect from 'vite-plugin-inspect'
 import lastUpdated from './modules/lastUpdated'
 import site from './src/site'
@@ -104,7 +104,7 @@ export default defineConfig({
       },
     },
     plugins: [
-      windicss(),
+      UnoCSS(),
       Boolean(process.env.DEBUG) && inspect(),
     ],
   },

docs/package.json

@@ -8,47 +8,37 @@
     "build": "iles build",
     "preview": "iles preview --open --port 3050",
     "now": "npm run build && npm run preview",
-    "lint": "eslint . --ext .ts,.js,.vue,.html",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "check": "vue-tsc --noEmit",
     "cy:run": "scripts/test-cypress"
   },
   "engines": {
     "node": "^14.18 || >= 16.0.0"
   },
   "devDependencies": {
-    "@iconify-json/bx": "^1.0.3",
-    "@iconify-json/heroicons-outline": "^1.0.2",
+    "@iconify-json/bx": "^1.1.10",
+    "@iconify-json/heroicons-outline": "^1.1.10",
     "@islands/headings": "workspace:*",
     "@islands/icons": "workspace:*",
     "@islands/prism": "workspace:*",
     "@islands/pwa": "workspace:*",
-    "@preact/preset-vite": "^2.5.0",
-    "@types/cross-spawn": "^6.0.2",
-    "@vueuse/core": "^6.9.2",
-    "autoprefixer": "^10.4.0",
+    "@preact/preset-vite": "^2.9.0",
+    "@types/cross-spawn": "^6.0.6",
+    "@vueuse/core": "^10.11.0",
+    "autoprefixer": "^10.4.19",
     "cross-spawn": "^7.0.3",
     "iles": "workspace:*",
-    "postcss-nesting": "^8.0.1",
-    "preact": "^10.18.1",
-    "preact-render-to-string": "^6.2.2",
+    "postcss-nesting": "^12.1.5",
+    "preact": "^10.23.1",
+    "preact-render-to-string": "^6.5.7",
     "rehype-external-links": "^3.0.0",
-    "vite-plugin-inspect": "^0.7.40",
-    "vite-plugin-windicss": "^1.9.0",
-    "vue-tsc": "^1.8.18"
+    "unocss": "^0.61.8",
+    "vite-plugin-inspect": "^0.8.5",
+    "vue-tsc": "^2.0.29"
   },
   "dependencies": {
-    "@docsearch/css": "^3.1.1",
-    "@mussi/docsearch": "^3.1.2-beta.0"
-  },
-  "eslintConfig": {
-    "rules": {
-      "react/react-in-jsx-scope": "off"
-    },
-    "globals": {
-      "$ref": "readonly",
-      "$computed": "readonly",
-      "$$": "readonly",
-      "$": "readonly"
-    }
+    "@docsearch/css": "^3.6.1",
+    "@mussi/docsearch": "3.1.2-beta.0"
   }
 }

docs/src/app.ts

@@ -1,5 +1,5 @@
-import 'virtual:windi.css'
-import 'virtual:windi-devtools'
+import 'virtual:uno.css'
+import '@unocss/reset/tailwind-compat.css'
 import '~/styles/all.css'
 
 import { defineApp } from 'iles'

docs/src/components/AppButton.vue

@@ -26,7 +26,7 @@ defineProps({
 .outline {
   background: theme('colors.gray.100');
   color: theme('colors.gray.500');
-
+  outline-style: none;
   &:hover {
     background: theme('colors.gray.200');
   }
@@ -43,11 +43,11 @@ html.dark {
   }
 
   .outline {
-    background: theme('colors.warm-gray.800');
+    background: theme('colors.warmgray.800');
     color: theme('colors.gray.200');
 
     &:hover {
-      background: theme('colors.warm-gray.600');
+      background: theme('colors.warmgray.600');
     }
   }
 }

docs/src/components/EditLink.vue

@@ -1,7 +1,9 @@
 <script setup lang="ts">
+import { computed } from 'vue'
+
 let { meta, site } = usePage()
 
-let url = $computed(() => `${site.github}/edit/main/docs/${meta.filename}`)
+let url = computed(() => `${site.github}/edit/main/docs/${meta.filename}`)
 </script>
 
 <template>

docs/src/components/Iles.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-const props = defineProps({
+const { heading, small } = defineProps({
   heading: { type: Boolean, default: false },
   small: { type: Boolean, default: false },
   noText: { type: Boolean, default: false },
 })
-const marginTop = props.heading ? '-mt-3 mx-1' : props.small ? '-mt-2.3 mx-0.5' : '-mt-4.8'
-const size = props.small ? 'h-6' : 'h-10'
+
+const marginTop = heading ? '-mt-3 mx-1' : small ? '-mt-2.3 mx-0.5' : '-mt-4.8'
+const size = small ? 'h-6' : 'h-10'
 </script>
 
 <template>

docs/src/components/MetaTags.vue

@@ -2,10 +2,11 @@
 import bannerSrc from '/images/banner.png'
 import logoSrc from '/icons/logo.svg'
 import faviconSrc from '/images/favicon.ico'
+import { computed } from 'vue'
 
 const { frontmatter, site } = usePage()
 
-let imageUrl = $computed(() => `${site.url}${frontmatter.image || bannerSrc}`)
+let imageUrl = computed(() => `${site.url}${frontmatter.image || bannerSrc}`)
 
 const isProd = import.meta.env.PROD
 </script>

docs/src/components/NavBarButton.vue

@@ -8,8 +8,8 @@
 .nav-bar-button {
   @apply rounded-lg
     text-current text-1.05rem cursor-pointer
-    focus:outline-none focus:bg-warm-gray-200
-    bg-warm-gray-100 hover:bg-warm-gray-200
+    focus:outline-none focus:bg-warmgray-200
+    bg-warmgray-100 hover:bg-warmgray-200
     dark:(bg-dark-400 hover:bg-dark-300 focus:bg-dark-300) overflow-hidden;
 }
 </style>

docs/src/components/NavBarLink.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
-const props = defineProps({
+import { computed } from 'vue'
+
+const { href, external } = defineProps({
   href: { type: String, default: undefined },
   external: { type: Boolean, default: false },
   text: { type: String, default: '' },
 })
 
 const route = useRoute()
-let attrs = $computed(() => props.external ? { rel: 'noreferrer', target: '_blank' } : {})
-let isActive = $computed(() => props.href && route.path.includes(props.href))
+let attrs = computed(() => external ? { rel: 'noreferrer', target: '_blank' } : {})
+let isActive = computed(() => href && route.path.includes(href))
 </script>
 
 <template>

docs/src/components/NavBarLinks.vue

@@ -2,7 +2,7 @@
   <div v-for="(item, index) in $site.nav" :key="item.text" class="item">
     <NavBarLink :class="{ '<md:hidden': index > 1 }" :href="item.link" :text="item.text"/>
   </div>
-  <NavBarLink aria-label="Follow on Twitter" class="text-2xl hover:text-primary-soft ml-6" :href="$site.twitter" external>
+  <NavBarLink aria-label="Follow on Twitter" class="text-xl hover:text-primary-soft ml-6" :href="$site.twitter" external>
     <IconCarbonLogoTwitter/>
   </NavBarLink>
   <NavBarLink aria-label="Fork in GitHub" class="text-xl hover:text-primary-soft ml-2" :href="$site.github" external>

docs/src/components/NextAndPrevLinks.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useSideBarLinks } from '~/logic/sidebar'
 
-const { next, prev } = $(useSideBarLinks())
+const { next, prev } = useSideBarLinks()
 </script>
 
 <template>

docs/src/components/SidebarLink.vue

@@ -1,15 +1,10 @@
 <script setup lang="ts">
-import type { PropType } from 'vue'
-import type { SideBarItem, SideBarGroup } from '~/logic/config'
+import { computed } from 'vue'
+import type { SideBarGroup } from '~/logic/config'
 
-const props = defineProps({
-  item: {
-    type: Object as PropType<SideBarItem>,
-    required: true,
-  },
-})
+const { item } = defineProps<{ item: SideBarGroup }>()
 
-let children = $computed(() => (props.item as SideBarGroup).children)
+let children = computed(() => item.children)
 </script>
 
 <template>

docs/src/components/SidebarLinkItem.vue

@@ -1,25 +1,24 @@
 <script setup lang="ts">
 import { useAppConfig } from 'iles'
-import { toRef } from 'vue'
+import { computed } from 'vue'
 import type { SideBarItem } from '~/logic/config'
 import { joinUrl } from '~/logic/utils'
 import { useActive } from '~/logic/sidebar'
 
-const props = defineProps<{ item: SideBarItem; header?: boolean; table?: boolean }>()
-const { item, header, table } = $(props)
+const { item, header, table } = defineProps<{ item: SideBarItem; header?: boolean; table?: boolean }>()
 
 const { base } = useAppConfig()
 
-const active = $(useActive(toRef(props, 'item')))
-const link = $computed(() => item.link && joinUrl(base, item.link))
+const active = useActive(() => item)
+const link = computed(() => item.link && joinUrl(base, item.link))
 
-const style = $computed(() => ([
+const style = computed(() => ([
   header
     ? 'font-bold py-2'
     : table
       ? 'toc-link'
       : 'sidebar-link',
-  { active: !table && active },
+  { active: !table && active.value },
 ]))
 
 </script>
@@ -45,7 +44,7 @@ const style = $computed(() => ([
     text-gray-500
     text-sm
     font-medium
-    dark:warm-gray-400
+    dark:warmgray-400
     hover:(text-primary dark:text-primary bg-$bg-highlight);
 }
 
@@ -59,7 +58,7 @@ const style = $computed(() => ([
     text-gray-500
     text-sm
     font-medium
-    dark:warm-gray-400
+    dark:warmgray-400
     hover:(text-primary dark:text-primary);
 }
 

docs/src/components/SidebarNav.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useSideBar } from '~/logic/sidebar'
 
 let items = useSideBar()
-let hasItem = $computed(() => items.value.length > 0)
+let hasItem = computed(() => items.value.length > 0)
 </script>
 
 <template>