# easy-peasy-classes

> easy-peasy enhanced with classes, full typescript type safety, nested store stuctures and model inheritance

Latest version **0.0.2** (published 2021-12-13) · ISC license · 0 weekly downloads

## Install

```sh
npm install easy-peasy-classes
pnpm add easy-peasy-classes
yarn add easy-peasy-classes
bun add easy-peasy-classes
```

## Health

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

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2021-12-13 |
| First published | 2021-11-23 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 145.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | franck-co |
| Maintainers | franck-co |
| Keywords | easy-peasy, typescript, decorators, nested |

## Links

- npm: https://www.npmjs.com/package/easy-peasy-classes
- npm.io page: https://npm.io/package/easy-peasy-classes

## Dependencies (1)

- [lodash](https://npm.io/package/lodash.md) ^4.17.21

## Alternatives

- [@openai/codex-sdk](https://npm.io/package/@openai/codex-sdk.md) — 731.4K weekly downloads
- [babel-plugin-transform-react-jsx](https://npm.io/package/babel-plugin-transform-react-jsx.md) — 565.0K weekly downloads
- [babel-helper-remove-or-void](https://npm.io/package/babel-helper-remove-or-void.md) — 508.5K weekly downloads
- [@pnpm/store-controller-types](https://npm.io/package/@pnpm/store-controller-types.md) — 186.9K weekly downloads
- [react-native-signature-canvas](https://npm.io/package/react-native-signature-canvas.md) — 155.6K weekly downloads

## Recent versions

- 0.0.2 (latest) — 2021-12-13
- 0.0.1 — 2021-11-23
- 0.0.0 — 2021-11-23

## README

# easy-peasy-classes

easy-peasy-classes is a simple package that gives you the abiliy to write your easy-peasy models with typescript classes and decorators. Giving you an easy and concise way to build your store and getting code autocompletion + type safety.
easy-peasy-classes is heavily inspired by erencay's easy-peasy-decorators package. The approach slithy differs in order to add some new features.

## Disclaimer
This package (and its documentation) is still under development and is not suitable for use yet.

||easy-peasy-classes|easy-peasy-decorators|
| :--- | :---: | :---: |
| No need for a duplicate definition of the model and its interface | ✓ | ✓ |
| Autocompletion when accessing state and actions, even for [reusable store models](#reusablemodels) | ✓ | ✓ |
| No need to import/export your models throughout your project | - | ✓ |
| No need to extend every model from a base class | - | ✓ |
| Ability to mix with classic easy-peasy model definitions | ✓ | - |
| Convenient for deeply nested store structure | ✓ | - |
| Ability to define resusable models | ✓ | - |
| Class inheritence for models / Definition | ✓ | - |
| this.getStoreState() and this.getStoreActions() helpers | ✓ | - |
|Possibilty to define a this.resetState() helper| ✓ | - |

## Installation

```
npm install easy-peasy easy-peasy-classes
# or
yarn add easy-peasy easy-peasy-classes
```

## Basic usage
easy-peasy-classes comes with 7 decorators

|     |     |
| --- | --- |
|@Model|Required on top of __every__ class model|
|@Property|State value or sub-model|
|@Child|Same as @Property but enforce that useStoreState hook will get every @Property or @Child individually. More details [here](#child) |
|@Action||
|@Thunk||
|@Computed||
|@Listener()||

## <a name="reusablemodels"></a> Reusable models
In classic easy-peasy, a reusable models is a model wrapped in a function. This way you can duplicate it.
This is usefull if you have multiple components that have the same behaviour but not the same state values.
<br>

With classic easy-peasy syntax 
```js
//Reusable model definition
const CheckboxReusable = ()=>({
  isChecked: false,
  toggle: action((state, payload) => {
    state.isChecked = !state.isChecked);
  }),
})

//Usage in a parent model
export const ListModel = {
    consentmentCheckbox: CheckboxReusable(),
    newsletterCheckbox: CheckboxReusable()
}
```
<br>
With easy-peasy-classes

```js
//Reusable model definition
@Model
class CheckboxReusable extends BaseModel {

    @Property
    isChecked: boolean = false

    @Action
    toggle(){
        this.isChecked = !this.isChecked
    }
}

//Usage in a parent model
@Model
export class ListModel extends BaseModel{
    
    @Child
    consentmentCheckbox: CheckboxReusable = CheckboxReusable.obj
    
    
    @Child
    newsletterCheckbox: CheckboxReusable = CheckboxReusable.obj
    
}


//or  with classic easy-peasy
export const ListModel = {
    consentmentCheckbox: CheckboxReusable.obj as CheckboxReusable,
    newsletterCheckbox: CheckboxReusable.obj as CheckboxReusable
}




```

## <a name="child"></a> @Child

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