init

3 years ago · 7fff45328d
36 changed files with 1745 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+node_modules
+lib
+.temp
+.cache
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false
--- a/components.d.ts
+++ b/components.d.ts
@ -0,0 +1,7 @@
+declare module 'vue' {
+    export interface GlobalComponents {
+        PsButton: typeof import('./lib/button')['default'],
+        PsTest: typeof import('./lib/test')['default']
+    }
+}
+export { }
--- a/gulpfile.ts/index.ts
+++ b/gulpfile.ts/index.ts
@ -0,0 +1,8 @@
+import { src, dest } from "gulp"
+
+async function defaultTask(cb) {
+    await src("packages/theme-chalk/**/*.scss").pipe(dest("lib"))
+    cb()
+}
+
+exports.default = defaultTask
--- a/gulpfile.ts/tsconfig.json
+++ b/gulpfile.ts/tsconfig.json
@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "lib": ["ES6", "DOM"],
+        "declaration": false,
+        "module": "commonjs"
+    },
+    "include": ["**/*"]
+}
--- a/package.json
+++ b/package.json
@ -0,0 +1,42 @@
+{
+    "private": true,
+    "workspaces": [
+        "packages/*"
+    ],
+    "files": [
+        "lib",
+        "components.d.ts",
+        "PrincessResolver.ts",
+        "PrincessResolver.js"
+    ],
+    "description": "",
+    "main": "index.js",
+    "scripts": {
+        "start": "pnpm run -C packages/components start",
+        "dev": "pnpm run -C packages/components dev",
+        "build": "pnpm run -C packages/build build && pnpm run -C packages/princess-ui build",
+        "gulp": "set TS_NODE_PROJECT=gulpfile.ts/tsconfig.json& gulp -f gulpfile.ts",
+        "release": "cd packages/princess-ui & npm publish"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "devDependencies": {
+        "princess-ui": "workspace:*",
+        "@princess-ui/build": "workspace:*",
+        "@princess-ui/components": "workspace:*",
+        "@princess-ui/share": "workspace:*",
+        "@princess-ui/theme-chalk": "workspace:*",
+        "@types/gulp": "^4.0.9",
+        "@types/node": "^17.0.35",
+        "gulp": "^4.0.2",
+        "ts-node": "^10.8.0",
+        "typescript": "^4.6.4",
+        "unplugin-vue-components": "^0.19.5",
+        "vue": "^3.2.36"
+    },
+    "peerDependencies": {
+        "unplugin-vue-components": "^0.19.5",
+        "vue": "^3.2.36"
+    }
+}
--- a/packages/build/build.ts
+++ b/packages/build/build.ts
@ -0,0 +1,35 @@
+import chalk from "chalk"
+import _ from "lodash"
+import rimraf from "rimraf"
+import * as util from "./util"
+
+import buildComponent from "./buildComponent"
+import buildAll from "./buildAll"
+import { getOutput, getPath, getPkgs } from "@princess-ui/share"
+
+process.cwd = ()=>{
+    return getPkgs()
+}
+console.log(chalk.yellow("正在清除lib文件夹"))
+rimraf(getOutput("lib"), async err => {
+    if (err) throw err
+    console.log(chalk.green("已清除lib文件夹"))
+    const components = await util.getComponents()
+    for (let i = 0; i < components.length; i++) {
+        const component = components[i]
+        const beginDate = new Date().getTime()
+        console.log(chalk.yellow(`开始构建${component}组件`))
+        await buildComponent("ps", component, "ps" + _.upperFirst(_.kebabCase(component)))
+        console.log(chalk.green(`构建${component}组件完成, 其耗时：${(new Date().getTime() - beginDate) / 1000}s`))
+    }
+    const beginDate = new Date().getTime()
+    console.log(chalk.yellow("构建组件结构"))
+    await util.generateComponents(components)
+    console.log(chalk.green("构建组件结构完成"))
+    console.log(chalk.yellow("构建全量包"))
+    await buildAll("ps")
+    console.log(chalk.green(`构建全量包完成, 其耗时：${(new Date().getTime() - beginDate) / 1000}s`))
+    process.cwd = ()=>{
+        return getPath()
+    }
+})
--- a/packages/build/buildAll.ts
+++ b/packages/build/buildAll.ts
@ -0,0 +1,74 @@
+import { build } from "vite"
+import vue from "@vitejs/plugin-vue"
+import path from "path"
+import dts from "vite-plugin-dts"
+import { replaceCodePlugin } from "vite-plugin-replace";
+import { getOutput, getPath, getPkgs } from "@princess-ui/share";
+
+export default function (name: string) {
+    return build({
+        logLevel: "error",
+        plugins: [
+            replaceCodePlugin({
+                replacements: [
+                  {
+                    from: "@princess-ui/components",
+                    to: "../",
+                  },
+                ],
+            }),
+            vue({ isProduction: true }),
+            dts({
+                entryRoot: `components`,
+                tsConfigFilePath: getPath("tsconfig.json"),
+                outputDir: getOutput("lib"),
+                cleanVueFileName: true,
+                include: ['components/index.ts', 'components/components.ts'],
+                staticImport: true,
+            }),
+        ],
+        build: {
+            outDir: getOutput("lib"),
+            emptyOutDir: false,
+            lib: {
+                entry: path.resolve(__dirname, `../components/index.ts`),
+                name: name,
+                formats: ["es", "umd"],
+                fileName: format => `index${format=='es'?'':'.umd'}.js`,
+            },
+            rollupOptions: {
+                // 确保外部化处理那些你不想打包进库的依赖
+                external: id => {
+                    if (/^vue/.test(id)) {
+                        return true
+                    }
+                    return false
+                },
+                output: [
+                    {
+                        format: "es",
+                        assetFileNames(chunkInfo) {
+                            if (chunkInfo.name == "style.css") {
+                                return `style.css`
+                            }
+                        },
+                        globals: (id: string) => {
+                            if (/^vue/.test(id)) {
+                                return "Vue"
+                            }
+                        },
+                    },
+                    {
+                        exports: "named",
+                        format: "umd",
+                        globals: (id: string) => {
+                            if (/^vue/.test(id)) {
+                                return "Vue"
+                            }
+                        },
+                    },
+                ],
+            },
+        },
+    })
+}
--- a/packages/build/buildComponent.ts
+++ b/packages/build/buildComponent.ts
@ -0,0 +1,80 @@
+import { build } from "vite"
+import vue from "@vitejs/plugin-vue"
+import path from "path"
+import dts from "vite-plugin-dts"
+import { replaceCodePlugin } from "vite-plugin-replace";
+// import libInjectCss from "./libInjectCss"
+import _ from "lodash"
+import { getOutput, getPath, getPkgs } from "@princess-ui/share";
+
+export default function (prefix: string, component: string, name: string, opts?: {}) {
+    return build({
+        logLevel: "error",
+        plugins: [
+            vue({ isProduction: true }),
+            dts({
+                entryRoot: `components/${component}`,
+                tsConfigFilePath: getPath("tsconfig.json"),
+                outputDir: getOutput(`lib/${component}`),
+                cleanVueFileName: true,
+                include: [`components/${component}/index.vue`],
+                staticImport: true,
+            }),
+            replaceCodePlugin({
+                replacements: [
+                    {
+                        from: "@princess-ui/components",
+                        to: "princess-ui/lib",
+                    },
+                ],
+            }),
+            // libInjectCss(),
+        ],
+        build: {
+            outDir: getOutput("lib"),
+            cssCodeSplit: false,
+            emptyOutDir: false,
+            lib: {
+                entry: path.resolve(__dirname, `../components/${component}/index.ts`),
+                name: name,
+                formats: ["es", "umd"],
+                fileName: format => `${component}/index${format == 'es' ? '' : '.umd'}.js`,
+            },
+            rollupOptions: {
+                external: id => {
+                    if (/^vue/.test(id)) {
+                        return true
+                    }
+                    if (/^princess-ui/.test(id)) {
+                        return true
+                    }
+                    return false
+                },
+                output: [
+                    {
+                        format: "es",
+                        assetFileNames(chunkInfo) {
+                            if (chunkInfo.name == "style.css") {
+                                return `${component}/style.css`
+                            }
+                        },
+                    },
+                    {
+                        name: name,
+                        format: "umd",
+                        globals: (id: string) => {
+                            if (/^vue/.test(id)) {
+                                return "Vue"
+                            }
+                            if (new RegExp(/^princess-ui/).test(id)) {
+                                let str = id.replace(/^princess\-ui\/lib\//, prefix)
+                                str = str.slice(0, 2) + str.slice(2)[0].toUpperCase() + str.slice(3)
+                                return str
+                            }
+                        },
+                    },
+                ],
+            },
+        },
+    })
+}
--- a/packages/build/libInjectCss.ts
+++ b/packages/build/libInjectCss.ts
@ -0,0 +1,66 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import fs from 'fs'
+import { resolve } from 'path'
+import type { ResolvedConfig, PluginOption } from 'vite'
+
+const fileRegex = /\.(css)$/
+const injectCode = (code: string) =>
+  `function styleInject(css,ref){if(ref===void 0){ref={}}var insertAt=ref.insertAt;if(!css||typeof document==="undefined"){return}var head=document.head||document.getElementsByTagName("head")[0];var style=document.createElement("style");style.type="text/css";if(insertAt==="top"){if(head.firstChild){head.insertBefore(style,head.firstChild)}else{head.appendChild(style)}}else{head.appendChild(style)}if(style.styleSheet){style.styleSheet.cssText=css}else{style.appendChild(document.createTextNode(css))}};styleInject(\`${code}\`)`
+const template = `console.warn("__INJECT__")`
+
+let viteConfig: ResolvedConfig
+const css: string[] = []
+
+export default function libInjectCss(): PluginOption {
+  return {
+    name: 'lib-inject-css',
+
+    apply: 'build',
+
+    configResolved(resolvedConfig: ResolvedConfig) {
+      viteConfig = resolvedConfig
+    },
+
+    transform(code: string, id: string) {
+      if (fileRegex.test(id)) {
+        css.push(code)
+        return {
+          code: '',
+        }
+      }
+      if (
+        // @ts-ignore
+        id.includes(viteConfig.build.lib.entry)
+      ) {
+        return {
+          code: `${code}
+          ${template}`,
+        }
+      }
+      return null
+    },
+
+    async writeBundle(_: any, bundle: any) {
+      for (const file of Object.entries(bundle)) {
+        const { root } = viteConfig
+        const outDir: string = viteConfig.build.outDir || 'dist'
+        const fileName: string = file[0]
+        const filePath: string = resolve(root, outDir, fileName)
+
+        try {
+          let data: string = fs.readFileSync(filePath, {
+            encoding: 'utf8',
+          })
+
+          if (data.includes(template)) {
+            data = data.replace(template, injectCode(css.join('\n')))
+          }
+
+          fs.writeFileSync(filePath, data)
+        } catch (e) {
+          console.error(e)
+        }
+      }
+    },
+  }
+}
--- a/packages/build/package.json
+++ b/packages/build/package.json
@ -0,0 +1,25 @@
+{
+  "name": "@princess-ui/build",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "module": "index.ts",
+  "scripts": {
+    "build": "ts-node build.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^2.3.3",
+    "chalk": "4.1.0",
+    "fast-glob": "^3.2.11",
+    "fs-extra": "^10.1.0",
+    "lodash": "^4.17.21",
+    "rimraf": "^3.0.2",
+    "vite": "^2.9.9",
+    "vite-plugin-dts": "^1.1.1",
+    "vite-plugin-replace": "^0.1.1",
+    "vue": "^3.2.36"
+  }
+}
--- a/packages/build/tsconfig.json
+++ b/packages/build/tsconfig.json
@ -0,0 +1,10 @@
+{
+    "compilerOptions": {
+        "allowSyntheticDefaultImports": true,
+        "esModuleInterop": true,
+        "module": "commonjs",
+        "lib": ["ES6", "DOM"],
+        "declaration": false,
+        "jsx": "preserve"
+    }
+}
--- a/packages/build/util.ts
+++ b/packages/build/util.ts
@ -0,0 +1,39 @@
+import glob from "fast-glob"
+import path from "path"
+import _ from "lodash"
+import fs from "fs-extra"
+import {getOutput, getPkgs, rootDir} from "@princess-ui/share"
+
+export async function getComponents() {
+    const res = await glob("components/*/index.ts", { cwd: path.resolve(__dirname, "..") })
+    const components = res.map(v => {
+        const name = path.parse(v.replace("components/", "")).dir
+        return name
+    })
+    return components
+}
+
+export async function generateComponents(components?: string[]) {
+    const componetnsStr: string[] = [`// 该文件为自动生成，请勿修改！！！`]
+    const newComp: string[] = []
+    const typeArray: string[] = []
+    let typeStr = `declare module 'vue' {
+    export interface GlobalComponents {
+        __placeholder__
+    }
+}
+export { }`
+    if (!components) {
+        components = await getComponents()
+    }
+    components.forEach(name => {
+        const n = "Ps" + _.upperFirst(_.kebabCase(name))
+        componetnsStr.push(`import ${n} from "./${name}"`)
+        newComp.push(n)
+        typeArray.push(n + `: typeof import('./lib/${name}')['default']`)
+    })
+    componetnsStr.push(`export { \n  ${newComp.join(",\n  ")} \n}`)
+    typeStr = typeStr.replace("__placeholder__", typeArray.join(',\n        '))
+    await fs.writeFile(getOutput("components.d.ts"), typeStr)
+    await fs.writeFile(getPkgs("components/components.ts"), componetnsStr.join("\n"))
+}
--- a/packages/components/button/aaa.css
+++ b/packages/components/button/aaa.css
@ -0,0 +1,3 @@
+div{
+    background-color: rebeccapurple;
+}
--- a/packages/components/button/index.ts
+++ b/packages/components/button/index.ts
@ -0,0 +1,4 @@
+import button from "./index.vue"
+button.name="ps-button"
+
+export default button
--- a/packages/components/button/index.vue
+++ b/packages/components/button/index.vue
@ -0,0 +1,30 @@
+<template>
+    <div>
+        sada{{ color }}
+    </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue"
+
+export default defineComponent({
+    props: {
+        color: {
+            type: String as PropType<'blue' | 'red'>,
+            required: true
+        },
+        aaa: {
+            type: String as PropType<'dd' | 'red'>,
+            required: true
+        },
+    },
+})
+</script>
+
+<style>
+@import "./aaa.css";
+
+div {
+    color: red;
+}
+</style>
--- a/packages/components/components.ts
+++ b/packages/components/components.ts
@ -0,0 +1,7 @@
+// 该文件为自动生成，请勿修改！！！
+import PsButton from "./button"
+import PsFuck from "./fuck"
+export { 
+  PsButton,
+  PsFuck 
+}
--- a/packages/components/fuck/index.ts
+++ b/packages/components/fuck/index.ts
@ -0,0 +1,3 @@
+import fuck from "./index.vue"
+fuck.name = "ps-fuck"
+export default fuck
--- a/packages/components/fuck/index.vue
+++ b/packages/components/fuck/index.vue
@ -0,0 +1,20 @@
+<template>
+    <div>
+        sada{{ color }}
+        <ps-button color="red" aaa="red"></ps-button>
+    </div>
+</template>
+
+<script setup lang="ts">
+import PsButton from "@princess-ui/components/button"
+
+const props = defineProps<{
+    color: 'aaa'
+}>()
+</script>
+
+<style>
+div{
+    color: green
+}
+</style>
--- a/packages/components/index.ts
+++ b/packages/components/index.ts
@ -0,0 +1,15 @@
+import * as componets from "./components"
+
+export * from "./components"
+
+function install(app) {
+    for (const key in componets) {
+        const component = componets[key]
+        app.component(component.name || "ps-" + key, component)
+    }
+}
+
+export { install }
+export default {
+    install
+}
--- a/packages/components/package.json
+++ b/packages/components/package.json
@ -0,0 +1,14 @@
+{
+  "name": "@princess-ui/components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "module": "index.ts",
+  "scripts": {
+    "start": "ts-node index.ts",
+    "dev": "ts-node ../../scripts/index.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
--- a/packages/playground/index.ts
+++ b/packages/playground/index.ts
@ -0,0 +1,3 @@
+import ff from "@noderun/components"
+
+console.log(ff);
--- a/packages/playground/package.json
+++ b/packages/playground/package.json
@ -0,0 +1,12 @@
+{
+  "name": "@princess-ui/playground",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "scripts": {
+      
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
--- a/packages/princess-ui/PrincessResolver.js
+++ b/packages/princess-ui/PrincessResolver.js
@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+exports.__esModule = true;
+var fs_1 = __importDefault(require("fs"));
+var path_1 = __importDefault(require("path"));
+function existCss(compName) {
+    if (fs_1["default"].existsSync(path_1["default"].resolve(__dirname, "./lib/" + compName[0].toLowerCase() + compName.slice(1) + "/style.css"))) {
+        return true;
+    }
+    return false;
+}
+exports["default"] = (function (name, p) {
+    if (name === void 0) { name = "princess-ui"; }
+    if (p === void 0) { p = "/lib"; }
+    return {
+        type: "component",
+        resolve: function (componentName) {
+            if (componentName.startsWith("Ps")) {
+                return {
+                    name: componentName,
+                    from: name,
+                    sideEffects: existCss(componentName.slice(2)) ? (function getSideEffects(compName) {
+                        return "".concat(name).concat(p, "/").concat(compName[0].toLowerCase() + compName.slice(1), "/style.css");
+                    })(componentName.slice(2)) : undefined
+                };
+            }
+        }
+    };
+});
--- a/packages/princess-ui/PrincessResolver.ts
+++ b/packages/princess-ui/PrincessResolver.ts
@ -0,0 +1,27 @@
+import fs from "fs"
+import path from "path"
+import type { ComponentResolver, SideEffectsInfo } from "unplugin-vue-components/types"
+
+function existCss(compName) {
+    if (fs.existsSync(path.resolve(__dirname, "./lib/" + compName[0].toLowerCase() + compName.slice(1) + "/style.css"))) {
+        return true
+    }
+    return false
+}
+
+export default (name: string = "princess-ui", p: string="/lib"): ComponentResolver => {
+    return {
+        type: "component",
+        resolve: (componentName: string) => {
+            if (componentName.startsWith("Ps")) {
+                return {
+                    name: componentName,
+                    from: name,
+                    sideEffects: existCss(componentName.slice(2)) ? (function getSideEffects(compName: string): SideEffectsInfo {
+                        return `${name}${p}/${compName[0].toLowerCase() + compName.slice(1)}/style.css`
+                    })(componentName.slice(2)) : undefined,
+                }
+            }
+        },
+    }
+}
--- a/packages/princess-ui/components.d.ts
+++ b/packages/princess-ui/components.d.ts
@ -0,0 +1,7 @@
+declare module 'vue' {
+    export interface GlobalComponents {
+        PsButton: typeof import('./lib/button')['default'],
+        PsFuck: typeof import('./lib/fuck')['default']
+    }
+}
+export { }
--- a/packages/princess-ui/package.json
+++ b/packages/princess-ui/package.json
@ -0,0 +1,22 @@
+{
+  "name": "princess-ui",
+  "version": "0.0.4",
+  "description": "a vue3 ui, just for personal use",
+  "scripts": {
+      "build": "tsc ./PrincessResolver.ts --skipLibCheck --esModuleInterop"
+  },
+  "files": [
+    "lib",
+    "components.d.ts",
+    "PrincessResolver.ts",
+    "PrincessResolver.js"
+  ],
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "keywords": [],
+  "author": "noderun",
+  "repository": {
+    "url": "http://git.xieyaxin.top/Oxygen/princess-ui"
+  },
+  "license": "ISC"
+}
--- a/packages/princess-ui/tsconfig.json
+++ b/packages/princess-ui/tsconfig.json
@ -0,0 +1,3 @@
+{
+    "extends": "../../tsconfig.json"
+}
--- a/packages/share/index.ts
+++ b/packages/share/index.ts
@ -0,0 +1,14 @@
+import path from "path"
+
+export const rootDir = path.resolve(__dirname, "../../")
+
+
+export function getOutput(...p: string[]) {
+    return path.resolve(rootDir, "packages/princess-ui",...p)
+}
+export function getPath(...p: string[]) {
+    return path.resolve(rootDir, ...p)
+}
+export function getPkgs(...p: string[]) {
+    return path.resolve(rootDir, "packages", ...p)
+}
--- a/packages/share/package.json
+++ b/packages/share/package.json
@ -0,0 +1,11 @@
+{
+  "name": "@princess-ui/share",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "module": "index.ts",
+  "scripts": {},
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
--- a/packages/theme-chalk/index.scss
+++ b/packages/theme-chalk/index.scss
--- a/packages/theme-chalk/package.json
+++ b/packages/theme-chalk/package.json
@ -0,0 +1,13 @@
+{
+  "name": "@princess-ui/theme-chalk",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.ts",
+  "module": "index.ts",
+  "scripts": {
+    "dev": "ts-node ../../scripts/index.ts"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC"
+}
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@ -0,0 +1,5 @@
+packages:
+  # all packages in subdirs of packages/ and components/
+  - 'packages/*'
+  # exclude packages that are inside test directories
+  - '!**/test/**'
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,21 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "module": "ESNext",
+        "target": "ES2018",
+        "noImplicitAny": false,
+        "declaration": true,
+        "sourceMap": true,
+        "moduleResolution": "Node",
+        "lib": ["ES2018", "DOM", "DOM.Iterable"],
+        "allowSyntheticDefaultImports": true
+    },
+    "include": ["packages", "typings"],
+    "exclude": [
+        "node_modules",
+        "**/dist",
+        "**/__tests__/**/*",
+        "**/test/**",
+        "**/tests/**"
+    ]
+}
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@ -0,0 +1 @@
+declare const __DEV__: boolean;