Merge pull request #200 from SwiftFiddle/syntax

Improve syntax view

Author: kishikawakatsumi

Public/css/popover.css

@@ -50,6 +50,12 @@
   white-space: pre-line;
 }
 
-.popover-content dd .badge {
-  margin: 0 8px 0 8px;
+.popover-content .badge.annotation {
+  width: 48px;
+  text-align: end;
+  font-size: 0.8rem;
+  margin: 0 8px 0 0;
+  padding: 0;
+  color: #808080;
+  background-color: transparent;
 }

Public/js/syntax_view.js

@@ -38,7 +38,12 @@ export class SyntaxView {
             .parents("span")
             .each(function (index, element) {
               createDOMRectElement(element.getBoundingClientRect());
-              contents.push([element.dataset.title, element.dataset.content]);
+              contents.push({
+                title: element.dataset.title,
+                content: element.dataset.content,
+                type: element.dataset.type,
+                range: element.dataset.range,
+              });
               if (index > 0) {
                 return false;
               }
@@ -48,13 +53,35 @@ export class SyntaxView {
           element.style.backgroundColor = "rgba(81, 101, 255, 0.5)";
 
           contents.reverse();
-          contents.push([element.dataset.title, element.dataset.content]);
+          contents.push({
+            title: element.dataset.title,
+            content: element.dataset.content,
+            type: element.dataset.type,
+            range: element.dataset.range,
+          });
 
-          const dl = `<dl>${contents
-            .map((content) => {
-              return `<dt>${content[0]}</dt><dd>${content[1]}</dd>`;
+          const list = contents
+            .filter(
+              (item, index, self) =>
+                index ===
+                self.findIndex(
+                  (t) =>
+                    t.title === item.title &&
+                    t.content === item.content &&
+                    t.range === item.range
+                )
+            )
+            .map((item) => {
+              if (item.range) {
+                const range = JSON.parse(item.range);
+                const sourceRange = `${range.startRow}:${range.startColumn} - ${range.endRow}:${range.endColumn}`;
+                return `<dt class="text-truncate" style="max-width: calc(40vw - 20px);"><span class="badge annotation" style="width: auto; text-align: start;">Text</span>${item.title}</dt><dd><div><span class="badge annotation">Range</span>${sourceRange}</div><div><span class="badge annotation">${item.type}</span>${item.content}</div></dd>`;
+              } else {
+                return `<dt class="text-truncate" style="max-width: calc(40vw - 20px);"><span class="badge annotation" style="width: auto; text-align: start;">Text</span>${item.title}</dt><dd><div><span class="badge annotation">${item.type}</span>${item.content}</div></dd>`;
+              }
             })
-            .join("")}</dl>`;
+            .join("");
+          const dl = `<dl>${list}</dl>`;
           popover.content = dl;
 
           popover.show(element, {

Sources/App/Controllers/TokenVisitor.swift

@@ -16,11 +16,40 @@ final class TokenVisitor: SyntaxRewriter {
   }
 
   override func visitPre(_ node: Syntax) {
-    var syntax = "\(node.syntaxNodeType)"
-    if syntax.hasSuffix("Syntax") {
-      syntax = String(syntax.dropLast(6))
+    let syntaxNodeType = node.syntaxNodeType
+
+    let className: String
+    if "\(syntaxNodeType)".hasSuffix("Syntax") {
+      className = String("\(syntaxNodeType)".dropLast(6))
+    } else {
+      className = "\(syntaxNodeType)"
+    }
+
+    let content: String
+    let type: String
+    if let tokenSyntax = node.as(TokenSyntax.self) {
+      content = "\(tokenSyntax.tokenKind)"
+      type = "Token"
+    } else {
+      content = "\(syntaxNodeType)"
+      type = "Syntax"
     }
-    list.append("<span class='\(syntax)' data-title='Syntax' data-content='\(syntax)'>")
+
+    let sourceRange = node.sourceRange(converter: converter)
+    let start = sourceRange.start
+    let end = sourceRange.end
+    let startRow = start.line ?? 1
+    let startColumn = start.column ?? 1
+    let endRow = end.line ?? 1
+    let endColumn = end.column ?? 1
+
+    list.append(
+      "<span class='\(className)' " +
+      "data-title='\("\(node.withoutTrivia())".replacingOccurrences(of: "\n", with: "↲"))' " +
+      "data-content='\(content)' " +
+      "data-type='\(type)' " +
+      #"data-range='{"startRow":\#(startRow),"startColumn":\#(startColumn),"endRow":\#(endRow),"endColumn":\#(endColumn)}'>"#
+    )
 
     let syntaxType: SyntaxType
     switch node {
@@ -36,18 +65,14 @@ final class TokenVisitor: SyntaxRewriter {
       syntaxType = .other
     }
 
-    let sourceRange = node.sourceRange(converter: converter)
-    let start = sourceRange.start
-    let end = sourceRange.end
-
     let treeNode = TreeNode(
       id: index,
-      text: syntax,
+      text: className,
       range: Range(
-        startRow: start.line.flatMap { $0 } ?? 1,
-        startColumn: start.column.flatMap { $0 } ?? 1,
-        endRow: end.line.flatMap { $0 } ?? 1,
-        endColumn: end.column.flatMap { $0 } ?? 1
+        startRow: startRow,
+        startColumn: startColumn,
+        endRow: endRow,
+        endColumn: endColumn
       ),
       type: syntaxType
     )
@@ -134,14 +159,26 @@ final class TokenVisitor: SyntaxRewriter {
       kind = "keyword"
     }
 
+    let sourceRange = token.sourceRange(converter: converter)
+    let start = sourceRange.start
+    let end = sourceRange.end
+    let startRow = start.line ?? 1
+    let startColumn = start.column ?? 1
+    let endRow = end.line ?? 1
+    let endColumn = end.column ?? 1
     list.append(
-      "<span class='token \(kind)' data-title='Token' data-content='\(token.tokenKind)'>\(escapeHtmlSpecialCharacters(token.text))</span>"
+      "<span class='token \(kind)' " +
+      "data-title='\(token.withoutTrivia())' " +
+      "data-content='\(token.tokenKind)' " +
+      "data-type='Token' " +
+      #"data-range='{"startRow":\#(startRow),"startColumn":\#(startColumn),"endRow":\#(endRow),"endColumn":\#(endColumn)}'>"# +
+      "\(escapeHtmlSpecialCharacters(token.text))</span>"
     )
   }
 
   private func processTriviaPiece(_ piece: TriviaPiece) -> String {
     func wrapWithSpanTag(class c: String, text: String) -> String {
-      "<span class='\(c)' data-title='Trivia' data-content='\(c)'>\(escapeHtmlSpecialCharacters(text))</span>"
+      "<span class='\(c)' data-title='\(piece)' data-content='\(c)' data-type='Trivia'>\(escapeHtmlSpecialCharacters(text))</span>"
     }
 
     var trivia = ""