{"id":24998031,"url":"https://github.com/riennevaplus/stencil-reflector","last_synced_at":"2025-07-07T12:10:43.808Z","repository":{"id":57370747,"uuid":"173411613","full_name":"RienNeVaPlus/stencil-reflector","owner":"RienNeVaPlus","description":"🔌 Reflect decorated properties of classes back to stencil components in order to keep them synchronized","archived":false,"fork":false,"pushed_at":"2022-08-12T11:07:26.000Z","size":30,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-29T13:45:38.680Z","etag":null,"topics":["mobx","observable","observe","redux","reflect","state","state-management","stencil","stencil-mobx","stenciljs","store","sync","synchronize"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RienNeVaPlus.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-03-02T06:22:47.000Z","updated_at":"2022-08-12T11:07:29.000Z","dependencies_parsed_at":"2022-08-29T18:31:26.177Z","dependency_job_id":null,"html_url":"https://github.com/RienNeVaPlus/stencil-reflector","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/RienNeVaPlus/stencil-reflector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RienNeVaPlus%2Fstencil-reflector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RienNeVaPlus%2Fstencil-reflector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RienNeVaPlus%2Fstencil-reflector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RienNeVaPlus%2Fstencil-reflector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RienNeVaPlus","download_url":"https://codeload.github.com/RienNeVaPlus/stencil-reflector/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RienNeVaPlus%2Fstencil-reflector/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264075705,"owners_count":23553512,"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":["mobx","observable","observe","redux","reflect","state","state-management","stencil","stencil-mobx","stenciljs","store","sync","synchronize"],"created_at":"2025-02-04T17:38:25.896Z","updated_at":"2025-07-07T12:10:38.799Z","avatar_url":"https://github.com/RienNeVaPlus.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./reflector-logo.png\" alt=\"stencil-reflector\" /\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003e\n    stencil-reflector\n\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n    Reflects properties decorated with \u003ccode\u003e@reflect\u003c/code\u003e back to their parent \u003ca href=\"https://stenciljs.com/\"\u003estencil\u003c/a\u003e component.\n\u003c/p\u003e\n\n## Why reflect?\n\u003e Stencil only compares references for changes, and will not re-render when data inside of an array or object changes. [ [1]](https://stenciljs.com/docs/reactive-data)\n\n`stencil-reflector` is a minimalistic approach of solving the synchronisation issues when working with instances as properties of stencil web components.\n\n*Properties decorated with `@reflect` will cause the component to re-render. And that's about it.*\n\n## Install\n    npm install stencil-reflector --save-dev\n    \n*...or copy the decorator from `index.ts`, it's just a few lines of code.*\n\nThe latest version works with Stencil `\u003e=2`. For Stencil 1, use `0.0.6`.\n\n## Example\n**Todo.ts**\n```tsx\nclass Todo extends Reflector {\n    @reflect text: string\n    @reflect isDone: boolean\n    \n    complete(){\n        // will re-render \u003cmy-component/\u003e\n        this.isDone = true\n    }\n}\n```\n\n**my-components.ts**\n```jsx\n@Component({\n    tagName: 'my-component'\n})\nexport class MyComponent {\n    @Element() el: HTMLStencilElement\n    \n    todo: Todo\n    \n    componenWillLoad(){\n        // instances of Reflector require the components element as first parameter\n        this.todo = new Todo(this.el, {\n            text: 'Implement stencil-reflector',\n            isDone: false\n        })\n    }\n    \n    render(){\n        return [\n            todo.text,\n            todo.isDone ? 'completed' :\n                \u003cinput type=\"checkbox\" onInput={() =\u003e todo.complete()} /\u003e\n        ]\n    }\n}\n```\n\n## API\n\n\n### `@reflect`\nIndicates that any change on the property should reflect back to the component. Requires the instance to have the component assigned to `this.el`.\n\n### `Reflector`\nCan be used to inherit classes from, but is not required as long as `this.el` equals the `HTMLStencilElement`.\n\n```ts\nclass Todo extends Reflector {}\nconst todo = new Todo(myComponentElement)\nconsole.log('Will reflect decorated properties to:', todo.el)\n```\n\n\n\n### Thanks to\n- [stencil](https://github.com/ionic-team/stencil)\n- [RomkeVdMeulen](https://gist.github.com/RomkeVdMeulen/e45ee89ce848e7fda140635a4d29892b)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friennevaplus%2Fstencil-reflector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Friennevaplus%2Fstencil-reflector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Friennevaplus%2Fstencil-reflector/lists"}