lit-rdf 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,14 @@
+# lit-rdf
+
+## 0.2.0
+
+### Minor Changes
+
+- db31aa2: Removed `provideFocusNode`, `provideGraph` and `provideEnvironment` mixins. Instead, the respecitve controllers must be used
+- db31aa2: Change the `resource-label` `property` property to `predicate`.
+
+## 0.1.0
+
+### Minor Changes
+
+- First release

package/package.json

@@ -1,20 +1,26 @@
 {
   "name": "lit-rdf",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "type": "module",
   "scripts": {
     "prepare": "husky",
-    "lint": "eslint . --quiet --ignore-path .gitignore",
+    "lint": "eslint . --quiet --ignore-path .gitignore --ignore-path .eslintignore",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
+    "test": "vitest --project=storybook",
     "build": "tsc",
     "prepack": "npm run build",
     "release": "changeset publish"
   },
   "files": [
+    "CHANGELOG.md",
     "src/**/*.js",
     "src/**/*.d.ts"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hypermedia-app/lit-rdf"
+  },
   "exports": {
     ".": "./src/index.js",
     "./components/*.js": "./src/components/*.js",

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

@@ -1,7 +1,8 @@
 import { LitElement } from 'lit';
 import type { AnyPointer } from 'clownface';
-declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithEnvironment> & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithGraph>;
+declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithGraph>;
 export default class extends default_base {
+    static styles: import("lit").CSSResult;
     parent: AnyPointer | undefined;
     render(): unknown;
 }

package/src/components/data-graph.js

@@ -4,13 +4,17 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import { consume } from '@lit/context';
 import { customElement, state } from 'lit/decorators.js';
 import { dataset } from '../context.js';
-import { consumeEnvironment } from '../mixins/environment.js';
 import { provideGraph } from '../mixins/graph.js';
-let default_1 = class extends provideGraph(consumeEnvironment(LitElement)) {
+let default_1 = class extends provideGraph(LitElement) {
+    static { this.styles = css `
+    :host {
+      display: contents;
+    }
+  `; }
     render() {
         return html `
             <slot></slot>`;

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

@@ -1,6 +1,7 @@
 import { LitElement } from 'lit';
 declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithEnvironment>;
 export default class extends default_base {
+    static styles: import("lit").CSSResult;
     constructor();
     render(): import("lit-html").TemplateResult<1>;
 }

package/src/components/rdf-environment.js

@@ -4,11 +4,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { html, LitElement } from 'lit';
+import { css, html, LitElement } from 'lit';
 import env from '@zazuko/env/web.js';
 import { customElement } from 'lit/decorators.js';
 import { provideEnvironment } from '../mixins.js';
 let default_1 = class extends provideEnvironment(LitElement) {
+    static { this.styles = css `
+    :host {
+      display: contents;
+    }
+  `; }
     constructor() {
         super();
         this.rdf = env;

package/src/components/resource-label.d.ts

@@ -1,8 +1,8 @@
 import { LitElement } from 'lit';
 import type { NamedNode } from '@rdfjs/types';
-declare const ResourceLabel_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithFocusNode>;
-export declare class ResourceLabel extends ResourceLabel_base {
-    property: NamedNode;
+export declare class ResourceLabel extends LitElement {
+    predicate: NamedNode;
+    private readonly focusNode;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
 }
-export {};

package/src/components/resource-label.js

@@ -8,23 +8,24 @@ import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { localizedLabel } from '@rdfjs-elements/lit-helpers/localizedLabel.js';
 import rdf from '@rdfjs/data-model';
-import { consumeFocusNode } from '../mixins/focusNode.js';
 import { toNamedNode } from '../converter.js';
-let ResourceLabel = class ResourceLabel extends consumeFocusNode(LitElement) {
+import { FocusNode } from '../controllers/FocusNode.js';
+let ResourceLabel = class ResourceLabel extends LitElement {
     constructor() {
-        super(...arguments);
-        this.property = rdf.namedNode('http://www.w3.org/2000/01/rdf-schema#label');
+        super();
+        this.predicate = rdf.namedNode('http://www.w3.org/2000/01/rdf-schema#label');
+        this.focusNode = new FocusNode(this);
     }
     render() {
-        if (!this.focusNode) {
+        if (!this.focusNode.pointer) {
             return html ``;
         }
-        return html `${localizedLabel(this.focusNode, { property: this.property })}`;
+        return html `${localizedLabel(this.focusNode.pointer, { property: this.predicate })}`;
     }
 };
 __decorate([
     property({ type: Object, converter: toNamedNode })
-], ResourceLabel.prototype, "property", void 0);
+], ResourceLabel.prototype, "predicate", void 0);
 ResourceLabel = __decorate([
     customElement('resource-label')
 ], ResourceLabel);

package/src/components/resource-link.d.ts

@@ -1,8 +1,8 @@
 import { LitElement } from 'lit';
 import type { NamedNode } from '@rdfjs/types';
-declare const ResourceLink_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithFocusNode>;
-export declare class ResourceLink extends ResourceLink_base {
+export declare class ResourceLink extends LitElement {
     property?: NamedNode;
+    private readonly focusNode;
+    constructor();
     render(): import("lit-html").TemplateResult<1>;
 }
-export {};

package/src/components/resource-link.js

@@ -7,20 +7,24 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 import { html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { findNodes } from 'clownface-shacl-path';
-import { consumeFocusNode } from '../mixins/focusNode.js';
 import { toPropertyPath } from '../converter.js';
-let ResourceLink = class ResourceLink extends consumeFocusNode(LitElement) {
+import { FocusNode } from '../controllers/FocusNode.js';
+let ResourceLink = class ResourceLink extends LitElement {
+    constructor() {
+        super();
+        this.focusNode = new FocusNode(this);
+    }
     render() {
-        if (!this.focusNode) {
+        if (!this.focusNode.pointer) {
             return html `
                 <slot></slot>`;
         }
         let href;
         if (this.property) {
-            href = findNodes(this.focusNode, this.property).value;
+            href = findNodes(this.focusNode.pointer, this.property).value;
         }
         if (!href) {
-            href = this.focusNode.value;
+            href = this.focusNode.pointer.value;
         }
         return html `<a href="${href}">
             <slot></slot>

package/src/components/target-node.d.ts

@@ -1,6 +1,6 @@
 import { LitElement } from 'lit';
 import type { NamedNode } from '@rdfjs/types';
-declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithFocusNode>;
+declare const default_base: typeof LitElement & import("../constructor.js").LitElementConstructor<import("../constructor.js").WithFocusNode & import("../mixins/targetNode.js").WithTargets>;
 export default class extends default_base {
     static styles: import("lit").CSSResult;
     orderBy: NamedNode | undefined;

package/src/constructor.d.ts

@@ -1,7 +1,7 @@
 import type { LitElement } from 'lit';
 import type { AnyPointer, MultiPointer } from 'clownface';
 import type { Environment } from './context.js';
-export type LitElementConstructor<T = {}> = new (...args: any[]) => T & LitElement;
+export type LitElementConstructor<T = unknown> = new (...args: any[]) => T & LitElement;
 export type WithGraph = {
     graph: AnyPointer | undefined;
 };

package/src/controllers/Environment.d.ts

@@ -0,0 +1,7 @@
+import type { ReactiveControllerHost } from 'lit';
+import * as context from '../context.js';
+export declare class Environment<E extends context.Environment = context.Environment> {
+    private consumer;
+    constructor(host: ReactiveControllerHost & HTMLElement);
+    get value(): E;
+}

package/src/controllers/Environment.js

@@ -0,0 +1,17 @@
+import { ContextConsumer } from '@lit/context';
+import * as context from '../context.js';
+export class Environment {
+    constructor(host) {
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        this.consumer = new ContextConsumer(host, {
+            context: context.environment,
+        });
+    }
+    get value() {
+        if (!this.consumer.value) {
+            throw new Error('Environment not available. Make sure that a parent element is providing the environment.');
+        }
+        return this.consumer.value;
+    }
+}

package/src/controllers/FocusNode.js

@@ -5,10 +5,16 @@ export class FocusNode {
         this.focusNodeConsumer = new ContextConsumer(host, {
             context: focusNode,
             subscribe: true,
+            callback() {
+                host.requestUpdate();
+            },
         });
         this.sortCriteriaConsumer = new ContextConsumer(host, {
             context: sortCriteria,
             subscribe: true,
+            callback() {
+                host.requestUpdate();
+            },
         });
     }
     get pointer() {

package/src/controllers/Graph.d.ts

@@ -0,0 +1,7 @@
+import type { ReactiveControllerHost } from 'lit';
+import type { AnyPointer } from 'clownface';
+export declare class Graph {
+    private consumer;
+    constructor(host: ReactiveControllerHost & HTMLElement, callback?: (value: AnyPointer | undefined) => void);
+    get value(): AnyPointer<import("clownface").AnyContext, import("@rdfjs/types").DatasetCore<import("@rdfjs/types").Quad, import("@rdfjs/types").Quad>> | undefined;
+}

package/src/controllers/Graph.js

@@ -0,0 +1,14 @@
+import { ContextConsumer } from '@lit/context';
+import { dataset } from '../context.js';
+export class Graph {
+    constructor(host, callback) {
+        this.consumer = new ContextConsumer(host, {
+            context: dataset,
+            subscribe: true,
+            callback,
+        });
+    }
+    get value() {
+        return this.consumer.value;
+    }
+}

package/src/controllers.d.ts

@@ -1 +1,3 @@
 export { FocusNode } from './controllers/FocusNode.js';
+export { Graph } from './controllers/Graph.js';
+export { Environment } from './controllers/Environment.js';

package/src/controllers.js

@@ -1 +1,3 @@
 export { FocusNode } from './controllers/FocusNode.js';
+export { Graph } from './controllers/Graph.js';
+export { Environment } from './controllers/Environment.js';

package/src/mixins/environment.d.ts

@@ -1,3 +1,2 @@
 import type { LitElementConstructor, WithEnvironment } from '../constructor.js';
-export declare function consumeEnvironment<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithEnvironment>;
 export declare function provideEnvironment<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithEnvironment>;

package/src/mixins/environment.js

@@ -4,20 +4,9 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { consume, provide } from '@lit/context';
+import { provide } from '@lit/context';
 import { state } from 'lit/decorators.js';
 import { environment as context } from '../context.js';
-export function consumeEnvironment(base) {
-    class Impl extends base {
-        constructor(...args) {
-            super(...args);
-        }
-    }
-    __decorate([
-        consume({ context })
-    ], Impl.prototype, "rdf", void 0);
-    return Impl;
-}
 export function provideEnvironment(base) {
     class Impl extends base {
         constructor(...args) {

package/src/mixins/graph.d.ts

@@ -1,3 +1,2 @@
 import type { LitElementConstructor, WithGraph } from '../constructor.js';
 export declare function provideGraph<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithGraph>;
-export declare function consumeGraph<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithGraph>;

package/src/mixins/graph.js

@@ -4,7 +4,7 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { consume, provide } from '@lit/context';
+import { provide } from '@lit/context';
 import { state } from 'lit/decorators.js';
 import { dataset } from '../context.js';
 export function provideGraph(base) {
@@ -19,15 +19,3 @@ export function provideGraph(base) {
     ], WithGraphProvider.prototype, "graph", void 0);
     return WithGraphProvider;
 }
-export function consumeGraph(base) {
-    class WithGraphConsumer extends base {
-        constructor(...args) {
-            super(...args);
-        }
-    }
-    __decorate([
-        consume({ context: dataset, subscribe: true }),
-        state()
-    ], WithGraphConsumer.prototype, "graph", void 0);
-    return WithGraphConsumer;
-}

package/src/mixins/targetNode.d.ts

@@ -1,2 +1,9 @@
+import type { NamedNode } from '@rdfjs/types';
 import type { LitElementConstructor, WithFocusNode } from '../constructor.js';
-export declare function provideTargetNode<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithFocusNode>;
+export interface WithTargets {
+    targetObjectsOf: NamedNode | undefined;
+    targetSubjectsOf: NamedNode | undefined;
+    targetClass: NamedNode | undefined;
+    targetNode: NamedNode | undefined;
+}
+export declare function provideTargetNode<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithFocusNode & WithTargets>;

package/src/mixins/targetNode.js

@@ -8,25 +8,24 @@ import { property, state } from 'lit/decorators.js';
 import { provide } from '@lit/context';
 import { focusNode } from '../context.js';
 import { toNamedNode } from '../converter.js';
-import { consumeEnvironment } from './environment.js';
-import { consumeGraph } from './graph.js';
+import { Environment } from '../controllers/Environment.js';
+import { Graph } from '../controllers/Graph.js';
 export function provideTargetNode(base) {
-    class DataBound extends consumeGraph(consumeEnvironment(base)) {
+    class DataBound extends base {
         constructor(...args) {
             super(...args);
-        }
-        willUpdate(_changedProperties) {
-            if (_changedProperties.has('graph')) {
+            this.rdf = new Environment(this);
+            this.graph = new Graph(this, () => {
                 this.setFocusNode();
-            }
+            });
         }
-        updated(_changedProperties) {
-            if (_changedProperties.has('graph')) {
+        updated(changedProperties) {
+            if (changedProperties.has('targetNode') || changedProperties.has('targetClass') || changedProperties.has('targetSubjectsOf') || changedProperties.has('targetObjectsOf')) {
                 this.setFocusNode();
             }
         }
         setFocusNode() {
-            if (this.graph) {
+            if (this.graph.value) {
                 const found = this.findFocusNode();
                 if (found?.terms.length) {
                     this.focusNode = found;
@@ -35,16 +34,16 @@ export function provideTargetNode(base) {
         }
         findFocusNode() {
             if (this.targetNode) {
-                return this.graph?.node(this.targetNode);
+                return this.graph.value?.node(this.targetNode);
             }
             if (this.targetClass) {
-                return this.graph?.has(this.rdf.ns.rdf.type, this.targetClass);
+                return this.graph.value?.has(this.rdf.value.ns.rdf.type, this.targetClass);
             }
             if (this.targetSubjectsOf) {
-                return this.graph?.in(this.targetSubjectsOf);
+                return this.graph.value?.in(this.targetSubjectsOf);
             }
             if (this.targetObjectsOf) {
-                return this.graph?.out(this.targetObjectsOf);
+                return this.graph.value?.out(this.targetObjectsOf);
             }
             return undefined;
         }

package/src/mixins/traverseGraph.js

@@ -9,11 +9,12 @@ import { findNodes } from 'clownface-shacl-path';
 import { provide } from '@lit/context';
 import { focusNode as context } from '../context.js';
 import { toPropertyPath } from '../converter.js';
-import { consumeFocusNode } from './focusNode.js';
+import { FocusNode } from '../controllers/FocusNode.js';
 export function traverseGraph(Base) {
-    class TraverseGraph extends consumeFocusNode(Base) {
+    class TraverseGraph extends Base {
         constructor(...args) {
             super(...args);
+            this.focusNode = new FocusNode(this);
         }
         willUpdate(_changedProperties) {
             if (_changedProperties.has('focusNode') || _changedProperties.has('propertyPath')) {
@@ -21,8 +22,8 @@ export function traverseGraph(Base) {
             }
         }
         setObjectNode() {
-            if (this.propertyPath && this.focusNode) {
-                this.objectNode = findNodes(this.focusNode, this.propertyPath);
+            if (this.propertyPath && this.focusNode.pointer) {
+                this.objectNode = findNodes(this.focusNode.pointer, this.propertyPath);
             }
         }
     }

package/src/mixins.d.ts

@@ -1,3 +1,2 @@
-export { consumeFocusNode } from './mixins/focusNode.js';
 export { provideGraph } from './mixins/graph.js';
-export { provideEnvironment, consumeEnvironment } from './mixins/environment.js';
+export { provideEnvironment } from './mixins/environment.js';

package/src/mixins.js

@@ -1,3 +1,2 @@
-export { consumeFocusNode } from './mixins/focusNode.js';
 export { provideGraph } from './mixins/graph.js';
-export { provideEnvironment, consumeEnvironment } from './mixins/environment.js';
+export { provideEnvironment } from './mixins/environment.js';

package/src/mixins/focusNode.d.ts

@@ -1,2 +0,0 @@
-import type { LitElementConstructor, WithFocusNode } from '../constructor.js';
-export declare function consumeFocusNode<T extends LitElementConstructor>(base: T): T & LitElementConstructor<WithFocusNode>;

package/src/mixins/focusNode.js

@@ -1,20 +0,0 @@
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-};
-import { consume } from '@lit/context';
-import { focusNode as context } from '../context.js';
-import { consumeEnvironment } from './environment.js';
-export function consumeFocusNode(base) {
-    class Impl extends consumeEnvironment(base) {
-        constructor(...args) {
-            super(...args);
-        }
-    }
-    __decorate([
-        consume({ context, subscribe: true })
-    ], Impl.prototype, "focusNode", void 0);
-    return Impl;
-}