tauri-plugin-debug-tools 0.1.0

package/examples/src/main.js

@@ -0,0 +1,91 @@
+const { invoke } = window.__TAURI__.core;
+const { listen } = window.__TAURI__.event ?? {};
+
+let greetInputEl;
+let greetMsgEl;
+let debugWebviewOutputEl;
+let debugLogsOutputEl;
+let debugCommandOutputEl;
+let debugSnapshotOutputEl;
+
+async function greet() {
+  // Learn more about Tauri commands at https://tauri.app/develop/calling-rust/
+  greetMsgEl.textContent = await invoke("greet", { name: greetInputEl.value });
+}
+
+window.addEventListener("DOMContentLoaded", () => {
+  greetInputEl = document.querySelector("#greet-input");
+  greetMsgEl = document.querySelector("#greet-msg");
+  document.querySelector("#greet-form").addEventListener("submit", (e) => {
+    e.preventDefault();
+    greet();
+  });
+
+  debugWebviewOutputEl = document.querySelector("#debug-webview-output");
+  debugLogsOutputEl = document.querySelector("#debug-logs-output");
+  debugCommandOutputEl = document.querySelector("#debug-command-output");
+  debugSnapshotOutputEl = document.querySelector("#debug-snapshot-output");
+
+  if (listen) {
+    listen("debug-command", (event) => {
+      debugCommandOutputEl.textContent = JSON.stringify(event.payload);
+    });
+  }
+
+  document
+    .querySelector("#debug-capture")
+    .addEventListener("click", async () => {
+      const state = await invoke("plugin:debug-tools|capture_webview_state");
+      debugWebviewOutputEl.textContent = JSON.stringify(state);
+    });
+
+  document
+    .querySelector("#debug-get-logs")
+    .addEventListener("click", async () => {
+      const logs = await invoke("plugin:debug-tools|get_console_logs");
+      debugLogsOutputEl.textContent = JSON.stringify(logs);
+    });
+
+  document
+    .querySelector("#debug-send-command")
+    .addEventListener("click", async () => {
+      await invoke("plugin:debug-tools|send_debug_command", {
+        command: "ping",
+        payload: { ok: true },
+      });
+    });
+
+  document
+    .querySelector("#debug-reset-logs")
+    .addEventListener("click", async () => {
+      const path = await invoke("plugin:debug-tools|reset_debug_logs");
+      debugLogsOutputEl.textContent = String(path);
+    });
+
+  document
+    .querySelector("#debug-append-logs")
+    .addEventListener("click", async () => {
+      const payload = [
+        {
+          timestamp: Date.now(),
+          level: "info",
+          message: "e2e-log",
+          args: ["e2e-log"],
+          stack_trace: null,
+        },
+      ];
+      const path = await invoke("plugin:debug-tools|append_debug_logs", {
+        logs: payload,
+      });
+      debugLogsOutputEl.textContent = String(path);
+    });
+
+  document
+    .querySelector("#debug-write-snapshot")
+    .addEventListener("click", async () => {
+      const path = await invoke("plugin:debug-tools|write_debug_snapshot", {
+        payload: { source: "e2e", ok: true },
+      });
+      debugSnapshotOutputEl.textContent = String(path);
+    });
+});

package/examples/src/styles.css

@@ -0,0 +1,112 @@
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #ffe21c);
+}
+:root {
+  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 24px;
+  font-weight: 400;
+
+  color: #0f0f0f;
+  background-color: #f6f6f6;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+.container {
+  margin: 0;
+  padding-top: 10vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: 0.75s;
+}
+
+.logo.tauri:hover {
+  filter: drop-shadow(0 0 2em #24c8db);
+}
+
+.row {
+  display: flex;
+  justify-content: center;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+h1 {
+  text-align: center;
+}
+
+input,
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  color: #0f0f0f;
+  background-color: #ffffff;
+  transition: border-color 0.25s;
+  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+button {
+  cursor: pointer;
+}
+
+button:hover {
+  border-color: #396cd8;
+}
+button:active {
+  border-color: #396cd8;
+  background-color: #e8e8e8;
+}
+
+input,
+button {
+  outline: none;
+}
+
+#greet-input {
+  margin-right: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    color: #f6f6f6;
+    background-color: #2f2f2f;
+  }
+
+  a:hover {
+    color: #24c8db;
+  }
+
+  input,
+  button {
+    color: #ffffff;
+    background-color: #0f0f0f98;
+  }
+  button:active {
+    background-color: #0f0f0f69;
+  }
+}