⚡ 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 / compare to prevent unnecessary editor redraws.