@cfcs/core

• CFCs Reactive

The Hooks component can provide us with a value for the state by changing the state designated as a Hook by certain conditions.

The property/state used in Hooks is called Reactive State.

How to use

Vanilla for Reactive

1. Define the Component's ReactiveState.
2. Use ReactiveSubscribe interface for ReactiveState.
3. Use the @ReactiveSubscribe class decorator to use the subscribe method.
4. Use the @Observe property decorator to use as reactive state.

import { Observe, Computed, ReactiveSubscribe, ReactiveSubscribe } from "@cfcs/reactive";

export interface ComponentReactiveState {
  state1: boolean;
  state2: number;
  state3: number
}

@ReactiveSubscribe
class Component {
  @Observe() state1!: boolean;
  @Observe() state2!: number;
  @Computed()
  get state3() {
    return this.state1 ? this.state2 : 0;
  }

  // If you want to use it privately and export only public getters, use it as follows.
  @Observe("state1") private _state1!: boolean;
  @Observe("state2") private _state2!: number;
  @Computed("state3")
  get _state3() {
    return this._state1 + this._state2;
  }
}

// if you
interface Component extends ReactiveSubscribe<ComponentReactiveState> {}

export default Component;

import Component from "./Component";

const component = new Component();

const state1 = component.state1;

component.subscribe("state1", nextValue => {
  console.log("subscribe state1 value", nextValue);
});

component.subscribe("state2", nextValue => {
  console.log("subscribe state2 value", nextValue);
});

component.subscribe("state3", nextValue => {
  console.log("subscribe state3 value", nextValue);
});

Framework for Reactive

1. Define reative hooks for use in framework. There are several preparations.

• methods to use in the framework. ex) ["resize", "scrollIntoView", "querySelector"]
• reactive state with default value to use as a hook in the framework. ex) { isReachStart: false, isReachEnd: false }
• Data interface to deliver framework data to component because the usage method is different for each framework.
• (dynamic props is in preparation.)

1. Defines the life cycle that operates in the framework.

• mounted: ...
• start: ...
• destroy: ...

import Component, { ComponentReactiveData } from "./Component";

export interface ComponentData {
  container: HTMLElement;
  props: ComponentOptions;
}

export const COMPONENT_HOOKS: ReactiveAdapter<Component, ComponentReactiveState, ComponentData> = {
  state: COMPONENT_REACTIVE_STATE,
  methods: CONVEYER_METHODS,
  mounted(data) {
    return new Component(data.container, data.props);
  },
  start(instance: Component) {
    instance.init();
  },
  destroy(instance: Component) {
    instance.destroy();
  },
};