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:
front_end/component_docs/DIR where DIR is the name of your component.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.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"
]
}
front_end/component_docs/BUILD.gn to add your new directory's BUILD.GN to the public_deps array.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.Default. If not, run the server and pass the --target flag: npm run components-server -- --target=Release.