{"id":21763902,"url":"https://github.com/foxbunny/duckweed-devtool","last_synced_at":"2025-03-21T04:45:49.803Z","repository":{"id":57216964,"uuid":"102969986","full_name":"foxbunny/duckweed-devtool","owner":"foxbunny","description":"Developer tool for inspecting, exporting, and importing Duckweed app models","archived":false,"fork":false,"pushed_at":"2017-09-10T17:31:41.000Z","size":445,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-11T12:39:19.982Z","etag":null,"topics":["devtool","duckweed","framework","javascript","typescript"],"latest_commit_sha":null,"homepage":null,"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/foxbunny.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}},"created_at":"2017-09-09T16:44:53.000Z","updated_at":"2017-09-10T10:39:44.000Z","dependencies_parsed_at":"2022-08-28T21:40:21.327Z","dependency_job_id":null,"html_url":"https://github.com/foxbunny/duckweed-devtool","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/foxbunny%2Fduckweed-devtool","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxbunny%2Fduckweed-devtool/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxbunny%2Fduckweed-devtool/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/foxbunny%2Fduckweed-devtool/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/foxbunny","download_url":"https://codeload.github.com/foxbunny/duckweed-devtool/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244739938,"owners_count":20501990,"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":["devtool","duckweed","framework","javascript","typescript"],"created_at":"2024-11-26T12:16:46.995Z","updated_at":"2025-03-21T04:45:49.787Z","avatar_url":"https://github.com/foxbunny.png","language":"TypeScript","readme":"# Duckweed devtool\n\nDeveloper tool that allows developers to inspect the\n[Duckweed](https://github.com/foxbunny/duckweed) application model state.\n\nThe Duckweed devtool is a proper web application that runs alongside your main\napplication, in the same tab, and monitors the application state changes. Its\ninterface allows you to inspect the application state and also rewind the\napplication to a previous state.\n\n## Features\n\n![screenshot of the Duckweed devtool](./media/screenshot.jpg)\n\n- Time travel\n- Model state inspection\n- Model patch performance chart\n- In-browser (no extensions, works in any reasonably modern browser)\n\n## Demo\n\nThe [Duckweed demo app](https://foxbunny.github.io/duckweed-tasks/) is build\nwith the devtool. Also refer to the [manua](./docs/manual.md) to learn more\nabout the devtool usage.\n\n## Installation\n\nnpm install --save-dev duckweed-devtool\n\n## Usage\n\nInclude the package in the webpack bundle alongside your app:\n\n```javascript\n// Webpack config\n// ...\n\nmodule.export = function (env) {\n return {\n   // ...\n   entry: env \u0026\u0026 env.devtool === \"yes\"\n    ? [\"duckweed-devtool\", \"./src/index.js\"]\n    : [\"./src/index.js\"],\n  // ...\n };\n};\n```\n\nWhen invoking `duckweed.runner()` pass `window.__DUCKWEED_DEVTOOL__.middlware`\nand `window.__DUCKWEED_DEVTOOL__.plugin` as appropriate options:\n\n```javascript\nconst {plugin, middleware} = window.__DUCKWEED_DEVTOOL__ || {};\nduckweed.runner(model, actions, views, {\n  plugins: plugin ? [plugin] : [],\n  middleware: middleware ? [middleware] : [],\n});\n```\n\n## How it works\n\nFor the information on how to use the devtool, see the [User manual](./docs/manual.md).\n\nFor the technical information, see the [Under the hood](./docs/under-the-hood.md).\n\n## Limitations\n\nThe following conditions may cause the devtool to behave in unexpected ways:\n\n### You patch the model in Snabbdom hooks\n\nYou patched the model in a hook, and then rewind the state in the devtool to a\nstate that causes the hook to trigger. A new state change occurs at that point,\ncausing the state *after* the last-selected state to be erased. This is not a\nbug. Devtool is designed to do that.\n\n### You use state other than the one in the model\n\nIf you use global state, like `window.location`, that is outside Duckweed's\ncontrol, the time travel may not work as expected. Access to such state should\nbe limited to event handlers and the rest of the apps should use the model state\nexclusively.\n\n### You use `document.body` as your root\n\nIf your application uses `document.body` as the root, it will overwrite the\ndevtool's UI elements. Currently the only solution is to use a different root.\n\n### Dependencies are duplicated\n\nBoth your app and the devtool will use the same core dependencies (Snabbdom,\nDuckweed itself, etc). Since the devtool comes pre-bundled with them as well as\nan ES6 `Object.assign()` shim, there could be some duplication. Keep in mind,\nthough, that the devtool does not necessarily use the same versions of those\ndependencies as your app, and that the devtool should not end up in the\nproduction bundle anyway, so it's fine that the dependencies are duplicated.\n\n### No Chrome extension\n\nBecause Duckweed application state can store any type of object (i.e., objects\nthat are not necessarili serializable), writing a Chrome extension for this tool\nis a bit involved. I originally planned on having just a Chrome extension, but\nthe final conslusion was that creating a tool that would run in-browser is\nprobably faster.\n\nHaving said that, the current design is a bit too intrusive. In future, the\ndevtool may provide a development server that will host your app in an iframe,\nfor much cleaner separation of the two programs.\n\n## License\n\nThis software is made available to you under the terms of the MIT liecense.\nPlease see the full text of the license in the `LICENSE` file in the source\ntree.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxbunny%2Fduckweed-devtool","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffoxbunny%2Fduckweed-devtool","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffoxbunny%2Fduckweed-devtool/lists"}