feat: python/java formats + wrap option

package.json

@@ -68,6 +68,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "javastack.js": "^1.0.2",
     "js-base64": "^3.7.6",
     "json5": "^2.2.3",
     "jsstack.js": "^2.0.0",
@@ -87,6 +88,7 @@
     "pdf-signature-reader": "^1.4.2",
     "pinia": "^2.0.34",
     "plausible-tracker": "^0.3.8",
+    "pythonstack.js": "^1.0.2",
     "qrcode": "^1.5.1",
     "randexp": "^0.5.3",
     "sql-formatter": "^13.0.0",

pnpm-lock.yaml

@@ -104,6 +104,9 @@ dependencies:
   ibantools:
     specifier: ^4.3.3
     version: 4.3.3
+  javastack.js:
+    specifier: ^1.0.2
+    version: 1.0.2
   js-base64:
     specifier: ^3.7.6
     version: 3.7.7
@@ -161,6 +164,9 @@ dependencies:
   plausible-tracker:
     specifier: ^0.3.8
     version: 0.3.8
+  pythonstack.js:
+    specifier: ^1.0.2
+    version: 1.0.2
   qrcode:
     specifier: ^1.5.1
     version: 1.5.1
@@ -4252,8 +4258,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /b4a@1.6.6:
-    resolution: {integrity: sha512-5Tk1HLk6b6ctmjIkAcU/Ujv/1WqiDl0F0JdRCR80VsOcUlHcu7pWeWRlOqQLHfDEsVx9YH/aif5AG4ehoCtTmg==}
+  /b4a@1.6.7:
+    resolution: {integrity: sha512-OnAYlL5b7LEkALw87fUVafQw5rVR9RjwGd4KUwNQ6DrrNmaVaUCgLipfVlzrPQ4tWOR9P0IXGNOx50jYCCdSJg==}
     dev: false
 
   /babel-merge@3.0.0(@babel/core@7.23.2):
@@ -4314,8 +4320,8 @@ packages:
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
 
-  /bare-events@2.4.2:
-    resolution: {integrity: sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==}
+  /bare-events@2.5.0:
+    resolution: {integrity: sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==}
     requiresBuild: true
     dev: false
     optional: true
@@ -6843,6 +6849,10 @@ packages:
     resolution: {integrity: sha512-nO6jcEfZWQXDhOiBtG2KvKyEptz7RVbpGP4vTD2hLBdmNQSsCiicO2Ioinv6UI4y9ukqnBpy+XZ9H6uLNgJTlw==}
     dev: false
 
+  /javastack.js@1.0.2:
+    resolution: {integrity: sha512-mL+Bi0grhJdV6gY1XcAgS9q45XJRYzo7f9jAO4rb7QnaH1LCb8KzKV4BIM71ifq/xb8kvWwdGU/GhBVSQBwE9g==}
+    dev: false
+
   /jest-worker@26.6.2:
     resolution: {integrity: sha512-KWYVV1c4i+jbMpaBC+U++4Va0cp8OisU185o73T1vo99hqi7w8tSJfUXYswwqqrjzwxa6KpRK54WhPvwf5w6PQ==}
     engines: {node: '>= 10.13.0'}
@@ -8174,6 +8184,10 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /pythonstack.js@1.0.2:
+    resolution: {integrity: sha512-qAkODfsYHdg0PJwhoO+8UX7jW4ViqfxXoJNE43s9GbjO7j0IvwlKKHX49R6PQ46d2JGL9l1NBttaxEDl4P/4Nw==}
+    dev: false
+
   /qrcode@1.5.1:
     resolution: {integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==}
     engines: {node: '>=10.13.0'}
@@ -8789,7 +8803,7 @@ packages:
       queue-tick: 1.0.1
       text-decoder: 1.2.0
     optionalDependencies:
-      bare-events: 2.4.2
+      bare-events: 2.5.0
     dev: false
 
   /string-width@4.2.3:
@@ -8984,7 +8998,7 @@ packages:
   /text-decoder@1.2.0:
     resolution: {integrity: sha512-n1yg1mOj9DNpk3NeZOx7T6jchTbyJS3i3cucbNN6FcdPriMZx7NsgrGpWWdWZZGxD7ES1XB+3uoqHMgOKaN+fg==}
     dependencies:
-      b4a: 1.6.6
+      b4a: 1.6.7
     dev: false
 
   /text-table@0.2.0:

src/tools/stacktrace-prettier/javastack.js.d.ts

@@ -0,0 +1,3 @@
+declare module "javastack.js" {
+    export default function javastack(selector: string, options: { prettyprint: boolean }) : void;
+}

src/tools/stacktrace-prettier/pythonstack.js.d.ts

@@ -0,0 +1,3 @@
+declare module "pythonstack.js" {
+    export default function pythonstack(selector: string, options: { prettyprint: boolean }) : void;
+}

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import JSStack from 'jsstack.js';
+import JavaStack from 'javastack.js';
+import PythonStack from 'pythonstack.js';
 import NetStack from 'netstack.js';
 import domtoimage from 'dom-to-image-more';
 import { useQueryParamOrStorage } from '@/composable/queryParams';
@@ -8,7 +10,7 @@ import { useCopy } from '@/composable/copy';
 
 const styleStore = useStyleStore();
 
-const stackType = useQueryParamOrStorage<'net' | 'js'>({ name: 'type', storageName: 'stackfmt:type', defaultValue: 'net' });
+const stackType = useQueryParamOrStorage<'net' | 'js' | 'java' | 'python'>({ name: 'type', storageName: 'stackfmt:type', defaultValue: 'net' });
 const stackTrace = ref('');
 const formatedStackTrace = ref<HTMLElement>();
 
@@ -17,13 +19,28 @@ watchEffect(() => {
   if (!formatedStackTrace.value) {
     return;
   }
+  let cleanedStackTrace;
+  try {
+    cleanedStackTrace = JSON.parse(stackTrace.value);
+  }
+  catch (_) {
+    cleanedStackTrace = stackTrace.value.replace(/(\\r)?\\n/g, '\n').replace(/(?:^['"])|(?:['"]$)/, '');
+  };
   try {
     if (stackType.value === 'js') {
-      formatedStackTrace.value.textContent = stackTrace.value;
+      formatedStackTrace.value.textContent = cleanedStackTrace;
       JSStack('.stacktrace');
     }
+    else if (stackType.value === 'java') {
+      formatedStackTrace.value.textContent = cleanedStackTrace;
+      JavaStack('.stacktrace', { prettyprint: true });
+    }
+    else if (stackType.value === 'python') {
+      formatedStackTrace.value.textContent = cleanedStackTrace;
+      PythonStack('.stacktrace', { prettyprint: true });
+    }
     else if (stackType.value === 'net') {
-      formatedStackTrace.value.innerText = stackTrace.value;
+      formatedStackTrace.value.innerText = cleanedStackTrace;
       const _ = new NetStack(formatedStackTrace.value, { prettyprint: true });
     }
     stackTraceText.value = formatedStackTrace.value.innerText;
@@ -32,7 +49,19 @@ watchEffect(() => {
 });
 
 const stackTraceMarkdown = computed(() => {
-  const lang = stackType.value === 'net' ? 'csharp' : 'javascript';
+  let lang;
+  if (stackType.value === 'net') {
+    lang = 'csharp';
+  }
+  else if (stackType.value === 'js') {
+    lang = 'javascript';
+  }
+  else if (stackType.value === 'java') {
+    lang = 'java';
+  }
+  else if (stackType.value === 'python') {
+    lang = 'python';
+  }
   return `\`\`\`${lang}\n${formatedStackTrace.value?.innerText}\n\`\`\``;
 });
 
@@ -46,10 +75,12 @@ async function downloadAsPNG() {
   link.href = dataUrl;
   link.click();
 }
+
+const wrap = ref(true);
 </script>
 
 <template>
-  <div>
+  <div max-w-600px>
     <n-radio-group v-model:value="stackType" name="radiogroup" mb-2 flex justify-center>
       <n-space>
         <n-radio
@@ -60,9 +91,22 @@ async function downloadAsPNG() {
           value="js"
           label="Javascript"
         />
+        <n-radio
+          value="python"
+          label="Python"
+        />
+        <n-radio
+          value="java"
+          label="Java"
+        />
       </n-space>
     </n-radio-group>
 
+    <div mb-2 flex justify-center>
+      <n-checkbox v-model:checked="wrap">
+        Wrap lines?
+      </n-checkbox>
+    </div>
     <c-input-text
       v-model:value="stackTrace"
       label="Stacktrace"
@@ -73,7 +117,7 @@ async function downloadAsPNG() {
 
     <n-divider />
 
-    <pre ref="formatedStackTrace" class="stacktrace" style="padding: 20px;" />
+    <pre ref="formatedStackTrace" class="stacktrace" :style="{ padding: '20px', whiteSpace: wrap ? 'pre-wrap' : 'pre', overflowX: 'auto', wordBreak: 'break-all' }" />
 
     <div v-if="stackTraceText" flex justify-center gap-1>
       <c-button @click="copyText()">
@@ -103,5 +147,7 @@ pre, code {background-color:#333 !important; color: #fff !important;}
 .st-column {color: #f8b068;}
 .st-lineNumber {color: #ff4f68;}
 .st-fileName {color: #85dbff;}
+.st-intro {color: #0044dd;}
+.st-exception {color: #e40000;}
 }
 </style>