{"id":13532963,"url":"https://github.com/Exelord/solid-proxies","last_synced_at":"2025-04-01T21:31:29.381Z","repository":{"id":38230467,"uuid":"461458947","full_name":"Exelord/solid-proxies","owner":"Exelord","description":"Solid.js library adding signaling to built-in non-primitives","archived":false,"fork":false,"pushed_at":"2025-01-03T16:44:42.000Z","size":466,"stargazers_count":63,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-25T23:35:24.958Z","etag":null,"topics":["javascript","solidjs"],"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/Exelord.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":"2022-02-20T10:56:00.000Z","updated_at":"2025-02-19T14:26:19.000Z","dependencies_parsed_at":"2024-09-08T19:48:25.754Z","dependency_job_id":"9b1cd7cf-b7ad-4188-85d8-cbd5742e3464","html_url":"https://github.com/Exelord/solid-proxies","commit_stats":{"total_commits":66,"total_committers":2,"mean_commits":33.0,"dds":"0.030303030303030276","last_synced_commit":"f6f4302c9eef74d91aa0cf3dffd534e416109994"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Exelord%2Fsolid-proxies","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Exelord%2Fsolid-proxies/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Exelord%2Fsolid-proxies/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Exelord%2Fsolid-proxies/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Exelord","download_url":"https://codeload.github.com/Exelord/solid-proxies/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246423729,"owners_count":20774820,"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":["javascript","solidjs"],"created_at":"2024-08-01T07:01:15.394Z","updated_at":"2025-04-01T21:31:29.361Z","avatar_url":"https://github.com/Exelord.png","language":"TypeScript","funding_links":[],"categories":["📦 Components \u0026 Libraries"],"sub_categories":["Helpers"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg height=\"400\" src=\"https://raw.githubusercontent.com/exelord/solid-proxies/main/logo.png\" alt=\"Solid Proxies logo\" /\u003e\n\u003c/p\u003e\n\n# Solid Proxies\n\nSolid Proxies is a JavaScript library that provides signaled versions of JavaScript's built-in objects. This means that all changes to the properties of these objects will be automatically tracked when using the standard API. For example, operations like `array.push`, `array.slice`, or direct index access like `person['name']` will only trigger an update of specific values. This granular reactivity ensures that your effects will not rerun unnecessarily.\n\n## Table of Contents\n\n- [Solid Proxies](#solid-proxies)\n  - [Table of Contents](#table-of-contents)\n  - [Installation](#installation)\n  - [Compatibility](#compatibility)\n  - [Demo](#demo)\n  - [Usage](#usage)\n    - [SignaledObject](#signaledobject)\n    - [SignaledArray](#signaledarray)\n\n## Installation\n\n```\nnpm install solid-proxies\n```\n\n## Compatibility\n\n- Solid.js ^1.0\n\n## Demo\n\nCodeSandbox demo: [Link](https://codesandbox.io/s/solid-proxies-pt2slm)\n\n## Usage\n\n### SignaledObject\n\nSignaledObject is a variant of the standard JavaScript `Object` type that automatically tracks changes to its properties. This means that any operation that modifies the properties of a `SignaledObject`, such as setting a new value, deleting a property, or checking the keys of the object, will trigger an update and make your code react to the change.\n\nTo use `SignaledObject`, you can import the `createObject` function from the solid-proxies library:\n\n```js\nimport { createObject } from 'solid-proxies';\n```\n\nThen, you can create a new SignaledObject by calling createObject and passing in an object literal as an argument (optionally):\n\n```js\nconst user = createObject({ name: \"Maciej\" });\n```\n\nYou can then use the SignaledObject like a normal JavaScript object, but any changes you make to its properties will be tracked and can be reacted to by your code. For example:\n\n```js\ncreateEffect(() =\u003e {\n  console.log(user.name);\n});\n\n// After some time...\nuser.name = \"Exelord\"; // This change will rerun the effect\n```\n\n**Important:** SignaledObjects are not deep wrapped. This means that an object within a SignaledObject would need to be signaled individually.\n\nHere is an example of how you can use SignaledObject to track changes to a nested object:\n\n```js\nconst user = createObject({\n  name: \"Maciej\",\n  address: createObject({\n    city: \"New York\",\n    country: \"USA\"\n  })\n});\n\ncreateEffect(() =\u003e {\n  console.log(user.address.city);\n});\n\n// After some time...\nuser.address.city = \"London\"; // This change will rerun the effect\n```\n\n### SignaledArray\n\nSignaledArray is a variant of the standard JavaScript `Array` type that automatically tracks changes to its elements. This means that any operation that modifies the elements of a `SignaledArray`, such as setting a new value, deleting an element, or adding a new element, will trigger an update and make your code react to the change.\n\nTo use `SignaledArray`, you can import the `createArray` function from the solid-proxies library:\n\n```js\nimport { createArray } from 'solid-proxies';\n```\n\nThen, you can create a new SignaledArray by calling createArray and passing in an array literal as an argument:\n\n```js\nconst users = createArray([{ name: \"Maciej\" }]);\n```\n\nYou can then use the SignaledArray like a normal JavaScript array, but any changes you make to its elements will be tracked and can be reacted to by your code. For example:\n\n```js\ncreateEffect(() =\u003e {\n  console.log(users[0].name);\n});\n\n// After some time...\nusers[0] = { name: \"Exelord\" }; // This change will rerun the effect\n```\n\n**Important:** SignaledArrays are not deep wrapped. This means that an array or object within a SignaledArray would need to be signaled individually.\n\nHere is an example of how you can use SignaledArray to track changes to a nested array:\n\n```js\nconst users = createArray([\n  {\n    name: \"Maciej\",\n    favoriteColors: [\"red\", \"blue\"]\n  }\n]);\n\ncreateEffect(() =\u003e {\n  console.log(users[0].favoriteColors[0]);\n});\n\n// After some time...\nusers[0].favoriteColors[0] = \"green\"; // This change will NOT rerun the effect\n\n// To track changes to the favoriteColors array itself, you would need to create a new\n// SignaledArray for it:\nusers[0].favoriteColors = createArray([\"yellow\", \"purple\"]);\n\n// And then...\nusers[0].favoriteColors[0] = \"green\"; // This change WILL rerun the effect\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FExelord%2Fsolid-proxies","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FExelord%2Fsolid-proxies","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FExelord%2Fsolid-proxies/lists"}