# xmodel-svelte

> OOP style state management for Svelte

Latest version **1.0.2** (published 2022-08-16) · MIT license · 4 weekly downloads

## Install

```sh
npm install xmodel-svelte
pnpm add xmodel-svelte
yarn add xmodel-svelte
bun add xmodel-svelte
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.2 |
| Published | 2022-08-16 |
| First published | 2022-08-14 |
| Weekly downloads | 4 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 10.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | tiscodes |
| Maintainers | tiscodes |
| Keywords | svelte, state, store, model, state management, complex store, oop |

## Links

- npm: https://www.npmjs.com/package/xmodel-svelte
- Repository: https://github.com/TishanV/xmodel.git#main
- Homepage: https://github.com/TishanV/xmodel/tree/main#readme
- Issues: https://github.com/TishanV/xmodel/issues
- npm.io page: https://npm.io/package/xmodel-svelte

## Alternatives

- [@reckona/mreact-store](https://npm.io/package/@reckona/mreact-store.md) — 976 weekly downloads
- [regular-state](https://npm.io/package/regular-state.md) — 410 weekly downloads
- [@pacote/flux-actions](https://npm.io/package/@pacote/flux-actions.md) — 65 weekly downloads
- [@pilotlab/lux-debug](https://npm.io/package/@pilotlab/lux-debug.md) — 39 weekly downloads
- [vue-persist-state](https://npm.io/package/vue-persist-state.md) — 19 weekly downloads

## Recent versions

- 1.0.2 (latest) — 2022-08-16
- 1.0.1 — 2022-08-16
- 1.0.0 — 2022-08-14

## README

# Xmodel for Svelte
Published Date: 16 Aug 2022 (v1.0.2)

> **Only for Svelte apps.**

Visit Github page for other frameworks (React, Solid.js).

```bash
    npm i xmodel-svelte
    # or 
    yarn add xmodel-svelte
```
---
## Advantages
-  Model states can be both global or local.
-  Can share model codes across applications/framework with minimum code refactor
-  Intuitive for MVVM or MVI architecture
-  Less boilerplate/ Straightforward
---
## Intro

Tired of Redux or using the useReducer or other Flux pattern? This library eliminitates your decision time on state management instead focus on building the actual buisness logic in OOP style.

A good design pattern is that your buisness logic should be never be tied with state management functions i.e. The core buisness logic must be independent from your app architecture thus it has to be loosely coupled with other components in your architecture.

### Models

Models are the base component of the buisness logic where each model represent the specific domain-logic. MVVM, MVC, MVI and many uses the model in their architecture, hence the model code is portable for any framework. Thus you can port your model created for this library anywhere with minimum or no changes.  

## API
---
`Model`

Base abstract class that need to be extended by your model class.

`PrimitiveModel`

PrimitiveModel is used when the model has only a single primitive variable and has its own set of functions to modify or reuse.

```typescript
constructor(value: Primitive)
value: Primitive
valueOf(): Primitive

type Primitive = string | number | boolean | null | undefined | BigInt | Symbol
```

`ArrayModel`

Array model is used for managing list of models where each model item can be modified directly. Native javascript array of model will not be reactive, thus you need to implement by extending this class for reactive collection of models.

```typescript
constructor(Model: typeof Model) // Here you pass the Model class not the instance
list: Model[]
at(i: number): Model
push(item: Model): void
pop(i?: number, n?: number): Model | undefined 
```

`useModel(modelClass: Model, args?: string[])`

This function is used to convert your model class into reactive state which can be used anywhere in your application.

> Note: It can be called outside the jsx component thus making it available globally.

---
## Example (Todo App)

```typescript
// ./models/Todo.ts
import { Model } from "xmodel-svelte";

class Todo extends Model {
    task: string;
    isDone: boolean;

    constructor(task: string) {
        super();
        this.task = task;
        this.isDone = false;
    }

    changeTask(task: string) {
        this.task = task;
    }

    toggleDone() {
        this.isDone = !this.isDone;
    }
}

export default Todo;

```

```typescript
// ./models/TodoList.ts
import { ArrayModel } from "xmodel-svelte";
import Todo from "./Todo";

class TodoList extends ArrayModel<Todo> {
  constructor() {
    super(Todo);
  }

  add(task: string) {
    this.push(new Todo(task));
    // push method is available on ArrayModel
    // If you need use native methods of array you can directly modify on this.list
  }

  delete(i: number) {
    this.pop(i);
    // This pop function can remove item at any index like in Python
    // Not only removes 1 element but also subsequent n items by passing it as second arg.
  }
}

export default TodoList;
```

```typescript
// ./App.svelte
<script lang="ts">
  import { useModel } from "xmodel-svelte";
  import TodoList from "./models/TodoList";
  import TodoView from "./lib/Todo.svelte";

  let jotter: HTMLInputElement;

  const todos = useModel(TodoList);
  const addTodo = () => todos.add(jotter.value);
</script>

<div>
  <input bind:this={jotter} placeholder="Jot task" />
  <button on:click={addTodo}>Add Task</button>
</div>
{#each $todos.list as todo, i}
  <TodoView
    task={todo.task}
    isDone={todo.isDone}
    onDelete={() => todos.delete(i)}
    toggleDone={() => todos.$.toggleDone(i)}
  />
{/each}
```

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