Merge pull request #400 from dreammall-earth/208-feat-change-url-on-l…

…anguage-switch

feat(presenter): add method for language switch that changes the url

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)
 

presenter/scripts/tests/mock.vikePageContext.ts

@@ -6,6 +6,7 @@ config.global.provide = {
   ...config.global.provide,
   [vikePageContext as symbol]: {
     urlPathname: '/some-url',
+    urlOriginal: '/original-url',
     routeParams: {
       code: 'my-code',
     },

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 { navigate } from 'vike/client/router'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
 
 import LanguageSelector from './LanguageSelector.vue'
 
+vi.mock('vike/client/router')
+vi.mocked(navigate).mockResolvedValue()
+
 describe('LanguageSelector', () => {
   const Wrapper = () => {
     return mount(LanguageSelector, {
@@ -29,7 +31,7 @@ describe('LanguageSelector', () => {
     })
 
     it('to en', () => {
-      expect(i18n.global.locale.value).toBe('en')
+      expect(navigate).toHaveBeenCalledWith('/en/original-url')
     })
   })
 })

presenter/src/components/language/LanguageSelector.vue

@@ -12,6 +12,7 @@
     bg-color="transparent"
     hide-details="auto"
     flat
+    @update:model-value="updateLanguage"
   >
     <template #selection="{ item }">
       <span>{{ item.raw.locale.toUpperCase() }}</span>
@@ -27,11 +28,26 @@
 </template>
 
 <script lang="ts" setup>
+import { navigate } from 'vike/client/router'
 import { ref } from 'vue'
 
+import { usePageContext } from '#context/usePageContext'
+import i18n from '#plugins/i18n'
 import { localizedLocale } from '#src/locales'
 
+const pageContext = usePageContext()
 const languages = ref(localizedLocale)
+
+const updateLanguage = () => {
+  const { locale, urlOriginal } = pageContext
+
+  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>
 
 <style lang="scss">

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,