feat: add packages/webcomponent use quark

zhangfisher · Apr 17, 2024 · d6f3029 · d6f3029
1 parent 6bea882
commit d6f3029
Show file tree

Hide file tree

Showing 13 changed files with 449 additions and 8 deletions.
diff --git a/docs/examples.md b/docs/examples.md
@@ -4,7 +4,7 @@
 
 支持采用`lite`或`json`格式来声明树形结构。
 
-### **使用`Lite`**格式
+### 使用`Lite`格式
 
 ```ts
 <LiteTree>
@@ -46,7 +46,7 @@ ts=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmc
 :::
 
 
-### **使用`JSON`**格式
+### 使用`JSON`格式
 
 ```vue
 <LiteTree :data="`

diff --git a/packages/quark/README.md b/packages/quark/README.md
@@ -0,0 +1,40 @@
+# Quark 组件
+
+基于本工程，您可以构建属于自己的跨技术栈/无框架 组件。
+
+## 如何使用
+
+```
+npm install
+npm run dev
+```
+
+入口文件为 `src/index.tsx`，这里使用 `vite` 进行开发和生产打包。
+
+## 打包产物
+
+```
+npm run build
+```
+
+打包后的产出为： `lib/index.js`和`lib/index.umd.cjs`。
+
+```tree
+.
+├── types
+|     └── install.d.ts
+├── index.js
+└── index.umd.js
+```
+
+## 使用产物
+
+无论是`Vue`，`React`，`Angular`还是`Jq`项目，该组件都可以被使用。
+
+```js
+import "my-component/lib";
+
+<my-component count="0" />;
+```
+
+详细文档，请访问：https://quarkc.hellobike.com/#/zh-CN/docs/publishing
diff --git a/packages/quark/index.html b/packages/quark/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Hello Quark</title>
+    <script type="module" src="./src/index.tsx"></script>
+    <style>
+      body {
+        margin: 0;
+        display: grid;
+        justify-content: center;
+      }
+      p {
+        text-align: center;
+      }
+      a{
+        color: #55bffe;
+      }
+    </style>
+  </head>
+  <body>
+    <lite-tree>
+  - A公司
+行政中心
+    总裁办              //   {color:red}important
+    人力资源部
+    财务部              //+
+    行政部              //+
+    法务部
+    审计部              //-
+    信息中心            //-
++ 市场中心
+    市场部
+    销售部
+    客服部
+    品牌部
+    市场策划部
+    市场营销部
+研发中心
+    移动研发部(java,python,go)    //!
+    平台研发部
+    测试部              //*
+    运维部              //*
+    产品部
+    设计部
+    </lite-tree>
+
+    <p>Edit <code>src/index.tsx</code> and save to test HMR</p>
+    <p><a href="/index.vue.html">在 Vue.js 中调试（Debugging in Vue.js）</a></p>
+  </body>
+</html>
diff --git a/packages/quark/index.vue.html b/packages/quark/index.vue.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Test in Vue.js</title>
+    <style>
+      body {
+        margin: 0;
+        display: grid;
+        justify-content: center;
+      }
+      p {
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <my-component :text="message"></my-component>
+    </div>
+
+    <p>Edit <code>src/index.tsx</code> and save to test HMR</p>
+  </body>
+  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+  <script type="module">
+    import "./src/index.tsx"
+
+    const { createApp } = Vue
+
+    createApp({
+      data() {
+        return {
+          message: '为跨技术栈而生！'
+        }
+      }
+    }).mount('#app')
+  </script>
+</html>
diff --git a/packages/quark/package.json b/packages/quark/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@lite-tree/quark",
+  "version": "0.0.1",
+  "scripts": {
+    "dev": "npm run start",
+    "start": "vite --open",
+    "build": "vite build --config vite.config.build.ts && tsc",
+    "prepublishOnly": "npm run build"
+  },
+  "type": "module",
+  "main": "./lib/index.umd.js",
+  "module": "./lib/index.js",
+  "types": "./lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.umd.js",
+      "types": "./lib/types/index.d.ts"
+    }
+  },
+  "keywords": [
+    "frontend",
+    "quark",
+    "web components"
+  ],
+  "dependencies": {
+    "classnames": "^2.5.1",
+    "quarkc": "^1.0.40"
+  },
+  "devDependencies": {
+    "@types/node": "^20.2.5",
+    "less": "^4.1.3",
+    "tslib": "^2.5.3",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.0"
+  },
+  "engines": {
+    "node": ">=14.18.0"
+  }
+}
diff --git a/packages/quark/src/index.less b/packages/quark/src/index.less
@@ -0,0 +1,71 @@
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  font-weight: 400;
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+}
+
+:host {
+  display: block;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+  border: 2px solid #646cff;
+  width: 500px;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+
+  &:hover {
+    filter: drop-shadow(0 0 2em #646cffaa);
+    transition: all 0.5s;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  cursor: pointer;
+  transition: border-color 0.25s;
+
+  &:hover {
+    border-color: #646cff;
+  }
+
+  &:focus,
+  &:focus-visible {
+    outline: 4px auto -webkit-focus-ring-color;
+  }
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
diff --git a/packages/quark/src/index.tsx b/packages/quark/src/index.tsx
@@ -0,0 +1,64 @@
+import { QuarkElement, property, customElement } from "quarkc";
+import { parseTree } from "@common/parsers";
+import { getIcon, injectCustomStyles, injectSvgIcons } from "@common/utils";
+import type { LiteTreeProps, LiteTreeNode } from "@common/types";
+import classnames from 'classnames'; 
+import style from  "@common/styles?inline"
+
+
+export
+@customElement({ tag: "lite-tree", style })
+class LiteTree extends QuarkElement {
+	@property({ type: Number })
+	indent = 4;
+	@property({ type: String })
+	format = "lite";
+	//是否显示标识
+	hasFlag: boolean = false;
+	// 树节点数据
+	nodes: LiteTreeNode[] = [];
+	// 声明的嵌入样式
+	inlineStyles: Record<string, string> = {};
+
+	componentDidMount() {
+		// 生命周期
+		const treeDefine = this.getInnerHTML();
+		const {
+			styles,
+			classs,
+			icons,
+			nodes = [],
+			hasFlag,
+		} = parseTree(treeDefine, { format: this.format as any});
+		this.hasFlag = hasFlag;
+		this.nodes = nodes;
+		this.inlineStyles = styles;
+		injectCustomStyles(classs);
+		injectSvgIcons(icons);
+	}
+	/**
+	 * 渲染节点
+	 * @param node
+	 */
+	renderNode(node) {
+    return <div>{node.title}</div>
+  }
+	renderLabel(content: string) {
+		return content;
+	}
+	render() {
+		return ( 
+      <div data-lite-tree className={classnames("lite-tree")}>
+          {this.nodes.map((node) => {
+              return this.renderNode(node);
+          })}                
+      </div> 
+		);
+	}
+}
+
+declare global {
+	interface HTMLElementTagNameMap {
+		"lite-tree": LiteTree;
+	}
+}
diff --git a/packages/quark/src/vite-env.d.ts b/packages/quark/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/packages/quark/tsconfig.json b/packages/quark/tsconfig.json
@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "strict": false,
+    "jsx": "react",
+    "jsxFactory": "QuarkElement.h",
+    "jsxFragmentFactory": "QuarkElement.Fragment",
+    "sourceMap": false,
+    "declaration": true,
+    "declarationDir": "lib/types",
+    "emitDeclarationOnly": true,
+    "removeComments": true,
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "experimentalDecorators": true,
+    "lib": ["esnext", "dom"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@common/*": ["../common/*"]
+    },
+  },
+  "include": ["src/**/*"],
+  "exclude": ["node_modules/**"]
+}
diff --git a/packages/quark/vite.config.build.ts b/packages/quark/vite.config.build.ts
@@ -0,0 +1,29 @@
+import { resolve } from "path";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  build: {
+    lib: {
+      entry: resolve("./src/index.tsx"),
+      formats: ["es", "umd"], // 打包输出格式，默认输出 esm/umd
+      fileName: (format, entryName) => {
+        if (format === "es") {
+          return `${entryName}.js`;
+        }
+
+        return `${entryName}.${format}.js`;
+      },
+      name: "MyComponent",
+    },
+    rollupOptions: {
+      external: ["quarkc"], // 可选项，是否将 quarkc 打包进组件
+      output: {
+        dir: "lib",
+        globals: {
+          quarkc: "Quarkc",
+        },
+      },
+    },
+  },
+});