feat: overriding child viewer

Author: tpluscode

.changeset/soft-rocks-travel.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/roadshow": patch
+---
+
+Possibility to override the viewer for property objects when calling `show()`

packages/roadshow/lib/ViewContext/index.ts

@@ -23,6 +23,7 @@ export interface ViewContext<S, P = any> {
 
 export interface Show {
   property: PropertyState | PropertyShape | NamedNode
+  viewer?: NamedNode
 }
 
 export interface FocusNodeViewContext<R = unknown> extends ViewContext<FocusNodeState<R>, PropertyState> {

packages/roadshow/lib/render.ts

@@ -237,6 +237,11 @@ function showProperty(this: FocusNodeViewContext, show: Show) {
   if (!objects.terms.length) {
     objects = findNodes(this.node, property.path)
   }
+
+  if (show.viewer) {
+    property.viewer = show.viewer
+  }
+
   if (property.viewer && this.controller.viewers.isMultiViewer(property.viewer)) {
     this.controller.initShapes(property, objects)
 

packages/roadshow/test/lib/render.test.ts

@@ -3,7 +3,7 @@ import { fromPointer } from '@rdfine/shacl/lib/NodeShape'
 import { NodeShape } from '@rdfine/shacl'
 import { html } from 'lit'
 import sinon from 'sinon'
-import { dash, foaf, rdf, rdfs, sh } from '@tpluscode/rdf-ns-builders/strict'
+import { dash, foaf, rdf, rdfs, schema, sh } from '@tpluscode/rdf-ns-builders/strict'
 import { Initializer } from '@tpluscode/rdfine/RdfResource'
 import { render } from '../../lib/render'
 import { blankNode, namedNode } from '../_support/clownface'
@@ -161,6 +161,45 @@ describe('@hydrofoil/roadshow/lib/render', () => {
         expect(result.textContent).to.eq('Count: 3')
       })
 
+      it('renders using selected viewer when overridden in .show()', async () => {
+        // given
+        const shape = createShape({
+          property: [{
+            path: schema.breadcrumb,
+            viewer: ex.BreadcrumbViewer,
+            node: {
+              property: {
+                path: schema.itemListElement,
+              },
+            },
+          }],
+        })
+        const focusNode = namedNode('/page/child')
+          .addOut(schema.breadcrumb, (bc) => {
+            bc.addOut(schema.itemListElement, (item) => {
+              item.addOut(schema.item, item.namedNode('/page'))
+                .addOut(schema.name, 'Parent')
+            })
+          })
+        const state: FocusNodeState = create({ shape, term: focusNode.term, pointer: focusNode })
+        renderers.set(ex.BreadcrumbViewer, function (this: FocusNodeViewContext) {
+          const [itemsProperty] = this.state.properties
+
+          return html`<ol class="breadcrumbs">
+            ${this.show({ property: itemsProperty, viewer: ex.BreadcrumbItemViewer })}
+          </ol>`
+        })
+        renderers.set(ex.BreadcrumbItemViewer, resource => html`<li>${resource.out(schema.name).value}</li>`)
+
+        // when
+        const result = await fixture(render({ state, focusNode, controller, params }))
+
+        // then
+        expect(result).dom.to.eq(`<ol class="breadcrumbs">
+          <li>Parent</li>
+        </ol>`)
+      })
+
       it('calling sub-renderer for individual objects', async () => {
         // given
         const shape = createShape({