Merge pull request #9 from IT4Change/clean-structure

refactor(frontend): clean structure & introduce aliases

.eslintrc.json

@@ -70,7 +70,10 @@
         "import/no-dynamic-require": "error",
         "import/no-internal-modules": "off",
         "import/no-relative-packages": "error",
-        "import/no-relative-parent-imports": "error",
+        "import/no-relative-parent-imports": [
+            "error",
+            { "ignore": ["#[src,root,components,pages,assets,plugins,context,types]/*"] }
+        ],
         "import/no-self-import": "error",
         "import/no-unresolved": "error",
         "import/no-useless-path-segments": "error",

.storybook/preview.ts

@@ -1,10 +1,8 @@
 import { setup } from '@storybook/vue3'
 import { createPinia } from 'pinia'
 
-// eslint-disable-next-line  import/no-relative-parent-imports
+import i18n from '#plugins/i18n'
-import i18n from '../renderer/i18n'
+import CreateVuetify from '#plugins/vuetify'
-// eslint-disable-next-line  import/no-relative-parent-imports
-import CreateVuetify from '../renderer/vuetify'
 
 import { withVuetifyTheme } from './withVuetifyTheme.decorator'
 

README.md

@@ -82,7 +82,6 @@ The following endpoints are provided given the right command is executed or all
 
 - [ ] figma
 - [ ] chromatic
-- [ ] github actions
 - [ ] feature zähler -> pinia tore
 
 ## Known Problems

package.json

@@ -24,7 +24,9 @@
     "docker",
     "remark-cli"
   ],
-  "author": "Ulf Gebhardt",
+  "author": {
+    "name": "Ulf Gebhardt"
+  },
   "license": "Apache-2.0",
   "bugs": {
     "url": "https://github.com/IT4Change/boilerplate-frontend/issues"
@@ -122,5 +124,15 @@
     "stylelint-config-standard-scss": "^11.1.0",
     "vitest": "^0.34.6",
     "vuepress": "^2.0.0-rc.0"
+  },
+  "imports": {
+    "#root/*": "./*",
+    "#src/*": "./src/*",
+    "#components/*": "./src/components/*",
+    "#pages/*": "./src/pages/*",
+    "#assets/*": "./src/assets/*",
+    "#plugins/*": "./renderer/plugins/*",
+    "#context/*": "./renderer/context/*",
+    "#types/*": "./types/*"
   }
 }

renderer/_default.page.client.ts

@@ -1,8 +1,6 @@
 import { createApp } from './app'
 
-import type { PageContextClient } from './types'
+import type { PageContextClient } from '#types/PageContext'
-
-export { render }
 
 // This render() hook only supports SSR, see https://vike.dev/render-modes for how to modify render() to support SPA
 async function render(pageContext: PageContextClient) {
@@ -15,3 +13,5 @@ async function render(pageContext: PageContextClient) {
 /* To enable Client-side Routing:
 export const clientRouting = true
 // !! WARNING !! Before doing so, read https://vike.dev/clientRouting */
+
+export { render }

renderer/_default.page.server.ts

@@ -1,13 +1,13 @@
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 
-import { createApp } from './app'
+import logoUrl from '#assets/favicon.ico'
-import logoUrl from './logo.svg'
 
-import type { PageContextServer } from './types'
+import { createApp } from './app'
+
+import type { PageContextServer } from '#types/PageContext'
 import type { App } from 'vue'
 
-export { render }
 // See https://vike.dev/data-fetching
 export const passToClient = ['pageProps', 'urlPathname']
 
@@ -56,3 +56,5 @@ async function renderToString(app: App) {
   if (err) throw err
   return appHtml
 }
+
+export { render }

renderer/app.ts

@@ -1,16 +1,16 @@
-import { createPinia } from 'pinia'
 import { createSSRApp, defineComponent, h } from 'vue'
 
-import i18n from './i18n'
+import PageShell from '#components/PageShell.vue'
-import PageShell from './PageShell.vue'
+import { setPageContext } from '#context/usePageContext'
-import { setPageContext } from './usePageContext'
+import i18n from '#plugins/i18n'
-import CreateVuetify from './vuetify'
+import pinia from '#plugins/pinia'
+import CreateVuetify from '#plugins/vuetify'
+import { Page } from '#types/Page'
+import { PageProps } from '#types/PageProps'
 
-import type { Component, PageContext, PageProps } from './types'
+import type { PageContext } from '#types/PageContext'
 
-export { createApp }
+function createApp(Page: Page, pageProps: PageProps | undefined, pageContext: PageContext) {
-
-function createApp(Page: Component, pageProps: PageProps | undefined, pageContext: PageContext) {
   const PageWithLayout = defineComponent({
     render() {
       return h(
@@ -25,7 +25,6 @@ function createApp(Page: Component, pageProps: PageProps | undefined, pageContex
     },
   })
 
-  const pinia = createPinia()
   const app = createSSRApp(PageWithLayout)
   app.use(pinia)
   app.use(i18n)
@@ -36,3 +35,5 @@ function createApp(Page: Component, pageProps: PageProps | undefined, pageContex
 
   return app
 }
+
+export { createApp }

renderer/context/usePageContext.ts

@@ -3,13 +3,10 @@
 
 import { inject } from 'vue'
 
-import { PageContext } from './types'
+import { PageContext } from '#types/PageContext'
 
 import type { App, InjectionKey } from 'vue'
 
-export { usePageContext }
-export { setPageContext }
-
 const key: InjectionKey<PageContext> = Symbol(undefined)
 
 function usePageContext() {
@@ -21,3 +18,6 @@ function usePageContext() {
 function setPageContext(app: App, pageContext: PageContext) {
   app.provide(key, pageContext)
 }
+
+export { usePageContext }
+export { setPageContext }

renderer/logo.svg

@@ -1,36 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="175" height="175" fill="none" version="1.1" viewBox="0 0 175 175" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#">
- <metadata>
-  <rdf:RDF>
-   <cc:Work rdf:about="">
-    <dc:format>image/svg+xml</dc:format>
-    <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
-    <dc:title/>
-   </cc:Work>
-  </rdf:RDF>
- </metadata>
- <defs>
-  <linearGradient id="linearGradient880" x1="108.64" x2="115.51" y1="88.726" y2="136.2" gradientTransform="matrix(1.0498 0 0 1.0498 -2.9171 -2.9658)" gradientUnits="userSpaceOnUse">
-   <stop stop-color="#ffea83" offset="0"/>
-   <stop stop-color="#FFDD35" offset=".083333"/>
-   <stop stop-color="#FFA800" offset="1"/>
-  </linearGradient>
-  <linearGradient id="paint2_linear" x1="48.975" x2="61.299" y1="3.9232" y2="158.04" gradientTransform="translate(-2.832e-5)" gradientUnits="userSpaceOnUse">
-   <stop stop-color="#FFEA83" offset="0"/>
-   <stop stop-color="#FFDD35" offset=".083333"/>
-   <stop stop-color="#FFA800" offset="1"/>
-  </linearGradient>
-  <linearGradient id="paint0_linear-6" x1="-1.4492" x2="116.62" y1="-5.8123" y2="137.08" gradientTransform="translate(-2.832e-5)" gradientUnits="userSpaceOnUse">
-   <stop stop-color="#41D1FF" offset="0"/>
-   <stop stop-color="#BD34FE" offset="1"/>
-  </linearGradient>
- </defs>
- <circle cx="87.5" cy="87.5" r="87.5" fill="#c4c4c4"/>
- <circle cx="87.5" cy="87.5" r="87.5" fill="url(#paint0_linear-6)"/>
- <g transform="translate(632.92 54.355)" fill="#d38787" stroke-width="1.0614">
-  <path d="m-549.75 68.457c-5.7533-3.1217-6.1166-5.2295-6.1166-35.489 0-30.458 0.35464-32.448 6.3339-35.54 3.9943-2.0655 24.279-2.2805 26.735-0.28333 0.89718 0.72974 6.7203 6.6637 12.94 13.187l11.309 11.86v19.575c0 18.473-0.12956 19.74-2.3011 22.5-4.0223 5.1136-7.558 5.8565-27.65 5.8099-14.15-0.03287-19.008-0.40294-21.25-1.6191zm42.473-6.3594c2.27-1.59 2.359-2.2909 2.359-18.575v-16.923h-6.9521c-12.443 0-16.4-4.0845-16.4-16.93v-7.4828h-8.9464c-6.7178 0-9.3619 0.41549-10.614 1.668-2.5031 2.5031-2.5031 55.724 0 58.228 2.4502 2.4502 37.058 2.4636 40.553 0.01609zm-1.8867-42.165c0-0.16422-2.8659-3.1346-6.3686-6.6008l-6.3686-6.3022v4.9328c0 6.3185 1.8955 8.2687 8.0366 8.2687 2.5854 0 4.7007-0.13434 4.7007-0.29859zm-57.57 44.279c-5.6185-3.0486-6.1166-5.593-6.1166-31.243 0-18.891 0.31331-24.063 1.6101-26.571 1.809-3.4981 6.5048-6.3339 10.489-6.3339 2.4847 0 2.5814 0.19984 1.541 3.1843-0.61054 1.7514-1.7457 3.1843-2.5226 3.1843-0.77686 0-2.1631 0.75059-3.0805 1.668-2.4923 2.4923-2.4923 47.244 0 49.736 0.91739 0.9174 2.3036 1.668 3.0805 1.668 0.77688 0 1.912 1.4329 2.5226 3.1843 1.0562 3.0298 0.97108 3.1822-1.7537 3.1418-1.575-0.02331-4.1713-0.75194-5.7694-1.6191zm-16.983-4.2458c-5.4392-2.9512-6.1166-5.9415-6.1166-26.997 0-15.096 0.345-19.878 1.6101-22.325 1.7476-3.3796 6.4758-6.3339 10.137-6.3339 1.8666 0 2.1789 0.44955 1.6594 2.3882-0.35184 1.3135-0.64655 2.7465-0.65453 3.1843-8e-3 0.43784-0.69682 0.79608-1.5308 0.79608-0.83399 0-2.2669 0.75059-3.1843 1.668-2.4767 2.4767-2.4767 38.768 0 41.244 0.91741 0.91739 2.2946 1.668 3.0605 1.668 1.196 0 2.6402 2.995 2.6871 5.5726 0.0241 1.3294-4.5804 0.80962-7.6676-0.8655z" style="mix-blend-mode:lighten"/>
-  <path d="m-552.2 68.911c-5.7533-3.1217-6.1166-5.2295-6.1166-35.489 0-30.458 0.35463-32.448 6.3339-35.54 3.9943-2.0655 24.279-2.2805 26.735-0.28333 0.89718 0.72974 6.7203 6.6637 12.94 13.187l11.309 11.86v19.575c0 18.473-0.12957 19.74-2.3011 22.5-4.0223 5.1136-7.558 5.8565-27.65 5.8099-14.15-0.03287-19.008-0.40294-21.25-1.6191zm42.473-6.3594c2.27-1.59 2.359-2.2909 2.359-18.575v-16.923h-6.952c-12.443 0-16.4-4.0845-16.4-16.93v-7.4828h-8.9464c-6.7179 0-9.3619 0.41549-10.614 1.668-2.5031 2.5031-2.5031 55.724 0 58.228 2.4502 2.4502 37.058 2.4636 40.553 0.01609zm-1.8867-42.165c0-0.16422-2.8659-3.1346-6.3686-6.6008l-6.3686-6.3022v4.9328c0 6.3185 1.8955 8.2688 8.0366 8.2688 2.5854 0 4.7007-0.13434 4.7007-0.29859zm-57.57 44.279c-5.6185-3.0486-6.1166-5.593-6.1166-31.243 0-18.891 0.31331-24.063 1.6101-26.571 1.809-3.4981 6.5048-6.3339 10.489-6.3339 2.4847 0 2.5814 0.19984 1.541 3.1843-0.61054 1.7514-1.7457 3.1843-2.5226 3.1843-0.77687 0-2.1631 0.75059-3.0805 1.668-2.4923 2.4923-2.4923 47.244 0 49.736 0.91741 0.91739 2.3036 1.668 3.0805 1.668 0.77686 0 1.912 1.4329 2.5226 3.1843 1.0562 3.0298 0.97107 3.1822-1.7537 3.1418-1.575-0.02331-4.1713-0.75194-5.7694-1.6191zm-16.983-4.2458c-5.4392-2.9512-6.1166-5.9415-6.1166-26.997 0-15.096 0.34502-19.878 1.6101-22.325 1.7476-3.3796 6.4758-6.3339 10.137-6.3339 1.8666 0 2.1789 0.44955 1.6594 2.3882-0.35182 1.3135-0.64653 2.7465-0.65452 3.1843-8e-3 0.43784-0.69683 0.79608-1.5308 0.79608-0.83397 0-2.2669 0.75059-3.1843 1.668-2.4767 2.4767-2.4767 38.768 0 41.245 0.9174 0.91739 2.2946 1.668 3.0605 1.668 1.196 0 2.6402 2.995 2.6871 5.5726 0.0241 1.3294-4.5804 0.80962-7.6676-0.8655z" fill-opacity=".47466" style="mix-blend-mode:lighten"/>
- </g>
- <path d="m128.48 88.913-24.027 4.6784c-0.39475 0.07685-0.68766 0.40944-0.71076 0.80849l-1.4782 24.805c-0.0347 0.58371 0.50497 1.0372 1.0792 0.90602l6.6886-1.5338c0.62676-0.14383 1.1916 0.40419 1.0635 1.0299l-1.9874 9.6702c-0.13438 0.65091 0.48084 1.2073 1.1202 1.0142l4.1322-1.2472c0.64041-0.19317 1.2556 0.36535 1.1202 1.0162l-3.158 15.191c-0.19842 0.95011 1.074 1.4677 1.6042 0.653l0.35485-0.54382 19.578-38.827c0.32755-0.64985-0.23727-1.391-0.95641-1.2535l-6.8849 1.3207c-0.6467 0.12389-1.1979-0.47453-1.0152-1.1034l4.4944-15.482c0.18266-0.63012-0.36955-1.2295-1.0173-1.1034z" fill="url(#linearGradient880)" stroke-width="1.0498"/>
- <rect x="3" y="3" width="169" height="169" rx="84.5" stroke="url(#paint2_linear)" stroke-width="6" style="mix-blend-mode:soft-light"/>
-</svg>

renderer/plugins/i18n.ts

@@ -1,10 +1,8 @@
 import { createI18n } from 'vue-i18n'
 
-// eslint-disable-next-line import/no-relative-parent-imports
+import de from '#src/locales/de.json'
-import de from '../src/locales/de.json'
 // import { de as $vuetify } from 'vuetify/locale'
-// eslint-disable-next-line import/no-relative-parent-imports
+import en from '#src/locales/en.json'
-import en from '../src/locales/en.json'
 // import { en as $vuetify } from 'vuetify/locale'
 
 export default createI18n({

renderer/plugins/pinia.ts

@@ -0,0 +1,3 @@
+import { createPinia } from 'pinia'
+
+export default createPinia()

scripts/tests/plugin.vuetify.ts

@@ -1,9 +1,7 @@
 import { config } from '@vue/test-utils'
 
-// eslint-disable-next-line import/no-relative-parent-imports
+import i18n from '#plugins/i18n'
-import i18n from '../renderer/i18n'
+import vuetify from '#plugins/vuetify'
-// eslint-disable-next-line import/no-relative-parent-imports
-import vuetify from '../renderer/vuetify'
 
 config.global.plugins.push(vuetify(i18n))
 

src/components/PageShell.vue

@@ -4,7 +4,7 @@
       <div class="layout">
         <div class="navigation">
           <a href="/" class="logo">
-            <img src="./logo.svg" height="64" width="64" alt="logo" />
+            <img :src="Logo" height="64" width="64" alt="logo" />
           </a>
           <VikeLink href="/">Home</VikeLink>
           <VikeLink href="/about">About</VikeLink>
@@ -16,6 +16,8 @@
 </template>
 
 <script lang="ts" setup>
+import Logo from '#assets/it4c-logo2-clean-bg_alpha-128x128.png'
+
 import VikeLink from './VikeLink.vue'
 </script>
 

src/components/VikeLink.vue

@@ -4,7 +4,7 @@
   </a>
 </template>
 <script lang="ts" setup>
-import { usePageContext } from './usePageContext'
+import { usePageContext } from '#context/usePageContext'
 
 const pageContext = usePageContext()
 </script>

src/pages/index/index.page.vue

@@ -8,5 +8,5 @@
 </template>
 
 <script lang="ts" setup>
-import ClickCounter from './ClickCounter.vue'
+import ClickCounter from '#components/ClickCounter.vue'
 </script>

tsconfig.json

@@ -9,7 +9,17 @@
     "types": ["vite/client"],
     "skipLibCheck": true,
     "esModuleInterop": true,
-    "resolveJsonModule": true
+    "resolveJsonModule": true,
+    "paths": {
+      "#root/*": ["./*"],
+      "#src/*": ["./src/*"],
+      "#components/*": ["./src/components/*"],
+      "#pages/*": ["./src/pages/*"],
+      "#assets/*": ["./src/assets/*"],
+      "#plugins/*": ["./renderer/plugins/*"],
+      "#context/*": ["./renderer/context/*"],
+      "#types/*": ["./types/*"]
+    }
   },
   "ts-node": {
     "transpileOnly": true,

types/Page.ts

@@ -0,0 +1,5 @@
+import type { ComponentPublicInstance } from 'vue'
+
+type Page = ComponentPublicInstance // https://stackoverflow.com/questions/63985658/how-to-type-vue-instance-out-of-definecomponent-in-vue-3/63986086#63986086
+
+export type { Page }

types/PageContext.ts

@@ -1,25 +1,19 @@
-import type { ComponentPublicInstance } from 'vue'
+import { Page } from '#types/Page'
+import { PageProps } from '#types/PageProps'
 
 export type {
   PageContextServer,
   /*
-  // When using Client Routing https://vike.dev/clientRouting
+    // When using Client Routing https://vike.dev/clientRouting
-  PageContextClient,
+    PageContextClient,
-  PageContext,
+    PageContext,
-  / */
+    / */
   // When using Server Routing
   PageContextClientWithServerRouting as PageContextClient,
   PageContextWithServerRouting as PageContext,
   //* /
 } from 'vike/types'
 
-type PageProps = object
-type Component = ComponentPublicInstance // https://stackoverflow.com/questions/63985658/how-to-type-vue-instance-out-of-definecomponent-in-vue-3/63986086#63986086
-type Page = Component
-
-export type { PageProps }
-export type { Component }
-
 // https://vike.dev/pageContext#typescript
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace

types/PageProps.ts

@@ -0,0 +1,3 @@
+type PageProps = object
+
+export type { PageProps }

vite.config.ts

@@ -1,3 +1,5 @@
+import path from 'path'
+
 import vueI18n from '@intlify/unplugin-vue-i18n/vite'
 import vue from '@vitejs/plugin-vue'
 import vike from 'vike/plugin'
@@ -18,6 +20,18 @@ const config: UserConfig = {
     outDir: './build',
   },
   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'),
+      '#plugins': path.join(__dirname, '/renderer/plugins'),
+      '#context': path.join(__dirname, '/renderer/context'),
+      '#types': path.join(__dirname, '/types'),
+    },
+  },
 }
 
 export default config

vitest.config.ts

@@ -8,13 +8,13 @@ export default mergeConfig(
     test: {
       globals: true,
       environment: 'happy-dom',
-      setupFiles: ['tests/mock.$t.ts', 'tests/plugin.vuetify.ts'],
+      setupFiles: ['scripts/tests/mock.$t.ts', 'scripts/tests/plugin.vuetify.ts'],
       coverage: {
         all: true,
         include: ['src/**/*.{js,jsx,ts,tsx,vue}'],
         lines: 2,
         functions: 0,
-        branches: 10,
+        branches: 8,
         statements: 2,
         // 100: true,
       },