Add loadResourceTree function

Author: Polleps

package.json

@@ -6,7 +6,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "0.34.10",
+  "version": "0.34.11",
   "type": "module",
   "exports": {
     ".": {
@@ -45,7 +45,7 @@
   },
   "packageManager": "pnpm@7.13.3",
   "dependencies": {
-    "@tomic/lib": "^0.34.9",
+    "@tomic/lib": "^0.34.11",
     "eslint": "^8.30.0",
     "svelte": "^3.55.0"
   },

src/index.ts

@@ -8,3 +8,4 @@ export const initStore = (store: Store) => {
 export { store } from './stores/store';
 export { getResource } from './stores/getResource';
 export { getValue } from './stores/getValue';
+export * from './loadResourceTree';

src/loadResourceTree.ts

@@ -0,0 +1,71 @@
+import { JSONValue, Resource } from '@tomic/lib';
+import { get } from 'svelte/store';
+import { store as storeStore } from './stores/store';
+
+export interface ResourceTreeTemplate {
+  [property: string]: true | ResourceTreeTemplate;
+}
+
+const normalize = (value: JSONValue): string[] => {
+  if (typeof value === 'string') {
+    return [value];
+  }
+
+  if (Array.isArray(value)) {
+    return value as string[];
+  }
+
+  return [];
+};
+
+/**
+ * Make sure the given tree of resources are available in the store.
+ * This is only useful for SSR and SSG as the getResource functions don't wait for the resource to be fully available
+ * causing SvelteKit to render incomplete pages.
+ *
+ * **Example**:
+ * ```ts
+ * await loadResourceTree('https://myblog.com', {
+ *  [myProperties.blogPostCollection]: {
+ *   [urls.properties.collection.members]: {
+ *    [myProperties.coverImage]: true,
+ *    [myProperties.author]: true,
+ *  }
+ * });
+ * ```
+ */
+export const loadResourceTree = async (
+  subject: string,
+  treeTemplate: ResourceTreeTemplate,
+): Promise<void> => {
+  const store = get(storeStore);
+
+  const loadResourceTreeInner = async (
+    resource: Resource,
+    tree: ResourceTreeTemplate,
+  ) => {
+    const promises: Promise<unknown>[] = [];
+
+    for (const [property, branch] of Object.entries(tree)) {
+      await store.getResourceAsync(property);
+      const values = normalize(resource.get(property));
+      const resources = await Promise.all(
+        values.map(value => store.getResourceAsync(value)),
+      );
+
+      if (typeof branch === 'boolean') {
+        continue;
+      }
+
+      for (const res of resources) {
+        promises.push(loadResourceTreeInner(res, branch));
+      }
+    }
+
+    return Promise.allSettled(promises.flat());
+  };
+
+  const resource = await store.getResourceAsync(subject);
+
+  await loadResourceTreeInner(resource, treeTemplate);
+};