Merge pull request #301 from hypermedia-app/shaperone-env

refactor: introduce `ShaperoneEnvironment`

.changeset/chilled-experts-laugh.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-rdf-validate-shacl": minor
+---
+
+Deprecated `validate.with`

.changeset/curvy-mugs-mate.md

@@ -0,0 +1,15 @@
+---
+"@hydrofoil/shaperone-playground-examples": patch
+"@hydrofoil/shaperone-playground": patch
+"@hydrofoil/shaperone-core": patch
+"@hydrofoil/shaperone-core-tests": patch
+"@hydrofoil/shaperone-hydra": patch
+"@hydrofoil/shaperone-rdf-validate-shacl": patch
+"@shaperone/testing": patch
+"@hydrofoil/shaperone-wc": patch
+"@hydrofoil/shaperone-wc-material": patch
+"@hydrofoil/shaperone-wc-shoelace": patch
+"@hydrofoil/shaperone-wc-vaadin": patch
+---
+
+Update RDF/JS-related dependencies (closes #300)

.changeset/gorgeous-tips-allow.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-core": patch
+---
+
+Use a centralised RDF/JS Environment. Component implementors are encouraged to use the `env` parameter passed to the render function.

.changeset/hot-students-notice.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-shoelace": minor
+---
+
+Updated shoelace to v2.15

.changeset/quick-weeks-punch.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc": minor
+---
+
+Configuration objects must be retrieved by calling `configure` first

.changeset/rude-queens-think.md

@@ -0,0 +1,14 @@
+---
+"@hydrofoil/shaperone-playground-examples": minor
+"@hydrofoil/shaperone-playground": minor
+"@hydrofoil/shaperone-core-tests": minor
+"@hydrofoil/shaperone-hydra": minor
+"@hydrofoil/shaperone-rdf-validate-shacl": minor
+"@shaperone/testing": minor
+"@hydrofoil/shaperone-wc": minor
+"@hydrofoil/shaperone-wc-material": minor
+"@hydrofoil/shaperone-wc-shoelace": minor
+"@hydrofoil/shaperone-wc-vaadin": minor
+---
+
+Use a centralised RDF/JS Environment

.changeset/spotty-icons-promise.md

@@ -0,0 +1,5 @@
+---
+"@hydrofoil/shaperone-wc-vaadin": minor
+---
+
+Update vaadin components to v22

.changeset/swift-geese-impress.md

@@ -0,0 +1,7 @@
+---
+"@hydrofoil/shaperone-core": minor
+---
+
+Changes to `@hydrofoil/shaperone-wc/configure`:
+- It is now required to call `env.use($rdf)`
+- `editors.addMetadata` now takes a function `(env: ShaperoneEnvironment) => DatasetCore | Iterable<Quad>`

.eslintrc.json

@@ -19,13 +19,16 @@
     "max-len": ["error", 200],
     "wc/guard-super-call": "off",
     "class-methods-use-this": "off",
-    "no-param-reassign": ["error", { "props": false }]
+    "no-param-reassign": ["error", { "props": false }],
+    "@typescript-eslint/no-explicit-any": "off",
+    "lit/no-classfield-shadowing": "warn"
   },
   "overrides": [{
     "files": "**/test/**/*.ts",
     "rules": {
       "no-unused-expressions": "warn",
-      "babel/no-unused-expressions": "off"
+      "babel/no-unused-expressions": "off",
+      "lit-a11y/accessible-name": "off"
     }
   },{
     "files": "packages/core-tests/**/*.ts",

.github/pr-commenter.yml

@@ -0,0 +1,8 @@
+comment:
+  on-update: nothing
+  snippets:
+    - id: preview-url
+      files:
+        - 'packages/**/*'
+        - 'demos/**/*'
+      body: "Netlify preview deployed to [{{ url }}]({{ url }})"

.github/workflows/build.yml

@@ -6,33 +6,33 @@ jobs:
   lint:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 14
-      - run: yarn install --ci
+          node-version: 18
+      - run: npm ci
       - run: yarn lint
 
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 14
-      - run: yarn install --ci
+          node-version: 18
+      - run: npm ci
       - run: yarn tsc --noEmit
       - run: yarn build
-      - run: yarn prerelease
+      - run: npx wsrun -m prepack --noEmit
 
   test:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 14
-      - run: yarn install --ci
+          node-version: 18
+      - run: npm ci
       - run: yarn test
       - name: Codecov
         uses: codecov/codecov-action@v3

.github/workflows/netlify.yml

@@ -1,19 +1,23 @@
 name: Netlify
 
-on: push
+on:
+  pull_request:
+  push:
+    branches:
+      - master
 
 jobs:
   Deploy:
     runs-on: ubuntu-latest
     env:
       NETLIFY_TOKEN: ${{ secrets.NETLIFY_AUTH_TOKEN }}
     steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
 
-      - run: yarn install --ci
+      - run: npm ci
 
       - uses: nelonoel/[email protected]
 
@@ -24,7 +28,7 @@ jobs:
         run: npx json -I -f dist/variables.json -e "this.playground='https://$DOMAIN/playground'"
 
       - name: Publish preview
-        uses: tpluscode/action-netlify-deploy@nvm
+        uses: jsmrcaga/action-netlify-deploy@v2.1.0
         if: env.NETLIFY_TOKEN
         with:
           NETLIFY_AUTH_TOKEN: ${{ env.NETLIFY_TOKEN }}
@@ -33,12 +37,12 @@ jobs:
           build_directory: dist
           deploy_alias: ${{ env.BRANCH_NAME }}
           NETLIFY_DEPLOY_TO_PROD: ${{ env.BRANCH_NAME == 'master' }}
+          monorepo_package: "@hydrofoil/shaperone-playground"
 
-      - name: Status check
-        uses: Sibz/[email protected]
-        if: env.NETLIFY_TOKEN
+      - uses: exercism/[email protected]
         with:
-          authToken: ${{ secrets.GITHUB_TOKEN }}
-          context: Netlify Site
-          state: success
-          target_url: https://${{ env.BRANCH_NAME }}--shaperone.netlify.app
+          github-token: ${{ secrets.GITHUB_TOKEN }}
+          template-variables: |
+            {
+              "url": "${{ env.NETLIFY_PREVIEW_URL }}"
+            }

.github/workflows/release.yml

@@ -11,18 +11,18 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Repo
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
         with:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
       - name: Setup Node.js
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 14
+          node-version: 18
 
       - name: Install Dependencies
-        run: yarn
+        run: npm ci
 
       - name: Create Release Pull Request or Publish to npm
         id: changesets

.nvmrc

@@ -1 +1 @@
-14
+18

demos/examples/ErrorSummary/index.ts

@@ -1,9 +1,9 @@
-import { decorate, FocusNodeTemplate } from '@hydrofoil/shaperone-wc/templates'
+import { decorate, FocusNodeTemplate } from '@hydrofoil/shaperone-wc/templates.js'
 import { html } from '@hydrofoil/shaperone-wc'
 import type { ValidationResult } from '@rdfine/shacl'
-import { shrink } from '@zazuko/rdf-vocabularies/shrink'
-import TermMap from '@rdf-esm/term-map'
-import { Term } from 'rdf-js'
+import { shrink } from '@zazuko/prefixes/shrink'
+import rdf from '@zazuko/env/web.js'
+import type { Term } from '@rdfjs/types'
 
 function createMessage(result: ValidationResult) {
   if (result.resultMessage) {
@@ -46,7 +46,7 @@ export const errorSummary = decorate((focusNode: FocusNodeTemplate) => (context,
   const summary = context.focusNode.validationResults
     .reduce(({ focusNodes, errors }, { result }) => {
       if (result.focusNode) {
-        const focusNodeErrors = focusNodes.get(result.focusNode) || { properties: new TermMap(), errors: [] }
+        const focusNodeErrors = focusNodes.get(result.focusNode) || { properties: rdf.termMap(), errors: [] }
         if (result.resultPath) {
           const pathErrors = focusNodeErrors.properties.get(result.resultPath.id)
           if (pathErrors) {
@@ -64,7 +64,7 @@ export const errorSummary = decorate((focusNode: FocusNodeTemplate) => (context,
       }
 
       return { focusNodes, errors }
-    }, { focusNodes: new TermMap(), errors: [] } as Errors)
+    }, { focusNodes: rdf.termMap(), errors: [] } as Errors)
 
   if (summary.errors.length || summary.focusNodes.size) {
     return html`${renderSummary(summary)} ${focusNode(context, args)}`

demos/examples/LanguageMultiSelect/index.ts

@@ -1,16 +1,21 @@
 import { MultiEditorComponent, html } from '@hydrofoil/shaperone-wc'
-import { quad, namedNode, literal } from '@rdf-esm/data-model'
+import $rdf from '@zazuko/env/web.js'
 import { MultiEditor, Lazy } from '@hydrofoil/shaperone-core'
-import { vcard, dash, rdf, rdfs } from '@tpluscode/rdf-ns-builders'
+import { vcard, rdfs } from '@tpluscode/rdf-ns-builders'
 import { getLocalizedLabel } from '@rdfjs-elements/lit-helpers'
-import { sort } from '@hydrofoil/shaperone-core/lib/components'
+import { sort } from '@hydrofoil/shaperone-core/lib/components.js'
+import { ShaperoneEnvironment } from '@hydrofoil/shaperone-core/env.js'
 
-const editor = namedNode('http://example.com/LanguageMultiSelect')
+const editor = $rdf.namedNode('http://example.com/LanguageMultiSelect')
 
 export const component: (theme: 'lumo' | 'material') => Lazy<MultiEditorComponent> = theme => ({
   editor,
   async lazyRender() {
-    await import(`multiselect-combo-box/theme/${theme}/multiselect-combo-box`)
+    if (theme === 'material') {
+      await import(/* @vite-ignore */'multiselect-combo-box/theme/material/multiselect-combo-box.js')
+    } else {
+      await import(/* @vite-ignore */'multiselect-combo-box/theme/lumo/multiselect-combo-box.js')
+    }
 
     return ({ property }, { update }) => {
       const languages = property.shape.in
@@ -58,7 +63,7 @@ export const matcher: MultiEditor = {
   },
 }
 
-export function * metadata() {
-  yield quad(editor, rdf.type, dash.MultiEditor)
-  yield quad(editor, rdfs.label, literal('Language combobox'))
+export function * metadata(env: ShaperoneEnvironment) {
+  yield env.quad(editor, env.ns.rdf.type, env.ns.dash.MultiEditor)
+  yield env.quad(editor, env.ns.rdfs.label, env.literal('Language combobox'))
 }

demos/examples/NestedShapesIndividually/renderer.ts

@@ -1,4 +1,4 @@
-import { decorate, FormTemplate } from '@hydrofoil/shaperone-wc/templates'
+import { decorate, FormTemplate } from '@hydrofoil/shaperone-wc/templates.js'
 import { html, css } from '@hydrofoil/shaperone-wc'
 
 export const topmostFocusNodeFormRenderer = decorate((form: FormTemplate): FormTemplate => {

demos/examples/StarRating/index.ts

@@ -2,10 +2,11 @@ import type { IconDefinition } from '@fortawesome/fontawesome-common-types'
 import type { IconName } from '@fortawesome/fontawesome-svg-core'
 import { html, SingleEditor, Lazy, SingleEditorComponent } from '@hydrofoil/shaperone-wc'
 import type { UpdateComponentState } from '@hydrofoil/shaperone-core/models/components'
-import { literal, namedNode, quad } from '@rdf-esm/data-model'
-import { rdf, rdfs, schema, xsd } from '@tpluscode/rdf-ns-builders'
+import { schema, xsd } from '@tpluscode/rdf-ns-builders'
 import { dash } from '@tpluscode/rdf-ns-builders/loose'
 import type { PropertyShape } from '@rdfine/shacl'
+import { ShaperoneEnvironment } from '@hydrofoil/shaperone-core/env.js'
+import rdf from '@zazuko/env/web.js'
 
 export interface StarRating {
   icon?: IconDefinition | null
@@ -16,7 +17,7 @@ export interface StarRatingComponent extends SingleEditorComponent<StarRating> {
   defaultIcon?: IconDefinition
 }
 
-const editor = namedNode('http://example.com/StarRating')
+const editor = rdf.namedNode('http://example.com/StarRating')
 
 interface LoadIcon {
   defaultIcon: IconDefinition | undefined
@@ -29,7 +30,7 @@ async function loadIcon({ defaultIcon, shape, updateComponentState }: LoadIcon)
   const iconName: IconName | undefined = shape.pointer.out(dash.icon).value as IconName
   if (iconName) {
     try {
-      ({ definition: icon } = await import(`@fortawesome/free-solid-svg-icons/${iconName}.js`))
+      ({ definition: icon } = await import(/* @vite-ignore */`@fortawesome/free-solid-svg-icons/${iconName}.js`))
     } catch (e) {
       icon = null
     }
@@ -64,13 +65,13 @@ export const component: Lazy<StarRatingComponent> = {
     return false
   },
   async lazyRender() {
-    await import('./star-rating')
+    await import('./star-rating.js')
 
-    return function ({ value }, { update }) {
+    return function ({ env, value }, { update }) {
       const rating = value.object ? Number.parseFloat(value.object.value) : 0
 
       function setRating(e: CustomEvent) {
-        update(literal(e.detail.value.toString(), xsd.float))
+        update(env.literal(e.detail.value.toString(), xsd.float))
       }
 
       return html`<ex-star-rating .value="${rating}"
@@ -87,7 +88,7 @@ export const matcher: SingleEditor = {
   },
 }
 
-export function * metadata() {
-  yield quad(editor, rdf.type, dash.SingleEditor)
-  yield quad(editor, rdfs.label, literal('Star rating'))
+export function * metadata(env: ShaperoneEnvironment) {
+  yield env.quad(editor, env.ns.rdf.type, env.ns.dash.SingleEditor)
+  yield env.quad(editor, env.ns.rdfs.label, env.literal('Star rating'))
 }

demos/examples/XoneRenderer/index.ts

@@ -1,8 +1,8 @@
-import { decorate, FocusNodeTemplate } from '@hydrofoil/shaperone-wc/templates'
+import { decorate, FocusNodeTemplate } from '@hydrofoil/shaperone-wc/templates.js'
 import { html } from '@hydrofoil/shaperone-wc'
 import { LogicalConstraint } from '@hydrofoil/shaperone-core/models/forms'
 import type { Shape } from '@rdfine/shacl'
-import { Term } from 'rdf-js'
+import type { Term } from '@rdfjs/types'
 import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js'
 
 const selectedShapes = new WeakMap<Term, Shape>()