@_linked/react 0.0.1

package/lib/esm/utils/LinkedComponent.js

@@ -0,0 +1,284 @@
+import { SelectQueryFactory, } from '@_linked/core/queries/SelectQuery';
+import { Shape } from '@_linked/core/shapes/Shape';
+import React, { useCallback, useEffect, useState } from 'react';
+import { LinkedStorage } from '@_linked/core/utils/LinkedStorage';
+import { DEFAULT_LIMIT } from '@_linked/core/utils/Package';
+import { ShapeSet } from '@_linked/core/collections/ShapeSet';
+import { isNodeReferenceValue } from '@_linked/core/utils/NodeReference';
+import { getShapeClass, hasSuperClass } from '@_linked/core/utils/ShapeClass';
+export function createLinkedComponentFn(registerPackageExport, registerComponent) {
+    return function linkedComponent(query, functionalComponent) {
+        let [shapeClass, actualQuery] = processQuery(query);
+        let _wrappedComponent = React.forwardRef((props, ref) => {
+            var _a;
+            let [queryResult, setQueryResult] = useState(undefined);
+            let [loadingData, setLoadingData] = useState();
+            let linkedProps = getLinkedComponentProps(props, shapeClass);
+            if (ref) {
+                linkedProps.ref = ref;
+            }
+            const loadData = () => {
+                var _a, _b;
+                const sourceId = (_a = linkedProps.source) === null || _a === void 0 ? void 0 : _a.id;
+                if (!loadingData || loadingData !== sourceId) {
+                    let requestQuery = actualQuery.clone();
+                    if (linkedProps.source) {
+                        requestQuery.setSubject(linkedProps.source);
+                    }
+                    setLoadingData(sourceId || ((_b = requestQuery.subject) === null || _b === void 0 ? void 0 : _b.id));
+                    const parser = shapeClass.queryParser || Shape.queryParser;
+                    if (!parser) {
+                        throw new Error(`No query parser configured for ${(shapeClass === null || shapeClass === void 0 ? void 0 : shapeClass.name) || 'shape'}.`);
+                    }
+                    parser.selectQuery(requestQuery).then((result) => {
+                        setQueryResult(result);
+                        setLoadingData(null);
+                    });
+                }
+                else {
+                    console.warn(`Already loading data for source ${loadingData}, ignoring request`);
+                }
+            };
+            let sourceIsValidQResult = isValidQResult(props.of, query);
+            if (queryResult || sourceIsValidQResult) {
+                linkedProps = Object.assign(linkedProps, queryResult || props.of);
+            }
+            linkedProps._refresh = useCallback((updatedProps) => {
+                if (updatedProps) {
+                    if (queryResult) {
+                        setQueryResult(Object.assign(Object.assign({}, queryResult), updatedProps));
+                    }
+                    else if (sourceIsValidQResult) {
+                        setQueryResult(Object.assign(Object.assign({}, props.of), updatedProps));
+                    }
+                }
+                else {
+                    loadData();
+                }
+            }, [queryResult, props.of]);
+            if (!linkedProps.source && !actualQuery.subject) {
+                console.warn('This component requires a source to be provided (use the property "of"): ' +
+                    functionalComponent.name);
+                return null;
+            }
+            let usingStorage = LinkedStorage.isInitialised();
+            useEffect(() => {
+                if (queryResult) {
+                    setQueryResult(undefined);
+                }
+                if (usingStorage && !sourceIsValidQResult) {
+                    loadData();
+                }
+            }, [(_a = linkedProps.source) === null || _a === void 0 ? void 0 : _a.id]);
+            let dataIsLoaded = queryResult || !usingStorage || sourceIsValidQResult;
+            // Keep legacy client-side guard to avoid hydration drift.
+            if (dataIsLoaded && typeof window !== 'undefined') {
+                return React.createElement(functionalComponent, linkedProps);
+            }
+            else {
+                return createLoadingSpinner();
+            }
+        });
+        _wrappedComponent.original = functionalComponent;
+        _wrappedComponent.query = query;
+        _wrappedComponent.shape = shapeClass;
+        if (functionalComponent.name) {
+            Object.defineProperty(_wrappedComponent, 'name', {
+                value: functionalComponent.name,
+            });
+            registerPackageExport(_wrappedComponent);
+        }
+        registerComponent(_wrappedComponent, shapeClass);
+        return _wrappedComponent;
+    };
+}
+export function createLinkedSetComponentFn(registerPackageExport, registerComponent) {
+    return function linkedSetComponent(query, functionalComponent) {
+        let [shapeClass, actualQuery] = processQuery(query, true);
+        let usingStorage = LinkedStorage.isInitialised();
+        let _wrappedComponent = React.forwardRef((props, ref) => {
+            var _a;
+            let [queryResult, setQueryResult] = useState(undefined);
+            let linkedProps = getLinkedSetComponentProps(props, shapeClass, functionalComponent);
+            let defaultLimit = actualQuery.getLimit() || DEFAULT_LIMIT;
+            let [limit, setLimit] = useState(defaultLimit);
+            let [offset, setOffset] = useState(0);
+            if (ref) {
+                linkedProps.ref = ref;
+            }
+            let sourceIsValidQResult = Array.isArray(props.of) &&
+                props.of.length > 0 &&
+                typeof ((_a = props.of[0]) === null || _a === void 0 ? void 0 : _a.id) === 'string' &&
+                actualQuery.isValidSetResult(props.of);
+            if (queryResult || sourceIsValidQResult) {
+                let dataResult;
+                if (queryResult) {
+                    dataResult = queryResult;
+                }
+                else {
+                    if (limit) {
+                        dataResult = props.of.slice(offset || 0, offset + limit);
+                    }
+                    else {
+                        dataResult = props.of;
+                    }
+                }
+                if (query instanceof SelectQueryFactory) {
+                    linkedProps = Object.assign(linkedProps, {
+                        linkedData: dataResult,
+                    });
+                }
+                else {
+                    let key = Object.keys(query)[0];
+                    linkedProps[key] = dataResult;
+                }
+            }
+            if (limit) {
+                linkedProps.query = {
+                    nextPage: () => {
+                        setOffset(offset + limit);
+                    },
+                    previousPage: () => {
+                        setOffset(Math.max(0, offset - limit));
+                    },
+                    setLimit: (newLimit) => {
+                        setLimit(newLimit);
+                    },
+                    setPage: (page) => {
+                        setOffset(page * limit);
+                    },
+                };
+            }
+            useEffect(() => {
+                if (usingStorage && !sourceIsValidQResult) {
+                    let requestQuery = actualQuery.clone();
+                    requestQuery.setSubject(linkedProps.sources);
+                    if (limit) {
+                        requestQuery.setLimit(limit);
+                    }
+                    if (offset) {
+                        requestQuery.setOffset(offset);
+                    }
+                    const parser = shapeClass.queryParser || Shape.queryParser;
+                    if (!parser) {
+                        throw new Error(`No query parser configured for ${(shapeClass === null || shapeClass === void 0 ? void 0 : shapeClass.name) || 'shape'}.`);
+                    }
+                    parser.selectQuery(requestQuery).then((result) => {
+                        setQueryResult(result);
+                    });
+                }
+            }, [props.of, limit, offset]);
+            let dataIsLoaded = queryResult || !usingStorage || sourceIsValidQResult;
+            if (typeof queryResult === 'undefined' &&
+                usingStorage &&
+                !sourceIsValidQResult) {
+                dataIsLoaded = false;
+            }
+            if (dataIsLoaded) {
+                return React.createElement(functionalComponent, linkedProps);
+            }
+            else {
+                return createLoadingSpinner();
+            }
+        });
+        _wrappedComponent.original = functionalComponent;
+        _wrappedComponent.query = query;
+        _wrappedComponent.shape = shapeClass;
+        if (functionalComponent.name) {
+            Object.defineProperty(_wrappedComponent, 'name', {
+                value: functionalComponent.name,
+            });
+            registerPackageExport(_wrappedComponent);
+        }
+        registerComponent(_wrappedComponent, shapeClass);
+        return _wrappedComponent;
+    };
+}
+function getLinkedComponentProps(props, shapeClass) {
+    let newProps = Object.assign(Object.assign({}, props), { source: getSourceFromInputProps(props, shapeClass) });
+    if (newProps.of) {
+        for (let key of Object.getOwnPropertyNames(newProps.of)) {
+            if (key !== 'shape' && key !== 'id') {
+                newProps[key] = newProps.of[key];
+            }
+        }
+    }
+    delete newProps.of;
+    return newProps;
+}
+function processQuery(requiredData, setComponent = false) {
+    let shapeClass;
+    let query;
+    if (requiredData instanceof SelectQueryFactory) {
+        query = requiredData;
+        shapeClass = requiredData.shape;
+    }
+    else if (typeof requiredData === 'object' && setComponent) {
+        if (Object.keys(requiredData).length > 1) {
+            throw new Error('Only one key is allowed to map a query to a property for linkedSetComponents');
+        }
+        for (let key in requiredData) {
+            if (requiredData[key] instanceof SelectQueryFactory) {
+                shapeClass = requiredData[key].shape;
+                query = requiredData[key];
+            }
+            else {
+                throw new Error('Unknown value type for query object. Keep to this format: {propName: Shape.query(s => ...)}');
+            }
+        }
+    }
+    else {
+        throw new Error('Unknown data query type. Expected a LinkedQuery (from Shape.query()) or an object with 1 key whose value is a LinkedQuery');
+    }
+    return [shapeClass, query];
+}
+function getLinkedSetComponentProps(props, shapeClass, functionalComponent) {
+    if (props.of &&
+        !(props.of instanceof ShapeSet) &&
+        !Array.isArray(props.of)) {
+        throw Error("Invalid argument 'of' provided to " +
+            functionalComponent.name.replace('_implementation', '') +
+            ' component: ' +
+            props.of +
+            '. Make sure to provide a ShapeSet, an array of QResults, or no argument at all to load all instances.');
+    }
+    let sources;
+    if (props.of instanceof ShapeSet) {
+        sources = props.of;
+    }
+    else if (Array.isArray(props.of)) {
+        sources = new ShapeSet(props.of.map((item) => {
+            return getSourceFromInputProps({ of: item }, shapeClass);
+        }));
+    }
+    const newProps = Object.assign(Object.assign({}, props), { sources });
+    delete newProps.of;
+    return newProps;
+}
+export function getSourceFromInputProps(props, shapeClass) {
+    const input = props === null || props === void 0 ? void 0 : props.of;
+    if (input instanceof Shape) {
+        if (input.nodeShape !== shapeClass.shape &&
+            !hasSuperClass(getShapeClass(input.nodeShape.id), shapeClass)) {
+            return new shapeClass(input.id);
+        }
+        return input;
+    }
+    if (isNodeReferenceValue(input)) {
+        return new shapeClass(input);
+    }
+    // If nothing is provided, keep undefined; callers handle required source checks.
+    return input;
+}
+function isValidQResult(of, query) {
+    return (typeof (of === null || of === void 0 ? void 0 : of.id) === 'string' &&
+        query.isValidResult(of));
+}
+function createLoadingSpinner() {
+    return React.createElement('div', {
+        className: 'ld-loader',
+        'aria-label': 'Loading',
+        role: 'status',
+    });
+}
+//# sourceMappingURL=LinkedComponent.js.map

package/lib/esm/utils/LinkedComponent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkedComponent.js","sourceRoot":"","sources":["../../../src/utils/LinkedComponent.ts"],"names":[],"mappings":"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"}

package/lib/esm/utils/LinkedComponentClass.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Shape } from '@_linked/core/shapes/Shape';
+import { LinkedComponentProps } from './LinkedComponent.js';
+/**
+ * Class component base for linked components.
+ */
+export declare class LinkedComponentClass<ShapeClass extends Shape, P = {}, S = any> extends React.Component<P & LinkedComponentProps<ShapeClass>, S> {
+    private _shape;
+    get sourceShape(): ShapeClass;
+    componentDidUpdate(prevProps: Readonly<P & LinkedComponentProps<ShapeClass>>): void;
+}

package/lib/esm/utils/LinkedComponentClass.js

@@ -0,0 +1,27 @@
+import React from 'react';
+/**
+ * Class component base for linked components.
+ */
+export class LinkedComponentClass extends React.Component {
+    get sourceShape() {
+        if (typeof this._shape === 'undefined') {
+            if (!this.props.source) {
+                this._shape = null;
+            }
+            else {
+                let shapeClass = this.constructor['shape'];
+                if (!shapeClass) {
+                    throw new Error(`${this.constructor.name} is not linked to a shape`);
+                }
+                this._shape = new shapeClass(this.props.source);
+            }
+        }
+        return this._shape;
+    }
+    componentDidUpdate(prevProps) {
+        if (prevProps.source !== this.props.source) {
+            this._shape = undefined;
+        }
+    }
+}
+//# sourceMappingURL=LinkedComponentClass.js.map

package/lib/esm/utils/LinkedComponentClass.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkedComponentClass.js","sourceRoot":"","sources":["../../../src/utils/LinkedComponentClass.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B;;GAEG;AACH,MAAM,OAAO,oBAIX,SAAQ,KAAK,CAAC,SAAkD;IAGhE,IAAI,WAAW;QACb,IAAI,OAAO,IAAI,CAAC,MAAM,KAAK,WAAW,EAAE,CAAC;YACvC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;gBACvB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;YACrB,CAAC;iBAAM,CAAC;gBACN,IAAI,UAAU,GAAG,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;gBAC3C,IAAI,CAAC,UAAU,EAAE,CAAC;oBAChB,MAAM,IAAI,KAAK,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC,IAAI,2BAA2B,CAAC,CAAC;gBACvE,CAAC;gBACD,IAAI,CAAC,MAAM,GAAG,IAAI,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAe,CAAC;YAChE,CAAC;QACH,CAAC;QACD,OAAO,IAAI,CAAC,MAAM,CAAC;IACrB,CAAC;IAED,kBAAkB,CAChB,SAAyD;QAEzD,IAAI,SAAS,CAAC,MAAM,KAAK,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE,CAAC;YAC3C,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;QAC1B,CAAC;IACH,CAAC;CACF"}

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@_linked/react",
+  "version": "0.0.1",
+  "license": "MIT",
+  "description": "React bindings for @_linked/core",
+  "main": "lib/cjs/index.js",
+  "module": "lib/esm/index.js",
+  "exports": {
+    ".": {
+      "types": "./lib/esm/index.d.ts",
+      "import": "./lib/esm/index.js",
+      "require": "./lib/cjs/index.js"
+    },
+    "./*": {
+      "types": "./lib/esm/*.d.ts",
+      "import": "./lib/esm/*.js",
+      "require": "./lib/cjs/*.js"
+    }
+  },
+  "typesVersions": {
+    "*": {
+      "*": [
+        "lib/esm/*"
+      ]
+    }
+  },
+  "scripts": {
+    "build": "npx rimraf ./lib && npx tsc -p tsconfig-cjs.json && npx tsc -p tsconfig-esm.json && node ./scripts/dual-package.js",
+    "compile": "echo '💫 Compiling CJS' && npx tsc -p tsconfig-cjs.json && echo '💫 Compiling ESM' && npx tsc -p tsconfig-esm.json",
+    "dual-package": "node ./scripts/dual-package.js",
+    "test": "npx jest --config jest.config.js"
+  },
+  "peerDependencies": {
+    "@_linked/core": "^1.0.0",
+    "react": "^18.2.0"
+  },
+  "dependencies": {
+    "react-usestateref": "^1.0.8"
+  },
+  "devDependencies": {
+    "@_linked/core": "^1.0.0",
+    "@_linked/rdf-mem-store": "^1.0.0",
+    "@testing-library/react": "^14.2.1",
+    "@jest/globals": "^29.7.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.61",
+    "@types/react-dom": "^18.2.19",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rimraf": "^5.0.7",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.7.3"
+  }
+}

package/scripts/dual-package.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+const root = path.resolve(__dirname,'..');
+const libDir = path.join(root,'lib');
+const cjsDir = path.join(libDir,'cjs');
+const esmDir = path.join(libDir,'esm');
+
+const ensureDir = (dir) => {
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir,{recursive: true});
+  }
+};
+
+const writePackageJson = (dir,type) => {
+  ensureDir(dir);
+  const pkgPath = path.join(dir,'package.json');
+  const data = {
+    type,
+  };
+  fs.writeFileSync(pkgPath,JSON.stringify(data,null,2));
+};
+
+writePackageJson(cjsDir,'commonjs');
+writePackageJson(esmDir,'module');

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from './package.js';
+export * from './utils/LinkedComponent.js';
+export * from './utils/LinkedComponentClass.js';
+export * from './utils/Hooks.js';

package/src/package.ts

@@ -0,0 +1,62 @@
+import {CoreSet} from '@_linked/core/collections/CoreSet';
+import {linkedPackage} from '@_linked/core/utils/Package';
+import {Shape} from '@_linked/core/shapes/Shape';
+import {
+  Component,
+  createLinkedComponentFn,
+  createLinkedSetComponentFn,
+} from './utils/LinkedComponent.js';
+
+let shapeToComponents: Map<typeof Shape, CoreSet<Component>> = new Map();
+
+const {
+  linkedUtil,
+  linkedOntology,
+  linkedShape,
+  registerPackageExport,
+  registerPackageModule,
+  packageExports,
+  getPackageShape,
+} = linkedPackage('@_linked/react');
+
+function registerComponent(exportedComponent: Component, shape?: typeof Shape) {
+  if (!shape) {
+    if (!Object.prototype.hasOwnProperty.call(exportedComponent, 'shape')) {
+      console.warn(
+        `Component ${
+          exportedComponent.displayName || exportedComponent.name
+        } is not linked to a shape.`,
+      );
+      return;
+    }
+    shape = exportedComponent.shape;
+  }
+
+  if (!shapeToComponents.has(shape)) {
+    shapeToComponents.set(shape, new CoreSet<any>());
+  }
+
+  shapeToComponents.get(shape).add(exportedComponent);
+}
+
+const linkedComponent = createLinkedComponentFn(
+  registerPackageExport,
+  registerComponent,
+);
+
+const linkedSetComponent = createLinkedSetComponentFn(
+  registerPackageExport,
+  registerComponent,
+);
+
+export {
+  linkedComponent,
+  linkedSetComponent,
+  linkedShape,
+  linkedUtil,
+  linkedOntology,
+  registerPackageExport,
+  registerPackageModule,
+  packageExports,
+  getPackageShape,
+};