@mieditor/react

@mieditor/react

@mieditor/react 为 React + Vite 项目提供 UI Editor 开发期集成。插件会在 JSX/TSX 中注入 data-mi-editor-id，收集元素样式元数据，并提供编辑面板所需的开发服务器接口。

安装

npm install -D @mieditor/react

项目中还需要使用 Vite：

npm install -D vite @vitejs/plugin-react

基础用法

在 vite.config.ts 中加入插件：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { miEditorReact } from "@mieditor/react";

export default defineConfig({
  plugins: [miEditorReact(), react()],
});

如果同时使用 Tailwind Vite 插件，可以保持 UI Editor 在前：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import { miEditorReact } from "@mieditor/react";

export default defineConfig({
  plugins: [miEditorReact(), tailwindcss(), react()],
});

启动 Vite 开发服务器后，页面会自动加载编辑运行时和面板。

配置选项

miEditorReact({
  tailwind: {
    cssEntry: "src/index.css",
  },
  inject: "html",
});

• tailwind.cssEntry：指定 Tailwind 入口 CSS 文件。
• inject：控制脚本注入方式，支持 true、false、"html" 和 "middleware"。默认会通过 Vite transformIndexHtml 注入。

支持能力

• 为 React DOM 元素注入可编辑标识。
• 收集元素文件位置、标签名、行号和可回写样式目标。
• 回写 JSX inline style。
• 回写 CSS Modules。
• 回写普通 CSS 规则。
• 编辑静态和部分可解析的 className。
• 支持 SVG 样式属性回写。
• 支持 Tailwind 类名面板候选项。

可用导出

import { miEditorReact } from "@mieditor/react";
import { instrumentCode } from "@mieditor/react/instrumentation";
import {
  applyInlineStylePatch,
  applyClassNamePatchSmartFile,
} from "@mieditor/react/patchers";

多数业务项目只需要使用 miEditorReact()。

示例工程

仓库内示例：examples/react-vite-demo。

启动示例：

npm run dev:react

交流反馈

交流 QQ 群：1105427697

注意事项

• 插件仅在 Vite 开发服务器中生效。
• 任意运行时动态生成的 className 不能保证可回写。
• 文件被编辑器写入后会触发开发服务器更新，页面可能刷新。