⚡ CM6 State Fields & Facets
🔹 State Fields (Stateful Data)
Keep track of custom state over transactions.
const myField = StateField.define<ValueType>({
create: (state) => initial_value,
update: (val, tr) => new_value, // Runs on dispatch; use tr.field(myField)
provide: (field) => [extension_or_facet], // Expose to facets/effects
toJSON: (val, state) => json,
fromJSON: (json, state) => val
});🔹 Facets (Configuration & Output Aggregation)
Merge inputs from multiple extensions into a single active configuration.
const myFacet = Facet.define<InputType, OutputType>({
combine: (values) => combined_value, // Merges input array
compare: (a, b) => boolean, // Skip updates if combined output matches
compareInput: (a, b) => boolean // Skip aggregation if inputs match
});
// Read value: state.facet(myFacet)🔄 Lifecycle & Integration
graph TD Transaction -->|tr.field| StateField StateField -->|.provide| Facet.of Facet.of -->|combine| FacetValue
- Dynamic Binding: Feed fields into facets via
provide: (f) => facet.of(val). - Recomputation: Controlled by
compareInput/compareto prevent unnecessary editor redraws.