Function reactiveStruct

Creates a reactive structs with the help of the returned builder.

A reactive struct is a class like object that can contain properties, computed properties and methods. By default all properties are reactive and writable.

Create a reactive struct

To create a reactive struct proceed as follows:

1. Define the type of the struct.

   type PersonType = {
       firstName: string;
       lastName: string;
   }
   Copy

2. Create a definition for the struct according to the type.

   const personDefinition: ReactiveStructDefinition<PersonType> = {
       firstName: {}, // default options (reactive and writable)
       lastName: {}   // default options (reactive and writable)
   };
   Copy

3. Create a new reactive struct class based on the provided definition.

   const PersonClass = reactiveStruct<PersonType>().define(personDefinition);
   Copy

4. Create a new instance of the struct.

   const person = new PersonClass({
       firstName: "John",
       lastName: "Doe"
   });
   Copy

5. Use the created instance.

   Now, you can use the person instance for example to compute the person's full name.

   const fullName = computed(() => `${person.firstName} ${person.lastName}`);
   console.log(fullName.value); // John Doe
   person.firstName = "Jane";
   console.log(fullName.value); // Jane Doe
   Copy

Options for simple properties

The following options can be set for properties in the struct definition:

• writable: if true the property is writable and it can be changed (the default). If false the property is read-only.
• reactive: if true the property is reactive (the default). If false the property is not reactive.

To define a read-only property set writable to false:

type PersonType = {
    readonly lastName: string;
}
const personDefinition: ReactiveStructDefinition<PersonType> = {
    lastName: { writable: false }
};
const PersonClass = reactiveStruct<PersonType>().define(personDefinition);
const person = new PersonClass({
    lastName: "Doe"
});
person.lastName = "Smith"; // type error, throws error at runtime
Copy

To define a non reactive property set reactive to false:

const personDefinition: ReactiveStructDefinition<PersonType> = {
    firstName: {},
    lastName: { reactive: false }
};
const PersonClass = reactiveStruct<PersonType>().define(personDefinition);
const person = new PersonClass({
    firstName: "John",
    lastName: "Doe"
});
const fullName = computed(() => `${person.firstName} ${person.lastName}`);
person.lastName = "Miller";
console.log(fullName.value); // John Miller
Copy

Computed properties

Computed properties are properties that are computed based on other properties. They can be defined in the struct definition as follows:

type PersonType = {
    firstName: string;
    lastName: string;
    fullName: string;
};
const personDefinition: ReactiveStructDefinition<PersonType> = {
    firstName: {},
    lastName: {},
    fullName: {
        compute() {
            return `${this.firstName} ${this.lastName}`;
        }
    }
};
const PersonClass = reactiveStruct<PersonType>().define(personDefinition);
const person = new PersonClass({
    firstName: "John",
    lastName: "Doe"
});
console.log(person.fullName); // John Doe
person.firstName = "Jane";
console.log(person.fullName); // Jane Doe
Copy

Methods

You can also define methods in the struct definition:

type PersonType = {
    firstName: string;
    lastName: string;
    printName: () => void;
};
const personDefinition: ReactiveStructDefinition<PersonType> = {
    firstName: {},
    lastName: {},
    printName: {
        method() {
            return console.log(`${this.firstName} ${this.lastName}`);
        }
    }
};
const PersonClass = reactiveStruct<PersonType>().define(personDefinition);
const person = new PersonClass({
    firstName: "John",
    lastName: "Doe"
});
person.printName(); // prints "John Doe"
Copy

NOTE: All strings or symbols are allowed as property names, except for strings starting with '$'. Strings starting with '$' are reserved for future extensions.