lit-rdf 0.3.0 → 0.3.2

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # lit-rdf
 
+## 0.3.2
+
+### Patch Changes
+
+- ee852da: Allow both `[id]` and `[data-attribute]` to select the graph from `window.graphs`
+- ee852da: `rdf-graph` should not rely on RDF environment so that populating data from `window.graphs` is as fast as possible
+
+## 0.3.1
+
+### Patch Changes
+
+- 248eebf: No actual `custom-elements.js` module caused issues at runtime
+- 7a53892: `rdf-graph` now initializes itself from 'window.graphs`
+- 7a53892: Removed `data-graph.js` (technically breaking change but the script does not work in 4.0 anyway)
+
 ## 0.3.0
 
 ### Minor Changes

package/README.md

@@ -40,24 +40,25 @@ Compose them declaratively in your HTML or Lit templates:
   <rdf-dataset id="graph2">
     <!-- rdf-dataset combines the data from rdf-graph elements -->
     <rdf-graph .value="${graph}">
-      <!-- Target person nodes and sort them by name -->
-      <target-node target-class="schema:Person" order-by="schema:name">
-        <!-- Filter nodes (e.g. by custom condition) -->
-        <filter-node .filter=${person => Number(person.out(ns.schema.age).value) >= 18}>
-          <article>
-            <!-- Display resource label and properties -->
-            <h2><resource-label></resource-label></h2>
-            <p>Homepage: <resource-link property="schema:url"></resource-link></p>
-  
-            <!-- Traverse relations -->
-            <h3>Friends:</h3>
-            <traverse-graph property-path="schema:knows">
-              <p><resource-label></resource-label></p>
-            </traverse-graph>
-          </article>
-        </filter-node>
-      </target-node>
     </rdf-graph>
+
+    <!-- Target person nodes and sort them by name -->
+    <target-node target-class="schema:Person" order-by="schema:name">
+      <!-- Filter nodes (e.g. by custom condition) -->
+      <filter-node .filter=${person => Number(person.out(ns.schema.age).value) >= 18}>
+        <article>
+          <!-- Display resource label and properties -->
+          <h2><resource-label></resource-label></h2>
+          <p>Homepage: <resource-link property="schema:url"></resource-link></p>
+
+          <!-- Traverse relations -->
+          <h3>Friends:</h3>
+          <traverse-graph property-path="schema:knows">
+            <p><resource-label></resource-label></p>
+          </traverse-graph>
+        </article>
+      </filter-node>
+    </target-node>
   </rdf-dataset>
 </rdf-environment>
 ```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lit-rdf",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "type": "module",
   "scripts": {
     "prepare": "husky && patch-package",
@@ -33,13 +33,13 @@
     "./constructor.js": "./src/constructor.js",
     "./mixins.js": "./src/mixins.js",
     "./controllers.js": "./src/controllers.js",
-    "./runtime/*.js": "./src/runtime/*.js",
     "./sort.js": "./src/sort.js"
   },
   "dependencies": {
     "@lit/context": "^1.1.6",
     "@rdfjs-elements/lit-helpers": "^0.3.13",
     "@rdfjs/data-model": "^2.1.1",
+    "@rdfjs/dataset": "^2.0.3",
     "@rdfjs/types": "^2",
     "@zazuko/env": "^3.0.1",
     "@zazuko/prefixes": "^2.6.1",
@@ -57,6 +57,7 @@
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@eslint/config-helpers": "^0.7.0",
     "@eslint/js": "^10",
+    "@lit-labs/ssr": "^4.1.0",
     "@open-wc/testing": "^5.0.0",
     "@rollup/plugin-commonjs": "^26",
     "@rolldown/plugin-node-polyfills": "^1.0.3",
@@ -67,6 +68,7 @@
     "@types/clownface": "^2.0.10",
     "@types/is-url": "^1.2.32",
     "@types/rdfjs__data-model": "^2.0.9",
+    "@types/rdfjs__dataset": "^2.0.7",
     "@types/readable-stream": "^4.0.24",
     "@types/sinon": "^22.0.0",
     "@typescript-eslint/eslint-plugin": "^8.66.0",

package/src/components/rdf-graph.d.ts

@@ -1,5 +1,12 @@
 import { LitElement } from 'lit';
-import type { DatasetCore, NamedNode } from '@rdfjs/types';
+import type { DataFactory, DatasetCore, NamedNode, Quad } from '@rdfjs/types';
+declare global {
+    interface Window {
+        graphs?: Record<string, (options: {
+            factory: DataFactory;
+        }) => Quad[]>;
+    }
+}
 /**
  * Custom element (`<rdf-graph>`) that contributes an RDF graph dataset to an ancestor
  * `DatasetProvider` (such as `<rdf-dataset>`).

package/src/components/rdf-graph.js

@@ -7,6 +7,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { consume } from '@lit/context';
+import Dataset from '@rdfjs/dataset';
+import factory from '@rdfjs/data-model';
 import { datasetProvider } from '../context.js';
 import { toNamedNode } from '../converter.js';
 /**
@@ -27,6 +29,10 @@ let RdfGraph = class RdfGraph extends LitElement {
         }
     }
     connectedCallback() {
+        const graphId = this.getAttribute('data-graph') || this.id;
+        if (!this.value && graphId && window.graphs?.[graphId]) {
+            this.value = Dataset.dataset(window.graphs[graphId]({ factory }));
+        }
         super.connectedCallback();
         if (this.value) {
             this.datasetProvider?.updateGraph(this, this.value, this.graph);

package/src/custom-elements.js

@@ -0,0 +1 @@
+export {}

package/src/runtime/data-graph.d.ts

@@ -1,14 +0,0 @@
-/**
- * Runtime script that finds all `rdf-graph` elements in the DOM
- * and populates their `.value` property with an RDF/JS Dataset initialized
- * from graph factory functions registered on `window.graphs`.
- */
-import factory from '@zazuko/env/web.js';
-import type { Quad } from '@rdfjs/types';
-declare global {
-    interface Window {
-        graphs?: Record<string, (options: {
-            factory: typeof factory;
-        }) => Quad[]>;
-    }
-}

package/src/runtime/data-graph.js

@@ -1,11 +0,0 @@
-/**
- * Runtime script that finds all `rdf-graph` elements in the DOM
- * and populates their `.value` property with an RDF/JS Dataset initialized
- * from graph factory functions registered on `window.graphs`.
- */
-import factory from '@zazuko/env/web.js';
-document.querySelectorAll('rdf-graph').forEach((el) => {
-    if (el.id && window.graphs?.[el.id]) {
-        el.value = factory.dataset(window.graphs[el.id]({ factory }));
-    }
-});