From f95b846d1ff099b7bbdc21bd786e05ee160b12e3 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Tue, 26 Mar 2024 15:13:52 +0100
Subject: [PATCH 01/11] Add method for language switch that changes the url.

---
 .../components/language/LanguageSelector.vue  | 35 +++++++++++++++++--
 1 file changed, 33 insertions(+), 2 deletions(-)

diff --git a/presenter/src/components/language/LanguageSelector.vue b/presenter/src/components/language/LanguageSelector.vue
index 557aa671de..dd2b9e54f3 100644
--- a/presenter/src/components/language/LanguageSelector.vue
+++ b/presenter/src/components/language/LanguageSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <v-select
-    v-model="$i18n.locale"
+    v-model="selectedLocale"
     density="compact"
     name="language"
     :items="languages"
@@ -12,6 +12,7 @@
     bg-color="transparent"
     hide-details="auto"
     flat
+    @update:model-value="updateLanguage"
   >
     <template #selection="{ item }">
       <span>{{ item.raw.locale.toUpperCase() }}</span>
@@ -29,9 +30,39 @@
 <script lang="ts" setup>
 import { ref } from 'vue'
 
-import { localizedLocale } from '#src/locales'
+import { usePageContext } from '#context/usePageContext'
+import i18n from '#plugins/i18n'
+import { LocaleCode, locales, localizedLocale } from '#src/locales'
 
+const pageContext = usePageContext()
 const languages = ref(localizedLocale)
+
+const selectedLocale = ref(i18n.global.locale.value)
+
+const updateLanguage = () => {
+  if (locales.includes(selectedLocale.value)) {
+    i18n.global.locale.value = selectedLocale.value
+  }
+
+  let { urlOriginal } = pageContext
+  const urlPaths = urlOriginal.split('/')
+
+  let urlWithoutLocale = ''
+  let leadingSlash = '/'
+  if (urlPaths[1].indexOf('#') > -1) {
+    const hashUrl = urlPaths[1].split('#')
+    urlWithoutLocale = '#' + hashUrl[1]
+    leadingSlash = ''
+  } else if (!locales.includes(urlPaths[1] as LocaleCode)) {
+    urlWithoutLocale = leadingSlash + urlPaths[1]
+  }
+
+  if (locales.includes(selectedLocale.value)) {
+    urlWithoutLocale += leadingSlash + urlPaths.slice(2).join('/')
+    urlOriginal = '/' + selectedLocale.value + urlWithoutLocale
+  }
+  window.location.href = urlOriginal
+}
 </script>
 
 <style lang="scss">

From 76ecd1f38615e63c8b7f63a60f1cddedd557d5f0 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 26 Mar 2024 17:46:10 +0100
Subject: [PATCH 02/11] fix mock url

---
 presenter/scripts/tests/mock.vikePageContext.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/presenter/scripts/tests/mock.vikePageContext.ts b/presenter/scripts/tests/mock.vikePageContext.ts
index b52d8932a8..33c95ca63e 100644
--- a/presenter/scripts/tests/mock.vikePageContext.ts
+++ b/presenter/scripts/tests/mock.vikePageContext.ts
@@ -6,6 +6,7 @@ config.global.provide = {
   ...config.global.provide,
   [vikePageContext as symbol]: {
     urlPathname: '/some-url',
+    urlOriginal: '/some-url',
     routeParams: {
       code: 'my-code',
     },

From bbc0b8a13b6fc4716df91e97803fea4c2da53b93 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 26 Mar 2024 18:02:09 +0100
Subject: [PATCH 03/11] simplify things

---
 .../components/language/LanguageSelector.vue  | 33 ++++---------------
 1 file changed, 7 insertions(+), 26 deletions(-)

diff --git a/presenter/src/components/language/LanguageSelector.vue b/presenter/src/components/language/LanguageSelector.vue
index dd2b9e54f3..71a964971d 100644
--- a/presenter/src/components/language/LanguageSelector.vue
+++ b/presenter/src/components/language/LanguageSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <v-select
-    v-model="selectedLocale"
+    v-model="$i18n.locale"
     density="compact"
     name="language"
     :items="languages"
@@ -32,36 +32,17 @@ import { ref } from 'vue'
 
 import { usePageContext } from '#context/usePageContext'
 import i18n from '#plugins/i18n'
-import { LocaleCode, locales, localizedLocale } from '#src/locales'
+import { localizedLocale } from '#src/locales'
 
 const pageContext = usePageContext()
 const languages = ref(localizedLocale)
 
-const selectedLocale = ref(i18n.global.locale.value)
-
 const updateLanguage = () => {
-  if (locales.includes(selectedLocale.value)) {
-    i18n.global.locale.value = selectedLocale.value
-  }
-
-  let { urlOriginal } = pageContext
-  const urlPaths = urlOriginal.split('/')
-
-  let urlWithoutLocale = ''
-  let leadingSlash = '/'
-  if (urlPaths[1].indexOf('#') > -1) {
-    const hashUrl = urlPaths[1].split('#')
-    urlWithoutLocale = '#' + hashUrl[1]
-    leadingSlash = ''
-  } else if (!locales.includes(urlPaths[1] as LocaleCode)) {
-    urlWithoutLocale = leadingSlash + urlPaths[1]
-  }
-
-  if (locales.includes(selectedLocale.value)) {
-    urlWithoutLocale += leadingSlash + urlPaths.slice(2).join('/')
-    urlOriginal = '/' + selectedLocale.value + urlWithoutLocale
-  }
-  window.location.href = urlOriginal
+  const { locale } = pageContext
+  window.location.href = window.location.href.replace(
+    `/${locale}/`,
+    `/${i18n.global.locale.value}/`,
+  )
 }
 </script>
 

From d516d87cf5789a72594093875eef1e1962407acb Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 26 Mar 2024 19:03:39 +0100
Subject: [PATCH 04/11] simplify things

---
 .../src/components/language/LanguageSelector.vue  | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/presenter/src/components/language/LanguageSelector.vue b/presenter/src/components/language/LanguageSelector.vue
index 71a964971d..28a83d8ca6 100644
--- a/presenter/src/components/language/LanguageSelector.vue
+++ b/presenter/src/components/language/LanguageSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <v-select
-    v-model="$i18n.locale"
+    v-model="selectedLocale"
     density="compact"
     name="language"
     :items="languages"
@@ -37,12 +37,15 @@ import { localizedLocale } from '#src/locales'
 const pageContext = usePageContext()
 const languages = ref(localizedLocale)
 
+const selectedLocale = ref(i18n.global.locale.value)
+
 const updateLanguage = () => {
-  const { locale } = pageContext
-  window.location.href = window.location.href.replace(
-    `/${locale}/`,
-    `/${i18n.global.locale.value}/`,
-  )
+  const { locale, urlOriginal } = pageContext
+
+  window.location.href = urlOriginal
+    // eslint-disable-next-line security/detect-non-literal-regexp
+    .replace(new RegExp(`/(${locale})?(.*)`, 'g'), `/${selectedLocale.value}/$2`)
+    .replace(/(\/(#|\?))?/g, '$2')
 }
 </script>
 

From 8d5fc677e9b004f960039eb4a9d103a65a471320 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 26 Mar 2024 19:10:09 +0100
Subject: [PATCH 05/11] fixed warning of all sorts

---
 presenter/renderer/+onRenderHtml.ts | 4 ++--
 presenter/vite.config.ts            | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/presenter/renderer/+onRenderHtml.ts b/presenter/renderer/+onRenderHtml.ts
index 531125a3c2..61809742e5 100644
--- a/presenter/renderer/+onRenderHtml.ts
+++ b/presenter/renderer/+onRenderHtml.ts
@@ -1,7 +1,7 @@
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import { PageContext, PageContextServer } from 'vike/types'
-import { resolveComponent } from 'vue'
+// import { resolveComponent } from 'vue'
 
 import logoUrl from '#assets/favicon.ico'
 import image from '#assets/img/dreammall-logo_social.png'
@@ -15,7 +15,7 @@ import type { App } from 'vue'
 // this fixes a warning which occurs when building
 // > "resolveComponent" is imported from external module "vue" but never used in ...
 // running this here fixes the warning and should not impact anything due to prerender setting.
-resolveComponent('nothing')
+// resolveComponent('nothing')
 
 async function render(pageContext: PageContextServer & PageContext) {
   const { app, i18n } = createApp(pageContext, false)
diff --git a/presenter/vite.config.ts b/presenter/vite.config.ts
index 748f2712c3..1ae4156ca2 100644
--- a/presenter/vite.config.ts
+++ b/presenter/vite.config.ts
@@ -19,6 +19,7 @@ const config: UserConfig = {
       ssr: true,
       include: path.resolve(__dirname, './src/locales/**.json'),
       jitCompilation: false,
+      runtimeOnly: false,
     }),
     checker({
       typescript: true,

From 48b4a61d718009f14b5655945abc5153eb9d3f8a Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 26 Mar 2024 19:12:06 +0100
Subject: [PATCH 06/11] missing changes

---
 presenter/renderer/+onRenderHtml.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/presenter/renderer/+onRenderHtml.ts b/presenter/renderer/+onRenderHtml.ts
index 61809742e5..df946f053c 100644
--- a/presenter/renderer/+onRenderHtml.ts
+++ b/presenter/renderer/+onRenderHtml.ts
@@ -1,7 +1,6 @@
 import { renderToString as renderToString_ } from '@vue/server-renderer'
 import { escapeInject, dangerouslySkipEscape } from 'vike/server'
 import { PageContext, PageContextServer } from 'vike/types'
-// import { resolveComponent } from 'vue'
 
 import logoUrl from '#assets/favicon.ico'
 import image from '#assets/img/dreammall-logo_social.png'
@@ -12,11 +11,6 @@ import { getDescription, getTitle } from './utils'
 
 import type { App } from 'vue'
 
-// this fixes a warning which occurs when building
-// > "resolveComponent" is imported from external module "vue" but never used in ...
-// running this here fixes the warning and should not impact anything due to prerender setting.
-// resolveComponent('nothing')
-
 async function render(pageContext: PageContextServer & PageContext) {
   const { app, i18n } = createApp(pageContext, false)
 

From 6e70e04bcc871c85fcb5466c9e9ec8e781be2995 Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Tue, 26 Mar 2024 19:24:05 +0100
Subject: [PATCH 07/11] fix test

---
 .../language/LanguageSelector.test.ts         | 22 +++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/presenter/src/components/language/LanguageSelector.test.ts b/presenter/src/components/language/LanguageSelector.test.ts
index 788865856f..8029222275 100644
--- a/presenter/src/components/language/LanguageSelector.test.ts
+++ b/presenter/src/components/language/LanguageSelector.test.ts
@@ -1,10 +1,12 @@
 import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeEach } from 'vitest'
-
-import i18n from '#plugins/i18n'
+import { describe, it, expect, beforeEach, vi, beforeAll, afterAll } from 'vitest'
 
 import LanguageSelector from './LanguageSelector.vue'
 
+const { location } = window
+
+const setHrefSpy = vi.fn((href: string) => href)
+
 describe('LanguageSelector', () => {
   const Wrapper = () => {
     return mount(LanguageSelector, {
@@ -14,6 +16,18 @@ describe('LanguageSelector', () => {
   let wrapper: ReturnType<typeof Wrapper>
   let vSelect: ReturnType<typeof wrapper.findComponent>
 
+  beforeAll(() => {
+    window.location = {} as Location
+    Object.defineProperty(window.location, 'href', {
+      get: vi.fn(),
+      set: setHrefSpy,
+    })
+  })
+
+  afterAll(() => {
+    window.location = location
+  })
+
   beforeEach(() => {
     wrapper = Wrapper()
     vSelect = wrapper.findComponent({ name: 'v-select' })
@@ -29,7 +43,7 @@ describe('LanguageSelector', () => {
     })
 
     it('to en', () => {
-      expect(i18n.global.locale.value).toBe('en')
+      expect(setHrefSpy).toHaveBeenCalledWith('/en/some-url')
     })
   })
 })

From cc71ac38419468dc9b8cd7c34982fad35edce33e Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Wed, 27 Mar 2024 08:51:28 +0100
Subject: [PATCH 08/11] Switch to spy on window.location.href

---
 .../language/LanguageSelector.test.ts         | 20 +++----------------
 1 file changed, 3 insertions(+), 17 deletions(-)

diff --git a/presenter/src/components/language/LanguageSelector.test.ts b/presenter/src/components/language/LanguageSelector.test.ts
index 8029222275..8111911db7 100644
--- a/presenter/src/components/language/LanguageSelector.test.ts
+++ b/presenter/src/components/language/LanguageSelector.test.ts
@@ -1,11 +1,9 @@
 import { mount } from '@vue/test-utils'
-import { describe, it, expect, beforeEach, vi, beforeAll, afterAll } from 'vitest'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
 
 import LanguageSelector from './LanguageSelector.vue'
 
-const { location } = window
-
-const setHrefSpy = vi.fn((href: string) => href)
+const locationHrefSetSpy = vi.spyOn(window.location, 'href', 'set')
 
 describe('LanguageSelector', () => {
   const Wrapper = () => {
@@ -16,18 +14,6 @@ describe('LanguageSelector', () => {
   let wrapper: ReturnType<typeof Wrapper>
   let vSelect: ReturnType<typeof wrapper.findComponent>
 
-  beforeAll(() => {
-    window.location = {} as Location
-    Object.defineProperty(window.location, 'href', {
-      get: vi.fn(),
-      set: setHrefSpy,
-    })
-  })
-
-  afterAll(() => {
-    window.location = location
-  })
-
   beforeEach(() => {
     wrapper = Wrapper()
     vSelect = wrapper.findComponent({ name: 'v-select' })
@@ -43,7 +29,7 @@ describe('LanguageSelector', () => {
     })
 
     it('to en', () => {
-      expect(setHrefSpy).toHaveBeenCalledWith('/en/some-url')
+      expect(locationHrefSetSpy).toHaveBeenCalledWith('/en/some-url')
     })
   })
 })

From 0e370c2a6fa64050cf4136def1bd829a1b0bbe23 Mon Sep 17 00:00:00 2001
From: elweyn <heine.hannes@gmail.com>
Date: Wed, 27 Mar 2024 08:54:37 +0100
Subject: [PATCH 09/11] Change value of originalUrl in mock to better
 differentiate which is used.

---
 presenter/scripts/tests/mock.vikePageContext.ts            | 2 +-
 presenter/src/components/language/LanguageSelector.test.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/presenter/scripts/tests/mock.vikePageContext.ts b/presenter/scripts/tests/mock.vikePageContext.ts
index 33c95ca63e..8bea3e2513 100644
--- a/presenter/scripts/tests/mock.vikePageContext.ts
+++ b/presenter/scripts/tests/mock.vikePageContext.ts
@@ -6,7 +6,7 @@ config.global.provide = {
   ...config.global.provide,
   [vikePageContext as symbol]: {
     urlPathname: '/some-url',
-    urlOriginal: '/some-url',
+    urlOriginal: '/original-url',
     routeParams: {
       code: 'my-code',
     },
diff --git a/presenter/src/components/language/LanguageSelector.test.ts b/presenter/src/components/language/LanguageSelector.test.ts
index 8111911db7..994b49b778 100644
--- a/presenter/src/components/language/LanguageSelector.test.ts
+++ b/presenter/src/components/language/LanguageSelector.test.ts
@@ -29,7 +29,7 @@ describe('LanguageSelector', () => {
     })
 
     it('to en', () => {
-      expect(locationHrefSetSpy).toHaveBeenCalledWith('/en/some-url')
+      expect(locationHrefSetSpy).toHaveBeenCalledWith('/en/original-url')
     })
   })
 })

From 6887bec7525ccc1f434b81989d2ca4f73909eb0e Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Wed, 27 Mar 2024 09:01:19 +0100
Subject: [PATCH 10/11] utilize navigate

---
 .../src/components/language/LanguageSelector.vue  | 15 ++++++++-------
 1 file changed, 8 insertions(+), 7 deletions(-)

diff --git a/presenter/src/components/language/LanguageSelector.vue b/presenter/src/components/language/LanguageSelector.vue
index 28a83d8ca6..78132f6478 100644
--- a/presenter/src/components/language/LanguageSelector.vue
+++ b/presenter/src/components/language/LanguageSelector.vue
@@ -1,6 +1,6 @@
 <template>
   <v-select
-    v-model="selectedLocale"
+    v-model="$i18n.locale"
     density="compact"
     name="language"
     :items="languages"
@@ -28,6 +28,7 @@
 </template>
 
 <script lang="ts" setup>
+import { navigate } from 'vike/client/router'
 import { ref } from 'vue'
 
 import { usePageContext } from '#context/usePageContext'
@@ -37,15 +38,15 @@ import { localizedLocale } from '#src/locales'
 const pageContext = usePageContext()
 const languages = ref(localizedLocale)
 
-const selectedLocale = ref(i18n.global.locale.value)
-
 const updateLanguage = () => {
   const { locale, urlOriginal } = pageContext
 
-  window.location.href = urlOriginal
-    // eslint-disable-next-line security/detect-non-literal-regexp
-    .replace(new RegExp(`/(${locale})?(.*)`, 'g'), `/${selectedLocale.value}/$2`)
-    .replace(/(\/(#|\?))?/g, '$2')
+  navigate(
+    urlOriginal
+      // eslint-disable-next-line security/detect-non-literal-regexp
+      .replace(new RegExp(`/(${locale})?(.*)`, 'g'), `/${i18n.global.locale.value}/$2`)
+      .replace(/(\/(#|\?))?/g, '$2'),
+  )
 }
 </script>
 

From cf20046fa72bdc9c3a5db6b314fa19a53fd7529d Mon Sep 17 00:00:00 2001
From: Ulf Gebhardt <ulf.gebhardt@webcraft-media.de>
Date: Wed, 27 Mar 2024 09:08:29 +0100
Subject: [PATCH 11/11] fix test to work with navigate

---
 presenter/src/components/language/LanguageSelector.test.ts | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/presenter/src/components/language/LanguageSelector.test.ts b/presenter/src/components/language/LanguageSelector.test.ts
index 994b49b778..bdb9830ec8 100644
--- a/presenter/src/components/language/LanguageSelector.test.ts
+++ b/presenter/src/components/language/LanguageSelector.test.ts
@@ -1,9 +1,11 @@
 import { mount } from '@vue/test-utils'
+import { navigate } from 'vike/client/router'
 import { describe, it, expect, beforeEach, vi } from 'vitest'
 
 import LanguageSelector from './LanguageSelector.vue'
 
-const locationHrefSetSpy = vi.spyOn(window.location, 'href', 'set')
+vi.mock('vike/client/router')
+vi.mocked(navigate).mockResolvedValue()
 
 describe('LanguageSelector', () => {
   const Wrapper = () => {
@@ -29,7 +31,7 @@ describe('LanguageSelector', () => {
     })
 
     it('to en', () => {
-      expect(locationHrefSetSpy).toHaveBeenCalledWith('/en/original-url')
+      expect(navigate).toHaveBeenCalledWith('/en/original-url')
     })
   })
 })