refactor: store and configuration

.changeset/chilled-feet-hide.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc": minor
+---
+
+Removed the `window.Shaperone.DEBUG` flag in favor of component `debug` property

.changeset/quiet-fireants-join.md

@@ -0,0 +1,6 @@
+---
+"@hydrofoil/shaperone-core": patch
+"@hydrofoil/shaperone-wc": patch
+---
+
+Improved state management by separating the state of each element instance

.changeset/wild-icons-prove.md

@@ -0,0 +1,29 @@
+---
+"@hydrofoil/shaperone-wc": minor
+---
+
+Big change how elements are configured. Global config can be set using the `configure.js` module. 
+
+```js
+import { configure } from '@hydrofoil/shaperone-wc'
+
+await configure(({ components, editors, renderer, validation }) => {
+
+})
+```
+
+Additionally, each component can be customised further by providing calling `configure` method of the component.
+
+```html
+<shaperone-form></shaperone-form>
+
+<script type="module">
+  import { configure } from '@hydrofoil/shaperone-wc'
+
+  // global configuration must always be invoked 
+  configure()
+
+  document.querySelector('shaperone-form').configure(({ components, editors, renderer, validation }) => {
+  })
+</script>
+```

demos/lit-html/src/configure.ts

@@ -8,6 +8,7 @@ import { DescriptionTooltip } from '@hydrofoil/shaperone-playground-examples/Des
 import * as vaadinComponents from '@hydrofoil/shaperone-wc-vaadin/components.js'
 import * as shoelaceComponents from '@hydrofoil/shaperone-wc-shoelace/components.js'
 import { settings as shoelaceSettings } from '@hydrofoil/shaperone-wc-shoelace/settings.js'
+import type { ConfigCallback } from '@hydrofoil/shaperone-wc/configure.js'
 import { configure } from '@hydrofoil/shaperone-wc/configure.js'
 import { dash } from '@tpluscode/rdf-ns-builders'
 import type { Decorate, RenderTemplate } from '@hydrofoil/shaperone-wc/templates.js'
@@ -25,30 +26,53 @@ import type { RendererState } from './state/models/renderer.js'
 setBasePath('https://unpkg.com/@shoelace-style/shoelace/dist')
 shoelaceSettings.hoist = false
 
-const { editors, components, validation, renderer } = configure($rdf)
-
 export const componentSets: Record<ComponentsState['components'], Record<string, Component>> = {
   native: { ...nativeComponents, starRating },
   material: { ...nativeComponents, ...mwcComponents, languages: LanguageSelect.component('material'), starRating },
   vaadin: { ...nativeComponents, ...vaadinComponents, languages: LanguageSelect.component('lumo'), starRating },
   shoelace: { ...nativeComponents, ...shoelaceComponents, starRating },
 }
 
-editors.addMetadata(env => [...LanguageSelect.metadata(env), ...StarRating.metadata(env)])
-editors.addMatchers({
-  languages: LanguageSelect.matcher,
-  starRating: StarRating.matcher,
-})
-shaperoneHydra({ editors, components })
-components.decorate(DescriptionTooltip)
+function * focusNodeDecorators(labs: RendererState['labs']) {
+  if (labs?.xone) {
+    yield xone.focusNode
+  }
+  if (labs?.errorSummary) {
+    yield errorSummary
+  }
+  yield MaterialRenderStrategy.focusNode
+}
+
+let focusNodeTemplate = templates.focusNode
 
-validation.setValidator(validate)
+const initialRenderStrategy = {
+  ...templates,
+  ...MaterialRenderStrategy,
+  focusNode: [...focusNodeDecorators({})].reduce(combineDecorators, focusNodeTemplate),
+}
+
+configure($rdf, ({ editors, components, validation, renderer }) => {
+  editors.addMetadata(env => [...LanguageSelect.metadata(env), ...StarRating.metadata(env)])
+  editors.addMatchers({
+    languages: LanguageSelect.matcher,
+    starRating: StarRating.matcher,
+  })
+  shaperoneHydra({
+    editors,
+    components,
+  })
+  components.decorate(DescriptionTooltip)
+
+  validation.setValidator(validate)
+
+  renderer.setTemplates(initialRenderStrategy)
+})
 
 export const selectComponents = (() => {
   let currentComponents = componentSets.native
   let previousComponents: ComponentsState['components'] | undefined
 
-  return (name: ComponentsState['components']) => {
+  return (name: ComponentsState['components']): ConfigCallback => ({ components }) => {
     if (previousComponents === name) return
     previousComponents = name
 
@@ -64,91 +88,77 @@ function combineDecorators<Template extends RenderTemplate>(combined: Template,
 }
 
 export const configureRenderer = (() => {
-  function * focusNodeDecorators(labs: RendererState['labs']) {
-    if (labs?.xone) {
-      yield xone.focusNode
-    }
-    if (labs?.errorSummary) {
-      yield errorSummary
-    }
-    yield MaterialRenderStrategy.focusNode
-  }
-
-  let focusNodeTemplate = templates.focusNode
-
-  const initialStrategy = {
-    ...templates,
-    ...MaterialRenderStrategy,
-    focusNode: [...focusNodeDecorators({})].reduce(combineDecorators, focusNodeTemplate),
-  }
-
-  renderer.setTemplates(initialStrategy)
-
   let previousNesting: RendererState['nesting']
   let previousGrouping: RendererState['grouping']
   let previousLabs: RendererState['labs']
 
   return {
-    async switchNesting({ nesting }: RendererState) {
-      if (previousNesting === nesting) return
-      previousNesting = nesting
-
-      if (nesting === 'always one') {
-        const { topmostFocusNodeFormRenderer } = await import('@hydrofoil/shaperone-playground-examples/NestedShapesIndividually/renderer.js')
-        const nestingComponents = await import('@hydrofoil/shaperone-playground-examples/NestedShapesIndividually/components.js')
-
-        renderer.setTemplates({
-          form: topmostFocusNodeFormRenderer(initialStrategy.form),
-        })
-        components.pushComponents(nestingComponents)
-      } else if (nesting === 'inline') {
-        const nestingComponents = await import('@hydrofoil/shaperone-playground-examples/InlineNestedShapes')
-        components.pushComponents(nestingComponents)
-      } else {
-        renderer.setTemplates({ form: initialStrategy.form })
-        components.removeComponents([dash.DetailsEditor])
+    switchNesting({ nesting }: RendererState): ConfigCallback {
+      return async ({ renderer, components }) => {
+        if (previousNesting === nesting) return
+        previousNesting = nesting
+
+        if (nesting === 'always one') {
+          const { topmostFocusNodeFormRenderer } = await import('@hydrofoil/shaperone-playground-examples/NestedShapesIndividually/renderer.js')
+          const nestingComponents = await import('@hydrofoil/shaperone-playground-examples/NestedShapesIndividually/components.js')
+
+          renderer.setTemplates({
+            form: topmostFocusNodeFormRenderer(initialRenderStrategy.form),
+          })
+          components.pushComponents(nestingComponents)
+        } else if (nesting === 'inline') {
+          const nestingComponents = await import('@hydrofoil/shaperone-playground-examples/InlineNestedShapes')
+          components.pushComponents(nestingComponents)
+        } else {
+          renderer.setTemplates({ form: initialRenderStrategy.form })
+          components.removeComponents([dash.DetailsEditor])
+        }
       }
     },
 
-    async switchLayout({ grouping, labs }: RendererState) {
-      if (previousGrouping === grouping) return
-      previousGrouping = grouping
-
-      const strategy = {
-        focusNode: initialStrategy.focusNode,
-        group: initialStrategy.group,
+    switchLayout({ grouping, labs }: RendererState): ConfigCallback {
+      return async ({ renderer }) => {
+        if (previousGrouping === grouping) return
+        previousGrouping = grouping
+
+        const strategy = {
+          focusNode: initialRenderStrategy.focusNode,
+          group: initialRenderStrategy.group,
+        }
+
+        if (grouping === 'vaadin accordion') {
+          const {
+            AccordionGroupingRenderer,
+            AccordionFocusNodeRenderer,
+          } = await import('@hydrofoil/shaperone-wc-vaadin/renderer/accordion.js')
+
+          strategy.group = AccordionGroupingRenderer
+          focusNodeTemplate = AccordionFocusNodeRenderer
+        } else if (grouping === 'material tabs') {
+          const {
+            TabsGroupRenderer,
+            TabsFocusNodeRenderer,
+          } = await import('@hydrofoil/shaperone-wc-material/renderer/tabs.js')
+
+          strategy.group = TabsGroupRenderer
+          focusNodeTemplate = TabsFocusNodeRenderer
+        }
+
+        strategy.focusNode = [...focusNodeDecorators(labs)].reduce(combineDecorators, focusNodeTemplate)
+        renderer.setTemplates(strategy)
       }
-
-      if (grouping === 'vaadin accordion') {
-        const {
-          AccordionGroupingRenderer,
-          AccordionFocusNodeRenderer,
-        } = await import('@hydrofoil/shaperone-wc-vaadin/renderer/accordion.js')
-
-        strategy.group = AccordionGroupingRenderer
-        focusNodeTemplate = AccordionFocusNodeRenderer
-      } else if (grouping === 'material tabs') {
-        const {
-          TabsGroupRenderer,
-          TabsFocusNodeRenderer,
-        } = await import('@hydrofoil/shaperone-wc-material/renderer/tabs.js')
-
-        strategy.group = TabsGroupRenderer
-        focusNodeTemplate = TabsFocusNodeRenderer
-      }
-
-      strategy.focusNode = [...focusNodeDecorators(labs)].reduce(combineDecorators, focusNodeTemplate)
-      renderer.setTemplates(strategy)
     },
 
-    async setLabs({ labs }: RendererState) {
-      if (JSON.stringify(previousLabs) === JSON.stringify(labs)) return
+    setLabs({ labs }: RendererState): ConfigCallback {
+      return ({ renderer }) => {
+        if (JSON.stringify(previousLabs) === JSON.stringify(labs)) return
 
-      previousLabs = labs
+        previousLabs = labs
 
-      renderer.setTemplates({
-        focusNode: [...focusNodeDecorators(labs)].reduce(combineDecorators, focusNodeTemplate),
-      })
+        renderer.setTemplates({
+          focusNode: [...focusNodeDecorators(labs)].reduce(combineDecorators, focusNodeTemplate),
+        })
+      }
     },
   }
 })()

demos/lit-html/src/shaperone-playground-lit.ts

@@ -9,8 +9,7 @@ import '@vaadin/vaadin-item/vaadin-item.js'
 import '@material/mwc-icon/mwc-icon.js'
 import '@vaadin-component-factory/vcf-tooltip'
 import type { ShaperoneForm } from '@hydrofoil/shaperone-wc'
-import '@hydrofoil/shaperone-wc/shaperone-form'
-import '@rdfjs-elements/rdf-editor'
+import '@rdfjs-elements/rdf-editor/rdf-editor.js'
 import '@github/clipboard-copy-element'
 import { connect } from '@captaincodeman/rdx'
 import type { Quad } from '@rdfjs/types'
@@ -334,10 +333,10 @@ export class ShaperonePlayground extends connect(store(), LitElement) {
   }
 
   mapState(state: State) {
-    selectComponents(state.componentsSettings.components)
-    configureRenderer.switchLayout(state.rendererSettings)
-    configureRenderer.switchNesting(state.rendererSettings)
-    configureRenderer.setLabs(state.rendererSettings)
+    this.form.configure(selectComponents(state.componentsSettings.components))
+    this.form.configure(configureRenderer.switchLayout(state.rendererSettings))
+    this.form.configure(configureRenderer.switchNesting(state.rendererSettings))
+    this.form.configure(configureRenderer.setLabs(state.rendererSettings))
 
     return {
       components: state.componentsSettings,

demos/lit-html/src/state/store.ts

@@ -1,5 +1,5 @@
 import type { ModelStore, StoreDispatch, StoreState } from '@captaincodeman/rdx'
-import { createStore, devtools, persist } from '@captaincodeman/rdx'
+import { createStore, persist } from '@captaincodeman/rdx'
 import { config } from './config.js'
 
 export type State = StoreState<typeof config>
@@ -44,11 +44,5 @@ export const store = (() => {
     },
   })
 
-  return () => {
-    if (window.Shaperone?.DEBUG === true) {
-      return devtools(store)
-    }
-
-    return store
-  }
+  return () => store
 })()

packages/core-tests/models/editors/effects/loadDash.test.ts

@@ -8,7 +8,7 @@ describe('models/editors/effects/loadDash', () => {
   let store: Store
 
   beforeEach(() => {
-    ({ store } = testStore())
+    store = testStore()
   })
 
   it('does not add metadata twice', async () => {

packages/core-tests/models/editors/lib/match.test.ts

@@ -14,7 +14,7 @@ describe('models/editors/lib/match', () => {
   let shape: PropertyShape
 
   beforeEach(() => {
-    ({ editors } = testStore().store.getState())
+    ({ editors } = testStore().getState())
     shape = propertyShape()
   })