@startinblox/boilerplate 4.3.1 → 6.0.0

package/src/helpers/components/orbitComponent.ts

@@ -20,8 +20,13 @@ export default class extends ComponentObjectsHandler {
     defaultRoute = false,
     setupSubscriptions = true,
     ignoreRouter = false,
+  }: {
+    defaultRoute?: boolean | string;
+    setupSubscriptions?: boolean;
+    ignoreRouter?: boolean;
   } = {}) {
     super();
+
     const attach = () => {
       if (document.readyState === "complete") {
         this._attach(defaultRoute, setupSubscriptions, ignoreRouter).then(
@@ -29,10 +34,11 @@ export default class extends ComponentObjectsHandler {
             if (attach) {
               this.requestUpdate();
             }
-          }
+          },
         );
       }
     };
+
     if (document.readyState === "complete") {
       attach();
     } else {
@@ -40,6 +46,9 @@ export default class extends ComponentObjectsHandler {
     }
   }
 
+  @state()
+  ready = false;
+
   @property({ attribute: "default-data-src", reflect: true })
   defaultDataSrc?: string;
 
@@ -65,9 +74,9 @@ export default class extends ComponentObjectsHandler {
   currentRoute = "";
 
   protected async _attach(
-    defaultRoute: boolean,
+    defaultRoute: boolean | string,
     setupSubscriptions: boolean,
-    ignoreRouter: boolean
+    ignoreRouter: boolean,
   ) {
     if (!this.orbit) {
       if (window.orbit) {
@@ -78,18 +87,29 @@ export default class extends ComponentObjectsHandler {
             defaultRoute: defaultRoute,
             ignoreRouter: ignoreRouter,
           });
+
           if (this.route) {
             this.component = this.orbit.getComponentFromRoute(this.route);
             if (this.component) {
-              this.orbit.components.map((c) => {
+              for (const c of this.orbit.components) {
                 if (c.uniq === this.component.uniq) {
                   c.instance = this;
                 }
-                return c;
-              });
+              }
             }
           }
+
           await this._afterAttach();
+
+          this.ready = true;
+          this.dispatchEvent(
+            new CustomEvent("component-ready", {
+              detail: {
+                component: this.component,
+              },
+            }),
+          );
+
           return Promise.resolve(true);
         }
       }
@@ -109,24 +129,31 @@ export default class extends ComponentObjectsHandler {
     const subrouter = navigator.getAttribute("navigation-subrouter");
     const resource = navigator.getAttribute("navigation-resource");
     const rdfType = navigator.getAttribute("navigation-rdf-type");
+
     if (rdfType) {
       const compatibleComponents = window.orbit?.components?.filter(
-        (c) => c?.routeAttributes?.["rdf-type"] === rdfType
+        (c) => c?.routeAttributes?.["rdf-type"] === rdfType,
       );
+
       if (compatibleComponents) target = compatibleComponents[0]?.uniq;
     }
+
     if (target) {
       requestNavigation(
         (window.orbit ? window.orbit.getRoute(target, true) : target) +
           (subrouter ? `-${subrouter}` : ""),
-        resource
+        resource,
       );
     }
+
     e.preventDefault();
   }
 
-  _normalizeLdpContains(value: Resource[] | Resource): Resource[] {
-    if (!Array.isArray(value) && value !== null) {
+  _normalizeLdpContains(value: Resource[] | Resource | null): Resource[] {
+    if (value === null) {
+      return [];
+    }
+    if (!Array.isArray(value)) {
       return [value];
     }
     return value;
@@ -134,20 +161,27 @@ export default class extends ComponentObjectsHandler {
 
   async _expandContainer(
     value: Resource[],
-    recursive = true
+    recursive = true,
+    targetProperties: PropertiesPicker[] = this.cherryPickedProperties,
   ): Promise<UnknownResource[]> {
     const expandedContainer: UnknownResource[] = [];
-    for (const entry of value) {
-      const line = await this._getProxyValue(entry, recursive);
-      if (line) expandedContainer.push(line);
-    }
+    await Promise.all(
+      value.map(async (entry) => {
+        const line = await this._getProxyValue(
+          await entry,
+          recursive,
+          targetProperties,
+        );
+        if (line) expandedContainer.push(line);
+      }),
+    );
     return expandedContainer;
   }
 
   async _getProperties(
     resource: Resource,
     recursive = true,
-    targetProperties: PropertiesPicker[] = this.cherryPickedProperties
+    targetProperties: PropertiesPicker[] = this.cherryPickedProperties,
   ) {
     const properties = await resource.properties;
     const response: Resource = {
@@ -156,63 +190,78 @@ export default class extends ComponentObjectsHandler {
       "@context": resource.serverContext,
       _originalResource: resource,
     };
-    for (const prop of targetProperties) {
-      if (properties?.includes(prop.key)) {
-        response[prop.value] = await resource.get(prop.key);
-        if (prop.expand) {
-          response[prop.value] = await this._getProxyValue(
-            response[prop.value],
-            recursive,
-            targetProperties
-          );
-        }
-        if (prop.cast) {
-          response[prop.value] = await prop.cast(response[prop.value]);
-        }
+    const propPromises = targetProperties.map(async (prop) => {
+      if (!properties?.includes(prop.key)) return;
+
+      let value = await resource.get(prop.key);
+
+      if (prop.expand) {
+        value = await this._getProxyValue(value, recursive, targetProperties);
+      }
+
+      if (prop.cast) {
+        value = await prop.cast(value);
       }
+      return { prop, value };
+    });
+
+    const results = (await Promise.all(propPromises)).filter(
+      (r): r is { prop: PropertiesPicker; value: unknown } => r !== undefined,
+    );
+
+    for (const { prop, value } of results) {
+      if (value !== undefined) response[prop.value] = value;
     }
+
     return await this._responseAdaptator(response);
   }
 
+  async _hasCherryPickedProperties(resource: Resource) {
+    const properties = await resource.properties;
+
+    for (const prop of this.cherryPickedProperties) {
+      if (properties?.includes(prop.key)) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
   async _getProxyValue(
     resource:
       | string
       | Resource
       | ProxyValue<Resource | Container<ProxyValue<Resource> | Resource>>,
     recursive = true,
-    targetProperties: PropertiesPicker[] = this.cherryPickedProperties
+    targetProperties: PropertiesPicker[] = this.cherryPickedProperties,
   ) {
     try {
-      if (resource) {
-        let target = resource;
-        if (typeof resource === "string") {
-          target = await window.sibStore.getData(resource, CLIENT_CONTEXT);
-        }
-        if (typeof resource !== "string" && resource.isFullResource) {
-          if (!resource.isFullResource?.()) {
-            target = await window.sibStore.getData(
-              resource["@id"],
-              CLIENT_CONTEXT
-            );
-          }
-        }
-        if (typeof resource !== "string" && !resource.isFullResource) {
-          // Edge case when calling getProxyValue with an already
-          // fetched resource with server search, not a proxy
-          (target as Resource).properties = Object.keys(target);
-          (target as Resource).get = (property: any) =>
-            (target as Resource)[property];
-        }
-        if (!target) return { _originalResource: target };
-        if (typeof target === "object" && target !== null) {
-          if (target["ldp:contains"]) {
-            const value = this._normalizeLdpContains(target["ldp:contains"]);
-            return await this._expandContainer(value, recursive);
-          }
+      if (!resource) return;
+
+      let target = resource;
+
+      if (typeof resource === "string") {
+        target = await window.sibStore.getData(resource, CLIENT_CONTEXT);
+      } else if (resource.isFullResource && !resource.isFullResource?.()) {
+        target = await window.sibStore.getData(resource["@id"], CLIENT_CONTEXT);
+      }
+
+      if (!target) return { _originalResource: target };
+
+      if (typeof target !== "object" || target === null) return;
+
+      if (target.isContainer?.() && target["ldp:contains"]) {
+        if (await this._hasCherryPickedProperties(target)) {
           return await this._getProperties(target, recursive, targetProperties);
         }
+
+        const value = this._normalizeLdpContains(await target["ldp:contains"]);
+
+        return await this._expandContainer(value, recursive, targetProperties);
       }
-      return;
+
+      return await this._getProperties(target, recursive, targetProperties);
     } catch (e) {
       if (import.meta.env.DEV) console.error(e);
     }

package/src/helpers/components/setupCacheInvalidation.ts

@@ -7,35 +7,62 @@ const setupCacheInvalidation = (
   { keywords = [] as string[], attributes = ["dataSrc"] } = {}
 ) => {
   const setup = () => {
-    if (keywords && attributes) {
-      if (component.caching === undefined) {
-        component.caching = 0;
-      }
-      if (component.hasCachedDatas === undefined) {
-        component.hasCachedDatas = false;
-      }
+    if (!keywords.length || !attributes.length) return;
+
+    if (component.caching === undefined) {
+      component.caching = 0;
+    }
+    if (component.hasCachedDatas === undefined) {
+      component.hasCachedDatas = false;
+    }
+
+    let updateScheduled = false;
+    const keywordSet = new Set(keywords);
+
+    component.cacheListener = (e: Event) => {
+      const resource = e.detail.id || e.detail.resource?.["@id"];
+      if (!resource) return;
+
+      const isMatch = Array.from(keywordSet).some((keyword) => {
+        const idx = resource.indexOf(keyword);
+        return idx !== -1 && (idx === 0 || resource[idx - 1] === "/");
+      });
 
-      component.cacheListener = (e: Event) => {
-        const resource = e.detail.id || e.detail.resource["@id"];
-        if (keywords.some((keyword) => resource?.includes(keyword))) {
-          for (const attribute of attributes) {
-            if (component[attribute] && resource !== component[attribute]) {
-              window.sibStore.clearCache(component[attribute]);
-            }
-          }
-          component.caching++;
-          component.hasCachedDatas = false;
-          component.requestUpdate();
+      if (!isMatch) return;
+
+      let cacheCleared = false;
+      for (const attribute of attributes) {
+        if (component[attribute] && resource !== component[attribute]) {
+          window.sibStore.clearCache(component[attribute]);
+          cacheCleared = true;
         }
-      };
+      }
 
-      component._subscriptions.add(["save", component.cacheListener]);
+      if (cacheCleared) {
+        component.caching++;
+        component.hasCachedDatas = false;
+        if (!updateScheduled) {
+          updateScheduled = true;
+          requestAnimationFrame(() => {
+            component.requestUpdate();
+            updateScheduled = false;
+          });
+        }
+      }
+    };
 
-      component._subscribe();
-    }
+    component._subscriptions.add(["save", component.cacheListener]);
+    component._subscribe();
   };
+
   if (document.readyState !== "complete") {
-    document.addEventListener("DOMContentLoaded", setup);
+    const listener = () => {
+      if (document.readyState === "complete") {
+        document.removeEventListener("readystatechange", listener);
+        setup();
+      }
+    };
+    document.addEventListener("readystatechange", listener);
   } else {
     setup();
   }

package/src/helpers/components/setupCacheOnResourceReady.ts

@@ -2,35 +2,54 @@
 Common code for components
 Handle cache invalidation based on keywords
 */
-const setupCacheOnResourceReady = (component: any, { keywords = [] } = {}) => {
+const setupCacheOnResourceReady = (component: any, { keywords = [] as string[] } = {}) => {
   const setup = () => {
-    if (keywords) {
-      if (component.caching === undefined) {
-        component.caching = 0;
-      }
-      if (component.hasCachedDatas === undefined) {
-        component.hasCachedDatas = false;
-      }
+    if (!keywords.length) return;
 
-      component.resourceCacheListener = (e: Event) => {
-        const resource = e.detail.id || e.detail.resource["@id"];
-        if (keywords.some((keyword) => resource?.includes(keyword))) {
-          component.caching++;
-          component.hasCachedDatas = false;
-          component.requestUpdate();
-        }
-      };
+    if (component.caching === undefined) {
+      component.caching = 0;
+    }
+    if (component.hasCachedDatas === undefined) {
+      component.hasCachedDatas = false;
+    }
 
-      component._subscriptions.add([
-        "resourceReady",
-        component.resourceCacheListener,
-      ]);
+    let updateScheduled = false;
+    const keywordSet = new Set(keywords);
 
-      component._subscribe();
-    }
+    component.resourceCacheListener = (e: Event) => {
+      const resource = e.detail.id || e.detail.resource?.["@id"];
+      if (!resource) return;
+
+      const isMatch = Array.from(keywordSet).some((keyword) => {
+        const idx = resource.indexOf(keyword);
+        return idx !== -1 && (idx === 0 || resource[idx - 1] === "/");
+      });
+
+      if (isMatch) {
+        component.caching++;
+        component.hasCachedDatas = false;
+        if (!updateScheduled) {
+          updateScheduled = true;
+          requestAnimationFrame(() => {
+            component.requestUpdate();
+            updateScheduled = false;
+          });
+        }
+      }
+    };
+
+    component._subscriptions.add(["resourceReady", component.resourceCacheListener]);
+    component._subscribe();
   };
+
   if (document.readyState !== "complete") {
-    document.addEventListener("DOMContentLoaded", setup);
+    const listener = () => {
+      if (document.readyState === "complete") {
+        document.removeEventListener("readystatechange", listener);
+        setup();
+      }
+    };
+    document.addEventListener("readystatechange", listener);
   } else {
     setup();
   }

package/src/helpers/components/setupComponentSubscriptions.ts

@@ -1,4 +1,5 @@
 import uniq from "@helpers/utils/uniq";
+
 /*
 Common code for components
 Handles uniq, route, optional orbit interface, subscriptions manager for each component
@@ -9,7 +10,7 @@ const setupComponentSubscriptions = ({
   ignoreRouter = false,
 }: {
   component: any;
-  defaultRoute: boolean;
+  defaultRoute: boolean | string;
   ignoreRouter: boolean;
 }) => {
   if (!component.uniq) {
@@ -28,26 +29,26 @@ const setupComponentSubscriptions = ({
     }
     component.noRouter = true;
     let router = document.querySelector("solid-router");
+    const currentResource = window.sibRouter.currentResource;
     while (router) {
       component.noRouter = false;
       component.currentRoute = router.currentRouteName;
-      component.currentResource = window.sibRouter.currentResource;
-      router = document.querySelector(
-        `[data-view="${router.currentRouteName}"] solid-router`,
-      );
+      component.currentResource = currentResource;
+      const nextRouterSelector = `[data-view="${router.currentRouteName}"] solid-router`;
+      router = document.querySelector(nextRouterSelector);
     }
 
     component.navigationListener = () => {
       // component.currentRoute = e.detail?.route;
       // component.currentResource = window.sibRouter.currentResource;
       let router = document.querySelector("solid-router");
+      const currentResource = window.sibRouter.currentResource;
       while (router) {
         component.noRouter = false;
         component.currentRoute = router.currentRouteName;
-        component.currentResource = window.sibRouter.currentResource;
-        router = document.querySelector(
-          `[data-view="${router.currentRouteName}"] solid-router`,
-        );
+        component.currentResource = currentResource;
+        const nextRouterSelector = `[data-view="${router.currentRouteName}"] solid-router`;
+        router = document.querySelector(nextRouterSelector);
       }
       component.requestUpdate();
     };

package/src/helpers/components/setupOnSaveReset.ts

@@ -2,18 +2,40 @@
 Common code for components
 Handle cache invalidation based on keywords
 */
-const setupOnSaveReset = (component: any, { keywords = [] } = {}) => {
-  if (keywords) {
+const setupOnSaveReset = (component: any, { keywords = [] as string[] } = {}) => {
+  const setup = () => {
+    if (!keywords.length) return;
+
+    const keywordSet = new Set(keywords);
+
     component.saveListener = (e: Event) => {
-      const resource = e.detail.id || e.detail.resource["@id"];
-      if (keywords.some((keyword) => resource?.includes(keyword))) {
+      const resource = e.detail.id || e.detail.resource?.["@id"];
+      if (!resource) return;
+
+      const isMatch = Array.from(keywordSet).some((keyword) => {
+        const idx = resource.indexOf(keyword);
+        return idx !== -1 && (idx === 0 || resource[idx - 1] === "/");
+      });
+
+      if (isMatch) {
         component._setValue({ target: { value: "" } });
       }
     };
 
     component._subscriptions.add(["save", component.saveListener]);
-
     component._subscribe();
+  };
+
+  if (document.readyState !== "complete") {
+    const listener = () => {
+      if (document.readyState === "complete") {
+        document.removeEventListener("readystatechange", listener);
+        setup();
+      }
+    };
+    document.addEventListener("readystatechange", listener);
+  } else {
+    setup();
   }
 };
 

package/src/helpers/datas/checkValueInIntervalRecursive.ts

@@ -0,0 +1,66 @@
+function isValidDateValue(value: unknown): value is string | number | Date {
+  if (
+    typeof value !== "string" &&
+    typeof value !== "number" &&
+    !(value instanceof Date)
+  ) {
+    return false;
+  }
+
+  return !Number.isNaN(new Date(value).getTime());
+}
+
+const checkValueInIntervalRecursive = (
+  data: any,
+  propName: string,
+  startValue: number | Date,
+  endValue: number | Date,
+): boolean => {
+  if (data === null || data === undefined) {
+    return false;
+  }
+
+  const propPath = propName.split(".");
+  let current = data;
+
+  for (const segment of propPath) {
+    if (current && typeof current === "object" && segment in current) {
+      current = current[segment];
+    } else {
+      return false;
+    }
+  }
+
+  if (typeof current === "number") {
+    if (typeof startValue === "number" && typeof endValue === "number") {
+      if (startValue <= current && current <= endValue) {
+        return true;
+      }
+    }
+  } else if (isValidDateValue(current)) {
+    const date = new Date(current);
+    if (startValue instanceof Date && endValue instanceof Date) {
+      if (startValue <= date && date <= endValue) {
+        return true;
+      }
+    }
+  } else {
+    return false;
+  }
+
+  if (Array.isArray(data)) {
+    return data.some((item) =>
+      checkValueInIntervalRecursive(item, propName, startValue, endValue),
+    );
+  }
+
+  if (typeof data === "object") {
+    return Object.entries(data).some(([_key, value]) =>
+      checkValueInIntervalRecursive(value, propName, startValue, endValue),
+    );
+  }
+
+  return false;
+};
+
+export default checkValueInIntervalRecursive;

package/src/helpers/datas/dataBuilder.ts

@@ -1,6 +1,6 @@
-import type { Resource } from "@src/component";
+import type { UnknownResource } from "@src/component";
 
-export const recusiveRemovePath = (obj: Resource, pathArray: string[]) => {
+export const recusiveRemovePath = (obj: UnknownResource, pathArray: string[]) => {
   if (!obj || pathArray.length === 0) return;
   const key = pathArray.shift();
 
@@ -14,11 +14,11 @@ export const recusiveRemovePath = (obj: Resource, pathArray: string[]) => {
 };
 
 export const dataBuilder = (
-  resource: Resource,
+  resource: UnknownResource,
   pathToRemove: string[] = [],
   replacements: object = {},
   removeThenReplace = false,
-): Resource => {
+): UnknownResource => {
   const clone = structuredClone(resource);
 
   if (!removeThenReplace) {

package/src/helpers/datas/filterGenerator.ts

@@ -1,4 +1,6 @@
 const filterGenerator = (objects: { [key: string]: any }[], field: string) => {
+  const seen = new Map<string, boolean>();
+
   return objects
     .flatMap((obj) => {
       if (obj[field]) {
@@ -13,17 +15,18 @@ const filterGenerator = (objects: { [key: string]: any }[], field: string) => {
           value: obj[field]?.["@id"] || obj[field],
         };
       }
-      return;
+      return {
+        label: false,
+        value: false,
+      };
     })
-    .filter(
-      (value, index, self) =>
-        value?.label &&
-        value?.value &&
-        index ===
-          self.findIndex(
-            (t) => t?.label === value?.label && t?.value === value?.value,
-          ),
-    );
+    .filter((value) => {
+      if (!value?.label || !value?.value) return false;
+      const key = `${value.label}|${value.value}`;
+      if (seen.has(key)) return false;
+      seen.set(key, true);
+      return true;
+    });
 };
 
 export default filterGenerator;

package/src/helpers/datas/filterObjectByDateAfter.ts

@@ -1,4 +1,4 @@
-import type { Resource } from "@src/component";
+import type { UnknownResource } from "@src/component";
 
 function isValidDateValue(value: unknown): value is string | number | Date {
   return !Number.isNaN(new Date((value as Date)).getTime());
@@ -53,10 +53,10 @@ const checkDateIsAfterRecursive = (
 };
 
 const filterObjectByDateAfter = (
-  array: Resource[],
+  array: UnknownResource[],
   propName: string,
   thresholdDateString: string
-): Resource[] => {
+): UnknownResource[] => {
   if (
     !propName ||
     !thresholdDateString ||