A customizable compiler widget with Monaco editor for React Flow and XYFlow diagrams.
npm install compiler-widgetbash
npm install @yourname/compiler-widget
or
yarn add @yourname/compiler-widget
Peer Dependencies
Make sure you have these installed:
`json
{
"react": "^18.0.0",
"react-dom": "^18.0.0",
"@xyflow/react": "^0.1.0",
"@monaco-editor/react": "^4.0.0"
}
`
Usage
`tsx
import React from 'react';
import ReactFlow from '@xyflow/react';
import { CompilerWidget } from '@yourname/compiler-widget';
import '@xyflow/react/dist/style.css';`
`// Register the node type
const nodeTypes = {
compilerNode: CompilerWidget
};`
`const initialNodes = [
{
id: 'compiler-1',
type: 'compilerNode',
position: { x: 100, y: 100 },
data: {
initialFiles: {
'Program.cs': 'Console.WriteLine("Hello World!");'
},
language: 'csharp'
}
}
];`
`function App() {
return (
nodeTypes={nodeTypes}
/>
);
}
`
export default App;
Props
Prop Type Default Description
id string required Node ID
data.initialFiles Record {} Initial files
data.language 'csharp' | 'js' 'csharp' Default language
setNodeHeight (id: string, height: number) => void optional Height callback
text
10. Соберите и протестируйте
`bash
В папке packages/compiler-widget
npm install
npm run build
Проверьте структуру dist/
ls -la dist/
Должно быть: index.js, index.esm.js, index.d.ts, index.css
Локальная тестовая установка
npm link
В основном проекте
cd ../..
npm link @yourname/compiler-widget
``