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

Files

T

Jack Franklin b599716ad0 [Component Docs]: fix bad server listing

Now the component docs have some TS that gets compiled, the docs server
was listing out tsconfig and build files when it was supposed to only
list component directories. This fixes that and also tidies up the list
of links by removing underscores - a quick drive by fix to make it nicer
to look at!

Change-Id: Id9f05894a235f376cfd8a7ea98c5bf179c006869
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2560945
Auto-Submit: Jack Franklin <jacktfranklin@chromium.org>
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Tim van der Lippe <tvanderlippe@chromium.org>

2020-11-26 11:30:53 +00:00

README.md

Update component_docs README

2020-07-20 11:35:27 +00:00

server.js

[Component Docs]: fix bad server listing

2020-11-26 11:30:53 +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.
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"
  ]
}

Update front_end/component_docs/BUILD.gn to add your new directory's BUILD.GN to the public_deps array.
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.