{"id":21540068,"url":"https://github.com/jsveron23/scu-inspector","last_synced_at":"2025-04-10T03:30:20.557Z","repository":{"id":143907859,"uuid":"122853748","full_name":"jsveron23/scu-inspector","owner":"jsveron23","description":"Displaying props changes of React shouldComponentUpdate","archived":false,"fork":false,"pushed_at":"2018-03-01T06:54:15.000Z","size":239,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-01T16:33:26.749Z","etag":null,"topics":["decorator","es2017","inspector","mit","props","react","scu","scu-inspector","shouldcomponentupdate"],"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/jsveron23.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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":"2018-02-25T16:30:07.000Z","updated_at":"2018-03-09T09:59:38.000Z","dependencies_parsed_at":null,"dependency_job_id":"fda1c111-6fac-4665-8201-734edb060714","html_url":"https://github.com/jsveron23/scu-inspector","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"20ace00ef24274f9dd1e02583deea99c4c56896c"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsveron23%2Fscu-inspector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsveron23%2Fscu-inspector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsveron23%2Fscu-inspector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsveron23%2Fscu-inspector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsveron23","download_url":"https://codeload.github.com/jsveron23/scu-inspector/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248150621,"owners_count":21055955,"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":["decorator","es2017","inspector","mit","props","react","scu","scu-inspector","shouldcomponentupdate"],"created_at":"2024-11-24T04:17:19.235Z","updated_at":"2025-04-10T03:30:20.491Z","avatar_url":"https://github.com/jsveron23.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# scu-inspector\n\n[![npm](https://img.shields.io/npm/v/scu-inspector.svg)](https://www.npmjs.com/package/scu-inspector) [![npm](https://img.shields.io/npm/l/scu-inspector.svg)](https://www.npmjs.com/package/scu-inspector)\n[![Build Status](https://travis-ci.org/jsveron23/scu-inspector.svg?branch=master)](https://travis-ci.org/jsveron23/scu-inspector)\n\nDisplaying props changes of React component by using ES2017 decorator on  'shouldComponentUpdate'. And it is designed to use by single component. If you want to apply every React components on your application by using once, use '[why-did-you-update](https://github.com/maicki/why-did-you-update)'.\n\n## Getting Started\n\nI used to display by using console.log for checking prop changes in Console tab. But it was hard to recognize what was changed or not. So, I implemented module to check as table view in Console tab. It does not display after filtered to not render in SCU. So you can just check what props were not apply by filtered.\n\nPlease, write [issue](https://github.com/jsveron23/scu-inspector/issues) or PR, if you have any feedback.\n\n### Prerequisites\n\nYou may need to install 'babel-plugin-transform-decorators-legacy' to use ES2017 Decorator.\n\n```bash\nnpm install --save-dev babel-plugin-transform-decorators-legacy\n```\n\n**Babel**\n\n```JSON\n\"plugins\": [\n  \"transform-decorators-legacy\"\n]\n```\n\n### Installation\n\n```bash\nnpm install --save scu-inspector\n```\n\n### Screenshot\n\n![Screenshot](screenshot.png)\n\n### Usage\n\n```javascript\nimport scuInspector from 'scu-inspector'\n\n// with options\n@scuInspector({\n  // [optional] display props changes\n  mode: 'changed', // all(default), changed, none\n\n  // [optional] default display name will be using component name\n  // but if you want to use unique string to recognize among components\n  uniqueKey: 'position', // key name of props\n\n  // [optional] it displays in Development Tool as console.table\n  // default is false\n  isCollapsed: true,\n\n  // [optional]\n  // logs off in production by default\n  // but you can turn it off or not manually\n  // default is true\n  debug: false,\n\n  // [optional] show specific keys of props\n  // ignoring exclude\n  include: ['name', 'homepage'],\n\n  // [optional] hide specific keys of props\n  exclude: ['age', 'address', 'location']\n})\nshouldComponentUpdate (nextProps) {\n  ...\n}\n\n// without options\n@scuInspector()\nshouldComponentUpdate (nextProps) {\n  ...\n}\n```\n\n## License\n\n[MIT](LICENSE.md)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsveron23%2Fscu-inspector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsveron23%2Fscu-inspector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsveron23%2Fscu-inspector/lists"}