apps/canvas/src/Config.tsx

import { useNodes } from "@xyflow/react";
import { AppNode, useEnv } from "./lib/state";
import { generateDodoConfig } from "./lib/config";
import { useEffect, useMemo, useState } from "react";

export function Config() {
    const env = useEnv();
    const [nodes, setNodes] = useState<AppNode[]>([]);
    const n = useNodes<AppNode>();
    useEffect(() => {
        console.log(n);
        if (n && n.length > 0) {
            setNodes(n);
        }
    }, [n, setNodes]);
    const config = useMemo(() => generateDodoConfig(nodes, env), [nodes, env]);
    const configS = useMemo(() => JSON.stringify(config, undefined, 4), [config]);
    return (
        <div className="px-5">
            <pre>{configS}</pre>
        </div>
    )
}