refactor: change lazy-rendering API

Author: tpluscode

.changeset/silver-mice-dream.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-core": minor
+---
+
+Change how lazy components are implemented

demos/lit-html/src/configure.ts

@@ -1,4 +1,4 @@
-import { Component } from '@hydrofoil/shaperone-wc'
+import type { Component } from '@hydrofoil/shaperone-core'
 import * as nativeComponents from '@hydrofoil/shaperone-wc/NativeComponents'
 import * as mwcComponents from '@hydrofoil/shaperone-wc-material/components'
 import { component, matcher, metadata } from '@hydrofoil/shaperone-playground-examples/LanguageMultiSelect'

packages/core/index.ts

@@ -3,7 +3,7 @@ import RdfResource from '@tpluscode/rdfine/RdfResource'
 import { GraphPointer } from 'clownface'
 
 export type FocusNode = GraphPointer<BlankNode | NamedNode>
-export type { Component, SingleEditorComponent, MultiEditorComponent } from './models/components'
+export type { Component, SingleEditorComponent, MultiEditorComponent, RenderSingleEditor, RenderMultiEditor, Lazy } from './models/components'
 export type { SingleEditor, MultiEditor } from './models/editors'
 
 export async function loadMixins(): Promise<void> {

packages/core/models/components/index.ts

@@ -22,46 +22,64 @@ export interface MultiEditorActions {
   focusOnObjectNode(): void
 }
 
-export interface Component<TRenderResult> {
+export interface Component {
   editor: NamedNode
-  render(...args: unknown[]): TRenderResult
-  loadDependencies?(): Array<Promise<unknown>>
 }
 
-export interface ComponentState<TRenderResult> extends Component<TRenderResult> {
-  loaded: boolean
+export interface RenderFunc<Params, Actions, TRenderResult> {
+  (params: Params, actions: Actions): TRenderResult
+}
+
+export type RenderSingleEditor<TRenderResult> = RenderFunc<SingleEditorRenderParams, SingleEditorActions, TRenderResult>
+export type RenderMultiEditor<TRenderResult> = RenderFunc<MultiEditorRenderParams, MultiEditorActions, TRenderResult>
+
+export interface ComponentState<TRenderResult> extends Component {
+  render?: RenderFunc<any, any, TRenderResult>
+  lazyRender?(): Promise<RenderFunc<any, any, TRenderResult>>
   loading: boolean
+  loadingFailed?: {
+    reason: string
+  }
 }
 
-export interface SingleEditorComponent<TRenderResult> extends Component<TRenderResult> {
-  render(params: SingleEditorRenderParams, actions: SingleEditorActions): TRenderResult
+interface ComponentRender<Params, Actions, TRenderResult> {
+  render: RenderFunc<Params, Actions, TRenderResult>
 }
 
-export interface MultiEditorComponent<TRenderResult> extends Component<TRenderResult> {
-  render(params: MultiEditorRenderParams, actions: MultiEditorActions): TRenderResult
+export type SingleEditorComponent<TRenderResult> = Component & ComponentRender<SingleEditorRenderParams, SingleEditorActions, TRenderResult>
+export type MultiEditorComponent<TRenderResult> = Component & ComponentRender<MultiEditorRenderParams, MultiEditorActions, TRenderResult>
+
+export type Lazy<T extends ComponentRender<any, any, any>> = Omit<T, 'render'> & {
+  lazyRender() : Promise<T['render']>
 }
 
 export type ComponentsState<TRenderResult = any> = Record<string, ComponentState<TRenderResult>>
 
 export const createComponentsModel = <TRenderResult>() => createModel({
   state: <ComponentsState<TRenderResult>>{},
-  reducers: reducers<TRenderResult>(),
+  reducers: reducers(),
   effects(store) {
     const dispatch = store.getDispatch()
 
     return {
       async load(editor: NamedNode) {
         const state = store.getState()
 
-        const component = state.components[editor.value]
-        if (component.loading || component.loaded) return
-
-        if (component.loadDependencies) {
-          dispatch.components.loading(editor)
-          await Promise.all(component.loadDependencies())
+        const component: ComponentState<TRenderResult> = state.components[editor.value]
+        if (!component.lazyRender) {
+          dispatch.components.loadFailed({ editor, reason: 'lazyRender not implemented' })
+          return
         }
+        if (component.loading) return
 
-        dispatch.components.loaded(editor)
+        try {
+          dispatch.components.loaded({
+            editor,
+            render: await component.lazyRender(),
+          })
+        } catch (e) {
+          dispatch.components.loadFailed({ editor, reason: e.message })
+        }
       },
     }
   },

packages/core/models/components/reducers.ts

@@ -1,19 +1,26 @@
 import produce from 'immer'
 import { NamedNode } from 'rdf-js'
-import type { Component, ComponentsState } from './index'
+import type { Component, ComponentsState, RenderFunc } from './index'
 
-export default function <TRenderResult> () {
+export default function () {
   return {
     loading(components: ComponentsState, editor: NamedNode): ComponentsState {
       return produce(components, (draft) => {
-        draft[editor.value].loaded = false
         draft[editor.value].loading = true
       })
     },
-    loaded(components: ComponentsState, editor: NamedNode): ComponentsState {
+    loadingFailed(components: ComponentsState, { editor, reason }: { editor: NamedNode; reason: string }): ComponentsState {
+      return produce(components, (draft) => {
+        draft[editor.value].loadingFailed = {
+          reason,
+        }
+      })
+    },
+    loaded(components: ComponentsState, { editor, render } : {editor: NamedNode; render: RenderFunc<any, any, any>}): ComponentsState {
       return produce(components, (draft) => {
-        draft[editor.value].loaded = true
         draft[editor.value].loading = false
+        draft[editor.value].render = render
+        draft[editor.value].loadingFailed = undefined
       })
     },
     removeComponents(components: ComponentsState, toRemove: NamedNode[]) {
@@ -23,16 +30,15 @@ export default function <TRenderResult> () {
         }
       })
     },
-    pushComponents(components: ComponentsState, toAdd: Record<string, Component<TRenderResult>> | Component<TRenderResult>[]): ComponentsState {
+    pushComponents(components: ComponentsState, toAdd: Record<string, Component> | Component[]): ComponentsState {
       return produce(components, (newComponents) => {
         const addedArray = Array.isArray(toAdd) ? toAdd : Object.values(toAdd)
 
         for (const component of addedArray) {
-          if (!components[component.editor.value] || components[component.editor.value].render !== component.render) {
+          if (!components[component.editor.value]) {
             newComponents[component.editor.value] = {
               ...component,
               loading: false,
-              loaded: !component.loadDependencies,
             }
           }
         }

packages/wc-material/components.ts

@@ -1,5 +1,52 @@
-export { textField } from './components/textField'
-export { urlEditor } from './components/urlEditor'
-export { textArea } from './components/textArea'
-export { enumSelect } from './components/enumSelect'
-export { datePicker, dateTimePicker } from './components/date'
+import { Lazy, SingleEditorComponent } from '@hydrofoil/shaperone-wc'
+import { dash } from '@tpluscode/rdf-ns-builders'
+import { namedNode } from '@rdf-esm/data-model'
+
+export const textField: Lazy<SingleEditorComponent> = {
+  editor: dash.TextFieldEditor,
+  async lazyRender() {
+    const { createTextField } = await import('./components/textField')
+    return createTextField()
+  },
+}
+
+export const urlEditor: Lazy<SingleEditorComponent> = {
+  editor: dash.URIEditor,
+  async lazyRender() {
+    const { createTextField } = await import('./components/textField')
+    return createTextField({
+      type: 'url',
+      createTerm: value => namedNode(value),
+    })
+  },
+}
+
+export const textArea: Lazy<SingleEditorComponent> = {
+  editor: dash.TextAreaEditor,
+  lazyRender() {
+    return import('./components/textArea').then(m => m.textArea)
+  },
+}
+
+export const enumSelect: Lazy<SingleEditorComponent> = {
+  editor: dash.EnumSelectEditor,
+  lazyRender() {
+    return import('./components/enumSelect').then(m => m.enumSelect)
+  },
+}
+
+export const datePicker: Lazy<SingleEditorComponent> = {
+  editor: dash.DatePickerEditor,
+  async lazyRender() {
+    const { createTextField } = await import('./components/textField')
+    return createTextField({ type: 'date' })
+  },
+}
+
+export const dateTimePicker: Lazy<SingleEditorComponent> = {
+  editor: dash.DateTimePickerEditor,
+  async lazyRender() {
+    const { createTextField } = await import('./components/textField')
+    return createTextField({ type: 'datetime-local' })
+  },
+}

packages/wc-material/components/date.ts

@@ -1,23 +1,16 @@
-import type { SingleEditorComponent } from '@hydrofoil/shaperone-wc'
-import { dash, rdfs } from '@tpluscode/rdf-ns-builders'
+import type { RenderSingleEditor } from '@hydrofoil/shaperone-wc'
+import { rdfs } from '@tpluscode/rdf-ns-builders'
 import { html } from 'lit-html'
 import { repeat } from 'lit-html/directives/repeat'
+import '@material/mwc-select/mwc-select'
+import '@material/mwc-list/mwc-list-item'
 
-export const enumSelect: SingleEditorComponent = {
-  editor: dash.EnumSelectEditor,
-  render({ value, property }, actions) {
-    const choices = property.shape.inPointers
+export const enumSelect: RenderSingleEditor = function ({ value, property }, actions) {
+  const choices = property.shape.inPointers
 
-    return html`<mwc-select @selected="${(e: CustomEvent) => actions.update(choices[e.detail.index].term)}">
+  return html`<mwc-select @selected="${(e: CustomEvent) => actions.update(choices[e.detail.index].term)}">
     ${repeat(choices, choice => html`<mwc-list-item ?selected="${choice.value === value.object?.value}" value="${choice}">
         ${choice.out(rdfs.label).value || choice}
     </mwc-list-item>`)}
 </mwc-select>`
-  },
-  loadDependencies() {
-    return [
-      import('@material/mwc-select/mwc-select'),
-      import('@material/mwc-list/mwc-list-item'),
-    ]
-  },
 }