react-vac
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.2 • Public • Published

    react-vac (prototype)

    This component is a debugging tool that helps you develop components without View(JSX). It provides an optimal solution for VAC Pattern development.

    NPM JavaScript Style Guide

    Install

    npm install react-vac --save-dev

    or

    yarn add react-vac --dev

    Usage

    VAC Debugger analyzes Props Object and then constructs UI for debugging.

    See [VAC Debugger Usage] for more details.

    basic usage

    import { VAC } from "react-vac";
    
    const ExampleView = () => {
      // props object of VAC
      const viewComponentProps = {
        // properties
        value: "test value",
        someValue: { foo: "var" },
    
        // callbacks
        onClick: (event) => console.log("click!"),
        onSomeEvent: (event) => console.log("onSomeEvent!"),
      };
    
      // VAC Debugger
      return <VAC name="Dummy View" data={viewComponentProps} />;
    
      // real VAC
      // return <ViewComponent {...viewComponentProps} />
    };

    Development Process (for View Asset Component)

    View Asset Component

    View Asset Component(VAC) is a rendering component to manage JSX and Style, and is isolated from UI functionality or business logic.

    VAC Features

    • It only performs processes related to rendering, such as iterative creation, conditional exposure, and style control.
    • It is a stateless component that does not change its View by itself. Only controlled by props of component.
    • It does not do any additional processing when binding the callback function to the component's element event.

    VAC Pattern

    vac pattern

    Step1

    Create a component to develop, then define a Props Object and enter it into the data property of VAC Debugger.

    const SpinBoxUI = () => {
      // props object of VAC
      const spinBoxViewProps = {};
    
      // VAC Debugger
      return <VAC name="SpinBoxView" data={spinBoxViewProps} />;
    
      // VAC to be developed
      // return <SpinBoxView {...spinBoxViewProps} />;
    };

    Step2

    Develop UI functions or business logic in the component. And in the Props Object, define properties and callback functions that are needed in VAC.

    const SpinBoxUI = () => {
      const [value, setValue] = useState(0);
    
      const add = (n) => {
        setValue(value + n);
      };
    
      // props object of VAC
      const spinBoxViewProps = {
        value,
        onIncrease: () => add(1),
        onDecrease: () => add(-1),
      };
    
      // VAC Debugger
      return <VAC name="SpinBoxView" data={spinBoxViewProps} />;
    };

    basic example

    Step3

    Develop VAC by checking the properties defined in the Props Object.

    const SpinBoxView = ({ value, onIncrease, onDecrease }) => (
      <div>
        <button onClick={onDecrease}> - </button>
        <span>{value}</span>
        <button onClick={onIncrease}> + </button>
      </div>
    );

    Step4

    Apply VAC to the component.

    const SpinBoxUI = () => {
      const [value, setValue] = useState(0);
    
      const add = (n) => {
        setValue(value + n);
      };
    
      // props object of VAC
      const spinBoxViewProps = {
        value,
        onIncrease: () => add(1),
        onDecrease: () => add(-1),
      };
    
      // VAC
      return <SpinBoxView {...spinBoxViewProps} />;
    
      // VAC Debugger
      //return <VAC name="SpinBoxView" data={spinBoxViewProps} />;
    };

    Examples

    Demo

    Codes

    Changelog

    Releases

    License

    MIT © Park U-yeong

    Install

    npm i react-vac

    DownloadsWeekly Downloads

    5

    Version

    0.2.2

    License

    MIT

    Unpacked Size

    95.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • ascript