"use client";
import * as BI from ".";
import useWebhook from "./hooks/websocket";
const initialNodes = [
    {
        id: '1', position: { x: 0, y: 0 }, data: { label: '1' }, width: 150, height: 40
    },
    {
        id: '2', position: { x: 0, y: 0 }, data: { label: '2' }, width: 150, height: 40
    }
];

const initialEdges = [{ id: 'e1-2', source: '1', target: '2' }];

export default function Page() {

    const [nodes, setNodes, onNodesChange] = BI.useNodesState(initialNodes);
    const [edges, setEdges, onEdgesChange] = BI.useEdgesState(initialEdges);
    const onEdgeConnect = BI.useCallback((params: BI.Edge | BI.Connection) => setEdges((eds) => BI.addEdge(params, eds)), [setEdges]);

    const { ydoc, provider } = useWebhook();

    return (
        <BI.ReactFlowProvider>

            <BI.Builder
                ydoc={ydoc}
                nodes={nodes}
                edges={edges}
                onConnect={onEdgeConnect}
                setNodes={setNodes}
                setEdges={setEdges}
                onNodesChange={onNodesChange}
                onEdgesChange={onEdgesChange}
            />

        </BI.ReactFlowProvider>

    );
}

"use client";
import { useEffect, useMemo } from 'react';
import { WebsocketProvider } from "y-websocket";
import * as Y from 'yjs';

export default function useWebhook() {

    const { ydoc, provider } = useMemo(() => {
        const ydoc = new Y.Doc();
        const provider = new WebsocketProvider('ws://localhost:1234', 'your-room-name', ydoc);
        return { ydoc, provider };
    }, []);

    useEffect(() => {
        return () => {
            provider.disconnect();
        };
    }, [provider]);

    return { ydoc, provider };
}

 GET /builder 200 in 415ms
 GET /builder 200 in 470ms
 GET /builder 200 in 488ms
 GET /builder 200 in 702ms
 GET /builder 200 in 890ms
 GET /builder 200 in 1151ms
 GET /builder 200 in 1426ms
 GET /builder 200 in 1818ms
(node:19412) MaxListenersExceededWarning: Possible EventEmitter memory leak detected. 11 exit listeners added to [process]. Use emitter.setMaxListeners() to increase limit
(Use `node --trace-warnings ...` to show where the warning was created)
 GET /builder 200 in 2287ms
 ✓ Compiled in 263ms (866 modules)
Yjs was already imported. This breaks constructor checks and will lead to issues! - https://github.com/yjs/yjs/issues/438
 GET /builder 200 in 2502ms
 GET /builder 200 in 3081ms
 GET /builder 200 in 3383ms