Bundle lit resources.

This cl:
* Bundles lit into 1 file to export. This allows web ui to get full
  lit functionality after 1 HTTP request instead of needing to perform
  a dozen or more HTTP requests to fetch the full dependency tree.
* Moves all lit files into ui/webui/resources/preprocessed/mwc so that
  optimize_webui will, by default, handle chrome://resource imports
  for lit files.
* Deletes files_webui_bundle as optimize_webui will now correctly
  handle lit without needing adjustments.
* Updates rewrite_imports to accept regex so we can remap any
  directive import with a single line.

We also update our reproduce.sh script to no longer generate the BUILD
file for third_party/material_web_components. Instead just output all
discovered type definitions for a engineer to manually update.

Bug: b/229804752
Change-Id: I3c908244e724f31eb86eba98a444b8bc31156b28
Cq-Include-Trybots: luci.chromium.try:linux-chromeos-rel;luci.chrome.try:linux-chromeos-chrome
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4113089
Reviewed-by: Wenbo Jie <wenbojie@chromium.org>
Commit-Queue: Zain Afzal <zafzal@google.com>
Reviewed-by: Giovanni Ortuno Urquidi <ortuno@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1099099}

ash/webui/file_manager/resources/BUILD.gn

@@ -3,12 +3,12 @@
 # found in the LICENSE file.
 
 import("//build/config/chromeos/ui_mode.gni")
+import("//chrome/browser/resources/tools/optimize_webui.gni")
 import("//chrome/common/features.gni")
 import("//third_party/closure_compiler/compile_js.gni")
 import("//tools/grit/grit_rule.gni")
 import("//tools/grit/preprocess_if_expr.gni")
 import("//tools/typescript/ts_library.gni")
-import("//ui/file_manager/base/gn/files_webui_bundle/files_webui_bundle.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
 
 assert(is_chromeos_ash)
@@ -127,7 +127,7 @@ if (!optimize_webui) {
   }
 }
 
-files_webui_bundle("build") {
+optimize_webui("build") {
   host = "file-manager"
   input = rebase_path(preprocess_folder, root_build_dir)
 
@@ -136,12 +136,6 @@ files_webui_bundle("build") {
     "runtime_loaded_test_util_swa.js",
   ]
 
-  js_out_files = [
-    "main.rollup.js",
-    "runtime_loaded_test_util_swa.rollup.js",
-    "shared.rollup.js",
-  ]
-
   excludes = [
     "chrome://resources/ash/common/load_time_data.m.js",
     "chrome://resources/mojo/mojo/public/js/bindings.js",

ash/webui/tools/ash_ts_library.gni

@@ -85,8 +85,10 @@ template("ash_ts_library") {
     forward_variables_from(invoker, [ "testonly" ])
 
     import_mappings = [
+      # All lit code is bundled into 1 file, the below mappings simply rewrite
+      # any import to lit or a lit sub package to point at the bundle.
       "lit|//resources/mwc/lit/index.js",
-      "lit/decorators|//resources/mwc/lit/decorators.js",
+      "lit/.*|//resources/mwc/lit/index.js",
     ]
 
     deps = [

third_party/material_web_components/BUILD.gn

@@ -2,125 +2,54 @@
 # Use of this source code is governed by a BSD-style license that can be
 # found in the LICENSE file.
 
+import("//chrome/browser/resources/tools/optimize_webui.gni")
 import("//tools/typescript/ts_library.gni")
 import("//ui/webui/resources/tools/generate_grd.gni")
 
+# Optimize webui assumes that all resources hosted on chrome://resources are
+# in this directory and does not provide a way to override this assumption. To
+# prevent downstream optimize_webui calls from breaking we output all of our
+# files into the same path.
+chrome_resources_dir = "${root_gen_dir}/ui/webui/resources/tsc/mwc"
+
+# Compile lit_exports.js into a singular bundle we can host on
+# chrome://resources.
+optimize_webui("bundle_lit") {
+  host = "resources"
+  input = rebase_path("//third_party/material_web_components/", root_build_dir)
+  js_module_in_files = [ "lit_exports.js" ]
+
+  deps = []
+}
+
+copy("copy_tslib") {
+  sources = [ rebase_path(
+          "//third_party/material_web_components/components-chromium/node_modules/tslib/tslib.js",
+          root_build_dir) ]
+  outputs = [ "$chrome_resources_dir/tslib/tslib.js" ]
+}
+
+copy("copy_lit_bundle") {
+  sources = [ "$target_gen_dir/lit_exports.rollup.js" ]
+  outputs = [ "$chrome_resources_dir/lit/index.js" ]
+  deps = [ ":bundle_lit" ]
+}
+
 generate_grd("build_grdp") {
   grd_prefix = "material_web_components"
-  out_grd = "${target_gen_dir}/${grd_prefix}_resources.grdp"
+  out_grd = "$target_gen_dir/${grd_prefix}_resources.grdp"
+  input_files_base_dir = rebase_path(chrome_resources_dir, root_build_dir)
+  resource_path_prefix = "mwc"
 
-  # TODO(b/229804752): Clean up and find the minimal set of necessary resources.
   input_files = [
-    "lit-element/decorators.js",
-    "lit-element/index.js",
-    "lit-element/lit-element.js",
-    "@lit/reactive-element/reactive-controller.js",
-    "@lit/reactive-element/decorators.js",
-    "@lit/reactive-element/decorators/state.js",
-    "@lit/reactive-element/decorators/query-async.js",
-    "@lit/reactive-element/decorators/event-options.js",
-    "@lit/reactive-element/decorators/query-assigned-elements.js",
-    "@lit/reactive-element/decorators/query.js",
-    "@lit/reactive-element/decorators/custom-element.js",
-    "@lit/reactive-element/decorators/query-assigned-nodes.js",
-    "@lit/reactive-element/decorators/base.js",
-    "@lit/reactive-element/decorators/query-all.js",
-    "@lit/reactive-element/decorators/property.js",
-    "@lit/reactive-element/reactive-element.js",
-    "@lit/reactive-element/css-tag.js",
-    "lit/directives/template-content.js",
-    "lit/directives/choose.js",
-    "lit/directives/when.js",
-    "lit/directives/live.js",
-    "lit/directives/if-defined.js",
-    "lit/directives/unsafe-svg.js",
-    "lit/directives/async-append.js",
-    "lit/directives/until.js",
-    "lit/directives/class-map.js",
-    "lit/directives/ref.js",
-    "lit/directives/async-replace.js",
-    "lit/directives/repeat.js",
-    "lit/directives/range.js",
-    "lit/directives/map.js",
-    "lit/directives/join.js",
-    "lit/directives/keyed.js",
-    "lit/directives/guard.js",
-    "lit/directives/style-map.js",
-    "lit/directives/unsafe-html.js",
-    "lit/directives/cache.js",
-    "lit/directive-helpers.js",
-    "lit/decorators.js",
-    "lit/directive.js",
-    "lit/static-html.js",
-    "lit/index.js",
-    "lit/async-directive.js",
-    "lit/html.js",
     "tslib/tslib.js",
-    "lit-html/lit-html.js",
-    "lit-html/directives/template-content.js",
-    "lit-html/directives/choose.js",
-    "lit-html/directives/when.js",
-    "lit-html/directives/live.js",
-    "lit-html/directives/if-defined.js",
-    "lit-html/directives/unsafe-svg.js",
-    "lit-html/directives/async-append.js",
-    "lit-html/directives/until.js",
-    "lit-html/directives/class-map.js",
-    "lit-html/directives/ref.js",
-    "lit-html/directives/async-replace.js",
-    "lit-html/directives/repeat.js",
-    "lit-html/directives/range.js",
-    "lit-html/directives/map.js",
-    "lit-html/directives/join.js",
-    "lit-html/directives/keyed.js",
-    "lit-html/directives/guard.js",
-    "lit-html/directives/style-map.js",
-    "lit-html/directives/unsafe-html.js",
-    "lit-html/directives/cache.js",
-    "lit-html/directives/private-async-helpers.js",
-    "lit-html/directive-helpers.js",
-    "lit-html/static.js",
-    "lit-html/directive.js",
-    "lit-html/async-directive.js",
-    "@material/base/observer-proxy.js",
-    "@material/base/observer-foundation.js",
-    "@material/base/observer.js",
-    "@material/base/index.js",
-    "@material/base/component.js",
-    "@material/base/types.js",
-    "@material/base/foundation.js",
-    "@material/mwc-base/base-element.js",
-    "@material/mwc-base/form-element.js",
-    "@material/mwc-base/utils.js",
-    "@material/mwc-base/observer.js",
-    "@material/mwc-base/aria-property.js",
-    "@material/ripple/constants.js",
-    "@material/ripple/index.js",
-    "@material/ripple/adapter.js",
-    "@material/ripple/util.js",
-    "@material/ripple/component.js",
-    "@material/ripple/types.js",
-    "@material/ripple/foundation.js",
-    "@material/mwc-button/demo_styles.css.js",
-    "@material/mwc-button/mwc-button.js",
-    "@material/mwc-button/styles.css.js",
-    "@material/mwc-button/mwc-button-base.js",
-    "@material/dom/focus-trap.js",
-    "@material/dom/keyboard.js",
-    "@material/dom/ponyfill.js",
-    "@material/dom/index.js",
-    "@material/dom/announce.js",
-    "@material/dom/events.js",
-    "@material/mwc-ripple/mwc-ripple.js",
-    "@material/mwc-ripple/mwc-ripple.css.js",
-    "@material/mwc-ripple/ripple-handlers.js",
-    "@material/mwc-ripple/mwc-ripple-base.js",
-    "@material/mwc-icon/mwc-icon-host.css.js",
-    "@material/mwc-icon/mwc-icon.js",
+    "lit/index.js",
   ]
 
-  input_files_base_dir = rebase_path("components-chromium/node_modules", "//")
-  resource_path_prefix = "mwc"
+  deps = [
+    ":copy_lit_bundle",
+    ":copy_tslib",
+  ]
 }
 
 ts_library("library") {

third_party/material_web_components/lit_exports.js

@@ -0,0 +1,24 @@
+/** Simple file to export all lit resources we care about for easy bundling. */
+
+export * from "./components-chromium/node_modules/lit/index.js";
+export * from "./components-chromium/node_modules/lit/decorators.js";
+export * from "./components-chromium/node_modules/lit/directives/async-append.js";
+export * from "./components-chromium/node_modules/lit/directives/async-replace.js";
+export * from "./components-chromium/node_modules/lit/directives/cache.js";
+export * from "./components-chromium/node_modules/lit/directives/choose.js";
+export * from "./components-chromium/node_modules/lit/directives/class-map.js";
+export * from "./components-chromium/node_modules/lit/directives/guard.js";
+export * from "./components-chromium/node_modules/lit/directives/if-defined.js";
+export * from "./components-chromium/node_modules/lit/directives/join.js";
+export * from "./components-chromium/node_modules/lit/directives/keyed.js";
+export * from "./components-chromium/node_modules/lit/directives/live.js";
+export * from "./components-chromium/node_modules/lit/directives/map.js";
+export * from "./components-chromium/node_modules/lit/directives/range.js";
+export * from "./components-chromium/node_modules/lit/directives/ref.js";
+export * from "./components-chromium/node_modules/lit/directives/repeat.js";
+export * from "./components-chromium/node_modules/lit/directives/style-map.js";
+export * from "./components-chromium/node_modules/lit/directives/template-content.js";
+export * from "./components-chromium/node_modules/lit/directives/unsafe-html.js";
+export * from "./components-chromium/node_modules/lit/directives/unsafe-svg.js";
+export * from "./components-chromium/node_modules/lit/directives/until.js";
+export * from "./components-chromium/node_modules/lit/directives/when.js";

third_party/material_web_components/reproduce.sh

@@ -64,43 +64,15 @@ if [[ ! -z "${new}${deleted}" ]]; then
   echo
 fi
 
-cat > BUILD.gn << EOF
-# Copyright 2022 The Chromium Authors
-# Use of this source code is governed by a BSD-style license that can be
-# found in the LICENSE file.
-
-import("//tools/typescript/ts_library.gni")
-import("//ui/webui/resources/tools/generate_grd.gni")
-
-generate_grd("build_grdp") {
-  grd_prefix = "material_web_components"
-  out_grd = "\${target_gen_dir}/\${grd_prefix}_resources.grdp"
-
-  # TODO(b/229804752): Clean up and find the minimal set of necessary resources.
-  input_files = [
-EOF
-for x in `find components-chromium/node_modules  | grep js$ | cut -f3- -d/`; do
-  echo "    \"$x\"," >> BUILD.gn
-done
-cat >> BUILD.gn << EOF
-  ]
-
-  input_files_base_dir = rebase_path("components-chromium/node_modules", "//")
-  resource_path_prefix = "mwc"
-}
-
-ts_library("library") {
-  composite = true
-  tsconfig_base = "tsconfig_base.json"
-
-  # TODO(b/229804752): Clean up and find the minimal set of necessary resources.
-  definitions = [
-EOF
+# In our BUILD file we have a ts_library rule which exposes all lit type
+# definitions. The following bit of code discovers and outputs all lit type
+# definitions so an engineer can manually update the afformentioned rule.
+echo 'Please update the ts_library("library") rule in BUILD to contain these'
+echo 'definitions:'
+echo 'definitions = ['
 for x in `find components-chromium/node_modules -type f  | grep d.ts$`; do
-  echo "    \"$x\"," >> BUILD.gn
+  echo "    \"$x\","
 done
-cat >> BUILD.gn << EOF
-  ]
-}
-EOF
+echo ']'
+
 popd > /dev/null

third_party/material_web_components/rewrite_imports.py

@@ -14,6 +14,10 @@
 # ts_library.py or replacing the regex if only "tslib" is ever rewritten.
 def main(argv):
     parser = argparse.ArgumentParser()
+    # List of imports and what they should be rewritten to. Specified as an
+    # array of "src|dest" strings. Note that the src will be treated as regex
+    # matched against the entire import path. I.e. "foo|bar" will translate to
+    # re.replace("^foo$", "bar", line).
     parser.add_argument('--import_mappings', nargs='*')
     # The directory to output the rewritten files to.
     parser.add_argument('--out_dir', required=True)
@@ -36,22 +40,23 @@ def main(argv):
         (src, dst) = mapping.split('|')
         import_mappings[src] = dst
 
+    def _map_import(import_path):
+        for regex in import_mappings.keys():
+            if re.match(f"^{regex}$", import_path):
+                return import_mappings[regex]
+        generated_import_match = re.match(r'^generated:(.*)', import_path)
+        if generated_import_match:
+            return generated_import_match.group(1)
+        return None
+
     for f in args.in_files:
         output = []
         for line in open(os.path.join(args.base_dir, f), 'r').readlines():
             # Investigate JS parsing if this is insufficient.
             match = re.match(r'^(import .*["\'])(.*)(["\'];)$', line)
-            if match:
-                import_src = match.group(2)
-                generated_import_match = re.match(r'^generated:(.*)',
-                                                  import_src)
-                if import_src in import_mappings:
-                    line = (match.group(1) + import_mappings[import_src] +
-                            match.group(3) + '\n')
-                elif generated_import_match:
-                    line = (match.group(1) + generated_import_match.group(1) +
-                            match.group(3) + '\n')
-
+            if match and _map_import(match.group(2)):
+                new_import = _map_import(match.group(2))
+                line = f"{match.group(1)}{new_import}{match.group(3)};\n"
             output.append(line)
         with open(os.path.join(args.out_dir, f), 'w') as out_file:
             out_file.write(''.join(output))