react-vac

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.

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.

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

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} />;
};

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

• Todo List

Codes

• VAC
• VACInput
• VACList

Changelog

Releases

License

MIT © Park U-yeong