br-dionysus 0.0.1

package/script/genNewComp/infoCollector.js

@@ -0,0 +1,63 @@
+const inquirer = require('inquirer')
+const fs = require('fs-extra')
+const { resolve } = require('path')
+
+const listFilePath = '../../packages/list.json'
+
+const RegxMap = {
+  IS_COMP_NAME: /^[A-Z]/,
+  IS_COMP_ZH_NAME: /^(?:[\u3400-\u4DB5\u4E00-\u9FEA\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872\uD874-\uD879][\uDC00-\uDFFF]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1\uDEB0-\uDFFF]|\uD87A[\uDC00-\uDFE0])+$/
+}
+
+const kebabCase = string => string
+  .replace(/([a-z])([A-Z])/g, "$1-$2")
+  .replace(/[\s_]+/g, '-')
+  .toLowerCase();
+
+module.exports = async () => {
+  const meta = await inquirer
+    .prompt([
+      {
+        type: 'input',
+        message: '请输入你要新建的组件名（纯英文，大写开头）：',
+        name: 'compName',
+        validate(answer) {
+          const done = this.async()
+          const validateRes = RegxMap.IS_COMP_NAME.test(answer)
+          if (!validateRes) {
+            done('请按要求输入正确的组件名！')
+            return
+          }
+          const listData = fs.readJSONSync(resolve(__dirname, listFilePath))
+          if (listData.find(item => item.compName === answer)) {
+            done('已存在同名组件，请确认后更换名字再重试。')
+            return
+          }
+          done(null, true)
+        }
+      },
+      {
+        type: 'input',
+        message: '请输入你要新建的组件名（中文）：',
+        name: 'compZhName',
+        validate(answer) {
+          const done = this.async()
+          const validateRes = RegxMap.IS_COMP_ZH_NAME.test(answer)
+          if (!validateRes) {
+            done('请按要求输入正确的组件名！')
+            return
+          }
+          done(null, true)
+        }
+      },
+      {
+        type: 'input',
+        message: '请输入组件的功能描述：',
+        name: 'compDesc',
+        default: '默认：这是一个新组件'
+      }
+    ])
+  const { compName } = meta
+  meta.compClassName = kebabCase(compName)
+  return meta
+}

package/script/genNewComp/tplReplacer.js

@@ -0,0 +1,95 @@
+const fs = require('fs-extra')
+const handlebars = require('handlebars')
+const { resolve } = require('path')
+
+const getTplFilePath = (meta) => ({
+  // docs 目录
+  readme: {
+    from: './.template/docs/README.md.tpl',
+    to: `../../packages/${meta.compName}/docs/README.md`
+  },
+  demo: {
+    from: './.template/docs/demo.vue.tpl',
+    to: `../../packages/${meta.compName}/docs/demo.vue`
+  },
+  // src 目录
+  vue: {
+    from: './.template/src/index.vue.tpl',
+    to: `../../packages/${meta.compName}/src/index.vue`
+  },
+  // 根目录
+  install: {
+    from: './.template/index.ts.tpl',
+    to: `../../packages/${meta.compName}/index.ts`
+  },
+})
+
+const compFilesTplReplacer = (meta) => {
+  const filePaths = getTplFilePath(meta)
+  Object.keys(filePaths).forEach(key => {
+    const fileTpl = fs.readFileSync(resolve(__dirname, filePaths[key].from), 'utf-8')
+    const fileContent = handlebars.compile(fileTpl)(meta)
+    fs.outputFile(resolve(__dirname, filePaths[key].to), fileContent, err => {
+      if (err) console.log(err)
+    })
+  })
+}
+
+// 读取 packages/list.json 并更新
+const listJsonTplReplacer = (meta) => {
+  const listFilePath = '../../packages/list.json'
+  const listFileTpl = fs.readFileSync(resolve(__dirname, listFilePath), 'utf-8')
+  const listFileContent = JSON.parse(listFileTpl)
+  listFileContent.push(meta)
+  const newListFileContentFile = JSON.stringify(listFileContent, null, 2)
+  fs.writeFile(resolve(__dirname, listFilePath), newListFileContentFile, err => {
+    if (err) console.log(err)
+  })
+  return listFileContent
+}
+
+// 更新 router.ts
+const routerTplReplacer = (listFileContent) => {
+  const routerFileFrom = './.template/router.ts.tpl'
+  const routerFileTo = '../../src/router.ts'
+  const routerFileTpl = fs.readFileSync(resolve(__dirname, routerFileFrom), 'utf-8')
+  const routerMeta = {
+    routes: listFileContent.map(comp => {
+      return `{
+    title: '${comp.compZhName}',
+    name: '${comp.compName}',
+    path: '/components/${comp.compName}',
+    component: () => import('packages/${comp.compName}/docs/README.md'),
+  }`
+    })
+  }
+  const routerFileContent = handlebars.compile(routerFileTpl, { noEscape: true })(routerMeta)
+  fs.outputFile(resolve(__dirname, routerFileTo), routerFileContent, err => {
+    if (err) console.log(err)
+  })
+}
+
+// 更新 install.ts
+const installTsTplReplacer = (listFileContent) => {
+  const installFileFrom = './.template/install.ts.tpl'
+  const installFileTo = '../../packages/index.ts' // 这里没有写错，别慌
+  const installFileTpl = fs.readFileSync(resolve(__dirname, installFileFrom), 'utf-8')
+  const installMeta = {
+    importPlugins: listFileContent.map(({ compName }) => `import { ${compName}Plugin } from './${compName}';`).join('\n'),
+    installPlugins: listFileContent.map(({ compName }) => `${compName}Plugin.install?.(app);`).join('\n    '),
+    exportPlugins: listFileContent.map(({ compName }) => `export * from './${compName}'`).join('\n'),
+  }
+  const installFileContent = handlebars.compile(installFileTpl, { noEscape: true })(installMeta)
+  fs.outputFile(resolve(__dirname, installFileTo), installFileContent, err => {
+    if (err) console.log(err)
+  })
+}
+
+module.exports = (meta) => {
+  compFilesTplReplacer(meta)
+  const listFileContent = listJsonTplReplacer(meta)
+  routerTplReplacer(listFileContent)
+  installTsTplReplacer(listFileContent)
+
+  console.log(`组件新建完毕，请前往 packages/${meta.compName} 目录进行开发`);
+}

package/src/App.vue

@@ -0,0 +1,46 @@
+<template>
+  <div class="my-kit-doc">
+    <aside>
+      <router-link v-for="(link, index) in data.links" :key="index" :to="link.path">{{ link.name }}</router-link>
+    </aside>
+    <main>
+      <router-view></router-view>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import ComponentList from 'packages/list.json';
+import { reactive } from 'vue'
+
+const data = reactive({
+  links: ComponentList.map(item => ({
+    path: `/components/${item.compName}`,
+    name: item.compZhName
+  }))
+})
+</script>
+
+<style lang="less">
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+.my-kit-doc {
+  display: flex;
+  min-height: 100vh;
+  aside {
+    width: 200px;
+    padding: 15px;
+    border-right: 1px solid #ccc;
+    display: flex;
+    flex-direction: column;
+  }
+  main {
+    width: 100%;
+    flex: 1;
+    padding: 15px;
+  }
+}
+</style>

package/src/assets/markdown.css

@@ -0,0 +1,273 @@
+:root {
+    --side-bar-bg-color: #fff;
+    --control-text-color: #777;
+    --font-sans-serif: 'Ubuntu', 'Source Sans Pro', sans-serif !important;
+    --font-monospace: 'Fira Code', 'Roboto Mono', monospace !important;
+}
+
+html {
+    font-size: 16px;
+}
+
+body {
+    font-family: var(--font-sans-serif);
+    color: #34495e;
+    -webkit-font-smoothing: antialiased;
+    line-height: 1.6rem;
+    letter-spacing: 0;
+    margin: 0;
+    overflow-x: hidden;
+}
+
+body > *:first-child {
+    margin-top: 0 !important;
+}
+
+body > *:last-child {
+    margin-bottom: 0 !important;
+}
+
+a {
+    color: #42b983;
+    font-weight: 600;
+    padding: 0 2px;
+    text-decoration: none;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    position: relative;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+    font-weight: bold;
+    line-height: 1.4;
+    cursor: text;
+}
+
+h1:hover a.anchor,
+h2:hover a.anchor,
+h3:hover a.anchor,
+h4:hover a.anchor,
+h5:hover a.anchor,
+h6:hover a.anchor {
+    text-decoration: none;
+}
+
+h1 tt,
+h1 code {
+    font-size: inherit !important;
+}
+
+h2 tt,
+h2 code {
+    font-size: inherit !important;
+}
+
+h3 tt,
+h3 code {
+    font-size: inherit !important;
+}
+
+h4 tt,
+h4 code {
+    font-size: inherit !important;
+}
+
+h5 tt,
+h5 code {
+    font-size: inherit !important;
+}
+
+h6 tt,
+h6 code {
+    font-size: inherit !important;
+}
+
+h2 a,
+h3 a {
+    color: #34495e;
+}
+
+h1 {
+    padding-bottom: .4rem;
+    font-size: 2.2rem;
+    line-height: 1.3;
+}
+
+h2 {
+    font-size: 1.75rem;
+    line-height: 1.225;
+    margin: 35px 0 15px;
+    padding-bottom: 0.5em;
+    border-bottom: 1px solid #ddd;
+}
+
+h3 {
+    font-size: 1.4rem;
+    line-height: 1.43;
+    margin: 20px 0 7px;
+}
+
+h4 {
+    font-size: 1.2rem;
+}
+
+h5 {
+    font-size: 1rem;
+}
+
+h6 {
+    font-size: 1rem;
+    color: #777;
+}
+
+p,
+blockquote,
+ul,
+ol,
+dl,
+table {
+    margin: 0.8em 0;
+}
+
+li > ol,
+li > ul {
+    margin: 0 0;
+}
+
+hr {
+    height: 2px;
+    padding: 0;
+    margin: 16px 0;
+    background-color: #e7e7e7;
+    border: 0 none;
+    overflow: hidden;
+    box-sizing: content-box;
+}
+
+body > h2:first-child {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+body > h1:first-child {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+body > h1:first-child + h2 {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+body > h3:first-child,
+body > h4:first-child,
+body > h5:first-child,
+body > h6:first-child {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+a:first-child h1,
+a:first-child h2,
+a:first-child h3,
+a:first-child h4,
+a:first-child h5,
+a:first-child h6 {
+    margin-top: 0;
+    padding-top: 0;
+}
+
+h1 p,
+h2 p,
+h3 p,
+h4 p,
+h5 p,
+h6 p {
+    margin-top: 0;
+}
+
+li p.first {
+    display: inline-block;
+}
+
+ul,
+ol {
+    padding-left: 30px;
+}
+
+ul:first-child,
+ol:first-child {
+    margin-top: 0;
+}
+
+ul:last-child,
+ol:last-child {
+    margin-bottom: 0;
+}
+
+blockquote {
+    border-left: 4px solid #42b983;
+    padding: 10px 15px;
+    color: #777;
+    background-color: rgba(66, 185, 131, .1);
+}
+
+table {
+    padding: 0;
+    word-break: initial;
+}
+
+table tr {
+    border-top: 1px solid #dfe2e5;
+    margin: 0;
+    padding: 0;
+}
+
+table tr:nth-child(2n),
+thead {
+    background-color: #fafafa;
+}
+
+table tr th {
+    font-weight: bold;
+    border: 1px solid #dfe2e5;
+    border-bottom: 0;
+    text-align: left;
+    margin: 0;
+    padding: 6px 13px;
+}
+
+table tr td {
+    border: 1px solid #dfe2e5;
+    text-align: left;
+    margin: 0;
+    padding: 6px 13px;
+}
+
+table tr th:first-child,
+table tr td:first-child {
+    margin-top: 0;
+}
+
+table tr th:last-child,
+table tr td:last-child {
+    margin-bottom: 0;
+}
+
+code {
+    color: #476582;
+    padding: 0.25rem 0.5rem;
+    margin: 0;
+    font-size: .85em;
+    background-color: rgba(27,31,35,.05);
+    border-radius: 3px;
+}
+
+pre {
+    max-height: 500px;
+}