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

Files

T

Liviu Rau cc4ed1e43f Reland "Resolve compilation target in server.js from the current path"

This is a reland of commit cbda0e2158

Proof of fix @ https://chromium-swarm.appspot.com/task?d=true&id=696bff6c916ca010 where we trigger the same swarming task with a different CAS hash (one generated by the windows bot on self cq).

Original change's description:
> Resolve compilation target in server.js from the current path
>
> Bug: 333423685
> Change-Id: I3c00d9139794c4b7aa51b7ab5fdfef91f3ecd409
> Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5518529
> Reviewed-by: Andres Olivares <andoli@chromium.org>
> Reviewed-by: Danil Somsikov <dsv@chromium.org>
> Commit-Queue: Liviu Rau <liviurau@google.com>

Bug: 333423685
Change-Id: I7ae05df1492a392e85e13627edf70422fc9abdd0
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/5521433
Commit-Queue: Liviu Rau <liviurau@google.com>
Reviewed-by: Andres Olivares <andoli@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
Reviewed-by: Danil Somsikov <dsv@chromium.org>

2024-05-07 14:16:44 +00:00

BUILD.gn

Remove resources from ui/legacy/module.json

2021-11-16 16:47:21 +00:00

README.md

Move component_docs to ui/components/docs

2021-04-14 15:08:31 +00:00

server.js

Reland "Resolve compilation target in server.js from the current path"

2024-05-07 14:16:44 +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/ui/components/docs/DIR where DIR is the name of your component.
Within the new DIR, add HTML and TypeScript 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, and add a TypeScript file with the same name. The TypeScript file should contain all the code to import and run your component, and within the HTML file you can place any HTML or CSS you need (inline style tags are fine for examples) to render the component in the right context.
Create a BUILD.gn in your new DIR. This should contain the following code:

import("../../../scripts/build/ninja/copy.gni")
import("../../../third_party/typescript/typescript.gni")

ts_library("ts") {
  sources = [
    "basic.ts"
  ]

  deps = [
    # As an example: anything your TS code imports needs to be listed here as a dep.
    "../../ui/components/data_grid:bundle",
  ]
}

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

  deps = [
    ":ts"
  ]
}

Update front_end/ui/components/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.