Compiler Widget for React Flow/XYFlow

A customizable compiler widget with Monaco editor for React Flow and XYFlow diagrams.

Installation

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

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 (
    <div style={{ width: '100vw', height: '100vh' }}>
      <ReactFlow 
        nodes={initialNodes} 
        nodeTypes={nodeTypes}
      />
    </div>
  );
}

export default App; Props Prop Type Default Description id string required Node ID data.initialFiles Record<string, string> {} Initial files data.language 'csharp' | 'js' 'csharp' Default language setNodeHeight (id: string, height: number) => void optional Height callback text

10. Соберите и протестируйте

# В папке 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