# react-vac

> This component is a debugging tool that helps you develop components without View(JSX).

Latest version **0.3.0** (published 2022-12-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-vac
pnpm add react-vac
yarn add react-vac
bun add react-vac
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2022-12-02 |
| First published | 2020-11-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=10 |
| Dependencies | 0 |
| Unpacked size | 96.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 13 |
| Author | Park U-yeong |
| Maintainers | ascript |
| Keywords | react, component, library, debugger, debugging, debug, view, jsx, render, util, development, tool, vac, pattern, design pattern, vac pattern |

## Links

- npm: https://www.npmjs.com/package/react-vac
- Repository: https://github.com/coxcore/react-vac
- Homepage: https://github.com/coxcore/react-vac#readme
- Issues: https://github.com/coxcore/react-vac/issues
- npm.io page: https://npm.io/package/react-vac

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.0 (latest) — 2022-12-02
- 0.2.3 — 2022-11-23
- 0.2.2 — 2021-10-09
- 0.2.1 — 2021-10-02
- 0.2.0 — 2021-10-01
- 0.1.0 — 2020-12-04
- 0.0.5 — 2020-12-04
- 0.0.4 — 2020-12-01
- 0.0.3 — 2020-12-01
- 0.0.2 — 2020-12-01
- 0.0.1 — 2020-11-30
- 0.0.0 — 2020-11-29

## README

# 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-process-for-view-asset-component) development.

[![NPM](https://img.shields.io/npm/v/react-vac.svg)](https://www.npmjs.com/package/react-vac) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install react-vac --save-dev
```

or

```bash
yarn add react-vac --dev
```

## Usage

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

See [[VAC Debugger Usage]](./docs/VAC_USAGE.md) for more details.

![basic usage](./docs/readme_assets/example_vac_basic_s2.png?raw=true)

```jsx
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](./docs/readme_assets/vac_pattern_s1.png?raw=true)

#### Step1

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

```jsx
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`.

```jsx
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](./docs/readme_assets/example_vac_spinbox_s2.png?raw=true)

#### Step3

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

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

#### Step4

Apply `VAC` to the component.

```jsx
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](https://coxcore.github.io/react-vac/demo/todo/vac/)

#### Codes

- [VAC](https://github.com/coxcore/examples-react-ts/blob/todo-list/src/components/TodoContainer.tsx#L31)
- [VACInput](https://github.com/coxcore/examples-react-ts/blob/todo-list/src/components/TodoInput.tsx#L34)
- [VACList](https://github.com/coxcore/examples-react-ts/blob/todo-list/src/components/TodoList.tsx#L39)

## Changelog

[Releases](https://github.com/coxcore/react-vac/releases)

## License

MIT © [Park U-yeong](https://github.com/coxcore)

---
_Source: https://npm.io/package/react-vac · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._