{"id":31551345,"url":"https://github.com/betomorrow/micro-observables","last_synced_at":"2025-10-04T18:41:59.049Z","repository":{"id":35170874,"uuid":"216596960","full_name":"BeTomorrow/micro-observables","owner":"BeTomorrow","description":"A simple Observable library that can be used for easy state management in React applications.","archived":false,"fork":false,"pushed_at":"2023-03-04T05:28:03.000Z","size":1966,"stargazers_count":105,"open_issues_count":22,"forks_count":10,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-02T01:43:33.510Z","etag":null,"topics":["hooks","mobx","observable","react","redux","state-management"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/BeTomorrow.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-21T15:04:46.000Z","updated_at":"2025-03-03T14:47:34.000Z","dependencies_parsed_at":"2024-06-18T16:47:25.439Z","dependency_job_id":"8d360b22-0566-4f86-b051-391ce6508069","html_url":"https://github.com/BeTomorrow/micro-observables","commit_stats":{"total_commits":162,"total_committers":7,"mean_commits":"23.142857142857142","dds":"0.47530864197530864","last_synced_commit":"8eb7936d07e6719f9d26c3d93bef2e5e31acbea0"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"purl":"pkg:github/BeTomorrow/micro-observables","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeTomorrow%2Fmicro-observables","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeTomorrow%2Fmicro-observables/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeTomorrow%2Fmicro-observables/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeTomorrow%2Fmicro-observables/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BeTomorrow","download_url":"https://codeload.github.com/BeTomorrow/micro-observables/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BeTomorrow%2Fmicro-observables/sbom","scorecard":{"id":20625,"data":{"date":"2025-08-11","repo":{"name":"github.com/BeTomorrow/micro-observables","commit":"8eb7936d07e6719f9d26c3d93bef2e5e31acbea0"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/30 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"Vulnerabilities","score":0,"reason":"37 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-5fw9-fq32-wv5p","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx","Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch","Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6","Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-52f5-9888-hmc6","Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7","Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693","Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q","Warn: Project is vulnerable to: GHSA-c4w7-xm78-47vh"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-14T16:43:28.430Z","repository_id":35170874,"created_at":"2025-08-14T16:43:28.430Z","updated_at":"2025-08-14T16:43:28.430Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278358484,"owners_count":25973946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["hooks","mobx","observable","react","redux","state-management"],"created_at":"2025-10-04T18:41:53.388Z","updated_at":"2025-10-04T18:41:59.001Z","avatar_url":"https://github.com/BeTomorrow.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Micro-observables\n\n_A simple Observable library that can be used for easy state-management in React applications._\n\n## Features\n\n- **💆‍♂️ Easy to learn:** No boilerplate required, write code as you would naturally. Just wrap values that you want to expose to your UI into observables. Micro-observables only exposes a few methods to create and transform observables\n- **⚛️ React support:** Out-of-the-box React support based on React Hooks and higher-order components\n- **🐥 Lightweight:** The whole source code is made of less than 400 lines of code, resulting in a **6kb** production bundle\n- **🔥 Performant:** Observables are evaluated only when needed. Micro-observables also supports [React and React Native batching](#react-batching), minimizing the amount of re-renders\n- **🔮 Debuggable:** Micro-observables does not rely on ES6 proxies, making it easy to identify lines of code that trigger renders. Code execution is easy to follow, making debugging straightforward\n- **🛠 TypeScript support:** Being written entirely in TypeScript, types are first-class citizen\n\n## Introduction\n\nIn micro-observables, observables are objects that store a single value. They are used to store a **piece of state** of your app. An observable notifies listeners each time its value changes, triggering a re-render of all components that are using that observable for example.\n\nObservables can be easily derived into new observables by applying functions on them, such as `select()`, `onlyIf()` or `default()`.\n\nMicro-observables works great in combination with React thanks to the use of the `useObservable()` hook or the `withObservables` higher-order component. It can be used as a simple yet powerful alternative to [Redux](https://redux.js.org) or [MobX](https://mobx.js.org).\n\nMicro-observables has been inspired by the simplicity of [micro-signals](https://github.com/lelandmiller/micro-signals). We recommend checking out this library for event-driven programming.\n\n**Note:** If you are used to RxJS, you can think of micro-observables as a React-friendly subset of RxJS exposing only the `BehaviorSubject` class.\n\n## Basic usage\n\n```ts\nimport assert from \"assert\";\nimport { observable } from \"micro-observables\";\n\nconst favoriteBook = observable({ title: \"The Jungle Book\", author: \"Kipling\" });\nconst favoriteAuthor = favoriteBook.select(book =\u003e book.author);\n\nassert.deepEqual(favoriteBook.get(), { title: \"The Jungle Book\", author: \"Kipling\" });\nassert.equal(favoriteAuthor.get(), \"Kipling\");\n\nconst receivedAuthors: string[] = [];\nfavoriteAuthor.subscribe(author =\u003e receivedAuthors.push(author));\n\nfavoriteBook.set({ title: \"Pride and Prejudice\", author: \"Austen\" });\nassert.deepEqual(receivedAuthors, [\"Austen\"]);\n\nfavoriteBook.set({ title: \"Hamlet\", author: \"Shakespeare\" });\nassert.deepEqual(receivedAuthors, [\"Austen\", \"Shakespeare\"]);\n```\n\n## Using micro-observables with React\n\nMicro-observables works great with React and can be used to replace state-management libraries such as Redux or MobX. It allows to easily keep components in sync with shared state by storing pieces of state into observables. The `useObservable()` hook or `withObservables` higher-order component can be used to access these values from a component.\n\n### Obligatory TodoList example\n\n```tsx\ntype Todo = { text: string; done: boolean };\n\nclass TodoService {\n  private _todos = observable\u003creadonly Todo[]\u003e([]);\n\n  readonly todos = this._todos.readOnly();\n  readonly pendingTodos = this._todos.select(todos =\u003e todos.filter(it =\u003e !it.done));\n\n  addTodo(text: string) {\n    this._todos.update(todos =\u003e [...todos, { text, done: false }]);\n  }\n\n  toggleTodo(index: number) {\n    this._todos.update(todos =\u003e todos.map((todo, i) =\u003e (i === index ? { ...todo, done: !todo.done } : todo)));\n  }\n}\n\nconst todoService = new TodoService();\ntodoService.addTodo(\"Eat my brocolli\");\ntodoService.addTodo(\"Plan trip to Bordeaux\");\n\nexport const TodoList: React.FC = () =\u003e {\n  const todos = useObservable(todoService.todos);\n  return (\n    \u003cdiv\u003e\n      \u003cTodoListHeader /\u003e\n      \u003cul\u003e\n        {todos.map((todo, index) =\u003e (\n          \u003cTodoItem key={index} todo={todo} index={index} /\u003e\n        ))}\n      \u003c/ul\u003e\n      \u003cAddTodo /\u003e\n    \u003c/div\u003e\n  );\n};\n\nconst TodoListHeader: React.FC = () =\u003e {\n  const pendingCount = useObservable(todoService.pendingTodos.select(it =\u003e it.length));\n  return \u003ch3\u003e{pendingCount} pending todos\u003c/h3\u003e;\n};\n\nconst TodoItem: React.FC\u003c{ todo: Todo; index: number }\u003e = ({ todo, index }) =\u003e {\n  return (\n    \u003cli style={{ textDecoration: todo.done ? \"line-through\" : \"none\" }} onClick={() =\u003e todoService.toggleTodo(index)}\u003e\n      {todo.text}\n    \u003c/li\u003e\n  );\n};\n\nconst AddTodo: React.FC = () =\u003e {\n  const input = useRef\u003cHTMLInputElement\u003e(null);\n\n  const addTodo = (event: React.FormEvent) =\u003e {\n    event.preventDefault();\n    todoService.addTodo(input.current!.value);\n    input.current!.value = \"\";\n  };\n\n  return (\n    \u003cform onSubmit={addTodo}\u003e\n      \u003cinput ref={input} /\u003e\n      \u003cbutton\u003eAdd\u003c/button\u003e\n    \u003c/form\u003e\n  );\n};\n```\n\nThis example can be run on [CodeSandbox](https://codesandbox.io/s/hopeful-sea-jrd9e?file=/src/TodoList.tsx).\n\n### React Batching\n\nMicro-observables supports React batched updates: when modifying an observable, all re-renders caused by the changes from the observable and its derived observables are batched, minimizing the total amount of re-renders.\n\nAnother important benefit of React Batching is that it ensures **consistency** in renders: you can learn more about this on [MobX Github](https://github.com/mobxjs/mobx-react/pull/787#issuecomment-573599793).\n\nBy default, batching is disabled as it depends on the platform your app is targeting. To enable it, import one of these files before using micro-observables (typically in your `index.js` file):\n\n**For React DOM:** `import \"micro-observables/batchingForReactDom\"`\n\n**For React Native:** `import \"micro-observables/batchingForReactNative\"`\n\n**For other platforms:** You can use the custom batching function provided by the platform by calling the `setBatchedUpdater()` function from micro-observables.\n\n## API\n\nIn micro-observables, there are two types of observables: `WritableObservable` and `Observable`. A `WritableObservable` allows to modify its value with the `set()` or `update()` methods. An `Observable` is read-only and can be created from a `WritableObservable` with `readOnly()`, `select()`, `onlyIf()` and other methods.\n\n### Functions\n\n#### observable(initialValue): WritableObservable\n\n`observable(initialValue)` is a convenient function to create a `WritableObservable`. It is equivalent to `new WritableObservable(initialValue)`.\n\nWrapping a value with the `observable()` function is all is needed to observe changes of a given value.\n\n**Note:** `initialValue` can be another observable. In this case, the new observable will be automatically updated when `initialValue` changes.\n\n```ts\nconst book = observable(\"The Jungle Book\");\n```\n\n### Instance Methods\n\n#### Observable.get()\n\nReturn the value contained by the observable without having to subscribe to it.\n\n```ts\nconst book = observable(\"The Jungle Book\");\nassert.equal(book.get(), \"The Jungle Book\");\n```\n\n#### WritableObservable.set(newValue)\n\nSet the new value contained by the observable. If the new value is not equal to the current one, listeners will be called with the new value.\n\n```ts\nconst book = observable(\"The Jungle Book\");\nbook.set(\"Pride and Prejudice\");\nassert.equal(book.get(), \"Pride and Prejudice\");\n```\n\n**Note:** `newValue` can be another observable. In this case, the observable will be automatically updated when `newValue` changes.\n\n#### WritableObservable.update(updater: (value) =\u003e newValue)\n\nConvenient method to modify the value contained by the observable, using its current value. It is equivalent to `observable.set(updater(observable.get()))`. This is especially useful to work with collections or to increment values for example.\n\n```ts\nconst books = observable([\"The Jungle Book\"]);\nbooks.update(it =\u003e [...it, \"Pride and Prejudice\"]);\nassert.deepEqual(books.get(), [\"The Jungle Book\", \"Pride and Prejudice\"]);\n```\n\n#### Observable.subscribe(listener: (value, prevValue) =\u003e void)\n\nAdd a listener that will be called when the observable's value changes. It returns a function to call to unsubscribe from the observable. Each time the value changes, all the listeners are called with the new value and the previous value. **Note:** Unlike other observable libraries, the listener is not called immediately with the current value when `subscribe()` is called.\n\n```ts\nconst book = observable(\"The Jungle Book\");\n\nconst received: string[] = [];\nconst prevReceived: string[] = [];\nconst unsubscribe = book.subscribe((newBook, prevBook) =\u003e {\n  received.push(newBook);\n  prevReceived.push(prevBook);\n});\nassert.deepEqual(received, []);\nassert.deepEqual(prevReceived, []);\n\nbook.set(\"Pride and Prejudice\");\nassert.deepEqual(received, [\"Pride and Prejudice\"]);\nassert.deepEqual(prevReceived, [\"The Jungle Book\"]);\n\nunsubscribe();\nbook.set(\"Hamlet\");\nassert.deepEqual(received, [\"Pride and Prejudice\"]);\nassert.deepEqual(prevReceived, [\"The Jungle Book\"]);\n```\n\n#### WritableObservable.readOnly()\n\nCast the observable into a read-only observable without the `set()` and `update()` methods. This is used for better encapsulation, preventing outside modifications when an observable is exposed.\n\n```ts\nclass BookService {\n  private _book = observable(\"The Jungle Book\");\n\n  readonly book = this._book.readOnly();\n}\n```\n\n**Note:** This method only makes sense with TypeScript as the returned observable is the same unchanged observable.\n\n#### Observable.select(selector: (value) =\u003e selectedValue)\n\nCreate a new observable with the result of the given selector applied on the input value. Each time the input observable changes, the returned observable will reflect this changes.\n\n```ts\nconst book = observable({ title: \"The Jungle Book\", author: \"Kipling\" });\nconst author = book.select(it =\u003e it.author);\nassert.equal(author.get(), \"Kipling\");\nbook.set({ title: \"Hamlet\", author: \"Shakespeare\" });\nassert.equal(author.get(), \"Shakespeare\");\n```\n\n**Note:** The provided `selector` function can return another observable. In this case, the created observable will get its value from the returned observable and will be automatically updated when the value from the returned observable changes.\n\n#### Observable.onlyIf(predicate: (value) =\u003e boolean)\n\nCreate a new observable that is only updated when the value of the input observable passes the given predicate. When `onlyIf()` is called, if the current value of the input observable does not pass the predicate, the new observable is initialized with `undefined`\n\n```ts\nconst counter = observable(0);\nconst even = counter.onlyIf(it =\u003e it % 2 === 0);\nconst odd = counter.onlyIf(it =\u003e it % 2 === 1);\nassert.equal(even.get(), 0);\nassert.equal(odd.get(), undefined);\n\ncounter.update(it =\u003e it + 1);\nassert.equal(even.get(), 0);\nassert.equal(odd.get(), 1);\n\ncounter.update(it =\u003e it + 1);\nassert.equal(even.get(), 2);\nassert.equal(odd.get(), 1);\n```\n\n#### Observable.default(defaultValue)\n\nTransform the observable into a new observable that contains the value of the input observable if it is not `undefined` or `null`, or `defaultValue` otherwise. It is equivalent to `observable.select(val =\u003e val ?? defaultValue)`. This is especially useful in combination with `onlyIf()` to provide a default value if current value does not initially pass the predicate.\n\n```ts\nconst userLocation = observable\u003cstring | null\u003e(null);\nconst lastSeenLocation = userLocation.onlyIf(it =\u003e !!it).default(\"Unknown\");\nassert.equal(lastSeenLocation.get(), \"Unknown\");\n\nuserLocation.set(\"Paris\");\nassert.equal(lastSeenLocation.get(), \"Paris\");\n\nuserLocation.set(null);\nassert.equal(lastSeenLocation.get(), \"Paris\");\n\nuserLocation.set(\"Bordeaux\");\nassert.equal(lastSeenLocation.get(), \"Bordeaux\");\n```\n\n#### Observable.toPromise()\n\nConvert the observable into a promise. The promise will be resolved the next time the observable changes. This is especially useful in order to `await` a change from an observable.\n\n```ts\nconst age = observable(34);\n(async () =\u003e {\n  await age.toPromise();\n  console.log(\"Happy Birthday!\");\n})();\nage.set(35);\n```\n\n### Static Methods\n\n#### Observable.select([observable1, observable2, ...], selector: (val1, val2...) =\u003e selectedValue)\n\nTake several observables and transform them into a single observable with the result of the given selector applied on the input values. Each time one of the input observables changes, the returned observable will reflect this changes. This is a more generic version of the `observable.select()` instance method, that can takes several observables.\n\n```ts\nconst author = observable(\"Shakespeare\");\nconst book = observable(\"Hamlet\");\nconst bookWithAuthor = Observable.select([author, book], (a, b) =\u003e ({\n  title: b,\n  author: a,\n}));\nassert.deepEqual(bookWithAuthor.get(), { title: \"Hamlet\", author: \"Shakespeare\" });\n\nbook.set(\"Romeo and Juliet\");\nassert.deepEqual(bookWithAuthor.get(), { title: \"Romeo and Juliet\", author: \"Shakespeare\" });\n\nauthor.set(\"Kipling\");\nbook.set(\"The Jungle Book\");\nassert.deepEqual(bookWithAuthor.get(), { title: \"The Jungle Book\", author: \"Kipling\" });\n```\n\n#### Observable.merge(observables)\n\nTransform an array of observables into a single observable containing an array with the values from each observable.\n\n```ts\nconst booksWithId = [\n  { id: 1, book: observable(\"The Jungle Book\") },\n  { id: 2, book: observable(\"Pride and Prejudice\") },\n  { id: 3, book: observable(\"Hamlet\") },\n];\nconst books = Observable.merge(booksWithId.map(it =\u003e it.book));\nassert.deepEqual(books.get(), [\"The Jungle Book\", \"Pride and Prejudice\", \"Hamlet\"]);\n```\n\n#### Observable.latest(observable1, observable2, ...)\n\nTake several observables and transform them into a single observable containing the value from the last-modified observable. The returned observable is initialized with the value from the first given observable.\n\n```ts\nconst lastMovie = observable(\"Minority Report\");\nconst lastTvShow = observable(\"The Big Bang Theory\");\nconst lastWatched = Observable.latest(lastMovie, lastTvShow);\nassert.equal(lastWatched.get(), \"Minority Report\");\n\nlastTvShow.set(\"Game of Thrones\");\nassert.equal(lastWatched.get(), \"Game of Thrones\");\n\nlastMovie.set(\"Forrest Gump\");\nassert.equal(lastWatched.get(), \"Forrest Gump\");\n```\n\n#### Observable.compute(compute: () =\u003e value)\n\n`Observable.compute()` is your **silver bullet** when it is too difficult to create a new observable with the usual `select()`, `onlyIf()` or `latest()` methods. It is especially useful when dealing with complex data structures. It takes a function that computes a new value by directly accessing values from other observables and it returns a new observable containing the result of this computation.\n\n**How it works:** Each time the observable is evaluated, it calls the provided `compute` function and automatically tracks the observables that are used during the computation (i.e. those on which `get()` is getting called). It then registers these observables as input, ensuring that the new observable is updated each time one of them changes. If you are familiar with MobX, it works the same way as the `@computed` observables.\n\n**Note:** There is a slight performance impact of using `Observable.compute()` as it has to track and update the inputs dynamically. But unless you're dealing with thousands of computed observables, it should not be noticeable.\n\n```ts\nconst authors = new Map([\n  [0, observable(\"Kipling\")],\n  [1, observable(\"Shakespeare\")],\n  [2, observable(\"Austen\")],\n]);\nconst books = observable([\n  { title: \"The Jungle Book\", authorId: 0 },\n  { title: \"Pride and Prejudice\", authorId: 2 },\n  { title: \"Persuasion\", authorId: 2 },\n]);\nconst booksWithAuthors = Observable.compute(() =\u003e\n  books.get().map(book =\u003e ({ title: book.title, author: authors.get(book.authorId).get() }))\n);\nassert.deepEqual(booksWithAuthors.get(), [\n  { title: \"The Jungle Book\", author: \"Kipling\" },\n  { title: \"Pride and Prejudice\", author: \"Austen\" },\n  { title: \"Persuasion\", author: \"Austen\" },\n]);\n```\n\n#### Observable.fromPromise(promise, onError?: (error) =\u003e value)\n\nConvert the promise into an observable. The observable is initialized with `undefined` and will be updated with the value of the promise when it is resolved. If the promise is rejected, the optional `onError` function is called with the error and should return the value to assign to the observable. If no `onError` function is provided, the observable keeps its `undefined` value.\n\n```tsx\nasync function fetchBook(title: string): Promise\u003cBook\u003e {\n  // ...\n}\n\nconst book = Observable.fromPromise(fetchBook(\"The Jungle Book\"));\nassert.equal(book.get(), undefined);\nbook.subscribe(book =\u003e console.log(`Retrieved book: ${book}));\n```\n\n#### Observable.batch(block: () =\u003e void)\n\nGroup together several observable modifications. It ensures that listeners from any derived observable are only called once which might be useful for data consistency or for performance.\n\nAdditionally, if React batching is enabled, it batches re-renders together. You can learn more about React batching and how to enable it [here](#react-batching).\n\n```tsx\nconst numbers = [...Array(10)].map((_, index) =\u003e observable(index));\nconst total = Observable.merge(numbers).select(num =\u003e num.reduce((a, b) =\u003e a + b));\nexpect(total.get()).toStrictEqual(45);\n\n// Listeners of \"total\" will only be called once, with the final result.\n// Without batching(), it would have been called 10 times\ntotal.subscribe(val =\u003e assert.equal(val, 65));\nObservable.batch(() =\u003e numbers.forEach(num =\u003e num.update(it =\u003e it + 1)));\n```\n\n## React Integration\n\n### Hooks\n\n#### useObservable(observable)\n\nReturn the value of the observable and trigger a re-render when the value changes.\n\n```tsx\nconst TodoList: React.FC = () =\u003e {\n  const todos = useObservable(todoService.todos);\n  return (\n    \u003cdiv\u003e\n      {todos.map((todo, index) =\u003e (\n        \u003cTodoItem key={index} todo={todo} /\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n```\n\n#### useMemoizedObservable(factory: () =\u003e Observable, deps: any[])\n\nShortcut for `useObservable(useMemo(factory, deps))`. Return the value of the observable created by the `factory` parameter and automatically trigger a re-render when its value changes.\n\nThe `factory` function is evaluated each time one of the values in `deps` changes. If unspecified, `deps` defaults to `[]`, resulting in the `factory` function being called only once.\n\n**Note:** `useMemoizedObservable()` is an optimized version of `useObservable()` that avoids recreating a new observable and reevaluating it at each render. Most of the time, you actually don't even need it, creating an observable is a fast operation and if your observable evaluation does not require heavy computation, you can use `useObservable()` directly instead.\n\n```tsx\ntype User = { id: string; displayName: string };\ntype Todo = { text: string; completed: boolean; assigneeId: string };\n\nclass TodoService {\n  private _todos = observable\u003creadonly Todo[]\u003e([]);\n\n  readonly todos = this._todos.readOnly();\n\n  getTodosAssignedTo(assigneeId: string): Observable\u003cTodo[]\u003e {\n    return this._todos.select(todos =\u003e todos.filter(it =\u003e it.assigneeId === assigneeId));\n  }\n}\n\nconst TodoList: React.FC\u003c{ assigneeId: string }\u003e = ({ assigneeId }) =\u003e {\n  const todos = useMemoizedObservable(() =\u003e todoService.getTodosAssignedTo(assigneeId), [assigneeId]);\n  return (\n    \u003cdiv\u003e\n      \u003cul\u003e\n        {todos.map((todo, index) =\u003e (\n          \u003cTodoItem key={index} todo={todo} index={index} /\u003e\n        ))}\n      \u003c/ul\u003e\n    \u003c/div\u003e\n  );\n};\n```\n\n#### useComputedObservable(compute: () =\u003e value, deps?: any[])\n\nShortcut for `useMemoizedObservable(() =\u003e Observable.compute(compute), deps))`. Create a new observable with `Observable.compute()` and automatically trigger a re-render when the result of the `compute` function changes.\n\nThe observable is recreated each time one of the values in `deps` changes. If unspecified, `deps` defaults to `[]`, resulting in the observable being created only once.\n\n### Higher Order Component\n\n#### withObservables(Component, mapping): InjectedComponent\n\nHooks cannot be used in class components. In this case, you can use the `withObservables` HOC in order to inject values from observables into props of a component. It works the same as Redux's `connect()` function as it takes a component and a props-to-observables mapping.\n\n`mapping` can either be a plain mapping object of the form `{ props1: observable1, props2: observable2 }`, or it can be a function taking the `ownProps` of the component and returning a plain mapping object.\n\n```tsx\ninterface Props {\n  assigneeId: string;\n}\n\ninterface InjectedProps {\n  readonly todos: Todo[];\n}\n\nclass TodoList extends React.Component\u003cProps \u0026 InjectedProps\u003e {\n  render() {\n    return (\n      \u003cdiv\u003e\n        \u003cul\u003e\n          {todos.map((todo, index) =\u003e (\n            \u003cTodoItem key={index} todo={todo} index={index} /\u003e\n          ))}\n        \u003c/ul\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n\nconst mapping = (ownProps: Props) =\u003e ({\n  todos: todoService.getTodosAssignedTo(ownProps.assigneeId),\n});\n\nexport default withObservables(TodoList, mapping);\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetomorrow%2Fmicro-observables","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbetomorrow%2Fmicro-observables","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbetomorrow%2Fmicro-observables/lists"}