feat: add render graph driven renderer architecture

Amp-Thread-ID: https://ampcode.com/threads/T-019f9d91-77c1-7206-a60f-ed6554ce92ab

Co-authored-by: Heaust Azure <heaust.azure@gmail.com>

vendor/fxnode/examples/blender/main.ts

@@ -0,0 +1,35 @@
+import { createApplicationFxNode } from "./application-browser.js";
+import { prepareFxNodeBrowserHost } from "../shared/browser-host.js";
+import initialLayout from "./initialLayout.json" with { type: "json" };
+
+const canvas = document.querySelector<HTMLCanvasElement>("#graph");
+const addNodeMenuTemplate = document.querySelector<HTMLTemplateElement>("#add-node-menu-template");
+if (!canvas || !addNodeMenuTemplate) throw new Error("Example canvas or add-node menu template is missing");
+const host = prepareFxNodeBrowserHost({ canvas, addNodeMenuTemplate });
+
+let resolveRendered!: () => void;
+const rendered = new Promise<void>((resolve) => {
+  resolveRendered = resolve;
+});
+const handle: FxNodeExampleHandle = { root: null, view: null, host, ready: Promise.resolve(), rendered };
+window.fxnodeExample = handle;
+
+handle.ready = (async () => {
+  let root: Awaited<ReturnType<typeof createApplicationFxNode>> | undefined,
+    view: Awaited<ReturnType<NonNullable<typeof root>["attachView"]>> | undefined;
+  try {
+    root = await createApplicationFxNode();
+    await root.setState(initialLayout);
+    view = await root.attachView({ canvas, viewport: host.initialViewport });
+    handle.root = root;
+    handle.view = view;
+    host.attach(root, view);
+    await view.whenRendered();
+    resolveRendered();
+  } catch (error) {
+    host.destroy();
+    await view?.detach();
+    root?.destroy();
+    throw error;
+  }
+})();