Add linked type selection and a WebAssembly app

Author: Kyle-Ye

.github/workflows/deploy-pages.yml

@@ -0,0 +1,82 @@
+name: Deploy to GitHub Pages
+
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+permissions:
+  contents: read
+
+concurrency:
+  group: pages
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    container: swift:6.2.3
+    timeout-minutes: 20
+    permissions:
+      contents: read
+      pages: read
+    steps:
+      - name: Check out source
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
+        with:
+          persist-credentials: false
+
+      - name: Set up Node.js
+        uses: actions/setup-node@949feb2413d6458794dcd2491c4babbbce0c15c1 # v7
+        with:
+          node-version: 24
+          cache: npm
+          cache-dependency-path: Web/package-lock.json
+
+      - name: Configure Pages
+        uses: actions/configure-pages@45bfe0192ca1faeb007ade9deae92b16b8254a0d # v6
+
+      - name: Install the Swift WebAssembly SDK
+        id: swiftwasm
+        uses: swiftwasm/setup-swiftwasm@44f4367dbda85a1394b6d346d3f699a7c766b064 # v2
+        with:
+          target: wasm32-unknown-wasip1
+
+      - name: Test Core
+        run: swift test --package-path Packages/TypeAliasFormatterCore
+
+      - name: Install browser build tools
+        working-directory: Web
+        run: npm ci
+
+      - name: Build WebAssembly
+        working-directory: Web
+        run: PATH="$PWD/node_modules/.bin:$PATH" swift package --swift-sdk "${{ steps.swiftwasm.outputs.swift-sdk-id }}" js -c release
+
+      - name: Build and test the site
+        working-directory: Web
+        run: |
+          npm run build
+          npx playwright install --with-deps --only-shell chromium
+          npm test
+
+      - name: Upload site
+        uses: actions/upload-pages-artifact@fc324d3547104276b827a68afc52ff2a11cc49c9 # v5
+        with:
+          path: Web/dist
+
+  deploy:
+    if: github.ref == 'refs/heads/main'
+    needs: build
+    runs-on: ubuntu-latest
+    timeout-minutes: 10
+    permissions:
+      pages: write
+      id-token: write
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@368f82528645a54fb793d4d04e342629a3f51346 # v5

.gitignore

@@ -9,3 +9,6 @@ dist/
 *.xcworkspace/
 *.xcresult/
 *.log
+node_modules/
+test-results/
+playwright-report/

App/Sources/CodeEditor.swift

@@ -1,11 +1,14 @@
 import AppKit
 import SwiftUI
+import TypeAliasFormatterCore
 
 struct CodeEditor: NSViewRepresentable {
     @Binding var text: String
     var editable: Bool
     var accessibilityLabel: String
     var wrapsLines = false
+    var linkedRange: UTF16Range?
+    var onSelectionChange: (NSRange) -> Void = { _ in }
 
     func makeNSView(context: Context) -> NSScrollView {
         let scrollView = NSScrollView()
@@ -49,9 +52,24 @@ struct CodeEditor: NSViewRepresentable {
             configureWrapping(textView, in: scrollView)
             context.coordinator.wrapsLines = wrapsLines
         }
-        guard textView.string != text else { return }
-        textView.string = text
-        if !editable { highlight(textView) }
+        context.coordinator.isUpdating = true
+        defer { context.coordinator.isUpdating = false }
+        let changed = textView.string != text
+        if changed {
+            textView.string = text
+            if !editable { highlight(textView) }
+        }
+        if changed || context.coordinator.linkedRange != linkedRange {
+            let length = textView.string.utf16.count
+            textView.layoutManager?.removeTemporaryAttribute(.backgroundColor, forCharacterRange: NSRange(location: 0, length: length))
+            if let linkedRange, linkedRange.lowerBound >= 0, linkedRange.upperBound <= length, linkedRange.count > 0 {
+                let range = NSRange(location: linkedRange.lowerBound, length: linkedRange.count)
+                textView.layoutManager?.addTemporaryAttribute(.backgroundColor,
+                    value: NSColor.controlAccentColor.withAlphaComponent(0.22), forCharacterRange: range)
+                textView.scrollRangeToVisible(NSRange(location: range.location, length: 1))
+            }
+            context.coordinator.linkedRange = linkedRange
+        }
     }
 
     func makeCoordinator() -> Coordinator { Coordinator(self) }
@@ -110,12 +128,20 @@ struct CodeEditor: NSViewRepresentable {
     final class Coordinator: NSObject, NSTextViewDelegate {
         var parent: CodeEditor
         var wrapsLines: Bool?
+        var linkedRange: UTF16Range?
+        var isUpdating = false
 
         init(_ parent: CodeEditor) { self.parent = parent }
 
         func textDidChange(_ notification: Notification) {
             guard let textView = notification.object as? NSTextView else { return }
             parent.text = textView.string
         }
+
+        func textViewDidChangeSelection(_ notification: Notification) {
+            guard !isUpdating, let textView = notification.object as? NSTextView,
+                  textView.string == parent.text else { return }
+            parent.onSelectionChange(textView.selectedRange())
+        }
     }
 }

App/Sources/ContentView.swift

@@ -8,6 +8,7 @@ private enum OutputMode: String, CaseIterable, Identifiable {
     case graph = "Graph"
 
     var id: Self { self }
+    var title: String { self == .text ? "Text tree" : "Graph" }
     var fileExtension: String { self == .text ? "txt" : "svg" }
     var contentType: UTType { UTType(filenameExtension: fileExtension) ?? .plainText }
 }
@@ -21,8 +22,8 @@ private struct FormatRequest: Hashable, Sendable {
 
 struct ContentView: View {
     @State private var source = ""
-    @State private var formatted = ""
-    @State private var graph: TypeGraphNode?
+    @State private var conversion: FormattedType?
+    @State private var selectedID: String?
     @State private var collapsedNodes: Set<String> = []
     @State private var completedRequest: FormatRequest?
     @State private var formatError: String?
@@ -34,6 +35,27 @@ struct ContentView: View {
     @AppStorage("expandSingleArguments") private var expandSingleArguments = false
     @AppStorage("presentationMode") private var outputMode: OutputMode = .text
 
+    private var formatted: String { conversion?.text ?? "" }
+    private var graph: TypeGraphNode? { conversion?.graph }
+    private var selectedMapping: TypeMapping? {
+        guard isCurrent else { return nil }
+        return conversion?.mappings.first { $0.id == selectedID }
+    }
+
+    private func selectNode(_ id: String?) {
+        selectedID = id
+        guard let id else { return }
+        let parts = id.split(separator: ".")
+        for length in 1..<parts.count {
+            collapsedNodes.remove(parts.prefix(length).joined(separator: "."))
+        }
+    }
+
+    private func selectRange(_ range: NSRange, in representation: TypeRepresentation) {
+        guard isCurrent, let conversion else { return }
+        selectNode(conversion.mapping(containing: UTF16Range(range.location, NSMaxRange(range)), in: representation)?.id)
+    }
+
     private var request: FormatRequest {
         FormatRequest(source: source, indentation: indentation,
                       expandSingleArguments: expandSingleArguments, revision: revision)
@@ -103,6 +125,7 @@ struct ContentView: View {
         }
         .task(id: request) { await format(request) }
         .onChange(of: output) { copied = false }
+        .onChange(of: source) { selectedID = nil }
         .onChange(of: outputMode) { copied = false }
         .onChange(of: collapsedNodes) { copied = false }
         .alert("File operation failed", isPresented: Binding(
@@ -134,7 +157,7 @@ struct ContentView: View {
                         .disabled(source.isEmpty)
                 } else {
                     Picker("Output format", selection: $outputMode) {
-                        ForEach(OutputMode.allCases) { Text($0.rawValue).tag($0) }
+                        ForEach(OutputMode.allCases) { Text($0.title).tag($0) }
                     }
                     .pickerStyle(.segmented)
                     .labelsHidden()
@@ -146,12 +169,15 @@ struct ContentView: View {
             .background(.bar)
             Divider()
             if !isInput, outputMode == .graph, canExport, let graph, let graphLayout {
-                TypeGraphView(root: graph, layout: graphLayout, collapsed: $collapsedNodes)
+                TypeGraphView(root: graph, layout: graphLayout, collapsed: $collapsedNodes,
+                              selectedID: selectedID, onSelect: selectNode)
             } else {
                 ZStack(alignment: .topLeading) {
                     CodeEditor(text: isInput ? $source : .constant(output),
                                editable: isInput, accessibilityLabel: isInput ? "Source typealias" : "Formatted output",
-                               wrapsLines: isInput && wrapSourceLines)
+                               wrapsLines: isInput && wrapSourceLines,
+                               linkedRange: isInput ? selectedMapping?.sourceRange : selectedMapping?.formattedRange,
+                               onSelectionChange: { selectRange($0, in: isInput ? .source : .formatted) })
                     if (isInput ? source : output).isEmpty {
                         Text(isInput ? "Paste a typealias or type here…" : "Converted output appears here.")
                             .font(.system(size: 13, design: .monospaced))
@@ -192,8 +218,7 @@ struct ContentView: View {
         do { try await Task.sleep(for: .milliseconds(180)) } catch { return }
         guard !Task.isCancelled else { return }
         if request.source.trimmingCharacters(in: .whitespacesAndNewlines).isEmpty {
-            formatted = ""
-            graph = nil
+            conversion = nil
             formatError = nil
             completedRequest = request
             return
@@ -207,17 +232,15 @@ struct ContentView: View {
         guard !Task.isCancelled else { return }
         switch result {
         case let .success(value):
-            formatted = value.text
             if graph != value.graph {
-                graph = value.graph
                 collapsedNodes = Set(GraphLayout(root: value.graph).nodes.filter {
                     $0.id.split(separator: ".").count >= 3 && $0.childCount > 0
                 }.map(\.id))
             }
+            conversion = value
             formatError = nil
         case let .failure(error):
-            formatted = ""
-            graph = nil
+            conversion = nil
             formatError = error.localizedDescription
         }
         completedRequest = request