lit-rdf 0.2.1 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "lit-rdf",
-  "version": "0.2.1",
+  "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,35 +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",
+    "@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-import-resolver-typescript": "^2",
-    "eslint-plugin-storybook": "^10.2.12",
+    "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/context.d.ts

@@ -1,8 +1,9 @@
 import type { AnyPointer, GraphPointer, MultiPointer } from 'clownface';
 import type env from '@zazuko/env/web.js';
+import type { Term } from '@rdfjs/types';
 export type Environment = typeof env;
 export interface SortPredicate {
-    (node: GraphPointer): string | undefined;
+    (node: GraphPointer): Term | string | number | boolean | undefined;
 }
 export declare const environment: {
     __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<{

package/src/controllers/FocusNode.d.ts

@@ -1,5 +1,6 @@
 import type { ReactiveControllerHost } from 'lit';
 import type { GraphPointer, MultiPointer } from 'clownface';
+export { sort } from '../sort.js';
 export declare class FocusNode {
     private focusNodeConsumer;
     private sortPredicateConsumer;

package/src/controllers/FocusNode.js

@@ -1,5 +1,7 @@
 import { ContextConsumer } from '@lit/context';
 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, {
@@ -34,11 +36,6 @@ export class FocusNode {
         if (!array || !sortPredicateFunc) {
             return array;
         }
-        return array.sort((left, right) => {
-            if (sortDirectionValue === 'desc') {
-                return sortPredicateFunc(right)?.localeCompare(sortPredicateFunc(left) || '') || 0;
-            }
-            return sortPredicateFunc(left)?.localeCompare(sortPredicateFunc(right) || '') || 0;
-        });
+        return array.sort(sort(sortPredicateFunc, sortDirectionValue));
     }
 }

package/src/converter.js

@@ -17,7 +17,7 @@ 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');
         }
@@ -28,7 +28,7 @@ export const toSortPredicate = {
     fromAttribute(value) {
         const namedNode = toNamedNode.fromAttribute(value);
         return (node) => {
-            return node.out(namedNode).value;
+            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;
+    };
+}