准备工作

字数

295 字

阅读时间

2 分钟

准备开发环境

我们采用 pnpm 作为包管理器。

• Node.js: >= 22.x
• pnpm: >= 10.x

1. 克隆项目仓库

git clone https://github.com/inpageedit/inpageedit-next.git
cd inpageedit-next

2. 安装依赖

pnpm install

3. 启动开发服务器

pnpm dev

项目结构

src/
├── components/         # 通用组件
├── plugins/            # 内置插件
├── services/           # 核心服务
├── types/              # TypeScript 类型定义
├── utils/              # 工具函数
├── InPageEdit.ts       # 主类
└── index.ts            # 入口文件

关于 TypeScript & TSX

InPageEdit NEXT 完全使用 TypeScript 编写，并使用了 TSX 语法。

然而这里的 TSX 并非使用了 React，而是基于 jsx-dom 使用 TSX 来编写原生 DOM 元素。

const  = (
  <
    ={() => {}}
    ={['foo', 'bar']}
    ={{ : 'red' }}
    ={() => {
      .()
      .('clicked')
    }}
  >
    Hello, world!
  </>
)
//      ↓ DOM API
.add('mouseover', () => {
})

关于 IPEModal

InPageEdit NEXT 使用 IPEModal 作为模态框组件。

.({
  : ['modal'],
  () {
    const  = .
      .({
        : 'MyModal',
        : (<>hello, world</>) as HTMLElement,
      })
      .()
    .()
  },
})

关于 WikiSaikou

InPageEdit NEXT 的 API 服务来自 wiki-saikou 提供的 MediaWiki HTTP API 封装。

.({
  : ['api'],
  async () {
    const  = await ..()
    .(.)
  },
})

贡献者

dragon-fish

最后编辑于 1 天前

查看完整历史

b85a4a1-docs: housekeeping

f432e79-perf: improve module exports, update docs

b212b8b-docs: update docs