@startinblox/boilerplate 3.0.0

package/src/helpers/components/orbitComponent.ts

@@ -0,0 +1,241 @@
+import { nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+
+import {
+  CLIENT_CONTEXT,
+  requestNavigation,
+  setupComponentSubscriptions,
+} from "@helpers";
+
+import { ComponentObjectsHandler } from "@helpers/components/componentObjectsHandler";
+
+import type {
+  Container,
+  LiveOrbit,
+  PropertiesPicker,
+  ProxyValue,
+  Resource,
+  UnknownResource,
+} from "@src/component";
+
+export default class extends ComponentObjectsHandler {
+  constructor({
+    defaultRoute = false,
+    setupSubscriptions = true,
+    ignoreRouter = false,
+  } = {}) {
+    super();
+    const attach = () => {
+      this._attach(defaultRoute, setupSubscriptions, ignoreRouter).then(
+        (attach: boolean) => {
+          if (attach) {
+            this.requestUpdate();
+          }
+        },
+      );
+    };
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", attach);
+    } else {
+      attach();
+    }
+  }
+
+  @property({ attribute: "default-data-src", reflect: true })
+  defaultDataSrc?: string;
+
+  @property({ attribute: "data-src", reflect: true })
+  dataSrc?: string;
+
+  @property({ attribute: "nested-field" })
+  nestedField?: string;
+
+  @property({ attribute: "uniq" })
+  uniq?: string;
+
+  @property({ attribute: "route" })
+  route: string | undefined;
+
+  @property({ attribute: false })
+  cherryPickedProperties: PropertiesPicker[] = [];
+
+  @state()
+  orbit: LiveOrbit | undefined;
+
+  @state()
+  currentRoute = "";
+
+  protected async _attach(
+    defaultRoute: boolean,
+    setupSubscriptions: boolean,
+    ignoreRouter: boolean
+  ) {
+    if (!this.orbit) {
+      if (window.orbit) {
+        this.orbit = window.orbit;
+        if (setupSubscriptions) {
+          setupComponentSubscriptions({
+            component: this,
+            defaultRoute: defaultRoute,
+            ignoreRouter: ignoreRouter,
+          });
+          if (this.route) {
+            this.component = this.orbit.getComponentFromRoute(this.route);
+            if (this.component) {
+              this.orbit.components.map((c) => {
+                if (c.uniq === this.component.uniq) {
+                  c.instance = this;
+                }
+                return c;
+              });
+            }
+          }
+          await this._afterAttach();
+          return Promise.resolve(true);
+        }
+      }
+    }
+    return Promise.resolve(false);
+  }
+
+  async _afterAttach() {
+    return Promise.resolve();
+  }
+
+  _navigate(e: Event) {
+    window.sibRouter.previousRoute = this.currentRoute;
+    window.sibRouter.previousResource = window.sibRouter.currentResource;
+    const navigator = e.target?.closest("[navigation-target]");
+    let target = navigator.getAttribute("navigation-target");
+    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
+      );
+      if (compatibleComponents) target = compatibleComponents[0]?.uniq;
+    }
+    if (target) {
+      requestNavigation(
+        (window.orbit ? window.orbit.getRoute(target, true) : target) +
+          (subrouter ? `-${subrouter}` : ""),
+        resource
+      );
+    }
+    e.preventDefault();
+  }
+
+  _normalizeLdpContains(value: Resource[] | Resource): Resource[] {
+    if (!Array.isArray(value) && value !== null) {
+      return [value];
+    }
+    return value;
+  }
+
+  async _expandContainer(
+    value: Resource[],
+    recursive = true
+  ): Promise<UnknownResource[]> {
+    const expandedContainer: UnknownResource[] = [];
+    for (const entry of value) {
+      const line = await this._getProxyValue(entry, recursive);
+      if (line) expandedContainer.push(line);
+    }
+    return expandedContainer;
+  }
+
+  async _getProperties(
+    resource: Resource,
+    recursive = true,
+    targetProperties: PropertiesPicker[] = this.cherryPickedProperties
+  ) {
+    const properties = await resource.properties;
+    const response: Resource = {
+      "@id": resource["@id"],
+      "@type": resource["@type"],
+      "@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] = prop.cast(response[prop.value]);
+        }
+      }
+    }
+    return await this._responseAdaptator(response);
+  }
+
+  async _getProxyValue(
+    resource:
+      | string
+      | Resource
+      | ProxyValue<Resource | Container<ProxyValue<Resource> | Resource>>,
+    recursive = true,
+    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);
+          }
+          return await this._getProperties(target, recursive, targetProperties);
+        }
+      }
+      return;
+    } catch (e) {
+      if (import.meta.env.DEV) console.error(e);
+    }
+  }
+
+  async _responseAdaptator(response: Resource) {
+    return Promise.resolve(response);
+  }
+
+  gatekeeper() {
+    if (
+      !this.orbit ||
+      (!this.noRouter &&
+        this.route &&
+        this.currentRoute &&
+        !this.route.startsWith(this.currentRoute))
+    ) {
+      return nothing;
+    }
+
+    if (!this.dataSrc) {
+      return nothing;
+    }
+  }
+}

package/src/helpers/components/setupCacheInvalidation.ts

@@ -0,0 +1,37 @@
+/*
+Common code for components
+Handle cache invalidation based on keywords
+*/
+const setupCacheInvalidation = (
+  component: any,
+  { keywords = [] as string[], attributes = ["dataSrc"] } = {}
+) => {
+  if (keywords && attributes) {
+    if (component.caching === undefined) {
+      component.caching = 0;
+    }
+    if (component.hasCachedDatas === undefined) {
+      component.hasCachedDatas = false;
+    }
+
+    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();
+      }
+    };
+
+    component._subscriptions.add(["save", component.cacheListener]);
+
+    component._subscribe();
+  }
+};
+
+export default setupCacheInvalidation;

package/src/helpers/components/setupCacheOnResourceReady.ts

@@ -0,0 +1,32 @@
+/*
+Common code for components
+Handle cache invalidation based on keywords
+*/
+const setupCacheOnResourceReady = (component: any, { keywords = [] } = {}) => {
+  if (keywords) {
+    if (component.caching === undefined) {
+      component.caching = 0;
+    }
+    if (component.hasCachedDatas === undefined) {
+      component.hasCachedDatas = false;
+    }
+
+    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();
+      }
+    };
+
+    component._subscriptions.add([
+      "resourceReady",
+      component.resourceCacheListener,
+    ]);
+
+    component._subscribe();
+  }
+};
+
+export default setupCacheOnResourceReady;

package/src/helpers/components/setupComponentSubscriptions.ts

@@ -0,0 +1,73 @@
+import uniq from "@helpers/utils/uniq";
+/*
+Common code for components
+Handles uniq, route, optional orbit interface, subscriptions manager for each component
+*/
+const setupComponentSubscriptions = ({
+  component,
+  defaultRoute = false,
+  ignoreRouter = false,
+}: {
+  component: any;
+  defaultRoute: boolean;
+  ignoreRouter: boolean;
+}) => {
+  if (!component.uniq) {
+    component.uniq = uniq();
+    if (defaultRoute && !component.route && !ignoreRouter) {
+      component.route = defaultRoute;
+    }
+  }
+  component._subscriptions = new Set();
+  if (!ignoreRouter) {
+    if (!component.route) {
+      component.route = component.uniq;
+      if (window.orbit) {
+        component.route = window.orbit.getRoute(component.uniq);
+      }
+    }
+    component.noRouter = true;
+    let router = document.querySelector("solid-router");
+    while (router) {
+      component.noRouter = false;
+      component.currentRoute = router.currentRouteName;
+      component.currentResource = window.sibRouter.currentResource;
+      router = document.querySelector(
+        `[data-view="${router.currentRouteName}"] solid-router`,
+      );
+    }
+
+    component.navigationListener = () => {
+      // component.currentRoute = e.detail?.route;
+      // component.currentResource = window.sibRouter.currentResource;
+      let router = document.querySelector("solid-router");
+      while (router) {
+        component.noRouter = false;
+        component.currentRoute = router.currentRouteName;
+        component.currentResource = window.sibRouter.currentResource;
+        router = document.querySelector(
+          `[data-view="${router.currentRouteName}"] solid-router`,
+        );
+      }
+      component.requestUpdate();
+    };
+    component._subscriptions.add(["navigate", component.navigationListener]);
+  }
+
+  component._subscribe = () => {
+    component._unsubscribe();
+    for (const subscription of component._subscriptions) {
+      document.addEventListener(subscription[0], subscription[1]);
+    }
+  };
+
+  component._unsubscribe = () => {
+    for (const subscription of component._subscriptions) {
+      document.removeEventListener(subscription[0], subscription[1]);
+    }
+  };
+
+  component._subscribe();
+};
+
+export default setupComponentSubscriptions;

package/src/helpers/components/setupOnSaveReset.ts

@@ -0,0 +1,20 @@
+/*
+Common code for components
+Handle cache invalidation based on keywords
+*/
+const setupOnSaveReset = (component: any, { keywords = [] } = {}) => {
+  if (keywords) {
+    component.saveListener = (e: Event) => {
+      const resource = e.detail.id || e.detail.resource["@id"];
+      if (keywords.some((keyword) => resource?.includes(keyword))) {
+        component._setValue({ target: { value: "" } });
+      }
+    };
+
+    component._subscriptions.add(["save", component.saveListener]);
+
+    component._subscribe();
+  }
+};
+
+export default setupOnSaveReset;

package/src/helpers/datas/dataBuilder.ts

@@ -0,0 +1,43 @@
+import type { Resource } from "@src/component";
+
+export const recusiveRemovePath = (obj: Resource, pathArray: string[]) => {
+  if (!obj || pathArray.length === 0) return;
+  const key = pathArray.shift();
+
+  if (key !== undefined) {
+    if (pathArray.length === 0) {
+      delete obj[key];
+    } else if (obj[key] && typeof obj[key] === "object") {
+      recusiveRemovePath(obj[key], pathArray);
+    }
+  }
+};
+
+export const dataBuilder = (
+  resource: Resource,
+  pathToRemove: string[] = [],
+  replacements: object = {},
+  removeThenReplace = false,
+): Resource => {
+  const clone = structuredClone(resource);
+
+  if (!removeThenReplace) {
+    for (const path of pathToRemove) {
+      const splittedPath = path.split(".");
+      recusiveRemovePath(clone, splittedPath);
+    }
+  }
+
+  for (const [key, value] of Object.entries(replacements)) {
+    clone[key] = value;
+  }
+
+  if (removeThenReplace) {
+    for (const path of pathToRemove) {
+      const splittedPath = path.split(".");
+      recusiveRemovePath(clone, splittedPath);
+    }
+  }
+
+  return clone;
+};

package/src/helpers/datas/filterGenerator.ts

@@ -0,0 +1,29 @@
+const filterGenerator = (objects: { [key: string]: any }[], field: string) => {
+  return objects
+    .flatMap((obj) => {
+      if (obj[field]) {
+        if (Array.isArray(obj[field])) {
+          return obj[field].map((v) => ({
+            label: v?.name || v,
+            value: v?.["@id"] || v,
+          }));
+        }
+        return {
+          label: obj[field]?.name || obj[field],
+          value: obj[field]?.["@id"] || obj[field],
+        };
+      }
+      return;
+    })
+    .filter(
+      (value, index, self) =>
+        value?.label &&
+        value?.value &&
+        index ===
+          self.findIndex(
+            (t) => t?.label === value?.label && t?.value === value?.value,
+          ),
+    );
+};
+
+export default filterGenerator;

package/src/helpers/datas/filterObjectByDateAfter.ts

@@ -0,0 +1,80 @@
+import type { Resource } from "@src/component";
+
+function isValidDateValue(value: unknown): value is string | number | Date {
+  return !Number.isNaN(new Date((value as Date)).getTime());
+}
+
+const checkDateIsAfterRecursive = (
+  data: any,
+  propName: string,
+  thresholdDate: 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 (isValidDateValue(current)) {
+    const date = new Date(current);
+
+    if (date > thresholdDate) {
+      return true;
+    }
+  } else {
+    return false;
+  }
+
+  if (Array.isArray(data)) {
+    return data.some((item) =>
+      checkDateIsAfterRecursive(item, propName, thresholdDate)
+    );
+  }
+
+  if (typeof data === "object") {
+    return Object.entries(data).some(([key, value]) => {
+      if (key === propName && isValidDateValue(value)) {
+        return false;
+      }
+      return checkDateIsAfterRecursive(value, propName, thresholdDate);
+    });
+  }
+
+  return false;
+};
+
+const filterObjectByDateAfter = (
+  array: Resource[],
+  propName: string,
+  thresholdDateString: string
+): Resource[] => {
+  if (
+    !propName ||
+    !thresholdDateString ||
+    typeof thresholdDateString !== "string"
+  ) {
+    return array;
+  }
+
+  const thresholdDate = new Date(thresholdDateString);
+
+  if (Number.isNaN(thresholdDate.getTime())) {
+    console.warn(`Invalid threshold date provided: ${thresholdDateString}`);
+    return array;
+  }
+
+  return array.filter((obj) =>
+    checkDateIsAfterRecursive(obj, propName, thresholdDate)
+  );
+};
+
+export default filterObjectByDateAfter;

package/src/helpers/datas/filterObjectById.ts

@@ -0,0 +1,54 @@
+import type { Resource } from "@src/component";
+
+const filterObjectById = (
+  array: Resource[],
+  propName: string,
+  targetId: string
+): Resource[] => {
+  if (!propName || !targetId) {
+    return array;
+  }
+
+  return array.filter((obj) => {
+    let current = obj;
+    const propPath = propName.split(".");
+
+    for (const segment of propPath) {
+      if (current && typeof current === "object" && segment in current) {
+        current = current[segment];
+      } else {
+        return false;
+      }
+    }
+
+    const propValue = current;
+
+    if (!propValue) {
+      return false;
+    }
+
+    if (
+      typeof propValue === "object" &&
+      !Array.isArray(propValue) &&
+      propValue !== null &&
+      "@id" in propValue &&
+      propValue["@id"] === targetId
+    ) {
+      return true;
+    }
+
+    if (Array.isArray(propValue)) {
+      return propValue.some(
+        (item) =>
+          typeof item === "object" &&
+          item !== null &&
+          "@id" in item &&
+          item["@id"] === targetId
+      );
+    }
+
+    return false;
+  });
+};
+
+export default filterObjectById;