# okto-viewmodel

> ## How to use it

Latest version **0.1.6** (published 2020-02-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install okto-viewmodel
pnpm add okto-viewmodel
yarn add okto-viewmodel
bun add okto-viewmodel
```

## 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.1.6 |
| Published | 2020-02-24 |
| First published | 2020-01-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 36.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | pirropirro |
| Maintainers | pirropirro |

## Links

- npm: https://www.npmjs.com/package/okto-viewmodel
- Repository: https://github.com/pirropirro/signs-web
- Homepage: https://github.com/pirropirro/signs-web#readme
- Issues: https://github.com/pirropirro/signs-web/issues
- npm.io page: https://npm.io/package/okto-viewmodel

## Dependencies (4)

- [rxjs](https://npm.io/package/rxjs.md) ^6.5.3
- [inversify](https://npm.io/package/inversify.md) ^4.3.0
- [okto-core](https://npm.io/package/okto-core.md) ^0.1.6
- [reflect-metadata](https://npm.io/package/reflect-metadata.md) 0.1.8

## Recent versions

- 0.1.6 (latest) — 2020-02-24
- 0.1.5 — 2020-01-14
- 0.1.4 — 2020-01-09
- 0.1.3 — 2020-01-04
- 0.1.2 — 2020-01-04
- 0.0.8-beta.3 — 2020-01-04

## README

# okto-viewmodel

## How to use it

- Create a viewmodel 
```typescript
import { ViewModel, Refresh } from "okto-viewmodel";

@ViewModel.nameAs("Vegeta")
export class VegetaViewModel extends ViewModel {
  constructor(@inject(IUserRetriever) private retriever: IUserRetriever) {
    super();
    retriever.retrieve().then(user => setUser(user))
  }

  private counter: number = 0;
  
  @Refresh
  private setUser(user: User) {
    this.user = user;
  }

  public get value(): number {
    return this.counter;
  }

  // The Refresh decorator let the component re-rendering when the function is called
  @Refresh
  increase() {
    this.counter++;
  }

  isOver9000(): boolean {
    return this.counter >= 9000;
  }
}
```

- Create a component 
    - or using the `useViewmodel` hook
    ```tsx
    import * as React from "react";
    import { useViewmodel } from "okto-viewmodel";

    import { VegetaViewModel } from "./VegetaViewModel";

    export const VegetaComponent = function () {
      const viewmodel = useViewmodel(VegetaViewModel);

      return <div>
          <h2>Counter {viewmodel.value}</h2>
          {viewmodel.isOver9000() && <h1>OVER</h1>}
          <button onClick={React.useCallback(() => viewmodel.increase(), [])}>Increase</button>
      </div>
    }
    ```

    - or extends the `View` component factory
    ```tsx
    import * as React from "react";
    import { View } from "okto-viewmodel";

    import { VegetaViewModel } from "./VegetaViewModel";

    export class VegetaComponent extends View(VegetaViewModel) {
      render() {
        const {viewmodel} = this;
        
        return <div>
            <h2>Counter {viewmodel.value}</h2>
            {viewmodel.isOver9000() && <h1>IS OVER 9000!</h1>}
            <button onClick={React.useCallback(() => viewmodel.increase(), [])}>Increase</button>
        </div>
      }
    }
    ```

- Create a module and register the viewmodel in it.
```typescript
import { interfaces } from "inversify";
import { IViewModelsModule } from "okto-viewmodel";
import { IModule, IViewModelRegistry } from "okto-core";

import { VegetaViewModel } from './VegetaViewModel';

export class MainModule implements IModule, IViewModelsModule {
 modules(container: interfaces.Container): void { 
    /* Here you can bind services into the IOC container
    **
    ** es.
    ** container.bind<ISimpleService>(ISimpleService).to(SimpleService);
    **
    ** For more info check the inversifyJs documentation
    */
  }

  viewmodels(registry: IViewModelRegistry): void {
    registry.add(VegetaViewModel);
  }
}
```

- Register and run the app
```tsx
import "reflect-metadata";
import * as React from "react";
import { Application } from "okto-core";
import { ViewModelModule } from "okto-viewmodel";

import { MainModule } from './MainModule';
import { VegetaComponent } from "./VegetaComponent";

const app = new Application();
app.register(new ViewModelModule());

app.register(new MainModule());

// Here you can add as many Module as you want :)

app.run(() => <VegetaComponent />);
```

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