build: add husky + lint-staged

2026-04-05 13:09:03 +08:00 · 2023-01-06 01:18:18 +01:00
parent 80fbda751e
commit 2795980815
6 changed files with 182 additions and 56 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -12,6 +12,9 @@ dist
 dist-ssr
 *.local

+# Lint
+.eslintcache
+
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json
@@ -24,3 +27,4 @@ dist-ssr
 *.sw?

 src/generatedContent
+
--- a/.husky/pre-commit
+++ b/.husky/pre-commit
@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+pnpm lint-staged
--- a/content/4-component-composition/2-emit-to-parent/alpine/index.html
+++ b/content/4-component-composition/2-emit-to-parent/alpine/index.html
@@ -1,4 +1,8 @@
-<div x-data="{ canCome: true }" x-on:yes="canCome = true" x-on:no="canCome = false">
+<div
+  x-data="{ canCome: true }"
+  x-on:yes="canCome = true"
+  x-on:no="canCome = false"
+>
  <p>Are you happy ?</p>
  <div>
    <button x-on:click="$dispatch('yes')">YES</button>
--- a/index.html
+++ b/index.html
@@ -1,53 +1,69 @@
 <!DOCTYPE html>
 <html lang="en">
+  <head>
+    <meta name="viewport" content="width=device-width" />
+    <title>Component Party</title>
+    <link rel="icon" href="/favicon.png" />
+    <link
+      rel="preload"
+      href="/font/Mona-Sans.woff2"
+      as="font"
+      type="font/woff2"
+      crossorigin=""
+    />

-<head>
-  <meta name="viewport" content="width=device-width" />
-  <title>Component Party</title>
-  <link rel="icon" href="/favicon.png" />
-  <link rel="preload" href="/font/Mona-Sans.woff2" as="font" type="font/woff2" crossorigin="" />
+    <meta
+      name="description"
+      content="Web component JS frameworks overview by their syntax and features: <%= frameworkList %>"
+    />
+    <!-- Primary Meta Tags -->
+    <meta name="title" content="Component Party" />
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://component-party.dev/" />
+    <meta property="og:title" content="Component Party" />
+    <meta
+      property="og:description"
+      content="Web component JS frameworks overview by their syntax and features: <%= frameworkList %>"
+    />
+    <meta
+      property="og:image"
+      content="https://component-party.dev/banner2.png"
+    />

-  <meta name="description"
-    content="Web component JS frameworks overview by their syntax and features: <%= frameworkList %>" />
-  <!-- Primary Meta Tags -->
-  <meta name="title" content="Component Party" />
-  <!-- Open Graph / Facebook -->
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="https://component-party.dev/" />
-  <meta property="og:title" content="Component Party" />
-  <meta property="og:description"
-    content="Web component JS frameworks overview by their syntax and features: <%= frameworkList %>" />
-  <meta property="og:image" content="https://component-party.dev/banner2.png" />
+    <!-- Twitter -->
+    <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:url" content="https://component-party.dev/" />
+    <meta property="twitter:title" content="Component Party" />
+    <meta
+      property="twitter:description"
+      content="Web component JS frameworks overview by their syntax and features: <%= frameworkList %>"
+    />
+    <meta
+      property="twitter:image"
+      content="https://component-party.dev/banner2.png"
+    />
+    <style>
+      @font-face {
+        font-family: "Mona Sans";
+        src: url("/font/Mona-Sans.woff2") format("woff2 supports variations"),
+          url("/font/Mona-Sans.woff2") format("woff2-variations");
+        font-weight: 200 500;
+        font-stretch: 75% 125%;
+        font-display: swap;
+      }

-  <!-- Twitter -->
-  <meta property="twitter:card" content="summary_large_image" />
-  <meta property="twitter:url" content="https://component-party.dev/" />
-  <meta property="twitter:title" content="Component Party" />
-  <meta property="twitter:description"
-    content="Web component JS frameworks overview by their syntax and features: <%= frameworkList %>" />
-  <meta property="twitter:image" content="https://component-party.dev/banner2.png" />
-  <style>
-    @font-face {
-      font-family: "Mona Sans";
-      src: url("/font/Mona-Sans.woff2") format("woff2 supports variations"),
-        url("/font/Mona-Sans.woff2") format("woff2-variations");
-      font-weight: 200 500;
-      font-stretch: 75% 125%;
-      font-display: swap;
-    }
-
-    html {
-      font-family: "Mona Sans" !important;
-      /* bg-gray-900 */
-      background-color: rgb(17 24 39);
-      color: #fff;
-    }
-  </style>
-</head>
-
-<body>
-  <div id="app"></div>
-  <script type="module" src="/src/main.js"></script>
-</body>
+      html {
+        font-family: "Mona Sans" !important;
+        /* bg-gray-900 */
+        background-color: rgb(17 24 39);
+        color: #fff;
+      }
+    </style>
+  </head>

+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
 </html>
--- a/package.json
+++ b/package.json
@@ -10,7 +10,7 @@
    "preview": "vite preview",
    "lint": "eslint . --fix",
    "lint:check": "eslint .",
-    "format": "prettier --ignore-path .gitignore --plugin-search-dir=. --write .",
+    "format": "prettier --cache --ignore-path .gitignore --plugin-search-dir=. --write .",
    "format:check": "prettier --ignore-path .gitignore --plugin-search-dir=. . --check",
    "build:content": "node scripts/generateContent.js",
    "build:progress": "node scripts/generateReadMeProgress.js",
@@ -68,7 +68,8 @@
    "typescript": "^4.9.4",
    "unified": "^10.1.2",
    "vite": "^4.0.4",
-    "vite-plugin-html": "^3.2.0"
+    "vite-plugin-html": "^3.2.0",
+    "vue": "^3.2.45"
  },
  "overrides": {
    "@stefanprobst/remark-shiki": {
@@ -76,9 +77,7 @@
    }
  },
  "lint-staged": {
-    "*.{js,jsx,ts,tsx,vue,svelte}": [
-      "prettier --write",
-      "eslint --cache --fix"
-    ]
+    "*.{js,jsx,ts,tsx,svelte,vue}": "eslint --cache --fix",
+    "*.{js,jsx,ts,tsx,svelte,vue,html,md,css,hbs}": "prettier --cache --write"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -51,6 +51,7 @@ specifiers:
  unified: ^10.1.2
  vite: ^4.0.4
  vite-plugin-html: ^3.2.0
+  vue: ^3.2.45

 dependencies:
  '@veljs/svelte': 0.1.11
@@ -105,6 +106,7 @@ devDependencies:
  unified: 10.1.2
  vite: 4.0.4
  vite-plugin-html: 3.2.0_vite@4.0.4
+  vue: 3.2.45

 packages:

@@ -1162,6 +1164,89 @@ packages:
      svelte: 3.55.0
    dev: false

+  /@vue/compiler-core/3.2.45:
+    resolution: {integrity: sha512-rcMj7H+PYe5wBV3iYeUgbCglC+pbpN8hBLTJvRiK2eKQiWqu+fG9F+8sW99JdL4LQi7Re178UOxn09puSXvn4A==}
+    dependencies:
+      '@babel/parser': 7.20.7
+      '@vue/shared': 3.2.45
+      estree-walker: 2.0.2
+      source-map: 0.6.1
+    dev: true
+
+  /@vue/compiler-dom/3.2.45:
+    resolution: {integrity: sha512-tyYeUEuKqqZO137WrZkpwfPCdiiIeXYCcJ8L4gWz9vqaxzIQRccTSwSWZ/Axx5YR2z+LvpUbmPNXxuBU45lyRw==}
+    dependencies:
+      '@vue/compiler-core': 3.2.45
+      '@vue/shared': 3.2.45
+    dev: true
+
+  /@vue/compiler-sfc/3.2.45:
+    resolution: {integrity: sha512-1jXDuWah1ggsnSAOGsec8cFjT/K6TMZ0sPL3o3d84Ft2AYZi2jWJgRMjw4iaK0rBfA89L5gw427H4n1RZQBu6Q==}
+    dependencies:
+      '@babel/parser': 7.20.7
+      '@vue/compiler-core': 3.2.45
+      '@vue/compiler-dom': 3.2.45
+      '@vue/compiler-ssr': 3.2.45
+      '@vue/reactivity-transform': 3.2.45
+      '@vue/shared': 3.2.45
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+      postcss: 8.4.20
+      source-map: 0.6.1
+    dev: true
+
+  /@vue/compiler-ssr/3.2.45:
+    resolution: {integrity: sha512-6BRaggEGqhWht3lt24CrIbQSRD5O07MTmd+LjAn5fJj568+R9eUD2F7wMQJjX859seSlrYog7sUtrZSd7feqrQ==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.45
+      '@vue/shared': 3.2.45
+    dev: true
+
+  /@vue/reactivity-transform/3.2.45:
+    resolution: {integrity: sha512-BHVmzYAvM7vcU5WmuYqXpwaBHjsS8T63jlKGWVtHxAHIoMIlmaMyurUSEs1Zcg46M4AYT5MtB1U274/2aNzjJQ==}
+    dependencies:
+      '@babel/parser': 7.20.7
+      '@vue/compiler-core': 3.2.45
+      '@vue/shared': 3.2.45
+      estree-walker: 2.0.2
+      magic-string: 0.25.9
+    dev: true
+
+  /@vue/reactivity/3.2.45:
+    resolution: {integrity: sha512-PRvhCcQcyEVohW0P8iQ7HDcIOXRjZfAsOds3N99X/Dzewy8TVhTCT4uXpAHfoKjVTJRA0O0K+6QNkDIZAxNi3A==}
+    dependencies:
+      '@vue/shared': 3.2.45
+    dev: true
+
+  /@vue/runtime-core/3.2.45:
+    resolution: {integrity: sha512-gzJiTA3f74cgARptqzYswmoQx0fIA+gGYBfokYVhF8YSXjWTUA2SngRzZRku2HbGbjzB6LBYSbKGIaK8IW+s0A==}
+    dependencies:
+      '@vue/reactivity': 3.2.45
+      '@vue/shared': 3.2.45
+    dev: true
+
+  /@vue/runtime-dom/3.2.45:
+    resolution: {integrity: sha512-cy88YpfP5Ue2bDBbj75Cb4bIEZUMM/mAkDMfqDTpUYVgTf/kuQ2VQ8LebuZ8k6EudgH8pYhsGWHlY0lcxlvTwA==}
+    dependencies:
+      '@vue/runtime-core': 3.2.45
+      '@vue/shared': 3.2.45
+      csstype: 2.6.21
+    dev: true
+
+  /@vue/server-renderer/3.2.45_vue@3.2.45:
+    resolution: {integrity: sha512-ebiMq7q24WBU1D6uhPK//2OTR1iRIyxjF5iVq/1a5I1SDMDyDu4Ts6fJaMnjrvD3MqnaiFkKQj+LKAgz5WIK3g==}
+    peerDependencies:
+      vue: 3.2.45
+    dependencies:
+      '@vue/compiler-ssr': 3.2.45
+      '@vue/shared': 3.2.45
+      vue: 3.2.45
+    dev: true
+
+  /@vue/shared/3.2.45:
+    resolution: {integrity: sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==}
+    dev: true
+
  /acorn-jsx/5.3.2_acorn@8.8.1:
    resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
    peerDependencies:
@@ -2052,6 +2137,10 @@ packages:
    hasBin: true
    dev: true

+  /csstype/2.6.21:
+    resolution: {integrity: sha512-Z1PhmomIfypOpoMjRQB70jfvy/wxT50qW08YXO5lMIJkrdq4yOTR+AW7FqutScmB9NkLwxo+jU+kZLbofZZq/w==}
+    dev: true
+
  /cuid/2.1.8:
    resolution: {integrity: sha512-xiEMER6E7TlTPnDxrM4eRiC6TRgjNX9xzEZ5U/Se2YJKr7Mq4pJn/2XEHjl3STcSh96GmkHPcBXLES8M29wyyg==}
    dev: false
@@ -6671,6 +6760,16 @@ packages:
      - supports-color
    dev: true

+  /vue/3.2.45:
+    resolution: {integrity: sha512-9Nx/Mg2b2xWlXykmCwiTUCWHbWIj53bnkizBxKai1g61f2Xit700A1ljowpTIM11e3uipOeiPcSqnmBg6gyiaA==}
+    dependencies:
+      '@vue/compiler-dom': 3.2.45
+      '@vue/compiler-sfc': 3.2.45
+      '@vue/runtime-dom': 3.2.45
+      '@vue/server-renderer': 3.2.45_vue@3.2.45
+      '@vue/shared': 3.2.45
+    dev: true
+
  /walk-sync/0.3.4:
    resolution: {integrity: sha512-ttGcuHA/OBnN2pcM6johpYlEms7XpO5/fyKIr48541xXedan4roO8cS1Q2S/zbbjGH/BarYDAMeS2Mi9HE5Tig==}
    dependencies: