Mika Online Compiler 是一个基于前端渲染的在线代码编辑器，支持实时编译和预览功能。该项目允许用户在浏览器中直接编写、编辑和预览 React 和 Vue 代码，无需本地开发环境即可快速体验前端开发。

• React 支持: 完整的 React 18 开发环境，支持 JSX 语法
• Vue 支持: Vue 3 单文件组件 (SFC) 支持，包含 template、script、style 块
• AngularJs 支持:AngularJS语法支持，支持完整MVVM模型逻辑。
• 支持其他如pug，svelte，preact，arttemplate前端框架及模板引擎

• React: 集成 Ant Design 组件库，提供丰富的 UI 组件
• Vue: 集成 Element Plus 组件库，支持完整的组件生态

• Monaco Editor: 基于 VS Code 的编辑器内核，提供完整的代码编辑体验
• 语法高亮: 支持 JavaScript、TypeScript、Vue、JSX 等多种语法
• 智能提示: 代码自动补全和错误检测
• 主题支持: 内置暗色主题，提供舒适的编码环境

• 实时编译: 代码修改后自动编译，无需手动刷新
• 热更新: 支持组件热重载，提升开发效率
• 沙箱预览: 使用 Shadow DOM 隔离预览环境，确保代码安全
• 模块解析: 智能处理文件依赖关系，支持组件间引用

• 文件树: 可视化的文件目录结构
• 文件操作: 创建、删除、重命名文件功能
• 本地存储: 使用 IndexedDB 持久化保存项目数据

• React 18: 主要 UI 框架
• MobX: 状态管理
• Monaco Editor: 代码编辑器
• Webpack 5: 模块打包工具
• Babel: JavaScript 编译器
• Vue-SFC-Loader: Vue 单文件组件加载器

• 代码转换: 使用 Babel Standalone 进行实时代码转换
• 模块解析: 自定义模块解析器处理文件依赖
• 组件热更新: 动态卸载和重新挂载组件实现热更新

src/
├── components/          # React 组件
│   ├── ctmain.tsx      # 主编辑器组件
│   ├── lftdir.tsx      # 左侧文件树
│   ├── rtview.tsx      # 右侧预览面板
│   └── vueCmpt/        # Vue 组件示例
├── utils/              # 工具函数
│   ├── index.js        # React 代码转换工具
│   ├── parseVue.js     # Vue 代码解析器
│   └── indexDb.js      # IndexedDB 操作
├── store/              # 状态管理
├── router/             # 路由配置
└── mock/               # 模拟数据

• Node.js >= 14.0.0
• npm 或 yarn

npm install
# 或
yarn install

npm run dev
# 或
yarn dev

npm run build
# 或
yarn build

1. 选择框架: 在界面中选择 React 或 Vue 开发模式
2. 创建文件: 使用文件树创建新的组件文件
3. 编写代码: 在 Monaco 编辑器中编写代码
4. 实时预览: 右侧预览面板会实时显示编译结果
5. 保存项目: 项目数据会自动保存到本地 IndexedDB

import React, { useState } from 'react';
import { Button, Card } from 'antd';

function App() {
	const [count, setCount] = useState(0);

	return (
		<Card title="React 计数器">
			<p>当前计数: {count}</p>
			<Button onClick={() => setCount(count + 1)}>点击增加</Button>
		</Card>
	);
}

export default App;

<template>
	<el-card title="Vue 计数器">
		<p>当前计数: {{ count }}</p>
		<el-button @click="increment">点击增加</el-button>
	</el-card>
</template>

<script>
import { ref } from 'vue';

export default {
	setup() {
		const count = ref(0);

		const increment = () => {
			count.value++;
		};

		return {
			count,
			increment
		};
	}
};
</script>

• 支持更多 UI 组件库 (Material-UI, Vuetify 等)
• 添加代码片段和模板功能
• 支持 CSS 预处理器 (Sass, Less)
• 集成代码格式化工具
• 添加项目导出功能
• 支持多人协作编辑
• 添加代码分享功能

欢迎提交 Issue 和 Pull Request 来帮助改进项目！

MIT License

• Monaco Editor
• @monaco-editor/react
• Ant Design
• Element Plus
• Vue 3
• React