build(deps): many RDF/JS updates

.changeset/tall-actors-carry.md

@@ -0,0 +1,11 @@
+---
+"@zazuko/spex": patch
+---
+
+Many dependency updates. Notably:
+
+- `rdf-ext` replaced with `@zazuko/env`
+- `@rdfjs/formats-common` replaced with `@rdfjs/formats`
+- `@zazuko/rdf-vocabularies` replaced with `@zazuko/prefixes`
+- updated `sparql-http-client` to v3
+- `rdf-js` removed

package.json

@@ -20,20 +20,18 @@
   "dependencies": {
     "@headlessui/vue": "^1.7.14",
     "@heroicons/vue": "^2.0.18",
-    "@rdf-esm/formats-common": "^0.5.6",
-    "@rdfjs-elements/rdf-editor": "^0.5.5",
-    "@zazuko/rdf-vocabularies": "^2023.1.19",
+    "@rdfjs-elements/rdf-editor": "^0.5.7",
+    "@zazuko/env": "^2.1.1",
+    "@zazuko/prefixes": "^2.2.0",
     "@zazuko/vue-graph-layout": "^0.1.4",
     "buffer": "^6.0.3",
     "bulma": "^0.9.4",
     "core-js": "^3.30.2",
     "lodash.clonedeep": "^4.5.0",
     "lodash.debounce": "^4.0.8",
-    "n3": "^1.16.4",
     "process": "^0.11.10",
-    "rdf-ext": "^2.2.0",
     "register-service-worker": "^1.7.2",
-    "sparql-http-client": "^2.4.2",
+    "sparql-http-client": "^3.0.0",
     "splitpanes": "^3.1.5",
     "stream-browserify": "^3.0.0",
     "vue": "^3.3.4",
@@ -43,9 +41,7 @@
     "@babel/core": "^7.22.1",
     "@babel/eslint-parser": "^7.21.8",
     "@changesets/cli": "^2.26.1",
-    "@types/clownface": "^1.5.2",
-    "@types/rdf-ext": "^2.2.0",
-    "@types/sparql-http-client": "^2.2.8",
+    "@types/sparql-http-client": "^3",
     "@typescript-eslint/eslint-plugin": "^5.59.9",
     "@typescript-eslint/parser": "^5.59.9",
     "@vue/cli-plugin-babel": "^5.0.8",
@@ -80,4 +76,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

src/components/Term.vue

@@ -6,7 +6,7 @@
 
 <script setup lang="ts">
 import { Endpoint } from '@/endpoint'
-import { Term } from 'rdf-js'
+import { Term } from '@rdfjs/types'
 import { ref } from 'vue'
 import Tooltip from './common/tooltip.vue'
 

src/components/shacl-dialog/modal-shacl-load.vue

@@ -28,9 +28,9 @@
 </template>
 
 <script>
+import { Readable } from 'stream'
 import { XMarkIcon } from '@heroicons/vue/24/solid'
-import * as N3 from 'n3'
-import rdfEnvironment from 'rdf-ext'
+import rdfEnvironment from '@zazuko/env/web'
 import { rdf, spex } from '@/namespace'
 import SpexDialog from './dialog.vue'
 
@@ -53,10 +53,9 @@ export default {
         return
       }
 
-      const parser = new N3.Parser()
       try {
-        const quads = parser.parse(this.data)
-        const dataset = rdfEnvironment.dataset(quads)
+        const quads = rdfEnvironment.formast.parsers.import('text/turtle', Readable.from(this.data))
+        const dataset = await rdfEnvironment.dataset().import(quads)
         const pointer = rdfEnvironment.clownface({ dataset, term: spex.DefaultShapes })
           .in(rdf.type)
           .in(spex.shape)

src/endpoint.ts

@@ -1,5 +1,5 @@
-import { shrink } from '@zazuko/rdf-vocabularies/shrink'
-import rdfEnvironment from 'rdf-ext'
+import { shrink } from '@zazuko/prefixes'
+import rdfEnvironment from '@zazuko/env/web.js'
 import ParsingClient from 'sparql-http-client/ParsingClient'
 import { dataModelFromSHACL, dataModelToSHACL } from '@/shacl'
 import * as ns from './namespace'
@@ -54,13 +54,15 @@ export class Endpoint {
   */
   public applySettings(settings: Settings) {
     this._settings = settings
-    this._client = new ParsingClient(
-      {
-        endpointUrl: this._settings.sparqlEndpoint ?? '',
-        user: this._settings.username ?? undefined,
-        password: this._settings.password ?? undefined
-      }
-    )
+    if (this._settings.sparqlEndpoint) {
+      this._client = new ParsingClient(
+        {
+          endpointUrl: this._settings.sparqlEndpoint,
+          user: this._settings.username ?? undefined,
+          password: this._settings.password ?? undefined
+        }
+      )
+    }
 
     // Reinitialize prefixes
     Object.keys(_prefixes).forEach((prefix) => {
@@ -115,8 +117,8 @@ export class Endpoint {
     if (dataModel !== null) {
       return dataModel
     }
-    const introspectedDataModel = this.fetchIntrospectDataModel()
-    return introspectedDataModel
+
+    return this.fetchIntrospectDataModel()
   }
 
   get datasetURI(): string {
@@ -141,17 +143,17 @@ export class Endpoint {
       DESCRIBE <${this.datasetURI}>
       ${fromClause}
     `
-    const quads = await this._client.query.construct(query)
+    const dataset = await this._client.query.construct(query)
 
-    if (quads.length === 0) {
+    if (dataset.size === 0) {
       return null
     }
-    const dataset = rdfEnvironment.clownface({
-      dataset: rdfEnvironment.dataset(quads),
+    const ptr = rdfEnvironment.clownface({
+      dataset,
       term: rdfEnvironment.namedNode(this.datasetURI),
     })
 
-    return this.dataModelFromSHACL(dataset)
+    return this.dataModelFromSHACL(ptr)
   }
 
   dataModelFromSHACL(dataset) {
@@ -258,12 +260,11 @@ export class Endpoint {
         }
       }
     `
-    const results = await this._client.query.construct(query)
-    const dataset = rdfEnvironment.dataset(results)
+    const dataset = await this._client.query.construct(query)
     const subjects = [...(dataset.match(null, ns.rdf.type, type) as any)]
     const rows = rdfEnvironment.termMap(subjects.map(({ subject }) => [subject, { id: subject.value, term: subject }]))
 
-    results.forEach(({ subject, predicate: { value: predicate }, object }) => {
+    ;[...dataset].forEach(({ subject, predicate: { value: predicate }, object }) => {
       const row = rows.get(subject)
 
       if (!row) return
@@ -289,7 +290,7 @@ export class Endpoint {
     `
     const quads = await this._client.query.construct(query)
 
-    const properties = quads.reduce((acc, { predicate, object }) => {
+    const properties = [...quads].reduce((acc, { predicate, object }) => {
       if (!acc.has(predicate.value)) {
         const property = {
           id: predicate.value,
@@ -353,7 +354,7 @@ PREFIX rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#>
 PREFIX rdfs: <http://www.w3.org/2000/01/rdf-schema#>
 
 SELECT ?class (count(?x) as ?count) ${fromClause} WHERE {
-  ?x a ?class . 
+  ?x a ?class .
 } group by ?class
 `
 }

src/model/resource.model.ts

@@ -1,4 +1,4 @@
-import { Term } from 'rdf-js'
+import { Term } from '@rdfjs/types'
 
 export interface Resource {
     id: string,

src/namespace.ts

@@ -1,5 +1,5 @@
-import prefixes from '@zazuko/rdf-vocabularies/prefixes'
-import rdfEnvironment from 'rdf-ext'
+import prefixes from '@zazuko/prefixes'
+import rdfEnvironment from '@zazuko/env/web.js'
 
 prefixes.spex = 'https://described.at/spex/'
 

src/shacl.ts

@@ -1,5 +1,5 @@
 import { GraphPointer, MultiPointer } from 'clownface'
-import rdfEnvironment from 'rdf-ext'
+import rdfEnvironment from '@zazuko/env/web.js'
 import { DataModel, Table, PropertyTerm } from './model/data-model.model'
 import { rdf, schema, sh, spex } from './namespace'
 import { Term } from '@rdfjs/types'

src/views/ShaclEditor.vue

@@ -46,13 +46,12 @@
 
 <script>
 import { ArrowPathIcon } from '@heroicons/vue/24/solid'
-import { shrink as _shrink } from '@zazuko/rdf-vocabularies/shrink'
+import { shrink as _shrink } from '@zazuko/prefixes'
 import { GraphLayout } from '@zazuko/vue-graph-layout'
 import { Splitpanes, Pane } from 'splitpanes'
 import 'splitpanes/dist/splitpanes.css'
 import '@rdfjs-elements/rdf-editor'
-import { parsers } from '@rdf-esm/formats-common'
-import rdfEnvironment from 'rdf-ext'
+import rdfEnvironment from '@zazuko/env/web'
 import { tablesFromSHACL } from '@/shacl'
 import { rdf, sh } from '@/namespace'
 import ResourceCard from '@/components/ResourceCard.vue'

tsconfig.json

@@ -1,11 +1,11 @@
 {
   "compilerOptions": {
     "noImplicitAny": false,
-    "target": "esnext",
-    "module": "esnext",
+    "target": "ES2022",
+    "module": "ES2022",
     "strict": true,
     "jsx": "preserve",
-    "moduleResolution": "node",
+    "moduleResolution": "Bundler",
     "skipLibCheck": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
@@ -39,4 +39,4 @@
   "exclude": [
     "node_modules"
   ]
-}
+}