Merge pull request #136 from buggregator/feature/var-dumper-code-high…

…tlight

Adds syntax highlighting for var-dumper module.

src/entities/ray/ui/ray-mail/ray-mail.vue

@@ -2,6 +2,7 @@
 import { ref, defineProps } from "vue";
 import { IconSvg, TableBase, TableBaseRow } from "~/src/shared/ui";
 import type { RayContentMail, RayUser } from "../../types";
+import { SmtpPagePreview } from "~/src/screens/smtp";
 
 type Props = {
   content: RayContentMail;
@@ -56,9 +57,9 @@ const getValuesField = (values: RayUser[]) => {
         />
       </h3>
 
-      <div v-if="!collapsed" class="ray-mail__body">
+      <SmtpPagePreview v-if="!collapsed" device="tablet">
         <div v-html="content.html" />
-      </div>
+      </SmtpPagePreview>
     </div>
   </div>
 </template>

src/entities/var-dump/mocks/index.ts

@@ -5,6 +5,7 @@ import varDumpObjectMock from './var-dump-object.json'
 import varDumpEmptyStringMock from './var-dump-string-empty.json'
 import varDumpStringMock from './var-dump-string.json'
 import varDumpTrueMock from './var-dump-true.json'
+import varCodeMock from './var-dump-code-hightlight.json'
 
 export {
   varDumpArrayMock,
@@ -14,4 +15,5 @@ export {
   varDumpObjectMock,
   varDumpStringMock,
   varDumpEmptyStringMock,
+  varCodeMock
 }

src/entities/var-dump/mocks/var-dump-code-hightlight.json

@@ -0,0 +1,26 @@
+{
+  "uuid": "49c77954-d17e-471d-9d5e-bf0aa856f90c",
+  "type": "var-dump",
+  "payload": {
+    "payload": {
+      "type": "code",
+      "language": "php",
+      "value": "<?php\n\ndeclare(strict_types=1);\n\necho 'Hello, World!';\n"
+    },
+    "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
+}

src/entities/var-dump/ui/preview-card/preview-card.stories.ts

@@ -8,10 +8,11 @@ import {
   varDumpObjectMock,
   varDumpStringMock,
   varDumpEmptyStringMock,
+  varCodeMock
 } from '../../mocks';
 import PreviewCard from './preview-card.vue';
 
-const { normalizeVarDumpEvent } = useVarDump();
+const {normalizeVarDumpEvent} = useVarDump();
 
 export default {
   title: "Entities/var-dump/PreviewCard",
@@ -59,3 +60,9 @@ export const Array: StoryObj<typeof PreviewCard> = {
     event: normalizeVarDumpEvent(varDumpArrayMock),
   }
 }
+
+export const Code: StoryObj<typeof PreviewCard> = {
+  args: {
+    event: normalizeVarDumpEvent(varCodeMock),
+  }
+}

src/entities/var-dump/ui/preview-card/preview-card.vue

@@ -15,7 +15,10 @@ const eventValue = computed(() => String(props.event.payload.payload.value));
 
 <template>
   <PreviewCard class="preview-card" :event="event">
-    <ValueDump :value="eventValue" :type="event.payload.payload.type" />
+    <ValueDump :value="eventValue"
+               :type="event.payload.payload.type"
+               :language="event.payload.payload.language || `plaintext`"
+    />
   </PreviewCard>
 </template>
 

src/shared/lib/io/use-events-requests.ts

@@ -16,7 +16,7 @@ type TUseEventsRequests = () => {
 
 export const useEventsRequests: TUseEventsRequests = () => {
   const app = useNuxtApp()
-  const {token} = app.$authToken
+  const {token} = app.$authToken ?? {token: null}
   const headers = {"X-Auth-Token": token || ''}
   const getEventRestUrl = (param?: string): string => `${REST_API_URL}/api/event${param ? `/${param}` : 's'}`
 

src/shared/lib/use-api-transport/use-api-transport.ts

@@ -7,7 +7,7 @@ let isEventsEmitted = false
 
 export const useApiTransport = () => {
   const nuxtApp = useNuxtApp()
-  const {token} = nuxtApp.$authToken
+  const {token} = nuxtApp.$authToken ?? {token: null}
   const {centrifuge} = useCentrifuge()
   const eventsStore = useEventStore()
   const connectionStore = useConnectionStore()

src/shared/ui/code-snippet/code-snippet.vue

@@ -4,7 +4,7 @@ import isString from "lodash/isString";
 import { ref, computed } from "vue";
 import { IconSvg } from "../icon-svg";
 
-const CondeHighlight = highlightPlugin.component;
+const CodeHighlight = highlightPlugin.component;
 
 type Props = {
   code: string | unknown;
@@ -39,15 +39,19 @@ const copyCode = (): void => {
 
 <template>
   <div class="code-snippet">
-    <CondeHighlight :language="language" :code="normalizedCode" />
+    <CodeHighlight
+      :language="language"
+      :autodetect="false"
+      :code="normalizedCode"
+    />
 
     <button
       type="button"
       class="code-snippet__copy"
       :class="{ 'code-snippet__copy--active': isCopied }"
       @click="copyCode"
     >
-      <IconSvg name="copy" class="code-snippet__copy-icon" />
+      <IconSvg name="copy" class="code-snippet__copy-icon"/>
       Copy
     </button>
   </div>

src/shared/ui/value-dump/value-dump.vue

@@ -7,28 +7,24 @@ import { CodeSnippet } from "../code-snippet";
 type Props = {
   value: string;
   type: string;
+  language: string;
 };
 
 const props = withDefaults(defineProps<Props>(), {
   type: "",
+  language: "plaintext",
 });
 
 const isValueString = isString(props.value) && props.type === "string";
+const isValueCode = isString(props.value) && (props.type === "code");
 
 const dumpId = String(props.value).match(/(sf-dump-[0-9]+)/i)?.[0] || null;
 const makeDumpBody = () => {
   if (props.type === "boolean") {
     return props.value === "1" ? "true" : "false";
   }
 
-  if (dumpId) {
-    return (props.value as string).replace(
-      /<(style|script)\b[^<]*(?:(?!<\/style>)<[^<]*)*<\/(style|script)>/gi,
-      ""
-    );
-  }
-
-  if (isValueString) {
+  if (isValueString && !props.value.replace(/\s/g, '').length) {
     return `"${props.value}"`;
   }
 
@@ -48,9 +44,8 @@ onMounted(() => {
 
 <template>
   <div class="value-dump">
-    <CodeSnippet v-if="isValueString" language="php" :code="dumpBody" />
-
-    <div v-if="!isValueString" class="value-dump__html" v-html="dumpBody" />
+    <CodeSnippet v-if="isValueString || isValueCode" :language="language" :code="dumpBody"/>
+    <div v-else class="value-dump__html" v-html="dumpBody"/>
   </div>
 </template>
 

src/widgets/ui/layout-sidebar/layout-sidebar.vue

@@ -167,7 +167,7 @@ const logout = () => {
   @apply text-blue-500 hover:text-white;
   @apply hover:bg-gray-700;
   @apply flex items-center justify-center;
-  @apply md:my-2 md:mx-1 lg:m-2 md:rounded-lg;
+  @apply md:mx-1 lg:mx-1.5 md:mt-1 lg:mt-1.5 md:rounded-lg;
 
   &.router-link-active {
     @apply bg-blue-700 text-blue-200;
@@ -179,7 +179,7 @@ const logout = () => {
   @apply fill-current;
   @apply mx-auto;
   @apply h-5 md:h-6;
-  @apply m-2.5 md:m-3;
+  @apply mx-1.5 my-2 md:mx-2 md:my-3;
 
   & > svg {
     @apply h-auto;

src/widgets/ui/page-placeholder/page-placeholder.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import PagePlaceholderItem from "./page-placeholder-item.vue";
+import { IconSvg } from "~/src/shared/ui";
 
 const items = [
   {
@@ -22,6 +23,9 @@ const items = [
 
 <template>
   <div class="page-placeholder">
+    <div class="logo">
+      <IconSvg name="logo"/>
+    </div>
     <ul class="page-placeholder__list">
       <PagePlaceholderItem
         v-for="item in items"
@@ -36,12 +40,20 @@ const items = [
 
 <style lang="scss" scoped>
 .page-placeholder {
-  @apply p-4 md:p-6 lg:p-10;
+  @apply p-4 md:p-6 lg:p-10 w-1/2;
   @apply bg-white dark:bg-gray-900;
   @apply border dark:border-gray-600 rounded-lg;
   @apply text-gray-600 dark:text-gray-300;
 }
 
+.logo {
+  @apply mb-10 flex h-10;
+
+  svg {
+    @apply h-10;
+  }
+}
+
 .page-placeholder__list {
   @apply flex flex-col space-y-4;
 }

src/widgets/ui/preview-card-default/preview-card-default.vue

@@ -11,7 +11,7 @@ defineProps<Props>();
 
 <template>
   <PreviewCard class="event-card-fallback" :event="event">
-    <CodeSnippet class="event-card-fallback__snippet" :code="event" />
+    <CodeSnippet class="event-card-fallback__snippet" :code="event" language="json" />
   </PreviewCard>
 </template>