@atlaskit/node-data-provider 4.2.0 → 4.4.0
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/CHANGELOG.md +29 -0
- package/dist/cjs/index.js +19 -1
- package/dist/cjs/node-data-provider.js +279 -0
- package/dist/cjs/utils/find-nodes-to-prefetch.js +85 -0
- package/dist/cjs/utils/prefetch-node-data-providers-data.js +165 -0
- package/dist/es2019/index.js +4 -0
- package/dist/es2019/node-data-provider.js +237 -0
- package/dist/es2019/utils/find-nodes-to-prefetch.js +74 -0
- package/dist/es2019/utils/prefetch-node-data-providers-data.js +128 -0
- package/dist/esm/index.js +4 -0
- package/dist/esm/node-data-provider.js +276 -0
- package/dist/esm/utils/find-nodes-to-prefetch.js +78 -0
- package/dist/esm/utils/prefetch-node-data-providers-data.js +161 -0
- package/dist/types/index.d.ts +2 -0
- package/dist/types/node-data-provider.d.ts +138 -0
- package/dist/types/utils/find-nodes-to-prefetch.d.ts +21 -0
- package/dist/types/utils/prefetch-node-data-providers-data.d.ts +107 -0
- package/dist/types-ts4.5/index.d.ts +2 -0
- package/dist/types-ts4.5/node-data-provider.d.ts +138 -0
- package/dist/types-ts4.5/utils/find-nodes-to-prefetch.d.ts +21 -0
- package/dist/types-ts4.5/utils/prefetch-node-data-providers-data.d.ts +107 -0
- package/package.json +6 -5
|
@@ -0,0 +1,276 @@
|
|
|
1
|
+
import _typeof from "@babel/runtime/helpers/typeof";
|
|
2
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
3
|
+
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
|
|
4
|
+
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
|
|
5
|
+
import _createClass from "@babel/runtime/helpers/createClass";
|
|
6
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
7
|
+
import { isSSR } from '@atlaskit/editor-common/core-utils';
|
|
8
|
+
|
|
9
|
+
/**
|
|
10
|
+
* Represents the SSR data for a single provider.
|
|
11
|
+
* It's a map where each key is a unique node data key and the value is the prefetched data for that node.
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* {
|
|
15
|
+
* 'node-id-1': { value: 'some data' },
|
|
16
|
+
* 'node-id-2': { value: 'other data' }
|
|
17
|
+
* }
|
|
18
|
+
*/
|
|
19
|
+
|
|
20
|
+
/**
|
|
21
|
+
* Represents the cached data for a Node Data Provider.
|
|
22
|
+
* Each key is a unique node data key, and the value is an object containing:
|
|
23
|
+
* - `source`: Indicates whether the data was fetched from SSR or the network.
|
|
24
|
+
* - `data`: The actual data, which can be either a resolved value or a Promise.
|
|
25
|
+
*
|
|
26
|
+
* @example
|
|
27
|
+
* {
|
|
28
|
+
* 'node-id-1': { source: 'ssr', data: { value: 'some data' } },
|
|
29
|
+
* 'node-id-2': { source: 'network', data: Promise.resolve({ value: 'other data' }) }
|
|
30
|
+
* }
|
|
31
|
+
*/
|
|
32
|
+
|
|
33
|
+
/**
|
|
34
|
+
* Represents the payload passed to the callback function when data is fetched.
|
|
35
|
+
* It can either contain an error or the fetched data.
|
|
36
|
+
*/
|
|
37
|
+
|
|
38
|
+
/**
|
|
39
|
+
* A Node Data Provider is responsible for fetching and caching data associated with specific ProseMirror nodes.
|
|
40
|
+
* It supports a cache-first-then-network strategy, with initial data potentially provided via SSR.
|
|
41
|
+
*
|
|
42
|
+
* @template Node The specific type of JSONNode this provider supports.
|
|
43
|
+
* @template Data The type of data this provider fetches and manages.
|
|
44
|
+
*/
|
|
45
|
+
export var NodeDataProvider = /*#__PURE__*/function () {
|
|
46
|
+
function NodeDataProvider() {
|
|
47
|
+
_classCallCheck(this, NodeDataProvider);
|
|
48
|
+
this.cacheVersion = 0;
|
|
49
|
+
this.cache = {};
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* Sets the SSR data for the provider.
|
|
54
|
+
* This pre-populates the cache with data rendered on the server, preventing redundant network requests on the client.
|
|
55
|
+
* Calling this method will invalidate the existing cache.
|
|
56
|
+
*
|
|
57
|
+
* @example
|
|
58
|
+
* ```
|
|
59
|
+
* const ssrData = window.__SSR_NODE_DATA__ || {};
|
|
60
|
+
* nodeDataProvider.setSSRData(ssrData);
|
|
61
|
+
* ```
|
|
62
|
+
*
|
|
63
|
+
* @param ssrData A map of node data keys to their corresponding data.
|
|
64
|
+
*/
|
|
65
|
+
return _createClass(NodeDataProvider, [{
|
|
66
|
+
key: "setSSRData",
|
|
67
|
+
value: function setSSRData() {
|
|
68
|
+
var ssrData = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
|
|
69
|
+
this.cacheVersion++;
|
|
70
|
+
this.cache = Object.fromEntries(Object.entries(ssrData).map(function (_ref) {
|
|
71
|
+
var _ref2 = _slicedToArray(_ref, 2),
|
|
72
|
+
key = _ref2[0],
|
|
73
|
+
data = _ref2[1];
|
|
74
|
+
return [key, {
|
|
75
|
+
data: data,
|
|
76
|
+
source: 'ssr'
|
|
77
|
+
}];
|
|
78
|
+
}));
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* Clears all cached data.
|
|
83
|
+
* This increments the internal cache version, invalidating any pending network requests.
|
|
84
|
+
*
|
|
85
|
+
* @example
|
|
86
|
+
* ```
|
|
87
|
+
* function useMyNodeDataProvider(contentId: string) {
|
|
88
|
+
* const nodeDataProvider = new MyNodeDataProvider();
|
|
89
|
+
*
|
|
90
|
+
* // Reset the cache when the contentId changes (e.g., when the user navigates to a different page).
|
|
91
|
+
* useEffect(() => {
|
|
92
|
+
* nodeDataProvider.resetCache();
|
|
93
|
+
* }, [contentId]);
|
|
94
|
+
*
|
|
95
|
+
* return nodeDataProvider;
|
|
96
|
+
* }
|
|
97
|
+
* ```
|
|
98
|
+
*/
|
|
99
|
+
}, {
|
|
100
|
+
key: "resetCache",
|
|
101
|
+
value: function resetCache() {
|
|
102
|
+
this.cacheVersion++;
|
|
103
|
+
this.cache = {};
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
/**
|
|
107
|
+
* Fetches data for a given node using a cache-first-then-network strategy.
|
|
108
|
+
*
|
|
109
|
+
* The provided callback may be called multiple times:
|
|
110
|
+
* 1. Immediately with data from the SSR cache, if available.
|
|
111
|
+
* 2. Asynchronously with data fetched from the network.
|
|
112
|
+
*
|
|
113
|
+
* @example
|
|
114
|
+
* ```
|
|
115
|
+
* const nodeDataProvider = new MyNodeDataProvider();
|
|
116
|
+
*
|
|
117
|
+
* nodeDataProvider.getData(node, (data) => {
|
|
118
|
+
* console.log('Node data:', data);
|
|
119
|
+
* });
|
|
120
|
+
* ```
|
|
121
|
+
*
|
|
122
|
+
* @param node The node (or its ProseMirror representation) for which to fetch data.
|
|
123
|
+
* @param callback The callback function to call with the fetched data or an error.
|
|
124
|
+
*/
|
|
125
|
+
}, {
|
|
126
|
+
key: "getData",
|
|
127
|
+
value: function getData(node, callback) {
|
|
128
|
+
// Move implementation to a separate async method
|
|
129
|
+
// to keep this method synchronous and avoid async/await in the public API.
|
|
130
|
+
void this.getDataAsync(node, callback);
|
|
131
|
+
}
|
|
132
|
+
}, {
|
|
133
|
+
key: "getDataAsync",
|
|
134
|
+
value: function () {
|
|
135
|
+
var _getDataAsync = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(node, callback) {
|
|
136
|
+
var jsonNode, _dataKey, dataFromCache, cacheVersionBeforeRequest, dataPromise, data;
|
|
137
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
138
|
+
while (1) switch (_context.prev = _context.next) {
|
|
139
|
+
case 0:
|
|
140
|
+
_context.prev = 0;
|
|
141
|
+
jsonNode = 'toJSON' in node ? node.toJSON() : node;
|
|
142
|
+
if (this.isNodeSupported(jsonNode)) {
|
|
143
|
+
_context.next = 5;
|
|
144
|
+
break;
|
|
145
|
+
}
|
|
146
|
+
// eslint-disable-next-line no-console
|
|
147
|
+
console.error("The ".concat(this.constructor.name, " doesn't support Node ").concat(jsonNode.type, "."));
|
|
148
|
+
return _context.abrupt("return");
|
|
149
|
+
case 5:
|
|
150
|
+
_dataKey = this.nodeDataKey(jsonNode);
|
|
151
|
+
dataFromCache = this.cache[_dataKey];
|
|
152
|
+
if (!(dataFromCache !== undefined)) {
|
|
153
|
+
_context.next = 20;
|
|
154
|
+
break;
|
|
155
|
+
}
|
|
156
|
+
if (!isPromise(dataFromCache.data)) {
|
|
157
|
+
_context.next = 17;
|
|
158
|
+
break;
|
|
159
|
+
}
|
|
160
|
+
_context.t0 = callback;
|
|
161
|
+
_context.next = 12;
|
|
162
|
+
return dataFromCache.data;
|
|
163
|
+
case 12:
|
|
164
|
+
_context.t1 = _context.sent;
|
|
165
|
+
_context.t2 = {
|
|
166
|
+
data: _context.t1
|
|
167
|
+
};
|
|
168
|
+
(0, _context.t0)(_context.t2);
|
|
169
|
+
_context.next = 18;
|
|
170
|
+
break;
|
|
171
|
+
case 17:
|
|
172
|
+
callback({
|
|
173
|
+
data: dataFromCache.data
|
|
174
|
+
});
|
|
175
|
+
case 18:
|
|
176
|
+
if (!isSSR()) {
|
|
177
|
+
_context.next = 20;
|
|
178
|
+
break;
|
|
179
|
+
}
|
|
180
|
+
return _context.abrupt("return");
|
|
181
|
+
case 20:
|
|
182
|
+
if (!((dataFromCache === null || dataFromCache === void 0 ? void 0 : dataFromCache.source) !== 'network')) {
|
|
183
|
+
_context.next = 29;
|
|
184
|
+
break;
|
|
185
|
+
}
|
|
186
|
+
// Store the current cache version before making the request,
|
|
187
|
+
// so we can check if the cache has changed while we are waiting for the network response.
|
|
188
|
+
cacheVersionBeforeRequest = this.cacheVersion;
|
|
189
|
+
dataPromise = this.fetchNodesData([jsonNode]).then(function (_ref3) {
|
|
190
|
+
var _ref4 = _slicedToArray(_ref3, 1),
|
|
191
|
+
value = _ref4[0];
|
|
192
|
+
return value;
|
|
193
|
+
}); // Store the promise in the cache to avoid multiple requests for the same data
|
|
194
|
+
this.cache[_dataKey] = {
|
|
195
|
+
source: 'network',
|
|
196
|
+
data: dataPromise
|
|
197
|
+
};
|
|
198
|
+
_context.next = 26;
|
|
199
|
+
return dataPromise;
|
|
200
|
+
case 26:
|
|
201
|
+
data = _context.sent;
|
|
202
|
+
// We need to call the callback with the data with result even if the cache version has changed,
|
|
203
|
+
// so all promises that are waiting for the data can resolve.
|
|
204
|
+
callback({
|
|
205
|
+
data: data
|
|
206
|
+
});
|
|
207
|
+
|
|
208
|
+
// If the cache version has changed, we don't want to use the data from the network
|
|
209
|
+
// because it could be stale data.
|
|
210
|
+
if (cacheVersionBeforeRequest === this.cacheVersion) {
|
|
211
|
+
// Replace promise with the resolved data in the cache
|
|
212
|
+
this.cache[_dataKey] = {
|
|
213
|
+
source: 'network',
|
|
214
|
+
data: data
|
|
215
|
+
};
|
|
216
|
+
}
|
|
217
|
+
case 29:
|
|
218
|
+
_context.next = 34;
|
|
219
|
+
break;
|
|
220
|
+
case 31:
|
|
221
|
+
_context.prev = 31;
|
|
222
|
+
_context.t3 = _context["catch"](0);
|
|
223
|
+
// If an error occurs, we call the callback with the error
|
|
224
|
+
callback({
|
|
225
|
+
error: _context.t3 instanceof Error ? _context.t3 : new Error(String(_context.t3))
|
|
226
|
+
});
|
|
227
|
+
case 34:
|
|
228
|
+
case "end":
|
|
229
|
+
return _context.stop();
|
|
230
|
+
}
|
|
231
|
+
}, _callee, this, [[0, 31]]);
|
|
232
|
+
}));
|
|
233
|
+
function getDataAsync(_x, _x2) {
|
|
234
|
+
return _getDataAsync.apply(this, arguments);
|
|
235
|
+
}
|
|
236
|
+
return getDataAsync;
|
|
237
|
+
}()
|
|
238
|
+
/**
|
|
239
|
+
* Fetches data for a given node and returns it as a Promise.
|
|
240
|
+
* This is a convenience wrapper around the `data` method for use with async/await.
|
|
241
|
+
*
|
|
242
|
+
* Note: This promise resolves with the *first* available data, which could be from the SSR cache or the network.
|
|
243
|
+
* It may not provide the most up-to-date data if a network fetch is in progress.
|
|
244
|
+
*
|
|
245
|
+
* Note: This method is only for migration purposes. Use {@link getData} in new code instead.
|
|
246
|
+
*
|
|
247
|
+
* @private
|
|
248
|
+
* @deprecated Don't use this method, use {@link getData} method instead.
|
|
249
|
+
* This method is only for migration purposes.
|
|
250
|
+
*
|
|
251
|
+
* @param node The node (or its ProseMirror representation) for which to fetch data.
|
|
252
|
+
* @returns A promise that resolves with the node's data.
|
|
253
|
+
*/
|
|
254
|
+
}, {
|
|
255
|
+
key: "getDataAsPromise_DO_NOT_USE_OUTSIDE_MIGRATIONS",
|
|
256
|
+
value: function getDataAsPromise_DO_NOT_USE_OUTSIDE_MIGRATIONS(node) {
|
|
257
|
+
var _this = this;
|
|
258
|
+
return new Promise(function (resolve, reject) {
|
|
259
|
+
try {
|
|
260
|
+
_this.getData(node, function (payload) {
|
|
261
|
+
if (payload.error) {
|
|
262
|
+
reject(payload.error);
|
|
263
|
+
} else {
|
|
264
|
+
resolve(payload.data);
|
|
265
|
+
}
|
|
266
|
+
});
|
|
267
|
+
} catch (error) {
|
|
268
|
+
reject(error);
|
|
269
|
+
}
|
|
270
|
+
});
|
|
271
|
+
}
|
|
272
|
+
}]);
|
|
273
|
+
}();
|
|
274
|
+
function isPromise(value) {
|
|
275
|
+
return _typeof(value) === 'object' && value !== null && 'then' in value && typeof value.then === 'function';
|
|
276
|
+
}
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
2
|
+
/**
|
|
3
|
+
* Finds nodes in the document that are supported by the given providers, up to a maximum number of nodes.
|
|
4
|
+
*
|
|
5
|
+
* @param doc The document to search for nodes.
|
|
6
|
+
* @param providers An array of providers with their maximum nodes to prefetch.
|
|
7
|
+
* @param maxNodesToVisit The maximum number of nodes to visit in the document.
|
|
8
|
+
* @returns An array of objects, each containing a provider and the nodes that are supported by that provider.
|
|
9
|
+
*/
|
|
10
|
+
export function findNodesToPrefetch(doc, providers, maxNodesToVisit) {
|
|
11
|
+
// Counter for the total number of visited nodes to limit the traversal.
|
|
12
|
+
var totalVisitedNodesCount = 0;
|
|
13
|
+
// A map to store the results, with the provider name as the key.
|
|
14
|
+
var resultMap = providers.reduce(function (acc, _ref) {
|
|
15
|
+
var provider = _ref.provider;
|
|
16
|
+
acc[provider.name] = {
|
|
17
|
+
provider: provider,
|
|
18
|
+
nodes: []
|
|
19
|
+
};
|
|
20
|
+
return acc;
|
|
21
|
+
}, {});
|
|
22
|
+
|
|
23
|
+
// It doesn't use `filter` function from `@atlaskit/adf-utils/traverse` because it does not support early stopping.
|
|
24
|
+
// We need to stop traversing when we reach the maximum number of nodes to visit to support large documents.
|
|
25
|
+
|
|
26
|
+
// Create a list of providers for which we still need to find nodes.
|
|
27
|
+
var providersToLookup = providers.filter(function (_ref2) {
|
|
28
|
+
var maxNodesToPrefetch = _ref2.maxNodesToPrefetch;
|
|
29
|
+
return maxNodesToPrefetch > 0;
|
|
30
|
+
}).map(function (_ref3) {
|
|
31
|
+
var provider = _ref3.provider,
|
|
32
|
+
maxNodesToPrefetch = _ref3.maxNodesToPrefetch;
|
|
33
|
+
return {
|
|
34
|
+
provider: provider,
|
|
35
|
+
maxNodesToPrefetch: maxNodesToPrefetch,
|
|
36
|
+
foundNodes: 0 // Counter for nodes found for each provider.
|
|
37
|
+
};
|
|
38
|
+
});
|
|
39
|
+
|
|
40
|
+
// Queue for the breadth-first search (BFS), starting with the root document node.
|
|
41
|
+
var nodesToVisit = [doc];
|
|
42
|
+
var currentIndex = 0;
|
|
43
|
+
// The loop continues as long as there are nodes to visit, providers to look for,
|
|
44
|
+
// and the visited nodes limit has not been reached.
|
|
45
|
+
while (currentIndex < nodesToVisit.length && providersToLookup.length > 0 && totalVisitedNodesCount < maxNodesToVisit) {
|
|
46
|
+
totalVisitedNodesCount += 1;
|
|
47
|
+
var currentNode = nodesToVisit[currentIndex];
|
|
48
|
+
currentIndex++;
|
|
49
|
+
|
|
50
|
+
// Using a reverse loop to avoid issues with array mutation (when removing elements).
|
|
51
|
+
for (var i = providersToLookup.length - 1; i >= 0; i--) {
|
|
52
|
+
var providerToFind = providersToLookup[i];
|
|
53
|
+
|
|
54
|
+
// Check if the current provider supports this node.
|
|
55
|
+
if (providerToFind.provider.isNodeSupported(currentNode)) {
|
|
56
|
+
// If provider supports the node, add it to the result map.
|
|
57
|
+
resultMap[providerToFind.provider.name].nodes.push(currentNode);
|
|
58
|
+
// Increment the count of found nodes for this provider.
|
|
59
|
+
providerToFind.foundNodes += 1;
|
|
60
|
+
|
|
61
|
+
// If the provider has found enough nodes, remove it from the lookup list.
|
|
62
|
+
if (providerToFind.foundNodes >= providerToFind.maxNodesToPrefetch) {
|
|
63
|
+
providersToLookup.splice(i, 1);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
// If the current node has children, add them to the queue to be visited.
|
|
69
|
+
if (currentNode.content) {
|
|
70
|
+
nodesToVisit.push.apply(nodesToVisit, _toConsumableArray(currentNode.content.filter(function (node) {
|
|
71
|
+
return node !== undefined;
|
|
72
|
+
})));
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
// Return an array of the found nodes, grouped by provider.
|
|
77
|
+
return Object.values(resultMap);
|
|
78
|
+
}
|
|
@@ -0,0 +1,161 @@
|
|
|
1
|
+
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
|
|
2
|
+
import _regeneratorRuntime from "@babel/runtime/regenerator";
|
|
3
|
+
import { findNodesToPrefetch } from './find-nodes-to-prefetch';
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* Represents the SSR data for a single provider.
|
|
7
|
+
* It's a map where each key is a unique node data key and the value is the prefetched data for that node.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* {
|
|
11
|
+
* 'node-id-1': { value: 'some data' },
|
|
12
|
+
* 'node-id-2': { value: 'other data' }
|
|
13
|
+
* }
|
|
14
|
+
*/
|
|
15
|
+
|
|
16
|
+
/**
|
|
17
|
+
* Represents the aggregated SSR data for all node data providers.
|
|
18
|
+
* It's a map where each key is a provider's name and the value is the {@link SsrData} for that provider.
|
|
19
|
+
* This structure is used to hydrate the client-side caches.
|
|
20
|
+
*
|
|
21
|
+
* @example
|
|
22
|
+
* {
|
|
23
|
+
* 'mentionProvider': { 'mention-1': { id: '1', name: 'John Doe' } },
|
|
24
|
+
* 'emojiProvider': { 'emoji-123': { shortName: ':smile:', representation: '😊' } }
|
|
25
|
+
* }
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
/**
|
|
29
|
+
* Fetches data for nodes in the document that are supported by the given providers.
|
|
30
|
+
* This function will traverse the document and call the `fetchData` method for each node that is supported by the providers.
|
|
31
|
+
*
|
|
32
|
+
* @example
|
|
33
|
+
* ```
|
|
34
|
+
* const doc = JSON.parse('{"type": "doc", "content": [...] }');
|
|
35
|
+
* const providers = [
|
|
36
|
+
* {
|
|
37
|
+
* provider: new EditorCardProvider(),
|
|
38
|
+
* maxNodesToPrefetch: 10,
|
|
39
|
+
* timeout: 500,
|
|
40
|
+
* },
|
|
41
|
+
* {
|
|
42
|
+
* provider: new EditorMentionsProvider(),
|
|
43
|
+
* maxNodesToPrefetch: 50,
|
|
44
|
+
* timeout: 500,
|
|
45
|
+
* },
|
|
46
|
+
* ];
|
|
47
|
+
*
|
|
48
|
+
* window['__SSR_EDITOR_NODE_DATA_PROVIDERS_DATA__'] = await prefetchNodeDataProvidersData({
|
|
49
|
+
* providers,
|
|
50
|
+
* doc,
|
|
51
|
+
* timeout: 1_000,
|
|
52
|
+
* maxNodesToVisit: 2_000
|
|
53
|
+
* });
|
|
54
|
+
* ```
|
|
55
|
+
*
|
|
56
|
+
* @param props The properties for prefetching node data.
|
|
57
|
+
* @returns Record of provider names to their respective SSR data,
|
|
58
|
+
* where each SSR data is a record of node data keys to the fetched data.
|
|
59
|
+
*/
|
|
60
|
+
export function prefetchNodeDataProvidersData(_x) {
|
|
61
|
+
return _prefetchNodeDataProvidersData.apply(this, arguments);
|
|
62
|
+
}
|
|
63
|
+
function _prefetchNodeDataProvidersData() {
|
|
64
|
+
_prefetchNodeDataProvidersData = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2(_ref) {
|
|
65
|
+
var providers, doc, timeout, _ref$maxNodesToVisit, maxNodesToVisit, providersWithDefaults, providerTimeouts, nodesWithProviders, promises, results;
|
|
66
|
+
return _regeneratorRuntime.wrap(function _callee2$(_context2) {
|
|
67
|
+
while (1) switch (_context2.prev = _context2.next) {
|
|
68
|
+
case 0:
|
|
69
|
+
providers = _ref.providers, doc = _ref.doc, timeout = _ref.timeout, _ref$maxNodesToVisit = _ref.maxNodesToVisit, maxNodesToVisit = _ref$maxNodesToVisit === void 0 ? Infinity : _ref$maxNodesToVisit;
|
|
70
|
+
providersWithDefaults = providers.map(function (_ref2) {
|
|
71
|
+
var provider = _ref2.provider,
|
|
72
|
+
_ref2$maxNodesToPrefe = _ref2.maxNodesToPrefetch,
|
|
73
|
+
maxNodesToPrefetch = _ref2$maxNodesToPrefe === void 0 ? Infinity : _ref2$maxNodesToPrefe,
|
|
74
|
+
_ref2$timeout = _ref2.timeout,
|
|
75
|
+
providerTimeout = _ref2$timeout === void 0 ? Infinity : _ref2$timeout;
|
|
76
|
+
return {
|
|
77
|
+
provider: provider,
|
|
78
|
+
maxNodesToPrefetch: maxNodesToPrefetch,
|
|
79
|
+
// Use the minimum of the global timeout and the provider-specific timeout
|
|
80
|
+
timeout: Math.min(providerTimeout, timeout)
|
|
81
|
+
};
|
|
82
|
+
});
|
|
83
|
+
providerTimeouts = providersWithDefaults.reduce(function (acc, _ref3) {
|
|
84
|
+
var provider = _ref3.provider,
|
|
85
|
+
timeout = _ref3.timeout;
|
|
86
|
+
acc[provider.name] = timeout;
|
|
87
|
+
return acc;
|
|
88
|
+
}, {});
|
|
89
|
+
nodesWithProviders = findNodesToPrefetch(doc, providersWithDefaults, maxNodesToVisit).map(function (_ref4) {
|
|
90
|
+
var provider = _ref4.provider,
|
|
91
|
+
nodes = _ref4.nodes;
|
|
92
|
+
return {
|
|
93
|
+
provider: provider,
|
|
94
|
+
nodes: nodes,
|
|
95
|
+
timeout: providerTimeouts[provider.name]
|
|
96
|
+
};
|
|
97
|
+
});
|
|
98
|
+
promises = nodesWithProviders.map( /*#__PURE__*/function () {
|
|
99
|
+
var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref5) {
|
|
100
|
+
var nodes, provider, timeout, timeoutPromise, data;
|
|
101
|
+
return _regeneratorRuntime.wrap(function _callee$(_context) {
|
|
102
|
+
while (1) switch (_context.prev = _context.next) {
|
|
103
|
+
case 0:
|
|
104
|
+
nodes = _ref5.nodes, provider = _ref5.provider, timeout = _ref5.timeout;
|
|
105
|
+
_context.prev = 1;
|
|
106
|
+
timeoutPromise = new Promise(function (resolve) {
|
|
107
|
+
setTimeout(function () {
|
|
108
|
+
resolve([]);
|
|
109
|
+
}, timeout);
|
|
110
|
+
});
|
|
111
|
+
_context.next = 5;
|
|
112
|
+
return Promise.race([provider.fetchNodesData(nodes), timeoutPromise]);
|
|
113
|
+
case 5:
|
|
114
|
+
data = _context.sent;
|
|
115
|
+
return _context.abrupt("return", {
|
|
116
|
+
provider: provider,
|
|
117
|
+
nodes: nodes,
|
|
118
|
+
data: data
|
|
119
|
+
});
|
|
120
|
+
case 9:
|
|
121
|
+
_context.prev = 9;
|
|
122
|
+
_context.t0 = _context["catch"](1);
|
|
123
|
+
return _context.abrupt("return", {
|
|
124
|
+
provider: provider,
|
|
125
|
+
nodes: nodes,
|
|
126
|
+
data: []
|
|
127
|
+
});
|
|
128
|
+
case 12:
|
|
129
|
+
case "end":
|
|
130
|
+
return _context.stop();
|
|
131
|
+
}
|
|
132
|
+
}, _callee, null, [[1, 9]]);
|
|
133
|
+
}));
|
|
134
|
+
return function (_x2) {
|
|
135
|
+
return _ref6.apply(this, arguments);
|
|
136
|
+
};
|
|
137
|
+
}());
|
|
138
|
+
_context2.next = 7;
|
|
139
|
+
return Promise.all(promises);
|
|
140
|
+
case 7:
|
|
141
|
+
results = _context2.sent;
|
|
142
|
+
return _context2.abrupt("return", results.reduce(function (acc, _ref7) {
|
|
143
|
+
var provider = _ref7.provider,
|
|
144
|
+
nodes = _ref7.nodes,
|
|
145
|
+
data = _ref7.data;
|
|
146
|
+
acc[provider.name] = data.reduce(function (providerSsrData, nodeData, nodeIndex) {
|
|
147
|
+
var node = nodes[nodeIndex];
|
|
148
|
+
var nodeDataKey = provider.nodeDataKey(node);
|
|
149
|
+
providerSsrData[nodeDataKey] = nodeData;
|
|
150
|
+
return providerSsrData;
|
|
151
|
+
}, {});
|
|
152
|
+
return acc;
|
|
153
|
+
}, {}));
|
|
154
|
+
case 9:
|
|
155
|
+
case "end":
|
|
156
|
+
return _context2.stop();
|
|
157
|
+
}
|
|
158
|
+
}, _callee2);
|
|
159
|
+
}));
|
|
160
|
+
return _prefetchNodeDataProvidersData.apply(this, arguments);
|
|
161
|
+
}
|
package/dist/types/index.d.ts
CHANGED
|
@@ -0,0 +1,138 @@
|
|
|
1
|
+
import type { JSONNode } from '@atlaskit/editor-json-transformer';
|
|
2
|
+
import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
|
|
3
|
+
/**
|
|
4
|
+
* Represents the SSR data for a single provider.
|
|
5
|
+
* It's a map where each key is a unique node data key and the value is the prefetched data for that node.
|
|
6
|
+
*
|
|
7
|
+
* @example
|
|
8
|
+
* {
|
|
9
|
+
* 'node-id-1': { value: 'some data' },
|
|
10
|
+
* 'node-id-2': { value: 'other data' }
|
|
11
|
+
* }
|
|
12
|
+
*/
|
|
13
|
+
type SSRData<Data> = {
|
|
14
|
+
[dataKey: string]: Data;
|
|
15
|
+
};
|
|
16
|
+
/**
|
|
17
|
+
* Represents the payload passed to the callback function when data is fetched.
|
|
18
|
+
* It can either contain an error or the fetched data.
|
|
19
|
+
*/
|
|
20
|
+
type CallbackPayload<Data> = {
|
|
21
|
+
/** An error that occurred while fetching data. */
|
|
22
|
+
error: Error;
|
|
23
|
+
data?: undefined;
|
|
24
|
+
} | {
|
|
25
|
+
/** Fetched data for the node. */
|
|
26
|
+
data: Data;
|
|
27
|
+
error?: undefined;
|
|
28
|
+
};
|
|
29
|
+
/**
|
|
30
|
+
* A Node Data Provider is responsible for fetching and caching data associated with specific ProseMirror nodes.
|
|
31
|
+
* It supports a cache-first-then-network strategy, with initial data potentially provided via SSR.
|
|
32
|
+
*
|
|
33
|
+
* @template Node The specific type of JSONNode this provider supports.
|
|
34
|
+
* @template Data The type of data this provider fetches and manages.
|
|
35
|
+
*/
|
|
36
|
+
export declare abstract class NodeDataProvider<Node extends JSONNode, Data> {
|
|
37
|
+
private cacheVersion;
|
|
38
|
+
private cache;
|
|
39
|
+
/**
|
|
40
|
+
* A unique name for the provider. Used for identification in SSR.
|
|
41
|
+
*/
|
|
42
|
+
abstract readonly name: string;
|
|
43
|
+
/**
|
|
44
|
+
* A type guard to check if a given JSONNode is supported by this provider.
|
|
45
|
+
* Used to ensure that the provider can handle the node type before attempting to fetch data.
|
|
46
|
+
*
|
|
47
|
+
* @param node The node to check.
|
|
48
|
+
* @returns `true` if the node is of the type supported by this provider, otherwise `false`.
|
|
49
|
+
*/
|
|
50
|
+
abstract isNodeSupported(node: JSONNode): node is Node;
|
|
51
|
+
/**
|
|
52
|
+
* Generates a unique key for a given node to be used for caching.
|
|
53
|
+
*
|
|
54
|
+
* @param node The node for which to generate a data key.
|
|
55
|
+
* @returns A unique string key for the node's data.
|
|
56
|
+
*/
|
|
57
|
+
abstract nodeDataKey(node: Node): string;
|
|
58
|
+
/**
|
|
59
|
+
* Fetches data for a batch of nodes from the network or another asynchronous source.
|
|
60
|
+
*
|
|
61
|
+
* @param nodes An array of nodes for which to fetch data.
|
|
62
|
+
* @returns A promise that resolves to an array of data corresponding to the input nodes.
|
|
63
|
+
*/
|
|
64
|
+
abstract fetchNodesData(nodes: Node[]): Promise<Data[]>;
|
|
65
|
+
protected constructor();
|
|
66
|
+
/**
|
|
67
|
+
* Sets the SSR data for the provider.
|
|
68
|
+
* This pre-populates the cache with data rendered on the server, preventing redundant network requests on the client.
|
|
69
|
+
* Calling this method will invalidate the existing cache.
|
|
70
|
+
*
|
|
71
|
+
* @example
|
|
72
|
+
* ```
|
|
73
|
+
* const ssrData = window.__SSR_NODE_DATA__ || {};
|
|
74
|
+
* nodeDataProvider.setSSRData(ssrData);
|
|
75
|
+
* ```
|
|
76
|
+
*
|
|
77
|
+
* @param ssrData A map of node data keys to their corresponding data.
|
|
78
|
+
*/
|
|
79
|
+
setSSRData(ssrData?: SSRData<Data>): void;
|
|
80
|
+
/**
|
|
81
|
+
* Clears all cached data.
|
|
82
|
+
* This increments the internal cache version, invalidating any pending network requests.
|
|
83
|
+
*
|
|
84
|
+
* @example
|
|
85
|
+
* ```
|
|
86
|
+
* function useMyNodeDataProvider(contentId: string) {
|
|
87
|
+
* const nodeDataProvider = new MyNodeDataProvider();
|
|
88
|
+
*
|
|
89
|
+
* // Reset the cache when the contentId changes (e.g., when the user navigates to a different page).
|
|
90
|
+
* useEffect(() => {
|
|
91
|
+
* nodeDataProvider.resetCache();
|
|
92
|
+
* }, [contentId]);
|
|
93
|
+
*
|
|
94
|
+
* return nodeDataProvider;
|
|
95
|
+
* }
|
|
96
|
+
* ```
|
|
97
|
+
*/
|
|
98
|
+
resetCache(): void;
|
|
99
|
+
/**
|
|
100
|
+
* Fetches data for a given node using a cache-first-then-network strategy.
|
|
101
|
+
*
|
|
102
|
+
* The provided callback may be called multiple times:
|
|
103
|
+
* 1. Immediately with data from the SSR cache, if available.
|
|
104
|
+
* 2. Asynchronously with data fetched from the network.
|
|
105
|
+
*
|
|
106
|
+
* @example
|
|
107
|
+
* ```
|
|
108
|
+
* const nodeDataProvider = new MyNodeDataProvider();
|
|
109
|
+
*
|
|
110
|
+
* nodeDataProvider.getData(node, (data) => {
|
|
111
|
+
* console.log('Node data:', data);
|
|
112
|
+
* });
|
|
113
|
+
* ```
|
|
114
|
+
*
|
|
115
|
+
* @param node The node (or its ProseMirror representation) for which to fetch data.
|
|
116
|
+
* @param callback The callback function to call with the fetched data or an error.
|
|
117
|
+
*/
|
|
118
|
+
getData(node: Node | PMNode, callback: (payload: CallbackPayload<Data>) => void): void;
|
|
119
|
+
private getDataAsync;
|
|
120
|
+
/**
|
|
121
|
+
* Fetches data for a given node and returns it as a Promise.
|
|
122
|
+
* This is a convenience wrapper around the `data` method for use with async/await.
|
|
123
|
+
*
|
|
124
|
+
* Note: This promise resolves with the *first* available data, which could be from the SSR cache or the network.
|
|
125
|
+
* It may not provide the most up-to-date data if a network fetch is in progress.
|
|
126
|
+
*
|
|
127
|
+
* Note: This method is only for migration purposes. Use {@link getData} in new code instead.
|
|
128
|
+
*
|
|
129
|
+
* @private
|
|
130
|
+
* @deprecated Don't use this method, use {@link getData} method instead.
|
|
131
|
+
* This method is only for migration purposes.
|
|
132
|
+
*
|
|
133
|
+
* @param node The node (or its ProseMirror representation) for which to fetch data.
|
|
134
|
+
* @returns A promise that resolves with the node's data.
|
|
135
|
+
*/
|
|
136
|
+
getDataAsPromise_DO_NOT_USE_OUTSIDE_MIGRATIONS(node: Node | PMNode): Promise<Data>;
|
|
137
|
+
}
|
|
138
|
+
export {};
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import type { JSONDocNode, JSONNode } from '@atlaskit/editor-json-transformer';
|
|
2
|
+
import type { NodeDataProvider } from '../node-data-provider';
|
|
3
|
+
interface ProviderWithNodes {
|
|
4
|
+
/** The provider that supports the nodes. */
|
|
5
|
+
provider: NodeDataProvider<JSONNode, unknown>;
|
|
6
|
+
/** The nodes that are supported by the provider. */
|
|
7
|
+
nodes: JSONNode[];
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Finds nodes in the document that are supported by the given providers, up to a maximum number of nodes.
|
|
11
|
+
*
|
|
12
|
+
* @param doc The document to search for nodes.
|
|
13
|
+
* @param providers An array of providers with their maximum nodes to prefetch.
|
|
14
|
+
* @param maxNodesToVisit The maximum number of nodes to visit in the document.
|
|
15
|
+
* @returns An array of objects, each containing a provider and the nodes that are supported by that provider.
|
|
16
|
+
*/
|
|
17
|
+
export declare function findNodesToPrefetch(doc: JSONDocNode, providers: {
|
|
18
|
+
provider: NodeDataProvider<JSONNode, unknown>;
|
|
19
|
+
maxNodesToPrefetch: number;
|
|
20
|
+
}[], maxNodesToVisit: number): ProviderWithNodes[];
|
|
21
|
+
export {};
|