@startinblox/components-ds4go 2.3.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startinblox/components-ds4go",
-  "version": "2.3.0",
+  "version": "3.0.0",
   "description": "Startin'blox DS4GO",
   "main": "dist/index.js",
   "type": "module",
@@ -55,8 +55,8 @@
     "watch": "lit-localize build && vite",
     "build": "lit-localize build && vite build",
     "serve": "vite preview",
-    "cy:open": "cypress open --component",
-    "cy:run": "lit-localize build && cypress run --component",
+    "cy:open": "cypress open",
+    "cy:run": "lit-localize build && cypress run --e2e && cypress run --component",
     "storybook": "lit-localize build && storybook dev -p 6006",
     "build-storybook": "lit-localize build && storybook build",
     "locale:extract": "lit-localize extract",
@@ -66,13 +66,14 @@
     "last 2 Chrome versions"
   ],
   "dependencies": {
+    "@inquirer/prompts": "^8.2.0",
     "@lit/localize": "^0.12.2",
     "@lit/task": "^1.0.3",
-    "autoprefixer": "^10.4.23",
+    "autoprefixer": "^10.4.24",
     "cssnano": "^7.1.2",
     "lit": "^3.3.2",
     "postcss": "^8.5.6",
-    "postcss-preset-env": "^11.1.2",
+    "postcss-preset-env": "^11.1.3",
     "postcss-scss": "^4.0.9",
     "sass": "^1.97.3",
     "unplugin-icons": "^23.0.1",
@@ -80,12 +81,11 @@
   },
   "devDependencies": {
     "@lit/localize-tools": "^0.8.1",
-    "@storybook/addon-docs": "^10.2.3",
-    "@storybook/web-components-vite": "^10.2.3",
-    "baseline-browser-mapping": "^2.9.19",
-    "cypress": "^15.9.0",
+    "@storybook/addon-docs": "^10.2.8",
+    "@storybook/web-components-vite": "^10.2.8",
+    "cypress": "^15.10.0",
     "cypress-ct-lit": "^1.0.0",
     "lorem-ipsum": "^2.0.8",
-    "storybook": "^10.2.3"
+    "storybook": "^10.2.8"
   }
 }

package/src/components/solid-boilerplate.ts

@@ -0,0 +1,76 @@
+import { Task } from "@lit/task";
+import type { PropertiesPicker } from "@src/component";
+import { css, html, nothing } from "lit";
+import { customElement } from "lit/decorators.js";
+
+import "@src/initializer";
+import * as utils from "@helpers";
+
+@customElement("solid-boilerplate")
+export class SolidBoilerplate extends utils.OrbitComponent {
+  async _afterAttach() {
+    // Eg. https://api.server/some-keyword/1/ should trigger an update:
+    utils.setupCacheInvalidation(this, {
+      keywords: ["some-keyword", "for-invalidating", "cache"],
+    });
+    return Promise.resolve();
+  }
+
+  static styles = css`
+    div {
+      background-color: red;
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  `;
+
+  cherryPickedProperties: PropertiesPicker[] = [{ key: "name", value: "name" }];
+
+  _getResource = new Task(this, {
+    task: async ([dataSrc]) => {
+      if (
+        !dataSrc ||
+        !this.orbit ||
+        (!this.noRouter &&
+          this.route &&
+          this.currentRoute &&
+          !this.route.startsWith(this.currentRoute))
+      )
+        return;
+
+      if (!this.hasCachedDatas || this.oldDataSrc !== dataSrc) {
+        if (!dataSrc) return;
+        this.datas = await this._getProxyValue(dataSrc);
+        this.hasCachedDatas = true;
+      }
+
+      if (this.oldDataSrc !== dataSrc) {
+        this.oldDataSrc = dataSrc;
+      }
+
+      return utils.sort(this.datas, "name", "asc");
+    },
+    args: () => [this.dataSrc, this.caching, this.currentRoute],
+  });
+
+  render() {
+    return (
+      this.gatekeeper() ||
+      this._getResource.render({
+        pending: () => html`<solid-loader></solid-loader>`,
+        complete: (datas) => {
+          if (!datas) {
+            return nothing;
+          }
+
+          return html`<div>
+            <sample-objects .objects=${datas}></sample-objects>
+          </div>`;
+        },
+      })
+    );
+  }
+}

package/src/helpers/components/componentObjectHandler.ts

@@ -1,16 +1,14 @@
-import type {
-  LimitedResource,
-  Resource,
-} from "@src/component";
+import type { LimitedResource, Resource } from "@src/component";
 import { LitElement } from "lit";
 
 export class ComponentObjectHandler extends LitElement {
   object?: LimitedResource = {
-    "@id": ""
+    "@id": "",
   };
 
-  isType = (type: string, obj: Resource = (this.object as Resource)) => {
-    const typeValue = obj["@type"];
+  isType = (type: string, obj?: Resource) => {
+    const resource = obj ?? (this.object as Resource);
+    const typeValue = resource["@type"];
     if (Array.isArray(typeValue)) {
       return typeValue.includes(type);
     }

package/src/helpers/components/componentObjectsHandler.ts

@@ -7,8 +7,13 @@ export class ComponentObjectsHandler extends LitElement {
   @property({ attribute: false })
   objects?: Resource[] = [];
 
-  hasType = (type: string, objs: Resource[] = this.objects as Resource[]) => {
-    const typeValue = new Set(objs.flatMap((o) => o["@type"]));
-    return typeValue.has(type);
+  hasType = (type: string, objs?: Resource[]) => {
+    const resources = objs ?? this.objects ?? [];
+    return resources.some((o) => {
+      const typeValue = o["@type"];
+      if (Array.isArray(typeValue)) return typeValue.includes(type);
+      if (typeof typeValue === "string") return typeValue === type;
+      return false;
+    });
   };
 }

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(
@@ -33,6 +38,7 @@ export default class extends ComponentObjectsHandler {
         );
       }
     };
+
     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,7 +74,7 @@ export default class extends ComponentObjectsHandler {
   currentRoute = "";
 
   protected async _attach(
-    defaultRoute: boolean,
+    defaultRoute: boolean | string,
     setupSubscriptions: boolean,
     ignoreRouter: boolean,
   ) {
@@ -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,12 +129,15 @@ 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,
       );
+
       if (compatibleComponents) target = compatibleComponents[0]?.uniq;
     }
+
     if (target) {
       requestNavigation(
         (window.orbit ? window.orbit.getRoute(target, true) : target) +
@@ -122,11 +145,15 @@ export default class extends ComponentObjectsHandler {
         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;
@@ -138,14 +165,16 @@ export default class extends ComponentObjectsHandler {
     targetProperties: PropertiesPicker[] = this.cherryPickedProperties,
   ): Promise<UnknownResource[]> {
     const expandedContainer: UnknownResource[] = [];
-    for (const entry of value) {
-      const line = await this._getProxyValue(
-        await entry,
-        recursive,
-        targetProperties,
-      );
-      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;
   }
 
@@ -161,31 +190,41 @@ 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;
   }
 
@@ -198,51 +237,31 @@ export default class extends ComponentObjectsHandler {
     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 (!resource) return;
 
-        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.isContainer?.() && target["ldp:contains"]) {
-            // Allow ldp:containers to be treated manually by a component
-            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,
-            );
-          }
+      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();
     };