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.
- React
- Vue@2
- Vue@3
- Svelte
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>;
}