reactive-helpers

Appearance

use/object ​

Interfaces ​

ObjectManagerOptions ​

Defines the non-reactive handlers that can be passed to an object instance.

Properties ​

handlers ​

handlers: ObjectCrudHandlers

The non-reactive handlers to be passed to the object instance.

props ​

props: object

The reactive properties to be passed to the object instance.

calculatedObjectRules ​

calculatedObjectRules: ObjectCalculatedRules

The calculated object rules.

intendToRetrieve ​

intendToRetrieve: boolean

Whether the object intends to retrieve.

intendToSubscribe ​

intendToSubscribe: boolean

Whether the object intends to subscribe.

params ​

params: any

The arguments to be passed to the retrieve function.

pk? ​

optional pk?: PkInput

The pk of the object, optional to support creating new objects.

pkKey ​

pkKey: string

The pk key of the object.

relatedObjectRules ​

relatedObjectRules: ObjectRelatedRawRules

The rules for defining relationships for the managed object to other collections of objects.

target ​

target: object

The arguments to be passed to the crud handlers.

target.args ​

args: TargetArgs

The arguments to be passed to the crud handlers.

target.create? ​

optional create?: CrudCreateFn

A function to be used instead of the default crud create function.

target.delete? ​

optional delete?: CrudDeleteFn

A function to be used instead of the default crud delete function.

target.executeAction? ​

optional executeAction?: CrudObjectExecuteActionFn

The function to execute a certain action on an object.

target.patch? ​

optional patch?: CrudPatchFn

A function to be used instead of the default crud patch function.

target.retrieve? ​

optional retrieve?: CrudRetrieveFn

A function to be used instead of the default crud retrieve function.

target.subscribe? ​

optional subscribe?: CrudObjectSubscribeFn

A function to be used instead of the default crud subscribe function.

target.update? ​

optional update?: CrudUpdateFn

A function to be used instead of the default crud update function.

ObjectManagerProperties ​

Defines the properties available on an object manager.

Properties ​

managed ​

managed: ObjectManaged

The managed object.

state ​

state: object

The state of the managed object.

calculatedObject ​

calculatedObject: object

The calculated values, by rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the calculated value and never carry a .value.

Index Signature ​

[ruleKey: string]: any

calculatedObjectRules ​

calculatedObjectRules: ObjectCalculatedRules

The calculated object rules.

calculatedObjectWatchRunning ​

calculatedObjectWatchRunning: boolean

Whether the calculated object watch is running.

calculatedRunning ​

calculatedRunning: boolean

Whether the calculated is running.

crud ​

crud: object

The crud handlers.

crud.args ​

args: Reactive<{ } | TargetArgs>

The arguments to be passed to the crud handlers.

crud.create ​

create: CrudCreateFn

The create function.

crud.delete ​

delete: CrudDeleteFn

The delete function.

crud.executeAction ​

executeAction: CrudObjectExecuteActionFn

The executeAction function.

crud.patch ​

patch: CrudPatchFn

The patch function.

crud.retrieve ​

retrieve: CrudRetrieveFn

The retrieve function.

crud.subscribe ​

subscribe: CrudObjectSubscribeFn

The subscribe function.

crud.update ​

update: CrudUpdateFn

The update function.

deleted ​

deleted: boolean

Whether the object was deleted by the delete action or a subscription delete event. Cleared when a later create, retrieve, update, or patch repopulates the object, and by clear().

error ​

error: Error

The error that occurred.

errored ​

errored: boolean

Whether an error has occurred.

intendToRetrieve? ​

optional intendToRetrieve?: boolean

Whether the object intends to retrieve.

intendToSubscribe? ​

optional intendToSubscribe?: boolean

Whether the object intends to subscribe.

loading ​

loading: boolean

Whether the component is loading.

object ​

object: Reactive<CrudObject>

The object.

params ​

params: object

The arguments to be passed to the retrieve function.

Index Signature ​

[key: string]: any

parentStateObjectWatchRunning ​

parentStateObjectWatchRunning: boolean

Whether the parent state object watch is running.

pk ​

pk: string

The pk of the object.

pkKey ​

pkKey: string

The pk key of the object.

relatedObject? ​

optional relatedObject?: object

The related objects, by rule name. Each entry is backed by a computed, but it is read through a reactive proxy that unwraps it, so reads yield the related object (or array of related objects) and never carry a .value.

Index Signature ​

[rule: string]: any

relatedObjectRules? ​

optional relatedObjectRules?: ObjectRelatedRawRules

The rules for defining relationships for the managed object to other collections of objects.

relatedObjectWatchRunning? ​

optional relatedObjectWatchRunning?: boolean

Whether the related object watch is running.

relatedRunning? ​

optional relatedRunning?: boolean

Whether the related objects are loading.

running ​

running: boolean

Whether the related objects are loading or the parent state is loading.

subscribed? ​

optional subscribed?: boolean

Whether the object is subscribed.

stop ​

stop: () => void

Stop the effect scope of the managed object.

Returns ​

void

Type Aliases ​

ObjectManaged ​

ObjectManaged = object

Defines the managed object, containing the managed object instance, subscription, related objects, and calculated objects.

Type Parameters ​

Type Declaration ​

objectCalculated ​

objectCalculated: ObjectCalculated

objectInstance ​

objectInstance: ObjectInstance

objectRelated ​

objectRelated: ObjectRelated

objectSubscription ​

objectSubscription: ObjectSubscription

ObjectManager ​

ObjectManager = ObjectManagerProperties & ObjectManagerFunctions

The fully managed object returned by useObject, combining its properties and functions.

Type Parameters ​

ObjectManagerFunctions ​

ObjectManagerFunctions = ObjectInstanceFunctions & ObjectSubscriptionFunctions

Defines the functions provided by the object manager.

Type Parameters ​

ObjectManagerProps ​

ObjectManagerProps = UnwrapNestedRefs

Defines the reactive properties that can be passed to an object instance.

Type Parameters ​

ObjectManagerRawProps ​

ObjectManagerRawProps = ObjectInstanceRawProps & ObjectSubscriptionRawProps & ObjectRelatedRawProps & ObjectCalculatedRawProps

Defines the raw reactive properties that can be passed to an object instance.

Type Parameters ​

Functions ​

useObject() ​

useObject(options): ObjectManager

Initializes a chain of useObject* functions, returning an object of them.

Parameters ​

options ​

ObjectManagerOptions

The options to be passed to useObjectInstance, useObjectSubscription, useObjectRelated, and useObjectCalculated.

Returns ​

ObjectManager

  • An object managing a chain of useObject* instances.

Example ​

<script setup>
import { useObject } from "@arrai-innovations/reactive-helpers";
import { computed, reactive, toRef } from "vue";

const someObjectsSource = reactive({
    objects: {
        '1': { id: 1, name: 'one', secondOrderId: 15 },
        '2': { id: 2, name: 'two', secondOrderId: 10 },
        '3': { id: 3, name: 'three', secondOrderId: 5 },
    },
});
const someOtherObjectsSource = reactive({
    objects: {
        '5': { id: 5, name: 'five' },
        '10': { id: 10, name: 'ten' },
        '15': { id: 15, name: 'fifteen' },
    },
});
const props = defineProps({
    app: { type: String, required: true },
    model: { type: String, required: true },
    pk: { type: String, default: "" },
});

const objectProps = reactive({
    target: {
        app: toRef(props, "app"),
        model: toRef(props, "model"),
    },
    pk: toRef(props, "pk"),
    pkKey: 'id',
    params: {
        fields: ['foo', 'bar'],
    },
    relatedObjectRules: {
        firstOrder: {
            pkKey: 'some_objects_id',
            objects: someObjectsSource.objects,
        },
        some_objects_list_ids: {
            // pkKey defaults to match rule name
            objects: someObjectsSource.objects,
            order: ['3','1','2'],
        },
        secondOrder: {
            pkKey: 'relatedItem.firstOrder.secondOrderId',
            objects: someOtherObjectsSource.objects,
        },
    },
    calculatedObjectRules: {
        someRule: (object, relatedObject) => {
            // some complex calculation. relatedObject holds the objects matched by relatedObjectRules above,
            // keyed by rule name.
            // this is used as a computed body.
            return object.foo + object.name;
        },
        // ...further rules
    },
    intendToRetrieve: false,
    intendToSubscribe: false,
});
objectProps.intendToRetrieve = objectProps.intendToSubscribe = computed(()=> !!props.pk);
const objectManager = useObject({ props: objectProps });
// objectManager.state.object comes back from the server (via configured crud retrieve function)
// { id: 2, name: 'two', foo: 'bar', some_objects_id: 2, some_objects_list_ids: ['1','2','3'] }
</script>
<template>
<div v-if="objectManager.state.loading">Loading...</div>
<div v-else-if="objectManager.state.errored">Error: {{ objectManager.state.error.message }}</div>
<div v-else-if="objectManager.state.object.id">
    <p>Foo: {{ objectManager.state.object.foo }}</p>
    <!-- 'bar' -->

    <p>{{ objectManager.state.relatedObject.firstOrder }}</p>
     <!-- { id: 2, name: 'two', secondOrderId: 10 } -->

     <p>{{ objectManager.state.relatedObject.some_objects_list_ids }}</p>
     <!-- [{ id: 3, name: 'three', secondOrderId: 5 }, { id: 1, name: 'one', secondOrderId: 15 }, { id: 2, name: 'two', secondOrderId: 10 }] -->

     <p>{{ objectManager.state.relatedObject.secondOrder }}</p>
     <!-- { id: 10, name: 'ten' } -->

     <p>{{ objectManager.state.calculatedObject.someRule }}</p>
     <!-- 'bartwo' -->
</div>
<div v-else>Object not found.</div>
</template>

useObjects() ​

useObjects(objectArgs): object

Initializes multiple useObject instances, returning an object of them based on the keys of the objectArgs.

Parameters ​

objectArgs ​

An object of objects to be passed to useObject.

Returns ​

object

  • An object of useObject instances.