[bazel] Prepare demo pages for rules_js migration.
The follow-up CL https://skia-review.googlesource.com/c/buildbot/+/787697 migrates our repository to rules_js, rules_ts and rules_esbuild. This includes upgrading the underlying "esbuild" binary to a newer version, which handles JavaScript/TypeScript imports differently.
To illustrate, take the following two files:
// test-sk-demo.ts
console.log("test-sk-demo: Hello, world!");
import './test-sk';
console.log("test-sk-demo: Goodbye!");
// test-sk.ts
console.log("test-sk: Greetings from test-sk!")
Under the esbuild version currently in use, we get the following bundle (non-minified, etc.):
"use strict";
(() => {
var __getOwnPropNames = Object.getOwnPropertyNames;
var __commonJS = (cb, mod) => function __require() {
return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};
// bazel-out/k8-fastbuild/bin/golden/modules/test-sk/test-sk.js
var require_test_sk = __commonJS({
"bazel-out/k8-fastbuild/bin/golden/modules/test-sk/test-sk.js"() {
"use strict";
console.log("test-sk: Greetings from test-sk!");
}
});
// bazel-out/k8-fastbuild/bin/golden/modules/test-sk/test-sk-demo.js
var require_test_sk_demo = __commonJS({
"bazel-out/k8-fastbuild/bin/golden/modules/test-sk/test-sk-demo.js"(exports) {
Object.defineProperty(exports, "__esModule", { value: true });
console.log("test-sk-demo: A");
require_test_sk();
console.log("test-sk-demo: B");
}
});
"use strict";
require_test_sk_demo();
})();
And we observe the following in the browser's console:
test-sk-demo: Hello, world!
test-sk: Greetings from test-sk!
test-sk-demo: Goodbye!
Under the new esbuild version, however, we get the following bundle:
"use strict";
(() => {
// golden/modules/test-sk/test-sk.js
console.log("test-sk: Greetings from test-sk!");
// golden/modules/test-sk/test-sk-demo.ts
console.log("test-sk-demo: Hello, world!");
console.log("test-sk-demo: Goodbye!");
})();
Which produces the following logs:
test-sk: Greetings from test-sk!
test-sk-demo: Hello, world!
test-sk-demo: Goodbye!
Notice the "./test-sk" import was moved atop, which changes the evaluation order such that test-sk.ts is evaluated before test-sk-demo.ts.
Unfortunately this behavior breaks several demo pages that set up RPC mocks with fetchMock and then import the element under test. Example:
- https://skia.googlesource.com/buildbot/+/af8f7d1d2f41c5067f66863940ec757c7ae3f414/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.html#21
- https://skia.googlesource.com/buildbot/+/af8f7d1d2f41c5067f66863940ec757c7ae3f414/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.ts#39
In this example, the commit-detail-picker-sk custom element appears in the demo page's HTML. Due to the import order changes in the new esbuild, this leads to RPC errors because as soon as the custom element is connected to the DOM, it tries to fetch from an endpoint that hasn't yet been mocked.
I tried forcing the old esbuild behavior in a couple of ways, but none of them worked.
The solution I found is to rewrite these demo pages so that the custom element is dynamically created and attached to the DOM after we have mocked the necessary endpoints. We already use this pattern in many other demo pages, for example:
- https://skia.googlesource.com/buildbot/+/af8f7d1d2f41c5067f66863940ec757c7ae3f414/golden/modules/triagelog-page-sk/triagelog-page-sk-demo.html#10
- https://skia.googlesource.com/buildbot/+/af8f7d1d2f41c5067f66863940ec757c7ae3f414/golden/modules/triagelog-page-sk/triagelog-page-sk-demo.ts#41
In summary, this CL prepares our repository so that the rules_js migration does not break any demo pages.
Bug: b/314813928
Change-Id: I0efa886fa9cc7508c2e966e3cbbb5ca9abf37ccf
Reviewed-on: https://skia-review.googlesource.com/c/buildbot/+/789409
Reviewed-by: Kevin Lubick <kjlubick@google.com>
Commit-Queue: Leandro Lovisolo <lovisolo@google.com>
diff --git a/autoroll/modules/arb-config-sk/arb-config-sk-demo.html b/autoroll/modules/arb-config-sk/arb-config-sk-demo.html
index aed0e7f..0dd2391 100644
--- a/autoroll/modules/arb-config-sk/arb-config-sk-demo.html
+++ b/autoroll/modules/arb-config-sk/arb-config-sk-demo.html
@@ -14,7 +14,7 @@
<div style="flex-grow: 1"></div>
<theme-chooser-sk></theme-chooser-sk>
</div>
- <arb-config-sk></arb-config-sk>
+ <div class="component-goes-here"></div>
<error-toast-sk></error-toast-sk>
</body>
diff --git a/autoroll/modules/arb-config-sk/arb-config-sk-demo.ts b/autoroll/modules/arb-config-sk/arb-config-sk-demo.ts
index d95010f..c9aa337 100644
--- a/autoroll/modules/arb-config-sk/arb-config-sk-demo.ts
+++ b/autoroll/modules/arb-config-sk/arb-config-sk-demo.ts
@@ -5,6 +5,7 @@
import { SetupMocks } from '../rpc-mock';
import { GetFakeConfig } from '../rpc-mock/fake-config';
import { Status } from '../../../infra-sk/modules/json';
+import './index';
const status: Status = {
email: 'user@google.com',
@@ -15,5 +16,5 @@
fetchMock.get('/r/skia-skiabot-test/config', GetFakeConfig());
SetupMocks();
-// eslint-disable-next-line import/first
-import './index';
+document.querySelector('.component-goes-here')!.innerHTML =
+ '<arb-config-sk></arb-config-sk>';
diff --git a/autoroll/modules/arb-scaffold-sk/arb-scaffold-sk-demo.html b/autoroll/modules/arb-scaffold-sk/arb-scaffold-sk-demo.html
index f24dd06..ab01fcc 100644
--- a/autoroll/modules/arb-scaffold-sk/arb-scaffold-sk-demo.html
+++ b/autoroll/modules/arb-scaffold-sk/arb-scaffold-sk-demo.html
@@ -9,8 +9,6 @@
<div style="flex-grow: 1"></div>
<theme-chooser-sk></theme-chooser-sk>
</div>
- <arb-scaffold-sk title="arb-scaffold-sk demo">
- <main>Content goes here.</main>
- </arb-scaffold-sk>
+ <div class="component-goes-here"></div>
</body>
</html>
diff --git a/autoroll/modules/arb-scaffold-sk/arb-scaffold-sk-demo.ts b/autoroll/modules/arb-scaffold-sk/arb-scaffold-sk-demo.ts
index 7ebf158..7afed89 100644
--- a/autoroll/modules/arb-scaffold-sk/arb-scaffold-sk-demo.ts
+++ b/autoroll/modules/arb-scaffold-sk/arb-scaffold-sk-demo.ts
@@ -1,6 +1,6 @@
import fetchMock from 'fetch-mock';
-
import { Status } from '../../../infra-sk/modules/json';
+import './index';
const status: Status = {
email: 'user@google.com',
@@ -9,5 +9,8 @@
fetchMock.get('/_/login/status', status);
-// eslint-disable-next-line import/first
-import './index';
+document.querySelector('.component-goes-here')!.innerHTML = `
+ <arb-scaffold-sk title="arb-scaffold-sk demo">
+ <main>Content goes here.</main>
+ </arb-scaffold-sk>
+`;
diff --git a/autoroll/modules/arb-status-sk/arb-status-sk-demo.html b/autoroll/modules/arb-status-sk/arb-status-sk-demo.html
index d96b836..a04a065 100644
--- a/autoroll/modules/arb-status-sk/arb-status-sk-demo.html
+++ b/autoroll/modules/arb-status-sk/arb-status-sk-demo.html
@@ -15,7 +15,7 @@
<div style="flex-grow: 1"></div>
<theme-chooser-sk></theme-chooser-sk>
</div>
- <arb-status-sk></arb-status-sk>
+ <div class="component-goes-here"></div>
<error-toast-sk></error-toast-sk>
</body>
</html>
diff --git a/autoroll/modules/arb-status-sk/arb-status-sk-demo.ts b/autoroll/modules/arb-status-sk/arb-status-sk-demo.ts
index 61479a7..678a0b1 100644
--- a/autoroll/modules/arb-status-sk/arb-status-sk-demo.ts
+++ b/autoroll/modules/arb-status-sk/arb-status-sk-demo.ts
@@ -4,6 +4,7 @@
import '../../../infra-sk/modules/theme-chooser-sk';
import { ARBStatusSk } from './arb-status-sk';
import { SetupMocks, GetFakeStatus } from '../rpc-mock';
+import './index';
import { Status } from '../../../infra-sk/modules/json';
@@ -16,8 +17,8 @@
SetupMocks();
-// eslint-disable-next-line import/first
-import './index';
+document.querySelector('.component-goes-here')!.innerHTML =
+ `<arb-status-sk></arb-status-sk>`;
// Get the name of the fake roller from the demo data.
const ele = <ARBStatusSk>document.getElementsByTagName('arb-status-sk')[0];
diff --git a/infra-sk/modules/alogin-sk/alogin-sk-demo.html b/infra-sk/modules/alogin-sk/alogin-sk-demo.html
index a8fbed4..9617d6c 100644
--- a/infra-sk/modules/alogin-sk/alogin-sk-demo.html
+++ b/infra-sk/modules/alogin-sk/alogin-sk-demo.html
@@ -10,15 +10,15 @@
<h1>alogin-sk</h1>
<section>
<h2>Fetching</h2>
- <alogin-sk></alogin-sk>
+ <div class="fetching-example-goes-here"></div>
</section>
<section>
<h2>Testing</h2>
- <alogin-sk testing_offline></alogin-sk>
+ <div class="testing-example-goes-here"></div>
</section>
<section>
<h2>Failure</h2>
- <alogin-sk url="/this/should/return/a/404"></alogin-sk>
+ <div class="failure-example-goes-here"></div>
</section>
</body>
</html>
diff --git a/infra-sk/modules/alogin-sk/alogin-sk-demo.ts b/infra-sk/modules/alogin-sk/alogin-sk-demo.ts
index 36ead3f..ff017b2 100644
--- a/infra-sk/modules/alogin-sk/alogin-sk-demo.ts
+++ b/infra-sk/modules/alogin-sk/alogin-sk-demo.ts
@@ -1,3 +1,4 @@
+import './index';
// eslint-disable-next-line import/no-extraneous-dependencies
import fetchMock from 'fetch-mock';
import { Status } from '../json';
@@ -11,5 +12,9 @@
fetchMock.get('/this/should/return/a/404', 404);
-// eslint-disable-next-line import/first
-import './index';
+document.querySelector('.fetching-example-goes-here')!.innerHTML =
+ `<alogin-sk></alogin-sk>`;
+document.querySelector('.testing-example-goes-here')!.innerHTML =
+ `<alogin-sk testing_offline></alogin-sk>`;
+document.querySelector('.failure-example-goes-here')!.innerHTML =
+ `<alogin-sk url="/this/should/return/a/404"></alogin-sk>`;
diff --git a/perf/modules/alerts-page-sk/alerts-page-sk-demo.ts b/perf/modules/alerts-page-sk/alerts-page-sk-demo.ts
index 71c4a03..b6a29cc 100644
--- a/perf/modules/alerts-page-sk/alerts-page-sk-demo.ts
+++ b/perf/modules/alerts-page-sk/alerts-page-sk-demo.ts
@@ -1,3 +1,4 @@
+import './index';
import '../../../elements-sk/modules/error-toast-sk';
import fetchMock from 'fetch-mock';
import { Alert } from '../json';
@@ -180,6 +181,3 @@
);
});
});
-
-// eslint-disable-next-line import/first
-import './index';
diff --git a/perf/modules/cluster-lastn-page-sk/cluster-lastn-page-sk-demo.ts b/perf/modules/cluster-lastn-page-sk/cluster-lastn-page-sk-demo.ts
index 01b444d..9812104 100644
--- a/perf/modules/cluster-lastn-page-sk/cluster-lastn-page-sk-demo.ts
+++ b/perf/modules/cluster-lastn-page-sk/cluster-lastn-page-sk-demo.ts
@@ -1,3 +1,4 @@
+import './index';
import '../../../elements-sk/modules/error-toast-sk';
import fetchMock from 'fetch-mock';
import { Alert } from '../json';
@@ -101,6 +102,3 @@
window.perf = window.perf || {};
window.perf.key_order = [];
window.perf.demo = true;
-
-// eslint-disable-next-line import/first
-import './index';
diff --git a/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.html b/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.html
index 80abb33..37f1803 100644
--- a/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.html
+++ b/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.html
@@ -18,12 +18,12 @@
<section class="body-sk font-sk">
<h2>themes.css</h2>
- <commit-detail-picker-sk></commit-detail-picker-sk>
+ <div class="lightmode-example"></div>
</section>
<section class="body-sk font-sk darkmode">
<h2>themes.css - darkmode</h2>
- <commit-detail-picker-sk id="darkmode-picker"></commit-detail-picker-sk>
+ <div class="darkmode-example"></div>
</section>
<div>
diff --git a/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.ts b/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.ts
index 255bd9d..4b9ddf1 100644
--- a/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.ts
+++ b/perf/modules/commit-detail-picker-sk/commit-detail-picker-sk-demo.ts
@@ -1,3 +1,4 @@
+import './index';
import '../../../elements-sk/modules/error-toast-sk';
import fetchMock from 'fetch-mock';
import { CommitDetailPickerSk } from './commit-detail-picker-sk';
@@ -34,12 +35,13 @@
body: 'Commit body.',
},
]);
-
-// eslint-disable-next-line import/first
-import './index';
-
const evt = document.querySelector('#evt')!;
+document.querySelector('.lightmode-example')!.innerHTML =
+ `<commit-detail-picker-sk></commit-detail-picker-sk>`;
+document.querySelector('.darkmode-example')!.innerHTML =
+ `<commit-detail-picker-sk id="darkmode-picker"></commit-detail-picker-sk>`;
+
document
.querySelectorAll<CommitDetailPickerSk>('commit-detail-picker-sk')
.forEach((panel) => {
diff --git a/perf/modules/trybot-page-sk/trybot-page-sk-demo.html b/perf/modules/trybot-page-sk/trybot-page-sk-demo.html
index 599770c..4adb458 100644
--- a/perf/modules/trybot-page-sk/trybot-page-sk-demo.html
+++ b/perf/modules/trybot-page-sk/trybot-page-sk-demo.html
@@ -9,7 +9,7 @@
<body class="body-sk font-sk darkmode">
<h1>trybot-page-sk</h1>
- <trybot-page-sk></trybot-page-sk>
+ <div class="component-goes-here"></div>
<error-toast-sk></error-toast-sk>
<div id="load-complete"></div>
</body>
diff --git a/perf/modules/trybot-page-sk/trybot-page-sk-demo.ts b/perf/modules/trybot-page-sk/trybot-page-sk-demo.ts
index 4d94d2f..74c8ba2 100644
--- a/perf/modules/trybot-page-sk/trybot-page-sk-demo.ts
+++ b/perf/modules/trybot-page-sk/trybot-page-sk-demo.ts
@@ -1,3 +1,4 @@
+import './index';
import fetchMock from 'fetch-mock';
import { $$ } from '../../../infra-sk/modules/dom';
import { Commit } from '../json';
@@ -114,8 +115,8 @@
msg: '',
}));
-// eslint-disable-next-line import/first
-import './index';
+document.querySelector('.component-goes-here')!.innerHTML =
+ '<trybot-page-sk></trybot-page-sk>';
$$<QuerySk>('query-sk')!.current_query = 'config=8888';
$$<CommitDetailPickerSk>('commit-detail-picker-sk')!.selection = 43390;
diff --git a/status/modules/capacity-sk/capacity-sk-demo.ts b/status/modules/capacity-sk/capacity-sk-demo.ts
index bb84d40..4b17767 100644
--- a/status/modules/capacity-sk/capacity-sk-demo.ts
+++ b/status/modules/capacity-sk/capacity-sk-demo.ts
@@ -1,5 +1,5 @@
/* eslint-disable no-use-before-define */
-/* eslint-disable import/first */
+import './index';
import fetchMock from 'fetch-mock';
import { SetupMocks } from '../rpc-mock';
import { resp } from './test-data';
@@ -15,5 +15,4 @@
const el = document.createElement('capacity-sk');
document.querySelector('#container')?.appendChild(el);
-import './index';
import { Status, EMail } from '../../../infra-sk/modules/json';
diff --git a/status/modules/status-sk/status-sk-demo.ts b/status/modules/status-sk/status-sk-demo.ts
index a713684..f8e53c1 100644
--- a/status/modules/status-sk/status-sk-demo.ts
+++ b/status/modules/status-sk/status-sk-demo.ts
@@ -1,3 +1,5 @@
+import './index';
+import { EMail } from '../../../infra-sk/modules/json';
import fetchMock from 'fetch-mock';
import { defaultStatusURL } from '../../../infra-sk/modules/alogin-sk/alogin-sk';
import { $$ } from '../../../infra-sk/modules/dom';
@@ -102,11 +104,6 @@
infraRoleResp
);
-// eslint-disable-next-line import/first
-import './index';
-// eslint-disable-next-line import/first
-import { EMail } from '../../../infra-sk/modules/json';
-
const data = document.createElement('status-sk');
($$('#container') as HTMLElement).appendChild(data);
diff --git a/task_scheduler/modules/task-scheduler-scaffold-sk/task-scheduler-scaffold-sk-demo.html b/task_scheduler/modules/task-scheduler-scaffold-sk/task-scheduler-scaffold-sk-demo.html
index fa916af..4e5c1a3 100644
--- a/task_scheduler/modules/task-scheduler-scaffold-sk/task-scheduler-scaffold-sk-demo.html
+++ b/task_scheduler/modules/task-scheduler-scaffold-sk/task-scheduler-scaffold-sk-demo.html
@@ -4,8 +4,6 @@
<title>task-scheduler-scaffold-sk demo</title>
</head>
<body class="body-sk">
- <task-scheduler-scaffold-sk title="task-scheduler-scaffold-sk demo">
- <main>Content goes here.</main>
- </task-scheduler-scaffold-sk>
+ <div class="component-goes-here"></div>
</body>
</html>
diff --git a/task_scheduler/modules/task-scheduler-scaffold-sk/task-scheduler-scaffold-sk-demo.ts b/task_scheduler/modules/task-scheduler-scaffold-sk/task-scheduler-scaffold-sk-demo.ts
index 32f7c35..c480fb1 100644
--- a/task_scheduler/modules/task-scheduler-scaffold-sk/task-scheduler-scaffold-sk-demo.ts
+++ b/task_scheduler/modules/task-scheduler-scaffold-sk/task-scheduler-scaffold-sk-demo.ts
@@ -1,3 +1,4 @@
+import './index';
import fetchMock from 'fetch-mock';
import { defaultStatusURL } from '../../../infra-sk/modules/alogin-sk/alogin-sk';
import { Status } from '../../../infra-sk/modules/json';
@@ -9,5 +10,8 @@
fetchMock.get(defaultStatusURL, status);
-// eslint-disable-next-line import/first
-import './index';
+document.querySelector('.component-goes-here')!.innerHTML = `
+<task-scheduler-scaffold-sk title="task-scheduler-scaffold-sk demo">
+ <main>Content goes here.</main>
+</task-scheduler-scaffold-sk>
+`;
