Skip to content

Commit 08bddf0

Browse files
committed
Update generated readme from #18.
1 parent d5f1bc3 commit 08bddf0

File tree

2 files changed

+56
-12
lines changed

2 files changed

+56
-12
lines changed

{{cookiecutter.project_shortname}}/README.md

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,14 @@ If you have selected install_dependencies during the prompt, you can skip this p
3838
```
3939
$ python usage.py
4040
```
41+
- Write tests for your component.
42+
- A sample test is available in `tests/test_usage.py`, it will load `usage.py` and you can then automate interactions with selenium.
43+
- Run the tests with `$ pytest tests`.
44+
- The Dash team uses these types of integration tests extensively. Browse the Dash component code on GitHub for more examples of testing (e.g. https://github.com/plotly/dash-core-components)
45+
- Add custom styles to your component by putting your custom CSS files into your distribution folder (`{{cookiecutter.project_shortname}}`).
46+
- Make sure that they are referenced in `MANIFEST.in` so that they get properly included when you're ready to publish your component.
47+
- Make sure the stylesheets are added to the `_css_dist` dict in `{{cookiecutter.project_shortname}}/__init__.py` so dash will serve them automatically when the component suite is requested.
48+
- [Review your code](./review_checklist.md)
4149
4250
### Create a production build and publish:
4351
@@ -69,20 +77,10 @@ If you have selected install_dependencies during the prompt, you can skip this p
6977
```
7078
$ npm publish
7179
```
80+
_Publishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash servers the component library's CSS and JS from the remote unpkg CDN, so if you haven't published the component package to NPM you'll need to set the `serve_locally` flags to `True` (unless you choose `False` on `publish_on_npm`). We will eventually make `serve_locally=True` the default, [follow our progress in this issue](https://github.com/plotly/dash/issues/284)._
7281
5. Share your component with the community! https://community.plot.ly/c/dash
7382
74-
## More details
75-
- Include CSS files in your distribution folder (`{{cookiecutter.project_shortname}}`) and reference them in `MANIFEST.in`
76-
- The `tests` folder contains a sample integration test. This will run a sample Dash app in a browser. Run this with:
77-
```
78-
$ pytest tests
79-
```
80-
The Dash team uses these types of integration tests extensively. Browse the Dash component code on GitHub for more examples of testing (e.g. https://github.com/plotly/dash-core-components)
81-
- Publishing your component to NPM will make the JavaScript bundles available on the unpkg CDN. By default, Dash servers the component library's CSS and JS from the remote unpkg CDN, so if you haven't published the component package to NPM you'll need to set the `serve_locally` flags to `True` (unless you choose `False` on `publish_on_npm`). We will eventually make `serve_locally=True` the default, [follow our progress in this issue](https://github.com/plotly/dash/issues/284).
82-
- Watch the [component boilerplate repository](https://github.com/plotly/dash-component-boilerplate) to stay informed of changes to our components.
83-
84-
8583
## More Resources
8684
- Learn more about Dash: https://dash.plot.ly
87-
- View the original component boilerplate: https://github.com/plotly/dash-component-boilerplate
85+
- Watch the [component boilerplate repository](https://github.com/plotly/dash-component-boilerplate) to stay informed of changes to our components.
8886
- [React guide for python developers](https://dash.plot.ly/react-for-python-developers)
Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
# Code Review Checklist
2+
3+
## Code quality & design
4+
5+
- Is your code clear? If you had to go back to it in a month, would you be happy to? If someone else had to contribute to it, would they be able to?
6+
7+
A few suggestions:
8+
9+
- Make your variable names descriptive and use the same naming conventions throughout the code.
10+
11+
- For more complex pieces of logic, consider putting a comment, and maybe an example.
12+
13+
- In the comments, focus on describing _why_ the code does what it does, rather than describing _what_ it does. The reader can most likely read the code, but not necessarily understand why it was necessary.
14+
15+
- Don't overdo it in the comments. The code should be clear enough to speak for itself. Stale comments that no longer reflect the intent of the code can hurt code comprehension.
16+
17+
* Don't repeat yourself. Any time you see that the same piece of logic can be applied in multiple places, factor it out into a function, or variable, and reuse that code.
18+
* Scan your code for expensive operations (large computations, DOM queries, React re-renders). Have you done your possible to limit their impact? If not, it is going to slow your app down.
19+
20+
## Component API
21+
22+
- Have you tested your component on the Python side by creating an app in `usage.py` ?
23+
24+
Do all of your component's props work when set from the back-end?
25+
26+
Should all of them be settable from the back-end or are some only relevant to user interactions in the front-end?
27+
28+
- Have you provided some basic documentation about your component? The Dash community uses [react docstrings](https://github.com/plotly/dash-docs/blob/master/tutorial/plugins.py#L45) to provide basic information about dash components. Take a look at this [Checklist component example](https://github.com/plotly/dash-core-components/blob/master/src/components/Checklist.react.js) and others from the dash-core-components repository.
29+
30+
At a minimum, you should describe what your component does, and describe its props and the features they enable.
31+
32+
Be careful to use the correct formatting for your docstrings for them to be properly recognized.
33+
34+
## Tests
35+
36+
- The Dash team uses integration tests extensively, and we highly encourage you to write tests for the main functionality of your component. In the `tests` folder of the boilerplate, you can see a sample integration test. By launching it, you will run a sample Dash app in a browser. You can run the test with:
37+
```
38+
python -m tests.test_render
39+
```
40+
[Browse the Dash component code on GitHub for more examples of testing.](https://github.com/plotly/dash-core-components)
41+
42+
## Ready to publish? Final scan
43+
44+
- Take a last look at the external resources that your component is using. Are all the external resources used [referenced in `MANIFEST.in`](https://github.com/plotly/dash-docs/blob/0b2fd8f892db720a7f3dc1c404b4cff464b5f8d4/tutorial/plugins.py#L55)?
45+
46+
- You're ready to publish! Continue to [step #9 here](README.md#publishing).

0 commit comments

Comments
 (0)