{"id":13447534,"url":"https://github.com/ElliotNB/observable-slim","last_synced_at":"2025-03-22T01:31:05.416Z","repository":{"id":22949348,"uuid":"93588638","full_name":"ElliotNB/observable-slim","owner":"ElliotNB","description":"Observable Slim is a singleton that utilizes ES6 Proxies to observe changes made to an object and any nested children of that object. It is intended to assist with state management and one-way data binding.","archived":false,"fork":false,"pushed_at":"2023-02-10T21:16:06.000Z","size":1125,"stargazers_count":288,"open_issues_count":19,"forks_count":52,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-04-15T08:08:17.729Z","etag":null,"topics":["data-binding","es6-proxies","javascript","nested-objects","observable","proxy","state-management"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/ElliotNB.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}},"created_at":"2017-06-07T03:29:24.000Z","updated_at":"2024-04-14T09:43:16.000Z","dependencies_parsed_at":"2023-01-13T22:30:21.985Z","dependency_job_id":"2b0604b3-e8c4-43dd-917b-48d7ce83ecc1","html_url":"https://github.com/ElliotNB/observable-slim","commit_stats":{"total_commits":103,"total_committers":9,"mean_commits":"11.444444444444445","dds":"0.18446601941747576","last_synced_commit":"3d96c83424927eb71893c793c65aad7247cd78aa"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElliotNB%2Fobservable-slim","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElliotNB%2Fobservable-slim/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElliotNB%2Fobservable-slim/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ElliotNB%2Fobservable-slim/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ElliotNB","download_url":"https://codeload.github.com/ElliotNB/observable-slim/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244893416,"owners_count":20527585,"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","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":["data-binding","es6-proxies","javascript","nested-objects","observable","proxy","state-management"],"created_at":"2024-07-31T05:01:20.288Z","updated_at":"2025-03-22T01:31:05.090Z","avatar_url":"https://github.com/ElliotNB.png","language":"JavaScript","readme":"# :eyes: Observable Slim\n\n[![Build Status](https://app.travis-ci.com/ElliotNB/observable-slim.svg?branch=master)](https://app.travis-ci.com/ElliotNB/observable-slim) [![Coverage Status](https://coveralls.io/repos/github/ElliotNB/observable-slim/badge.svg)](https://coveralls.io/github/ElliotNB/observable-slim) [![Monthly Downloads](https://img.shields.io/npm/dm/observable-slim.svg)](https://www.npmjs.com/package/observable-slim)\n\nhttps://github.com/elliotnb/observable-slim\n\nVersion 0.1.6\n\nLicensed under the MIT license:\n\nhttp://www.opensource.org/licenses/MIT\n\n## Overview\nObservable Slim is a singleton that utilizes ES6 Proxies to observe changes made to an object and any nested children of that object. Observable Slim aspires to be as highly performant and lightweight as possible. Minifies down to 5KB.\n\nObservable Slim was originally built as part of the **[Nimbly](https://github.com/elliotnb/nimbly)** JS framework where it assisted with state management, state mutation triggers and one-way data binding. Observerable Slim was separated out from Nimbly in order to service other use cases outside of the scope of the **[Nimbly](https://github.com/elliotnb/nimbly)** framework.\n\n## Install\n\n```html\n\u003cscript src=\"observable-slim.js\"\u003e\u003c/script\u003e\n```\n\nAlso available via NPM:\n\n```\n$ npm install observable-slim --save\n```\n\n## Usage\n\n### Create an observer\n\nThe `create` method is the starting point for using Observable Slim. It is invoked to create a new ES6 `Proxy` whose changes we can observe. The `create` method accepts three parameters:\n\n1. `target` (`object`, *required*): plain object that we want to observe for changes.\n2. `domDelay` (`boolean|number`, *required*): if `true`, then the observed changes to `target` will be batched up on a 10ms delay (via `setTimeout()`). If `false`, then the `observer` function will be immediately invoked after each individual change made to `target`. It is helpful to set `domDelay` to `true` when your `observer` function makes DOM manipulations (fewer DOM redraws means better performance). If a number greater than zero, then it defines the DOM delay in milliseconds.\n3. `observer` (`function(ObservableSlimChange[])`, *optional*): function that will be invoked when a change is made to the proxy of `target`. When invoked, this function is passed a single argument: an array of `ObservableSlimChange` detailing each change that has been made. The `ObservableSlimChange` object structure is like below:\n\t- `type` (`\"add\"|\"update\"|\"delete\"`, *required*): change type.\n\t- `property` (`string`, *required*): property name.\n\t- `currentPath` (`string`, *required*): property path with the dot notation (e.g. `foo.0.bar`).\n\t- `jsonPointer` (`string`, *required*): property path with the JSON pointer syntax (e.g. `/foo/0/bar`). See [RFC 6901](https://datatracker.ietf.org/doc/html/rfc6901).\n\t- `target` (`object`, *required*): target object.\n\t- `proxy` (`Proxy`, *required*): proxy of the target object.\n\t- `newValue` (`*`, *required*): new value of the property.\n\t- `previousValue` (`*`, *optional*): previous value of the property.\n\nThe `create` method will return a standard ES6 `Proxy`.\n\n```javascript\nvar test = {};\nvar p = ObservableSlim.create(test, true, function(changes) {\n\tconsole.log(JSON.stringify(changes));\n});\n\np.hello = \"world\";\n// Console log:\n// [{\"type\":\"add\",\"target\":{\"hello\":\"world\"},\"property\":\"hello\",\"newValue\":\"world\",\"currentPath\":\"hello\",\"jsonPointer\":\"/hello\",\"proxy\":{\"hello\":\"world\"}}]\n\np.hello = \"WORLD\";\n// Console log:\n// [{\"type\":\"update\",\"target\":{\"hello\":\"WORLD\"},\"property\":\"hello\",\"newValue\":\"WORLD\",\"previousValue\":\"world\",\"currentPath\":\"hello\",\"jsonPointer\":\"/hello\",\"proxy\":{\"hello\":\"WORLD\"}}]\n\np.testing = {};\n// Console log:\n// [{\"type\":\"add\",\"target\":{\"hello\":\"WORLD\",\"testing\":{}},\"property\":\"testing\",\"newValue\":{},\"currentPath\":\"testing\",\"jsonPointer\":\"/testing\",\"proxy\":{\"hello\":\"WORLD\",\"testing\":{}}}]\n\np.testing.blah = 42;\n// Console log:\n// [{\"type\":\"add\",\"target\":{\"blah\":42},\"property\":\"blah\",\"newValue\":42,\"currentPath\":\"testing.blah\",\"jsonPointer\":\"/testing/blah\",\"proxy\":{\"blah\":42}}]\n\np.arr = [];\n// Console log:\n// [{\"type\":\"add\",\"target\":{\"hello\":\"WORLD\",\"testing\":{\"blah\":42},\"arr\":[]},\"property\":\"arr\",\"newValue\":[],\"currentPath\":\"arr\",\"jsonPointer\":\"/arr\",\"proxy\":{\"hello\":\"WORLD\",\"testing\":{\"blah\":42},\"arr\":[]}}]\n\np.arr.push(\"hello world\");\n// Console log:\n// [{\"type\":\"add\",\"target\":[\"hello world\"],\"property\":\"0\",\"newValue\":\"hello world\",\"currentPath\":\"arr.0\",\"jsonPointer\":\"/arr/0\",\"proxy\":[\"hello world\"]}]\n\ndelete p.hello;\n// Console log:\n// [{\"type\":\"delete\",\"target\":{\"testing\":{\"blah\":42},\"arr\":[\"hello world\"]},\"property\":\"hello\",\"newValue\":null,\"previousValue\":\"WORLD\",\"currentPath\":\"hello\",\"jsonPointer\":\"/hello\",\"proxy\":{\"testing\":{\"blah\":42},\"arr\":[\"hello world\"]}}]\n\np.arr.splice(0,1);\n// Console log:\n// [{\"type\":\"delete\",\"target\":[],\"property\":\"0\",\"newValue\":null,\"previousValue\":\"hello world\",\"currentPath\":\"arr.0\",\"jsonPointer\":\"/arr/0\",\"proxy\":[]},\n// {\"type\":\"update\",\"target\":[],\"property\":\"length\",\"newValue\":0,\"previousValue\":1,\"currentPath\":\"arr.length\",\"jsonPointer\":\"/arr/length\",\"proxy\":[]}]\n\nconsole.log(JSON.stringify(test));\n// Console log:\n// {\"testing\":{\"blah\":42},\"arr\":[]}\n\n```\n\n### Nested objects\n\nIf you wish to observe changes on a parent object and observe changes to an object nested on the parent, you may do so as follows:\n```javascript\nvar data = {\"testing\":{\"test\":{\"testb\":\"hello world\"},\"testc\":\"hello again\"},\"blah\":\"tree\"};\n\nvar p = ObservableSlim.create(data, true, function(changes) { console.log(\"First observable\");console.log(changes); });\nvar pp = ObservableSlim.create(data.testing, true, function(changes) { console.log(\"Second observable\");console.log(changes); });\nvar ppp = ObservableSlim.create(data.testing.test, true, function(changes) { console.log(\"Third observable\");console.log(changes); });\n```\n\n- A change to `ppp.testb` will trigger the callback on all three observables.\n- A change to `p.testing.test.testb` will also trigger the callback on all three observables.\n- A change to `pp.testc` will only trigger the first and second observable.\n- A change to `p.blah` will only trigger the first observable.\n\n### Add observers\n\nIf you wish to add a second observer function to the same object, you may do so as follows:\n```javascript\n\n// First, create the observable\nvar test = {};\nvar proxy = ObservableSlim.create(test, true, function(changes) {\n\tconsole.log(JSON.stringify(changes));\n});\n\n// Add a new observer function\nObservableSlim.observe(proxy, function(changes) {\n\tconsole.log(changes);\n});\n```\n\n### Pause observers\n\nIf you wish to pause the execution of observer functions, you may do so as follows:\n```javascript\nObservableSlim.pause(proxy);\n```\n\n### Resume observers\n\nWhile an observable is paused, no observer functions will be invoked when the target object is modified.\n\nTo resume the execution of observer functions:\n\n```javascript\nObservableSlim.resume(proxy);\n```\n\n### Pause changes\n\nIf you wish to pause changes to the target data without pausing the execution of the observer functions, you may do so as follows:\n```javascript\nObservableSlim.pauseChanges(proxy);\n```\n\n### Resume changes\n\nWhile an observable has changes paused, all observer functions will be invoked, but the target object will not be modified.\n\nTo resume changes:\n\n```javascript\nObservableSlim.resumeChanges(proxy);\n```\n\n### Remove an observable\n\nWhen you no longer need to use an observable or monitor the object that it targets, you may remove the observable as follows:\n\n```javascript\nObservableSlim.remove(proxy);\n```\n\n## Special features\n\n### Proxy check\n\nWhen using ObservableSlim, you can quickly determine whether or not an object is a proxy by checking the `__isProxy` property:\n\n```javascript\nvar test = {\"hello\":\"world\"};\nvar proxy = ObservableSlim.create(test, true, function(changes) {\n\tconsole.log(JSON.stringify(changes));\n});\n\nconsole.log(proxy.__isProxy); // returns true\nconsole.log(test.__isProxy); // undefined property\n```\n\n### Look up the original proxied target object\n\nObservableSlim allows you to easily fetch a reference to the original object behind a given proxy using the `__getTarget` property:\n\n```javascript\n\nvar test = {\"hello\":{\"foo\":{\"bar\":\"world\"}}};\nvar proxy = ObservableSlim.create(test, true, function(changes) {});\n\nconsole.log(proxy.__getTarget === test); // returns true\n\n```\n\n### Look up a parent object from a child object\n\nObservableSlim allows you to traverse up from a child object and access the parent object:\n\n```javascript\n\nvar test = {\"hello\":{\"foo\":{\"bar\":\"world\"}}};\nvar proxy = ObservableSlim.create(test, true, function(changes) {\n\tconsole.log(JSON.stringify(changes));\n});\n\nfunction traverseUp(childObj) {\n\tconsole.log(JSON.stringify(childObj.__getParent())); // prints out test.hello: {\"foo\":{\"bar\":\"world\"}}\n\tconsole.log(childObj.__getParent(2)); // attempts to traverse up two levels, returns undefined because test.hello does not have a parent object\n};\n\ntraverseUp(proxy.hello.foo);\n```\n\n**Note:** This functionality is not supported by the ES5 Proxy polyfill.\n\n### Retrieve the path of an object relative to the top-level observer\n\nObservablesSlim also allows you to retrieve the full path of an object relative to the top-level observed object:\n\n```javascript\nvar data = {\"foo\":\"bar\",\"arr\":[{\"test\":{}}],\"test\":{\"deeper\":{}}};\nvar p = ObservableSlim.create(data, false, function(changes) {});\n\nconsole.log(p.test.deeper.__getPath); // logs \"test.deeper\"\n\n```\n\n**Note:** This functionality is not supported by the ES5 Proxy polyfill.\n\n## Requirements\n\nFor full functionality, Observable Slim requires [ES6 `Proxy`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).\n\nAs of August 2017, ES6 `Proxy` is supported by Chrome 49+, Edge 12+, Firefox 18+, Opera 36+ and Safari 10+. Internet Explorer does not support ES6 `Proxy`.\n\n### ES5 Proxy polyfill (IE11 support) ###\n\nObservableSlim now offers limited support for ES5 browsers or browsers without native Proxy (most motably IE11) through the integration of a forked version of the [Google Chrome Proxy polyfill](https://github.com/GoogleChrome/proxy-polyfill).\n\nThe forked version of the Proxy polyfill (contained within this repo) differs from the original Polyfill by adding support for the array mutation methods: `push`, `pop`, `shift`, `unshift`, `splice`, `sort`, and `reverse`.\n\n#### Limitations ####\n\nBecause the Proxy polyfill does not (and will never) fully emulate native ES6 `Proxy`, there are certain use cases that will not work when using Observable Slim with the Proxy polyfill:\n\n1. Object properties must be known at creation time. New properties cannot be added later.\n2. Modifications to `.length` cannot be observed.\n3. Array re-sizing via a `.length` modification cannot be observed.\n4. Property deletions (e.g., `delete proxy.property;`) cannot be observed.\n\nArray mutations **can** be observed through the use of the array mutation methods listed above.\n\n## Contributing\n\nContributions are most welcome!\n\nPlease be sure to run the commands below against your code before submitting a pull request:\n- `npm run test`: run unit tests.\n- `npm run type`: generate the `d.ts` file for TypeScript declarations.\n- `npm run lint`: analyze the code to quickly find problems.\n- `npm run lint:fix`: fix the problems potentially fixable detected by `npm run lint`.\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElliotNB%2Fobservable-slim","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FElliotNB%2Fobservable-slim","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FElliotNB%2Fobservable-slim/lists"}