Add regex debugger

Dockerfile

@@ -25,7 +25,7 @@ COPY ./Package.* ./
 RUN swift package resolve
 
 COPY . .
-RUN swift build -c release --static-swift-stdlib -Xswiftc -enable-testing
+RUN swift build -c release --static-swift-stdlib -Xswiftc -DPROCESSOR_MEASUREMENTS_ENABLED -Xswiftc -enable-testing
 
 WORKDIR /staging
 

Package.swift

@@ -7,7 +7,7 @@ let package = Package(
     .macOS(.v12)
   ],
   dependencies: [
-    .package(url: "https://github.com/apple/swift-experimental-string-processing.git", branch: "main"),
+    .package(url: "https://github.com/kishikawakatsumi/swift-experimental-string-processing.git", branch: "metrics"),
     .package(url: "https://github.com/vapor/vapor.git", from: "4.114.0"),
     .package(url: "https://github.com/vapor/leaf.git", from: "4.4.1"),
   ],
@@ -23,17 +23,6 @@ let package = Package(
         .unsafeFlags(["-cross-module-optimization"], .when(configuration: .release)),
       ]
     ),
-    .executableTarget(
-      name: "DSLParser",
-      dependencies: [
-        .product(name: "_StringProcessing", package: "swift-experimental-string-processing"),
-        .product(name: "_RegexParser", package: "swift-experimental-string-processing"),
-      ],
-      swiftSettings: [
-        .unsafeFlags(["-Xfrontend", "-disable-availability-checking"]),
-        .unsafeFlags(["-cross-module-optimization"], .when(configuration: .release)),
-      ]
-    ),
     .executableTarget(
       name: "ExpressionParser",
       dependencies: [
@@ -59,17 +48,19 @@ let package = Package(
     .executableTarget(
       name: "App",
       dependencies: [
+        .product(name: "_StringProcessing", package: "swift-experimental-string-processing"),
+        .product(name: "_RegexParser", package: "swift-experimental-string-processing"),
         .product(name: "Vapor", package: "vapor"),
         .product(name: "Leaf", package: "leaf"),
       ],
       swiftSettings: [
-        .unsafeFlags(["-cross-module-optimization"], .when(configuration: .release))
+        .unsafeFlags(["-Xfrontend", "-disable-availability-checking"]),
+        .unsafeFlags(["-cross-module-optimization"], .when(configuration: .release)),
       ]
     ),
     .testTarget(
       name: "RegexTests", dependencies: [
         .target(name: "DSLConverter"),
-        .target(name: "DSLParser"),
         .target(name: "ExpressionParser"),
         .target(name: "Matcher"),
         .target(name: "App"),

Public/css/common.css

@@ -1,8 +1,3 @@
-.nav-link {
-  padding: 2px 1rem;
-  min-width: 180px;
-}
-
 .active-tick .checkable::after {
   font-family: "Font Awesome 6 Pro";
   content: "\f00c";
@@ -54,6 +49,39 @@
   font-size: 90%;
 }
 
+.button-circle {
+  width: 2rem;
+  height: 2rem;
+}
+
+#debugger-button {
+  background-color: rgba(51, 51, 51, 0.05);
+  border-radius: 15px;
+  border-width: 0;
+  color: #333333;
+  cursor: pointer;
+  display: inline-block;
+  list-style: none;
+  margin: 0 6px;
+  padding: 4px 16px;
+  text-align: center;
+  transition: all 200ms;
+  vertical-align: baseline;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  font-size: 90%;
+}
+
+#debugger-button:hover {
+  background-color: #2222221a;
+}
+
+#debugger-regex {
+  font-family: Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
+}
+
 .dropdown-menu {
   min-width: 200px;
 }

Public/css/highlight.css

@@ -87,6 +87,9 @@
 span.match {
   background: rgba(112, 176, 224, 0.5);
   color: #101112;
+  border-right: solid 1px #ffffff;
+  border-left: solid 1px #ffffff;
+  margin-right: -2px;
 }
 span.error {
   color: #d22;
@@ -95,13 +98,18 @@ span.error {
 span.error.warning {
   color: #d22;
 }
-span.match {
-  border-right: solid 1px #ffffff;
-  border-left: solid 1px #ffffff;
-  margin-right: -2px;
-  margin-right: -2px;
-}
 span.highlight {
   background: rgba(255, 128, 0, 0.5);
   color: #101112;
 }
+
+span.debuggermatch {
+  background: rgba(112, 176, 224, 0.5);
+  color: #101112;
+  border-right: solid 1px rgba(112, 176, 224, 0.5);
+  border-left: solid 1px rgba(112, 176, 224, 0.5);
+}
+
+span.debuggerbacktrack {
+  background: rgba(255, 0, 0, 0.2);
+}

Public/index.html

@@ -33,7 +33,6 @@
         <h1 class="h5 my-2">
           <a class="text-decoration-none" href="/">
             <span class="fab fa-swift fa-lg text-primary"></span><span class="ms-2 me-1 text-dark">Swift Regex</span>
-            <span class="text-muted me-1">β</span>
           </a>
         </h1>
       </div>
@@ -145,6 +144,7 @@ <h1 class="h5 my-2">
               </div>
               <div class="col align-self-center">
                 <div class="text-end mt-2">
+                  <button id="debugger-button" data-bs-toggle="modal" data-bs-target="#debugger-modal">Debug</button>
                   <span id="match-count" class="text-bg-light border px-3 py-1">no match</span>
                 </div>
               </div>
@@ -163,6 +163,80 @@ <h1 class="h5 my-2">
       </div>
     </div>
 
+    <div class="modal fade" id="debugger-modal" tabindex="-1" aria-labelledby="debugger-modal-title" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-scrollable modal-xl">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h1 class="modal-title fs-5" id="debugger-modal-title">Regex Debugger</h1>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
+            <div class="d-flex">
+              <div class="me-4" style="max-width: 40%;">
+                <div style="font-weight: 600;">Metrics</div>
+                <div class="border my-2" style="font-size: 90%;">
+                  <table class="table table-borderless table-sm my-0">
+                    <thead>
+                      <tr>
+                        <th>Cycle Count</th>
+                        <th>Resets</th>
+                        <th>Backtracks</th>
+                      </tr>
+                    <tbody>
+                      <tr class="font-monospace">
+                        <td id="debugger-total-cycle-count">0</td>
+                        <td id="debugger-resets">0</td>
+                        <td id="debugger-backtracks">0</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+
+                <div style="overflow: auto;">
+                  <div class="my-2" style="font-weight: 600;">Instructions</div>
+                  <div class="my-2" style="font-size: 90%;">
+                    <table class="border table table-borderless table-sm font-monospace">
+                      <tbody id="debugger-instructions">
+                      </tbody>
+                    </table>
+                  </div>
+                </div>
+              </div>
+
+              <div class="flex-grow-1">
+                <label for="debugger-step-range" class="form-label" style="font-weight: 600;">Match Steps</label>
+                <input id="debugger-step-range" type="range" class="form-range" value="1" min="1" max="100">
+                <p class="mb-0" style="text-align: center">
+                  <button id="debugger-go-start" class="btn btn-sm btn-outline-secondary rounded-circle button-circle">
+                    <i class="fa-solid fa-backward-step fa-lg"></i>
+                  </button>
+                  <button id="debugger-step-backward"
+                    class="btn btn-sm btn-outline-secondary rounded-circle button-circle">
+                    <i class="fa-solid fa-caret-left fa-lg"></i>
+                  </button>
+                  <button id="debugger-step-forward"
+                    class="btn btn-sm btn-outline-secondary rounded-circle button-circle">
+                    <i class="fa-solid fa-caret-right fa-lg"></i>
+                  </button>
+                  <button id="debugger-go-end" class="btn btn-sm btn-outline-secondary rounded-circle button-circle">
+                    <i class="fa-solid fa-forward-step fa-lg"></i>
+                  </button>
+                </p>
+
+                <div class="my-1" style="font-weight: 600;">Match Step <span id="debugger-match-step"></span></div>
+                <div id="debugger-regex" class="border mb-3">
+                </div>
+
+                <div class="border my-3">
+                  <div id="debugger-text-container" class="editor multiline"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <footer class="p-2">
       <div class="row">
         <div class="col text-center">

Public/index.js

@@ -11,4 +11,4 @@ import "./js/misc/icons";
 import "bootstrap";
 import { App } from "./js/app";
 
-const app = new App();
+new App();