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

import VAC from "react-vac";

// 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
<VAC name="Dummy View" data={viewComponentProps} />;

// real VAC
// <ViewComponent {...viewComponentProps} />

VAC Debugger analyzes props object and then constructs UI for debugging.

Learn More>

Development Process (for View Asset Component)

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),
    onDescrease: () => 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, onDescrease }) => (
  <div>
    <button onClick={onDescrease}> - </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),
    onDescrease: () => add(-1),
  };

  // VAC
  return <SpinBoxView {...spinBoxViewProps} />;

  // VAC Debugger
  //return <VAC name="SpinBoxView" data={spinBoxViewProps} />;
};

License

MIT © Park U-yeong