mirror of https://github.com/react/react-native-devtools-frontend.git synced 2026-10-01 09:47:56 +08:00

Files

T

Jack Franklin 1557a1c167 Components dev server

This introduces the components server that we will use to view
components locally.

Design doc:
https://docs.google.com/document/d/1P6qtACf4aryfT9OSHxNFI3okMKt9oUrtzOKCws5bOec/edit?pli=1

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

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

1.2 KiB

Raw Blame History

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.

1.2 KiB Raw Blame History

Components dev server

1.2 KiB

Raw Blame History