Issue/#58 remove plugins folder

layouts/default.vue

@@ -15,8 +15,11 @@
 <script lang="ts">
 import { storeToRefs } from "pinia";
 import { defineComponent } from "vue";
-import { useNuxtApp } from "#app";
 import { LayoutSidebar } from "~/src/widgets/ui";
+import { useEvents } from "~/src/shared/lib/use-events";
+import { useSettings } from "~/src/shared/lib/use-settings";
+import SfdumpWrap from "~/src/shared/lib/vendor/dumper";
+import { version } from "../package.json";
 import { useSettingsStore } from "~/stores/settings";
 
 export default defineComponent({
@@ -25,37 +28,33 @@ export default defineComponent({
   },
 
   async setup() {
+    SfdumpWrap(window.document);
+
     const settingsStore = useSettingsStore();
     const { themeType, isFixedHeader } = storeToRefs(settingsStore);
-    const { $config, $api } = useNuxtApp();
-
-    const apiVersion = await $api.getVersion();
-
-    if (process.client) {
-      const { $events } = useNuxtApp();
-
-      if (!$events?.items?.length) {
-        $events.getAll();
-      }
-
-      return {
-        themeType,
-        isFixedHeader,
-        apiVersion: String(apiVersion).match(/^[0-9.]+.*$/)
-          ? `v${apiVersion}`
-          : `@${apiVersion}`,
-        clientVersion:
-          !$config?.public?.version || $config.public.version === "0.0.1"
-            ? "@dev"
-            : `v${$config.public.version}`,
-      };
+
+    const {
+      api: { getVersion },
+    } = useSettings();
+
+    const apiVersion = await getVersion();
+
+    const { events } = useEvents();
+
+    if (!events?.items?.value?.length) {
+      events.getAll();
     }
 
+    const clientVersion =
+      !version || version === "0.0.1" ? "@dev" : `v${version}`;
+
     return {
       themeType,
-      isFixedHeader: false,
-      clientVersion: "@dev",
-      apiVersion: "@dev",
+      isFixedHeader,
+      apiVersion: String(apiVersion).match(/^[0-9.]+.*$/)
+        ? `v${apiVersion}`
+        : `@${apiVersion}`,
+      clientVersion,
     };
   },
 });

nuxt.config.ts

@@ -41,11 +41,6 @@ export default defineNuxtConfig({
     },
   },
   css: ["~/assets/index.css"],
-  plugins: [
-    {src: '~/plugins/api.client.ts'},
-    {src: '~/plugins/events.client.ts'},
-    {src: '~/plugins/vendors.client.ts'},
-  ],
   modules: [
     '@nuxtjs/tailwindcss',
     '@pinia/nuxt',

package.json

@@ -41,6 +41,7 @@
     "@types/cytoscape-dagre": "^2.3.1",
     "@types/downloadjs": "^1.4.3",
     "@types/lodash.debounce": "^4.0.7",
+    "@types/pluralize": "^0.0.33",
     "@typescript-eslint/eslint-plugin": "^5.48.2",
     "@typescript-eslint/parser": "^5.48.2",
     "@vitejs/plugin-vue": "^4.0.0",

pages/http-dumps/[id].vue

@@ -24,10 +24,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useHttpDump } from "~/src/entities/http-dump";
 import type { HttpDump } from "~/src/entities/http-dump/types";
+import { useEvents } from "~/src/shared/lib/use-events";
 import type { EventId, ServerEvent } from "~/src/shared/types";
 import { HttpDumpPage } from "~/src/screens/http-dump";
 
@@ -41,33 +42,25 @@ export default defineComponent({
     const router = useRouter();
     const eventId = route.params.id as EventId;
 
-    if (process.client) {
-      const { $events } = useNuxtApp();
-      const { data: event, pending } = await useFetch($events.getUrl(eventId), {
-        onResponse({ response }) {
-          return response.data;
-        },
-        onResponseError() {
-          router.push("/404");
-        },
-        onRequestError() {
-          router.push("/404");
-        },
-      });
+    const { events } = useEvents();
 
-      return {
-        serverEvent: event,
-        pending,
-        eventId,
-        clearEvent: () => $events.removeById(eventId),
-      };
-    }
+    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
+      onResponse({ response }) {
+        return response.data;
+      },
+      onResponseError() {
+        router.push("/404");
+      },
+      onRequestError() {
+        router.push("/404");
+      },
+    });
 
     return {
-      serverEvent: null,
-      pending: false,
+      serverEvent: event,
+      pending,
       eventId,
-      clearEvent: () => {},
+      clearEvent: () => events.removeById(eventId),
     };
   },
   head() {
@@ -78,7 +71,9 @@ export default defineComponent({
   computed: {
     event() {
       return this.serverEvent
-        ? normalizeHttpDumpEvent(this.serverEvent as ServerEvent<HttpDump>)
+        ? normalizeHttpDumpEvent(
+            this.serverEvent as unknown as ServerEvent<HttpDump>
+          )
         : null;
     },
   },

pages/http-dumps/index.vue

@@ -1,28 +1,20 @@
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PAGE_TYPES } from "~/src/shared/constants";
+import { useEvents } from "~/src/shared/lib/use-events";
 import PageIndex from "../index.vue"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 
 export default defineComponent({
   extends: PageIndex,
   setup() {
-    if (process.client) {
-      const { $events } = useNuxtApp();
+    const { events } = useEvents();
 
-      if (!$events?.items?.value?.length) {
-        $events.getAll();
-      }
-
-      return {
-        events: $events.items,
-        title: "Http dumps",
-        type: PAGE_TYPES.HTTP_DUMP,
-      };
+    if (!events?.items?.value?.length) {
+      events.getAll();
     }
 
     return {
-      events: [],
+      events: events.items,
       title: "Http dumps",
       type: PAGE_TYPES.HTTP_DUMP,
     };

pages/index.vue

@@ -38,11 +38,12 @@
 </template>
 
 <script lang="ts">
-import pluralize from "pluralize"; // eslint-disable-line @conarti/feature-sliced/public-api
+// eslint-disable-next-line @conarti/feature-sliced/public-api
+import pluralize from "pluralize";
 import { defineComponent } from "vue";
-import { useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader, EventCard, PagePlaceholder } from "~/src/widgets/ui";
 import { PAGE_TYPES } from "~/src/shared/constants";
+import { useEvents } from "~/src/shared/lib/use-events";
 import type { EventType } from "~/src/shared/types";
 import { PauseButton } from "~/src/shared/ui/pause-button";
 
@@ -54,48 +55,41 @@ export default defineComponent({
     PauseButton,
   },
   setup() {
-    if (process.client) {
-      const { $events } = useNuxtApp();
+    const { events } = useEvents();
 
-      if (!$events?.items?.value?.length) {
-        $events.getAll();
-      }
-
-      return {
-        events: $events.items,
-        title: "",
-        type: PAGE_TYPES.ALL_EVENTS,
-      };
+    if (!events?.items?.value?.length) {
+      events.getAll();
     }
+
     return {
-      events: [],
+      events: events.items,
       title: "",
       type: PAGE_TYPES.ALL_EVENTS,
     };
   },
   computed: {
     allEvents() {
-      const { $events } = useNuxtApp();
+      const { events } = useEvents();
 
       if (this.type === PAGE_TYPES.ALL_EVENTS) {
-        return $events.items.value;
+        return events.items.value;
       }
-      return $events.items.value.filter(({ type }) => type === this.type);
+      return events.items.value.filter(({ type }) => type === this.type);
     },
     isEventsPaused() {
-      const { $cachedEvents } = useNuxtApp();
+      const { cachedEvents } = useEvents();
 
-      return $cachedEvents.eventsIdsByType.value[this.type]?.length > 0;
+      return cachedEvents.idsByType.value[this.type]?.length > 0;
     },
     visibleEvents() {
       if (!this.isEventsPaused) {
         return this.allEvents;
       }
 
-      const { $cachedEvents } = useNuxtApp();
+      const { cachedEvents } = useEvents();
 
       return this.allEvents.filter(({ uuid }) =>
-        $cachedEvents.eventsIdsByType.value[this.type]?.includes(uuid)
+        cachedEvents.idsByType.value[this.type]?.includes(uuid)
       );
     },
     hiddenEventsCount() {
@@ -107,21 +101,21 @@ export default defineComponent({
   },
   methods: {
     clearEvents() {
-      const { $events } = useNuxtApp();
+      const { events } = useEvents();
 
       if (this.type === PAGE_TYPES.ALL_EVENTS) {
-        return $events.removeAll();
+        return events.removeAll();
       }
 
-      return $events.removeByType(this.type as EventType);
+      return events.removeByType(this.type as EventType);
     },
     toggleUpdate() {
-      const { $cachedEvents } = useNuxtApp();
+      const { cachedEvents } = useEvents();
 
       if (this.isEventsPaused) {
-        $cachedEvents.runUpdatesByType(this.type);
+        cachedEvents.runUpdatesByType(this.type);
       } else {
-        $cachedEvents.stopUpdatesByType(this.type);
+        cachedEvents.stopUpdatesByType(this.type);
       }
     },
   },

pages/inspector/[id].vue

@@ -24,10 +24,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { useFetch, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useInspector } from "~/src/entities/inspector";
-import type { EventId } from "~/src/shared/types";
+import type { Inspector } from "~/src/entities/inspector/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
 import { InspectorPage } from "~/src/screens/inspector";
 
 const { normalizeInspectorEvent } = useInspector();
@@ -40,33 +42,25 @@ export default defineComponent({
     const router = useRouter();
     const eventId = route.params.id as EventId;
 
-    if (process.client) {
-      const { $events } = useNuxtApp();
-      const { data: event, pending } = await useFetch($events.getUrl(eventId), {
-        onResponse({ response }) {
-          return response.data;
-        },
-        onResponseError() {
-          router.push("/404");
-        },
-        onRequestError() {
-          router.push("/404");
-        },
-      });
+    const { events } = useEvents();
 
-      return {
-        serverEvent: event,
-        pending,
-        eventId,
-        clearEvent: () => $events.removeById(eventId),
-      };
-    }
+    const { data: event, pending } = await useFetch(events.getUrl(eventId), {
+      onResponse({ response }) {
+        return response.data;
+      },
+      onResponseError() {
+        router.push("/404");
+      },
+      onRequestError() {
+        router.push("/404");
+      },
+    });
 
     return {
-      serverEvent: null,
-      pending: false,
+      serverEvent: event,
+      pending,
       eventId,
-      clearEvent: () => {},
+      clearEvent: () => events.removeById(eventId),
     };
   },
   head() {
@@ -77,7 +71,9 @@ export default defineComponent({
   computed: {
     event() {
       return this.serverEvent
-        ? normalizeInspectorEvent(this.serverEvent)
+        ? normalizeInspectorEvent(
+            this.serverEvent as unknown as ServerEvent<Inspector>
+          )
         : null;
     },
   },