revert: cannot have env in immer state

hypermedia-app · Mar 11, 2024 · 3f39f4f · 3f39f4f
1 parent fb12f26
commit 3f39f4f
Show file tree

Hide file tree

Showing 56 changed files with 252 additions and 271 deletions.
diff --git a/.changeset/quick-weeks-punch.md b/.changeset/quick-weeks-punch.md
@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc": minor
+---
+
+Configuration objects must be retrieved by calling `configure` first
diff --git a/babel.config.json b/babel.config.json
@@ -7,8 +7,7 @@
       }
     ],
     "@babel/plugin-proposal-optional-chaining",
-    "@babel/plugin-proposal-class-properties",
-    "babel-plugin-add-import-extension"
+    "@babel/plugin-proposal-class-properties"
   ],
   "presets": [
     "@babel/preset-typescript"

diff --git a/demos/examples/LanguageMultiSelect/index.ts b/demos/examples/LanguageMultiSelect/index.ts
@@ -13,10 +13,10 @@ export const component: (theme: 'lumo' | 'material') => Lazy<MultiEditorComponen
   async lazyRender() {
     await import(`multiselect-combo-box/theme/${theme}/multiselect-combo-box`)
 
-    return ({ env, property }, { update }) => {
+    return ({ property }, { update }) => {
       const languages = property.shape.in
         .map(lang => property.shape.pointer.node(lang))
-        .sort(sort(property.shape, env))
+        .sort(sort(property.shape))
         .map(lang => ({
           id: lang.value,
           term: lang.term,

diff --git a/demos/lit-html/package.json b/demos/lit-html/package.json
@@ -9,7 +9,7 @@
   "scripts": {
     "prebuild": "rimraf ../../dist/playground",
     "build": "webpack --mode production",
-    "start": "webpack-dev-server --mode development"
+    "start": "NODE_OPTIONS=--openssl-legacy-provider webpack-dev-server --mode development"
   },
   "dependencies": {
     "@captaincodeman/rdx": "^1.0.0-rc.8",

diff --git a/demos/lit-html/src/configure.ts b/demos/lit-html/src/configure.ts
@@ -8,11 +8,11 @@ import { DescriptionTooltip } from '@hydrofoil/shaperone-playground-examples/Des
 import * as vaadinComponents from '@hydrofoil/shaperone-wc-vaadin/components'
 import * as shoelaceComponents from '@hydrofoil/shaperone-wc-shoelace/components'
 import { settings as shoelaceSettings } from '@hydrofoil/shaperone-wc-shoelace/settings'
-import { components, editors, renderer, validation, env } from '@hydrofoil/shaperone-wc/configure'
+import { configure } from '@hydrofoil/shaperone-wc/configure.js'
 import { dash } from '@tpluscode/rdf-ns-builders'
 import { Decorate, RenderTemplate, templates } from '@hydrofoil/shaperone-wc/templates'
 import * as MaterialRenderStrategy from '@hydrofoil/shaperone-wc-material/renderer'
-import { instancesSelector } from '@hydrofoil/shaperone-hydra/components'
+import shaperoneHydra from '@hydrofoil/shaperone-hydra'
 import { validate } from '@hydrofoil/shaperone-rdf-validate-shacl'
 import * as xone from '@hydrofoil/shaperone-playground-examples/XoneRenderer'
 import { errorSummary } from '@hydrofoil/shaperone-playground-examples/ErrorSummary/index.js'
@@ -24,7 +24,7 @@ import { RendererState } from './state/models/renderer.js'
 setBasePath('https://unpkg.com/@shoelace-style/shoelace/dist')
 shoelaceSettings.hoist = false
 
-env.use($rdf)
+const { editors, components, validation, renderer } = configure($rdf)
 
 export const componentSets: Record<ComponentsState['components'], Record<string, Component>> = {
   native: { ...nativeComponents, starRating },
@@ -38,8 +38,7 @@ editors.addMatchers({
   languages: LanguageSelect.matcher,
   starRating: StarRating.matcher,
 })
-editors.decorate(instancesSelector.matcher)
-components.decorate(instancesSelector.decorator)
+shaperoneHydra({ editors, components })
 components.decorate(DescriptionTooltip)
 
 validation.setValidator(validate)

diff --git a/dist/components/implement.md b/dist/components/implement.md
@@ -104,9 +104,12 @@ This way a component can be configured by the consuming code.
 
 ```typescript
 import { faFan } from '@fortawesome/free-solid-svg-icons'
-import { components, editors, renderer } from '@hydrofoil/shaperone-wc/configure'
+import rdf from '@zazuko/env'
+import { configure } from '@hydrofoil/shaperone-wc/configure'
 import { component as starRating } from './StarRating'
 
+const { components, editors, renderer } = configure(rdf)
+
 // use a different icon for the ratings
 starRating.icon = faFan
 

diff --git a/dist/configuration.md b/dist/configuration.md
@@ -4,46 +4,57 @@ Most of the configuration is done on a shared configuration object which applies
 
 In addition to that, individual form elements can be fine-tuned by using HTML's standard API of properties and attributes.
 
+To initialise the configuration, first call the `configure` function from the `@hydrofoil/shaperone-wc/configure` module. This function takes an RDF environment as parameter and returns an object with properties descibed in the following sections.
+
+```typescript
+import rdf from '@zazuko/env'
+import { configure } from '@hydrofoil/shaperone-wc/configure.js'
+
+const config = configure(rdf)
+```
+
+On subsequent calls, the argument can be skipped.
+
 ## Editors
 
 Everything about [editors](editors.md) is set up as shown below where the configuration is customized by providing the pieces necessary to support a hypothetical "star rating editor".
 
 ```typescript
-import { editors } from '@hydrofoil/shaperone-wc/configure'
+import { configure } from '@hydrofoil/shaperone-wc/configure'
 import { matcher, metadata } from './star-rating'
 
-editors.addMatchers(matcher)
-editors.addMetadata(metadata)
+configure().editors.addMatchers(matcher)
+configure().editors.addMetadata(metadata)
 ```
 
 > [!TIP]
 > The `addMatchers` method also takes an object as parameter so that entire set of matchers can easily be added from a start import
 > 
 > ```typescript
-> import { editors } from '@hydrofoil/shaperone-wc/configure'
+> import { configure } from '@hydrofoil/shaperone-wc/configure.js'
 > import * as myMatchers from './matchers'
 >
-> editors.addMatchers(myMatchers)
+> configure().editors.addMatchers(myMatchers)
 > ```
 
 ## Components
 
 The editor components are registered using another export of the same module:
 
 ```typescript
-import { components } from '@hydrofoil/shaperone-wc/configure'
+import { configure } from '@hydrofoil/shaperone-wc/configure.js'
 import starRating from './star-rating-component'
 
-components.pushComponents({ starRating })
+configure().components.pushComponents({ starRating })
 ```
 
 Components can also be removed by referring to their URI identifier:
 
 ```typescript
-import { components } from '@hydrofoil/shaperone-wc/configure'
+import { configure } from '@hydrofoil/shaperone-wc/configure.js'
 import { namedNode } from '@rdf-esm/data-model'
 
-components.removeComponents([
+configure().components.removeComponents([
     namedNode('http://example.com/StarRatingEditor')
 ])
 ```
@@ -56,7 +67,7 @@ For example, to wrap focus node markup in an additional HTML, the strategy can b
 
 ```typescript
 import { html } from '@hydrofoil/shaperone-wc'
-import { renderer } from '@hydrofoil/shaperone-wc/configure'
+import { configure } from '@hydrofoil/shaperone-wc/configure.js'
 import { DefaultStrategy } from '@hydrofoil/shaperone-wc/renderer/DefaultStrategy'
 import type { FocusNodeRenderStrategy } from '@hydrofoil/shaperone-wc/lib/renderer'
 
@@ -75,7 +86,7 @@ collapsibleFocusNode.loadDependencies = () => {
 }
 
 // finally, the extensions has to be added, combined with all other rendering methods
-renderer.setStrategy({
+configure().renderer.setStrategy({
     ...DefaultStrategy,
     focusNode: collapsibleFocusNode,
 })

diff --git a/dist/editors/matchers.md b/dist/editors/matchers.md
@@ -26,10 +26,11 @@ export const matcher: SingleEditor = {
 Once an editor is created it needs to be added to shaperone. It is done globally so that it will be available to all forms in the application.
 
 ```typescript
-import { editors } from '@hydrofoil/shaperone-wc/configure'
+import rdf from '@zazuko/env'
+import { configure } from '@hydrofoil/shaperone-wc/configure'
 import * as StarRating from './components/StarRating'
 
-editors.addMatchers({
+configure(rdf).editors.addMatchers({
   starRating: StarRating.matcher,
 })
 ```
@@ -82,10 +83,10 @@ export const preferTextArea = (properties = multilineProperties): MatcherDecorat
 To use the decorator in an application, pass it to the shaperone configuration object.
 
 ```typescript
-import { editors } from '@hydrofoil/shaperone-wc/configure'
+import { configure } from '@hydrofoil/shaperone-wc/configure'
 import { preferTextArea } from './matcher-decorators'
 
-editors.decorate(preferTextArea())
+configure().editors.decorate(preferTextArea())
 ```
 
 > [!TIP]

diff --git a/dist/editors/metadata.md b/dist/editors/metadata.md
@@ -9,7 +9,7 @@ Given a custom editor or willing to add translations of the DASH editors labels,
 The simple way is to pass array of RDF/JS [quads](http://rdf.js.org/data-model-spec/#quad-interface) or a [`DatasetCore`](https://rdf.js.org/dataset-spec/#datasetcore-interface) to the configuration object.
 
 ```typescript
-import { editors } from '@hydrofoil/shaperone-wc/configure'
+import { configure } from '@hydrofoil/shaperone-wc/configure'
 import { quad } from '@rdf-esm/data-model'
 
 // actually exported from the editor's module
@@ -18,7 +18,7 @@ function * metadata() {
   yield quad(editor, rdfs.label, literal('Star rating'))
 }
 
-editors.addMetadata([...metadata()])
+configure().editors.addMetadata([...metadata()])
 ```
 
 A terser alternative is to use [clownface](https://npm.im/clownface) library to ease the buildup of the triples. For example to add custom translations for editors

diff --git a/dist/extensions/hydra.md b/dist/extensions/hydra.md
@@ -21,11 +21,11 @@ The `matcher` decorator returns score `1` if a property shape has `hydra:collect
 They will both fall back to standard behavior when no Hydra terms are used on a Property Shape.
 
 ```typescript
-import * as configure from '@hydrofoil/shaperone-wc/configure'
+import { configure } from '@hydrofoil/shaperone-wc/configure'
 import shaperoneHydra from '@hydrofoil/shaperone-hydra'
 import { Hydra } from 'alcaeus/web'
 
-shaperoneHydra(configure, { client: Hydra })
+shaperoneHydra(configure())
 ```
 
 > [!TIP]

diff --git a/dist/validation.md b/dist/validation.md
@@ -7,9 +7,11 @@ The Shaperone core library does not perform validation on its own and instead re
 `@hydrofoil/shaperone-rdf-validate-shacl` provides the default validation choice, which can be configured using the usual way:
 
 ```typescript
-import { validation } from '@hydrofoil/shaperone-wc/configure'
+import rdf from '@zazuko/env'
 import { validate } from '@hydrofoil/shaperone-rdf-validate-shacl'
 
+const { validation } = configure(rdf)
+
 validation.setValidator(validate)
 ```
 
@@ -19,10 +21,13 @@ Provide an async function as shown below
 
 ```typescript
 import type { DatasetCore } from 'rdf-js'
-import { validation } from '@hydrofoil/shaperone-wc/configure'
+import rdf from '@zazuko/env'
+import { configure } from '@hydrofoil/shaperone-wc/configure'
 import clownface, { GraphPointer } from 'clownface'
 import createReport from './lib/my-validator'
 
+const { validation } = configure(rdf)
+
 async function validate(shapes: DatasetCore, data: DatasetCore): Promise<GraphPointer> {
     return createReport(shapes, data)
 }

diff --git a/packages/core-tests/lib/components.test.ts b/packages/core-tests/lib/components.test.ts
@@ -5,8 +5,13 @@ import { expect } from 'chai'
 import { ex } from '@shaperone/testing'
 import { rdfs, schema, skos } from '@tpluscode/rdf-ns-builders'
 import rdf from '@shaperone/testing/env.js'
+import { setEnv } from '@hydrofoil/shaperone-core/env.js'
 
 describe('core/lib/components', () => {
+  before(async () => {
+    await setEnv(rdf)
+  })
+
   describe('sort', () => {
     it('sorts by rdf:label by default', () => {
       // given
@@ -18,7 +23,7 @@ describe('core/lib/components', () => {
       ]
 
       // when
-      const result = resources.sort(sort(shape, rdf))
+      const result = resources.sort(sort(shape))
 
       // then
       expect(result.map(r => r.term)).to.deep.equal([ex.first, ex.second, ex.last])
@@ -34,7 +39,7 @@ describe('core/lib/components', () => {
       ]
 
       // when
-      const result = resources.sort(sort(shape, rdf))
+      const result = resources.sort(sort(shape))
 
       // then
       expect(result.map(r => r.term)).to.deep.equal([ex.first, ex.second, ex.last])
@@ -50,7 +55,7 @@ describe('core/lib/components', () => {
       ]
 
       // when
-      const result = resources.sort(sort(shape, rdf))
+      const result = resources.sort(sort(shape))
 
       // then
       expect(result.map(r => r.term)).to.deep.equal([ex.first, ex.second, ex.last])
@@ -66,7 +71,7 @@ describe('core/lib/components', () => {
       ]
 
       // when
-      const result = resources.sort(sort(shape, rdf))
+      const result = resources.sort(sort(shape))
 
       // then
       expect(result.map(r => r.term)).to.deep.equal([ex.first, ex.second, ex.last])
@@ -82,7 +87,7 @@ describe('core/lib/components', () => {
       ]
 
       // when
-      const result = resources.sort(sort(shape, rdf))
+      const result = resources.sort(sort(shape))
 
       // then
       expect(result.map(r => r.term)).to.deep.equal([ex.bar, ex.baz, ex.foo])

diff --git a/packages/core-tests/models/components/reducers.test.ts b/packages/core-tests/models/components/reducers.test.ts
@@ -4,12 +4,17 @@ import { dash } from '@tpluscode/rdf-ns-builders/loose'
 import reducers from '@hydrofoil/shaperone-core/models/components/reducers.js'
 import { Component, ComponentDecorator, ComponentsState } from '@hydrofoil/shaperone-core/models/components'
 import env from '@shaperone/testing/env.js'
+import { setEnv } from '@hydrofoil/shaperone-core/env.js'
 
 describe('core/models/components/reducers', () => {
+  before(async () => {
+    await setEnv(env)
+  })
+
   describe('pushComponents', () => {
     it('can be called with object', () => {
       // given
-      const before = { env, components: {}, decorators: [] }
+      const before = { components: {}, decorators: [] }
       const component = {
         editor: dash.FooEditor,
         render() {
@@ -28,7 +33,7 @@ describe('core/models/components/reducers', () => {
 
     it('can be called with array', () => {
       // given
-      const before = { env, components: {}, decorators: [] }
+      const before = { components: {}, decorators: [] }
       const component = {
         editor: dash.FooEditor,
         render() {
@@ -46,7 +51,6 @@ describe('core/models/components/reducers', () => {
     it('replaces an editor if it is has a different render function', () => {
       // given
       const before = {
-        env,
         components: {
           [dash.FooEditor.value]: {
             editor: dash.FooEditor,
@@ -75,7 +79,6 @@ describe('core/models/components/reducers', () => {
     it('replaces an editor if it is has a different lazyRender function', () => {
       // given
       const before = {
-        env,
         components: {
           [dash.FooEditor.value]: {
             editor: dash.FooEditor,
@@ -104,7 +107,6 @@ describe('core/models/components/reducers', () => {
     it('replaces an editor if new is lazy', () => {
       // given
       const before = {
-        env,
         components: {
           [dash.FooEditor.value]: {
             editor: dash.FooEditor,
@@ -133,7 +135,6 @@ describe('core/models/components/reducers', () => {
     it('replaces an editor if new is no lazy', () => {
       // given
       const before = {
-        env,
         components: {
           [dash.FooEditor.value]: {
             editor: dash.FooEditor,
@@ -162,7 +163,6 @@ describe('core/models/components/reducers', () => {
     it('applies decorators', () => {
       // given
       const before: ComponentsState = {
-        env,
         components: {},
         decorators: [{
           applicableTo: () => true,
@@ -217,7 +217,6 @@ describe('core/models/components/reducers', () => {
         loading: false,
       }
       const before = {
-        env,
         components: {
           [dash.FooEditor.value]: component,
         },
@@ -244,7 +243,6 @@ describe('core/models/components/reducers', () => {
         loading: false,
       }
       const before = {
-        env,
         components: {
           [dash.FooEditor.value]: component,
         },