Continue ClaroDocs's Migration to Using Closure Templates rather than…

… StringBuilder This rounds out the majority of the static html templating needs. This introduces some minor formatting issues, that I'll need to look deeper into the CSS in order to fix at some point.
JasonSteving99 · Oct 9, 2023 · a5439a5 · a5439a5
1 parent eb1d5ae
commit a5439a5
Show file tree

Hide file tree

Showing 17 changed files with 252 additions and 157 deletions.
diff --git a/src/java/com/claro/module_system/clarodocs/ClaroDocsCLIOptions.java b/src/java/com/claro/module_system/clarodocs/ClaroDocsCLIOptions.java
@@ -31,4 +31,10 @@ public class ClaroDocsCLIOptions extends OptionsBase {
       defaultValue = ""
   )
   public String treejs_css;
+  @Option(
+      name = "clarodocs_css",
+      help = "Path to ClaroDoc's CSS stylesheet.",
+      defaultValue = ""
+  )
+  public String clarodocs_css;
 }
diff --git a/src/java/com/claro/module_system/clarodocs/ClaroDocsGenerator.java b/src/java/com/claro/module_system/clarodocs/ClaroDocsGenerator.java
@@ -72,13 +72,16 @@ public static void main(String[] args) throws IOException {
                           res.append(
                               serializedClaroModule.getExportedProcedureDefinitionsList().stream()
                                   .map(ProcedureHtml::generateProcedureHtml)
+                                  // TODO(steving) Temporary until migrate to using SanitizedContent here.
+                                  .map(Object::toString)
                                   .collect(Collectors.joining("\n")));
                           return res.toString();
                         }
                     )),
             typeDefHtmlByModuleNameAndTypeNameBuilder.build(),
             getFileInputStream(options.treejs),
-            getFileInputStream(options.treejs_css)
+            getFileInputStream(options.treejs_css),
+            getFileInputStream(options.clarodocs_css)
         );
 
     createOutputFile(options.out);

diff --git a/src/java/com/claro/module_system/clarodocs/clarodocs_rules.bzl b/src/java/com/claro/module_system/clarodocs/clarodocs_rules.bzl
@@ -24,6 +24,7 @@ def _clarodocs_impl(ctx):
     treejs_deps = {name: path for path, name in ctx.attr._treejs_deps.items()}
     args.add("--treejs", treejs_deps["tree.min.js"].files.to_list()[0])
     args.add("--treejs_css", treejs_deps["treejs.min.css"].files.to_list()[0])
+    args.add("--clarodocs_css", treejs_deps["clarodocs.css"].files.to_list()[0])
 
     args.add("--out", ctx.outputs.out.path)
 
@@ -68,6 +69,7 @@ _clarodocs_rule = rule(
             default = {
                 "//src/java/com/claro/module_system/clarodocs/html_rendering/homepage/treejs:tree.min.js": "tree.min.js",
                 "//src/java/com/claro/module_system/clarodocs/html_rendering/homepage/treejs:treejs.min.css": "treejs.min.css",
+                "//src/java/com/claro/module_system/clarodocs/html_rendering/homepage:clarodocs.css": "clarodocs.css",
             }
         ),
     },

diff --git a/src/java/com/claro/module_system/clarodocs/html_rendering/BUILD b/src/java/com/claro/module_system/clarodocs/html_rendering/BUILD
@@ -2,20 +2,17 @@ load("@io_bazel_rules_closure//closure:defs.bzl", "closure_java_template_library
 
 closure_java_template_library(
     name = "html_soy",
-    srcs = [
-        "code_block.soy",
-        "procedures.soy",
-        "tokens.soy",
-        "types.soy",
-        "utils.soy",
-    ],
+    srcs = glob(["*.soy"]),
     java_package = "com.claro.module_system.clarodocs.html_rendering",
     visibility = ["//src/java/com/claro/module_system/clarodocs/html_rendering:__subpackages__"],
 )
 
 java_library(
     name = "util",
     srcs = ["Util.java"],
-    deps = [":html_soy"],
+    deps = [
+        ":html_soy",
+        "//:guava",
+    ],
     visibility = ["//src/java/com/claro/module_system/clarodocs/html_rendering:__subpackages__"],
 )
diff --git a/src/java/com/claro/module_system/clarodocs/html_rendering/Util.java b/src/java/com/claro/module_system/clarodocs/html_rendering/Util.java
@@ -1,6 +1,8 @@
 package com.claro.module_system.clarodocs.html_rendering;
 
+import com.google.common.collect.ImmutableMap;
 import com.google.template.soy.SoyFileSet;
+import com.google.template.soy.data.SanitizedContent;
 import com.google.template.soy.tofu.SoyTofu;
 
 import java.util.Arrays;
@@ -14,13 +16,18 @@ public class Util {
   public static final SoyTofu SOY =
       SoyFileSet.builder()
           .add(Util.class.getResource("code_block.soy"))
+          .add(Util.class.getResource("contracts.soy"))
           .add(Util.class.getResource("procedures.soy"))
           .add(Util.class.getResource("tokens.soy"))
           .add(Util.class.getResource("types.soy"))
           .add(Util.class.getResource("utils.soy"))
           .build()
           .compileToTofu();
 
+  public static SanitizedContent renderSoy(SoyTofu soy, String templateName, ImmutableMap<String, Object> args) {
+    return soy.newRenderer("." + templateName).setData(args).renderHtml();
+  }
+
   public enum CssClass {
     TOKEN_GROUP_1("tokenGroup1"),
     TOKEN_GROUP_2("tokenGroup2"),

diff --git a/src/java/com/claro/module_system/clarodocs/html_rendering/contracts.soy b/src/java/com/claro/module_system/clarodocs/html_rendering/contracts.soy
@@ -0,0 +1,42 @@
+{namespace contracts}
+
+{template .contractDef}
+    {@param name: string}
+    {@param genericTypeParams: list<string>}
+    {@param signatures: list<html>}
+
+    {call codeblock.code}
+        {param class: 'contract-def' /}
+        {param id: '{$name}' /}
+        {param codeContent kind="html"}
+            {call tokens.CONTRACT /}{sp}{$name}
+            {call tokens.LT /}
+            {call utils.commaSep}
+                {param elems: $genericTypeParams /}
+            {/call}
+            {call tokens.GT /}
+            {sp}{lb}
+            {for $sig in $signatures}
+                {$sig}
+            {/for}
+            {rb}
+        {/param}
+    {/call}
+{/template}
+
+{template .contractImpl}
+    {@param name: string}
+    {@param genericTypeParams: list<html>}
+
+    {call codeblock.code}
+        {param class: 'contract-impl' /}
+        {param id: '{$name}' /}
+        {param codeContent kind="html"}
+            {call tokens.IMPLEMENT /} {$name} {call tokens.LT /}
+            {call utils.commaSep}
+                {param elems: $genericTypeParams /}
+            {/call}
+            {call tokens.GT /}{call tokens.SEMICOLON /}
+        {/param}
+    {/call}
+{/template}
diff --git a/src/java/com/claro/module_system/clarodocs/html_rendering/contracts/BUILD b/src/java/com/claro/module_system/clarodocs/html_rendering/contracts/BUILD
@@ -5,6 +5,7 @@ java_library(
     deps = [
         "//:guava",
         "//src/java/com/claro/intermediate_representation/types:types",
+        "//src/java/com/claro/module_system/clarodocs/html_rendering:html_soy",
         "//src/java/com/claro/module_system/clarodocs/html_rendering:util",
         "//src/java/com/claro/module_system/clarodocs/html_rendering/procedures:procedure_html",
         "//src/java/com/claro/module_system/clarodocs/html_rendering/typedefs:type_html",

diff --git a/src/java/com/claro/module_system/clarodocs/html_rendering/contracts/ContractHtml.java b/src/java/com/claro/module_system/clarodocs/html_rendering/contracts/ContractHtml.java
@@ -5,40 +5,38 @@
 import com.claro.module_system.clarodocs.html_rendering.procedures.ProcedureHtml;
 import com.claro.module_system.clarodocs.html_rendering.typedefs.TypeHtml;
 import com.claro.module_system.module_serialization.proto.SerializedClaroModule;
-import com.google.common.base.Joiner;
-
-import java.util.stream.Collectors;
-
-import static com.claro.module_system.clarodocs.html_rendering.Util.GrammarPart.*;
+import com.google.common.collect.ImmutableList;
+import com.google.common.collect.ImmutableMap;
+import com.google.template.soy.tofu.SoyTofu;
 
 public class ContractHtml {
-
-  private static final String CONTRACT_DEF_CLASS_NAME = "contract-def";
-  private static final String CONTRACT_DEF_TEMPLATE = CONTRACT + " %s" + LT + "%s" + GT + " {\n%s\n}";
-  private static final String CONTRACT_IMPL_CLASS_NAME = "contract-def";
-  private static final String CONTRACT_IMPL_TEMPLATE = IMPLEMENT + " %s" + LT + "%s" + GT + SEMICOLON;
+  private static final SoyTofu SOY = Util.SOY.forNamespace("contracts");
 
   public static void renderContractDefHtml(
       StringBuilder res, SerializedClaroModule.ExportedContractDefinition contractDef) {
-    res.append(String.format(
-        Util.wrapAsDefaultCodeBlock(CONTRACT_DEF_CLASS_NAME, contractDef.getName(), CONTRACT_DEF_TEMPLATE),
-        contractDef.getName().substring(0, contractDef.getName().indexOf('$')),
-        Joiner.on(", ").join(contractDef.getTypeParamNamesList()),
-        contractDef.getSignaturesList().stream()
-            .map(ProcedureHtml::generateProcedureHtml)
-            .collect(Collectors.joining("\n"))
-    ));
+    ImmutableMap.Builder<String, Object> args = ImmutableMap.builder();
+    args.put("name", contractDef.getName().substring(0, contractDef.getName().indexOf('$')))
+        .put("genericTypeParams", ImmutableList.copyOf(contractDef.getTypeParamNamesList()))
+        .put(
+            "signatures",
+            contractDef.getSignaturesList().stream()
+                .map(ProcedureHtml::generateProcedureHtml)
+                .collect(ImmutableList.toImmutableList())
+        );
+    res.append(Util.renderSoy(SOY, "contractDef", args.build()));
   }
 
   public static void renderContractImplHtml(
       StringBuilder res, SerializedClaroModule.ExportedContractImplementation contractImpl) {
     String implementedContractName = contractImpl.getImplementedContractName();
-    res.append(String.format(
-        Util.wrapAsDefaultCodeBlock(CONTRACT_IMPL_CLASS_NAME, implementedContractName, CONTRACT_IMPL_TEMPLATE),
-        implementedContractName.substring(0, implementedContractName.indexOf('$')),
-        contractImpl.getConcreteTypeParamsList().stream()
-            .map(t -> TypeHtml.renderTypeHtml(Types.parseTypeProto(t)).toString())
-            .collect(Collectors.joining(", "))
-    ));
+    ImmutableMap.Builder<String, Object> args = ImmutableMap.builder();
+    args.put("name", implementedContractName.substring(0, implementedContractName.indexOf('$')))
+        .put(
+            "genericTypeParams",
+            contractImpl.getConcreteTypeParamsList().stream()
+                .map(t -> TypeHtml.renderTypeHtml(Types.parseTypeProto(t)))
+                .collect(ImmutableList.toImmutableList())
+        );
+    res.append(Util.renderSoy(SOY, "contractImpl", args.build()));
   }
 }
diff --git a/src/java/com/claro/module_system/clarodocs/html_rendering/homepage/BUILD b/src/java/com/claro/module_system/clarodocs/html_rendering/homepage/BUILD
@@ -1,3 +1,4 @@
+exports_files(["clarodocs.css"])
 
 java_library(
     name = "homepage_html",

diff --git a/src/java/com/claro/module_system/clarodocs/html_rendering/homepage/HomePageHtml.java b/src/java/com/claro/module_system/clarodocs/html_rendering/homepage/HomePageHtml.java
@@ -13,9 +13,11 @@ public static String renderHomePage(
       ImmutableMap<String, String> moduleDocsByUniqueModuleName,
       ImmutableTable<String, String, String> typeDefHtmlByModuleNameAndTypeName,
       InputStream treeJSInputStream,
-      InputStream treeJSCSSInputStream) {
+      InputStream treeJSCSSInputStream,
+      InputStream claroDocsCSSInputStream) {
     String treeJS = readInputStream(treeJSInputStream);
     String treeJSCSS = readInputStream(treeJSCSSInputStream);
+    String claroDocsCSS = readInputStream(claroDocsCSSInputStream);
     return
         "<!DOCTYPE html>\n" +
         "<html>\n" +
@@ -24,85 +26,7 @@ public static String renderHomePage(
         "<link rel=\"stylesheet\" href=\"https://use.fontawesome.com/releases/v5.0.13/css/all.css\" integrity=\"sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp\" crossorigin=\"anonymous\">\n" +
         "<style>\n" +
         treeJSCSS + "\n" +
-        ".tokenGroup1 {\n" +
-        "  color: #CC7832;\n" +
-        "}\n" +
-        ".tokenGroup2 {\n" +
-        "  color: #3C85BA;\n" +
-        "}\n" +
-        ".tokenGroup3 {\n" +
-        "  color: #0F9795;\n" +
-        "}\n" +
-        ".tokenGroup4 {\n" +
-        "  color: #86A659;\n" +
-        "}\n" +
-        ".type-link {\n" +
-        "  text-decoration: underline;\n" +
-        "}\n" +
-        ".type-link:hover {\n" +
-        "  cursor: pointer;\n" +
-        "  background-color: #ccc;\n" +
-        "}\n" +
-        ".floating-div {\n" +
-        "  display: none;\n" +
-        "  position: absolute;\n" +
-        "  background-color: #272822;\n" +
-        "  color: #f8f8f2;\n" +
-        "  border: 2px dashed #ccc;\n" +
-        "  font-family: monospace;\n" +
-        "  padding: 10px;\n" +
-        "  z-index: 999;\n" +
-        "}\n" +
-        ".module-docs {\n" +
-        "  height: 100%;\n" +
-        "  margin-left: 300px; /* Same as the width of the sidenav */\n" +
-        "  font-family: monospace;\n" +
-        "  white-space: pre;\n" +
-        "  tab-size: 4;\n" +
-        "  background-color: #272822;\n" +
-        "  color: #f8f8f2;\n" +
-        "  overflow-x: scroll;\n" +
-        "}\n" +
-        ".procedure-def {\n" +
-        "  margin-left: 30px;" +
-        "}\n" +
-        ".initializers {\n" +
-        "  margin-left: 30px;" +
-        "}\n" +
-        ".unwrappers {\n" +
-        "  margin-left: 30px;" +
-        "}\n" +
-        ".contract-def {\n" +
-        "  margin-left: 30px;" +
-        "}\n" +
-        ".initializers .procedure-def {\n" +
-        "  margin-left: 60px;" +
-        "}\n" +
-        ".unwrappers .procedure-def {\n" +
-        "  margin-left: 60px;" +
-        "}\n" +
-        ".contract-def .procedure-def {\n" +
-        "  margin-left: 60px;" +
-        "}\n" +
-        "\n" +
-        ".tj_container {\n" +
-        "  height: 100%;\n" +
-        "  width: 300px;\n" +
-        "  position: fixed;\n" +
-        "  z-index: 1;\n" +
-        "  top: 0;\n" +
-        "  left: 0;\n" +
-        "  background-color: #111;\n" +
-        "  overflow-x: scroll;\n" +
-        "  padding-top: 20px;\n" +
-        "}\n" +
-        ".tj_container li {\n" +
-        "  color: white;\n" +
-        "}\n" +
-        "@media screen and (max-height: 450px) {\n" +
-        "  .sidenav {padding-top: 15px;}\n" +
-        "  .sidenav a {font-size: 18px;}\n" +
-        "}\n" +
+        claroDocsCSS + "\n" +
         "\n" +
         "</style>\n" +
         "</head>\n" +