
Security News
Deno 2.2 Improves Dependency Management and Expands Node.js Compatibility
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
@cfcs/core
Advanced tools
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.
ReactiveState
.ReactiveSubscribe
interface for ReactiveState
.@ReactiveSubscribe
class decorator to use the subscribe
method.@Reactive
property decorator to use as reactive state.import { Reactive, ReactiveSubscribe, ReactiveSubscribe } from "@cfcs/reactive";
export interface ComponentReactiveState {
state1: boolean;
state2: number;
}
@ReactiveSubscribe
class Component {
@Reactive() state1!: boolean;
@Reactive() state2!: number;
// If you want to use it privately and export only public getters, use it as follows.
@Reactive("state1") private _state1!: boolean;
@Reactive("state2") private _state2!: number;
}
// 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);
});
methods
to use in the framework. ex) ["resize", "scrollIntoView", "querySelector"]
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.props
is in preparation.)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();
},
};
FAQs
Write once, create framework components that supports React, Vue, Svelte, and more.
We found that @cfcs/core demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Deno 2.2 enhances Node.js compatibility, improves dependency management, adds OpenTelemetry support, and expands linting and task automation for developers.
Security News
React's CRA deprecation announcement sparked community criticism over framework recommendations, leading to quick updates acknowledging build tools like Vite as valid alternatives.
Security News
Ransomware payment rates hit an all-time low in 2024 as law enforcement crackdowns, stronger defenses, and shifting policies make attacks riskier and less profitable.