import { type Scope } from "../../types.ts";
import type { BaseType, ShapeType } from "@ng-org/shex-orm";
import { DeepSignalSet } from "@ng-org/alien-deepsignals";
/**
 * Hook to subscribe to RDF data in the graph database using a shape, see {@link ShapeType}.
 * The returned objects are as easy to use as other TypeScript objects.
 *
 * 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 backend (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
 * ```html
 * <script lang="ts">
 * // Contains all expense objects with `@id` <s1 IRI> or <s2 IRI> and `@graph` <g1 NURI> or <g2 NURI>
 * const expenses: DeepSignal<Set<Expense>> = useShape(ExpenseShapeType,
 *      {graphs: ["<g1 NURI>", "<g2 NURI>"],
 *       subjects: ["<s1 IRI>", "<s2 IRI>"]});
 *
 *
 * const expensesSorted = computed(() => [...expenses].sort((a, b) =>
 *     a.dateOfPurchase.localeCompare(b.dateOfPurchase)
 * ));
 *
 * // Simply call expenses.add({"@graph": "<g1 or g2 NURI>", "@id": "", title: "Example title"}), to add new elements.
 * // Leave `@id` an empty string to auto-generate a subject NURI (adjust your scope accordingly).
 *
 * // 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`.
 * </script>
 *
 * <template>
 *     <div>
 *         <p v-if="expensesSorted.length === 0">
 *             No expenses yet.
 *         </p>
 *         <template v-else>
 *             <ExpenseCard
 *                 v-for="expense in expensesSorted"
 *                 :key="expense['@id'])"
 *                 :expense="expense"
 *             />
 *         </template>
 *     </div>
 * </template>
 * ```
 *
 * In the `ExpenseCard` component:
 * ```html
 * <script lang="ts">
 * const { expense } = defineProps<{
 *     expense: DeepSignal<Expense>;
 * }>();
 *
 * // If you modify expense in the component,
 * // the changes are immediately propagated to other consuming components.
 * // And persisted in the database.
 * </script>
 *
 * <template>
 *     <input
 *         v-model="expense.title"
 *         placeholder="Expense title"
 *     />
 * </template>
 * ```
 */
export declare function useShape<T extends BaseType>(shape: ShapeType<T>, scope: Scope | string | undefined): DeepSignalSet<T>;
export default useShape;
//# sourceMappingURL=useShape.d.ts.map