{"id":13452177,"url":"https://github.com/Raathigesh/wiretap","last_synced_at":"2025-03-23T19:33:49.261Z","repository":{"id":83260043,"uuid":"106139369","full_name":"Raathigesh/wiretap","owner":"Raathigesh","description":":mag:  A desktop app for inspecting mobx and mobx state tree apps","archived":false,"fork":false,"pushed_at":"2018-11-03T22:43:18.000Z","size":2152,"stargazers_count":201,"open_issues_count":11,"forks_count":14,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-03-10T19:23:20.231Z","etag":null,"topics":["developer-tools","electron","mobx","mobx-observables","mobx-state-tree"],"latest_commit_sha":null,"homepage":"https://wiretap.debuggable.io/","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/Raathigesh.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":"2017-10-08T00:20:46.000Z","updated_at":"2025-01-25T06:40:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"ea26bd38-7005-40d7-a767-c4243d1df564","html_url":"https://github.com/Raathigesh/wiretap","commit_stats":null,"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Fwiretap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Fwiretap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Fwiretap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Raathigesh%2Fwiretap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Raathigesh","download_url":"https://codeload.github.com/Raathigesh/wiretap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245159139,"owners_count":20570328,"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":["developer-tools","electron","mobx","mobx-observables","mobx-state-tree"],"created_at":"2024-07-31T07:01:16.052Z","updated_at":"2025-03-23T19:33:48.419Z","avatar_url":"https://github.com/Raathigesh.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"\u003cimg src=\"./docs/wiretap.png\" alt=\"logo\" height=\"120\" align=\"right\" /\u003e\n\n# Mobx Wiretap\n\n_The dev tool your mobx and mobx-state-tree app deserve_\n\n\u003cimg src=\"./docs/wiretap.gif\" alt=\"Wiretap\" style=\"margin-top: 15px\"\u003e\n\n## What's Mobx Wiretap?\nMobx wiretap is an electron app which allows you to inspect your mobx and mobx-state-tree states during **development** time. This makes debugging easy and fun.\n\n[![Gitter chat](https://badges.gitter.im/gitterHQ/gitter.png)](https://gitter.im/mobx-wiretap/Lobby)\n\n## Features\n- Mobx\n  - Live inspection of observable state\n  - Update observable state\n  - Listen to action logs\n  - Invoke actions\n- Mobx state tree\n  - Live inspection of state tree\n  - View action, snapshot and patch logs\n  - Apply snapshots and patches\n  - Invoke actions with arguments\n  - Record and replay actions\n\n## Getting started\n\n### 1) Download the app\n- [OS X](https://github.com/Raathigesh/wiretap/releases/download/v0.2.0/wiretap-0.2.0.dmg)\n- [Windows](https://github.com/Raathigesh/wiretap/releases/download/v0.2.0/wiretap-setup-0.2.0.exe)\n\n### 2) Install the npm module\n```\nyarn add mobx-wiretap --dev\n```\n\n### 3) Inspecting mobx observables\n```javascript\nimport { observable } from \"mobx\";\nimport { wiretap, inspect } from \"mobx-wiretap\";\n\n// Provide a name as the app name.\nwiretap(\"My awesome app\");\n\nconst todos = observable([{\n   text: \"Watch narcos\",\n   completed: false\n}])\n\n// Now you are inspecting todos.\n// Changes will reflect in real time in the app.\n// First parameter is a required label.\ninspect(\"Todos\", todos);\n```\n\n### 4) Inspecting Mobx-state-tree observables\n```javascript\nimport { types } from \"mobx-state-tree\";\n// Please note that you have to require from '/mst'.\nimport { wiretap, inspect } from \"mobx-wiretap/mst\";\n\n// Provide a name as the app name.\nwiretap(\"My awesome app\");\n\nconst Todo = types.model(\"Todo\", {\n    title: types.string,\n    done: false\n}).actions(self =\u003e ({\n    toggle() {\n        self.done = !self.done\n    }\n}));\n\nconst todo = Todo.create({\n    title: \"Get coffee\",\n    done: false\n});\n\n// Now you are inspecting todos.\n// Changes will reflect in real time in the app.\n// First parameter is a required label.\ninspect(\"Todo\", todo);\n```\n\nSometimes wiretap would not be able to auto-detect the actions from the mst observable you are tracking. In that case, you would be able to pass the action names as the third parameter as follows.\n\n```javascript\ninspect(\"Todo\", todo, ['addTodo']);\n```\n\n### 5) Inspecting plain object with log()\n```javascript\nimport { wiretap, log } from \"mobx-wiretap\";\nwiretap(\"My awesome app\");\n\n// Call log\nlog(\"CustomObject\", {\n    question: \"Are unicorns real?\"\n});\n```\n\n## Examples\n- [Mobx example](https://github.com/Raathigesh/wiretap/tree/master/packages/example/mobx-example)\n- [Mobx state tree example](https://github.com/Raathigesh/wiretap/tree/master/packages/example/mobx-state-tree-example)\n\n## Connect to a specific port or a host\nWiretap usually listens on port `4000`. If port `4000` is already occupied, wiretap would start listening on a different port. You can find the port in the sidebar.\n\nIf wiretap is listening on port other than `4000`, you must provide the port when initializing. You could also provide a host.\n```javascript\nimport { wiretap } from \"mobx-wiretap\";\nwiretap(\"My awesome app\", {\n    host: 'http://localhost',\n    port: 84585\n});\n```\n\n## Mobx Wiretap Live (Experimental)\nMobx Wiretap Live is the same inspector but as a hosted app.\n\nApp: https://wiretap.debuggable.io/live/\n\n### Initialize with the peer id\nAll you have to do is install `mobx-wiretap-remote` and initialize your connection with the ID presented to you on https://wiretap.debuggable.io/live/\n```javascript\nimport { wiretap } from \"mobx-wiretap-remote\";\nwiretap(\"My awesome app\", {\n    peerId: \"\u003cID From https://wiretap.debuggable.io/live/\u003e\"\n});\n```\n**But if you are worried about sending your data to an unknown service, not to worry, your app data is NOT sent to a centralized server. Instead the app uses WebRTC - peer to peer connection and sends the data directly to the peer. So your app is a peer and the inspector tab is another peer.**\n## FAQ\n\u003cdetails\u003e\n  \u003csummary\u003eHow does this differ from mobx-dev-tools?\u003c/summary\u003e\n\nMobx-dev-tools is an awesome tool to inspect your react app and see how the UI reacts to state changes. Wiretap focuses more on the state itself. You would still need mobx-dev-tools to keep an eye on the react components.\n\u003c/details\u003e\n\n## The road ahead\n - Support for mobx computed properties.\n - Support for mobx-state-tree views.\n - Support for react native.\n\n ### Looking for your suggestions\n Let me know what you want to see in wiretap. Go right ahead and share your feedback and thoughts by creating an issue.\n\n## Contribute\n- Go into `packages/app` directory\n- Do `yarn install`\n- Run `yarn dev` to start the app\n\n## Inspiration\nInspired by [Reactotron](https://github.com/infinitered/reactotron).\n\n## Thanks\nThanks [Alex Bergin](https://codepen.io/abergin/pen/XpwRpE)  for the awesome loading animation.\n\n## License\nMIT © [Raathigeshan](https://twitter.com/Raathigeshan)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRaathigesh%2Fwiretap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRaathigesh%2Fwiretap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRaathigesh%2Fwiretap/lists"}