Merge pull request #16 from buggregator/issue/#12-var-dump-string-brackets

Issue/#12 var dump string brackets

Author: butschster

components/ValueDump/ValueDump.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="dump-preview">
-    <CodeSnippet v-if="isBooleanValue" language="php" :code="value === 1" />
-    <div
-      v-if="!isBooleanValue"
-      class="var-dump-preview__html"
-      v-html="dumpBody"
-    />
+    <div v-if="!isString" class="var-dump-preview__html" v-html="dumpBody" />
+
+    <CodeSnippet v-if="isString" language="php" :code="dumpBody" />
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import CodeSnippet from "~/components/CodeSnippet/CodeSnippet.vue";
 import { useNuxtApp } from "#app";
+import CodeSnippet from "~/components/CodeSnippet/CodeSnippet.vue";
 
 export default defineComponent({
   components: {
@@ -34,8 +31,8 @@ export default defineComponent({
     };
   },
   computed: {
-    isBooleanValue(): boolean {
-      return typeof this.value === "boolean" || this.type === "boolean";
+    isString() {
+      return typeof this.value === "string" && this.type === "string";
     },
     dumpId(): string | null {
       if (!this.value) {
@@ -51,6 +48,10 @@ export default defineComponent({
         );
       }
 
+      if (this.isString) {
+        return `"${this.value}"`;
+      }
+
       return this.value;
     },
   },

components/VarDumpPreview/VarDumpPreview.stories.ts

@@ -4,7 +4,9 @@ import { normalizeVarDumpEvent } from "~/utils/normalize-event";
 import varDumpObjectEventMock from '~/mocks/var-dump-object.json'
 import varDumpNumberEventMock from '~/mocks/var-dump-number.json'
 import varDumpStringEventMock from '~/mocks/var-dump-string.json'
+import varDumpStringEmptyEventMock from '~/mocks/var-dump-string-empty.json'
 import varDumpArrayEventMock from '~/mocks/var-dump-array.json'
+import varDumpBoolEventMock from '~/mocks/var-dump-boolean.json'
 import VarDumpPreview from '~/components/VarDumpPreview/VarDumpPreview.vue';
 
 export default {
@@ -40,6 +42,19 @@ String.args = {
   event: normalizeVarDumpEvent(varDumpStringEventMock),
 };
 
+export const StringEmpty = Template.bind({});
+
+StringEmpty.args = {
+  event: normalizeVarDumpEvent(varDumpStringEmptyEventMock),
+};
+
+export const Boolean = Template.bind({});
+
+Boolean.args = {
+  event: normalizeVarDumpEvent(varDumpBoolEventMock),
+};
+
+
 export const Array = Template.bind({});
 
 Array.args = {

config/types.ts

@@ -142,7 +142,7 @@ export interface Sentry {
 export interface VarDump {
   payload: {
     type: string,
-    value: string
+    value: string | number | boolean
   },
   context: {
     timestamp: number,

mocks/var-dump-boolean.json

@@ -0,0 +1,25 @@
+{
+  "uuid": "49c77954-d17e-471d-9d5e-bf0aa856f90c",
+  "type": "var-dump",
+  "payload": {
+    "payload": {
+      "type": "boolean",
+      "value": true
+    },
+    "context": {
+      "timestamp": 1678271981.325951,
+      "cli": {
+        "command_line": "app.php",
+        "identifier": "799f2007"
+      },
+      "source": {
+        "name": "HomeController.php",
+        "file": "/root/repos/spiral-apps/filters-bridge/app/src/Controller/HomeController.php",
+        "line": 48,
+        "file_excerpt": false
+      }
+    }
+  },
+  "timestamp": 1678271981,
+  "project_id": null
+}

mocks/var-dump-string-empty.json

@@ -0,0 +1,25 @@
+{
+  "uuid": "49c77954-d17e-471d-9d5e-bf0aa856f90c",
+  "type": "var-dump",
+  "payload": {
+    "payload": {
+      "type": "string",
+      "value": "\t    "
+    },
+    "context": {
+      "timestamp": 1678271981.325951,
+      "cli": {
+        "command_line": "app.php",
+        "identifier": "799f2007"
+      },
+      "source": {
+        "name": "HomeController.php",
+        "file": "/root/repos/spiral-apps/filters-bridge/app/src/Controller/HomeController.php",
+        "line": 48,
+        "file_excerpt": false
+      }
+    }
+  },
+  "timestamp": 1678271981,
+  "project_id": null
+}