Lexcubia
/
Miao-Yunzai
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: react.js&tailwind

This commit is contained in:
ningmengchongshui 2024-06-10 09:34:28 +08:00
parent 6b2e4a0738
commit 8679aec19a
13 changed files with 274 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
.gitignore vendored
View File

@ -146,7 +146,7 @@ yunzai
/pnpm-lock.yaml
/entrypoint.sh
# mkdir
dist
docs
docs
public

158
README.md
View File

@ -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 <div className="text-red-500 p-2 text-xl">Hello, ${data.name}!</div>
}
```
> 渲染数据
```tsx
import React from 'react'
import Hello from './hello.tsx'
const component = <Hello data={{ name: 'word' }} />
```
## 生成开发文档
```sh
npm run docs
```
浏览器打开文件`docs/index.html`

17
index.js
View File

@ -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) {
//
}
}
)
/**
* ***************
* 启动内部运行脚本

117
md/developer.md
View File

@ -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)

83
md/example.md
View File

@ -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 (
<html>
<head>
<link rel="stylesheet" href="../css/output.css"></link>
</head>
<body>
<div id="root">
<div className="text-red-500 p-2 text-xl">Hello, world!</div>
</div>
</body>
</html>
)
}
```
```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, `<!DOCTYPE html>${html}`)
return address
}
/**
* hello
* @param _
* @param name
* @returns
*/
hello() {
return this.puppeteer.render(
this.create(<HelloComponent />, 'hello', 'help.html')
)
}
}
```

1
package.json
View File

@ -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",

9
src/hello.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from 'react'
type PropsType = {
data: {
name: string
}
}
export default function App({ data }: PropsType) {
return <div className="text-red-500 p-2 text-xl">Hello, ${data.name}!</div>
}

3
src/input.css Normal file
View File

@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

44
src/utils/component.ts Normal file
View File

@ -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 = '<!DOCTYPE html>'
const head = `<head>${options.html_head}</head>`
const body = `<body>${str}${options.html_body}</body>`
const html = `${DOCTYPE}<html>${head}${body}</html>`
writeFileSync(address, html)
return address
}
}

1
src/utils/index.ts
View File

@ -2,3 +2,4 @@ export * from './config.js'
export * from './puppeteer.js'
export * from './types.js'
export * from './common.js'
export * from './component.js'

24
src/utils/types.ts
View File

@ -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[]
// }

12
tailwind.config.js Normal file
View File

@ -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: []
}

22
tsconfig.json
View File

@ -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"]
}