@codelook/preview
v0.1.0
Published
A professional code preview component with support for React, Vue, and HTML
Maintainers
foundjReadme
@codelook/preview
一个专业的代码预览组件，支持 React、Vue 和纯 HTML 的实时预览。
特性
- 🚀 多框架支持：React、Vue、Angular、Svelte 和纯 HTML/CSS/JS
- 🎨 智能检测：自动检测代码类型和框架
- 🔥 实时预览：代码修改即时生效
- 📦 依赖管理：支持 npm 包的自动安装
- 🛡️ 安全沙箱：隔离的执行环境
- 🎯 TypeScript：完整的类型支持
- 🌙 主题支持：内置亮色/暗色主题
安装
npm install @codelook/preview
# 或
yarn add @codelook/preview
# 或
pnpm add @codelook/preview使用
基础用法
import { CodePreview } from '@codelook/preview';
function App() {
const code = `
function App() {
return <h1>Hello, World!</h1>;
}
export default App;
`;
return <CodePreview code={code} />;
}多文件项目
import { CodePreview } from '@codelook/preview';
function App() {
const files = {
'App.js': `
import './styles.css';
function App() {
return (
<div className="app">
<h1>Hello, World!</h1>
</div>
);
}
export default App;
`,
'styles.css': `
.app {
text-align: center;
padding: 20px;
font-family: sans-serif;
}
`,
'index.js': `
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);
`
};
return <CodePreview code={files} />;
}HTML 预览
import { CodePreview } from '@codelook/preview';
function App() {
const htmlCode = `
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
<style>
body {
font-family: Arial, sans-serif;
padding: 20px;
}
.button {
background: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>欢迎!</h1>
<button class="button" onclick="alert('你好!')">
点击我
</button>
</body>
</html>
`;
return <CodePreview code={htmlCode} language="html" />;
}高级配置
import { CodePreview } from '@codelook/preview';
function App() {
return (
<CodePreview
code={code}
theme="dark"
height="500px"
showToolbar={true}
showLineNumbers={true}
showConsole={true}
autoRun={true}
sandpackConfig={{
dependencies: {
"axios": "^1.6.0",
"lodash": "^4.17.21"
},
template: "react-ts"
}}
onReady={() => console.log('预览准备就绪')}
onError={(error) => console.error('预览错误:', error)}
onChange={(files) => console.log('文件改变:', files)}
/>
);
}API
CodePreview Props
| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| code | string \| CodeFiles | - | 要预览的代码 |
| language | Language | 自动检测 | 代码语言 |
| framework | Framework | 自动检测 | 使用的框架 |
| theme | Theme | 'light' | 主题设置 |
| height | string \| number | '400px' | 预览高度 |
| showToolbar | boolean | true | 显示工具栏 |
| showLineNumbers | boolean | true | 显示行号 |
| showConsole | boolean | false | 显示控制台 |
| autoRun | boolean | true | 自动运行 |
| onReady | () => void | - | 预览准备就绪回调 |
| onError | (error: PreviewError) => void | - | 错误回调 |
| onChange | (files: CodeFiles) => void | - | 代码改变回调 |
支持的语言
javascripttypescriptjsxtsxhtmlcssvue
支持的框架
reactvueangularvanilla(纯 JavaScript)svelte
进阶用法
使用 PreviewManager
import { PreviewManager } from '@codelook/preview';
const manager = new PreviewManager({
code: 'console.log("Hello, World!")',
language: 'javascript'
});
// 初始化
await manager.initialize(containerElement);
// 更新代码
manager.updateCode('console.log("Updated!")');
// 运行
manager.run();
// 销毁
await manager.destroy();自定义 Provider
import { BaseProvider } from '@codelook/preview';
class CustomProvider extends BaseProvider {
// 实现自定义预览逻辑
}开发
# 安装依赖
npm install
# 开发模式
npm run dev
# 构建
npm run build
# 测试
npm testLicense
MIT