docs

.gitignore

@@ -1,4 +1,3 @@
 node_modules
-lib
 .temp
 .cache

docs/.vitepress/config.js

@@ -0,0 +1,61 @@
+const base =
+  process.env.NODE_ENV === 'production' ? '/vitepress-for-component' : ''
+
+module.exports = {
+  lang: 'zh-CN',
+  title: 'princess-ui',
+  description: '一个自己开发的组件库，用于方便自己的开发',
+
+  base: '',
+  importMap: {
+    'vue-typical':
+      'https://cdn.jsdelivr.net/npm/vue-typical@2.1.0/dist/vue-typical.es.min.js'
+  },
+  themeConfig: {
+    repo: 'dewfall123/vitepress-for-component',
+    docsDir: 'docs',
+
+    editLinks: false,
+    editLinkText: '在Github上编辑此页面',
+
+    editLinks: false,
+    editLinkText: 'Edit this page on GitHub',
+    lastUpdated: '最近更新',
+
+    algolia: {
+      apiKey: 'c57105e511faa5558547599f120ceeba',
+      indexName: 'vitepress'
+    },
+
+    nav: [
+      { text: '指南', link: '/' },
+      {
+        text: '更新日志',
+        link:
+          'https://github.com/dewfall123/vitepress-for-component/blob/master/CHANGELOG.md'
+      }
+    ],
+
+    sidebar: getGuideSidebar()
+  }
+}
+
+function getGuideSidebar() {
+  return [
+    {
+      text: '介绍',
+      children: [
+        { text: '介绍', link: '/' },
+        { text: '开始', link: '/guide/getting-started' }
+      ]
+    },
+    {
+      text: '用法',
+      children: [
+        { text: '文件映射', link: '/guide/mapping' },
+        { text: '写Demo', link: '/guide/write-demo' },
+        { text: '配置', link: '/guide/config' }
+      ]
+    }
+  ]
+}

docs/.vitepress/theme/index.js

@@ -0,0 +1,10 @@
+import DefaultTheme from 'vitepress/dist/client/theme-default'
+
+export default {
+  ...DefaultTheme,
+
+  enhanceApp({ app, router, siteData }) {
+    // app is the Vue 3 app instance from `createApp()`. router is VitePress'
+    // custom router. `siteData`` is a `ref`` of current site-level metadata.
+  }
+}

docs/demo-example.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <!-- <v-typical
+      class="blink"
+      :steps="['Hello', 1000, 'Hello World !', 500, 'Hello World ! 👋', 1000]"
+      :loop="Infinity"
+      :wrapper="'h2'"
+    ></v-typical> -->
+
+    <p>
+      <span class="text">点击次数:</span>
+      <span>{{ count }}</span>
+    </p>
+    <button @click="onClick">count++</button>
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+// import VTypical from 'vue-typical'
+
+
+const count = ref(0)
+function onClick() {
+  count.value++
+}
+</script>
+
+<style>
+.text {
+  font-size: 14px;
+}
+</style>

docs/guide/config.md

@@ -0,0 +1,16 @@
+`VitePress` 配置地址[vitepress-config](https://vitepress.vuejs.org/config/basics.html).
+
+新增的配置如下：
+
+## srcIncludes
+
+- 类型：`string[]`
+- 默认: `['src']`
+
+配置扫描的文档目录，VFC 会尝试在配置的目录中递归寻找 `.md` 文件，然后映射到文档目录。
+
+## vitePlugins
+- 类型：`Plugin[]`
+- 默认: `[]`
+
+用户自定义的vitePlugins。

docs/guide/getting-started.md

@@ -0,0 +1,28 @@
+## 1. 使用脚手架 create-vlib
+
+快速创建 Vue 组件库的脚手架。
+
+```
+yarn create vlib
+```
+
+### Features
+
+- 基于[`vitepress-for-component`](https://github.com/dewfall123/vitepress-for-component.git)一键启动开发环境，一键生成文档。
+- 基于`vite`一键打包。
+- 使用[`np`](https://github.com/sindresorhus/np)发布版本（非常 nice 的发布工具）。
+- 使用`gh-pages`一键发布 github.io 文档。
+- 集成`eslint` `prettier` `ls-lint` 等 lint 工具。
+- 集成`husky` `conventional-changelog-cli`等工具。
+
+### 模板
+
+三种模板可以选择：
+
+- vue-multiple-components Vue 组件（多个）。
+- vue-single-component Vue 组件（单个）。
+- ts-lib TS 库。
+
+## 2. 不使用脚手架
+
+像 vitepress 一样使用即可。

docs/guide/mapping.md

@@ -0,0 +1,83 @@
+## 文件映射
+
+运行`yarn dev`后可以看到，VFC 会在 docs 目录里面生成一个`.temp`文件，`.temp`是 **当前 root 下所有文件** + **`config.srcIncludes`里面的`.md`文件** 映射结果。
+
+例如`yarn create vlib`生成的`.temp`文件结构如下：
+
+```
+.temp
+├── components
+│   ├── button
+│   │   └── index.md
+│   └── loading
+│       └── index.md
+├── en
+│   ├── components
+│   │   ├── button
+│   │   │   └── index.md
+│   │   └── loading
+│   │       └── index.md
+│   └── index.md
+├── index.md
+└── package.json
+```
+
+文件映射规则有两个:
+
+### 1. 根据`map.path`映射
+
+VFC 在启动服务前会根据`config.srcIncludes`(默认`[src]`)的目录，来扫描里面的`.md`文件。识别`.md`文件的`Front Matter`的`map.path`字段，这个 path 就是映射的目标地址。
+
+例如:
+
+`src\loading\index.en-US.md`
+
+```
+---
+map:
+  path: /components/loading
+---
+...
+```
+
+会被映射成`.temp\en\components\loading\index.md`。
+
+如果`src\loading\index.en-US.md`缺少`Front Matter`的`map.path`字段，会以当前路径映射到`.temp`里面，即`.temp\en\components\loading\index.md`。
+
+### 2. locale 后缀映射规则
+
+VFC 会根据 locale 配置生成一个`lang` -> `path`的映射表。
+
+例如模板项目里面的 locale 配置如下：
+docs\.vitepress\config.js
+
+```js
+{
+  lang: 'zh-CN',
+  ...
+  locales: {
+    '/': {
+      lang: 'zh-CN',
+      ...
+    },
+    '/en/': {
+      lang: 'en-US',
+      ...
+    }
+  }
+}
+```
+
+会生成这样的一个映射表:
+
+```js
+{ 'zh-CN: '/', 'en-US': '/en/', '': '/' }
+```
+
+映射例子:
+
+`/comp/foo.zh-CN.md` -> `/comp/foo.md`
+
+`/comp/foo.en-US.md` -> `/en/comp/foo.md`
+
+`/comp/foo.md ->` `/comp/foo.md`

docs/guide/write-demo.md

@@ -0,0 +1,43 @@
+## 写 Demo
+
+我们很赞同 [dumi 的 Demo 理念](https://d.umijs.org/zh-CN/guide/demo-principle)，并以它为标准来实现的 demo 功能。
+
+### demo 类型
+
+目前只支持了一种写 demo 的形式。
+
+```md
+<demo src="../demo-example.vue"
+  language="vue"
+  title="Demo演示"
+  desc="这是一个Demo渲染示例">
+</demo>
+```
+
+渲染效果如下
+<demo src="../demo-example.vue"
+  language="vue"
+  title="Demo演示"
+  desc="这是一个Demo渲染示例">
+</demo>
+
+### demo在线演示
+`v0.16.0`开始采用 `https://sfc.vuejs.org/`。
+
+很常见的需求是demo中会需要引入第三方库，此时需要在`.vitepress/config.js`传入 `importMap` 的配置项。
+
+例如: 
+```js
+// .vitepress/config.js
+module.exports = {
+  lang: 'zh-CN',
+  title: 'vitepress-for-component',
+  importMap: {
+    'vue-typical': 'https://cdn.jsdelivr.net/npm/vue-typical@2.1.0/dist/vue-typical.es.min.js'
+  },
+  ...
+}
+```
+
+`sfc.vuejs.org` 有以下限制:
+- 暂不支持 `lang="less"` `lang="ts"` 等需要编译的代码。

docs/index.md

@@ -0,0 +1,15 @@
+---
+title: 介绍
+---
+
+# princess-ui
+
+:::tip
+一个自己开发的组件库，用于方便自己的开发
+:::
+
+<demo src="./demo-example.vue"
+  language="vue"
+  title="Demo演示"
+  desc="这是一个Demo渲染示例">
+</demo>

docs/package.json

@@ -0,0 +1,12 @@
+{
+  "private": true,
+  "name": "@princess-ui/docs",
+  "scripts": {
+    "dev": "vitepress-fc dev .",
+    "build": "vitepress-fc build .",
+    "serve": "vitepress-fc serve ."
+  },
+  "dependencies": {
+    "vitepress-for-component": "^0.17.1"
+  }
+}

docs/public/_headers

@@ -0,0 +1,3 @@
+/assets/*
+  cache-control: max-age=31536000
+  cache-control: immutable

package.json

@@ -22,15 +22,16 @@
     "author": "",
     "license": "ISC",
     "devDependencies": {
-        "princess-ui": "workspace:*",
         "@princess-ui/build": "workspace:*",
-        "@princess-ui/playground": "workspace:*",
         "@princess-ui/components": "workspace:*",
+        "@princess-ui/docs": "workspace:*",
+        "@princess-ui/playground": "workspace:*",
         "@princess-ui/share": "workspace:*",
         "@princess-ui/theme-chalk": "workspace:*",
         "@types/gulp": "^4.0.9",
         "@types/node": "^17.0.35",
         "gulp": "^4.0.2",
+        "princess-ui": "workspace:*",
         "ts-node": "^10.8.0",
         "typescript": "^4.6.4",
         "unplugin-vue-components": "^0.19.5",

packages/build/buildComponent.ts

@@ -60,6 +60,7 @@ export default function (prefix: string, component: string, name: string, opts?:
                         },
                     },
                     {
+                        exports: "named",
                         name: name,
                         format: "umd",
                         globals: (id: string) => {

packages/components/components.ts

@@ -1,7 +1,9 @@
 // 该文件为自动生成，请勿修改！！！
 import PsButton from "./button"
 import PsFuck from "./fuck"
+import PsSend from "./send"
 export { 
   PsButton,
-  PsFuck 
+  PsFuck,
+  PsSend 
 }

packages/playground/components.d.ts

@@ -8,6 +8,8 @@ declare module '@vue/runtime-core' {
     HelloWorld: typeof import('./src/components/HelloWorld.vue')['default']
     PsButton: typeof import('@princess-ui/components/button')['PsButton']
     PsSend: typeof import('@princess-ui/components/send')['PsSend']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
   }
 }
 

packages/princess-ui/components.d.ts

@@ -1,7 +1,8 @@
 declare module 'vue' {
     export interface GlobalComponents {
-        PsButton: typeof import('./lib/button')['default'],
+        PsButton: typeof import('./lib/button')['PsButton'],
-        PsFuck: typeof import('./lib/fuck')['default']
+        PsFuck: typeof import('./lib/fuck')['PsFuck'],
+        PsSend: typeof import('./lib/send')['PsSend']
     }
 }
 export { }

packages/princess-ui/lib/button/index.d.ts

@@ -0,0 +1,21 @@
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes, PropType } from 'vue';
+declare const _sfc_main: DefineComponent<{
+    color: {
+        type: PropType<"blue" | "red">;
+        required: true;
+    };
+    aaa: {
+        type: PropType<"red" | "dd">;
+        required: true;
+    };
+}, unknown, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    color: {
+        type: PropType<"blue" | "red">;
+        required: true;
+    };
+    aaa: {
+        type: PropType<"red" | "dd">;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

packages/princess-ui/lib/button/index.js

@@ -0,0 +1,27 @@
+import { defineComponent, openBlock, createElementBlock, toDisplayString } from "vue";
+var index_vue_vue_type_style_index_0_lang = "";
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main = defineComponent({
+  props: {
+    color: {
+      type: String,
+      required: true
+    },
+    aaa: {
+      type: String,
+      required: true
+    }
+  }
+});
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", null, " sada" + toDisplayString(_ctx.color), 1);
+}
+var PsButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+PsButton.name = "ps-button";
+export { PsButton, PsButton as default };

packages/princess-ui/lib/button/index.umd.js

@@ -0,0 +1 @@
+(function(e,t){typeof exports=="object"&&typeof module!="undefined"?t(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],t):(e=typeof globalThis!="undefined"?globalThis:e||self,t(e.psButton={},e.Vue))})(this,function(e,t){"use strict";var c="",d=(n,i)=>{const r=n.__vccOpts||n;for(const[u,s]of i)r[u]=s;return r};const p=t.defineComponent({props:{color:{type:String,required:!0},aaa:{type:String,required:!0}}});function a(n,i,r,u,s,f){return t.openBlock(),t.createElementBlock("div",null," sada"+t.toDisplayString(n.color),1)}var o=d(p,[["render",a]]);o.name="ps-button",e.PsButton=o,e.default=o,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

packages/princess-ui/lib/button/style.css

@@ -0,0 +1 @@
+div{background-color:#639}div{color:red}

packages/princess-ui/lib/components.d.ts

@@ -0,0 +1,4 @@
+import PsButton from "./button";
+import PsFuck from "./fuck";
+import PsSend from "./send";
+export { PsButton, PsFuck, PsSend };

packages/princess-ui/lib/fuck/index.d.ts

@@ -0,0 +1,18 @@
+import type { DefineComponent, ComponentOptionsMixin, VNodeProps, AllowedComponentProps, ComponentCustomProps, ExtractPropTypes } from 'vue';
+declare const _sfc_main: DefineComponent<{
+    color: {
+        type: StringConstructor;
+        required: true;
+    };
+}, {
+    props: {
+        color: 'aaa';
+    };
+    PsButton: any;
+}, unknown, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, Record<string, any>, string, VNodeProps & AllowedComponentProps & ComponentCustomProps, Readonly<ExtractPropTypes<{
+    color: {
+        type: StringConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _sfc_main;

packages/princess-ui/lib/fuck/index.js

@@ -0,0 +1,22 @@
+import { defineComponent, openBlock, createElementBlock, createTextVNode, toDisplayString, createVNode, unref } from "vue";
+import PsButton from "princess-ui/lib/button";
+var index_vue_vue_type_style_index_0_lang = "";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  name: "index",
+  props: {
+    color: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createTextVNode(" sada" + toDisplayString(__props.color) + " ", 1),
+        createVNode(unref(PsButton), {
+          color: "red",
+          aaa: "red"
+        })
+      ]);
+    };
+  }
+});
+_sfc_main.name = "ps-fuck";
+export { _sfc_main as PsFuck, _sfc_main as default };

packages/princess-ui/lib/fuck/index.umd.js

@@ -0,0 +1 @@
+(function(t,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue"),require("princess-ui/lib/button")):typeof define=="function"&&define.amd?define(["exports","vue","princess-ui/lib/button"],e):(t=typeof globalThis!="undefined"?globalThis:t||self,e(t.psFuck={},t.Vue,t.psButton))})(this,function(t,e,o){"use strict";function i(n){return n&&typeof n=="object"&&"default"in n?n:{default:n}}var r=i(o),d="";const u=e.defineComponent({name:"index",props:{color:null},setup(n){return(c,s)=>(e.openBlock(),e.createElementBlock("div",null,[e.createTextVNode(" sada"+e.toDisplayString(n.color)+" ",1),e.createVNode(e.unref(r.default),{color:"red",aaa:"red"})]))}});u.name="ps-fuck",t.PsFuck=u,t.default=u,Object.defineProperties(t,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

packages/princess-ui/lib/fuck/style.css

@@ -0,0 +1 @@
+div{color:green}

packages/princess-ui/lib/index.d.ts

@@ -0,0 +1,7 @@
+export * from "./components";
+declare function install(app: any): void;
+export { install };
+declare const _default: {
+    install: typeof install;
+};
+export default _default;

packages/princess-ui/lib/index.js

@@ -0,0 +1,68 @@
+import { defineComponent, openBlock, createElementBlock, toDisplayString, createTextVNode, createVNode, unref } from "vue";
+var index_vue_vue_type_style_index_0_lang$2 = "";
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main$2 = defineComponent({
+  props: {
+    color: {
+      type: String,
+      required: true
+    },
+    aaa: {
+      type: String,
+      required: true
+    }
+  }
+});
+function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", null, " sada" + toDisplayString(_ctx.color), 1);
+}
+var PsButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["render", _sfc_render$1]]);
+PsButton.name = "ps-button";
+var index_vue_vue_type_style_index_0_lang$1 = "";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  name: "index",
+  props: {
+    color: null
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", null, [
+        createTextVNode(" sada" + toDisplayString(__props.color) + " ", 1),
+        createVNode(unref(PsButton), {
+          color: "red",
+          aaa: "red"
+        })
+      ]);
+    };
+  }
+});
+_sfc_main$1.name = "ps-fuck";
+var index_vue_vue_type_style_index_0_lang = "";
+const _sfc_main = {};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, " send ");
+}
+var PsSend = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+PsSend.name = "ps-send";
+var componets = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  PsButton,
+  PsFuck: _sfc_main$1,
+  PsSend
+}, Symbol.toStringTag, { value: "Module" }));
+function install(app) {
+  for (const key in componets) {
+    const component = componets[key];
+    app.component(component.name || "ps-" + key, component);
+  }
+}
+var index = {
+  install
+};
+export { PsButton, _sfc_main$1 as PsFuck, PsSend, index as default, install };

packages/princess-ui/lib/index.umd.js

@@ -0,0 +1 @@
+(function(n,e){typeof exports=="object"&&typeof module!="undefined"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(n=typeof globalThis!="undefined"?globalThis:n||self,e(n.ps={},n.Vue))})(this,function(n,e){"use strict";var g="",i=(t,o)=>{const r=t.__vccOpts||t;for(const[_,u]of o)r[_]=u;return r};const p=e.defineComponent({props:{color:{type:String,required:!0},aaa:{type:String,required:!0}}});function f(t,o,r,_,u,x){return e.openBlock(),e.createElementBlock("div",null," sada"+e.toDisplayString(t.color),1)}var c=i(p,[["render",f]]);c.name="ps-button";var k="";const s=e.defineComponent({name:"index",props:{color:null},setup(t){return(o,r)=>(e.openBlock(),e.createElementBlock("div",null,[e.createTextVNode(" sada"+e.toDisplayString(t.color)+" ",1),e.createVNode(e.unref(c),{color:"red",aaa:"red"})]))}});s.name="ps-fuck";var S="";const m={};function y(t,o){return e.openBlock(),e.createElementBlock("div",null," send ")}var a=i(m,[["render",y]]);a.name="ps-send";var d=Object.freeze(Object.defineProperty({__proto__:null,PsButton:c,PsFuck:s,PsSend:a},Symbol.toStringTag,{value:"Module"}));function l(t){for(const o in d){const r=d[o];t.component(r.name||"ps-"+o,r)}}var v={install:l};n.PsButton=c,n.PsFuck=s,n.PsSend=a,n.default=v,n.install=l,Object.defineProperties(n,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

packages/princess-ui/lib/send/index.js

@@ -0,0 +1,16 @@
+import { openBlock, createElementBlock } from "vue";
+var index_vue_vue_type_style_index_0_lang = "";
+var _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _sfc_main = {};
+function _sfc_render(_ctx, _cache) {
+  return openBlock(), createElementBlock("div", null, " send ");
+}
+var PsSend = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+PsSend.name = "ps-send";
+export { PsSend, PsSend as default };

packages/princess-ui/lib/send/index.umd.js

@@ -0,0 +1 @@
+(function(e,n){typeof exports=="object"&&typeof module!="undefined"?n(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],n):(e=typeof globalThis!="undefined"?globalThis:e||self,n(e.psSend={},e.Vue))})(this,function(e,n){"use strict";var f="",u=(d,o)=>{const s=d.__vccOpts||d;for(const[_,c]of o)s[_]=c;return s};const i={};function r(d,o){return n.openBlock(),n.createElementBlock("div",null," send ")}var t=u(i,[["render",r]]);t.name="ps-send",e.PsSend=t,e.default=t,Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

packages/princess-ui/lib/send/style.css

@@ -0,0 +1 @@
+div{color:gold}

packages/princess-ui/lib/style.css

@@ -0,0 +1 @@
+div{background-color:#639}div{color:red}div{color:green}div{color:gold}

pnpm-workspace.yaml

@@ -1,5 +1,6 @@
 packages:
   # all packages in subdirs of packages/ and components/
   - 'packages/*'
+  - 'docs'
   # exclude packages that are inside test directories
   - '!**/test/**'

readme.md

@@ -0,0 +1,4 @@
+## 组件库UI
+- https://zhuanlan.zhihu.com/p/450698973
+- https://github.com/dewfall123/vitepress-for-component/blob/master/package.json
+- https://d.umijs.org/zh-CN