@dxos/plugin-graph 0.8.1-staging.5be625a → 0.8.1-staging.9eaf14f
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/lib/browser/index.mjs +32 -1
- package/dist/lib/browser/index.mjs.map +4 -4
- package/dist/lib/browser/meta.json +1 -1
- package/dist/lib/node/index.cjs +31 -1
- package/dist/lib/node/index.cjs.map +4 -4
- package/dist/lib/node/meta.json +1 -1
- package/dist/lib/node-esm/index.mjs +32 -1
- package/dist/lib/node-esm/index.mjs.map +4 -4
- package/dist/lib/node-esm/meta.json +1 -1
- package/dist/types/src/hooks/index.d.ts +2 -0
- package/dist/types/src/hooks/index.d.ts.map +1 -0
- package/dist/types/src/hooks/useNode.d.ts +11 -0
- package/dist/types/src/hooks/useNode.d.ts.map +1 -0
- package/dist/types/src/index.d.ts +1 -0
- package/dist/types/src/index.d.ts.map +1 -1
- package/package.json +7 -7
- package/src/hooks/index.ts +5 -0
- package/src/hooks/useNode.ts +46 -0
- package/src/index.ts +1 -0
|
@@ -22,9 +22,40 @@ var GraphPlugin = () => definePlugin(meta, [
|
|
|
22
22
|
activate: lazy(() => import("./graph-UYXVVZ2I.mjs"))
|
|
23
23
|
})
|
|
24
24
|
]);
|
|
25
|
+
|
|
26
|
+
// packages/plugins/plugin-graph/src/hooks/useNode.ts
|
|
27
|
+
import { useEffect, useState } from "react";
|
|
28
|
+
var useNode = (graph, id, timeout) => {
|
|
29
|
+
const [nodeState, setNodeState] = useState(id ? graph.findNode(id, false) : void 0);
|
|
30
|
+
useEffect(() => {
|
|
31
|
+
if (!id && nodeState) {
|
|
32
|
+
setNodeState(void 0);
|
|
33
|
+
}
|
|
34
|
+
if (nodeState?.id === id || !id) {
|
|
35
|
+
return;
|
|
36
|
+
}
|
|
37
|
+
const frame = requestAnimationFrame(async () => {
|
|
38
|
+
try {
|
|
39
|
+
const node = await graph.waitForNode(id, timeout);
|
|
40
|
+
if (node) {
|
|
41
|
+
setNodeState(node);
|
|
42
|
+
}
|
|
43
|
+
} catch {
|
|
44
|
+
}
|
|
45
|
+
});
|
|
46
|
+
return () => cancelAnimationFrame(frame);
|
|
47
|
+
}, [
|
|
48
|
+
graph,
|
|
49
|
+
id,
|
|
50
|
+
timeout,
|
|
51
|
+
nodeState?.id
|
|
52
|
+
]);
|
|
53
|
+
return nodeState;
|
|
54
|
+
};
|
|
25
55
|
export {
|
|
26
56
|
GRAPH_PLUGIN,
|
|
27
57
|
GraphPlugin,
|
|
28
|
-
meta
|
|
58
|
+
meta,
|
|
59
|
+
useNode
|
|
29
60
|
};
|
|
30
61
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n definePlugin(meta, [\n defineModule({\n id: `${meta.id}/module/graph`,\n activatesOn: Events.Startup,\n activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n activatesAfter: [Events.AppGraphReady],\n activate: lazy(() => import('./graph')),\n }),\n ]);\n"],
|
|
5
|
-
"mappings": ";;;;;;AAIA,cAAc;;;ACAd,SAASA,cAAcC,MAAMC,QAAQC,oBAAoB;AASlD,IAAMC,cAAc,MACzBC,aAAaC,MAAM;EACjBC,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOC;IACpBC,iBAAiB;MAACF,OAAOG;MAAeH,OAAOI;;IAC/CC,gBAAgB;MAACL,OAAOM;;IACxBC,UAAUC,KAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;",
|
|
6
|
-
"names": ["defineModule", "lazy", "Events", "definePlugin", "GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy"]
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts", "../../../src/hooks/useNode.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './hooks';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n definePlugin(meta, [\n defineModule({\n id: `${meta.id}/module/graph`,\n activatesOn: Events.Startup,\n activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n activatesAfter: [Events.AppGraphReady],\n activate: lazy(() => import('./graph')),\n }),\n ]);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Graph, type Node } from '@dxos/app-graph';\n\n/**\n * React hook to get a node from the graph.\n *\n * @param graph Graph to find the node in.\n * @param id Id of the node to find.\n * @param timeout Optional timeout in milliseconds to wait for the node to be found.\n * @returns Node if found, undefined otherwise.\n */\n// TODO(wittjosiah): Factor out?\nexport const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {\n const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);\n\n useEffect(() => {\n if (!id && nodeState) {\n setNodeState(undefined);\n }\n\n if (nodeState?.id === id || !id) {\n return;\n }\n\n // Set timeout did not seem to effectively not block the UI thread.\n const frame = requestAnimationFrame(async () => {\n try {\n const node = await graph.waitForNode(id, timeout);\n if (node) {\n setNodeState(node);\n }\n } catch {\n // TODO(ZaymonFC): This leaves the resolved node in an invalid state in the case of a timeout.\n }\n });\n\n return () => cancelAnimationFrame(frame);\n }, [graph, id, timeout, nodeState?.id]);\n\n return nodeState;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;AAIA,cAAc;;;ACAd,SAASA,cAAcC,MAAMC,QAAQC,oBAAoB;AASlD,IAAMC,cAAc,MACzBC,aAAaC,MAAM;EACjBC,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOC;IACpBC,iBAAiB;MAACF,OAAOG;MAAeH,OAAOI;;IAC/CC,gBAAgB;MAACL,OAAOM;;IACxBC,UAAUC,KAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;;;AClBH,SAASC,WAAWC,gBAAgB;AAa7B,IAAMC,UAAU,CAAUC,OAAcC,IAAaC,YAAAA;AAC1D,QAAM,CAACC,WAAWC,YAAAA,IAAgBC,SAA8BJ,KAAKD,MAAMM,SAASL,IAAI,KAAA,IAASM,MAAAA;AAEjGC,YAAU,MAAA;AACR,QAAI,CAACP,MAAME,WAAW;AACpBC,mBAAaG,MAAAA;IACf;AAEA,QAAIJ,WAAWF,OAAOA,MAAM,CAACA,IAAI;AAC/B;IACF;AAGA,UAAMQ,QAAQC,sBAAsB,YAAA;AAClC,UAAI;AACF,cAAMC,OAAO,MAAMX,MAAMY,YAAYX,IAAIC,OAAAA;AACzC,YAAIS,MAAM;AACRP,uBAAaO,IAAAA;QACf;MACF,QAAQ;MAER;IACF,CAAA;AAEA,WAAO,MAAME,qBAAqBJ,KAAAA;EACpC,GAAG;IAACT;IAAOC;IAAIC;IAASC,WAAWF;GAAG;AAEtC,SAAOE;AACT;",
|
|
6
|
+
"names": ["defineModule", "lazy", "Events", "definePlugin", "GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy", "useEffect", "useState", "useNode", "graph", "id", "timeout", "nodeState", "setNodeState", "useState", "findNode", "undefined", "useEffect", "frame", "requestAnimationFrame", "node", "waitForNode", "cancelAnimationFrame"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":950,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":950,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytes":4473,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytes":506,"imports":[{"path":"packages/plugins/plugin-graph/src/hooks/useNode.ts","kind":"import-statement","original":"./useNode"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":778,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/GraphPlugin.ts","kind":"import-statement","original":"./GraphPlugin"},{"path":"packages/plugins/plugin-graph/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-graph/dist/lib/browser/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3652},"packages/plugins/plugin-graph/dist/lib/browser/index.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/browser/chunk-L263B77P.mjs","kind":"import-statement"},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/dist/lib/browser/graph-UYXVVZ2I.mjs","kind":"dynamic-import"},{"path":"react","kind":"import-statement","external":true}],"exports":["GRAPH_PLUGIN","GraphPlugin","meta","useNode"],"entryPoint":"packages/plugins/plugin-graph/src/index.ts","inputs":{"packages/plugins/plugin-graph/src/index.ts":{"bytesInOutput":33},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytesInOutput":417},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytesInOutput":662},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytesInOutput":0}},"bytes":1426},"packages/plugins/plugin-graph/dist/lib/browser/graph-UYXVVZ2I.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3429},"packages/plugins/plugin-graph/dist/lib/browser/graph-UYXVVZ2I.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/browser/chunk-L263B77P.mjs","kind":"import-statement"},{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"exports":["default"],"entryPoint":"packages/plugins/plugin-graph/src/graph.ts","inputs":{"packages/plugins/plugin-graph/src/graph.ts":{"bytesInOutput":1331}},"bytes":1516},"packages/plugins/plugin-graph/dist/lib/browser/chunk-L263B77P.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":447},"packages/plugins/plugin-graph/dist/lib/browser/chunk-L263B77P.mjs":{"imports":[],"exports":["GRAPH_PLUGIN","meta"],"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytesInOutput":96}},"bytes":221}}}
|
package/dist/lib/node/index.cjs
CHANGED
|
@@ -31,12 +31,14 @@ var node_exports = {};
|
|
|
31
31
|
__export(node_exports, {
|
|
32
32
|
GRAPH_PLUGIN: () => import_chunk_AKNWBLRY.GRAPH_PLUGIN,
|
|
33
33
|
GraphPlugin: () => GraphPlugin,
|
|
34
|
-
meta: () => import_chunk_AKNWBLRY.meta
|
|
34
|
+
meta: () => import_chunk_AKNWBLRY.meta,
|
|
35
|
+
useNode: () => useNode
|
|
35
36
|
});
|
|
36
37
|
module.exports = __toCommonJS(node_exports);
|
|
37
38
|
var import_chunk_AKNWBLRY = require("./chunk-AKNWBLRY.cjs");
|
|
38
39
|
__reExport(node_exports, require("@dxos/app-graph"), module.exports);
|
|
39
40
|
var import_app_framework = require("@dxos/app-framework");
|
|
41
|
+
var import_react = require("react");
|
|
40
42
|
var GraphPlugin = () => (0, import_app_framework.definePlugin)(import_chunk_AKNWBLRY.meta, [
|
|
41
43
|
(0, import_app_framework.defineModule)({
|
|
42
44
|
id: `${import_chunk_AKNWBLRY.meta.id}/module/graph`,
|
|
@@ -51,11 +53,39 @@ var GraphPlugin = () => (0, import_app_framework.definePlugin)(import_chunk_AKNW
|
|
|
51
53
|
activate: (0, import_app_framework.lazy)(() => import("./graph-GCGIYOGJ.cjs"))
|
|
52
54
|
})
|
|
53
55
|
]);
|
|
56
|
+
var useNode = (graph, id, timeout) => {
|
|
57
|
+
const [nodeState, setNodeState] = (0, import_react.useState)(id ? graph.findNode(id, false) : void 0);
|
|
58
|
+
(0, import_react.useEffect)(() => {
|
|
59
|
+
if (!id && nodeState) {
|
|
60
|
+
setNodeState(void 0);
|
|
61
|
+
}
|
|
62
|
+
if (nodeState?.id === id || !id) {
|
|
63
|
+
return;
|
|
64
|
+
}
|
|
65
|
+
const frame = requestAnimationFrame(async () => {
|
|
66
|
+
try {
|
|
67
|
+
const node = await graph.waitForNode(id, timeout);
|
|
68
|
+
if (node) {
|
|
69
|
+
setNodeState(node);
|
|
70
|
+
}
|
|
71
|
+
} catch {
|
|
72
|
+
}
|
|
73
|
+
});
|
|
74
|
+
return () => cancelAnimationFrame(frame);
|
|
75
|
+
}, [
|
|
76
|
+
graph,
|
|
77
|
+
id,
|
|
78
|
+
timeout,
|
|
79
|
+
nodeState?.id
|
|
80
|
+
]);
|
|
81
|
+
return nodeState;
|
|
82
|
+
};
|
|
54
83
|
// Annotate the CommonJS export names for ESM import in node:
|
|
55
84
|
0 && (module.exports = {
|
|
56
85
|
GRAPH_PLUGIN,
|
|
57
86
|
GraphPlugin,
|
|
58
87
|
meta,
|
|
88
|
+
useNode,
|
|
59
89
|
...require("@dxos/app-graph")
|
|
60
90
|
});
|
|
61
91
|
//# sourceMappingURL=index.cjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n definePlugin(meta, [\n defineModule({\n id: `${meta.id}/module/graph`,\n activatesOn: Events.Startup,\n activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n activatesAfter: [Events.AppGraphReady],\n activate: lazy(() => import('./graph')),\n }),\n ]);\n"],
|
|
5
|
-
"mappings": "
|
|
6
|
-
"names": ["GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy"]
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts", "../../../src/hooks/useNode.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './hooks';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n definePlugin(meta, [\n defineModule({\n id: `${meta.id}/module/graph`,\n activatesOn: Events.Startup,\n activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n activatesAfter: [Events.AppGraphReady],\n activate: lazy(() => import('./graph')),\n }),\n ]);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Graph, type Node } from '@dxos/app-graph';\n\n/**\n * React hook to get a node from the graph.\n *\n * @param graph Graph to find the node in.\n * @param id Id of the node to find.\n * @param timeout Optional timeout in milliseconds to wait for the node to be found.\n * @returns Node if found, undefined otherwise.\n */\n// TODO(wittjosiah): Factor out?\nexport const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {\n const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);\n\n useEffect(() => {\n if (!id && nodeState) {\n setNodeState(undefined);\n }\n\n if (nodeState?.id === id || !id) {\n return;\n }\n\n // Set timeout did not seem to effectively not block the UI thread.\n const frame = requestAnimationFrame(async () => {\n try {\n const node = await graph.waitForNode(id, timeout);\n if (node) {\n setNodeState(node);\n }\n } catch {\n // TODO(ZaymonFC): This leaves the resolved node in an invalid state in the case of a timeout.\n }\n });\n\n return () => cancelAnimationFrame(frame);\n }, [graph, id, timeout, nodeState?.id]);\n\n return nodeState;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,yBAAc;ACAd,2BAAyD;ACAzD,mBAAoC;ADS7B,IAAMA,cAAc,UACzBC,mCAAaC,4BAAM;MACjBC,mCAAa;IACXC,IAAI,GAAGF,2BAAKE,EAAE;IACdC,aAAaC,4BAAOC;IACpBC,iBAAiB;MAACF,4BAAOG;MAAeH,4BAAOI;;IAC/CC,gBAAgB;MAACL,4BAAOM;;IACxBC,cAAUC,2BAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;ACLI,IAAMC,UAAU,CAAUC,OAAcZ,IAAaa,YAAAA;AAC1D,QAAM,CAACC,WAAWC,YAAAA,QAAgBC,uBAA8BhB,KAAKY,MAAMK,SAASjB,IAAI,KAAA,IAASkB,MAAAA;AAEjGC,8BAAU,MAAA;AACR,QAAI,CAACnB,MAAMc,WAAW;AACpBC,mBAAaG,MAAAA;IACf;AAEA,QAAIJ,WAAWd,OAAOA,MAAM,CAACA,IAAI;AAC/B;IACF;AAGA,UAAMoB,QAAQC,sBAAsB,YAAA;AAClC,UAAI;AACF,cAAMC,OAAO,MAAMV,MAAMW,YAAYvB,IAAIa,OAAAA;AACzC,YAAIS,MAAM;AACRP,uBAAaO,IAAAA;QACf;MACF,QAAQ;MAER;IACF,CAAA;AAEA,WAAO,MAAME,qBAAqBJ,KAAAA;EACpC,GAAG;IAACR;IAAOZ;IAAIa;IAASC,WAAWd;GAAG;AAEtC,SAAOc;AACT;",
|
|
6
|
+
"names": ["GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy", "useNode", "graph", "timeout", "nodeState", "setNodeState", "useState", "findNode", "undefined", "useEffect", "frame", "requestAnimationFrame", "node", "waitForNode", "cancelAnimationFrame"]
|
|
7
7
|
}
|
package/dist/lib/node/meta.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":950,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":950,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytes":4473,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytes":506,"imports":[{"path":"packages/plugins/plugin-graph/src/hooks/useNode.ts","kind":"import-statement","original":"./useNode"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":778,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/GraphPlugin.ts","kind":"import-statement","original":"./GraphPlugin"},{"path":"packages/plugins/plugin-graph/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-graph/dist/lib/node/index.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3652},"packages/plugins/plugin-graph/dist/lib/node/index.cjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node/chunk-AKNWBLRY.cjs","kind":"import-statement"},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/dist/lib/node/graph-GCGIYOGJ.cjs","kind":"dynamic-import"},{"path":"react","kind":"import-statement","external":true}],"exports":["GRAPH_PLUGIN","GraphPlugin","meta","useNode"],"entryPoint":"packages/plugins/plugin-graph/src/index.ts","inputs":{"packages/plugins/plugin-graph/src/index.ts":{"bytesInOutput":33},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytesInOutput":417},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytesInOutput":662},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytesInOutput":0}},"bytes":1426},"packages/plugins/plugin-graph/dist/lib/node/graph-GCGIYOGJ.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3429},"packages/plugins/plugin-graph/dist/lib/node/graph-GCGIYOGJ.cjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node/chunk-AKNWBLRY.cjs","kind":"import-statement"},{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"exports":["default"],"entryPoint":"packages/plugins/plugin-graph/src/graph.ts","inputs":{"packages/plugins/plugin-graph/src/graph.ts":{"bytesInOutput":1331}},"bytes":1516},"packages/plugins/plugin-graph/dist/lib/node/chunk-AKNWBLRY.cjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":447},"packages/plugins/plugin-graph/dist/lib/node/chunk-AKNWBLRY.cjs":{"imports":[],"exports":["GRAPH_PLUGIN","meta"],"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytesInOutput":96}},"bytes":221}}}
|
|
@@ -23,9 +23,40 @@ var GraphPlugin = () => definePlugin(meta, [
|
|
|
23
23
|
activate: lazy(() => import("./graph-NUZMWBDN.mjs"))
|
|
24
24
|
})
|
|
25
25
|
]);
|
|
26
|
+
|
|
27
|
+
// packages/plugins/plugin-graph/src/hooks/useNode.ts
|
|
28
|
+
import { useEffect, useState } from "react";
|
|
29
|
+
var useNode = (graph, id, timeout) => {
|
|
30
|
+
const [nodeState, setNodeState] = useState(id ? graph.findNode(id, false) : void 0);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
if (!id && nodeState) {
|
|
33
|
+
setNodeState(void 0);
|
|
34
|
+
}
|
|
35
|
+
if (nodeState?.id === id || !id) {
|
|
36
|
+
return;
|
|
37
|
+
}
|
|
38
|
+
const frame = requestAnimationFrame(async () => {
|
|
39
|
+
try {
|
|
40
|
+
const node = await graph.waitForNode(id, timeout);
|
|
41
|
+
if (node) {
|
|
42
|
+
setNodeState(node);
|
|
43
|
+
}
|
|
44
|
+
} catch {
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
return () => cancelAnimationFrame(frame);
|
|
48
|
+
}, [
|
|
49
|
+
graph,
|
|
50
|
+
id,
|
|
51
|
+
timeout,
|
|
52
|
+
nodeState?.id
|
|
53
|
+
]);
|
|
54
|
+
return nodeState;
|
|
55
|
+
};
|
|
26
56
|
export {
|
|
27
57
|
GRAPH_PLUGIN,
|
|
28
58
|
GraphPlugin,
|
|
29
|
-
meta
|
|
59
|
+
meta,
|
|
60
|
+
useNode
|
|
30
61
|
};
|
|
31
62
|
//# sourceMappingURL=index.mjs.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
|
-
"sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts"],
|
|
4
|
-
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n definePlugin(meta, [\n defineModule({\n id: `${meta.id}/module/graph`,\n activatesOn: Events.Startup,\n activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n activatesAfter: [Events.AppGraphReady],\n activate: lazy(() => import('./graph')),\n }),\n ]);\n"],
|
|
5
|
-
"mappings": ";;;;;;;AAIA,cAAc;;;ACAd,SAASA,cAAcC,MAAMC,QAAQC,oBAAoB;AASlD,IAAMC,cAAc,MACzBC,aAAaC,MAAM;EACjBC,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOC;IACpBC,iBAAiB;MAACF,OAAOG;MAAeH,OAAOI;;IAC/CC,gBAAgB;MAACL,OAAOM;;IACxBC,UAAUC,KAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;",
|
|
6
|
-
"names": ["defineModule", "lazy", "Events", "definePlugin", "GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy"]
|
|
3
|
+
"sources": ["../../../src/index.ts", "../../../src/GraphPlugin.ts", "../../../src/hooks/useNode.ts"],
|
|
4
|
+
"sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nexport * from '@dxos/app-graph';\n\nexport * from './GraphPlugin';\nexport * from './hooks';\nexport * from './meta';\n", "//\n// Copyright 2025 DXOS.org\n//\n\nimport { defineModule, lazy, Events, definePlugin } from '@dxos/app-framework';\n\nimport { meta } from './meta';\n\n/**\n * Manages the state of the graph for the application.\n * Enables other plugins to register node builders to add nodes to the graph.\n * This includes actions and annotation each other's nodes.\n */\nexport const GraphPlugin = () =>\n definePlugin(meta, [\n defineModule({\n id: `${meta.id}/module/graph`,\n activatesOn: Events.Startup,\n activatesBefore: [Events.SetupAppGraph, Events.SetupMetadata],\n activatesAfter: [Events.AppGraphReady],\n activate: lazy(() => import('./graph')),\n }),\n ]);\n", "//\n// Copyright 2024 DXOS.org\n//\n\nimport { useEffect, useState } from 'react';\n\nimport { type Graph, type Node } from '@dxos/app-graph';\n\n/**\n * React hook to get a node from the graph.\n *\n * @param graph Graph to find the node in.\n * @param id Id of the node to find.\n * @param timeout Optional timeout in milliseconds to wait for the node to be found.\n * @returns Node if found, undefined otherwise.\n */\n// TODO(wittjosiah): Factor out?\nexport const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {\n const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);\n\n useEffect(() => {\n if (!id && nodeState) {\n setNodeState(undefined);\n }\n\n if (nodeState?.id === id || !id) {\n return;\n }\n\n // Set timeout did not seem to effectively not block the UI thread.\n const frame = requestAnimationFrame(async () => {\n try {\n const node = await graph.waitForNode(id, timeout);\n if (node) {\n setNodeState(node);\n }\n } catch {\n // TODO(ZaymonFC): This leaves the resolved node in an invalid state in the case of a timeout.\n }\n });\n\n return () => cancelAnimationFrame(frame);\n }, [graph, id, timeout, nodeState?.id]);\n\n return nodeState;\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;AAIA,cAAc;;;ACAd,SAASA,cAAcC,MAAMC,QAAQC,oBAAoB;AASlD,IAAMC,cAAc,MACzBC,aAAaC,MAAM;EACjBC,aAAa;IACXC,IAAI,GAAGF,KAAKE,EAAE;IACdC,aAAaC,OAAOC;IACpBC,iBAAiB;MAACF,OAAOG;MAAeH,OAAOI;;IAC/CC,gBAAgB;MAACL,OAAOM;;IACxBC,UAAUC,KAAK,MAAM,OAAO,sBAAA,CAAA;EAC9B,CAAA;CACD;;;AClBH,SAASC,WAAWC,gBAAgB;AAa7B,IAAMC,UAAU,CAAUC,OAAcC,IAAaC,YAAAA;AAC1D,QAAM,CAACC,WAAWC,YAAAA,IAAgBC,SAA8BJ,KAAKD,MAAMM,SAASL,IAAI,KAAA,IAASM,MAAAA;AAEjGC,YAAU,MAAA;AACR,QAAI,CAACP,MAAME,WAAW;AACpBC,mBAAaG,MAAAA;IACf;AAEA,QAAIJ,WAAWF,OAAOA,MAAM,CAACA,IAAI;AAC/B;IACF;AAGA,UAAMQ,QAAQC,sBAAsB,YAAA;AAClC,UAAI;AACF,cAAMC,OAAO,MAAMX,MAAMY,YAAYX,IAAIC,OAAAA;AACzC,YAAIS,MAAM;AACRP,uBAAaO,IAAAA;QACf;MACF,QAAQ;MAER;IACF,CAAA;AAEA,WAAO,MAAME,qBAAqBJ,KAAAA;EACpC,GAAG;IAACT;IAAOC;IAAIC;IAASC,WAAWF;GAAG;AAEtC,SAAOE;AACT;",
|
|
6
|
+
"names": ["defineModule", "lazy", "Events", "definePlugin", "GraphPlugin", "definePlugin", "meta", "defineModule", "id", "activatesOn", "Events", "Startup", "activatesBefore", "SetupAppGraph", "SetupMetadata", "activatesAfter", "AppGraphReady", "activate", "lazy", "useEffect", "useState", "useNode", "graph", "id", "timeout", "nodeState", "setNodeState", "useState", "findNode", "undefined", "useEffect", "frame", "requestAnimationFrame", "node", "waitForNode", "cancelAnimationFrame"]
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":950,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":
|
|
1
|
+
{"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytes":950,"imports":[],"format":"esm"},"packages/plugins/plugin-graph/src/graph.ts":{"bytes":6242,"imports":[{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytes":2810,"imports":[{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"},{"path":"packages/plugins/plugin-graph/src/graph.ts","kind":"dynamic-import","original":"./graph"}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytes":4473,"imports":[{"path":"react","kind":"import-statement","external":true}],"format":"esm"},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytes":506,"imports":[{"path":"packages/plugins/plugin-graph/src/hooks/useNode.ts","kind":"import-statement","original":"./useNode"}],"format":"esm"},"packages/plugins/plugin-graph/src/index.ts":{"bytes":778,"imports":[{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/src/GraphPlugin.ts","kind":"import-statement","original":"./GraphPlugin"},{"path":"packages/plugins/plugin-graph/src/hooks/index.ts","kind":"import-statement","original":"./hooks"},{"path":"packages/plugins/plugin-graph/src/meta.ts","kind":"import-statement","original":"./meta"}],"format":"esm"}},"outputs":{"packages/plugins/plugin-graph/dist/lib/node-esm/index.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3653},"packages/plugins/plugin-graph/dist/lib/node-esm/index.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-RJQY6JZL.mjs","kind":"import-statement"},{"path":"@dxos/app-graph","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"packages/plugins/plugin-graph/dist/lib/node-esm/graph-NUZMWBDN.mjs","kind":"dynamic-import"},{"path":"react","kind":"import-statement","external":true}],"exports":["GRAPH_PLUGIN","GraphPlugin","meta","useNode"],"entryPoint":"packages/plugins/plugin-graph/src/index.ts","inputs":{"packages/plugins/plugin-graph/src/index.ts":{"bytesInOutput":33},"packages/plugins/plugin-graph/src/GraphPlugin.ts":{"bytesInOutput":417},"packages/plugins/plugin-graph/src/hooks/useNode.ts":{"bytesInOutput":662},"packages/plugins/plugin-graph/src/hooks/index.ts":{"bytesInOutput":0}},"bytes":1518},"packages/plugins/plugin-graph/dist/lib/node-esm/graph-NUZMWBDN.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":3430},"packages/plugins/plugin-graph/dist/lib/node-esm/graph-NUZMWBDN.mjs":{"imports":[{"path":"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-RJQY6JZL.mjs","kind":"import-statement"},{"path":"@preact/signals-core","kind":"import-statement","external":true},{"path":"@dxos/app-framework","kind":"import-statement","external":true},{"path":"@dxos/app-graph","kind":"import-statement","external":true}],"exports":["default"],"entryPoint":"packages/plugins/plugin-graph/src/graph.ts","inputs":{"packages/plugins/plugin-graph/src/graph.ts":{"bytesInOutput":1331}},"bytes":1608},"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-RJQY6JZL.mjs.map":{"imports":[],"exports":[],"inputs":{},"bytes":449},"packages/plugins/plugin-graph/dist/lib/node-esm/chunk-RJQY6JZL.mjs":{"imports":[],"exports":["GRAPH_PLUGIN","meta"],"inputs":{"packages/plugins/plugin-graph/src/meta.ts":{"bytesInOutput":96}},"bytes":314}}}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { type Graph, type Node } from '@dxos/app-graph';
|
|
2
|
+
/**
|
|
3
|
+
* React hook to get a node from the graph.
|
|
4
|
+
*
|
|
5
|
+
* @param graph Graph to find the node in.
|
|
6
|
+
* @param id Id of the node to find.
|
|
7
|
+
* @param timeout Optional timeout in milliseconds to wait for the node to be found.
|
|
8
|
+
* @returns Node if found, undefined otherwise.
|
|
9
|
+
*/
|
|
10
|
+
export declare const useNode: <T = any>(graph: Graph, id?: string, timeout?: number) => Node<T> | undefined;
|
|
11
|
+
//# sourceMappingURL=useNode.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useNode.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useNode.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,KAAK,EAAE,KAAK,IAAI,EAAE,MAAM,iBAAiB,CAAC;AAExD;;;;;;;GAOG;AAEH,eAAO,MAAM,OAAO,GAAI,CAAC,eAAe,KAAK,OAAO,MAAM,YAAY,MAAM,KAAG,IAAI,CAAC,CAAC,CAAC,GAAG,SA4BxF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAEhC,cAAc,eAAe,CAAC;AAC9B,cAAc,QAAQ,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,iBAAiB,CAAC;AAEhC,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dxos/plugin-graph",
|
|
3
|
-
"version": "0.8.1-staging.
|
|
3
|
+
"version": "0.8.1-staging.9eaf14f",
|
|
4
4
|
"description": "DXOS Surface plugin for constructing knowledge graphs",
|
|
5
5
|
"homepage": "https://dxos.org",
|
|
6
6
|
"bugs": "https://github.com/dxos/dxos/issues",
|
|
@@ -25,10 +25,10 @@
|
|
|
25
25
|
],
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@preact/signals-core": "^1.6.0",
|
|
28
|
-
"@dxos/app-framework": "0.8.1-staging.
|
|
29
|
-
"@dxos/app-graph": "0.8.1-staging.
|
|
30
|
-
"@dxos/
|
|
31
|
-
"@dxos/
|
|
28
|
+
"@dxos/app-framework": "0.8.1-staging.9eaf14f",
|
|
29
|
+
"@dxos/app-graph": "0.8.1-staging.9eaf14f",
|
|
30
|
+
"@dxos/debug": "0.8.1-staging.9eaf14f",
|
|
31
|
+
"@dxos/async": "0.8.1-staging.9eaf14f"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"@types/react": "~18.2.0",
|
|
@@ -36,8 +36,8 @@
|
|
|
36
36
|
"react": "~18.2.0",
|
|
37
37
|
"react-dom": "~18.2.0",
|
|
38
38
|
"vite": "5.4.7",
|
|
39
|
-
"@dxos/react-client": "0.8.1-staging.
|
|
40
|
-
"@dxos/storybook-utils": "0.8.1-staging.
|
|
39
|
+
"@dxos/react-client": "0.8.1-staging.9eaf14f",
|
|
40
|
+
"@dxos/storybook-utils": "0.8.1-staging.9eaf14f"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"react": "~18.2.0",
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
//
|
|
2
|
+
// Copyright 2024 DXOS.org
|
|
3
|
+
//
|
|
4
|
+
|
|
5
|
+
import { useEffect, useState } from 'react';
|
|
6
|
+
|
|
7
|
+
import { type Graph, type Node } from '@dxos/app-graph';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* React hook to get a node from the graph.
|
|
11
|
+
*
|
|
12
|
+
* @param graph Graph to find the node in.
|
|
13
|
+
* @param id Id of the node to find.
|
|
14
|
+
* @param timeout Optional timeout in milliseconds to wait for the node to be found.
|
|
15
|
+
* @returns Node if found, undefined otherwise.
|
|
16
|
+
*/
|
|
17
|
+
// TODO(wittjosiah): Factor out?
|
|
18
|
+
export const useNode = <T = any>(graph: Graph, id?: string, timeout?: number): Node<T> | undefined => {
|
|
19
|
+
const [nodeState, setNodeState] = useState<Node<T> | undefined>(id ? graph.findNode(id, false) : undefined);
|
|
20
|
+
|
|
21
|
+
useEffect(() => {
|
|
22
|
+
if (!id && nodeState) {
|
|
23
|
+
setNodeState(undefined);
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
if (nodeState?.id === id || !id) {
|
|
27
|
+
return;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
// Set timeout did not seem to effectively not block the UI thread.
|
|
31
|
+
const frame = requestAnimationFrame(async () => {
|
|
32
|
+
try {
|
|
33
|
+
const node = await graph.waitForNode(id, timeout);
|
|
34
|
+
if (node) {
|
|
35
|
+
setNodeState(node);
|
|
36
|
+
}
|
|
37
|
+
} catch {
|
|
38
|
+
// TODO(ZaymonFC): This leaves the resolved node in an invalid state in the case of a timeout.
|
|
39
|
+
}
|
|
40
|
+
});
|
|
41
|
+
|
|
42
|
+
return () => cancelAnimationFrame(frame);
|
|
43
|
+
}, [graph, id, timeout, nodeState?.id]);
|
|
44
|
+
|
|
45
|
+
return nodeState;
|
|
46
|
+
};
|