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

Files

T

Changhao Han d2454323cb TS-componentize Computed tab's style property and style trace elements

This also helps future work, for example, Computed style grouping,
to be TS-componentized as well.

Bug: chromium:1106251, chromium:1096230
Change-Id: I2f8a977f4e3f701905354cb4edb15702cb8cd2a3
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2336723
Commit-Queue: Changhao Han <changhaohan@chromium.org>
Reviewed-by: Paul Lewis <aerotwist@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Mathias Bynens <mathias@chromium.org>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>

2020-08-11 13:52:51 +00:00

README.md

Update component_docs README

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

server.js

TS-componentize Computed tab's style property and style trace elements

2020-08-11 13:52:51 +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.