import type { BaseType } from "@ng-org/shex-orm";
import type { ShapeType } from "@ng-org/shex-orm";
import { type Scope } from "../../types.ts";
import { DeepSignalSet } from "@ng-org/alien-deepsignals";
/**
 * Hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
 *
 * Returns a {@link DeepSignalSet} of objects matching the shape and that are within the scope.
 * Establishes a 2-way binding: Modifications to the object are immediately committed,
 * changes coming from the engine (or other components) cause an immediate rerender.
 *
 * @param shape The {@link ShapeType} the objects should have (generated by the shex-orm tool).
 * @param scope The {@link Scope} as graph string or scope object with graphs and subjects.
 * @returns A {@link DeepSignalSet} with the orm objects or an empty set, if still loading.\
 *          If the scope is explicitly set to `undefined`, an empty set is returned which errors
 *          if you try to make modifications on it.
 *
 * @example
 * ```tsx
 * function Expenses() {
 *     const expenses: DeepSignal<Set<Expense>> = useShape(ExpenseShapeType, {graphs: ["<graph NURI>"]});
 *
 *     const createExpense = useCallback(
 *         () => {
 *             expenses.add({
 *                 "@graph": `<graph NURI>`,
 *                 "@type": "did:ng:z:Expense",
 *                 "@id": "", // Assigns ID automatically, if set to "".
 *                 title: "New expense",
 *                 dateOfPurchase: obj.dateOfPurchase ?? new Date().toISOString(),
 *             });
 *         },
 *         [expenses]
 *     );
 *
 *     const expensesSorted = [...expenses].sort((a, b) =>
 *         a.dateOfPurchase.localeCompare(b.dateOfPurchase)
 *     );
 *
 *     // Note that if you use `@id` (the subject IRI) as key, you need to ensure that it is unique within your scope.
 *     // If it is not (i.e. there are two graphs with the same subject), use the combination of `@graph` and `@id`.
 *
 *     return (
 *         <div>
 *             <button
 *                 onClick={() => createExpense({})}
 *             >
 *                 + Add expense
 *             </button>
 *             <div>
 *                 {expensesSorted.length === 0 ? (
 *                     <p>
 *                         No expenses yet.
 *                     </p>
 *                 ) : (
 *                     expensesSorted.map((expense) => (
 *                         // You can modify the expense's properties in the ExpenseCard component
 *                         // which will instantly trigger a rerender.
 *                         <ExpenseCard
 *                             key={expense["@id"]}
 *                             expense={expense}
 *                         />
 *                     ))
 *                 )}
 *             </div>
 *         </div>
 *     );
 * }
 * ```
 */
declare const useShape: <T extends BaseType>(shape: ShapeType<T>, scope: Scope | string | undefined) => DeepSignalSet<T>;
export default useShape;
//# sourceMappingURL=useShape.d.ts.map