chore: 升级 monorepo 架构

.eslintrc.js

@@ -20,9 +20,9 @@ module.exports = {
       AMapUI: false
     },
     extends: [
+      'prettier',
       'plugin:vue/vue3-recommended',
       'plugin:@typescript-eslint/recommended',
-      'prettier',
       'plugin:prettier/recommended'
     ],
     rules: {

.gitignore

@@ -1,15 +1,5 @@
 .DS_Store
 node_modules/
-dist/
-example/dist/
-lib/
-es/
-umd/
-/types/
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-yarn.lock
 package-lock.json
 
 # Editor directories and files
@@ -18,5 +8,4 @@ package-lock.json
 *.suo
 *.ntvs*
 *.njsproj
-*.sln
+*.sln
-pnpm-lock.yaml

.prettierrc

@@ -2,5 +2,4 @@
   "semi": true,
   "singleQuote": false,
   "tabWidth": 2
-}
+}
-

commitlint.config.js

@@ -18,4 +18,4 @@ module.exports = {
       ]
     ],
   },
-};
+};

example/src/App.vue

@@ -1,3 +0,0 @@
-<template>
-  <router-view />
-</template>

example/src/entry-client.ts

@@ -1,7 +0,0 @@
-import { createApp } from './main'
-
-const { app, router } = createApp()
-
-router.isReady().then(() => {
-  app.mount('#app')
-})

example/src/locales/en_US.ts

@@ -1,15 +0,0 @@
-export default {
-    nav: {
-        home:"Home",
-        guide: "Guide",
-        components: "Components",
-        resources: "Resources",
-        material: "Material"
-    },
-    home: {
-        description: "An enterprise-class UI components based on Layui and Vue.",
-        version: "version",
-        changelog: "changelog",
-        download: "download"
-    }
-}

example/src/locales/zh_CN.ts

@@ -1,15 +0,0 @@
-export default {
-    nav: {
-        home:"首页",
-        guide: "指南",
-        components: "组件",
-        resources: "生态",
-        material: "物料"
-    },
-    home: {
-        description: "layui - vue（谐音：类 UI) 是 一 套 Vue 3.0 的 桌 面 端 组 件 库.",
-        version: "当前版本",
-        changelog: "更新日志",
-        download: "下载量"
-    }
-}

example/src/main.ts

@@ -1,29 +0,0 @@
-import Layout from './App.vue'
-import { App, createApp as _createApp } from 'vue'
-import { createRouter } from './router/index'
-import { Router } from 'vue-router'
-import layui from '../../src/index'
-import LayCode from './components/LayCode.vue'
-import LaySearch from './components/LaySearch.vue'
-import LayTableBox from './components/LayTableBox.vue'
-import LayAnchor from './components/LayAnchor.vue'
-import './assets/css/index.css'
-
-export function createApp(): {
-  app: App<Element>
-  router: Router
-} {
-  
-  const app = _createApp(Layout);
-  const router = createRouter();
-
-  app
-    .use(layui)
-    .use(router)
-    .component('LayCode', LayCode)
-    .component('LaySearch', LaySearch)
-    .component('LayTableBox', LayTableBox)
-    .component('LayAnchor',LayAnchor)
-
-  return { app, router }
-}

example/src/plugin/highlight.ts

@@ -1,44 +0,0 @@
-import prism from 'prismjs'
-import loadLanguages from 'prismjs/components/index'
-import escapeHtml from 'escape-html'
-
-loadLanguages(['markup', 'css', 'javascript'])
-
-function wrap(code: string, lang: string): string {
-  if (lang === 'text') {
-    code = escapeHtml(code)
-  }
-  return `<pre v-pre><code>${code}</code></pre>`
-}
-
-export default (str: string, lang: string): string => {
-  if (!lang) {
-    return wrap(str, 'text')
-  }
-  lang = lang.toLowerCase()
-  const rawLang = lang
-  if (lang === 'vue' || lang === 'html') {
-    lang = 'markup'
-  }
-  if (lang === 'md') {
-    lang = 'markdown'
-  }
-  if (lang === 'ts') {
-    lang = 'typescript'
-  }
-  if (lang === 'py') {
-    lang = 'python'
-  }
-  if (!prism.languages[lang]) {
-    try {
-      loadLanguages([lang])
-    } catch (e) {
-      console.warn(lang, e)
-    }
-  }
-  if (prism.languages[lang]) {
-    const code = prism.highlight(str, prism.languages[lang], lang)
-    return wrap(code, rawLang)
-  }
-  return wrap(str, 'text')
-}

example/src/plugin/pre-wrapper.ts

@@ -1,11 +0,0 @@
-import MarkdownIt from 'markdown-it'
-
-export default (md: MarkdownIt): void => {
-  const fence = md.renderer.rules.fence!
-  md.renderer.rules.fence = (...args) => {
-    const [tokens, idx] = args
-    const token = tokens[idx]
-    const rawCode = fence(...args)
-    return `<div class="language-${token.info.trim()}">${rawCode}</div>`
-  }
-}

example/src/plugin/snippet.ts

@@ -1,34 +0,0 @@
-import fs from 'fs'
-import MarkdownIt from 'markdown-it'
-import { RuleBlock } from 'markdown-it/lib/parser_block'
-
-export default (md: MarkdownIt): void => {
-  const parser: RuleBlock = (state, startLine, endLine, silent) => {
-    const CH = '<'.charCodeAt(0)
-    const pos = state.bMarks[startLine] + state.tShift[startLine]
-    const max = state.eMarks[startLine]
-    if (state.sCount[startLine] - state.blkIndent >= 4) {
-      return false
-    }
-    for (let i = 0; i < 3; ++i) {
-      const ch = state.src.charCodeAt(pos + i)
-      if (ch !== CH || pos + i >= max) return false
-    }
-    if (silent) {
-      return true
-    }
-    const start = pos + 3
-    const end = state.skipSpacesBack(max, pos)
-    const rawPath = state.src.slice(start, end).trim().replace(/^@/, process.cwd())
-    const content = fs.existsSync(rawPath) ? fs.readFileSync(rawPath).toString() : 'Not found: ' + rawPath
-    const meta = rawPath.replace(rawPath, '')
-    state.line = startLine + 1
-    const token = state.push('fence', 'code', 0)
-    token.info = rawPath.split('.').pop() + meta
-    token.content = content
-    token.markup = '```'
-    token.map = [startLine, startLine + 1]
-    return true
-  }
-  md.block.ruler.before('fence', 'snippet', parser)
-}

example/src/tsconfig.json

@@ -1,4 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "include": [".", "../../shims-vue.d.ts"]
-}

example/src/view/material.vue

@@ -1,158 +0,0 @@
-<template>
-  <div class="alone-banner">
-    <div class="layui-main">
-      <h1>物 料 市 场</h1>
-      <p class="layui-hide-xs">让 每 一 个 轮 子 产 生 价 值 ✨<a style="color:white;" href="https://gitee.com/layui-vue/layui-vue/issues/new?issue%5Bassignee_id%5D=0&issue%5Bmilestone_id%5D=0">【投递】</a></p>
-    </div>
-  </div>
-  <br />
-  <div class="layui-container" style="width: 80%">
-    <div class="layui-row layui-col-space16">
-      <div class="layui-col layui-col-md6">
-        <a href="https://github.com/rstacruz/nprogress">
-          <div class="project-list-item">
-          <img
-            class="project-list-item-cover"
-            src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
-          />
-
-          <div class="project-list-item-body">
-            <h2>vueUse</h2>
-            <div class="project-list-item-text layui-text">
-              Collection of essential Vue Composition Utilities for Vue 2 and 3
-            </div>
-            <div class="project-list-item-desc">
-              <span class="time">几秒前</span>
-              <div class="ew-head-list"></div>
-            </div>
-          </div>
-        </div>
-        </a>
-      </div>
-      <div class="layui-col layui-col-md6">
-        <a href="https://github.com/scopewu/qrcode.vue">
-          <div class="project-list-item">
-          <img
-            class="project-list-item-cover"
-            src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
-          />
-
-          <div class="project-list-item-body">
-            <h2>Qrcode.vue</h2>
-            <div class="project-list-item-text layui-text">
-              A Vue.js component to generate qrcode。
-            </div>
-            <div class="project-list-item-desc">
-              <span class="time">几秒前</span>
-              <div class="ew-head-list"></div>
-            </div>
-          </div>
-        </div>
-        </a>
-      </div>
-      <div class="layui-col layui-col-md6">
-        <a href="https://github.com/rstacruz/nprogress">
-          <div class="project-list-item">
-          <img
-            class="project-list-item-cover"
-            src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
-          />
-
-          <div class="project-list-item-body">
-            <h2>Nprogress</h2>
-            <div class="project-list-item-text layui-text">
-              For slim progress bars like on YouTube, Medium。
-            </div>
-            <div class="project-list-item-desc">
-              <span class="time">几秒前</span>
-              <div class="ew-head-list"></div>
-            </div>
-          </div>
-        </div>
-        </a>
-      </div>
-      <div class="layui-col layui-col-md6">
-        <a href="https://github.com/buuing/lucky-canvas">
-          <div class="project-list-item">
-          <img
-            class="project-list-item-cover"
-            src="https://gw.alipayobjects.com/zos/rmsportal/iZBVOIhGJiAnhplqjvZW.png"
-          />
-
-          <div class="project-list-item-body">
-            <h2>Lucky-Canvas</h2>
-            <div class="project-list-item-text layui-text">
-              转盘 / 九宫格 / 老虎机 / 抽奖插件。
-            </div>
-            <div class="project-list-item-desc">
-              <span class="time">几秒前</span>
-              <div class="ew-head-list"></div>
-            </div>
-          </div>
-        </div>
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-lucky-canvas
-
-<style>
-.alone-banner {
-  margin-top: 60px;
-  height: 190px;
-  text-align: center;
-  font-weight: 300;
-  color: #fff;
-}
-.alone-banner h1 {
-  padding-top: 60px;
-  line-height: 32px;
-  font-size: 30px;
-  font-weight: 300;
-  color: white !important;
-}
-.alone-banner p {
-  padding-top: 20px;
-  color: #e2e2e2;
-  color: rgba(255, 255, 255, 0.8);
-}
-
-.project-list-item {
-  background-color: #fff;
-  border-radius: 4px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-.project-list-item .project-list-item-cover {
-  width: 100%;
-  height: 180px;
-  display: block;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-}
-
-.project-list-item-body {
-  padding: 20px;
-  border: 1px solid #e8e8e8;
-}
-
-.project-list-item .project-list-item-body > h2 {
-  font-size: 16px;
-  color: #333;
-  margin-bottom: 12px;
-}
-
-.project-list-item .project-list-item-text {
-  height: 40px;
-  overflow: hidden;
-  margin-bottom: 12px;
-  font-size: 14px;
-}
-
-.project-list-item .project-list-item-desc .time {
-  color: #999;
-  font-size: 12px;
-}
-</style>

example/vite.config.ts

@@ -1,27 +0,0 @@
-import path from 'path'
-import { defineConfig } from 'vite'
-import plugins from './src/plugin/common-plugins'
-import pkg from '../package.json'
-
-export default defineConfig({
-  resolve: {
-    alias: {
-      '/@src': path.resolve(__dirname, './src'),
-    },
-  },
-  define: {
-    'import.meta.env.LAYUI_VUE_VERSION': JSON.stringify(pkg.version),
-  },
-  build: {
-    rollupOptions: {
-      output: {
-        manualChunks(id) {
-          if (id.includes("node_modules")) {
-            return id.toString().split("node_modules/")[1].split("/")[0].toString();
-          }
-        }
-      }
-    }
-  },
-  plugins,
-})

package.json

@@ -1,103 +1,41 @@
 {
-  "name": "@layui/layui-vue",
-  "version": "1.0.0",
-  "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
   "homepage": "http://www.layui-vue.com",
-  "main": "es/index.js",
-  "unpkg": "umd/index.js",
-  "jsdelivr": "umd/index.js",
-  "types": "types/index.d.ts",
-  "style": "lib/index.css",
-  "keywords": [
-    "layui-vue",
-    "layui",
-    "vue"
-  ],
-  "exports": {
-    ".": {
-      "import": "./es/index.js"
-    },
-    "./lib/": "./lib/",
-    "./es/": "./es/"
-  },
   "scripts": {
-    "dev": "vite example",
+    "dev": "pnpm -C ./package/document dev",
-    "build": "npm run build:all && npm run build:es && npm run build:umd && npm run build:types && npm run build:example",
+    "build": "pnpm -C ./package/component build",
-    "build:es": "vite build --emptyOutDir --config ./script/build.es.ts",
+    "build:icons": "pnpm -C ./package/iconfont build",
-    "build:all": "vite build --emptyOutDir --config ./script/build.all.ts",
+    "build:modal": "pnpm -C ./package/modal build",
-    "build:umd": "vite build --emptyOutDir --config ./script/build.umd.ts",
+    "build:document": "pnpm -C ./package/document build",
-    "build:types": "rimraf types && tsc -d",
+    "generate:icons": "pnpm -C ./package/iconfont generate",
-    "build:example": "vite build example",
+    "lint:eslint": "eslint 'package/**/*.{vue,ts,tsx}' --fix",
-    "lint:eslint": "eslint 'src/**/*.{vue,ts,tsx}' --fix",
+    "lint:prettier": "prettier --write \"package/**/*.{vue,ts}\"",
-    "lint:prettier": "prettier --write \"src/**/*.{vue,ts}\"",
-    "commit": "git add . && git-cz && git push",
     "prepare": "husky install"
   },
+  "dependencies": {
+    "@layui/layui-vue": "workspace:*",
+    "@layui/icons-vue": "workspace:*",
+    "@layui/layer-vue": "workspace:*",
+    "vue": "^3.2.31"
+  },
   "peerDependencies": {
     "vue": "^3.2.31"
   },
-  "dependencies": {
-    "@layui/icons-vue": "^1.0.7",
-    "@layui/layer-vue": "^1.3.11",
-    "@vueuse/core": "^7.6.2",
-    "async-validator": "^4.0.7",
-    "cropperjs": "^1.5.12",
-    "darkreader": "^4.9.46",
-    "evtd": "^0.2.3",
-    "moment": "^2.29.1",
-    "uuid": "^8.3.2",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.2.0-beta.33",
-    "vue-router": "^4.0.12",
-    "xlsx": "^0.18.4"
-  },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
-    "@babel/preset-env": "^7.15.8",
-    "@babel/preset-typescript": "^7.15.0",
-    "@babel/types": "7.17.0",
     "@commitlint/cli": "^16.2.1",
     "@commitlint/config-conventional": "^16.2.1",
-    "@rollup/plugin-babel": "^5.3.0",
-    "@types/markdown-it": "^12.2.3",
-    "@types/markdown-it-container": "^2.0.4",
-    "@types/node": "^16.11.9",
     "@typescript-eslint/eslint-plugin": "^5.8.0",
     "@typescript-eslint/parser": "^5.8.0",
-    "@vitejs/plugin-vue": "^1.9.3",
-    "@vue/compiler-sfc": "^3.2.31",
-    "@vue/server-renderer": "^3.2.31",
     "commitizen": "^4.2.4",
     "cz-conventional-changelog": "^3.3.0",
-    "escape-html": "^1.0.3",
     "eslint": "^8.5.0",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-vue": "^8.2.0",
     "husky": "^7.0.4",
-    "less": "^4.1.2",
+    "prettier": "^2.5.1"
-    "markdown-it-container": "^3.0.0",
-    "prettier": "^2.5.1",
-    "prismjs": "^1.25.0",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.66.1",
-    "typescript": "^4.5.5",
-    "vite": "2.7.13",
-    "vite-plugin-md": "^0.11.6"
   },
-  "files": [
-    "lib",
-    "es",
-    "umd",
-    "types"
-  ],
-  "browserslist": [
-    "current node",
-    "last 2 versions and > 2%",
-    "ie > 10"
-  ],
   "config": {
     "commitizen": {
       "path": "./node_modules/cz-conventional-changelog"

package/component/.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules/
+dist/
+example/dist/
+lib/
+es/
+umd/
+/types/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+yarn.lock
+package-lock.json
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+pnpm-lock.yaml

package/component/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "@layui/layui-vue",
+  "version": "1.0.0",
+  "author": "就眠儀式",
+  "license": "MIT",
+  "description": "a component library for Vue 3 base on layui-vue",
+  "homepage": "http://www.layui-vue.com",
+  "main": "es/index.js",
+  "unpkg": "umd/index.js",
+  "jsdelivr": "umd/index.js",
+  "types": "types/index.d.ts",
+  "style": "lib/index.css",
+  "keywords": [
+    "layui-vue",
+    "layui",
+    "vue"
+  ],
+  "exports": {
+    ".": {
+      "import": "./es/index.js"
+    },
+    "./lib/": "./lib/",
+    "./es/": "./es/"
+  },
+  "scripts": {
+    "build": "npm run build:all && npm run build:es && npm run build:umd && npm run build:types",
+    "build:es": "vite build --emptyOutDir --config ./script/build.es.ts",
+    "build:all": "vite build --emptyOutDir --config ./script/build.all.ts",
+    "build:umd": "vite build --emptyOutDir --config ./script/build.umd.ts",
+    "build:types": "rimraf types && tsc -d"
+  },
+  "dependencies": {
+    "@vueuse/core": "^7.6.2",
+    "async-validator": "^4.0.7",
+    "cropperjs": "^1.5.12",
+    "darkreader": "^4.9.46",
+    "evtd": "^0.2.3",
+    "moment": "^2.29.1",
+    "uuid": "^8.3.2",
+    "vue-i18n": "^9.2.0-beta.33",
+    "xlsx": "^0.18.4"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.15.8",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-typescript": "^7.15.0",
+    "@rollup/plugin-babel": "^5.3.0",
+    "@types/markdown-it": "^12.2.3",
+    "@types/markdown-it-container": "^2.0.4",
+    "@types/node": "^16.11.9",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "@vue/compiler-sfc": "^3.2.31",
+    "@vue/server-renderer": "^3.2.31",
+    "escape-html": "^1.0.3",
+    "less": "^4.1.2",
+    "markdown-it-container": "^3.0.0",
+    "prismjs": "^1.25.0",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.70.1",
+    "typescript": "^4.5.5",
+    "vite": "2.9.1",
+    "vite-plugin-md": "^0.11.6"
+  },
+  "files": [
+    "lib",
+    "es",
+    "umd",
+    "types"
+  ],
+  "browserslist": [
+    "current node",
+    "last 2 versions and > 2%",
+    "ie > 10"
+  ]
+}

package/component/script/build.all.ts

@@ -0,0 +1,38 @@
+import { UserConfigExport } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "path";
+
+export default (): UserConfigExport => {
+  return {
+    publicDir: false,
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: resolve(process.cwd(), "./"),
+        },
+      ],
+    },
+    plugins: [vue()],
+    build: {
+      cssCodeSplit: false,
+      outDir: "lib",
+      emptyOutDir: true,
+      lib: {
+        entry: resolve(process.cwd(), "./src/index.ts"),
+        name: "layui-vue",
+        formats: ["es"],
+        fileName: (name) => `index.js`,
+      },
+      rollupOptions: {
+        output: {
+          globals: {
+            vue: "Vue",
+          },
+          assetFileNames: "index.css",
+        },
+        external: ["vue"],
+      },
+    },
+  };
+};

package/component/script/build.es.ts

@@ -0,0 +1,67 @@
+import { UserConfigExport } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "path";
+import * as fs from "fs";
+
+const inputDir = resolve(process.cwd(), "./src/component");
+
+const inputsArray = fs.readdirSync(inputDir).filter((name) => {
+  const componentDir = resolve(inputDir, name);
+  const isDir = fs.lstatSync(componentDir).isDirectory();
+  return isDir && fs.readdirSync(componentDir).includes("index.ts");
+});
+
+const inputs = inputsArray.reduce((backObj, pkgName) => {
+  backObj[pkgName] = resolve(
+    process.cwd(),
+    `./src/component/${pkgName}/index.ts`
+  );
+  return backObj;
+}, {});
+
+inputs["index"] = resolve(process.cwd(), "./src/index.ts");
+
+export default (): UserConfigExport => {
+  return {
+    publicDir: false,
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: resolve(process.cwd(), "./"),
+        },
+      ],
+    },
+    css: {
+      preprocessorOptions: {
+        less: {
+          javascriptEnabled: true,
+        },
+      },
+      postcss: {},
+    },
+    plugins: [vue()],
+    build: {
+      cssCodeSplit: true,
+      emptyOutDir: true,
+      outDir: "es",
+      lib: {
+        entry: "./index.ts",
+        formats: ["es"],
+      },
+      rollupOptions: {
+        input: inputs,
+        output: {
+          globals: {
+            vue: "Vue",
+          },
+          entryFileNames: ({ name }) => {
+            return name === "index" ? "index.js" : "[name]/index.js";
+          },
+          assetFileNames: "[name]/index.css",
+        },
+        external: ["vue", "vue-router"],
+      },
+    },
+  };
+};

package/component/script/build.umd.ts

@@ -0,0 +1,38 @@
+import { UserConfigExport } from "vite";
+import vue from "@vitejs/plugin-vue";
+import { resolve } from "path";
+
+export default (): UserConfigExport => {
+  return {
+    publicDir: false,
+    resolve: {
+      alias: [
+        {
+          find: "@",
+          replacement: resolve(process.cwd(), "./"),
+        },
+      ],
+    },
+    plugins: [vue()],
+    build: {
+      cssCodeSplit: false,
+      outDir: "umd",
+      emptyOutDir: true,
+      lib: {
+        entry: resolve(process.cwd(), "./src/index.ts"),
+        name: "LayuiVue",
+        formats: ["umd"],
+        fileName: (name) => `index.js`,
+      },
+      rollupOptions: {
+        output: {
+          globals: {
+            vue: "Vue",
+          },
+          assetFileNames: "index.css",
+        },
+        external: ["vue"],
+      },
+    },
+  };
+};

package/component/shims-vue.d.ts

@@ -0,0 +1,25 @@
+declare module "*.vue" {
+  import { DefineComponent } from "vue";
+  const comp: DefineComponent;
+  export default comp;
+}
+
+declare module "*.md" {
+  import { DefineComponent } from "vue";
+  const comp: DefineComponent;
+  export default comp;
+}
+
+declare module "prismjs";
+declare module "prismjs/components/index";
+declare module "escape-html";
+
+interface ImportMeta {
+  env: {
+    MODE: string;
+    BASE_URL: string;
+    PROD: boolean;
+    DEV: boolean;
+    SSR: boolean;
+  };
+}