Files
react-native-devtools-frontend/scripts/component_server
Jack Franklin e02962c02f Fix double serving of files in component server
Now the server can serve from the tests directory, it will sometimes get
two requests for the same file, one prefixed with front_end and the
other not. If that happens the server now redirects the request such
that we only ever serve each file once and the browser doesn't
double-execute a module.

Change-Id: I14b44aad8b16d1c3f2f787082c70532a8f8776e9
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2599746
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
2020-12-21 16:39:36 +00:00
..
2020-07-20 11:35:27 +00:00

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:

  1. Create front_end/component_docs/DIR where DIR is the name of your component.
  2. 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.
  3. Create a BUILD.gn in your new DIR. This should contain the following code:
import("../../../scripts/build/ninja/copy.gni")

copy_to_gen("elements_breadcrumbs") {
  sources = [
    "example1.html",
    # list all other examples here
  ]

  deps = [
    # Any dependencies your examples rely on.
    # For example, if they depend on code in the elements module:
    "../../elements"
  ]
}
  1. Update front_end/component_docs/BUILD.gn to add your new directory's BUILD.GN to the public_deps array.
  2. 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.
  3. 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.