Skip to main content

Support Frameworks with one code

Even if a vanilla component is created, it cannot be applied to the framework as it is. This is because the usage method is different for each framework.

So, to support vanilla components in the framework, CFCs provide compatible adapters.

⚙️ Installation​

$ npm install @cfcs/core

Adapter Code​

The following code is a simple example to introduce the relationship between Adapter and Frameworks. If you want to create CFCs Adapter, refer to the Best Practice document.

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

const REACTIVE_ADAPTER = ({
  onMounted,
  onInit,
  onDestroy,
  emit,
  setEvents,
  setMethods,
}) => {
  // Set the event names to be exposed to the outside.
  setEvents(["change"]);
  // Set the method names to be exposed to the outside of the instance.
  setEvents(["method1"]);

  const obj = reactive({
    value1: 1,
    value2: 2,
    method1() {
      console.log("method1");
    },
  });

  const inst = new YourComponent();

  inst.on("change", e => {
    value1.current = 2;

    // emit `change` event externally
    emit("change", e);
  });

  onMounted(() => {
    // mounted hook
  });

  onInit(() => {
    // init hook
  });

  onDestroy(() => {
    // destroy hook
  });

  // Returns a reactive value.
  return obj;
};

Frameworks​

You can support frameworks by just changing the module name.

You can create a Reactive Component by importing the @cfcs/react module and using the useReactive function.

$ npm install @cfcs/react
import { useReactive } from "@cfcs/react";

function useReactiveComponent() {
  return useReactive(REACTIVE_ADAPTER);
}
export function App() {
  const {
    value1,
    value2,
    method1,
    onChange,
  } = useReactiveComponent();

  onChange(() => {
    // `change` event
  }, []);

  // `method1` method
  method1();
  return <div>{value1}x{value2}</div>;
}