List things related to a resource with a custom display

core/CHANGELOG.md

@@ -6,6 +6,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Changed
+
+- `Thing.relations()`: Now takes optional predicate to filter by
+
 ## 0.16.1
 
 ### Fixed

core/src/thing/Thing.relations.spec.ts

@@ -188,4 +188,31 @@ describe("Thing", function () {
       expect(result).toEqual([]);
     });
   });
+
+  it("only follows the given predicate if provided", () => {
+    const store = graph();
+    const uri = "https://jane.doe.example/container/file.ttl#fragment";
+    store.add(
+      sym(uri),
+      sym("http://vocab.test/first"),
+      sym("https://pod.example/first"),
+    );
+    store.add(
+      sym(uri),
+      sym("http://vocab.test/second"),
+      sym("https://pod.example/second"),
+    );
+    const it = new Thing(
+      "https://jane.doe.example/container/file.ttl#fragment",
+      store,
+    );
+    const result = it.relations("http://vocab.test/first");
+    expect(result).toEqual([
+      {
+        predicate: "http://vocab.test/first",
+        label: "first",
+        uris: ["https://pod.example/first"],
+      },
+    ]);
+  });
 });

core/src/thing/Thing.ts

@@ -72,8 +72,11 @@ export class Thing {
     }));
   }
 
-  relations(): Relation[] {
-    const statements = this.store.statementsMatching(sym(this.uri));
+  relations(predicate?: string): Relation[] {
+    const statements = this.store.statementsMatching(
+      sym(this.uri),
+      predicate ? sym(predicate) : null,
+    );
 
     const values = statements
       .filter((it) => isNamedNode(it.object) && !isRdfType(it.predicate))

docs/elements/components/pos-list/readme.md

@@ -0,0 +1,40 @@
+
+<!-- Auto Generated Below -->
+
+
+## Properties
+
+| Property | Attribute | Description                                                       | Type      | Default     |
+| -------- | --------- | ----------------------------------------------------------------- | --------- | ----------- |
+| `fetch`  | `fetch`   | Whether listed resources should be fetched before being displayed | `boolean` | `false`     |
+| `rel`    | `rel`     | URI of the predicate to follow                                    | `string`  | `undefined` |
+
+
+## Events
+
+| Event             | Description | Type               |
+| ----------------- | ----------- | ------------------ |
+| `pod-os:resource` |             | `CustomEvent<any>` |
+
+
+## Dependencies
+
+### Depends on
+
+- [pos-resource](../pos-resource)
+
+### Graph
+```mermaid
+graph TD;
+  pos-list --> pos-resource
+  pos-resource --> ion-progress-bar
+  pos-resource --> ion-card
+  pos-resource --> ion-card-header
+  pos-resource --> ion-card-content
+  ion-card --> ion-ripple-effect
+  style pos-list fill:#f9f,stroke:#333,stroke-width:4px
+```
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*

docs/elements/components/pos-resource/readme.md

@@ -40,6 +40,7 @@ Type: `Promise<void>`
 
  - [pos-app-browser](../../apps/pos-app-browser)
  - [pos-container-contents](../pos-container-contents)
+ - [pos-list](../pos-list)
  - [pos-login](../pos-login)
  - [pos-make-findable](../pos-make-findable)
  - [pos-rich-link](../pos-rich-link)
@@ -61,6 +62,7 @@ graph TD;
   ion-card --> ion-ripple-effect
   pos-app-browser --> pos-resource
   pos-container-contents --> pos-resource
+  pos-list --> pos-resource
   pos-login --> pos-resource
   pos-make-findable --> pos-resource
   pos-rich-link --> pos-resource

elements/CHANGELOG.md

@@ -4,6 +4,13 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Added
+
+- [pos-list](../docs/elements/components/pos-list):
+  - Basic implementation of element to list things related to a resource with a custom display
+
 ## 0.25.2
 
 ### Fixed

elements/src/components.d.ts

@@ -76,6 +76,16 @@ export namespace Components {
     }
     interface PosLabel {
     }
+    interface PosList {
+        /**
+          * Whether listed resources should be fetched before being displayed
+         */
+        "fetch": boolean;
+        /**
+          * URI of the predicate to follow
+         */
+        "rel": string;
+    }
     interface PosLiterals {
     }
     interface PosLogin {
@@ -183,6 +193,10 @@ export interface PosLabelCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosLabelElement;
 }
+export interface PosListCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLPosListElement;
+}
 export interface PosLiteralsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLPosLiteralsElement;
@@ -508,6 +522,23 @@ declare global {
         prototype: HTMLPosLabelElement;
         new (): HTMLPosLabelElement;
     };
+    interface HTMLPosListElementEventMap {
+        "pod-os:resource": any;
+    }
+    interface HTMLPosListElement extends Components.PosList, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLPosListElementEventMap>(type: K, listener: (this: HTMLPosListElement, ev: PosListCustomEvent<HTMLPosListElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLPosListElementEventMap>(type: K, listener: (this: HTMLPosListElement, ev: PosListCustomEvent<HTMLPosListElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLPosListElement: {
+        prototype: HTMLPosListElement;
+        new (): HTMLPosListElement;
+    };
     interface HTMLPosLiteralsElementEventMap {
         "pod-os:resource": any;
     }
@@ -845,6 +876,7 @@ declare global {
         "pos-image": HTMLPosImageElement;
         "pos-internal-router": HTMLPosInternalRouterElement;
         "pos-label": HTMLPosLabelElement;
+        "pos-list": HTMLPosListElement;
         "pos-literals": HTMLPosLiteralsElement;
         "pos-login": HTMLPosLoginElement;
         "pos-login-form": HTMLPosLoginFormElement;
@@ -966,6 +998,17 @@ declare namespace LocalJSX {
     interface PosLabel {
         "onPod-os:resource"?: (event: PosLabelCustomEvent<any>) => void;
     }
+    interface PosList {
+        /**
+          * Whether listed resources should be fetched before being displayed
+         */
+        "fetch"?: boolean;
+        "onPod-os:resource"?: (event: PosListCustomEvent<any>) => void;
+        /**
+          * URI of the predicate to follow
+         */
+        "rel"?: string;
+    }
     interface PosLiterals {
         "onPod-os:resource"?: (event: PosLiteralsCustomEvent<any>) => void;
     }
@@ -1091,6 +1134,7 @@ declare namespace LocalJSX {
         "pos-image": PosImage;
         "pos-internal-router": PosInternalRouter;
         "pos-label": PosLabel;
+        "pos-list": PosList;
         "pos-literals": PosLiterals;
         "pos-login": PosLogin;
         "pos-login-form": PosLoginForm;
@@ -1146,6 +1190,7 @@ declare module "@stencil/core" {
             "pos-image": LocalJSX.PosImage & JSXBase.HTMLAttributes<HTMLPosImageElement>;
             "pos-internal-router": LocalJSX.PosInternalRouter & JSXBase.HTMLAttributes<HTMLPosInternalRouterElement>;
             "pos-label": LocalJSX.PosLabel & JSXBase.HTMLAttributes<HTMLPosLabelElement>;
+            "pos-list": LocalJSX.PosList & JSXBase.HTMLAttributes<HTMLPosListElement>;
             "pos-literals": LocalJSX.PosLiterals & JSXBase.HTMLAttributes<HTMLPosLiteralsElement>;
             "pos-login": LocalJSX.PosLogin & JSXBase.HTMLAttributes<HTMLPosLoginElement>;
             "pos-login-form": LocalJSX.PosLoginForm & JSXBase.HTMLAttributes<HTMLPosLoginFormElement>;

elements/src/components/pos-list/pos-list-fetch.integration.spec.tsx

@@ -0,0 +1,40 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { mockPodOS } from '../../test/mockPodOS';
+import { PosApp } from '../pos-app/pos-app';
+import { PosLabel } from '../pos-label/pos-label';
+import { PosList } from './pos-list';
+import { PosResource } from '../pos-resource/pos-resource';
+import { when } from 'jest-when';
+
+describe('pos-list', () => {
+  it('fetches resources if fetch attribute is present', async () => {
+    const os = mockPodOS();
+    when(os.store.get)
+      .calledWith('https://resource.test')
+      .mockReturnValue({
+        relations: () => [
+          {
+            predicate: 'http://schema.org/video',
+            uris: ['https://video.test/video-1', 'https://video.test/video-2'],
+          },
+        ],
+      });
+    await newSpecPage({
+      components: [PosApp, PosLabel, PosList, PosResource],
+      supportsShadowDom: false,
+      html: `
+      <pos-app>
+        <pos-resource uri="https://resource.test" lazy="">
+          <pos-list rel="http://schema.org/video" fetch>
+            <template>
+              <pos-label />
+            </template>
+          </pos-list>
+        </pos-resource>
+      </pos-app>`,
+    });
+
+    expect(os.fetch.mock.calls).toHaveLength(2);
+    expect(os.fetch.mock.calls).toEqual([['https://video.test/video-1'], ['https://video.test/video-2']]);
+  });
+});

elements/src/components/pos-list/pos-list.integration.spec.tsx

@@ -0,0 +1,68 @@
+import { newSpecPage } from '@stencil/core/testing';
+import { mockPodOS } from '../../test/mockPodOS';
+import { PosApp } from '../pos-app/pos-app';
+import { PosLabel } from '../pos-label/pos-label';
+import { PosList } from './pos-list';
+import { PosResource } from '../pos-resource/pos-resource';
+import { when } from 'jest-when';
+
+describe('pos-list', () => {
+  it('children render label for loaded resources (without fetching)', async () => {
+    const os = mockPodOS();
+    when(os.store.get)
+      .calledWith('https://resource.test')
+      .mockReturnValue({
+        relations: () => [
+          {
+            predicate: 'http://schema.org/video',
+            uris: ['https://video.test/video-1', 'https://video.test/video-2'],
+          },
+        ],
+      });
+    when(os.store.get)
+      .calledWith('https://video.test/video-1')
+      .mockReturnValue({ uri: 'https://video.test/video-1', label: () => 'Video 1' });
+    when(os.store.get)
+      .calledWith('https://video.test/video-2')
+      .mockReturnValue({ uri: 'https://video.test/video-2', label: () => 'Video 2' });
+    const page = await newSpecPage({
+      components: [PosApp, PosLabel, PosList, PosResource],
+      supportsShadowDom: false,
+      html: `
+      <pos-app>
+        <pos-resource uri="https://resource.test" lazy="">
+          <pos-list rel="http://schema.org/video">
+            <template>
+              <pos-label />
+            </template>
+          </pos-list>
+        </pos-resource>
+      </pos-app>`,
+    });
+    expect(os.fetch.mock.calls).toHaveLength(0);
+
+    const resources = page.root ? page.root.querySelectorAll('pos-list pos-resource') : [];
+    expect(resources).toHaveLength(2);
+
+    const label1 = resources[0] as unknown as PosResource;
+    expect(label1).toEqualHtml(`
+      <pos-resource about="https://video.test/video-1">
+        <pos-label>
+          Video 1
+        </pos-label>
+      </pos-resource>
+`);
+    //Tested separately because pos-resource does not reflect the uri property as an attribute
+    expect(label1?.uri).toEqual('https://video.test/video-1');
+
+    const label2 = resources[1] as unknown as PosResource;
+    expect(label2).toEqualHtml(`
+      <pos-resource about="https://video.test/video-2">
+        <pos-label>
+          Video 2
+        </pos-label>
+      </pos-resource>
+`);
+    expect(label2?.uri).toEqual('https://video.test/video-2');
+  });
+});