Merge pull request #89 from buggregator/feature/upgrade-nuxt-version

Feature/upgrade node version

.docker/Dockerfile

@@ -6,7 +6,7 @@ ARG BRANCH=master
 RUN git clone -b $BRANCH $REPOSITORY /app
 
 # Build JS files
-FROM node:19-alpine as frontend
+FROM node:20-alpine as frontend
 COPY --from=git /app /app
 WORKDIR /app
 

.eslintrc.json

@@ -39,6 +39,17 @@
         "registeredComponentsOnly": true,
         "ignores": []
       }
+    ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "": "never",
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
     ]
   }
 }

.github/workflows/test-build-ci.yml

@@ -15,7 +15,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x, 18.x, 20.x]
+        node-version: [18.x, 20.x]
 
     steps:
     - uses: actions/checkout@v3

layouts/default.vue

@@ -15,9 +15,9 @@
 <script lang="ts">
 import { storeToRefs } from "pinia";
 import { defineComponent } from "vue";
-import { useSettingsStore } from "~/stores/settings";
 import { useNuxtApp } from "#app";
 import { LayoutSidebar } from "~/src/widgets/ui";
+import { useSettingsStore } from "~/stores/settings";
 
 export default defineComponent({
   components: {

package.json

@@ -47,7 +47,7 @@
     "autoprefixer": "^10.4.0",
     "eslint": "^8.32.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^8.6.0",
     "eslint-plugin-import": "^2.29.0",
     "eslint-plugin-nuxt": "^4.0.0",
@@ -59,7 +59,7 @@
     "prettier": "^2.8.3",
     "sass": "^1.57.1",
     "storybook-addon-themes": "^6.1.0",
-    "typescript": "^4.9.4",
+    "typescript": "^5.1.6",
     "vitest": "^0.34.2",
     "vue-eslint-parser": "^9.1.0"
   },
@@ -85,7 +85,7 @@
     "lodash.isstring": "^4.0.1",
     "lodash.pick": "^4.4.0",
     "moment": "^2.29.4",
-    "nuxt": "3.3.3",
+    "nuxt": "^3.8.2",
     "pinia": "^2.0.30",
     "pluralize": "^8.0.0",
     "tailwindcss": "^3.2.4",

pages/http-dumps/[id].vue

@@ -24,12 +24,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { HttpDumpPage } from "~/src/screens/http-dump";
 import { useFetch, useNuxtApp, 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 { HttpDump } from "~/src/entities/http-dump/types";
-import { EventId, ServerEvent } from "~/src/shared/types";
+import type { HttpDump } from "~/src/entities/http-dump/types";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+import { HttpDumpPage } from "~/src/screens/http-dump";
 
 const { normalizeHttpDumpEvent } = useHttpDump();
 

pages/index.vue

@@ -40,11 +40,11 @@
 <script lang="ts">
 import pluralize from "pluralize"; // eslint-disable-line @conarti/feature-sliced/public-api
 import { defineComponent } from "vue";
-import { PauseButton } from "~/src/screens/events/ui/pause-button";
 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 { EventType } from "~/src/shared/types";
+import type { EventType } from "~/src/shared/types";
+import { PauseButton } from "~/src/screens/events/ui/pause-button";
 
 export default defineComponent({
   components: {

pages/inspector/[id].vue

@@ -24,11 +24,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { InspectorPage } from "~/src/screens/inspector";
 import { useFetch, useNuxtApp, 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 { EventId } from "~/src/shared/types";
+import type { EventId } from "~/src/shared/types";
+import { InspectorPage } from "~/src/screens/inspector";
 
 const { normalizeInspectorEvent } = useInspector();
 

pages/profiler/[id].vue

@@ -24,11 +24,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { ProfilerPage } from "~/src/screens/profiler";
 import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useProfiler } from "~/src/entities/profiler/lib";
-import { EventId } from "~/src/shared/types";
+import type { EventId } from "~/src/shared/types";
+import { ProfilerPage } from "~/src/screens/profiler";
 
 const { normalizeProfilerEvent } = useProfiler();
 

pages/sentry/[id].vue

@@ -22,11 +22,11 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { SentryPage } from "~/src/screens/sentry";
 import { useNuxtApp, useRoute, useRouter, useFetch } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useSentry } from "~/src/entities/sentry";
-import { EventId } from "~/src/shared/types";
+import type { EventId } from "~/src/shared/types";
+import { SentryPage } from "~/src/screens/sentry";
 
 const { normalizeSentryEvent } = useSentry();
 

pages/settings.vue

@@ -65,9 +65,9 @@
 <script lang="ts">
 import { storeToRefs } from "pinia";
 import { defineComponent } from "vue";
-import { useSettingsStore, THEME_MODES } from "~/stores/settings";
 import { PageHeader } from "~/src/widgets/ui";
 import { IconSvg } from "~/src/shared/ui";
+import { useSettingsStore, THEME_MODES } from "~/stores/settings";
 
 export default defineComponent({
   components: {

pages/smtp/[id].vue

@@ -24,12 +24,12 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { SmtpPage } from "~/src/screens/smtp";
 import { useFetch, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
 import { PageHeader } from "~/src/widgets/ui";
 import { useSmtp } from "~/src/entities/smtp";
 import { REST_API_URL } from "~/src/shared/lib/io";
-import { EventId } from "~/src/shared/types";
+import type { EventId } from "~/src/shared/types";
+import { SmtpPage } from "~/src/screens/smtp";
 
 const { normalizeSmtpEvent } = useSmtp();
 

plugins/events.client.ts

@@ -1,8 +1,8 @@
 import { storeToRefs } from "pinia";
+import { useApiTransport } from '~/src/shared/lib/use-api-transport'
+import type { EventId, EventType, ServerEvent } from '~/src/shared/types';
 import { useCachedIdsStore } from "~/stores/cached-ids";
 import { useEventStore } from "~/stores/events";
-import { useApiTransport } from '~/src/shared/lib/use-api-transport'
-import { EventId, EventType, ServerEvent } from '~/src/shared/types';
 
 export default defineNuxtPlugin(() => {
   const eventsStore = useEventStore();

src/entities/http-dump/lib/use-http-dump/normalize-http-dump-event.ts

@@ -1,5 +1,6 @@
-import { EVENT_TYPES, ServerEvent, NormalizedEvent } from "~/src/shared/types";
-import { HttpDump } from "../../types";
+import type { ServerEvent, NormalizedEvent } from "~/src/shared/types";
+import { EVENT_TYPES } from "~/src/shared/types";
+import type { HttpDump } from "../../types";
 
 export const normalizeHttpDumpEvent = (event: ServerEvent<HttpDump>): NormalizedEvent<HttpDump> => ({
   id: event.uuid,

src/entities/http-dump/lib/use-http-dump/use-http-dump.ts

@@ -1,5 +1,5 @@
-import { ServerEvent, NormalizedEvent } from '~/src/shared/types';
-import { HttpDump } from "../../types";
+import type { ServerEvent, NormalizedEvent } from '~/src/shared/types';
+import type { HttpDump } from "../../types";
 import { normalizeHttpDumpEvent } from "./normalize-http-dump-event";
 
 type TUseInspector = () => {

src/entities/http-dump/types.ts

@@ -1,4 +1,4 @@
-import { Attachment } from "~/src/shared/types";
+import type { Attachment } from "~/src/shared/types";
 
 export interface HttpDump {
   received_at: string,

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

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/vue3";
+import type { Meta, Story } from "@storybook/vue3";
 import { useHttpDump } from "../../lib";
 import { httpDumpMock } from '../../mocks';
 import PreviewCard from './preview-card.vue';

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

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { NormalizedEvent } from "~/src/shared/types";
+import type { NormalizedEvent } from "~/src/shared/types";
 import { PreviewCard } from "~/src/shared/ui";
-import { HttpDump } from "../../types";
+import type { HttpDump } from "../../types";
 
 type Props = {
   event: NormalizedEvent<HttpDump>;

src/entities/inspector/lib/use-inspector/normalize-inspector-event.ts

@@ -1,5 +1,6 @@
-import { EVENT_TYPES, ServerEvent, NormalizedEvent } from "~/src/shared/types";
-import { Inspector, InspectorTransaction } from "../../types";
+import type { ServerEvent, NormalizedEvent } from "~/src/shared/types";
+import { EVENT_TYPES } from "~/src/shared/types";
+import type { Inspector, InspectorTransaction } from "../../types";
 
 export const normalizeInspectorEvent = (event: ServerEvent<Inspector>): NormalizedEvent<Inspector> => {
   const transaction = event.payload[0] as InspectorTransaction;

src/entities/inspector/lib/use-inspector/use-inspector.ts

@@ -1,5 +1,5 @@
-import { ServerEvent, NormalizedEvent } from '~/src/shared/types';
-import { Inspector } from "../../types";
+import type { ServerEvent, NormalizedEvent } from '~/src/shared/types';
+import type { Inspector } from "../../types";
 import { normalizeInspectorEvent } from "./normalize-inspector-event";
 
 type TUseInspector = () => {

src/entities/inspector/ui/inspector-stat-board/inspector-stat-board.stories.ts

@@ -1,4 +1,4 @@
-import {Meta, Story} from "@storybook/vue3";
+import type { Meta, Story } from "@storybook/vue3";
 import { useInspector } from "../../lib";
 import { inspectorMock } from '../../mocks'
 import InspectorStatBoard from './inspector-stat-board.vue';

src/entities/inspector/ui/inspector-stat-board/inspector-stat-board.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import moment from "moment";
 import { defineProps, computed } from "vue";
-import { InspectorTransaction } from "~/config/types";
+import type { InspectorTransaction } from "../../types";
 
 type Props = {
   transaction: InspectorTransaction;

src/entities/inspector/ui/preview-card/preview-card.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/vue3";
+import type { Meta, Story } from "@storybook/vue3";
 import { useInspector } from "../../lib";
 import { inspectorMock } from '../../mocks';
 import PreviewCard from './preview-card.vue';

src/entities/inspector/ui/preview-card/preview-card.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed, defineProps } from "vue";
-import { NormalizedEvent } from "~/src/shared/types";
+import type { NormalizedEvent } from "~/src/shared/types";
 import { PreviewCard } from "~/src/shared/ui";
-import { Inspector } from "../../types";
+import type { Inspector } from "../../types";
 import InspectorStatBoard from "../inspector-stat-board/inspector-stat-board.vue";
 
 type Props = {

src/entities/monolog/lib/use-monolog/normalize-monolog.ts

@@ -1,5 +1,6 @@
-import { EVENT_TYPES, ServerEvent, NormalizedEvent } from "~/src/shared/types";
-import { Monolog } from "../../types";
+import type { ServerEvent, NormalizedEvent } from "~/src/shared/types";
+import { EVENT_TYPES } from "~/src/shared/types";
+import type { Monolog } from "../../types";
 
 export const normalizeMonolog = (event: ServerEvent<Monolog>): NormalizedEvent<Monolog> => {
   const origin = event.payload?.context?.source || null;

src/entities/monolog/lib/use-monolog/use-monolog.ts

@@ -1,5 +1,5 @@
-import { ServerEvent, NormalizedEvent } from '~/src/shared/types';
-import { Monolog } from "../../types";
+import type { ServerEvent, NormalizedEvent } from '~/src/shared/types';
+import type { Monolog } from "../../types";
 import { normalizeMonolog } from "./normalize-monolog";
 
 type TUseMonolog = () => {

src/entities/monolog/types.ts

@@ -1,4 +1,4 @@
-import { Source } from "~/src/shared/types";
+import type { Source } from "~/src/shared/types";
 
 export type StatusCode = number; // TODO: update type
 

src/entities/monolog/ui/preview-card/preview-card.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/vue3";
+import type { Meta, Story } from "@storybook/vue3";
 import { useMonolog } from "../../lib";
 import { monologMock } from '../../mocks'
 import PreviewCard from './preview-card.vue';

src/entities/profiler/lib/use-profiler/normalize-profile-event.ts

@@ -1,5 +1,6 @@
-import { EVENT_TYPES, ServerEvent, NormalizedEvent } from "~/src/shared/types";
-import { Profiler } from "../../types";
+import type { ServerEvent, NormalizedEvent } from "~/src/shared/types";
+import { EVENT_TYPES } from "~/src/shared/types";
+import type { Profiler } from "../../types";
 
 export const normalizeProfilerEvent = (event: ServerEvent<Profiler>): NormalizedEvent<Profiler> => ({
   id: event.uuid,

src/entities/profiler/lib/use-profiler/use-profiler.ts

@@ -1,5 +1,5 @@
-import { ServerEvent, NormalizedEvent } from '~/src/shared/types';
-import { Profiler } from "../../types";
+import type { ServerEvent, NormalizedEvent } from '~/src/shared/types';
+import type { Profiler } from "../../types";
 import { normalizeProfilerEvent } from "./normalize-profile-event";
 
 type TUseProfiler = () => {

src/entities/profiler/ui/preview-card/preview-card.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/vue3";
+import type { Meta, Story } from "@storybook/vue3";
 import { useProfiler } from "../../lib";
 import { profilerMock } from  "../../mocks";
 import PreviewCard from './preview-card.vue';

src/entities/profiler/ui/preview-card/preview-card.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { computed } from "vue";
-import { NormalizedEvent } from "~/src/shared/types";
+import type { NormalizedEvent } from "~/src/shared/types";
 import { PreviewCard, StatBoard } from "~/src/shared/ui";
-import { Profiler } from "../../types";
+import type { Profiler } from "../../types";
 
 type Props = {
   event: NormalizedEvent<Profiler>;

src/entities/ray/lib/use-ray/normalize-ray-event.ts

@@ -1,6 +1,8 @@
 import pick from "lodash/pick";
-import { EVENT_TYPES, ServerEvent } from "~/src/shared/types";
-import { EnhancedRayEvent, RayContentColor, RayContentLabel, RayContentSize, RayDump, RAY_EVENT_TYPES } from "../../types";
+import type { ServerEvent } from "~/src/shared/types";
+import { EVENT_TYPES } from "~/src/shared/types";
+import type { EnhancedRayEvent, RayContentColor, RayContentLabel, RayContentSize, RayDump } from "../../types";
+import { RAY_EVENT_TYPES } from "../../types";
 
 export const normalizeRayEvent = (event: ServerEvent<RayDump>): EnhancedRayEvent => {
   let origin = {

src/entities/ray/lib/use-ray/use-ray.ts

@@ -1,5 +1,5 @@
-import { ServerEvent } from '~/src/shared/types';
-import { EnhancedRayEvent, RayDump } from "../../types";
+import type { ServerEvent } from '~/src/shared/types';
+import type { EnhancedRayEvent, RayDump } from "../../types";
 import { normalizeRayEvent } from "./normalize-ray-event";
 
 type TUseRay = () => {

src/entities/ray/types.ts

@@ -1,4 +1,4 @@
-import { NormalizedEvent } from "~/src/shared/types";
+import type { NormalizedEvent } from "~/src/shared/types";
 
 export interface RayFrame {
   file_name: string,

src/entities/ray/ui/preview-card/preview-card.stories.ts

@@ -1,4 +1,4 @@
-import { Meta, Story } from "@storybook/vue3";
+import type { Meta, Story } from "@storybook/vue3";
 import { useRay } from "../../lib";
 import {
   rayCallerMock,

src/entities/ray/ui/preview-card/preview-card.vue

@@ -2,7 +2,7 @@
 import { computed } from "vue";
 import type { NormalizedEvent } from "~/src/shared/types";
 import { PreviewCard } from "~/src/shared/ui";
-import {
+import type {
   EnhancedRayEvent,
   RayContentCarbone,
   RayContentCustom,
@@ -22,12 +22,12 @@ import {
   RayContentView,
   RayDump,
   RayPayload,
-  RAY_EVENT_TYPES,
 } from "../../types";
+import { RAY_EVENT_TYPES } from "../../types";
+import { RayApplicationLog } from "../ray-application-log";
 import { RayCarbone } from "../ray-carbone";
 import { RayCustom } from "../ray-custom";
-import { RayEloquent } from "../ray-eloquent"
-import { RayApplicationLog } from "../ray-application-log";
+import { RayEloquent } from "../ray-eloquent";
 import { RayEvent } from "../ray-event";
 import { RayException } from "../ray-exception";
 import { RayFrame } from "../ray-frame";

src/entities/ray/ui/ray-application-log/ray-application-log.stories.ts

@@ -1,7 +1,7 @@
-import { Meta, Story } from "@storybook/vue3";
+import type { Meta, Story } from "@storybook/vue3";
 import { useRay } from "../../lib";
 import { rayLaravelApplicationLogMock } from '../../mocks-laravel';
-import { RayContentApplicationLog } from '../../types';
+import type { RayContentApplicationLog } from '../../types';
 import RayApplicationLog from './ray-application-log.vue';
 
 const { normalizeRayEvent } = useRay();