准备工作

字数

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 element = (
  <div
    ref={(self) => {}}
    className={['foo', 'bar']}
    style={{ color: 'red' }}
    onClick={(e) => {
      e.preventDefault()
      console.log('clicked')
    }}
  >
    Hello, world!
  </div>
)
//      ↓ DOM API
element.add
EventListener('mouseover', (e) => {
})

关于 IPEModal

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

ctx.plugin({
  inject: ['modal'],
  apply(ctx) {
    const modal = ctx.modal
      .createObject({
        title: 'MyModal',
        content: (<div>hello, world</div>) as HTMLElement,
      })
      .init()
    modal.show()
    //    ^?
  },
})

关于 WikiSaikou

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

ctx.plugin({
  inject: ['api'],
  async apply(ctx) {
    const userInfo = await ctx.api.getUserInfo()
    //                         ^?
    console.info(userInfo.name)
  },
})

贡献者

暂无相关贡献者

查看完整历史