feat(pos-list): support fetch attribute

Author: jg10-mastodon-social

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

@@ -4,9 +4,10 @@
 
 ## Properties
 
-| Property | Attribute | Description                    | Type     | Default     |
-| -------- | --------- | ------------------------------ | -------- | ----------- |
-| `rel`    | `rel`     | URI of the predicate to follow | `string` | `undefined` |
+| 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

elements/src/components.d.ts

@@ -77,6 +77,10 @@ export namespace Components {
     interface PosLabel {
     }
     interface PosList {
+        /**
+          * Whether listed resources should be fetched before being displayed
+         */
+        "fetch": boolean;
         /**
           * URI of the predicate to follow
          */
@@ -995,6 +999,10 @@ declare namespace LocalJSX {
         "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

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

@@ -119,4 +119,55 @@ describe('pos-list', () => {
     expect(el.querySelectorAll('pos-resource')[0]?.getAttribute('uri')).toEqual('https://video.test/video-1');
     expect(el.querySelectorAll('pos-resource')[1]?.getAttribute('uri')).toEqual('https://video.test/video-2');
   });
+
+  it('sets lazy attribute on children if fetch is not present', async () => {
+    const page = await newSpecPage({
+      components: [PosList],
+      html: `
+      <pos-list rel="http://schema.org/video">
+        <template>
+          Test
+        </template>
+      </pos-list>`,
+    });
+    await page.rootInstance.receiveResource({
+      relations: () => [
+        {
+          predicate: 'http://schema.org/video',
+          label: 'url',
+          uris: ['https://video.test/video-1'],
+        },
+      ],
+    });
+    await page.waitForChanges();
+
+    const el: HTMLElement = page.root as unknown as HTMLElement;
+
+    expect(el.querySelector('pos-resource')?.getAttribute('lazy')).toEqual('');
+  });
+
+  it('does not set lazy attribute on children if fetch is present', async () => {
+    const page = await newSpecPage({
+      components: [PosList],
+      html: `
+      <pos-list rel="http://schema.org/video" fetch="">
+        <template>
+          Test
+        </template>
+      </pos-list>`,
+    });
+    await page.rootInstance.receiveResource({
+      relations: () => [
+        {
+          predicate: 'http://schema.org/video',
+          label: 'url',
+          uris: ['https://video.test/video-1'],
+        },
+      ],
+    });
+    await page.waitForChanges();
+
+    const el: HTMLElement = page.root as unknown as HTMLElement;
+    expect(el.querySelector('pos-resource')?.getAttribute('lazy')).toEqual(null);
+  });
 });

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

@@ -11,6 +11,10 @@ export class PosList implements ResourceAware {
    * URI of the predicate to follow
    */
   @Prop() rel: string;
+  /**
+   * Whether listed resources should be fetched before being displayed
+   */
+  @Prop() fetch: boolean = false;
 
   @Element() host: HTMLDivElement;
   @State() error: string = null;
@@ -39,7 +43,7 @@ export class PosList implements ResourceAware {
   render() {
     if (this.error) return this.error;
     const elems = this.items.map(it => (
-      <pos-resource uri={it} lazy={true} innerHTML={this.templateString} about={it}></pos-resource>
+      <pos-resource uri={it} lazy={!this.fetch} innerHTML={this.templateString} about={it}></pos-resource>
     ));
     return this.items.length > 0 ? elems : null;
   }