lit-rdf 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # lit-rdf
 
+## 0.2.2
+
+### Patch Changes
+
+- af27103: Sorting numeric literals is now correctly based on value and not plain literal form
+- af27103: Added `<resource-value>` component
+
+## 0.2.1
+
+### Patch Changes
+
+- 02c819c: Added `order-dir` and function-based `orderBy` to `<target-node>`
+
 ## 0.2.0
 
 ### Minor Changes

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "lit-rdf",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "type": "module",
   "scripts": {
     "prepare": "husky",
-    "lint": "eslint . --quiet --ignore-path .gitignore --ignore-path .eslintignore",
+    "lint": "eslint . --quiet",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "test": "vitest --project=storybook",
+    "test:storybook": "vitest --project=storybook",
+    "test:unit": "vitest",
     "build": "tsc",
     "prepack": "npm run build",
     "release": "changeset publish"
@@ -28,7 +29,8 @@
     "./constructor.js": "./src/constructor.js",
     "./mixins.js": "./src/mixins.js",
     "./controllers.js": "./src/controllers.js",
-    "./runtime/*.js": "./src/runtime/*.js"
+    "./runtime/*.js": "./src/runtime/*.js",
+    "./sort.js": "./src/sort.js"
   },
   "dependencies": {
     "@lit/context": "^1.1.6",
@@ -41,34 +43,38 @@
     "clownface-shacl-path": "^2.4.0",
     "is-url": "^1.2.4",
     "lit": "^3",
+    "rdf-literal": "^2.0.0",
     "sparql-path-parser": "^0.1.1"
   },
   "devDependencies": {
-    "@changesets/cli": "^2.29.0",
-    "@chromatic-com/storybook": "^5.0.1",
-    "@esbuild-plugins/node-globals-polyfill": "^0.2.3",
-    "@storybook/addon-docs": "^10.2.12",
-    "@storybook/addon-vitest": "^10.2.12",
-    "@storybook/web-components-vite": "^10.2.12",
-    "@tpluscode/eslint-config": "^0.6.4",
+    "@changesets/cli": "^3.0.0-next.11",
+    "@chromatic-com/storybook": "^5.3.0",
+    "@eslint/config-helpers": "^0.7.0",
+    "@eslint/js": "^10",
+    "@rolldown/plugin-node-polyfills": "^1.0.3",
+    "@storybook/addon-docs": "^10.6.0",
+    "@storybook/addon-vitest": "^10.6.0",
+    "@storybook/web-components-vite": "^10.6.0",
+    "@tpluscode/eslint-config": "^3.0.1",
     "@types/clownface": "^2.0.10",
     "@types/is-url": "^1.2.32",
     "@types/rdfjs__data-model": "^2.0.9",
-    "@typescript-eslint/eslint-plugin": "^7",
-    "@typescript-eslint/parser": "^7",
-    "@vitest/browser-playwright": "^4.0.18",
-    "@vitest/coverage-v8": "^4.0.18",
-    "eslint-import-resolver-typescript": "^2",
-    "eslint-plugin-storybook": "^10.2.12",
+    "@typescript-eslint/eslint-plugin": "^8.66.0",
+    "@typescript-eslint/parser": "^8.66.0",
+    "@vitest/browser-playwright": "^4.1.11",
+    "@vitest/coverage-v8": "^4.1.11",
+    "@vocabulary/rdfs": "^1.0.6",
+    "eslint": "^10",
+    "eslint-import-resolver-typescript": "^4.4.5",
+    "eslint-plugin-storybook": "^10.5.7",
     "husky": "^9.1.7",
-    "lint-staged": "^16.2.7",
+    "lint-staged": "^17.3.0",
     "playwright": "^1.58.2",
-    "rollup-plugin-polyfill-node": "^0.13.0",
-    "storybook": "^10.2.12",
+    "storybook": "^10.6.0",
     "string-to-stream": "^3.0.1",
     "typescript": "^5",
     "util": "^0.12.5",
-    "vitest": "^4.0.18"
+    "vitest": "^4.1.11"
   },
   "lint-staged": {
     "*.{js,ts}": [

package/src/components/resource-label.js

@@ -20,7 +20,8 @@ let ResourceLabel = class ResourceLabel extends LitElement {
         if (!this.focusNode.pointer) {
             return html ``;
         }
-        return html `${localizedLabel(this.focusNode.pointer, { property: this.predicate })}`;
+        const fallback = this.focusNode.pointer.out(this.predicate).value;
+        return html `${localizedLabel(this.focusNode.pointer, { property: this.predicate, fallback })}`;
     }
 };
 __decorate([

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

@@ -0,0 +1,6 @@
+import { LitElement } from 'lit';
+export default class ResourceValue extends LitElement {
+    private readonly focusNode;
+    constructor();
+    render(): string | undefined;
+}

package/src/components/resource-value.js

@@ -0,0 +1,22 @@
+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 { LitElement } from 'lit';
+import { FocusNode } from 'lit-rdf/controllers.js';
+import { customElement } from 'lit/decorators.js';
+let ResourceValue = class ResourceValue extends LitElement {
+    constructor() {
+        super();
+        this.focusNode = new FocusNode(this);
+    }
+    render() {
+        return this.focusNode.pointer?.value;
+    }
+};
+ResourceValue = __decorate([
+    customElement('resource-value')
+], ResourceValue);
+export default ResourceValue;

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

@@ -1,9 +1,10 @@
 import { LitElement } from 'lit';
-import type { NamedNode } from '@rdfjs/types';
+import type { SortPredicate } from '../context.js';
 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;
+    orderBy: SortPredicate | undefined;
+    orderDir: 'asc' | 'desc';
     render(): import("lit-html").TemplateResult<1>;
 }
 export {};

package/src/components/target-node.js

@@ -8,9 +8,13 @@ import { css, html, LitElement } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { provide } from '@lit/context';
 import { provideTargetNode } from '../mixins/targetNode.js';
-import { toNamedNode } from '../converter.js';
-import { sortCriteria } from '../context.js';
+import { toSortPredicate } from '../converter.js';
+import { sortDirection, sortPredicate } from '../context.js';
 let default_1 = class extends provideTargetNode(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.orderDir = 'asc';
+    }
     static { this.styles = css `
         :host {
             display: contents !important;
@@ -21,9 +25,13 @@ let default_1 = class extends provideTargetNode(LitElement) {
     }
 };
 __decorate([
-    property({ type: Object, attribute: 'order-by', converter: toNamedNode }),
-    provide({ context: sortCriteria })
+    property({ type: Object, attribute: 'order-by', converter: toSortPredicate }),
+    provide({ context: sortPredicate })
 ], default_1.prototype, "orderBy", void 0);
+__decorate([
+    property({ type: String, attribute: 'order-dir', reflect: true }),
+    provide({ context: sortDirection })
+], default_1.prototype, "orderDir", void 0);
 default_1 = __decorate([
     customElement('target-node')
 ], default_1);

package/src/context.d.ts

@@ -1,11 +1,14 @@
-import type { AnyPointer, MultiPointer } from 'clownface';
+import type { AnyPointer, GraphPointer, MultiPointer } from 'clownface';
 import type env from '@zazuko/env/web.js';
-import type { NamedNode } from '@rdfjs/types';
+import type { Term } from '@rdfjs/types';
 export type Environment = typeof env;
+export interface SortPredicate {
+    (node: GraphPointer): Term | string | number | boolean | undefined;
+}
 export declare const environment: {
-    __context__: import("@zazuko/env-core").DerivedEnvironment<import("@rdfjs/environment/Environment.js").Environment<import("@rdfjs/data-model/Factory.js").default | import("@rdfjs/formats/Factory.js").FormatsFactory | import("@rdfjs/term-map/Factory.js").TermMapFactory | import("@tpluscode/rdf-ns-builders").default | import("clownface/Factory.js").default | import("@rdfjs/term-set/Factory.js").TermSetFactory | import("@rdfjs/namespace/Factory.js").NamespaceFactory | import("@rdfjs/traverser/Factory.js").TraverserFactory>, import("@rdfjs/environment/Environment.js").Environment<{
-        dataset: import("@zazuko/env/lib/DatasetFactory.js").FactoryMethod<import("@zazuko/env/lib/Dataset.js").Dataset>;
-        init(this: import("@rdfjs/environment/Environment.js").Environment<import("@rdfjs/data-model/Factory.js").default | import("@rdfjs/formats/Factory.js").FormatsFactory | import("@rdfjs/term-map/Factory.js").TermMapFactory | import("@zazuko/env/lib/DatasetFactory.js").DatasetFactory<import("@zazuko/env/lib/Dataset.js").Dataset>>): void;
+    __context__: import("@zazuko/env-core").DerivedEnvironment<import("@rdfjs/environment/Environment").Environment<import("@rdfjs/data-model/Factory").default | import("@rdfjs/formats/Factory").FormatsFactory | import("@rdfjs/term-map/Factory").TermMapFactory | import("@tpluscode/rdf-ns-builders").default | import("clownface/Factory").default | import("@rdfjs/term-set/Factory").TermSetFactory | import("@rdfjs/namespace/Factory").NamespaceFactory | import("@rdfjs/traverser/Factory").TraverserFactory>, import("@rdfjs/environment/Environment").Environment<{
+        dataset: import("@zazuko/env/lib/DatasetFactory").FactoryMethod<import("@zazuko/env/lib/Dataset").Dataset>;
+        init(this: import("@rdfjs/environment/Environment").Environment<import("@rdfjs/data-model/Factory").default | import("@rdfjs/formats/Factory").FormatsFactory | import("@rdfjs/term-map/Factory").TermMapFactory | import("@zazuko/env/lib/DatasetFactory").DatasetFactory<import("@zazuko/env/lib/Dataset").Dataset>>): void;
     }>>;
 };
 export declare const dataset: {
@@ -14,6 +17,9 @@ export declare const dataset: {
 export declare const focusNode: {
     __context__: MultiPointer | undefined;
 };
-export declare const sortCriteria: {
-    __context__: NamedNode<string> | undefined;
+export declare const sortPredicate: {
+    __context__: SortPredicate | undefined;
+};
+export declare const sortDirection: {
+    __context__: "asc" | "desc" | undefined;
 };

package/src/context.js

@@ -2,4 +2,5 @@ import { createContext } from '@lit/context';
 export const environment = createContext(Symbol('environment'));
 export const dataset = createContext(Symbol('dataset'));
 export const focusNode = createContext(Symbol('focus-node'));
-export const sortCriteria = createContext(Symbol('focus-node-sort'));
+export const sortPredicate = createContext(Symbol('focus-node-sort'));
+export const sortDirection = createContext(Symbol('focus-node-sort-dir'));

package/src/controllers/FocusNode.d.ts

@@ -1,8 +1,10 @@
 import type { ReactiveControllerHost } from 'lit';
 import type { GraphPointer, MultiPointer } from 'clownface';
+export { sort } from '../sort.js';
 export declare class FocusNode {
     private focusNodeConsumer;
-    private sortCriteriaConsumer;
+    private sortPredicateConsumer;
+    private sortDirectionConsumer;
     constructor(host: ReactiveControllerHost & HTMLElement);
     get pointer(): MultiPointer | undefined;
     get array(): GraphPointer[] | undefined;

package/src/controllers/FocusNode.js

@@ -1,5 +1,7 @@
 import { ContextConsumer } from '@lit/context';
-import { focusNode, sortCriteria } from '../context.js';
+import { focusNode, sortPredicate, sortDirection } from '../context.js';
+import { sort } from '../sort.js';
+export { sort } from '../sort.js';
 export class FocusNode {
     constructor(host) {
         this.focusNodeConsumer = new ContextConsumer(host, {
@@ -9,8 +11,15 @@ export class FocusNode {
                 host.requestUpdate();
             },
         });
-        this.sortCriteriaConsumer = new ContextConsumer(host, {
-            context: sortCriteria,
+        this.sortPredicateConsumer = new ContextConsumer(host, {
+            context: sortPredicate,
+            subscribe: true,
+            callback() {
+                host.requestUpdate();
+            },
+        });
+        this.sortDirectionConsumer = new ContextConsumer(host, {
+            context: sortDirection,
             subscribe: true,
             callback() {
                 host.requestUpdate();
@@ -22,12 +31,11 @@ export class FocusNode {
     }
     get array() {
         const array = this.pointer?.toArray();
-        const sortPredicate = this.sortCriteriaConsumer.value;
-        if (!array || !sortPredicate) {
+        const sortPredicateFunc = this.sortPredicateConsumer.value;
+        const sortDirectionValue = this.sortDirectionConsumer.value;
+        if (!array || !sortPredicateFunc) {
             return array;
         }
-        return array.sort((left, right) => {
-            return left.out(sortPredicate).value?.localeCompare(right.out(sortPredicate).value || '') || 0;
-        });
+        return array.sort(sort(sortPredicateFunc, sortDirectionValue));
     }
 }

package/src/converter.d.ts

@@ -1,3 +1,8 @@
 import type { ComplexAttributeConverter } from 'lit';
-export declare const toNamedNode: ComplexAttributeConverter;
+import type { NamedNode } from '@rdfjs/types';
+export declare const toNamedNode: {
+    fromAttribute(value: string | null): NamedNode;
+    toAttribute({ value }: NamedNode): string;
+};
 export declare const toPropertyPath: ComplexAttributeConverter;
+export declare const toSortPredicate: ComplexAttributeConverter;

package/src/converter.js

@@ -17,10 +17,18 @@ export const toNamedNode = {
     },
 };
 export const toPropertyPath = {
-    fromAttribute(value, type) {
+    fromAttribute(value) {
         if (typeof value === 'undefined' || value === null) {
             throw new Error('PropertyPath converter: value is null');
         }
         return parse(value);
     },
 };
+export const toSortPredicate = {
+    fromAttribute(value) {
+        const namedNode = toNamedNode.fromAttribute(value);
+        return (node) => {
+            return node.out(namedNode).term;
+        };
+    },
+};

package/src/index.d.ts

@@ -4,3 +4,4 @@ import './components/focus-node.js';
 import './components/target-node.js';
 import './components/resource-label.js';
 import './components/resource-link.js';
+import './components/resource-value.js';

package/src/index.js

@@ -4,3 +4,4 @@ import './components/focus-node.js';
 import './components/target-node.js';
 import './components/resource-label.js';
 import './components/resource-link.js';
+import './components/resource-value.js';

package/src/mixins/environment.js

@@ -9,9 +9,6 @@ import { state } from 'lit/decorators.js';
 import { environment as context } from '../context.js';
 export function provideEnvironment(base) {
     class Impl extends base {
-        constructor(...args) {
-            super(...args);
-        }
     }
     __decorate([
         state(),

package/src/mixins/graph.js

@@ -9,9 +9,6 @@ import { state } from 'lit/decorators.js';
 import { dataset } from '../context.js';
 export function provideGraph(base) {
     class WithGraphProvider extends base {
-        constructor(...args) {
-            super(...args);
-        }
     }
     __decorate([
         provide({ context: dataset }),

package/src/sort.d.ts

@@ -0,0 +1,6 @@
+import type { GraphPointer } from 'clownface';
+import type { Term } from '@rdfjs/types';
+import type { SortPredicate } from './context.js';
+export declare function toComparable(value: Term | string | number | boolean | undefined | null): unknown;
+export declare function compareValues(left: unknown, right: unknown): number;
+export declare function sort(getValue: SortPredicate, direction?: 'asc' | 'desc'): (left: GraphPointer, right: GraphPointer) => number;

package/src/sort.js

@@ -0,0 +1,62 @@
+import { fromRdf } from 'rdf-literal';
+export function toComparable(value) {
+    if (value === undefined || value === null) {
+        return undefined;
+    }
+    if (typeof value === 'object' && 'termType' in value) {
+        if (value.termType === 'Literal') {
+            return fromRdf(value);
+        }
+        return value.value;
+    }
+    return value;
+}
+export function compareValues(left, right) {
+    if (left === right) {
+        return 0;
+    }
+    if ((left === undefined || left === null) && (right === undefined || right === null)) {
+        return 0;
+    }
+    if (left === undefined || left === null) {
+        return 1;
+    }
+    if (right === undefined || right === null) {
+        return -1;
+    }
+    if (typeof left === 'string' && typeof right === 'string') {
+        return left.localeCompare(right);
+    }
+    if (typeof left === 'number' && typeof right === 'number') {
+        return left - right;
+    }
+    if (typeof left === 'boolean' && typeof right === 'boolean') {
+        return Number(left) - Number(right);
+    }
+    if (left instanceof Date && right instanceof Date) {
+        return left.getTime() - right.getTime();
+    }
+    if (left < right) {
+        return -1;
+    }
+    if (left > right) {
+        return 1;
+    }
+    return 0;
+}
+export function sort(getValue, direction = 'asc') {
+    return (left, right) => {
+        const leftValue = toComparable(getValue(left));
+        const rightValue = toComparable(getValue(right));
+        const leftEmpty = leftValue === undefined || leftValue === null;
+        const rightEmpty = rightValue === undefined || rightValue === null;
+        if (leftEmpty && rightEmpty)
+            return 0;
+        if (leftEmpty)
+            return 1;
+        if (rightEmpty)
+            return -1;
+        const result = compareValues(leftValue, rightValue);
+        return direction === 'desc' ? -result : result;
+    };
+}