chore: update package.json scripts to include docs:publish command and modify publish-branch.js for improved error handling

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+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/.vuepress/config.ts

@@ -0,0 +1,11 @@
+export default {
+    base: "",
+    title: 'fake-art',
+    plugins: ['demo-container'],
+    themeConfig: {
+        nav: [
+            { text: 'Home', link: '/' }
+        ],
+        sidebar: {}
+    }
+}

docs/.vuepress/enhanceApp.js

@@ -0,0 +1,8 @@
+import { FakeComponents } from "fake-art"
+import "fake-art/dist/style.css"
+
+export default ({
+    Vue,
+}) => {
+    Vue.use(FakeComponents)
+}

docs/README.md

@@ -0,0 +1,29 @@
+# Hello fake-art
+
+Vue2组件展示
+
+::: demo 此处放置代码示例的描述信息，支持 `Markdown` 语法，**描述信息只支持单行**
+```html
+<template>
+  <div class="red-center-text">
+      <FakeButton>{{ message }}</FakeButton>
+      <input v-model="message" placeholder="Input something..."/>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      message: 'Hello Vue'
+    }
+  }
+}
+</script>
+<style>
+.red-center-text { 
+  color: #ff7875;
+  text-align: center;
+}
+</style>
+```
+:::

docs/guide/README.md

@@ -0,0 +1,29 @@
+# Hello VuePressasd
+
+组件展示
+
+::: demo 此处放置代码示例的描述信息，支持 `Markdown` 语法，**描述信息只支持单行**
+```html
+<template>
+  <div class="red-center-text">
+      <FakeButton>{{ message }}</FakeButton>
+      <input v-model="message" placeholder="Input something..."/>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      message: 'Hello Vue'
+    }
+  }
+}
+</script>
+<style>
+.red-center-text { 
+  color: #ff7875;
+  text-align: center;
+}
+</style>
+```
+:::

docs/guide/vue/README.md

@@ -0,0 +1 @@
+fuck

docs/guide/vue/test01.md

@@ -0,0 +1 @@
+# sda

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,27 +1,40 @@
 {
-    "name": "vaguer",
+    "name": "fake-art",
     "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"
-    },
+    "version": "0.0.1-alpha.1",
     "exports": {
         ".": {
-            "import": "./dist/vaguer.js",
-            "require": "./dist/vaguer.cjs"
+            "types": "./dist/index.d.ts",
+            "import": "./dist/fake-art.js",
+            "require": "./dist/fake-art.cjs"
         },
-        "./style.css": {
+        "./dist/style.css": {
             "import": "./dist/style.css",
             "require": "./dist/style.css"
         }
     },
+    "main": "./dist/fake-art.js",
+    "module": "./dist/fake-art.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",
+        "eslint": "eslint .",
+        "format": "eslint --fix .",
+        "publish": "pnpm build && npm publish",
+        "docs:dev": "vuepress dev docs",
+        "docs:build": "vuepress build docs",
+        "docs:publish": "pnpm docs:build && node scripts/publish-branch.js"
+    },
     "globals": {
         "vue": "Vue"
     },
@@ -29,14 +42,23 @@
         "vue": "<= 2.6.14"
     },
     "devDependencies": {
-        "vue": "2.6.14",
-        "vue-template-compiler": "2.6.14",
+        "@antfu/eslint-config": "4.13.2",
         "@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",
+        "fake-art": "npm:fake-art@0.0.1-alpha.1",
         "gh-pages": "^6.1.1",
+        "lefthook": "^2.0.4",
         "sass": "^1.77.0",
-        "somebuild": "^0.0.19"
+        "somebuild": "^0.0.19",
+        "vue": "2.6.14",
+        "vue-server-renderer": "2.6.14",
+        "vue-template-compiler": "2.6.14",
+        "vuepress": "^1.9.10",
+        "vuepress-plugin-demo-container": "^0.2.0"
     },
     "volta": {
         "node": "18.17.1",

playground/dev.ts

@@ -0,0 +1,24 @@
+import type { Component } from "vue"
+import Vue from "vue"
+import { FakeComponents } from "../src"
+import Layout from "./layout.vue"
+
+Vue.use(FakeComponents);
+
+(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>
+        <FakeButton>123</FakeButton>
+    </div>
+</template>

readme.md

@@ -1 +1,3 @@
-https://github.com/wheatjs/vaguer
+https://github.com/wheatjs/vaguer
+https://v1.vuepress.vuejs.org/zh/
+https://docs.chenjianhui.site/vuepress-plugin-demo-container/zh/complex.html#todomvc-%E7%A4%BA%E4%BE%8B

scripts/publish-branch.js

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

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",
@@ -24,7 +24,9 @@ export default defineRootConfig({
                             : {}),
                     },
                 },
+
+                ...(process.env.DEV ? { root: "./playground" } : {}),
             },
         },
     },
-});
+})

src/components/FakeButton/FakeButton.vue

@@ -0,0 +1,21 @@
+<script>
+export default {
+    data() {
+        return {
+            a: 123,
+        }
+    },
+}
+</script>
+
+<template>
+    <button class="fake-button">
+        <slot />
+    </button>
+</template>
+
+<style lang="scss">
+.fake-button {
+    color: red;
+}
+</style>

src/components/FakeButton/index.ts

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

src/components/VaguerButton/VaguerButton.vue

@@ -1,22 +0,0 @@
-
-<script>
-export default {
-  data(){
-    return {
-      a: 123
-    }
-  }
-}
-</script>
-
-<template>
-  <button class="vaguer-button">
-    <slot />-{{ a }}
-  </button>
-</template>
-
-<style lang="scss">
-.vaguer-button {
-  color: red;
-}
-</style>

src/components/VaguerButton/index.ts

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

src/components/index.ts

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

src/index.ts

@@ -1,14 +1,15 @@
-import type { PluginObject } from "vue";
+import type { PluginObject } from "vue"
 
-import * as components from "./components";
-export default components;
+import * as components from "./components"
 
-export const VaguerComponents: PluginObject<{}> = {
+export default components
+
+export const FakeComponents: 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 FakeButton } from "./components/FakeButton"

src/shims-vue.d.ts

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

tsconfig.json

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