refactor: update project structure and add ESLint configuration

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 dist
+docs/.vitepress/cache

.vscode/settings.json

@@ -0,0 +1,89 @@
+{
+    // Disable the default formatter, use eslint instead
+    "prettier.enable": false,
+    "editor.formatOnSave": false,
+    "eslint.format.enable": true,
+    // 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",
+        "json5",
+        "jsonc",
+        "yaml",
+        "toml",
+        "xml",
+        "gql",
+        "graphql",
+        "astro",
+        "svelte",
+        "css",
+        "less",
+        "scss",
+        "pcss",
+        "postcss"
+    ]
+}

dev.ts

@@ -1,14 +0,0 @@
-import Vue from "vue";
-import { VaguerComponents } from "./src";
-import "./dist/style.css"
-
-Vue.use(VaguerComponents);
-
-const app = new Vue({
-    methods: {
-        handleClick() {
-            alert("222");
-        },
-    },
-});
-app.$mount("#app");

docs/.vitepress/config.ts

@@ -0,0 +1,28 @@
+import { defineConfig } from "vitepress"
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig({
+    title: "vaguer",
+    description: "A Vue2 Component",
+    themeConfig: {
+    // https://vitepress.dev/reference/default-theme-config
+        nav: [
+            { text: "Home", link: "/" },
+            { text: "Examples", link: "/markdown-examples" },
+        ],
+
+        sidebar: [
+            {
+                text: "Examples",
+                items: [
+                    { text: "Markdown Examples", link: "/markdown-examples" },
+                    { text: "Runtime API Examples", link: "/api-examples" },
+                ],
+            },
+        ],
+
+        socialLinks: [
+            { icon: "github", link: "https://github.com/vuejs/vitepress" },
+        ],
+    },
+})

docs/api-examples.md

@@ -0,0 +1,49 @@
+---
+outline: deep
+---
+
+# Runtime API Examples
+
+This page demonstrates usage of some of the runtime APIs provided by VitePress.
+
+The main `useData()` API can be used to access site, theme, and page data for the current page. It works in both `.md` and `.vue` files:
+
+```md
+<script setup>
+import { useData } from 'vitepress'
+
+const { theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+```
+
+<script setup>
+import { useData } from 'vitepress'
+
+const { site, theme, page, frontmatter } = useData()
+</script>
+
+## Results
+
+### Theme Data
+<pre>{{ theme }}</pre>
+
+### Page Data
+<pre>{{ page }}</pre>
+
+### Page Frontmatter
+<pre>{{ frontmatter }}</pre>
+
+## More
+
+Check out the documentation for the [full list of runtime APIs](https://vitepress.dev/reference/runtime-api#usedata).

docs/index.md

@@ -0,0 +1,25 @@
+---
+# https://vitepress.dev/reference/default-theme-home-page
+layout: home
+
+hero:
+  name: "vaguer"
+  text: "A Vue2 Component"
+  tagline: My great project tagline
+  actions:
+    - theme: brand
+      text: Markdown Examples
+      link: /markdown-examples
+    - theme: alt
+      text: API Examples
+      link: /api-examples
+
+features:
+  - title: Feature A
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature B
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+  - title: Feature C
+    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
+---
+

docs/markdown-examples.md

@@ -0,0 +1,85 @@
+# Markdown Extension Examples
+
+This page demonstrates some of the built-in markdown extensions provided by VitePress.
+
+## Syntax Highlighting
+
+VitePress provides Syntax Highlighting powered by [Shiki](https://github.com/shikijs/shiki), with additional features like line-highlighting:
+
+**Input**
+
+````md
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+````
+
+**Output**
+
+```js{4}
+export default {
+  data () {
+    return {
+      msg: 'Highlighted!'
+    }
+  }
+}
+```
+
+## Custom Containers
+
+**Input**
+
+```md
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+```
+
+**Output**
+
+::: info
+This is an info box.
+:::
+
+::: tip
+This is a tip.
+:::
+
+::: warning
+This is a warning.
+:::
+
+::: danger
+This is a dangerous warning.
+:::
+
+::: details
+This is a details block.
+:::
+
+## More
+
+Check out the documentation for the [full list of markdown extensions](https://vitepress.dev/guide/markdown).

eslint.config.ts

@@ -0,0 +1,23 @@
+import antfu from "@antfu/eslint-config"
+
+export default antfu({
+    ignores: [
+        "dist",
+        "docs",
+    ],
+    typescript: true,
+    formatters: true,
+    yaml: false,
+    type: "lib",
+    stylistic: {
+        indent: 4,
+        quotes: "double",
+    },
+    vue: {
+        sfcBlocks: true,
+        vueVersion: 2,
+    },
+    rules: {
+        "node/prefer-global/process": "off",
+    },
+})

index.html

@@ -1,14 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Document</title>
-    </head>
-    <body>
-        <div id="app">
-            <vaguer-button @click.native="handleClick">aa</vaguer-button>
-        </div>
-        <script type="module" src="/dev.ts"></script>
-    </body>
-</html>

lefthook.yml

@@ -0,0 +1,6 @@
+pre-push:
+    parallel: true
+pre-commit:
+    jobs:
+        - name: check code
+          run: npx eslint .

package.json

@@ -1,16 +1,9 @@
 {
     "name": "vaguer",
     "type": "module",
-    "main": "./dist/vaguer.js",
-    "module": "./dist/vaguer.js",
-    "typings": "./dist/index.d.ts",
-    "scripts": {
-        "watch": "somebuild build --watch",
-        "dev": "somebuild dev",
-        "build": "somebuild build"
-    },
     "exports": {
         ".": {
+            "types": "./dist/index.d.ts",
             "import": "./dist/vaguer.js",
             "require": "./dist/vaguer.cjs"
         },
@@ -19,9 +12,29 @@
             "require": "./dist/style.css"
         }
     },
+    "main": "./dist/vaguer.js",
+    "module": "./dist/vaguer.js",
+    "typings": "./dist/index.d.ts",
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
     "files": [
         "dist"
     ],
+    "scripts": {
+        "postinstall": "lefthook install",
+        "watch": "somebuild build --watch",
+        "dev": "somebuild dev",
+        "build": "somebuild build",
+        "release": "pnpm build && node scripts/publish-branch.js",
+        "eslint": "eslint .",
+        "format": "eslint --fix .",
+        "publish": "pnpm build && npm publish",
+        "docs:dev": "vitepress dev docs",
+        "docs:build": "vitepress build docs",
+        "docs:preview": "vitepress preview docs"
+    },
     "globals": {
         "vue": "Vue"
     },
@@ -29,14 +42,20 @@
         "vue": "<= 2.6.14"
     },
     "devDependencies": {
-        "vue": "2.6.14",
+        "@antfu/eslint-config": "4.13.2",
-        "vue-template-compiler": "2.6.14",
         "@somebuild/build-component-vue2": "^0.0.6",
         "@somebuild/vite-config-vue2": "^1.0.1",
         "@types/node": "^20.12.10",
+        "eslint": "9.29.0",
+        "eslint-flat-config-utils": "2.1.0",
+        "eslint-plugin-format": "1.0.1",
         "gh-pages": "^6.1.1",
+        "lefthook": "^2.0.4",
         "sass": "^1.77.0",
-        "somebuild": "^0.0.19"
+        "somebuild": "^0.0.19",
+        "vitepress": "1.6.4",
+        "vue": "2.6.14",
+        "vue-template-compiler": "2.6.14"
     },
     "volta": {
         "node": "18.17.1",

playground/dev.ts

@@ -0,0 +1,24 @@
+import type { Component } from "vue"
+import Vue from "vue"
+import { VaguerComponents } from "../src"
+import Layout from "./layout.vue"
+
+Vue.use(VaguerComponents);
+
+(async () => {
+    // @ts-expect-error 由于@somebuild/build-component-vue2没有导出vite的类型导致glob无法识别，暂时忽略
+    const apps = import.meta.glob("./src/**/*.vue")
+    const name = location.pathname.replace(/^\//, "") || "App"
+    const file = apps[`./src/${name}.vue`]
+    if (!file) {
+        location.pathname = "App"
+        return
+    }
+
+    const App = ((await file()) as { default: Component }).default
+    const app = new Vue({
+        render: h => h(Layout, {}, [h(App)]),
+    })
+
+    app.$mount("#app")
+})()

playground/index.html

@@ -0,0 +1,24 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Playground</title>
+        <style>
+            html,
+            body,
+            #app {
+                width: 100%;
+                height: 100%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+            }
+        </style>
+    </head>
+
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/dev.ts"></script>
+    </body>
+</html>

playground/layout.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="layout-container">
+        <slot />
+    </div>
+</template>
+
+<style scoped>
+.layout-container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+</style>

playground/src/App.vue

@@ -0,0 +1,5 @@
+<template>
+    <div>
+        <VaguerButton>123</VaguerButton>
+    </div>
+</template>

scripts/publish-branch.js

@@ -1,10 +1,11 @@
-import ghpages from "gh-pages";
+import ghpages from "gh-pages"
 
 ghpages.publish(
     ".",
     { dotfiles: true, branch: "published", src: ["package.json", "dist/**/*"] },
-    function (err) {
+    (err) => {
-        if (err) throw err;
+        if (err)
-        console.log("success");
+            throw err
-    }
+        console.log("success")
-);
+    },
+)

somebuild.config.mts

@@ -1,12 +1,12 @@
-import { defineRootConfig } from "somebuild";
+import fs from "node:fs"
-import fs from "node:fs";
+import { defineRootConfig } from "somebuild"
 
-const loadJSON = (path) => JSON.parse(fs.readFileSync(new URL(path, import.meta.url), "utf8"));
+const loadJSON = path => JSON.parse(fs.readFileSync(new URL(path, import.meta.url), "utf8"))
 
-const json = loadJSON("./package.json");
+const json = loadJSON("./package.json")
 
 export default defineRootConfig({
-    mode: "component-vue2",
+    "mode": "component-vue2",
     "component-vue2": {
         less27: true,
         outDir: "./dist",
@@ -18,13 +18,16 @@ export default defineRootConfig({
             vite: {
                 resolve: {
                     alias: {
+                        "vaguer": process.env.DEV ? "./src/index.ts" : `./dist/${json.name}.js`,
                         "@": "./src",
                         ...(process.env.DEV
                             ? { vue: "vue/dist/vue.esm.js" }
                             : {}),
                     },
                 },
+
+                ...(process.env.DEV ? { root: "./playground" } : {}),
             },
         },
     },
-});
+})

src/components/VaguerButton/VaguerButton.vue

@@ -1,11 +1,10 @@
-
 <script>
 export default {
     data() {
         return {
-      a: 123
+            a: 123,
-    }
         }
+    },
 }
 </script>
 

src/components/VaguerButton/index.ts

@@ -1,6 +1,6 @@
 import VaguerButton from "./VaguerButton.vue"
 
 export {
-    VaguerButton
+    VaguerButton,
 }
 export default VaguerButton

src/components/index.ts

@@ -13,6 +13,6 @@
 // });
 
 // export default exportable;
-import VaguerButton from "./VaguerButton/VaguerButton.vue";
+import VaguerButton from "./VaguerButton/VaguerButton.vue"
 
-export { VaguerButton };
+export { VaguerButton }

src/index.ts

@@ -1,14 +1,15 @@
-import type { PluginObject } from "vue";
+import type { PluginObject } from "vue"
 
-import * as components from "./components";
+import * as components from "./components"
-export default components;
 
-export const VaguerComponents: PluginObject<{}> = {
+export default components
+
+export const VaguerComponents: PluginObject<object> = {
     install(app) {
         Object.entries(components).forEach(([key, value]: [string, any]) => {
-            app.component(key, value);
+            app.component(key, value)
-        });
+        })
     },
-};
+}
 
-export { default as VaguerButton } from "./components/VaguerButton";
+export { default as VaguerButton } from "./components/VaguerButton"

src/shims-vue.d.ts

@@ -1,5 +1,6 @@
-declare module '*.vue' {
+declare module "*.vue" {
-    import { DefineComponent } from 'vue'
+    import type { Component } from "vue"
-    const component: DefineComponent<{}, {}, any>
+
+    const component: Component
     export default component
 }

tsconfig.json

@@ -1,13 +1,15 @@
 {
     "compilerOptions": {
+        "baseUrl": ".",
         "module": "ESNext",
         "moduleResolution": "Bundler",
-        "resolveJsonModule": true,
-        "esModuleInterop": true,
-        "baseUrl": ".",
         "paths": {
+            "vaguer": ["./src/index.ts"],
             "@/*": ["./src/*"]
-        }
         },
-    "exclude": ["node_modules", ".output"]
+        "resolveJsonModule": true,
+        "esModuleInterop": true
+    },
+    "include": ["src", "playground"],
+    "exclude": ["node_modules", "dist"]
 }