refactor: update project structure and add ESLint configuration

1 week ago · c1ab2d8791
25 changed files with 4968 additions and 297 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1,2 +1,3 @@
 node_modules
 dist
 docs/.vitepress/cache
--- a/.vscode/settings.json
+++ b/.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"
    ]
 }
--- a/dev.ts
+++ b/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");
--- a/docs/.vitepress/config.ts
+++ b/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" },
        ],
    },
 })
--- a/docs/api-examples.md
+++ b/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).
--- a/docs/index.md
+++ b/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
 ---
--- a/docs/markdown-examples.md
+++ b/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).
--- a/eslint.config.ts
+++ b/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",
    },
 })
--- a/index.html
+++ b/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>
--- a/lefthook.yml
+++ b/lefthook.yml
@ -0,0 +1,6 @@
 pre-push:
    parallel: true
 pre-commit:
    jobs:
        - name: check code
          run: npx eslint .
--- a/package.json
+++ b/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",
--- a/playground/dev.ts
+++ b/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")
 })()
--- a/playground/index.html
+++ b/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>
--- a/playground/layout.vue
+++ b/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>
--- a/playground/src/App.vue
+++ b/playground/src/App.vue
@ -0,0 +1,5 @@
 <template>
    <div>
        <VaguerButton>123</VaguerButton>
    </div>
 </template>
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/scripts/publish-branch.js
+++ b/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")
-);
+    },
 )
--- a/somebuild.config.mts
+++ b/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" } : {}),
            },
        },
    },
-});
+})
--- a/src/components/VaguerButton/VaguerButton.vue
+++ b/src/components/VaguerButton/VaguerButton.vue
@ -1,22 +1,21 @@
 <script>
 export default {
-  data(){
+    data() {
-    return {
+        return {
-      a: 123
+            a: 123,
-    }
+        }
-  }
+    },
 }
 </script>
 <template>
-  <button class="vaguer-button">
+    <button class="vaguer-button">
-    <slot />-{{ a }}
+        <slot />-{{ a }}
-  </button>
+    </button>
 </template>
 <style lang="scss">
 .vaguer-button {
-  color: red;
+    color: red;
 }
 </style>
--- a/src/components/VaguerButton/index.ts
+++ b/src/components/VaguerButton/index.ts
@ -1,6 +1,6 @@
 import VaguerButton from "./VaguerButton.vue"
 export {
-    VaguerButton
+    VaguerButton,
 }
 export default VaguerButton
--- a/src/components/index.ts
+++ b/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 }
--- a/src/index.ts
+++ b/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"
--- a/src/shims-vue.d.ts
+++ b/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
-  }
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -1,13 +1,15 @@
 {
    "compilerOptions": {
        "baseUrl": ".",
        "module": "ESNext",
        "moduleResolution": "Bundler",
        "resolveJsonModule": true,
        "esModuleInterop": true,
        "baseUrl": ".",
        "paths": {
            "vaguer": ["./src/index.ts"],
            "@/*": ["./src/*"]
-        }
+        },
        "resolveJsonModule": true,
        "esModuleInterop": true
    },
-    "exclude": ["node_modules", ".output"]
+    "include": ["src", "playground"],
    "exclude": ["node_modules", "dist"]
 }