lit-rdf 0.3.0 → 0.3.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # lit-rdf
 
+## 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/custom-elements.json

@@ -348,6 +348,16 @@
           "description": "Custom element (`<rdf-graph>`) that contributes an RDF graph dataset to an ancestor\n`DatasetProvider` (such as `<rdf-dataset>`).",
           "name": "RdfGraph",
           "members": [
+            {
+              "kind": "field",
+              "name": "env",
+              "type": {
+                "text": "Environment"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "new Environment(this)"
+            },
             {
               "kind": "field",
               "name": "value",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lit-rdf",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "type": "module",
   "scripts": {
     "prepare": "husky && patch-package",
@@ -33,7 +33,6 @@
     "./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": {

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>`).
@@ -7,6 +14,7 @@ import type { DatasetCore, NamedNode } from '@rdfjs/types';
  * @element rdf-graph
  */
 export default class RdfGraph extends LitElement {
+    private readonly env;
     /**
      * The RDF/JS dataset containing the graph triples to contribute to the parent dataset provider.
      */
@@ -16,6 +24,7 @@ export default class RdfGraph extends LitElement {
      */
     graph: NamedNode | undefined;
     private datasetProvider;
+    constructor();
     protected updated(properties: Map<string, unknown>): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/src/components/rdf-graph.js

@@ -8,6 +8,7 @@ import { LitElement, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { consume } from '@lit/context';
 import { datasetProvider } from '../context.js';
+import { Environment } from '../controllers/Environment.js';
 import { toNamedNode } from '../converter.js';
 /**
  * Custom element (`<rdf-graph>`) that contributes an RDF graph dataset to an ancestor
@@ -16,6 +17,10 @@ import { toNamedNode } from '../converter.js';
  * @element rdf-graph
  */
 let RdfGraph = class RdfGraph extends LitElement {
+    constructor() {
+        super();
+        this.env = new Environment(this);
+    }
     updated(properties) {
         if (properties.has('value')) {
             if (this.value) {
@@ -28,6 +33,9 @@ let RdfGraph = class RdfGraph extends LitElement {
     }
     connectedCallback() {
         super.connectedCallback();
+        if (!this.value && this.id && window.graphs?.[this.id]) {
+            this.value = this.env.value.dataset(window.graphs[this.id]({ factory: this.env.value }));
+        }
         if (this.value) {
             this.datasetProvider?.updateGraph(this, this.value, this.graph);
         }

package/src/custom-elements.d.ts

@@ -50,6 +50,7 @@ interface HTMLRdfEnvironmentElement extends HTMLElement {
 
 
 interface HTMLRdfGraphElement extends HTMLElement {
+    env: Environment;
     /**
      * The RDF/JS dataset containing the graph triples to contribute to the parent dataset provider.
      */

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 }));
-    }
-});