feat(pos-switch): use observeTypes

Author: jg10-mastodon-social

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

@@ -6,22 +6,19 @@ import { PosLabel } from '../pos-label/pos-label';
 import { PosSwitch } from './pos-switch';
 import { PosResource } from '../pos-resource/pos-resource';
 import { when } from 'jest-when';
-import { Thing } from '@pod-os/core';
+import { RdfType, Thing } from '@pod-os/core';
+import { Subject } from 'rxjs';
 
 describe('pos-switch', () => {
-  it('renders template based on properties of resource', async () => {
+  it('renders template based on properties of resource, reactively', async () => {
     const os = mockPodOS();
+    const observedTypes$ = new Subject<RdfType[]>();
     when(os.store.get)
       .calledWith('https://resource.test')
       .mockReturnValue({
         uri: 'https://resource.test',
         label: () => 'Recipe 1',
-        types: () => [
-          {
-            label: 'Recipe',
-            uri: 'http://schema.org/Recipe',
-          },
-        ],
+        observeTypes: () => observedTypes$,
       } as unknown as Thing);
     const page = await newSpecPage({
       components: [PosApp, PosCase, PosLabel, PosSwitch, PosResource],
@@ -39,6 +36,9 @@ describe('pos-switch', () => {
             <pos-case else if-typeof="http://schema.org/Recipe">
               <template>Will not render as else is specified</template>
             </pos-case>
+            <pos-case if-typeof="http://schema.org/Thing">
+              <template>Also a Thing</template>
+            </pos-case>
             <pos-case else>
               <template>Will not render as previous conditions are satisfied</template>
             </pos-case>
@@ -47,6 +47,26 @@ describe('pos-switch', () => {
       </pos-app>`,
     });
     expect((os.fetch as jest.Mock).mock.calls).toHaveLength(0);
+    expect(page.root?.innerText).toEqualText('');
+    observedTypes$.next([
+      {
+        label: 'Recipe',
+        uri: 'http://schema.org/Recipe',
+      },
+    ]);
+    await page.waitForChanges();
     expect(page.root?.innerText).toEqualText('Recipe 1');
+    observedTypes$.next([
+      {
+        label: 'Recipe',
+        uri: 'http://schema.org/Recipe',
+      },
+      {
+        label: 'Thing',
+        uri: 'http://schema.org/Thing',
+      },
+    ]);
+    await page.waitForChanges();
+    expect(page.root?.innerText).toEqualText('Recipe 1\nAlso a Thing');
   });
 });

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

@@ -1,6 +1,8 @@
 import { newSpecPage } from '@stencil/core/testing';
 import { PosSwitch } from './pos-switch';
 import { when } from 'jest-when';
+import { RdfType, Thing } from '@pod-os/core';
+import { Subject } from 'rxjs';
 
 describe('pos-switch', () => {
   it('contains only templates initially', async () => {
@@ -35,8 +37,6 @@ describe('pos-switch', () => {
         </pos-case>
       </pos-switch>`,
     });
-    await page.rootInstance.receiveResource({ types: () => [] });
-    await page.waitForChanges();
     expect(page.rootInstance.caseElements.length).toEqual(2);
     expect(page.rootInstance.caseElements[0].getAttribute('if-typeof')).toEqual('http://schema.org/Recipe');
     expect(page.rootInstance.caseElements[1].getAttribute('if-typeof')).toEqual('http://schema.org/Video');
@@ -54,8 +54,6 @@ describe('pos-switch', () => {
         </pos-case>
       </pos-switch>`,
     });
-    await page.rootInstance.receiveResource({ types: () => [] });
-    await page.waitForChanges();
     expect(page.rootInstance.caseElements.length).toEqual(1);
     expect(page.rootInstance.caseElements[0].getAttribute('if-typeof')).toEqual('http://schema.org/Recipe');
   });
@@ -65,15 +63,11 @@ describe('pos-switch', () => {
       components: [PosSwitch],
       html: `<pos-switch></pos-switch>`,
     });
-    await page.rootInstance.receiveResource({});
-    await page.waitForChanges();
-
     const el: HTMLElement = page.root as unknown as HTMLElement;
-
     expect(el.textContent).toEqual('No pos-case elements found');
   });
 
-  it('renders matching condition templates', async () => {
+  it('renders matching condition templates, reactively', async () => {
     const page = await newSpecPage({
       components: [PosSwitch],
       html: `
@@ -95,14 +89,17 @@ describe('pos-switch', () => {
         </pos-case>
       </pos-switch>`,
     });
-    await page.rootInstance.receiveResource({
-      types: () => [
-        {
-          label: 'Recipe',
-          uri: 'http://schema.org/Recipe',
-        },
-      ],
-    });
+    const observedTypes$ = new Subject<RdfType[]>();
+    const thing = {
+      observeTypes: () => observedTypes$,
+    } as unknown as Thing;
+    page.rootInstance.receiveResource(thing);
+    observedTypes$.next([
+      {
+        label: 'Recipe',
+        uri: 'http://schema.org/Recipe',
+      },
+    ]);
     await page.waitForChanges();
     expect(page.root?.innerHTML).toEqualHtml(`
         <div>Recipe 1</div>
@@ -121,14 +118,17 @@ describe('pos-switch', () => {
         <pos-case else><template><div>No matches</div></template></pos-case>
       </pos-switch>`,
     });
-    await page.rootInstance.receiveResource({
-      types: () => [
-        {
-          label: 'Recipe',
-          uri: 'http://schema.org/Recipe',
-        },
-      ],
-    });
+    const observedTypes$ = new Subject<RdfType[]>();
+    const thing = {
+      observeTypes: () => observedTypes$,
+    } as unknown as Thing;
+    page.rootInstance.receiveResource(thing);
+    observedTypes$.next([
+      {
+        label: 'Recipe',
+        uri: 'http://schema.org/Recipe',
+      },
+    ]);
     await page.waitForChanges();
     expect(page.root?.innerHTML).toEqualHtml(`
         <div>Recipe 1</div>
@@ -144,14 +144,17 @@ describe('pos-switch', () => {
         <pos-case else><template><div>No matches</div></template></pos-case>
       </pos-switch>`,
     });
-    await page.rootInstance.receiveResource({
-      types: () => [
-        {
-          label: 'Recipe',
-          uri: 'http://schema.org/Recipe',
-        },
-      ],
-    });
+    const observedTypes$ = new Subject<RdfType[]>();
+    const thing = {
+      observeTypes: () => observedTypes$,
+    } as unknown as Thing;
+    page.rootInstance.receiveResource(thing);
+    observedTypes$.next([
+      {
+        label: 'Recipe',
+        uri: 'http://schema.org/Recipe',
+      },
+    ]);
     await page.waitForChanges();
     expect(page.root?.innerHTML).toEqualHtml(`
         <div>No matches</div>
@@ -166,14 +169,17 @@ describe('pos-switch', () => {
         <pos-case not if-typeof="http://schema.org/Video"><template><div>Not a Video</div></template></pos-case>
       </pos-switch>`,
     });
-    await page.rootInstance.receiveResource({
-      types: () => [
-        {
-          label: 'Recipe',
-          uri: 'http://schema.org/Recipe',
-        },
-      ],
-    });
+    const observedTypes$ = new Subject<RdfType[]>();
+    const thing = {
+      observeTypes: () => observedTypes$,
+    } as unknown as Thing;
+    page.rootInstance.receiveResource(thing);
+    observedTypes$.next([
+      {
+        label: 'Recipe',
+        uri: 'http://schema.org/Recipe',
+      },
+    ]);
     await page.waitForChanges();
     expect(page.root?.innerHTML).toEqualHtml(`
         <div>Not a Video</div>

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

@@ -1,6 +1,7 @@
-import { Thing } from '@pod-os/core';
+import { RdfType, Thing } from '@pod-os/core';
 import { Component, Element, Event, h, Host, State } from '@stencil/core';
 import { ResourceAware, ResourceEventEmitter, subscribeResource } from '../events/ResourceAware';
+import { firstValueFrom, Subject, takeUntil } from 'rxjs';
 
 /**
  * Selects a child template to render based on properties of the subject resource, usually defined by an ancestor `pos-resource` element.
@@ -15,30 +16,28 @@ export class PosSwitch implements ResourceAware {
   @Element() host: HTMLElement;
   @State() error: string = null;
   @State() resource: Thing;
-  @State() caseElements: NodeListOf<HTMLPosCaseElement>;
-  @State() templateString: string;
+  @State() caseElements: HTMLPosCaseElement[];
+  @State() types: RdfType[];
+
+  private readonly disconnected$ = new Subject<void>();
 
   @Event({ eventName: 'pod-os:resource' })
   subscribeResource: ResourceEventEmitter;
 
   componentWillLoad() {
-    subscribeResource(this);
-
     const caseElements = this.host.querySelectorAll('pos-case');
     if (caseElements.length == 0) {
       this.error = 'No pos-case elements found';
     } else {
-      this.caseElements = caseElements;
+      this.caseElements = Array.from(caseElements);
+      subscribeResource(this);
     }
   }
 
   test(caseElement): boolean {
     let state = null;
     if (caseElement.getAttribute('if-typeof') !== null) {
-      state = this.resource
-        .types()
-        .map(x => x.uri)
-        .includes(caseElement.getAttribute('if-typeof'));
+      state = this.types.map(x => x.uri).includes(caseElement.getAttribute('if-typeof'));
     }
     if (caseElement.getAttribute('if-property') !== null) {
       const relations = this.resource.relations(caseElement.getAttribute('if-property'));
@@ -54,7 +53,14 @@ export class PosSwitch implements ResourceAware {
     return state;
   }
 
-  receiveResource = (resource: Thing) => {
+  receiveResource = async (resource: Thing) => {
+    if (this.caseElements.some(caseElement => caseElement.hasAttribute('if-typeof'))) {
+      const observeTypes = resource.observeTypes().pipe(takeUntil(this.disconnected$));
+      observeTypes.subscribe(types => {
+        this.types = types;
+      });
+      await firstValueFrom(observeTypes);
+    }
     this.resource = resource;
   };
 
@@ -81,4 +87,9 @@ export class PosSwitch implements ResourceAware {
     const activeElementsContent = activeElements.map(el => el.querySelector('template').innerHTML).join('\n');
     return <Host innerHTML={activeElementsContent}></Host>;
   }
+
+  disconnectedCallback() {
+    this.disconnected$.next();
+    this.disconnected$.unsubscribe();
+  }
 }