commit ba7d0a637c5a8d8d095d4601ce46bb6ba88dc490
author Leandro Lovisolo <lovisolo@google.com> Wed Dec 13 20:41:32 2023 +0000
committer SkCQ <skcq-be@skia-corp.google.com.iam.gserviceaccount.com> Wed Dec 13 21:00:24 2023 +0000
tree 3565466b9b05034e6a7aedffc592bb3379d6e588
parent d35b781c7f09505f8a6bf8991ecd904ee7e044dc

[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>