From 8679aec19ab0d608c45c2dcef4f9447da50542cc Mon Sep 17 00:00:00 2001
From: ningmengchongshui <916415899@qq.com>
Date: Mon, 10 Jun 2024 09:34:28 +0800
Subject: [PATCH] feat: react.js&tailwind
---
.gitignore | 6 +-
README.md | 158 +++++++++++++++++++++++++++++++++++++++--
index.js | 17 ++++-
md/developer.md | 117 ------------------------------
md/example.md | 83 ----------------------
package.json | 1 +
src/hello.tsx | 9 +++
src/input.css | 3 +
src/utils/component.ts | 44 ++++++++++++
src/utils/index.ts | 1 +
src/utils/types.ts | 24 +++----
tailwind.config.js | 12 ++++
tsconfig.json | 22 +++++-
13 files changed, 274 insertions(+), 223 deletions(-)
delete mode 100644 md/developer.md
delete mode 100644 md/example.md
create mode 100644 src/hello.tsx
create mode 100644 src/input.css
create mode 100644 src/utils/component.ts
create mode 100644 tailwind.config.js
diff --git a/.gitignore b/.gitignore
index 4b5cf7d..f14da90 100644
--- a/.gitignore
+++ b/.gitignore
@@ -146,7 +146,7 @@ yunzai
/pnpm-lock.yaml
/entrypoint.sh
-
+# mkdir
dist
-
-docs
\ No newline at end of file
+docs
+public
\ No newline at end of file
diff --git a/README.md b/README.md
index ee0c09d..f067baa 100644
--- a/README.md
+++ b/README.md
@@ -14,10 +14,6 @@
推荐使用`18.18.2`版本，如果系统不支持，最低要求`16.14.0`,这是新版`puppeteer`的限制
-## 开发者
-
-> [开发相关](./md/developer.md)
-
## 使用教程
- 安装源码
@@ -69,3 +65,157 @@ npm run start
```sh
npm run kill
```
+
+# 开发者需知
+
+支持TS、TSX环境，提供Miao-Yunzai完全的类型声明及其开发文档。
+
+- 提交
+
+```ts
+/**
+ * feature：新功能
+ * update：更新某功能
+ * fix：修补某功能
+ * refactor：重构某个功能
+ * optimize: 优化构建工具或运行时性能
+ * style：仅样式改动
+ * docs：仅文档新增/改动
+ * chore：构建过程或辅助工具的变动
+ */
+```
+
+- 注释风格
+
+```ts
+/**
+ * 返回false
+ * @param T 任意字符串
+ * @returns false
+ */
+function getTest(T: string) {
+ return false
+}
+```
+
+- 命名风格
+
+```ts
+// 获得test值
+function getTest(T: string) {}
+// 设置
+function setTest(T: string) {}
+// 删除
+function delTest(T: string) {}
+// 获取某数据依据为id
+function getDataById(T: string) {}
+
+// 系统常量
+const ENV_TEST = 'dev'
+
+// 局域常量
+const MyName = 'yunzai'
+
+// 可修改变量
+let values = ''
+
+// 禁止使用 var values = ''
+
+// 声明数组
+const Arr = []
+
+// 不推荐 new
+
+// 声明对象
+const Obj = {}
+
+// 不推荐new
+```
+
+## 关于lib目录
+
+lib目录将在未来逐渐放弃，在版本发布后，开发者需要有意识的对此变化做出调整.
+
+```ts
+// 已废弃
+--lib / puppeteer
+// 无扩展性，计划废弃
+--lib / renderer
+// 非机器人框架的核心处理代码
+// 消耗服务器内存，无扩展性，计划废弃
+--lib / tools / web.js / test.js / log.js / ksr.js
+// 计划废弃
+--renderers
+
+// 其他内容逐步优化。。。
+```
+
+## 新版目录
+
+- 核心源码 src/core
+
+- 配置管理 src/config
+
+- 数据管理 src/db
+
+- 接口板块 src/mys
+
+- 工具类 src/utils
+
+## 新开发示例
+
+- 消息回调
+
+```ts
+import { Messages } from './src/core/index.js'
+const message = new Messages({
+ priority: 9000
+})
+message.response(/^你好/, async e => {
+ e.reply('你好')
+})
+```
+
+- 图片组件
+
+你无需再写原生的html，React将为你进行组件和管理
+
+[学习 React.js](https://react.docschina.org/)
+
+你无需再写原生从css !
+
+tailwindcss将识别plugins目录下的tsx和jsx文件
+
+为你自动生成css , 存放在`./publick/output.css`
+
+[学习 tailwindcss](https://www.tailwindcss.cn/)
+
+> 创建组件
+
+```tsx
+import React from 'react'
+type PropsType = {
+ data: {
+ name: string
+ }
+}
+export default function App({ data }: PropsType) {
+ return Hello, ${data.name}!
+}
+```
+
+> 渲染数据
+
+```tsx
+import React from 'react'
+import Hello from './hello.tsx'
+const component =
+```
+
+## 生成开发文档
+
+```sh
+npm run docs
+```
+
+浏览器打开文件`docs/index.html`
diff --git a/index.js b/index.js
index 5a04b67..aaf90f2 100644
--- a/index.js
+++ b/index.js
@@ -1,6 +1,21 @@
-import { spawn } from 'child_process'
+import { exec, spawn } from 'child_process'
const argv = [...process.argv].splice(2)
const argvs = argv.join(' ').replace(/(\S+\.js|\S+\.ts)/g, '')
+
+/**
+ * **********
+ * 生成css文件
+ * **********
+ */
+exec(
+ 'tailwindcss -i ./src/input.css -o ./public/output.css',
+ (error, stdout, stderr) => {
+ if (error) {
+ //
+ }
+ }
+)
+
/**
* ***************
* 启动内部运行脚本
diff --git a/md/developer.md b/md/developer.md
deleted file mode 100644
index 01f66a4..0000000
--- a/md/developer.md
+++ /dev/null
@@ -1,117 +0,0 @@
-# 开发者需知
-
-未来将支持TS、TSX环境，提供Miao-Yunzai完全的类型声明及其开发文档。
-
-- 提交
-
-```ts
-/**
- * feature：新功能
- * update：更新某功能
- * fix：修补某功能
- * refactor：重构某个功能
- * optimize: 优化构建工具或运行时性能
- * style：仅样式改动
- * docs：仅文档新增/改动
- * chore：构建过程或辅助工具的变动
- */
-```
-
-- 注释风格
-
-```ts
-/**
- * 返回false
- * @param T 任意字符串
- * @returns false
- */
-function getTest(T: string) {
- return false
-}
-```
-
-- 命名风格
-
-```ts
-// 获得test值
-function getTest(T: string) {}
-// 设置
-function setTest(T: string) {}
-// 删除
-function delTest(T: string) {}
-// 获取某数据依据为id
-function getDataById(T: string) {}
-
-// 系统常量
-const ENV_TEST = 'dev'
-
-// 局域常量
-const MyName = 'yunzai'
-
-// 可修改变量
-let values = ''
-
-// 禁止使用 var values = ''
-
-// 声明数组
-const Arr = []
-
-// 不推荐 new
-
-// 声明对象
-const Obj = {}
-
-// 不推荐new
-```
-
-## 关于lib目录
-
-lib目录将在未来逐渐放弃，在版本发布后，开发者需要有意识的对此变化做出调整.
-
-```ts
-// 已废弃
---lib / puppeteer
-// 无扩展性，计划废弃
---lib / renderer
-// 非机器人框架的核心处理代码
-// 消耗服务器内存，无扩展性，计划废弃
---lib / tools / web.js / test.js / log.js / ksr.js
-// 计划废弃
---renderers
-
-// 其他内容逐步优化。。。
-```
-
-## 新版目录
-
-- 核心源码
-
-src/core
-
-- 配置管理
-
-src/config
-
-- 数据管理
-
-src/db
-
-- 接口板块
-
-src/mys
-
-- 工具类
-
-src/utils
-
-## 生成开发文档
-
-```sh
-npm run docs
-```
-
-浏览器打开文件`docs/index.html`
-
-## 新开发示例
-
-> [开发示例](./example.md)
diff --git a/md/example.md b/md/example.md
deleted file mode 100644
index e301b45..0000000
--- a/md/example.md
+++ /dev/null
@@ -1,83 +0,0 @@
-## 新开发示例
-
-- 消息回调
-
-```ts
-import { Messages } from './src/core/index.js'
-const message = new Messages({
- priority: 9000
-})
-message.response(/^你好/, async e => {
- e.reply('你好')
-})
-```
-
-- 图片组件
-
-```tsx
-import React from 'react'
-export default function App() {
- return (
-
-
-
-
-
-
-
-
- )
-}
-```
-
-```ts
-import React from 'react'
-import { renderToString } from 'react-dom/server'
-import { mkdirSync, writeFileSync } from 'fs'
-import { join } from 'path'
-// puppeteer
-import { Puppeteer } from './puppeteer.ts'
-// component
-import HelloComponent from './hello.tsx'
-//
-class Component {
- puppeteer: typeof Puppeteer.prototype
- #dir = ''
- constructor(dir: string) {
- this.puppeteer = new Puppeteer()
- this.#dir = dir
- mkdirSync(this.#dir, {
- recursive: true
- })
- }
- /**
- * 渲染字符串
- * @param element
- * @param name
- * @returns
- */
- create(element: React.ReactNode, dirs: string, name: string) {
- const html = renderToString(element)
- const dir = join(this.#dir, dirs)
- mkdirSync(dir, {
- recursive: true
- })
- const address = join(dir, name)
- writeFileSync(address, `${html}`)
- return address
- }
- /**
- * hello
- * @param _
- * @param name
- * @returns
- */
- hello() {
- return this.puppeteer.render(
- this.create(, 'hello', 'help.html')
- )
- }
-}
-```
diff --git a/package.json b/package.json
index 7a47f1c..db8f378 100644
--- a/package.json
+++ b/package.json
@@ -65,6 +65,7 @@
"eslint-plugin-promise": "^6.1.1",
"husky": "^9.0.11",
"nodemon": "^3.0.1",
+ "tailwindcss": "^3.4.3",
"prettier": "^3.0.3",
"rollup": "^4.16.4",
"ts-node": "^10.9.1",
diff --git a/src/hello.tsx b/src/hello.tsx
new file mode 100644
index 0000000..5ad2907
--- /dev/null
+++ b/src/hello.tsx
@@ -0,0 +1,9 @@
+import React from 'react'
+type PropsType = {
+ data: {
+ name: string
+ }
+}
+export default function App({ data }: PropsType) {
+ return Hello, ${data.name}!
+}
diff --git a/src/input.css b/src/input.css
new file mode 100644
index 0000000..b5c61c9
--- /dev/null
+++ b/src/input.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/src/utils/component.ts b/src/utils/component.ts
new file mode 100644
index 0000000..e1b8ced
--- /dev/null
+++ b/src/utils/component.ts
@@ -0,0 +1,44 @@
+import React from 'react'
+import { renderToString } from 'react-dom/server'
+import { mkdirSync, writeFileSync } from 'fs'
+import { join } from 'path'
+
+type ComponentCreateOpsionType = {
+ html_head?: string
+ html_name?: string
+ join_dir?: string
+ html_body?: string
+}
+
+/**
+ * ************
+ * 组件解析
+ * **********
+ */
+export class Component {
+ #dir = ''
+ constructor() {
+ this.#dir = join(process.cwd(), 'html')
+ mkdirSync(this.#dir, {
+ recursive: true
+ })
+ }
+ /**
+ * 渲染字符串
+ * @param element
+ * @param name
+ * @returns
+ */
+ create(element: React.ReactNode, options: ComponentCreateOpsionType) {
+ const str = renderToString(element)
+ const dir = join(this.#dir, options.join_dir)
+ mkdirSync(dir, { recursive: true })
+ const address = join(dir, options.html_name)
+ const DOCTYPE = ''
+ const head = `${options.html_head}`
+ const body = `${str}${options.html_body}`
+ const html = `${DOCTYPE}${head}${body}`
+ writeFileSync(address, html)
+ return address
+ }
+}
diff --git a/src/utils/index.ts b/src/utils/index.ts
index b17eec2..2d7c280 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -2,3 +2,4 @@ export * from './config.js'
export * from './puppeteer.js'
export * from './types.js'
export * from './common.js'
+export * from './component.js'
diff --git a/src/utils/types.ts b/src/utils/types.ts
index a63aae6..3500371 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,5 +1,5 @@
-import { type ScreenshotOptions, type PuppeteerLifeCycleEvent } from 'puppeteer'
-import queryString from 'querystring'
+// import { type ScreenshotOptions, type PuppeteerLifeCycleEvent } from 'puppeteer'
+// import queryString from 'querystring'
/**
*
@@ -16,13 +16,13 @@ export interface ScreenshotFileOptions {
/**
*
*/
-export interface ScreenshotUrlOptions {
- url: string
- time?: number
- rand?: ScreenshotOptions
- params?: queryString.ParsedUrlQueryInput
- tab?: string
- timeout?: number
- cache?: boolean
- waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[]
-}
+// export interface ScreenshotUrlOptions {
+// url: string
+// time?: number
+// rand?: ScreenshotOptions
+// params?: queryString.ParsedUrlQueryInput
+// tab?: string
+// timeout?: number
+// cache?: boolean
+// waitUntil?: PuppeteerLifeCycleEvent | PuppeteerLifeCycleEvent[]
+// }
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..5d843d2
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,12 @@
+// import { createRequire } from 'module'
+// const require = createRequire(import.meta.url)
+/**
+ * @type {import('tailwindcss').Config}
+ */
+export default {
+ content: ['./plugins/**/*.{jsx,tsx}', './src/**/*.{jsx,tsx}'],
+ theme: {
+ extend: {}
+ },
+ plugins: []
+}
diff --git a/tsconfig.json b/tsconfig.json
index 6d1403b..b25c255 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -4,14 +4,31 @@
"module": "ESNext",
"noImplicitAny": false,
"esModuleInterop": true,
- "moduleResolution": "node",
+ "moduleResolution": "bundler",
"removeComments": true,
"preserveConstEnums": true,
"ignoreDeprecations": "5.0",
"jsx": "react",
+ "noEmit": true,
+ "allowImportingTsExtensions": true,
"allowJs": false,
"suppressImplicitAnyIndexErrors": true,
"typeRoots": ["node_modules/@types"],
+
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "skipLibCheck": true,
+
+ /* Bundler mode */
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+
+ /* Linting */
+ // "strict": true, 严格模式
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true,
+
"paths": {
"#miao": ["./plugins/miao-plugin/components/index.js"],
"#miao.models": ["./plugins/miao-plugin/models/index.js"]
@@ -22,6 +39,5 @@
"transpileOnly": true,
"experimentalSpecifierResolution": "node"
},
- "include": ["plugins", "src"],
- "exclude": ["node_modules"]
+ "include": ["src", "src-koa", "src-image"]
}