![\"color-feature\"/](\"/images/overview-diagram-feature.png\")
![\"color-action\"/](\"/images/overview-diagram-action.png\")
![\"color-component\"/](\"/images/overview-diagram-component.png\")
![\"color-misc\"/](\"/images/overview-diagram-misc.png\")
![\"color-dep-on\"/](\"/images/overview-diagram-dep1.png\")
![\"color-dep-by\"/](\"/images/overview-diagram-dep2.png\")
![\"color-dep-internal\"/](\"/images/overview-diagram-dep3.png\")
![\"project-explorer\"](\"/images/portal-project-explorer.png\")
\n\nBesides displaying the project structure, it also provides context menus to manage project elements like component.\n\n### Dashboard\nThe dashboard provides an overall status view of the project such as overview diagram, test coverage etc.\n\n![\"dashboard\"](\"/images/portal-dashboard.png\")
\n\n### Overview diagram\nThe most notible part of the dashboard is the overview diagram. It's an intuitive view about the architecture of a Rekit project. It's also interactive, you can mouse move to different features, components, actions to see the relationship of some specific element. You can also click a node to deep dive into it. Below information is covered by the overview diagram:\n\n1. Relationship between modules.\n2. The relative size of features.\n3. How a feature is composed.\n\nWhen mouseover an element, the diagram will highlight the current element and the relationship which is only about the current element.\n\nIdeally, there should be no circular-dependecies among features. So that they are pluggable and easier to understand. But in real projects you need to balance the architecture and development efficiency. So it's acceptable if there are light-weight circular-dependencies between features while a principle is to avoid too many such dependencies. You can delay the refactor of removing dependencies when some type of dependencies become too complicated.\n\nHere is a list about what different colors and lines mean:\n\n | \n Features. | \n
| \n Actions. | \n
| \n Components. | \n
| \n Misc files. | \n
| \n A module depends on others. | \n
| \n A module is dependent by others. | \n
| \n A module depends on others in the same feature. | \n
![\"element-diagram\"](\"/images/element-diagram.png\")
\n\n### Test coverage\nRekit uses [istanbul](https://github.com/gotwarlost/istanbul) to generate test coverage report.\nAfter running all tests against the project, the test coverage will be available.\nRunning a single test or tests of a folder does not generate coverage report.\nNote that if some tests failed, the report data may be incomplete.\n\nYou can see the overall test coverage report from dashboard or the original report generated by [istanbul-nyc](https://github.com/istanbuljs/nyc) from the test coverage detail page.\n\n### Manage project elements\nRekit portal wraps command line tools into UI dialogs, with which you can intuitively create, rename or delete components, actions etc. To open a dialog, right click an element in the project exploer and click the corresponding menu item.\n\n![\"cmd-dialogs\"](\"/images/cmd-dialogs.png\")
\n\n### Run build\nRekit portal executes the build script `tools/build.js` under your project when click the menu item `Build`. It reads the webpack build progress data to update the progress bar. Though `build.js` created by Rekit looks a bit complex but you can update it per your requirement after you fully understand how it works.\n\n![\"build\"](\"/images/portal-build.png\")
\n\n\n### Run tests\nRekit portal executes the test script `tools/run_test.js` under your project when click the menu item `Run tests`. The script accepts the argument which tests to run, it could be one single file or a folder. When no argument provides, it runs all tests under `tests` folder, and generates test coverage report. See more in [command line tools](/docs/cli.md) page.\n\nSo when click `Run test` menu item on a project element like component, it just executes `tools/run_test.js` behind and pass the current component test file as the argument to the script. You can also update `run_test.js` script on your requirement.\n\n![\"test\"](\"/images/portal-test.png\")
\n\n### Code viewer\nIt helps to quickly view the source code of the project. For example, when select an component, by default it shows the diagram view, but you can switch to the code view where you can view the source code of the component. And you could also easily view the style code or test file. For now Rekit hasn't support editing code directly because it doesn't intend to replace your favorite text editors.\n\n![\"element-page\"](\"/images/element-page.png\")
\n\n","maintainers":[{"name":"supnate","email":"supnate@gmail.com"}],"time":{"modified":"2022-06-26T10:51:48.838Z","created":"2017-02-07T14:42:52.911Z","2.0.0-alpha.1":"2017-02-07T14:42:52.911Z","2.0.0-alpha.2":"2017-02-07T14:46:09.957Z","2.0.0-alpha.3":"2017-02-07T15:05:39.644Z","2.0.0-alpha.4":"2017-02-07T16:57:13.429Z","2.0.0-alpha.5":"2017-02-08T16:20:11.133Z","2.0.0-alpha.6":"2017-02-08T16:38:07.518Z","2.0.0-alpha.7":"2017-02-08T16:50:54.127Z","2.0.0-alpha.8":"2017-02-12T16:48:50.595Z","2.0.0-alpha.9":"2017-02-12T16:53:20.475Z","2.0.0-beta.1":"2017-02-19T16:08:30.259Z","2.0.0-beta.2":"2017-02-20T17:58:06.458Z","2.0.0-beta.3":"2017-02-21T17:14:42.376Z","2.0.0-beta.4":"2017-03-29T15:46:54.904Z","2.0.0-beta.5":"2017-03-29T16:06:33.593Z","2.0.0":"2017-06-22T09:34:39.209Z","2.0.1":"2017-06-23T09:02:56.522Z","2.0.2":"2017-07-06T16:41:42.472Z","2.0.3":"2017-07-08T15:49:09.714Z","2.0.4":"2017-07-08T15:53:11.462Z","2.0.5":"2017-07-17T07:50:59.007Z","2.0.6":"2017-09-28T04:02:57.749Z","2.0.7":"2017-10-03T04:36:22.643Z","2.1.0":"2018-01-22T06:14:56.244Z","2.1.1":"2018-01-23T08:39:14.081Z","2.1.2":"2018-01-24T09:40:12.815Z","2.1.3":"2018-01-24T16:23:29.191Z","2.1.4":"2018-01-25T05:09:16.863Z","2.1.5":"2018-01-27T10:22:41.566Z","2.1.6":"2018-01-27T18:31:53.918Z","2.1.7":"2018-01-30T09:18:00.414Z","2.1.8":"2018-01-30T09:37:03.488Z","2.1.9":"2018-02-01T02:02:06.711Z","2.1.10":"2018-02-05T03:33:42.437Z","2.1.11":"2018-02-05T10:43:49.929Z","2.1.12":"2018-02-06T02:55:39.281Z","2.1.13":"2018-02-06T03:03:55.372Z","2.1.14":"2018-02-06T10:25:13.556Z","2.1.15":"2018-02-07T14:49:51.590Z","2.1.17":"2018-02-08T09:49:39.494Z"},"homepage":"https://github.com/supnate/rekit#readme","keywords":["rekit","react","redux","react-router"],"repository":{"type":"git","url":"git+https://github.com/supnate/rekit.git"},"bugs":{"url":"https://github.com/supnate/rekit/issues"},"readmeFilename":"README.md","license":"MIT"}