From 2851a5144f6145069e0324905e4910b0118911b6 Mon Sep 17 00:00:00 2001 From: Ulf Gebhardt Date: Wed, 22 Nov 2023 01:51:12 +0100 Subject: [PATCH] clean structure --- .eslintrc.json | 5 ++++- .storybook/preview.ts | 6 ++---- README.md | 1 - package.json | 13 +++++++++++- renderer/_default.page.client.ts | 6 +++--- renderer/_default.page.server.ts | 10 +++++---- renderer/app.ts | 21 ++++++++++--------- renderer/{ => context}/usePageContext.ts | 8 +++---- renderer/{ => plugins}/i18n.ts | 6 ++---- renderer/plugins/pinia.ts | 3 +++ renderer/{ => plugins}/vuetify.ts | 0 {tests => scripts/tests}/mock.$t.ts | 0 {tests => scripts/tests}/plugin.vuetify.ts | 6 ++---- .../index => components}/ClickCounter.test.ts | 0 .../index => components}/ClickCounter.vue | 0 {renderer => src/components}/PageShell.vue | 0 {renderer => src/components}/VikeLink.vue | 2 +- {renderer => src/components}/logo.svg | 0 src/pages/index/index.page.vue | 2 +- tsconfig.json | 11 +++++++++- types/Page.ts | 5 +++++ renderer/types.ts => types/PageContext.ts | 18 ++++++---------- types/PageProps.ts | 3 +++ {src => types}/vue.d.ts | 0 vite.config.ts | 13 ++++++++++++ 25 files changed, 88 insertions(+), 51 deletions(-) rename renderer/{ => context}/usePageContext.ts (92%) rename renderer/{ => plugins}/i18n.ts (60%) create mode 100644 renderer/plugins/pinia.ts rename renderer/{ => plugins}/vuetify.ts (100%) rename {tests => scripts/tests}/mock.$t.ts (100%) rename {tests => scripts/tests}/plugin.vuetify.ts (51%) rename src/{pages/index => components}/ClickCounter.test.ts (100%) rename src/{pages/index => components}/ClickCounter.vue (100%) rename {renderer => src/components}/PageShell.vue (100%) rename {renderer => src/components}/VikeLink.vue (82%) rename {renderer => src/components}/logo.svg (100%) create mode 100644 types/Page.ts rename renderer/types.ts => types/PageContext.ts (57%) create mode 100644 types/PageProps.ts rename {src => types}/vue.d.ts (100%) diff --git a/.eslintrc.json b/.eslintrc.json index 485bb1d..847ccc3 100644 --- a/.eslintrc.json +++ b/.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,plugins,context,types]/*"] } + ], "import/no-self-import": "error", "import/no-unresolved": "error", "import/no-useless-path-segments": "error", diff --git a/.storybook/preview.ts b/.storybook/preview.ts index ee63b23..66cbf53 100644 --- a/.storybook/preview.ts +++ b/.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 '../renderer/i18n' -// eslint-disable-next-line import/no-relative-parent-imports -import CreateVuetify from '../renderer/vuetify' +import i18n from '#plugins/i18n' +import CreateVuetify from '#plugins/vuetify' import { withVuetifyTheme } from './withVuetifyTheme.decorator' diff --git a/README.md b/README.md index 0aaf255..fa12e5e 100644 --- a/README.md +++ b/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 diff --git a/package.json b/package.json index 6aa994a..0ef222d 100644 --- a/package.json +++ b/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,14 @@ "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/*", + "#plugins/*": "./renderer/plugins/*", + "#context/*": "./renderer/context/*", + "#types/*": "./types/*" } } diff --git a/renderer/_default.page.client.ts b/renderer/_default.page.client.ts index 0104d10..53796fc 100644 --- a/renderer/_default.page.client.ts +++ b/renderer/_default.page.client.ts @@ -1,8 +1,6 @@ import { createApp } from './app' -import type { PageContextClient } from './types' - -export { render } +import type { PageContextClient } from '#types/PageContext' // 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 } diff --git a/renderer/_default.page.server.ts b/renderer/_default.page.server.ts index 6b2f872..dee8e86 100644 --- a/renderer/_default.page.server.ts +++ b/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 './logo.svg' +import logoUrl from '#components/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 } diff --git a/renderer/app.ts b/renderer/app.ts index 71afa40..90c69ef 100644 --- a/renderer/app.ts +++ b/renderer/app.ts @@ -1,16 +1,16 @@ -import { createPinia } from 'pinia' import { createSSRApp, defineComponent, h } from 'vue' -import i18n from './i18n' -import PageShell from './PageShell.vue' -import { setPageContext } from './usePageContext' -import CreateVuetify from './vuetify' +import PageShell from '#components//PageShell.vue' +import { setPageContext } from '#context/usePageContext' +import i18n from '#plugins/i18n' +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: Component, pageProps: PageProps | undefined, pageContext: PageContext) { +function createApp(Page: Page, 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 } diff --git a/renderer/usePageContext.ts b/renderer/context/usePageContext.ts similarity index 92% rename from renderer/usePageContext.ts rename to renderer/context/usePageContext.ts index 5970e1a..e7e7163 100644 --- a/renderer/usePageContext.ts +++ b/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 = Symbol(undefined) function usePageContext() { @@ -21,3 +18,6 @@ function usePageContext() { function setPageContext(app: App, pageContext: PageContext) { app.provide(key, pageContext) } + +export { usePageContext } +export { setPageContext } diff --git a/renderer/i18n.ts b/renderer/plugins/i18n.ts similarity index 60% rename from renderer/i18n.ts rename to renderer/plugins/i18n.ts index bfef1cb..9ed0a5f 100644 --- a/renderer/i18n.ts +++ b/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({ diff --git a/renderer/plugins/pinia.ts b/renderer/plugins/pinia.ts new file mode 100644 index 0000000..f00b209 --- /dev/null +++ b/renderer/plugins/pinia.ts @@ -0,0 +1,3 @@ +import { createPinia } from 'pinia' + +export default createPinia() diff --git a/renderer/vuetify.ts b/renderer/plugins/vuetify.ts similarity index 100% rename from renderer/vuetify.ts rename to renderer/plugins/vuetify.ts diff --git a/tests/mock.$t.ts b/scripts/tests/mock.$t.ts similarity index 100% rename from tests/mock.$t.ts rename to scripts/tests/mock.$t.ts diff --git a/tests/plugin.vuetify.ts b/scripts/tests/plugin.vuetify.ts similarity index 51% rename from tests/plugin.vuetify.ts rename to scripts/tests/plugin.vuetify.ts index c2235c0..3802ffb 100644 --- a/tests/plugin.vuetify.ts +++ b/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 '../renderer/i18n' -// eslint-disable-next-line import/no-relative-parent-imports -import vuetify from '../renderer/vuetify' +import i18n from '#plugins/i18n' +import vuetify from '#plugins/vuetify' config.global.plugins.push(vuetify(i18n)) diff --git a/src/pages/index/ClickCounter.test.ts b/src/components/ClickCounter.test.ts similarity index 100% rename from src/pages/index/ClickCounter.test.ts rename to src/components/ClickCounter.test.ts diff --git a/src/pages/index/ClickCounter.vue b/src/components/ClickCounter.vue similarity index 100% rename from src/pages/index/ClickCounter.vue rename to src/components/ClickCounter.vue diff --git a/renderer/PageShell.vue b/src/components/PageShell.vue similarity index 100% rename from renderer/PageShell.vue rename to src/components/PageShell.vue diff --git a/renderer/VikeLink.vue b/src/components/VikeLink.vue similarity index 82% rename from renderer/VikeLink.vue rename to src/components/VikeLink.vue index 7b76a89..f79f032 100644 --- a/renderer/VikeLink.vue +++ b/src/components/VikeLink.vue @@ -4,7 +4,7 @@ diff --git a/renderer/logo.svg b/src/components/logo.svg similarity index 100% rename from renderer/logo.svg rename to src/components/logo.svg diff --git a/src/pages/index/index.page.vue b/src/pages/index/index.page.vue index c99cda2..113e994 100644 --- a/src/pages/index/index.page.vue +++ b/src/pages/index/index.page.vue @@ -8,5 +8,5 @@ diff --git a/tsconfig.json b/tsconfig.json index 59b5d5e..7a2480f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -9,7 +9,16 @@ "types": ["vite/client"], "skipLibCheck": true, "esModuleInterop": true, - "resolveJsonModule": true + "resolveJsonModule": true, + "paths": { + "#root/*": ["./*"], + "#src/*": ["./src/*"], + "#components/*": ["./src/components/*"], + "#pages/*": ["./src/pages/*"], + "#plugins/*": ["./renderer/plugins/*"], + "#context/*": ["./renderer/context/*"], + "#types/*": ["./types/*"] + } }, "ts-node": { "transpileOnly": true, diff --git a/types/Page.ts b/types/Page.ts new file mode 100644 index 0000000..b562c67 --- /dev/null +++ b/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 } diff --git a/renderer/types.ts b/types/PageContext.ts similarity index 57% rename from renderer/types.ts rename to types/PageContext.ts index c4393f5..24a52a1 100644 --- a/renderer/types.ts +++ b/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 - PageContextClient, - PageContext, - / */ + // When using Client Routing https://vike.dev/clientRouting + PageContextClient, + 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 diff --git a/types/PageProps.ts b/types/PageProps.ts new file mode 100644 index 0000000..ef7d982 --- /dev/null +++ b/types/PageProps.ts @@ -0,0 +1,3 @@ +type PageProps = object + +export type { PageProps } diff --git a/src/vue.d.ts b/types/vue.d.ts similarity index 100% rename from src/vue.d.ts rename to types/vue.d.ts diff --git a/vite.config.ts b/vite.config.ts index 7d3cda6..340f674 100644 --- a/vite.config.ts +++ b/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,17 @@ 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'), + '#plugins': path.join(__dirname, '/renderer/plugins'), + '#context': path.join(__dirname, '/renderer/context'), + '#types': path.join(__dirname, '/types'), + }, + }, } export default config