feat(new tool): Stacktrace Formatter

Fix CorentinTh#631

src/tools/index.ts

@@ -2,6 +2,7 @@ import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
 import { tool as emailNormalizer } from './email-normalizer';
+import { tool as stacktracePrettier } from './stacktrace-prettier';
 
 import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
@@ -160,6 +161,7 @@ export const toolsByCategory: ToolCategory[] = [
       emailNormalizer,
       regexTester,
       regexMemo,
+      stacktracePrettier,
     ],
   },
   {

src/tools/stacktrace-prettier/index.ts

@@ -0,0 +1,12 @@
+import { Stack } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Stacktrace prettier',
+  path: '/stacktrace-prettier',
+  description: 'Highlight .Net and JS stacktraces',
+  keywords: ['stacktrace', 'prettier', 'highlighter'],
+  component: () => import('./stacktrace-prettier.vue'),
+  icon: Stack,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/stacktrace-prettier/stacktrace-prettier.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import jsStack from 'jsstack.js';
+import netStack from 'netstack.js';
+import domtoimage from 'dom-to-image-more';
+import { useQueryParamOrStorage } from '@/composable/queryParams';
+import { useCopy } from '@/composable/copy';
+
+const stackType = useQueryParamOrStorage<'net' | 'js'>({ name: 'type', storageName: 'stackfmt:type', defaultValue: 'net' });
+const stackTrace = ref('');
+const formatedStackTrace = ref<HTMLElement>();
+
+watch(stackTrace, () => {
+  try {
+    if (stackType.value === 'js') {
+      jsStack(formatedStackTrace.value);
+    }
+    else if (stackType.value === 'net') {
+      netStack(formatedStackTrace.value, { prettyprint: true });
+    }
+  }
+  catch {}
+});
+//
+//
+
+const stackTraceMarkdown = computed(() => {
+  const lang = stackType.value === 'net' ? 'csharp' : 'javascript';
+  return `\`\`\`${lang}\n${formatedStackTrace.value?.innerText}\n\`\`\``;
+});
+const stackTraceText = computed(() => formatedStackTrace.value?.innerText);
+
+const { copy: copyText } = useCopy({ source: stackTraceText, text: 'Formatted stacktrace copied to the clipboard' });
+const { copy: copyMarkdown } = useCopy({ source: stackTraceMarkdown, text: 'Markdown Formatted stacktrace copied to the clipboard' });
+
+async function downloadAsPNG() {
+  const dataUrl = await domtoimage.toPng(formatedStackTrace.value);
+  const link = document.createElement('a');
+  link.download = 'stacktrace.png';
+  link.href = dataUrl;
+  link.click();
+}
+</script>
+
+<template>
+  <div>
+    <n-radio-group v-model:value="stackType" name="radiogroup" mb-2 flex justify-center>
+      <n-space>
+        <n-radio
+          value="net"
+          label=".Net"
+        />
+        <n-radio
+          value="js"
+          label="Javascript"
+        />
+      </n-space>
+    </n-radio-group>
+
+    <c-input-text
+      label="Stacktrace"
+      placeholder="Paste your stacktrace here.."
+      multiline
+      rows="5"
+      :value="stackTrace"
+    />
+
+    <n-divider />
+
+    <div ref="formatedStackTrace" />
+
+    <div v-if="stackTraceText" flex justify-center>
+      <c-button @click="copyText()">
+        Copy Formatted (Text)
+      </c-button>
+      <c-button @click="copyMarkdown()">
+        Copy Formatted (Markdown)
+      </c-button>
+      <c-button @click="downloadAsPNG()">
+        Download as PNG
+      </c-button>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped v-if="stackType === 'net'">
+pre, code {background-color:#333; color: #ffffff;}
+.st-type {color: #0a8472; font-weight: bolder;}
+.st-method {color: #70c9ba; font-weight: bolder;}
+.st-frame-params {color: #ffffff; font-weight: normal;}
+.st-param-type {color: #0a8472;}
+.st-param-name {color: #ffffff;}
+.st-file {color:#f8b068;}
+.st-line {color:#ff4f68;}
+</style>
+
+<style lang="less" scoped v-if="stackType === 'js'">
+pre {padding: 20px 10px;}
+pre, code {background-color: #333;color: #ffffff;}
+.st-methodName {color: #70c9ba;font-weight: bolder;}
+.st-column {color: #f8b068;}
+.st-lineNumber {color: #ff4f68;}
+.st-fileName {color: #85dbff;}
+</style>