112 lines
2.0 KiB
Markdown
112 lines
2.0 KiB
Markdown
|
# 开发者需知
|
|||
|
|
|
|||
|
|
该版本将支持TS、TSX环境，提供Miao-Yunzai完全的类型声明及其开发文档。
|
|||
|
|
|
|||
|
|
## 关于lib目录
|
|||
|
|
|
|||
|
|
lib目录将在未来逐渐放弃，在版本发布后，开发者需要有意识的对此变化做出调整.
|
|||
|
|
|
|||
|
|
```ts
|
|||
|
|
// 已废弃
|
|||
|
|
-- lib/puppeteer
|
|||
|
|
// 无扩展性，计划废弃
|
|||
|
|
-- lib/renderer
|
|||
|
|
// 非机器人框架的核心处理代码
|
|||
|
|
// 消耗服务器内存，无扩展性，计划废弃
|
|||
|
|
-- lib/tools
|
|||
|
|
/web.js
|
|||
|
|
/test.js
|
|||
|
|
/log.js
|
|||
|
|
/ksr.js
|
|||
|
|
// 计划废弃
|
|||
|
|
-- renderers
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 新版目录
|
|||
|
|
|
|||
|
|
- 核心源码
|
|||
|
|
|
|||
|
|
src/core
|
|||
|
|
|
|||
|
|
- 数据管理
|
|||
|
|
|
|||
|
|
src/db
|
|||
|
|
|
|||
|
|
- 接口板块
|
|||
|
|
|
|||
|
|
src/mys
|
|||
|
|
|
|||
|
|
- 工具类
|
|||
|
|
|
|||
|
|
src/utils
|
|||
|
|
|
|||
|
|
## 开发示例
|
|||
|
|
- 图片组件
|
|||
|
|
|
|||
|
|
```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 '../component/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')
|
|||
|
|
)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|