@kouts/eslint-config 1.3.1 → 1.3.2

package/fixtures/vue3-ts-vite-starter-template/postcss.config.js

@@ -0,0 +1,28 @@
+import postcssPurgecss from '@fullhuman/postcss-purgecss'
+import autoprefixer from 'autoprefixer'
+import tailwindcss from 'tailwindcss'
+
+const IN_PRODUCTION = process.env.NODE_ENV === 'production'
+
+export default {
+  plugins: [
+    tailwindcss,
+    autoprefixer,
+    IN_PRODUCTION &&
+      postcssPurgecss({
+        content: ['./**/*.html', './src/**/*.vue'],
+        defaultExtractor(content) {
+          const contentWithoutStyleBlocks = content.replace(/<style[^]+?<\/style>/gi, '')
+
+          return contentWithoutStyleBlocks.match(/[A-Za-z0-9-_/:]*[A-Za-z0-9-_/]+/g) || []
+        },
+        safelist: [
+          /-(leave|enter|appear)(|-(to|from|active))$/,
+          /^(?!(|.*?:)cursor-move).+-move$/,
+          /^router-link(|-exact)-active$/,
+          /data-v-.*/,
+          /^active/,
+        ],
+      }),
+  ],
+}

package/fixtures/vue3-ts-vite-starter-template/prettier.config.js

@@ -0,0 +1,3 @@
+import prettierConfig from '@kouts/eslint-config/prettier'
+
+export default prettierConfig

package/fixtures/vue3-ts-vite-starter-template/src/App.vue

@@ -0,0 +1,14 @@
+<template>
+  <component :is="layout">
+    <RouterView />
+  </component>
+</template>
+
+<script setup lang="ts">
+import '@/scss/app.scss'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const layout = computed(() => `layout-${route.meta.layout || 'default'}`)
+</script>

package/fixtures/vue3-ts-vite-starter-template/src/assets/logo.svg

@@ -0,0 +1,10 @@
+<svg version="1.1" viewBox="0 0 261.76 226.69" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1.3333 0 0 -1.3333 -76.311 313.34)">
+    <g transform="translate(178.06 235.01)">
+      <path d="m0 0-22.669-39.264-22.669 39.264h-75.491l98.16-170.02 98.16 170.02z" fill="#41b883" />
+    </g>
+    <g transform="translate(178.06 235.01)">
+      <path d="m0 0-22.669-39.264-22.669 39.264h-36.227l58.896-102.01 58.896 102.01z" fill="#34495e" />
+    </g>
+  </g>
+</svg>

package/fixtures/vue3-ts-vite-starter-template/src/components/HelloWorld.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="flex-col text-center">
+    <h1 class="msg text-4xl font-medium">{{ msg }}</h1>
+    <p class="mt-4">
+      A project setup using Vite, created to easily scaffold new Vue.js 3 projects.
+      <br />
+    </p>
+
+    <p>
+      Find out more at<a
+        class="text-emerald-500 hover:text-emerald-600"
+        href="https://vitejs.dev/guide/"
+        target="_blank"
+        rel="noopener"
+      >
+        Vite documentation</a
+      >.
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'HelloWorld',
+})
+
+defineProps({
+  msg: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+h1.msg {
+  color: $slate-700;
+}
+</style>

package/fixtures/vue3-ts-vite-starter-template/src/layouts/default/Default.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="min-h-screen pt-24 text-slate-700">
+    <DefaultNav />
+    <slot />
+    <DefaultFooter />
+  </div>
+</template>
+
+<script setup lang="ts">
+import DefaultFooter from './DefaultFooter.vue'
+import DefaultNav from './DefaultNav.vue'
+</script>

package/fixtures/vue3-ts-vite-starter-template/src/layouts/default/DefaultFooter.vue

@@ -0,0 +1,10 @@
+<template>
+  <footer class="sticky top-[100vh] flex h-16 items-center justify-center bg-neutral-100">
+    <div>
+      <span>Developed by</span>
+      <a href="https://github.com/kouts" target="_blank" rel="noopener" class="text-emerald-500 hover:text-emerald-600">
+        @kouts
+      </a>
+    </div>
+  </footer>
+</template>

package/fixtures/vue3-ts-vite-starter-template/src/layouts/default/DefaultNav.vue

@@ -0,0 +1,74 @@
+<template>
+  <nav class="fixed start-0 top-0 z-20 w-full border-b border-slate-200 bg-white">
+    <div class="mx-auto flex max-w-screen-xl flex-wrap items-center justify-between px-4 py-3 md:justify-normal md:py-4">
+      <RouterLink to="/" class="flex items-center space-x-3 no-underline rtl:space-x-reverse">
+        <span class="self-center whitespace-nowrap text-2xl font-semibold text-slate-600">ProjectName</span>
+      </RouterLink>
+      <div class="flex space-x-3 md:space-x-0 rtl:space-x-reverse">
+        <button
+          data-collapse-toggle="navbar-sticky"
+          type="button"
+          class="inline-flex h-10 w-10 items-center justify-center rounded-lg p-2 text-sm hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-slate-200 md:hidden"
+          aria-controls="navbar-sticky"
+          :aria-expanded="navbarExpanded"
+          @click="toggleNavbar"
+        >
+          <span class="sr-only">Open main menu</span>
+          <svg class="h-5 w-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
+            <path
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="2"
+              d="M1 1h15M1 7h15M1 13h15"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        id="navbar-sticky"
+        :class="['w-full items-center justify-between md:order-1 md:ml-8 md:flex md:w-auto', { hidden: !navbarExpanded }]"
+      >
+        <ul
+          class="mt-4 flex flex-col rounded-lg border border-slate-100 bg-slate-50 p-4 font-medium md:mt-0 md:flex-row md:space-x-8 md:border-0 md:bg-white md:p-0 rtl:space-x-reverse dark:border-slate-700 dark:bg-slate-800 md:dark:bg-slate-900"
+        >
+          <li>
+            <RouterLink
+              to="/"
+              class="block rounded px-3 py-2 no-underline hover:text-emerald-600 md:bg-transparent md:p-0 md:hover:text-emerald-600"
+              :active-class="activeClass"
+              @click="closeNavBar"
+            >
+              Home
+            </RouterLink>
+          </li>
+          <li>
+            <RouterLink
+              to="/about"
+              class="block rounded px-3 py-2 no-underline hover:text-emerald-600 md:bg-transparent md:p-0 md:hover:text-emerald-600"
+              :active-class="activeClass"
+              @click="closeNavBar"
+            >
+              About
+            </RouterLink>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </nav>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const navbarExpanded = ref(false)
+const activeClass = 'bg-emerald-600 text-white hover:text-white md:!text-emerald-500'
+
+const toggleNavbar = () => {
+  navbarExpanded.value = !navbarExpanded.value
+}
+
+const closeNavBar = () => {
+  navbarExpanded.value = false
+}
+</script>

package/fixtures/vue3-ts-vite-starter-template/src/main.ts

@@ -0,0 +1,13 @@
+import { createPinia } from 'pinia'
+import { createApp } from 'vue'
+import Default from '@/layouts/default/Default.vue'
+import App from './App.vue'
+import { router } from './router'
+
+const app = createApp(App)
+
+app.component('LayoutDefault', Default)
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')

package/fixtures/vue3-ts-vite-starter-template/src/router/index.ts

@@ -0,0 +1,32 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const history = createWebHashHistory()
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home,
+    meta: {
+      layout: 'default',
+    },
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue'),
+    meta: {
+      layout: 'default',
+    },
+  },
+]
+const router = createRouter({
+  linkActiveClass: 'active',
+  history,
+  routes,
+})
+
+export { router }

package/fixtures/vue3-ts-vite-starter-template/src/scss/app.scss

@@ -0,0 +1,4 @@
+// Tailwind
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/fixtures/vue3-ts-vite-starter-template/src/scss/variables.scss

@@ -0,0 +1,5 @@
+$slate-500: #64748b;
+$slate-600: #475569;
+$slate-700: #334155;
+$slate-800: #1e293b;
+$slate-900: #0f172a;

package/fixtures/vue3-ts-vite-starter-template/src/stores/counter.ts

@@ -0,0 +1,16 @@
+import { defineStore } from 'pinia'
+
+export const useCounterStore = defineStore({
+  id: 'counter',
+  state: () => ({
+    counter: 0,
+  }),
+  getters: {
+    doubleCount: (state) => state.counter * 2,
+  },
+  actions: {
+    increment() {
+      this.counter++
+    },
+  },
+})

package/fixtures/vue3-ts-vite-starter-template/src/views/About.vue

@@ -0,0 +1,11 @@
+<template>
+  <div class="mx-auto max-w-screen-xl px-4">
+    <h1 class="text-4xl">This is the about page</h1>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'About',
+})
+</script>

package/fixtures/vue3-ts-vite-starter-template/src/views/Home.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="mx-auto max-w-screen-xl px-4">
+    <div class="flex justify-center">
+      <div alt="Vue logo" class="mt-8 h-52 w-52 bg-[url('@/assets/logo.svg')] bg-no-repeat" />
+    </div>
+    <HelloWorld msg="Vue.js 3 starter template" class="mt-2" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import HelloWorld from '@/components/HelloWorld.vue'
+
+defineOptions({
+  name: 'Home',
+})
+</script>

package/fixtures/vue3-ts-vite-starter-template/tailwind.config.js

@@ -0,0 +1,12 @@
+/** @type {import('tailwindcss').Config} */
+
+export default {
+  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx,mdx}'],
+  theme: {
+    fontFamily: {
+      sans: ['Inter', 'Helvetica', 'Arial', 'sans-serif'],
+    },
+    extend: {},
+  },
+  plugins: [],
+}

package/fixtures/vue3-ts-vite-starter-template/tests/HelloWorld.spec.ts

@@ -0,0 +1,10 @@
+import { mount } from '@vue/test-utils'
+import HelloWorld from '@/components/HelloWorld.vue'
+
+describe('HelloWorld', () => {
+  it('renders properly', () => {
+    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
+
+    expect(wrapper.text()).toContain('Hello Vitest')
+  })
+})

package/fixtures/vue3-ts-vite-starter-template/tests/utils.ts

@@ -0,0 +1 @@
+export const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms))

package/fixtures/vue3-ts-vite-starter-template/tests/vitest.global-setup.ts

@@ -0,0 +1,3 @@
+export const setup = () => {
+  process.env.TZ = 'UTC'
+}

package/fixtures/vue3-ts-vite-starter-template/tests/vitest.globals.ts

@@ -0,0 +1,22 @@
+import { beforeAll } from 'vitest'
+
+beforeAll(() => {
+  globalThis.ResizeObserver = class ResizeObserver {
+    // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+    constructor() {
+      //
+    }
+
+    disconnect() {
+      return null
+    }
+
+    observe() {
+      return null
+    }
+
+    unobserve() {
+      return null
+    }
+  }
+})

package/fixtures/vue3-ts-vite-starter-template/tsconfig.json

@@ -0,0 +1,44 @@
+{
+  "include": [
+    "env.d.ts",
+    "src/**/*",
+    "src/**/*.vue",
+    "tests/**/*",
+    "tests/**/*.vue",
+    "vite.config.*",
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "module": "ESNext",
+    "target": "ESNext",
+    "lib": [
+      "DOM",
+      "ESNext"
+    ],
+    "strict": true,
+    "esModuleInterop": true,
+    "jsx": "preserve",
+    "skipLibCheck": true,
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "noUnusedLocals": true,
+    "strictNullChecks": true,
+    "allowJs": true,
+    "forceConsistentCasingInFileNames": true,
+    "types": [
+      "vite/client",
+      "vitest/globals",
+      "jsdom",
+      "node",
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    }
+  },
+  "exclude": [
+    "dist",
+    "node_modules"
+  ]
+}

package/fixtures/vue3-ts-vite-starter-template/vite.config.ts

@@ -0,0 +1,47 @@
+/// <reference types="vitest" />
+
+import vue from '@vitejs/plugin-vue'
+import { resolve } from 'path'
+import { defineConfig, type Plugin } from 'vite'
+
+const transformHtmlPlugin = (data: Record<string, string>): Plugin => ({
+  name: 'transform-html',
+  transformIndexHtml: {
+    order: 'pre',
+    handler(html: string) {
+      return html.replace(/<%=\s*(\w+)\s*%>/gi, (match, p1) => data[p1] || '')
+    },
+  },
+})
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    transformHtmlPlugin({
+      title: 'ProjectName',
+      description: 'A single page application created using Vue.js 3',
+    }),
+  ],
+  resolve: {
+    alias: {
+      '@': resolve(__dirname, '/src'),
+    },
+  },
+  css: {
+    preprocessorOptions: {
+      scss: {
+        additionalData: `@import "./src/scss/variables";`,
+      },
+    },
+  },
+  test: {
+    globals: true,
+    globalSetup: './tests/vitest.global-setup.ts',
+    setupFiles: ['./tests/vitest.globals.ts'],
+    environment: 'jsdom',
+    reporters: ['default'],
+    coverage: {
+      reporter: ['text', 'json'],
+    },
+  },
+})

package/lint-staged.config.js

@@ -0,0 +1,3 @@
+export default {
+  '*.{vue,js,cjs}': ['npm run lint-fix'],
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@kouts/eslint-config",
   "type": "module",
-  "version": "1.3.1",
+  "version": "1.3.2",
   "packageManager": "pnpm@9.7.1",
   "engines": {
     "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -38,9 +38,6 @@
   "main": "./dist/index.js",
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "dev": "pkgroll --watch",
     "build": "pkgroll --clean-dist",

package/prettier.config.js

@@ -0,0 +1,3 @@
+import configPrettier from './dist/prettier.js'
+
+export default configPrettier

package/release.config.js

@@ -0,0 +1,33 @@
+export default {
+  branches: [
+    'main',
+    {
+      name: 'beta',
+      prerelease: true,
+    },
+    {
+      name: 'next',
+      channel: 'next',
+    },
+  ],
+  plugins: [
+    '@semantic-release/commit-analyzer',
+    '@semantic-release/release-notes-generator',
+    [
+      '@semantic-release/changelog',
+      {
+        changelogFile: 'CHANGELOG.md',
+      },
+    ],
+    '@semantic-release/npm',
+    '@semantic-release/github',
+    [
+      '@semantic-release/git',
+      {
+        assets: ['CHANGELOG.md'],
+        // eslint-disable-next-line no-template-curly-in-string
+        message: 'chore(release): set `package.json` to ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}',
+      },
+    ],
+  ],
+}

package/src/index.ts

@@ -0,0 +1,153 @@
+import js from '@eslint/js'
+import pluginVitest from '@vitest/eslint-plugin'
+import type { Linter } from 'eslint'
+import pluginHtml from 'eslint-plugin-html'
+import pluginImport from 'eslint-plugin-import-x'
+import pluginPrettier from 'eslint-plugin-prettier/recommended'
+import pluginSimpleImportSort from 'eslint-plugin-simple-import-sort'
+import neostandard, { type NeostandardOptions, plugins, resolveIgnoresFromGitignore } from 'neostandard'
+import { typescript } from './typescript'
+import { vue } from './vue'
+
+type Options = {
+  vue?: boolean
+  vueVersion?: 2 | 3
+  vitest: boolean
+} & NeostandardOptions
+
+const config = (options?: Options) => {
+  const opts: Options = {
+    noJsx: true,
+    noStyle: true,
+    semi: false,
+    ts: true,
+    vue: true,
+    vueVersion: 3,
+    vitest: true,
+    ...options,
+  }
+
+  const linterConfig: Linter.Config[] = [
+    {
+      name: 'kouts/ignores',
+      ignores: [
+        '**/node_modules/**',
+        '{tmp,temp}/**',
+        '**/*.min.js',
+        'vendor/**',
+        'dist/**',
+        'public/**',
+        ...resolveIgnoresFromGitignore(),
+      ],
+    },
+
+    // JavaScript
+    {
+      name: 'kouts/javascript',
+      ...js.configs.recommended,
+    },
+
+    // TypeScript
+    ...(opts.ts ? typescript : []),
+
+    // Neostandard
+    ...neostandard(opts),
+    {
+      name: 'kouts/neostandard-overrides',
+      rules: {
+        // Enforce blank lines between the given 2 kinds of statements
+        'padding-line-between-statements': [
+          'error',
+          { blankLine: 'always', prev: '*', next: 'return' },
+          { blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
+          { blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
+          { blankLine: 'always', prev: 'directive', next: '*' },
+          { blankLine: 'any', prev: 'directive', next: 'directive' },
+        ],
+        // Console and debugger settings depending whether we're on production or not
+        'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+        'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      },
+    },
+
+    // Import
+    {
+      name: 'kouts/import',
+      plugins: {
+        import: pluginImport,
+      },
+      rules: {
+        'import/export': 'error',
+        'import/first': 'error',
+        'import/no-duplicates': 'error',
+        'import/no-mutable-exports': 'error',
+        'import/no-named-default': 'error',
+        'import/no-self-import': 'error',
+        'import/no-webpack-loader-syntax': 'error',
+        'import/no-absolute-path': ['error', { esmodule: true, commonjs: true, amd: false }],
+        'import/newline-after-import': ['error', { count: 1 }],
+      },
+    },
+
+    // Sort imports
+    {
+      name: 'kouts/sort-imports',
+      plugins: {
+        'simple-import-sort': pluginSimpleImportSort,
+      },
+      rules: {
+        'simple-import-sort/imports': [
+          'error',
+          // Remove all blank lines between imports
+          {
+            groups: [['^\\u0000', '^node:', '^@?\\w', '^', '^\\.']],
+          },
+        ],
+        'simple-import-sort/exports': 'error',
+      },
+    },
+
+    // HTML
+    {
+      name: 'kouts/html',
+      files: ['**/*.html'],
+      plugins: {
+        html: pluginHtml,
+      },
+    },
+
+    // Vue
+    ...(opts.vue ? vue({ version: opts.vueVersion, ts: opts.ts }) : []),
+
+    // Vitest
+    ...(opts.vitest
+      ? [
+          {
+            name: 'kouts/vitest',
+            files: ['test/**', 'tests/**', '**/*.test.{js,ts}*', '**/*.spec.{js,ts}'],
+            plugins: {
+              vitest: pluginVitest,
+            },
+            rules: {
+              ...pluginVitest.configs.recommended.rules,
+            },
+            languageOptions: {
+              globals: {
+                ...pluginVitest.environments.env.globals,
+              },
+            },
+          },
+        ]
+      : []),
+
+    // Prettier
+    {
+      name: 'kouts/prettier',
+      ...pluginPrettier,
+    },
+  ]
+
+  return linterConfig
+}
+
+export { config, plugins }