@linkedrecords/react 0.1.0

package/dist/index.d.mts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import LinkedRecords from '@linkedrecords/browser';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LinkedRecordsContextType {
+    lr: LinkedRecords;
+}
+declare const LinkedRecordsContext: react.Context<LinkedRecordsContextType | undefined>;
+
+interface LinkedRecordsProviderProps {
+    children: ReactNode;
+    serverUrl: string;
+}
+declare function LinkedRecordsProvider({ children, serverUrl }: LinkedRecordsProviderProps): react_jsx_runtime.JSX.Element;
+
+interface KVValue {
+    [key: string]: KVValue | string | boolean | number | undefined;
+}
+declare function useKeyValueAttributes(query: any[]): KVValue[];
+
+declare function useLinkedRecords(): LinkedRecordsContextType;
+
+type UserInfo = {
+    email: string;
+};
+declare function useUserInfo(): UserInfo | null;
+
+export { LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, useKeyValueAttributes, useLinkedRecords, useUserInfo };

package/dist/index.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import LinkedRecords from '@linkedrecords/browser';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface LinkedRecordsContextType {
+    lr: LinkedRecords;
+}
+declare const LinkedRecordsContext: react.Context<LinkedRecordsContextType | undefined>;
+
+interface LinkedRecordsProviderProps {
+    children: ReactNode;
+    serverUrl: string;
+}
+declare function LinkedRecordsProvider({ children, serverUrl }: LinkedRecordsProviderProps): react_jsx_runtime.JSX.Element;
+
+interface KVValue {
+    [key: string]: KVValue | string | boolean | number | undefined;
+}
+declare function useKeyValueAttributes(query: any[]): KVValue[];
+
+declare function useLinkedRecords(): LinkedRecordsContextType;
+
+type UserInfo = {
+    email: string;
+};
+declare function useUserInfo(): UserInfo | null;
+
+export { LinkedRecordsContext, type LinkedRecordsContextType, LinkedRecordsProvider, useKeyValueAttributes, useLinkedRecords, useUserInfo };

package/dist/index.js

@@ -0,0 +1,131 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  LinkedRecordsContext: () => LinkedRecordsContext,
+  LinkedRecordsProvider: () => LinkedRecordsProvider,
+  useKeyValueAttributes: () => useKeyValueAttributes,
+  useLinkedRecords: () => useLinkedRecords,
+  useUserInfo: () => useUserInfo
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/linkedRecordsContext.ts
+var import_react = require("react");
+var LinkedRecordsContext = (0, import_react.createContext)(void 0);
+
+// src/LinkedRecordsProvider.tsx
+var import_react2 = require("react");
+var import_browser = __toESM(require("@linkedrecords/browser"));
+var import_jsx_runtime = require("react/jsx-runtime");
+function LinkedRecordsProvider({ children, serverUrl }) {
+  const lr = import_browser.default.getPublicClient(serverUrl);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LinkedRecordsContext.Provider, { value: { lr }, children });
+}
+
+// src/useAttributes.ts
+var import_react4 = require("react");
+
+// src/useLinkedRecords.ts
+var import_react3 = require("react");
+function useLinkedRecords() {
+  const context = (0, import_react3.useContext)(LinkedRecordsContext);
+  if (!context) {
+    throw new Error("useLinkedRecords must be used within a LinkedRecordsProvider");
+  }
+  return context;
+}
+
+// src/useAttributes.ts
+var import_browser2 = require("@linkedrecords/browser");
+function useKeyValueAttributes(query) {
+  const { lr } = useLinkedRecords();
+  const [attributes, setAttributes] = (0, import_react4.useState)([]);
+  (0, import_react4.useEffect)(() => {
+    const unsubscribeFnPromise = new Promise((resolve) => {
+      const checkActorId = () => {
+        if (lr.actorId !== void 0) {
+          resolve();
+        } else {
+          setTimeout(checkActorId, 50);
+        }
+      };
+      checkActorId();
+    }).then(() => {
+      const queryUnsubscribe = lr.Attribute.subscribeToQuery({
+        attributes: [
+          ["$it", "$hasDataType", import_browser2.KeyValueAttribute],
+          ...query
+        ]
+      }, async ({ attributes: attributes2 }) => {
+        const values = await Promise.all(attributes2.map(async (a) => ({
+          _id: a.id,
+          ...await a.getValue()
+        })));
+        setAttributes(values);
+        attributes2.forEach((a) => {
+          a.subscribe(async () => {
+            const newValue = await a.getValue();
+            setAttributes((prev) => prev.map(
+              (v) => v._id === a.id ? { _id: a.id, ...newValue } : v
+            ));
+          });
+        });
+      });
+      return () => {
+        queryUnsubscribe.then((unsubscribe) => unsubscribe());
+      };
+    });
+    return () => {
+      unsubscribeFnPromise.then((fn) => fn());
+    };
+  }, [lr.Attribute, setAttributes]);
+  return attributes;
+}
+
+// src/useUserInfo.ts
+var import_react5 = require("react");
+function useUserInfo() {
+  const { lr } = useLinkedRecords();
+  const [userInfo, setUserInfo] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    lr.getCurrentUserEmail().then((email) => setUserInfo({ email })).catch(() => setUserInfo(null));
+  }, [lr]);
+  return userInfo;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LinkedRecordsContext,
+  LinkedRecordsProvider,
+  useKeyValueAttributes,
+  useLinkedRecords,
+  useUserInfo
+});

package/dist/index.mjs

@@ -0,0 +1,90 @@
+// src/linkedRecordsContext.ts
+import { createContext } from "react";
+var LinkedRecordsContext = createContext(void 0);
+
+// src/LinkedRecordsProvider.tsx
+import "react";
+import LinkedRecords from "@linkedrecords/browser";
+import { jsx } from "react/jsx-runtime";
+function LinkedRecordsProvider({ children, serverUrl }) {
+  const lr = LinkedRecords.getPublicClient(serverUrl);
+  return /* @__PURE__ */ jsx(LinkedRecordsContext.Provider, { value: { lr }, children });
+}
+
+// src/useAttributes.ts
+import { useEffect, useState } from "react";
+
+// src/useLinkedRecords.ts
+import { useContext } from "react";
+function useLinkedRecords() {
+  const context = useContext(LinkedRecordsContext);
+  if (!context) {
+    throw new Error("useLinkedRecords must be used within a LinkedRecordsProvider");
+  }
+  return context;
+}
+
+// src/useAttributes.ts
+import { KeyValueAttribute } from "@linkedrecords/browser";
+function useKeyValueAttributes(query) {
+  const { lr } = useLinkedRecords();
+  const [attributes, setAttributes] = useState([]);
+  useEffect(() => {
+    const unsubscribeFnPromise = new Promise((resolve) => {
+      const checkActorId = () => {
+        if (lr.actorId !== void 0) {
+          resolve();
+        } else {
+          setTimeout(checkActorId, 50);
+        }
+      };
+      checkActorId();
+    }).then(() => {
+      const queryUnsubscribe = lr.Attribute.subscribeToQuery({
+        attributes: [
+          ["$it", "$hasDataType", KeyValueAttribute],
+          ...query
+        ]
+      }, async ({ attributes: attributes2 }) => {
+        const values = await Promise.all(attributes2.map(async (a) => ({
+          _id: a.id,
+          ...await a.getValue()
+        })));
+        setAttributes(values);
+        attributes2.forEach((a) => {
+          a.subscribe(async () => {
+            const newValue = await a.getValue();
+            setAttributes((prev) => prev.map(
+              (v) => v._id === a.id ? { _id: a.id, ...newValue } : v
+            ));
+          });
+        });
+      });
+      return () => {
+        queryUnsubscribe.then((unsubscribe) => unsubscribe());
+      };
+    });
+    return () => {
+      unsubscribeFnPromise.then((fn) => fn());
+    };
+  }, [lr.Attribute, setAttributes]);
+  return attributes;
+}
+
+// src/useUserInfo.ts
+import { useEffect as useEffect2, useState as useState2 } from "react";
+function useUserInfo() {
+  const { lr } = useLinkedRecords();
+  const [userInfo, setUserInfo] = useState2(null);
+  useEffect2(() => {
+    lr.getCurrentUserEmail().then((email) => setUserInfo({ email })).catch(() => setUserInfo(null));
+  }, [lr]);
+  return userInfo;
+}
+export {
+  LinkedRecordsContext,
+  LinkedRecordsProvider,
+  useKeyValueAttributes,
+  useLinkedRecords,
+  useUserInfo
+};

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@linkedrecords/react",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.tsx --format cjs,esm --dts",
+    "prepare": "tsup src/index.tsx --format cjs,esm --dts"
+  },
+  "keywords": [],
+  "author": "Oliver Wolf",
+  "license": "AGPL-3.0",
+  "description": "",
+  "dependencies": {
+    "@linkedrecords/browser": "^0.1.0",
+    "react": "^19.1.1",
+    "react-dom": "^19.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.12",
+    "@types/react-dom": "^19.1.9",
+    "tsup": "^8.5.0",
+    "typescript": "^5.9.2"
+  }
+}

package/src/LinkedRecordsProvider.tsx

@@ -0,0 +1,18 @@
+import { type ReactNode } from 'react';
+import LinkedRecords from '@linkedrecords/browser';
+import { LinkedRecordsContext } from './linkedRecordsContext';
+
+interface LinkedRecordsProviderProps {
+  children: ReactNode;
+  serverUrl: string;
+}
+
+export function LinkedRecordsProvider({ children, serverUrl }: LinkedRecordsProviderProps) {
+  const lr = LinkedRecords.getPublicClient(serverUrl);
+
+  return (
+    <LinkedRecordsContext.Provider value={{ lr }}>
+      {children}
+    </LinkedRecordsContext.Provider>
+  );
+}

package/src/index.tsx

@@ -0,0 +1,5 @@
+export * from './linkedRecordsContext';
+export * from './LinkedRecordsProvider';
+export * from './useAttributes';
+export * from './useLinkedRecords';
+export * from './useUserInfo';

package/src/linkedRecordsContext.ts

@@ -0,0 +1,8 @@
+import { createContext } from 'react';
+import type LinkedRecords from '@linkedrecords/browser';
+
+export interface LinkedRecordsContextType {
+  lr: LinkedRecords;
+}
+
+export const LinkedRecordsContext = createContext<LinkedRecordsContextType | undefined>(undefined);

package/src/useAttributes.ts

@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useEffect, useState } from "react";
+import { useLinkedRecords } from "./useLinkedRecords";
+import { KeyValueAttribute } from '@linkedrecords/browser';
+
+interface KVValue {
+  [key: string]: KVValue | string | boolean | number | undefined;
+}
+
+export function useKeyValueAttributes(query: any[]): KVValue[]  {
+  const { lr } = useLinkedRecords();
+  const [ attributes, setAttributes ] = useState<KVValue[]>([]);
+
+  useEffect(() => {
+    const unsubscribeFnPromise = new Promise<void>((resolve) => {
+      const checkActorId = () => {
+        if (lr.actorId !== undefined) {
+          resolve();
+        } else {
+          setTimeout(checkActorId, 50);
+        }
+      };
+      checkActorId();
+    }).then(() => {
+      const queryUnsubscribe = lr.Attribute.subscribeToQuery({
+        attributes: [
+          ['$it', '$hasDataType', KeyValueAttribute],
+          ...query
+        ],
+      }, async ({ attributes }) => {
+        const values = await Promise.all(attributes.map(async (a) => ({
+          _id: a.id,
+          ...(await a.getValue()),
+        })));
+
+        setAttributes(values);
+
+        attributes.forEach((a) => {
+          a.subscribe(async () => {
+            const newValue = await a.getValue();
+
+            // Use functional update to avoid stale closure
+            setAttributes(prev => prev.map(v =>
+              v._id === a.id
+                ? { _id: a.id, ...newValue }
+                : v
+            ));
+          });
+        });
+      });
+
+      return () => {
+        queryUnsubscribe.then(unsubscribe => unsubscribe());
+      };
+    });
+
+    return () => {
+      unsubscribeFnPromise.then(fn => fn());
+    }
+  }, [ lr.Attribute, setAttributes ]);
+
+  return attributes;
+}

package/src/useLinkedRecords.ts

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { LinkedRecordsContext } from './linkedRecordsContext';
+
+export function useLinkedRecords() {
+  const context = useContext(LinkedRecordsContext);
+  if (!context) {
+    throw new Error('useLinkedRecords must be used within a LinkedRecordsProvider');
+  }
+  return context;
+}

package/src/useUserInfo.ts

@@ -0,0 +1,19 @@
+import { useEffect, useState } from "react";
+import { useLinkedRecords } from "./useLinkedRecords";
+
+type UserInfo = {
+  email: string,
+}
+
+export function useUserInfo() {
+  const { lr } = useLinkedRecords();
+  const [userInfo, setUserInfo] = useState<UserInfo | null>(null);
+
+  useEffect(() => {
+    lr.getCurrentUserEmail()
+      .then((email) => setUserInfo({ email }))
+      .catch(() => setUserInfo(null));
+  }, [lr]);
+
+  return userInfo;
+}

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}