mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-01 17:57:36 +08:00

Files

T

Jack Franklin 279564ea9f Add ElementsBreadcrumbs component with examples

This CL adds the `ElementsBreadcrumbs` component and documentation to
the component server.

Important: this CL *does not add the component to the UI*. That will be
done in a follow up CL once this has shipped and we have done some other
infrastructure work that is currently blocking components going into
production.

This is also why the file is called `NewElementsBreadcrumbs`, to avoid a
nameclash with `ElementsBreadcrumbs.js`. In the CL that puts this
component into production I will change the filename as the clashing
won't be an issue.

Change-Id: I8039d314ba02c834c3f8ec26f9bdb547858aa2dd
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2236405
Commit-Queue: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>

2020-07-06 15:12:21 +00:00

README.md

Components dev server

2020-06-08 14:53:56 +00:00

server.js

Add ElementsBreadcrumbs component with examples

2020-07-06 15:12:21 +00:00

README.md

Components dev server

This server serves up examples of the web components built within DevTools and provides a useful way to document various states of components.

For more background, see the initial proposal and design doc.

To add an example for your component:

Create front_end/component_docs/DIR where DIR is the name of your component.
Within the new DIR, add HTML files. Each one of these is a standalone example. You should name the HTML file based on what it's documenting, e.g. basic.html or data-missing.html. This file should import your component and render it with the data you need.
Update front_end/component_docs/BUILD.gn to add each of your *.html files to the sources array. You will also need to update the deps array to ensure the component examples depend on your component's source file.
Run npm run components-server to fire up a server on localhost:8090. You should now see your component listed and you can click on the link to view the examples.
Note: the server assumes your built target is Default. If not, run the server and pass the --target flag: npm run components-server -- --target=Release.