Merge pull request #28 from IT4Change/import-order-sbcomp

refactor(frontend): import order + sbcomp + some types

package.json

@@ -135,15 +135,15 @@
     "vuepress": "^2.0.0-rc.0"
   },
   "imports": {
-    "#root/*": "./*",
-    "#src/*": "./src/*",
     "#components/*": "./src/components/*",
     "#pages/*": "./src/pages/*",
     "#assets/*": "./src/assets/*",
     "#layouts/*": "./src/layouts/*",
     "#stores/*": "./src/stores/*",
+    "#src/*": "./src/*",
     "#plugins/*": "./renderer/plugins/*",
     "#context/*": "./renderer/context/*",
-    "#types/*": "./types/*"
+    "#types/*": "./types/*",
+    "#root/*": "./*"
   }
 }

server/index.ts

@@ -52,27 +52,29 @@ async function startServer() {
 
   // Vike middleware. It should always be our last middleware (because it's a
   // catch-all middleware superseding any middleware placed after it).
-  // eslint-disable-next-line @typescript-eslint/no-misused-promises
+  app.get('*', (req, res, next) => {
-  app.get('*', async (req, res, next) => {
+    void (async (req, res, next) => {
-    const pageContextInit = {
+      const pageContextInit = {
-      urlOriginal: req.originalUrl,
+        urlOriginal: req.originalUrl,
-    }
+      }
-    const pageContext = await renderPage(pageContextInit)
+      const pageContext = await renderPage(pageContextInit)
-    const { httpResponse } = pageContext
+      const { httpResponse } = pageContext
-    if (!httpResponse) {
+      if (!httpResponse) {
-      return next()
+        next()
-    } else {
+      } else {
-      const { body, statusCode, headers, earlyHints } = httpResponse
+        const { body, statusCode, headers, earlyHints } = httpResponse
-      if (res.writeEarlyHints) res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
+        if (res.writeEarlyHints)
-      headers.forEach(([name, value]) => res.setHeader(name, value))
+          res.writeEarlyHints({ link: earlyHints.map((e) => e.earlyHintLink) })
-      res.status(statusCode)
+        headers.forEach(([name, value]) => res.setHeader(name, value))
-      // For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/stream
+        res.status(statusCode)
-      res.send(body)
+        // For HTTP streams use httpResponse.pipe() instead, see https://vike.dev/stream
-    }
+        res.send(body)
+      }
+    })(req, res, next)
   })
 
   const port = process.env.PORT || 3000
   app.listen(port)
   // eslint-disable-next-line no-console
-  console.log(`Server running at http://localhost:${port}`)
+  console.log(`🚀 Server running at http://localhost:${port}`)
 }

src/stories/ExampleButton.stories.ts

@@ -1,3 +1,5 @@
+import { SBComp } from '#types/SBComp'
+
 import ExampleButton from './ExampleButton.vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
@@ -5,8 +7,7 @@ import type { Meta, StoryObj } from '@storybook/vue3'
 // More on how to set up stories at: https://storybook.js.org/docs/vue/writing-stories/introduction
 const meta = {
   title: 'Example/Button',
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  component: ExampleButton as SBComp,
-  component: ExampleButton,
   // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/vue/writing-docs/autodocs
   tags: ['autodocs'],
   argTypes: {

src/stories/ExampleHeader.stories.ts

@@ -1,3 +1,5 @@
+import { SBComp } from '#types/SBComp'
+
 import ExampleHeader from './ExampleHeader.vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
@@ -8,8 +10,7 @@ const meta = {
    * to learn how to generate automatic titles
    */
   title: 'Example/Header',
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  component: ExampleHeader as SBComp,
-  component: ExampleHeader,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   render: (args: any) => ({
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment

src/stories/ExamplePage.stories.ts

@@ -1,13 +1,14 @@
 import { within, userEvent } from '@storybook/testing-library'
 
+import { SBComp } from '#types/SBComp'
+
 import ExamplePage from './ExamplePage.vue'
 
 import type { Meta, StoryObj } from '@storybook/vue3'
 
 const meta = {
   title: 'Example/Page',
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+  component: ExamplePage as SBComp,
-  component: ExamplePage,
   render: () => ({
     // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
     components: { ExamplePage },

tsconfig.json

@@ -11,16 +11,16 @@
     "esModuleInterop": true,
     "resolveJsonModule": true,
     "paths": {
-      "#root/*": ["./*"],
-      "#src/*": ["./src/*"],
       "#components/*": ["./src/components/*"],
       "#pages/*": ["./src/pages/*"],
       "#assets/*": ["./src/assets/*"],
       "#layouts/*": ["./src/layouts/*"],
       "#stores/*": ["./src/stores/*"],
+      "#src/*": ["./src/*"],
       "#plugins/*": ["./renderer/plugins/*"],
       "#context/*": ["./renderer/context/*"],
-      "#types/*": ["./types/*"]
+      "#types/*": ["./types/*"],
+      "#root/*": ["./*"]
     }
   },
   "ts-node": {

types/SBComp.ts

@@ -0,0 +1,4 @@
+import { ConcreteComponent } from 'vue'
+
+// Storybook Component Type
+export type SBComp = Omit<ConcreteComponent<unknown>, 'props'>

vite.config.ts

@@ -28,16 +28,16 @@ const config: UserConfig = {
   ssr: { noExternal: ['vuetify'] },
   resolve: {
     alias: {
-      '#root': __dirname,
-      '#src': path.join(__dirname, '/src'),
       '#components': path.join(__dirname, '/src/components'),
       '#pages': path.join(__dirname, '/src/pages'),
       '#assets': path.join(__dirname, '/src/assets'),
       '#layouts': path.join(__dirname, '/src/layouts'),
       '#stores': path.join(__dirname, '/src/stores'),
+      '#src': path.join(__dirname, '/src'),
       '#plugins': path.join(__dirname, '/renderer/plugins'),
       '#context': path.join(__dirname, '/renderer/context'),
       '#types': path.join(__dirname, '/types'),
+      '#root': __dirname,
     },
   },
 }