Migrate Sample System Web App to TypeScript

This CL migrates the Sample System Web App to use the ts_library()
toolchain.

This includes:
- splitting the trusted/untrusted resources into their own directories
- adding some type annotations where required
- reorganizing the BUILD infrastructure to be more streamlined and
  readable

This CL has not fully migrated all resources to TS as there are still
some settings that need to be tweaked for SharedWorker APIs.

Bug: 1002798

Change-Id: Ie0209fb15839a29077422736c949e561a8b3303c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3301133
Reviewed-by: Giovanni Ortuno Urquidi <ortuno@chromium.org>
Reviewed-by: Ken Rockot <rockot@google.com>
Reviewed-by: Jimmy Gong <jimmyxgong@chromium.org>
Commit-Queue: Christopher Lam <calamity@chromium.org>
Cr-Commit-Position: refs/heads/main@{#953018}

ash/webui/BUILD.gn

@@ -75,9 +75,6 @@ group("closure_compile") {
   ]
 
   if (!is_official_build) {
-    deps += [
-      "//ash/webui/demo_mode_app_ui:closure_compile",
-      "//ash/webui/sample_system_web_app_ui:closure_compile",
-    ]
+    deps += [ "//ash/webui/demo_mode_app_ui:closure_compile" ]
   }
 }

ash/webui/resources/BUILD.gn

@@ -90,14 +90,17 @@ if (!is_official_build) {
 
   # Resources used by chrome://sample-system-web-app
   ash_generated_grit("sample_system_web_app_resources") {
-    source = "$root_gen_dir/ash/webui/sample_system_web_app_ui/ash_sample_system_web_app_resources.grd"
-    deps = [ "//ash/webui/sample_system_web_app_ui:build_trusted_grd" ]
+    source = "$root_gen_dir/ash/webui/sample_system_web_app_ui/resources/trusted/ash_sample_system_web_app_resources.grd"
+    deps =
+        [ "//ash/webui/sample_system_web_app_ui/resources/trusted:trusted_grd" ]
   }
 
   # Resources used by chrome-untrusted://sample-system-web-app
   ash_generated_grit("sample_system_web_app_untrusted_resources") {
-    source = "$root_gen_dir/ash/webui/sample_system_web_app_ui/ash_sample_system_web_app_untrusted_resources.grd"
-    deps = [ "//ash/webui/sample_system_web_app_ui:build_untrusted_grd" ]
+    source = "$root_gen_dir/ash/webui/sample_system_web_app_ui/resources/untrusted/ash_sample_system_web_app_untrusted_resources.grd"
+    deps = [
+      "//ash/webui/sample_system_web_app_ui/resources/untrusted:untrusted_grd",
+    ]
   }
 }
 

ash/webui/sample_system_web_app_ui/BUILD.gn

@@ -33,128 +33,10 @@ static_library("sample_system_web_app_ui") {
   ]
 }
 
-js_type_check("closure_compile") {
-  deps = [
-    ":trusted",
-    ":untrusted",
-  ]
-  closure_flags = default_closure_args + mojom_js_args
-}
-
-js_library("untrusted") {
-  sources = [ "resources/untrusted.js" ]
-}
-
-js_library("trusted") {
-  sources = [ "resources/page_handler.js" ]
-  deps = [ "//ash/webui/sample_system_web_app_ui/mojom:trusted_webui_js" ]
-}
-
 js2gtest("browser_tests_js") {
   test_type = "mojo_lite_webui"
 
   sources = [ "test/sample_system_web_app_ui_browsertest.js" ]
 
   defines = [ "HAS_OUT_OF_PROC_TEST_RUNNER" ]
 }
-
-# Rules to generate grdp files for the generated mojo bindings.
-grd_prefix = "ash_sample_system_web_app"
-
-trusted_mojo_grdp =
-    "$target_gen_dir/sample_system_web_app_trusted_mojo_resources.grdp"
-generate_grd("build_trusted_mojo_grdp") {
-  out_grd = trusted_mojo_grdp
-  grd_prefix = grd_prefix
-
-  deps = [ "//ash/webui/sample_system_web_app_ui/mojom:trusted_webui_js" ]
-
-  # Flatten out the dependency tree of your mojom and add generated bindings
-  # file here.
-  input_files = [ "ash/webui/sample_system_web_app_ui/mojom/sample_system_web_app_ui.mojom-webui.js" ]
-
-  input_files_base_dir =
-      rebase_path("$root_gen_dir/mojom-webui", "$root_build_dir")
-}
-
-shared_mojo_grdp =
-    "$target_gen_dir/sample_system_web_app_shared_mojo_resources.grdp"
-generate_grd("build_shared_mojo_grdp") {
-  grd_prefix = grd_prefix
-  out_grd = shared_mojo_grdp
-
-  deps = [ "//ash/webui/sample_system_web_app_ui/mojom:shared_webui_js" ]
-
-  # Flatten out the dependency tree of your mojom and add generated bindings
-  # file here.
-  input_files = [ "ash/webui/sample_system_web_app_ui/mojom/sample_system_web_app_shared_ui.mojom-webui.js" ]
-
-  input_files_base_dir =
-      rebase_path("$root_gen_dir/mojom-webui", "$root_build_dir")
-}
-
-untrusted_mojo_grdp =
-    "$target_gen_dir/sample_system_web_app_untrusted_mojo_resources.grdp"
-generate_grd("build_untrusted_mojo_grdp") {
-  grd_prefix = grd_prefix
-  out_grd = untrusted_mojo_grdp
-
-  deps = [ "//ash/webui/sample_system_web_app_ui/mojom:untrusted_webui_js" ]
-
-  # Flatten out the dependency tree of your mojom and add generated bindings
-  # file here.
-  input_files = [ "ash/webui/sample_system_web_app_ui/mojom/sample_system_web_app_untrusted_ui.mojom-webui.js" ]
-
-  input_files_base_dir =
-      rebase_path("$root_gen_dir/mojom-webui", "$root_build_dir")
-}
-
-generate_grd("build_untrusted_grd") {
-  input_files_base_dir = rebase_path("resources", "//")
-  input_files = [
-    "untrusted.html",
-    "untrusted.js",
-    "untrusted_page_interface.js",
-  ]
-  grd_prefix = "ash_sample_system_web_app_untrusted"
-  out_grd = "$target_gen_dir/${grd_prefix}_resources.grd"
-
-  deps = [
-    ":build_shared_mojo_grdp",
-    ":build_untrusted_mojo_grdp",
-  ]
-  grdp_files = [
-    shared_mojo_grdp,
-    untrusted_mojo_grdp,
-  ]
-}
-
-generate_grd("build_trusted_grd") {
-  input_files_base_dir = rebase_path("resources", "//")
-  input_files = [
-    "app_icon_192.png",
-    "component_playground.html",
-    "index.html",
-    "inter_frame_communication.html",
-    "inter_frame_communication.js",
-    "main.js",
-    "worker.js",
-    "page_handler.js",
-    "timer.html",
-    "timer.js",
-  ]
-
-  # Manifest for generated files generated by resources:component_playground.
-  manifest_files = [ "$target_gen_dir/resources/build_manifest.json" ]
-  grd_prefix = grd_prefix
-  out_grd = "$target_gen_dir/${grd_prefix}_resources.grd"
-  deps = [
-    ":build_shared_mojo_grdp",
-    ":build_trusted_mojo_grdp",
-    "resources:component_playground",
-  ]
-  grdp_files = [
-    shared_mojo_grdp,
-    trusted_mojo_grdp,
-  ]
-}

ash/webui/sample_system_web_app_ui/mojom/BUILD.gn

@@ -4,34 +4,64 @@
 
 import("//build/config/chromeos/ui_mode.gni")
 import("//mojo/public/tools/bindings/mojom.gni")
+import("//tools/typescript/ts_library.gni")
 
 assert(is_chromeos_ash, "Sample System Web App is ash-chrome only")
 assert(!is_official_build,
        "Sample System Web App is only built for unofficial builds")
 
+cur_dir = rebase_path(".", "//")
+
 mojom("trusted") {
   sources = [ "sample_system_web_app_ui.mojom" ]
 
   public_deps = [
-    "//ash/webui/sample_system_web_app_ui/mojom:shared",
+    ":shared",
     "//mojo/public/mojom/base",
   ]
-  webui_module_path = "/ash/webui/sample_system_web_app_ui/mojom/"
+  webui_module_path = "/$cur_dir"
 }
 
 mojom("shared") {
   sources = [ "sample_system_web_app_shared_ui.mojom" ]
 
   public_deps = [ "//mojo/public/mojom/base" ]
-  webui_module_path = "/ash/webui/sample_system_web_app_ui/mojom/"
+  webui_module_path = "/$cur_dir"
 }
 
 mojom("untrusted") {
   sources = [ "sample_system_web_app_untrusted_ui.mojom" ]
 
   public_deps = [
-    "//ash/webui/sample_system_web_app_ui/mojom:shared",
+    ":shared",
     "//mojo/public/mojom/base",
   ]
-  webui_module_path = "/ash/webui/sample_system_web_app_ui/mojom/"
+  webui_module_path = "/" + rebase_path(".", "//")
+}
+
+# Builds a TS library for generated Mojo files that can be depended on by
+# downstream TS clients. In particular, we need d.ts files to be generated from
+# the JS files so that downstream TS clients get type information.
+# TODO(crbug.com/1002798): Mojo should generate this ts_library() from actual
+# TS files rather than creating d.ts files from the generated JS files.
+ts_library("mojom_ts") {
+  mojom_gen_dir = "$root_gen_dir/mojom-webui/$cur_dir"
+  root_dir = mojom_gen_dir
+  out_dir = "$mojom_gen_dir/tsc"
+  tsconfig_base = "../tsconfig_base.json"
+  in_files = [
+    "sample_system_web_app_untrusted_ui.mojom-webui.js",
+    "sample_system_web_app_ui.mojom-webui.js",
+    "sample_system_web_app_shared_ui.mojom-webui.js",
+  ]
+
+  # Targets that generate the above .mojom-webui.js files.
+  extra_deps = [
+    ":shared_webui_js",
+    ":trusted_webui_js",
+    ":untrusted_webui_js",
+  ]
+
+  # Generates d.ts files which allows this library to be depended upon.
+  composite = true
 }

ash/webui/sample_system_web_app_ui/resources/trusted/BUILD.gn

@@ -0,0 +1,84 @@
+# Copyright 2021 The Chromium Authors. All rights reserved.
+# Use of this source code is governed by a BSD-style license that can be
+# found in the LICENSE file.
+
+import("//build/config/chromeos/ui_mode.gni")
+import("//third_party/material_web_components/build_mwc_app.gni")
+import("//tools/typescript/ts_library.gni")
+import("//ui/webui/resources/tools/generate_grd.gni")
+
+assert(is_chromeos_ash, "Sample System Web App is ash-chrome only")
+assert(!is_official_build,
+       "Sample System Web App is only built for unofficial builds")
+
+generate_grd("trusted_grd") {
+  grd_prefix = "ash_sample_system_web_app"
+  out_grd = "$target_gen_dir/${grd_prefix}_resources.grd"
+
+  input_files = [
+    "app_icon_192.png",
+    "component_playground.html",
+    "index.html",
+    "inter_frame_communication.html",
+    "timer.html",
+  ]
+  input_files_base_dir = rebase_path(".", "//")
+
+  # tsconfig.manifest is generated by :trusted_ts and adds all of the
+  # in_files to the grd.
+  manifest_files = [
+    "$target_gen_dir/tsconfig.manifest",
+    "$target_gen_dir/component_playground.manifest",
+  ]
+
+  # Flatten out the dependency tree of your mojom and add generated bindings
+  # grdp files here.
+  # TODO(crbug.com/1002798): We could add a mojo_grdp_deps variable to
+  # generate_grd that automatically adds these grdp files when you add a
+  # X_webui_grdp target to it.
+  grdp_files = [
+    "$target_gen_dir/../../mojom/shared_webui_resources.grdp",
+    "$target_gen_dir/../../mojom/trusted_webui_resources.grdp",
+  ]
+
+  deps = [
+    ":component_playground",
+    ":trusted_ts",
+    "../../mojom:shared_webui_grdp",
+    "../../mojom:trusted_webui_grdp",
+  ]
+}
+
+ts_library("trusted_ts") {
+  root_dir = "."
+  out_dir = "$target_gen_dir/tsc"
+
+  in_files = [
+    "inter_frame_communication.ts",
+    "main.ts",
+    "page_handler.ts",
+
+    # TODO(crbug.com/1002798): Migrate these Shared Worker files to TS.
+    "timer.js",
+    "worker.js",
+  ]
+
+  tsconfig_base = "../../tsconfig_base.json"
+  composite = true
+
+  # Allows TSC to check the generated mojom-webui/ directory when it encounters
+  # imports.
+  path_mappings =
+      [ "/*|" + rebase_path("$root_gen_dir/mojom-webui/*", target_gen_dir) ]
+
+  deps = [ "../../mojom:mojom_ts" ]
+}
+
+build_mwc_app("component_playground") {
+  host = "sample-system-web-app"
+  input = rebase_path(".", root_build_dir)
+  js_module_in_files = [ "component_playground.js" ]
+  js_out_files = [ "component_playground.rollup.js" ]
+  out_manifest = "$target_gen_dir/component_playground.manifest"
+  deps = []
+}