Skip to content

Commit

Permalink
feat: update vue tolgee provider to same logic as react
Browse files Browse the repository at this point in the history
  • Loading branch information
Štěpán Granát authored and Štěpán Granát committed Dec 28, 2024
1 parent f773b3b commit 083c905
Show file tree
Hide file tree
Showing 3 changed files with 25 additions and 25 deletions.
8 changes: 2 additions & 6 deletions packages/react/src/TolgeeProvider.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
import React, { Suspense, useEffect, useState } from 'react';
import {
CachePublicRecord,
TolgeeInstance,
TolgeeStaticData,
} from '@tolgee/web';
import { TolgeeInstance, TolgeeStaticDataProp } from '@tolgee/web';
import { ReactOptions, TolgeeReactContext } from './types';
import { useTolgeeSSR } from './useTolgeeSSR';

Expand Down Expand Up @@ -33,7 +29,7 @@ export type SSROptions = {
/**
* If provided, static data will be hard set to Tolgee cache for initial render
*/
staticData?: TolgeeStaticData | CachePublicRecord[];
staticData?: TolgeeStaticDataProp;
};

export interface TolgeeProviderProps {
Expand Down
40 changes: 22 additions & 18 deletions packages/vue/src/TolgeeProvider.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,29 @@ import {
computed,
} from 'vue';
import type { Ref, ComputedRef } from 'vue';
import { TolgeeInstance, TolgeeStaticData } from '@tolgee/web';
import { TolgeeInstance, TolgeeStaticDataProp } from '@tolgee/web';
import { TolgeeVueContext } from './types';

export type SSROptions = {
/**
* Hard set language to this value, use together with `staticData`
*/
language?: string;
/**
* If provided, static data will be hard set to Tolgee cache for initial render
*/
staticData?: TolgeeStaticDataProp;
};

export const TolgeeProvider = defineComponent({
name: 'TolgeeProvider',
props: {
tolgee: { type: Object as PropType<TolgeeInstance>, required: false },
fallback: {
type: [Object, String] as PropType<JSX.Element | string>,
},
staticData: {
type: Object as PropType<TolgeeStaticData>,
required: false,
},
language: {
type: String as PropType<string>,
ssr: {
type: [Object, Boolean] as PropType<SSROptions | boolean>,
required: false,
},
},
Expand All @@ -46,27 +53,24 @@ export const TolgeeProvider = defineComponent({
throw new Error('Tolgee instance not provided');
}

if (tolgeeContext.value.isInitialRender) {
if (!props.staticData || !props.language) {
throw new Error(
'TolgeeProvider: "staticData" and "language" props are required for SSR.'
);
}

if (tolgeeContext.value.isInitialRender && Boolean(props.ssr)) {
const ssr = (
typeof props.ssr === 'object' ? props.ssr : {}
) as SSROptions;
tolgee.value.setEmitterActive(false);
tolgee.value.addStaticData(props.staticData);
tolgee.value.changeLanguage(props.language);
tolgee.value.addStaticData(ssr.staticData);
tolgee.value.changeLanguage(ssr.language);
tolgee.value.setEmitterActive(true);

if (!tolgee.value.isLoaded()) {
// warning user, that static data provided are not sufficient
// for proper SSR render
const missingRecords = tolgee.value
.getRequiredRecords(props.language)
.getRequiredRecords(ssr.language)
.map(({ namespace, language }) =>
namespace ? `${namespace}:${language}` : language
)
.filter((key) => !props.staticData?.[key]);
.filter((key) => !ssr.staticData?.[key]);

// eslint-disable-next-line no-console
console.warn(
Expand Down
2 changes: 1 addition & 1 deletion testapps/vue-ssr/pages/+Layout.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<template>
<TolgeeProvider v-bind:staticData="staticData" language="en">
<TolgeeProvider :ssr="{ staticData, language: 'en' }">
<slot></slot>
</TolgeeProvider>
</template>
Expand Down

0 comments on commit 083c905

Please sign in to comment.