3. Use Events

You can check the state value change through re-rendering in react, watchEffect in vue, and $ in svelte.

If you don't use state, re-rendering won't happen.
In addition, events are provided with a lot of information including status.

Set the events to be exposed through the setEvents function.
You just need to tell how to register the event through on.
If you want to trigger an event manually without using on, use emit function.

See Function Adapter's setup

The following code changes the width and height values when the window size is changed.

import { reactive } from "@cfcs/core";

const REACTIVE_ADAPTER = ({ setEvents, on, emit, onInit, onDestroy }) => {
  setEvents(["resize"]);

  const obj = reactive({
    width: 0,
    height: 0,
  });
  const onResize = e => {
    obj.width = window.innerWidth;
    obj.height = window.innerHeight;
    // If you don't use the `on` function, manually trigger the event via `emit`.
    // emit("resize", e);
  };

  on((eventName, callback) => {
    // register
    window.addEventListener(eventName, callback);
    return () => {
      // unregister
      window.removeEventListener(eventName, callback);
    };
  });

  onInit(() => {
    window.addEventListener("resize", onResize);
  });

  onDestroy(() => {
    window.removeEventListener("resize", onResize);
  });


  return obj;
};

Frameworks

Events in the framework can be used as calls with an on prefix and a name in camelcase format.
ex) resize => onResize

onResize(() => {});

React
Vue@2
Vue@3
Svelte

The second parameter of an event in React is a dependency array, a usage similar to `useEffect`.

import { useReactive } from "@cfcs/react";

export function App() {
  const {
    width,
    height,
    onResize,
  } = useReactive(REACTIVE_ADAPTER);

  onResize(e => {
    // https://developer.mozilla.org/en-US/docs/Web/API/UIEvent
    console.log(e);
  }, []);
  return <div>{width}x{height}</div>;
}

Frameworks​

Frameworks