# svelte-mobx-observer

> Svelte to MobX integration

Latest version **1.0.10** (published 2020-07-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-mobx-observer
pnpm add svelte-mobx-observer
yarn add svelte-mobx-observer
bun add svelte-mobx-observer
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.10 |
| Published | 2020-07-30 |
| First published | 2020-07-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Tomasz Ciborski |
| Maintainers | episage |
| Keywords | svelte |

## Links

- npm: https://www.npmjs.com/package/svelte-mobx-observer
- Repository: git@github.com:episage/svelte-mobx-observer
- Issues: https://github.com/episage/svelte-mobx-observer/issues
- npm.io page: https://npm.io/package/svelte-mobx-observer

## Recent versions

- 1.0.10 (latest) — 2020-07-30
- 1.0.9 — 2020-07-30
- 1.0.8 — 2020-07-30
- 1.0.7 — 2020-07-28
- 1.0.6 — 2020-07-28
- 1.0.5 — 2020-07-28
- 1.0.4 — 2020-07-28
- 1.0.3 — 2020-07-28
- 1.0.2 — 2020-07-28
- 1.0.1 — 2020-07-28
- 1.0.0 — 2020-07-28

## README

## Svelte MobX Observer

### Motivation

Svelte subscription system lacks possibility to observe values in deeply nested objects. This Svelte component lets you listen on MobX observable changes and update accordingly.

### Example

```svelte
<script>
  import { observable } from "mobx";
  import Observer from "svelte-mobx-observer";

  let foo = observable({ // standard, MobX observable
    deeply: {
      nested: {
        counter: 1
      }
    }
  });

  let counterVisible = true; // works with conditionals as well

  window.foo = foo; // you can use the "foo" observable anyywhere, it works at window and inside **nested components** AS WELL
</script>

<Observer>
  <main on:click={() => foo.deeply.nested.counter++}>
	<div on:click={()=> counterVisible = !counterVisible}>Counting up... click me to toggle</div>
	{#if counterVisible}
		<h1>{foo.deeply.nested.counter}</h1>	
	{/if}
  </main>
</Observer>

<style>
main {
	cursor: pointer;
}
</style>
```

### Starter project

[GitHub: Svelte - MobX Starter](https://github.com/episage/svelte-mobx-observer-starter)

### Installation

```
yarn add svelte-mobx-observer
```

### Method

This is a hand crafted component on a basis of Svelte generated code.

 - `stage1` - dir with Svelte generated files from `Component.svelte`
 - `stage2` - dist dir with hand modified files from `stage1`

### Requirements

 - MobX `^5.15.4`
 - Svelte `^3.24.0`

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