@docstack/react 0.0.7 → 0.0.9

package/lib/components/StackProvider/index.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useRef, useCallback, useEffect, useState } from 'react';
+import { DocStack } from '@docstack/client'; // Import your DocStack class
+// You can give it a default value, e.g., null, which can be checked later.
+/**
+ * Context object for the DocStack instance.
+ * It provides the current DocStack instance or null if not initialized.
+ */
+export const DocStackContext = createContext(null);
+/**
+ * Hook to access the DocStack instance.
+ *
+ * @returns The current {@link DocStack} instance or null if not yet initialized.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *     const docStack = useDocStack();
+ *
+ *     if (!docStack) return <div>Loading...</div>;
+ *
+ *     return <div>Connected to {docStack.getStacks().length} stacks</div>;
+ * };
+ * ```
+ */
+export const useDocStack = () => {
+    return useContext(DocStackContext);
+};
+/**
+ * A provider component that initializes the DocStack client and makes it available
+ * to child components via the {@link useDocStack} hook.
+ * It handles the asynchronous initialization of the stack(s).
+ *
+ * @example
+ * ```tsx
+ * import { StackProvider } from '@docstack/react';
+ *
+ * const App = () => (
+ *     <StackProvider config={[{ name: 'my-db' }]}>
+ *         <MyApp />
+ *     </StackProvider>
+ * );
+ * ```
+ */
+const StackProvider = (props) => {
+    const { config, children, credentials } = props;
+    // Use a ref to store the DocStack instance
+    const docStackRef = useRef(null);
+    const [docStack, setDocStack] = useState(null);
+    const setsDocStackWhenReady = useCallback(() => {
+        setDocStack(docStackRef.current);
+    }, []);
+    useEffect(() => {
+        if (docStackRef.current === null && config.length) {
+            console.log("DocStack provider - init instance", { config });
+            const mergedConfig = config.map((cfg, idx) => {
+                const cred = Array.isArray(credentials) ? credentials[idx] : credentials;
+                if (typeof cfg === "string") {
+                    return cred ? { connection: cfg, credentials: cred } : cfg;
+                }
+                return cred ? Object.assign(Object.assign({}, cfg), { credentials: cred }) : cfg;
+            });
+            const instance = new DocStack(...mergedConfig);
+            docStackRef.current = instance;
+            docStackRef.current.addEventListener("ready", setsDocStackWhenReady);
+        }
+        // Optional: Cleanup function to remove listeners
+        return () => {
+            if (docStackRef.current) {
+                // docStackRef.current.removeEventListener("ready", setsDocStackWhenReady);
+                // docStackRef.current.getStore().removeAllListeners();
+            }
+        };
+    }, [config, credentials, setsDocStackWhenReady]);
+    return (_jsx(DocStackContext.Provider, { value: docStack, children: children }));
+};
+export default StackProvider;

package/lib/components/index.js

@@ -0,0 +1 @@
+"use strict";

package/lib/hooks/class.js

@@ -0,0 +1,370 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useContext, useCallback, useEffect, useRef, useState } from "react";
+import { DocStackContext } from "../components/StackProvider/index.js";
+import { Class } from "@docstack/client";
+/**
+ * Hook to create a new Class in a specific stack.
+ *
+ * @param stack - The name of the stack to create the class in.
+ * @returns A callback function to create the class.
+ *
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ *     const createClass = useClassCreate('my-stack');
+ *
+ *     const handleCreate = async () => {
+ *         const newClass = await createClass('NewClass', 'Description of new class');
+ *         if (newClass) {
+ *             console.log('Class created:', newClass.name);
+ *         }
+ *     };
+ *
+ *     return <button onClick={handleCreate}>Create Class</button>;
+ * };
+ * ```
+ */
+export const useClassCreate = (stack) => {
+    const docStack = useContext(DocStackContext);
+    return useCallback((className, classDesc) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (!docStack) {
+                // Handle the case where the provider is not yet initialized or missing
+                // You could throw an error or return an empty state.
+                console.error('useClassCreate must be used within a DocStackProvider.');
+                // setLoading(false);
+                return Promise.resolve(null);
+            }
+            // Run the initial query
+            const stackInstance = docStack.getStack(stack);
+            if (stackInstance) {
+                const classObj_ = yield Class.create(stackInstance, className, "class", classDesc);
+                yield stackInstance.addClass(classObj_);
+                return classObj_;
+            }
+            return null;
+        }
+        catch (err) {
+            // setError(err);
+            console.error(err);
+            return null;
+        }
+    }), [docStack, stack]);
+};
+/**
+ * Hook to retrieve a list of classes from a stack based on a selector.
+ * Maintains a real-time list of classes matching the selector.
+ *
+ * @param stack - The name of the stack to query.
+ * @param selector - Mango selector to filter classes.
+ * @returns Object containing the list of classes, loading state, and error.
+ *
+ * @example
+ * ```tsx
+ * const ClassList = () => {
+ *     const { classList, loading } = useClassList('my-stack', {
+ *         name: { $regex: '^User' }
+ *     });
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *
+ *     return (
+ *         <ul>
+ *             {classList.map(cls => <li key={cls.id}>{cls.name}</li>)}
+ *         </ul>
+ *     );
+ * };
+ * ```
+ */
+export const useClassList = (stack, selector) => {
+    const docStack = useContext(DocStackContext);
+    const [originClass, setOriginClass] = useState();
+    const [classList, setClassList] = useState([]);
+    const classListRef = useRef([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        // Only run if the docStack is available and a className is provided
+        if (!docStack) {
+            setLoading(false);
+            return;
+        }
+        const fetchClass = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            setError(null);
+            try {
+                const stackInstance = docStack.getStack(stack);
+                if (stackInstance) {
+                    const retrievedClass = yield stackInstance.getClass('class');
+                    if (retrievedClass) {
+                        setOriginClass(retrievedClass);
+                    }
+                }
+            }
+            catch (err) {
+                setError(err);
+                setLoading(false);
+            }
+        });
+        fetchClass();
+        return () => {
+            // clean what?
+        };
+    }, [docStack, stack]); // Dependency on docStack and stack
+    useEffect(() => {
+        if (!originClass) {
+            return;
+        }
+        const runQueryAndListen = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            try {
+                const initialClassModelList = yield originClass.getCards(selector);
+                const initialClassList = [];
+                const stackInstance = docStack.getStack(stack);
+                for (const cls of initialClassModelList) {
+                    const classInstance = yield Class.buildFromModel(stackInstance, cls);
+                    initialClassList.push(classInstance);
+                }
+                classListRef.current = initialClassList;
+                setClassList(classListRef.current);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+            const changeListener = (change) => {
+                const doc = change.detail.doc;
+                console.log("useClassDocs - detail", { detail: change.detail });
+                if (!doc.active) {
+                    // A doc was deleted
+                    console.log("useClassDocs - a doc was deleted", { doc });
+                    const docIndex = classListRef.current.findIndex((d) => d.id == doc._id);
+                    if (docIndex != -1) {
+                        classListRef.current = [
+                            ...classListRef.current.slice(0, docIndex),
+                            ...classListRef.current.slice(docIndex + 1, classListRef.current.length)
+                        ];
+                    }
+                }
+                else {
+                    // A doc was changed or added
+                    const docIndex = classListRef.current.findIndex((d) => d.id == doc._id);
+                    if (docIndex != -1) {
+                        // A doc was changed
+                        classListRef.current = [
+                            ...classListRef.current.slice(0, docIndex),
+                            doc,
+                            ...classListRef.current.slice(docIndex + 1, classListRef.current.length)
+                        ];
+                    }
+                    else {
+                        // A doc was added
+                        classListRef.current.push(doc);
+                    }
+                }
+                setClassList([...classListRef.current]);
+            };
+            originClass.addEventListener('doc', changeListener);
+            return () => {
+                originClass.removeEventListener('doc', changeListener);
+            };
+        });
+        runQueryAndListen();
+    }, [originClass, JSON.stringify(selector)]); // Dependency on classObj and query
+    return { classList, loading, error };
+};
+/**
+ * Hook to retrieve a single Class instance by name.
+ *
+ * @param stack - The name of the stack.
+ * @param className - The name of the class to retrieve.
+ * @returns Object containing the Class instance, loading state, and error.
+ *
+ * @example
+ * ```tsx
+ * const ClassDetails = () => {
+ *     const { classObj, loading } = useClass('my-stack', 'User');
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *     if (!classObj) return <div>Class not found</div>;
+ *
+ *     return <div>Class Description: {classObj.description}</div>;
+ * };
+ * ```
+ */
+export const useClass = (stack, className) => {
+    const docStack = useContext(DocStackContext);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState();
+    const [classObj, setClass] = useState();
+    const reqRef = useRef(false);
+    useEffect(() => {
+        if (!docStack) {
+            // Handle the case where the provider is not yet initialized or missing
+            // You could throw an error or return an empty state.
+            console.error('useClass must be used within a DocStackProvider.');
+            setLoading(false);
+            return;
+        }
+        const fetchClass = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const stackInstance = docStack.getStack(stack);
+                if (stackInstance) {
+                    const res = yield stackInstance.getClass(className);
+                    // TODO: manage class model (schema!) updates
+                    if (res) {
+                        setClass(res);
+                    }
+                }
+            }
+            catch (e) {
+                setError(e);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        if (!reqRef.current) {
+            reqRef.current = true;
+            setLoading(true);
+            fetchClass();
+        }
+        return () => {
+            // reqRef.current = false;
+        };
+    }, [docStack, stack, className]);
+    return { loading, error, classObj };
+};
+/**
+ * Hook to retrieve documents (cards) of a specific class.
+ * Maintains a real-time list of documents matching the query.
+ *
+ * @param stack - The name of the stack.
+ * @param className - The class name to fetch documents for.
+ * @param query - Optional Mango selector to filter documents.
+ * @returns Object containing the list of documents, loading state, and error.
+ *
+ * @example
+ * ```tsx
+ * const UserList = () => {
+ *     const { docs, loading } = useClassDocs('my-stack', 'User', {
+ *         age: { $gt: 18 }
+ *     });
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *
+ *     return (
+ *         <ul>
+ *             {docs.map(doc => <li key={doc._id}>{doc.name}</li>)}
+ *         </ul>
+ *     );
+ * };
+ * ```
+ */
+export const useClassDocs = (stack, className, query = {}) => {
+    const docStack = useContext(DocStackContext);
+    const [classObj, setClass] = useState();
+    const [docs, setDocs] = useState([]);
+    const docsRef = useRef([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        // Only run if the docStack is available and a className is provided
+        if (!docStack || !className) {
+            setLoading(false);
+            return;
+        }
+        const fetchClass = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            setError(null);
+            try {
+                const stackInstance = docStack.getStack(stack);
+                if (stackInstance) {
+                    const retrievedClass = yield stackInstance.getClass(className);
+                    if (retrievedClass) {
+                        setClass(retrievedClass);
+                    }
+                }
+            }
+            catch (err) {
+                setError(err);
+                setLoading(false);
+            }
+        });
+        fetchClass();
+        return () => {
+            // clean what?
+        };
+    }, [docStack, stack, className]); // Dependency on docStack and className
+    useEffect(() => {
+        if (!classObj) {
+            return;
+        }
+        const runQueryAndListen = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            try {
+                debugger;
+                const initialDocs = yield classObj.getCards(query);
+                docsRef.current = initialDocs;
+                setDocs(docsRef.current);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+            const changeListener = (change) => {
+                const doc = change.detail.doc;
+                console.log("useClassDocs - detail", { detail: change.detail });
+                if (!doc.active) {
+                    // A doc was deleted
+                    console.log("useClassDocs - a doc was deleted", { doc });
+                    const docIndex = docsRef.current.findIndex((d) => d._id == doc._id);
+                    if (docIndex != -1) {
+                        docsRef.current = [
+                            ...docsRef.current.slice(0, docIndex),
+                            ...docsRef.current.slice(docIndex + 1, docsRef.current.length)
+                        ];
+                    }
+                }
+                else {
+                    // A doc was changed or added
+                    console.log("useClassDocs - a doc was changed or added", { doc });
+                    const docIndex = docsRef.current.findIndex((d) => d._id == doc._id);
+                    if (docIndex != -1) {
+                        // A doc was changed
+                        console.log("useClassDocs - a doc was changed", { doc });
+                        docsRef.current = [
+                            ...docsRef.current.slice(0, docIndex),
+                            doc,
+                            ...docsRef.current.slice(docIndex + 1, docsRef.current.length)
+                        ];
+                    }
+                    else {
+                        // A doc was added
+                        console.log("useClassDocs - a doc was added", { doc });
+                        docsRef.current.push(doc);
+                    }
+                }
+                setDocs([...docsRef.current]);
+            };
+            classObj.addEventListener('doc', changeListener);
+            return () => {
+                classObj.removeEventListener('doc', changeListener);
+            };
+        });
+        runQueryAndListen();
+    }, [classObj, JSON.stringify(query)]); // Dependency on classObj and query
+    return { docs, loading, error };
+};

package/lib/hooks/domain.js

@@ -0,0 +1,366 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { useContext, useCallback, useEffect, useRef, useState } from "react";
+import { DocStackContext } from "../components/StackProvider/index.js";
+import { Domain } from "@docstack/shared";
+/**
+ * Hook to create a new Domain in a specific stack.
+ *
+ * @param stack - The name of the stack to create the domain in.
+ * @returns A callback function to create the domain.
+ *
+ * @example
+ * ```tsx
+ * const CreateDomain = () => {
+ *     const createDomain = useDomainCreate('my-stack');
+ *     // Assume sourceClass and targetClass are available Class instances
+ *
+ *     const handleCreate = async () => {
+ *         const newDomain = await createDomain(
+ *             'UserProjects',
+ *             '1:N',
+ *             userClass,
+ *             projectClass,
+ *             'User has many projects'
+ *         );
+ *     };
+ *
+ *     return <button onClick={handleCreate}>Create Domain</button>;
+ * };
+ * ```
+ */
+export const useDomainCreate = (stack) => {
+    const docStack = useContext(DocStackContext);
+    return useCallback((domainName, cardinality, sourceClass, targetClass, domainDesc) => __awaiter(void 0, void 0, void 0, function* () {
+        try {
+            if (!docStack) {
+                // Handle the case where the provider is not yet initialized or missing
+                // You could throw an error or return an empty state.
+                console.error('useDomainCreate must be used within a DocStackProvider.');
+                // setLoading(false);
+                return Promise.resolve(null);
+            }
+            // Run the initial query
+            const stackInstance = docStack.getStack(stack);
+            if (stackInstance) {
+                const domain = yield Domain.create(stackInstance, null, domainName, "domain", cardinality, sourceClass, targetClass, domainDesc);
+                return domain;
+            }
+            return null;
+        }
+        catch (err) {
+            // setError(err);
+            console.error(err);
+            return null;
+        }
+    }), [docStack, stack]);
+};
+/**
+ * Hook to retrieve a list of domains from a stack based on a selector.
+ * Maintains a real-time list of domains matching the selector.
+ *
+ * @param stack - The name of the stack to query.
+ * @param selector - Mango selector to filter domains.
+ * @returns Object containing the list of domains, loading state, and error.
+ *
+ * @example
+ * ```tsx
+ * const DomainList = () => {
+ *     const { domainList, loading } = useDomainList('my-stack', {
+ *         relation: { $eq: '1:N' }
+ *     });
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *
+ *     return (
+ *         <ul>
+ *             {domainList.map(d => <li key={d.id}>{d.name} ({d.relation})</li>)}
+ *         </ul>
+ *     );
+ * };
+ * ```
+ */
+export const useDomainList = (stack, selector) => {
+    const docStack = useContext(DocStackContext);
+    const [originClass, setOriginClass] = useState();
+    const [domainList, setDomainList] = useState([]);
+    const domainListRef = useRef([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        // Only run if the docStack is available and a className is provided
+        if (!docStack) {
+            setLoading(false);
+            return;
+        }
+        const fetchClass = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            setError(null);
+            try {
+                const stackInstance = docStack.getStack(stack);
+                if (stackInstance) {
+                    const retrievedClass = yield stackInstance.getClass('domain');
+                    if (retrievedClass) {
+                        setOriginClass(retrievedClass);
+                    }
+                }
+            }
+            catch (err) {
+                setError(err);
+                setLoading(false);
+            }
+        });
+        fetchClass();
+        return () => {
+            // clean what?
+        };
+    }, [docStack, stack]); // Dependency on docStack and stack
+    useEffect(() => {
+        if (!originClass) {
+            return;
+        }
+        const runQueryAndListen = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            try {
+                const stackInstance = docStack.getStack(stack);
+                const initialDomainModelList = yield originClass.getCards(selector);
+                const initDomainList = yield Promise.all(initialDomainModelList.map((dm) => __awaiter(void 0, void 0, void 0, function* () { return yield Domain.buildFromModel(stackInstance, dm); })));
+                domainListRef.current = initDomainList;
+                setDomainList(domainListRef.current);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+            const changeListener = (change) => {
+                const doc = change.detail.doc;
+                if (!doc.active) {
+                    // A doc was deleted
+                    const docIndex = domainListRef.current.findIndex((d) => d.id == doc._id);
+                    if (docIndex != -1) {
+                        domainListRef.current = [
+                            ...domainListRef.current.slice(0, docIndex),
+                            ...domainListRef.current.slice(docIndex + 1, domainListRef.current.length)
+                        ];
+                    }
+                }
+                else {
+                    // A doc was changed or added
+                    const docIndex = domainListRef.current.findIndex((d) => d.id == doc._id);
+                    if (docIndex != -1) {
+                        // A doc was changed
+                        domainListRef.current = [
+                            ...domainListRef.current.slice(0, docIndex),
+                            doc,
+                            ...domainListRef.current.slice(docIndex + 1, domainListRef.current.length)
+                        ];
+                    }
+                    else {
+                        // A doc was added
+                        domainListRef.current.push(doc);
+                    }
+                }
+                setDomainList([...domainListRef.current]);
+            };
+            originClass.addEventListener('doc', changeListener);
+            return () => {
+                originClass.removeEventListener('doc', changeListener);
+            };
+        });
+        runQueryAndListen();
+    }, [originClass, JSON.stringify(selector)]); // Dependency on classObj and query
+    return { domainList, loading, error };
+};
+/**
+ * Hook to retrieve a single Domain instance by name.
+ *
+ * @param stack - The name of the stack.
+ * @param domainName - The name of the domain to retrieve.
+ * @returns Object containing the Domain instance, loading state, and error.
+ *
+ * @example
+ * ```tsx
+ * const DomainDetails = () => {
+ *     const { domain, loading } = useDomain('my-stack', 'UserProjects');
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *     if (!domain) return <div>Domain not found</div>;
+ *
+ *     return <div>Relation Type: {domain.relation}</div>;
+ * };
+ * ```
+ */
+export const useDomain = (stack, domainName) => {
+    const docStack = useContext(DocStackContext);
+    const [loading, setLoading] = useState(false);
+    const [error, setError] = useState();
+    const [domain, setDomain] = useState();
+    const reqRef = useRef(false);
+    useEffect(() => {
+        if (!docStack) {
+            // Handle the case where the provider is not yet initialized or missing
+            // You could throw an error or return an empty state.
+            console.error('useDomain must be used within a DocStackProvider.');
+            setLoading(false);
+            return;
+        }
+        const fetchClass = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const stackInstance = docStack.getStack(stack);
+                if (stackInstance) {
+                    const res = yield stackInstance.getDomain(domainName);
+                    // TODO: manage class model (schema!) updates
+                    if (res) {
+                        setDomain(res);
+                    }
+                }
+            }
+            catch (e) {
+                setError(e);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        if (!reqRef.current) {
+            reqRef.current = true;
+            setLoading(true);
+            fetchClass();
+        }
+        return () => {
+            // reqRef.current = false;
+        };
+    }, [docStack, stack, domainName]);
+    return { loading, error, domain };
+};
+/**
+ * Hook to retrieve relation documents for a specific domain.
+ * Maintains a real-time list of relations matching the query.
+ *
+ * @param stack - The name of the stack.
+ * @param domainName - The domain name to fetch relations for.
+ * @param query - Optional Mango selector to filter relations.
+ * @returns Object containing the list of relation documents, loading state, and error.
+ *
+ * @example
+ * ```tsx
+ * const ProjectTasks = () => {
+ *     const { docs, loading } = useDomainRelations('my-stack', 'ProjectTasks', {
+ *         sourceId: { $eq: 'Project-123' }
+ *     });
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *
+ *     return (
+ *         <ul>
+ *             {docs.map(rel => (
+ *                 <li key={rel._id}>Linked Task: {rel.targetId}</li>
+ *             ))}
+ *         </ul>
+ *     );
+ * };
+ * ```
+ */
+export const useDomainRelations = (stack, domainName, query = {}) => {
+    const docStack = useContext(DocStackContext);
+    const [domain, setDomain] = useState();
+    const [docs, setDocs] = useState([]);
+    const docsRef = useRef([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        // Only run if the docStack is available and a className is provided
+        if (!docStack || !domainName) {
+            setLoading(false);
+            return;
+        }
+        const fetchClass = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            setError(null);
+            try {
+                const stackInstance = docStack.getStack(stack);
+                if (stackInstance) {
+                    const retrievedDomain = yield stackInstance.getDomain(domainName);
+                    if (retrievedDomain) {
+                        setDomain(retrievedDomain);
+                    }
+                }
+            }
+            catch (err) {
+                setError(err);
+                setLoading(false);
+            }
+        });
+        fetchClass();
+        return () => {
+            // clean what?
+        };
+    }, [docStack, stack, domainName]); // Dependency on docStack and className
+    useEffect(() => {
+        if (!domain) {
+            return;
+        }
+        const runQueryAndListen = () => __awaiter(void 0, void 0, void 0, function* () {
+            setLoading(true);
+            try {
+                const initialDocs = yield domain.getRelations(query);
+                docsRef.current = initialDocs;
+                setDocs(docsRef.current);
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+            const changeListener = (change) => {
+                const doc = change.detail.doc;
+                if (!doc.active) {
+                    // A doc was deleted
+                    const docIndex = docsRef.current.findIndex((d) => d._id == doc._id);
+                    if (docIndex != -1) {
+                        docsRef.current = [
+                            ...docsRef.current.slice(0, docIndex),
+                            ...docsRef.current.slice(docIndex + 1, docsRef.current.length)
+                        ];
+                    }
+                }
+                else {
+                    // A doc was changed or added
+                    console.log("useDomainRelations - a doc was changed or added", { doc });
+                    const docIndex = docsRef.current.findIndex((d) => d._id == doc._id);
+                    if (docIndex != -1) {
+                        // A doc was changed
+                        console.log("useDomainRelations - a doc was changed", { doc });
+                        docsRef.current = [
+                            ...docsRef.current.slice(0, docIndex),
+                            doc,
+                            ...docsRef.current.slice(docIndex + 1, docsRef.current.length)
+                        ];
+                    }
+                    else {
+                        // A doc was added
+                        console.log("useDomainRelations - a doc was added", { doc });
+                        docsRef.current.push(doc);
+                    }
+                }
+                setDocs([...docsRef.current]);
+            };
+            domain.addEventListener('doc', changeListener);
+            return () => {
+                domain.removeEventListener('doc', changeListener);
+            };
+        });
+        runQueryAndListen();
+    }, [domain, JSON.stringify(query)]); // Dependency on classObj and query
+    return { docs, loading, error };
+};

package/lib/hooks/index.js

@@ -0,0 +1,171 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+// src/hooks/useFind.js
+import { useContext, useEffect, useRef, useState } from 'react';
+import { DocStackContext } from '../components/StackProvider/index.js';
+/**
+ * Hook to execute a SQL query against a specific stack.
+ *
+ * @param stack - The name of the stack to query.
+ * @param sql - The SQL query string.
+ * @param params - Optional parameters for the SQL query.
+ * @returns Object containing the query result (rows and AST), loading state, and error.
+ *
+ * @example
+ * ```tsx
+ * const UserList = () => {
+ *     const { result, loading } = useQuerySQL('my-stack', 'SELECT * FROM User WHERE age > ?', 18);
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *
+ *     return (
+ *         <ul>
+ *             {result.rows.map(user => <li key={user._id}>{user.name}</li>)}
+ *         </ul>
+ *     );
+ * };
+ * ```
+ */
+export const useQuerySQL = (stack, sql, ...params) => {
+    const docStack = useContext(DocStackContext);
+    const [result, setResult] = useState({ rows: [], ast: [] });
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    // [TODO] Solve bounce of component because of StrictMode or other reasons
+    const queryRef = useRef(false);
+    useEffect(() => {
+        if (!docStack) {
+            // Handle the case where the provider is not yet initialized or missing
+            // You could throw an error or return an empty state.
+            console.error('useClassList must be used within a DocStackProvider.');
+            setLoading(false);
+            return;
+        }
+        const runQuery = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const stackInstance = docStack.getStack(stack);
+                if (stackInstance) {
+                    // Run the initial query
+                    console.log("Preparing to run query", { sql, params });
+                    // debugger
+                    const queryResult = yield stackInstance.query(sql, ...params);
+                    setResult(queryResult);
+                }
+                else {
+                    console.log("Could not find corresponding stack", { stack });
+                }
+            }
+            catch (err) {
+                console.log("Got error while running query", { error: err });
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        if (!queryRef.current) {
+            queryRef.current = true;
+            setLoading(true);
+            runQuery();
+        }
+        else {
+            console.log("Already performing query");
+        }
+        return () => {
+            //
+        };
+    }, [docStack, stack, params]);
+    return { loading, result, error };
+};
+/**
+ * Hook to find documents in a stack using a Mango selector.
+ *
+ * @param stack - The name of the stack to query.
+ * @param query - Object containing the selector and optional fields projection.
+ * @param sort - Optional sort criteria.
+ * @param limit - Maximum number of documents to return (default: 50).
+ * @returns Object containing the list of documents, loading state, and error.
+ *
+ * @example
+ * ```tsx
+ * const ActiveTasks = () => {
+ *     const { docs, loading } = useFind('my-stack', {
+ *         selector: {
+ *             "~class": "Task",
+ *             active: true
+ *         },
+ *         fields: ['_id', 'title']
+ *     });
+ *
+ *     if (loading) return <div>Loading...</div>;
+ *
+ *     return (
+ *         <ul>
+ *             {docs.map(doc => <li key={doc._id}>{doc.title}</li>)}
+ *         </ul>
+ *     );
+ * };
+ * ```
+ */
+export const useFind = (stack, query, sort, limit = 50) => {
+    const docStack = useContext(DocStackContext);
+    const [docs, setDocs] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        // Check if the docStack instance is available
+        if (!docStack) {
+            // Handle the case where the provider is not yet initialized or missing
+            // You could throw an error or return an empty state.
+            console.error('useFind must be used within a DocStackProvider.');
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        const runQuery = () => __awaiter(void 0, void 0, void 0, function* () {
+            try {
+                const stackInstance = docStack.getStack(stack);
+                if (stackInstance) {
+                    // Run the initial query
+                    const initialDocs = yield stackInstance.findDocuments(query.selector, query.fields);
+                    if (initialDocs.docs.length) {
+                        let docs = initialDocs.docs; // [TODO] Check types
+                        setDocs(docs);
+                    }
+                }
+            }
+            catch (err) {
+                setError(err);
+            }
+            finally {
+                setLoading(false);
+            }
+        });
+        runQuery();
+        // Set up the listener for changes
+        const changeListener = (change) => {
+            // Logic to handle the change and update the docs state
+            // This part is crucial for real-time updates.
+            // You'll need to re-run the query or intelligently update the docs array
+            // based on the change object (add, update, delete).
+            // A simple way is to re-run the query.
+            // runQuery();
+        };
+        // [TODO] Implement events
+        docStack.addEventListener('change', changeListener);
+        // Cleanup function: remove the listener when the component unmounts
+        return () => {
+            docStack.removeEventListener('change', changeListener);
+        };
+    }, [docStack, JSON.stringify(query)]); // Re-run if docStack or query changes
+    return { docs, loading, error };
+};
+export const useClassCreate = () => {
+};

package/lib/index.js

@@ -1,3 +1,8 @@
-/*! For license information please see index.js.LICENSE.txt */
-import{createContext as e,useCallback as n,useContext as t,useEffect as r,useRef as o,useState as c}from"react";import{Class as i,DocStack as s}from"@docstack/client";import{Domain as l}from"@docstack/shared";var d={698(e,n){var t=Symbol.for("react.transitional.element");Symbol.for("react.fragment"),n.jsx=function(e,n,r){var o=null;if(void 0!==r&&(o=""+r),void 0!==n.key&&(o=""+n.key),"key"in n)for(var c in r={},n)"key"!==c&&(r[c]=n[c]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:o,ref:void 0!==n?n:null,props:r}}},848(e,n,t){e.exports=t(698)}},a={};function u(e){var n=a[e];if(void 0!==n)return n.exports;var t=a[e]={exports:{}};return d[e](t,t.exports,u),t.exports}u.d=(e,n)=>{for(var t in n)u.o(n,t)&&!u.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:n[t]})},u.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n);var f=u(848);const v=e(null),g=()=>t(v),y=e=>{const{config:t,children:i,credentials:l}=e,d=o(null),[a,u]=c(null),g=n(()=>{u(d.current)},[]);return r(()=>{if(null===d.current&&t.length){console.log("DocStack provider - init instance",{config:t});const e=t.map((e,n)=>{const t=Array.isArray(l)?l[n]:l;return"string"==typeof e?t?{connection:e,credentials:t}:e:t?Object.assign(Object.assign({},e),{credentials:t}):e}),n=new s(...e);d.current=n,d.current.addEventListener("ready",g)}return()=>{d.current}},[t,l,g]),(0,f.jsx)(v.Provider,{value:a,children:i})};var h=function(e,n,t,r){return new(t||(t=Promise))(function(o,c){function i(e){try{l(r.next(e))}catch(e){c(e)}}function s(e){try{l(r.throw(e))}catch(e){c(e)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t(function(e){e(n)})).then(i,s)}l((r=r.apply(e,n||[])).next())})};const m=(e,n,...i)=>{const s=t(v),[l,d]=c({rows:[],ast:[]}),[a,u]=c(!0),[f,g]=c(null),y=o(!1);return r(()=>s?(y.current?console.log("Already performing query"):(y.current=!0,u(!0),h(void 0,void 0,void 0,function*(){try{const t=s.getStack(e);if(t){console.log("Preparing to run query",{sql:n,params:i});const e=yield t.query(n,...i);d(e)}else console.log("Could not find corresponding stack",{stack:e})}catch(e){console.log("Got error while running query",{error:e}),g(e)}finally{u(!1)}})),()=>{}):(console.error("useClassList must be used within a DocStackProvider."),void u(!1)),[s,e,i]),{loading:a,result:l,error:f}},p=(e,n,o,i=50)=>{const s=t(v),[l,d]=c([]),[a,u]=c(!0),[f,g]=c(null);return r(()=>{if(!s)return console.error("useFind must be used within a DocStackProvider."),void u(!1);u(!0),h(void 0,void 0,void 0,function*(){try{const t=s.getStack(e);if(t){const e=yield t.findDocuments(n.selector,n.fields);if(e.docs.length){let n=e.docs;d(n)}}}catch(e){g(e)}finally{u(!1)}});const t=e=>{};return s.addEventListener("change",t),()=>{s.removeEventListener("change",t)}},[s,JSON.stringify(n)]),{docs:l,loading:a,error:f}};var k=function(e,n,t,r){return new(t||(t=Promise))(function(o,c){function i(e){try{l(r.next(e))}catch(e){c(e)}}function s(e){try{l(r.throw(e))}catch(e){c(e)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t(function(e){e(n)})).then(i,s)}l((r=r.apply(e,n||[])).next())})};const S=e=>{const r=t(v);return n((n,t)=>k(void 0,void 0,void 0,function*(){try{if(!r)return console.error("useClassCreate must be used within a DocStackProvider."),Promise.resolve(null);const o=r.getStack(e);if(o){const e=yield i.create(o,n,"class",t);return yield o.addClass(e),e}return null}catch(e){return console.error(e),null}}),[r,e])},w=(e,n)=>{const s=t(v),[l,d]=c(),[a,u]=c([]),f=o([]),[g,y]=c(!0),[h,m]=c(null);return r(()=>{if(s)return k(void 0,void 0,void 0,function*(){y(!0),m(null);try{const n=s.getStack(e);if(n){const e=yield n.getClass("class");e&&d(e)}}catch(e){m(e),y(!1)}}),()=>{};y(!1)},[s,e]),r(()=>{l&&k(void 0,void 0,void 0,function*(){y(!0);try{const t=yield l.getCards(n),r=[],o=s.getStack(e);for(const e of t){const n=yield i.buildFromModel(o,e);r.push(n)}f.current=r,u(f.current)}catch(e){m(e)}finally{y(!1)}const t=e=>{const n=e.detail.doc;if(console.log("useClassDocs - detail",{detail:e.detail}),n.active){const e=f.current.findIndex(e=>e.id==n._id);-1!=e?f.current=[...f.current.slice(0,e),n,...f.current.slice(e+1,f.current.length)]:f.current.push(n)}else{console.log("useClassDocs - a doc was deleted",{doc:n});const e=f.current.findIndex(e=>e.id==n._id);-1!=e&&(f.current=[...f.current.slice(0,e),...f.current.slice(e+1,f.current.length)])}u([...f.current])};return l.addEventListener("doc",t),()=>{l.removeEventListener("doc",t)}})},[l,JSON.stringify(n)]),{classList:a,loading:g,error:h}},C=(e,n)=>{const i=t(v),[s,l]=c(!1),[d,a]=c(),[u,f]=c(),g=o(!1);return r(()=>i?(g.current||(g.current=!0,l(!0),k(void 0,void 0,void 0,function*(){try{const t=i.getStack(e);if(t){const e=yield t.getClass(n);e&&f(e)}}catch(e){a(e)}finally{l(!1)}})),()=>{}):(console.error("useClass must be used within a DocStackProvider."),void l(!1)),[i,e,n]),{loading:s,error:d,classObj:u}},x=(e,n,i={})=>{const s=t(v),[l,d]=c(),[a,u]=c([]),f=o([]),[g,y]=c(!0),[h,m]=c(null);return r(()=>{if(s&&n)return k(void 0,void 0,void 0,function*(){y(!0),m(null);try{const t=s.getStack(e);if(t){const e=yield t.getClass(n);e&&d(e)}}catch(e){m(e),y(!1)}}),()=>{};y(!1)},[s,e,n]),r(()=>{l&&k(void 0,void 0,void 0,function*(){y(!0);try{const e=yield l.getCards(i);f.current=e,u(f.current)}catch(e){m(e)}finally{y(!1)}const e=e=>{const n=e.detail.doc;if(console.log("useClassDocs - detail",{detail:e.detail}),n.active){console.log("useClassDocs - a doc was changed or added",{doc:n});const e=f.current.findIndex(e=>e._id==n._id);-1!=e?(console.log("useClassDocs - a doc was changed",{doc:n}),f.current=[...f.current.slice(0,e),n,...f.current.slice(e+1,f.current.length)]):(console.log("useClassDocs - a doc was added",{doc:n}),f.current.push(n))}else{console.log("useClassDocs - a doc was deleted",{doc:n});const e=f.current.findIndex(e=>e._id==n._id);-1!=e&&(f.current=[...f.current.slice(0,e),...f.current.slice(e+1,f.current.length)])}u([...f.current])};return l.addEventListener("doc",e),()=>{l.removeEventListener("doc",e)}})},[l,JSON.stringify(i)]),{docs:a,loading:g,error:h}};var D=function(e,n,t,r){return new(t||(t=Promise))(function(o,c){function i(e){try{l(r.next(e))}catch(e){c(e)}}function s(e){try{l(r.throw(e))}catch(e){c(e)}}function l(e){var n;e.done?o(e.value):(n=e.value,n instanceof t?n:new t(function(e){e(n)})).then(i,s)}l((r=r.apply(e,n||[])).next())})};const b=e=>{const r=t(v);return n((n,t,o,c,i)=>D(void 0,void 0,void 0,function*(){try{if(!r)return console.error("useDomainCreate must be used within a DocStackProvider."),Promise.resolve(null);const s=r.getStack(e);return s?yield l.create(s,null,n,"domain",t,o,c,i):null}catch(e){return console.error(e),null}}),[r,e])},P=(e,n)=>{const i=t(v),[s,d]=c(),[a,u]=c([]),f=o([]),[g,y]=c(!0),[h,m]=c(null);return r(()=>{if(i)return D(void 0,void 0,void 0,function*(){y(!0),m(null);try{const n=i.getStack(e);if(n){const e=yield n.getClass("domain");e&&d(e)}}catch(e){m(e),y(!1)}}),()=>{};y(!1)},[i,e]),r(()=>{s&&D(void 0,void 0,void 0,function*(){y(!0);try{const t=i.getStack(e),r=yield s.getCards(n),o=yield Promise.all(r.map(e=>D(void 0,void 0,void 0,function*(){return yield l.buildFromModel(t,e)})));f.current=o,u(f.current)}catch(e){m(e)}finally{y(!1)}const t=e=>{const n=e.detail.doc;if(n.active){const e=f.current.findIndex(e=>e.id==n._id);-1!=e?f.current=[...f.current.slice(0,e),n,...f.current.slice(e+1,f.current.length)]:f.current.push(n)}else{const e=f.current.findIndex(e=>e.id==n._id);-1!=e&&(f.current=[...f.current.slice(0,e),...f.current.slice(e+1,f.current.length)])}u([...f.current])};return s.addEventListener("doc",t),()=>{s.removeEventListener("doc",t)}})},[s,JSON.stringify(n)]),{domainList:a,loading:g,error:h}},L=(e,n)=>{const i=t(v),[s,l]=c(!1),[d,a]=c(),[u,f]=c(),g=o(!1);return r(()=>i?(g.current||(g.current=!0,l(!0),D(void 0,void 0,void 0,function*(){try{const t=i.getStack(e);if(t){const e=yield t.getDomain(n);e&&f(e)}}catch(e){a(e)}finally{l(!1)}})),()=>{}):(console.error("useDomain must be used within a DocStackProvider."),void l(!1)),[i,e,n]),{loading:s,error:d,domain:u}},E=(e,n,i={})=>{const s=t(v),[l,d]=c(),[a,u]=c([]),f=o([]),[g,y]=c(!0),[h,m]=c(null);return r(()=>{if(s&&n)return D(void 0,void 0,void 0,function*(){y(!0),m(null);try{const t=s.getStack(e);if(t){const e=yield t.getDomain(n);e&&d(e)}}catch(e){m(e),y(!1)}}),()=>{};y(!1)},[s,e,n]),r(()=>{l&&D(void 0,void 0,void 0,function*(){y(!0);try{const e=yield l.getRelations(i);f.current=e,u(f.current)}catch(e){m(e)}finally{y(!1)}const e=e=>{const n=e.detail.doc;if(n.active){console.log("useDomainRelations - a doc was changed or added",{doc:n});const e=f.current.findIndex(e=>e._id==n._id);-1!=e?(console.log("useDomainRelations - a doc was changed",{doc:n}),f.current=[...f.current.slice(0,e),n,...f.current.slice(e+1,f.current.length)]):(console.log("useDomainRelations - a doc was added",{doc:n}),f.current.push(n))}else{const e=f.current.findIndex(e=>e._id==n._id);-1!=e&&(f.current=[...f.current.slice(0,e),...f.current.slice(e+1,f.current.length)])}u([...f.current])};return l.addEventListener("doc",e),()=>{l.removeEventListener("doc",e)}})},[l,JSON.stringify(i)]),{docs:a,loading:g,error:h}};export{v as DocStackContext,y as StackProvider,C as useClass,S as useClassCreate,x as useClassDocs,w as useClassList,g as useDocStack,L as useDomain,b as useDomainCreate,P as useDomainList,E as useDomainRelations,p as useFind,m as useQuerySQL};
-//# sourceMappingURL=index.js.map
+import StackProvider, { DocStackContext, useDocStack } from "./components/StackProvider/index.js";
+import { useFind, useQuerySQL } from "./hooks/index.js";
+import { useClass, useClassList, useClassDocs, useClassCreate } from "./hooks/class.js";
+import { useDomainList, useDomain, useDomainRelations, useDomainCreate } from "./hooks/domain.js";
+export { StackProvider, DocStackContext, useDocStack };
+export { useFind, useQuerySQL };
+export { useClassList, useClass, useClassDocs, useClassCreate };
+export { useDomainList, useDomain, useDomainRelations, useDomainCreate };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docstack/react",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "One does not simply stack documents.",
   "main": "lib/index.js",
   "module": "lib/index.js",
@@ -10,7 +10,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "npm run build:prod",
+    "build": "npx tsc -build --force ./tsconfig.json",
     "build:dev": "webpack --node-env=development",
     "build:prod": "webpack --node-env=production"
   },
@@ -38,8 +38,8 @@
     "react-dom": "^19.2.3"
   },
   "dependencies": {
-    "@docstack/client": "^0.1.3",
-    "@docstack/shared": "^0.0.4",
+    "@docstack/client": "^0.1.4",
+    "@docstack/shared": "^0.0.5",
     "react": "^19.2.3",
     "react-dom": "^19.2.3"
   },