Move component_docs to ui/components/docs
R=jacktfranklin@chromium.org
Bug: 1187573
Change-Id: I2f8225ba1b9fc9848cf497ec0235756ace0f4831
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2826290
Commit-Queue: Tim van der Lippe <tvanderlippe@chromium.org>
Reviewed-by: Jack Franklin <jacktfranklin@chromium.org>
diff --git a/scripts/component_server/README.md b/scripts/component_server/README.md
index ebefbd6..e199edb 100644
--- a/scripts/component_server/README.md
+++ b/scripts/component_server/README.md
@@ -6,7 +6,7 @@
To add an example for your component:
-1. Create `front_end/component_docs/DIR` where `DIR` is the name of your component.
+1. Create `front_end/ui/components/docs/DIR` where `DIR` is the name of your component.
2. 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.
3. Create a `BUILD.gn` in your new `DIR`. This should contain the following code:
@@ -38,6 +38,6 @@
```
-4. Update `front_end/component_docs/BUILD.gn` to add your new directory's `BUILD.GN` to the `public_deps` array.
+4. Update `front_end/ui/components/docs/BUILD.gn` to add your new directory's `BUILD.GN` to the `public_deps` array.
5. 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.
6. **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`.
diff --git a/scripts/component_server/server.js b/scripts/component_server/server.js
index b09f977..91b5b86 100644
--- a/scripts/component_server/server.js
+++ b/scripts/component_server/server.js
@@ -23,9 +23,9 @@
/**
* The server assumes that examples live in
- * devtoolsRoot/out/Target/gen/front_end/component_docs, but if you need to add a
+ * devtoolsRoot/out/Target/gen/front_end/ui/components/docs, but if you need to add a
* prefix you can pass this argument. Passing `foo` will redirect the server to
- * look in devtoolsRoot/out/Target/gen/foo/front_end/component_docs.
+ * look in devtoolsRoot/out/Target/gen/foo/front_end/ui/components/docs.
*/
const componentDocsBaseArg = argv.componentDocsBase || process.env.COMPONENT_DOCS_BASE ||
getTestRunnerConfigSetting('component-server-base-path', '');
@@ -71,8 +71,8 @@
process.send(serverPort);
}
console.log(`Started components server at http://localhost:${serverPort}\n`);
- console.log(`component_docs location: ${
- path.relative(process.cwd(), path.join(componentDocsBaseFolder, 'front_end', 'component_docs'))}`);
+ console.log(`ui/components/docs location: ${
+ path.relative(process.cwd(), path.join(componentDocsBaseFolder, 'front_end', 'ui', 'components', 'docs'))}`);
});
server.once('error', error => {
@@ -83,7 +83,7 @@
});
function createComponentIndexFile(componentPath, componentExamples) {
- const componentName = componentPath.replace('/front_end/component_docs/', '').replace(/_/g, ' ').replace('/', '');
+ const componentName = componentPath.replace('/front_end/ui/components/docs/', '').replace(/_/g, ' ').replace('/', '');
// clang-format off
return `<!DOCTYPE html>
<html>
@@ -162,7 +162,7 @@
<ul>
${componentNames.map(name => {
const niceName = name.replace(/_/g, ' ');
- return `<li><a href='/front_end/component_docs/${name}'>${niceName}</a></li>`;
+ return `<li><a href='/front_end/ui/components/docs/${name}'>${niceName}</a></li>`;
}).join('\n')}
</ul>
</body>
@@ -210,21 +210,22 @@
}
if (filePath === '/' || filePath === '/index.html') {
- const components = await fs.promises.readdir(path.join(componentDocsBaseFolder, 'front_end', 'component_docs'));
+ const components =
+ await fs.promises.readdir(path.join(componentDocsBaseFolder, 'front_end', 'ui', 'components', 'docs'));
const html = createServerIndexFile(components.filter(filePath => {
- const stats = fs.lstatSync(path.join(componentDocsBaseFolder, 'front_end', 'component_docs', filePath));
+ const stats = fs.lstatSync(path.join(componentDocsBaseFolder, 'front_end', 'ui', 'components', 'docs', filePath));
// Filter out some build config files (tsconfig, d.ts, etc), and just list the directories.
return stats.isDirectory();
}));
respondWithHtml(response, html);
- } else if (filePath.startsWith('/front_end/component_docs') && path.extname(filePath) === '') {
+ } else if (filePath.startsWith('/front_end/ui/components/docs') && path.extname(filePath) === '') {
// This means it's a component path like /breadcrumbs.
const componentHtml = await getExamplesForPath(filePath);
respondWithHtml(response, componentHtml);
return;
- } else if (/component_docs\/(.+)\/(.+)\.html/.test(filePath)) {
+ } else if (/ui\/components\/docs\/(.+)\/(.+)\.html/.test(filePath)) {
/** This conditional checks if we are viewing an individual example's HTML
- * file. e.g. localhost:8090/front_end/component_docs/data_grid/basic.html For each
+ * file. e.g. localhost:8090/front_end/ui/components/docs/data_grid/basic.html For each
* example we inject themeColors.css into the page so all CSS variables
* that components use are available.
*/
@@ -247,7 +248,7 @@
const inspectorCommonLink = `<link rel="stylesheet" href="${
path.join(baseUrlForSharedResource, 'front_end', 'ui', 'legacy', 'inspectorCommon.css')}" type="text/css" />`;
const toggleDarkModeScript = `<script type="module" src="${
- path.join(baseUrlForSharedResource, 'front_end', 'component_docs', 'component_docs.js')}"></script>`;
+ path.join(baseUrlForSharedResource, 'front_end', 'ui', 'components', 'docs', 'component_docs.js')}"></script>`;
const newFileContents = fileContents.replace('</head>', `${themeColoursLink}\n${inspectorCommonLink}\n</head>`)
.replace('</body>', toggleDarkModeScript + '\n</body>');
respondWithHtml(response, newFileContents);
diff --git a/scripts/eslint_rules/lib/es_modules_import.js b/scripts/eslint_rules/lib/es_modules_import.js
index 2c9ee85..771056b 100644
--- a/scripts/eslint_rules/lib/es_modules_import.js
+++ b/scripts/eslint_rules/lib/es_modules_import.js
@@ -13,7 +13,7 @@
const FRONT_END_DIRECTORY = path.join(__dirname, '..', '..', '..', 'front_end');
const UNITTESTS_DIRECTORY = path.join(__dirname, '..', '..', '..', 'test', 'unittests');
const INSPECTOR_OVERLAY_DIRECTORY = path.join(__dirname, '..', '..', '..', 'front_end', 'inspector_overlay');
-const COMPONENT_DOCS_DIRECTORY = path.join(FRONT_END_DIRECTORY, 'component_docs');
+const COMPONENT_DOCS_DIRECTORY = path.join(FRONT_END_DIRECTORY, 'ui', 'components', 'docs');
const EXEMPTED_THIRD_PARTY_MODULES = new Set([
// wasmparser is exempt as it doesn't expose all its modules from the root file
diff --git a/scripts/eslint_rules/tests/es_modules_import_test.js b/scripts/eslint_rules/tests/es_modules_import_test.js
index 3f400aa..cc1742e 100644
--- a/scripts/eslint_rules/tests/es_modules_import_test.js
+++ b/scripts/eslint_rules/tests/es_modules_import_test.js
@@ -124,7 +124,7 @@
// Component doc files can reach into the test directory to use the helpers
{
code: 'import * as FrontendHelpers from \'../../../test/unittests/front_end/helpers/EnvironmentHelpers.js\'',
- filename: 'front_end/component_docs/data_grid/basic.ts',
+ filename: 'front_end/ui/components/docs/data_grid/basic.ts',
},
],
diff --git a/scripts/test/run_test_suite.js b/scripts/test/run_test_suite.js
index 648e497..ce29302 100644
--- a/scripts/test/run_test_suite.js
+++ b/scripts/test/run_test_suite.js
@@ -53,7 +53,7 @@
.option('component-server-base-path', {
type: 'string',
desc:
- 'The component serve assumes examples live in out/TARGET/gen/front_end/component_docs, but you can set this option to add a prefix. Passing `foo` will redirect the server to look in out/TARGET/gen/foo/front_end/component_docs.',
+ 'The component serve assumes examples live in out/TARGET/gen/front_end/ui/components/docs, but you can set this option to add a prefix. Passing `foo` will redirect the server to look in out/TARGET/gen/foo/front_end/ui/components/docs.',
default: '',
})
.option('component-server-shared-resources-path', {