Feat: add useSpeak for scoped translations (#96)

robisim74 · Nov 11, 2023 · 053a441 · 053a441
1 parent afb1842
commit 053a441
Show file tree

Hide file tree

Showing 12 changed files with 42 additions and 30 deletions.
diff --git a/docs/quick-start.md b/docs/quick-start.md
@@ -69,10 +69,10 @@ export default component$(() => {
           <meta charSet="utf-8" />
           <link rel="manifest" href="/manifest.json" />
           <RouterHead />
+          <ServiceWorkerRegister />
         </head>
         <body lang="en">
           <RouterOutlet />
-          <ServiceWorkerRegister />
         </body>
       </QwikCityProvider>
     </QwikSpeakProvider>

diff --git a/docs/tutorial-routing-rewrite.md b/docs/tutorial-routing-rewrite.md
@@ -142,10 +142,10 @@ export default component$(() => {
           <meta charSet="utf-8" />
           <link rel="manifest" href="/manifest.json" />
           <RouterHead />
+          <ServiceWorkerRegister />
         </head>
         <body lang="en">
-          <RouterOutlet />
-          <ServiceWorkerRegister />
+          <RouterOutlet /> 
         </body>
       </QwikSpeakProvider>
     </QwikCityProvider>

diff --git a/docs/tutorial-routing.md b/docs/tutorial-routing.md
@@ -106,10 +106,10 @@ export default component$(() => {
           <meta charSet="utf-8" />
           <link rel="manifest" href="/manifest.json" />
           <RouterHead />
+          <ServiceWorkerRegister />
         </head>
         <body lang="en">
           <RouterOutlet />
-          <ServiceWorkerRegister />
         </body>
       </QwikCityProvider>
     </QwikSpeakProvider>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,15 +21,15 @@
     "qwik": "qwik"
   },
   "devDependencies": {
-    "@builder.io/qwik": "1.2.15",
-    "@builder.io/qwik-city": "1.2.15",
+    "@builder.io/qwik": "1.2.17",
+    "@builder.io/qwik-city": "1.2.17",
     "@playwright/test": "1.38.0",
     "@types/eslint": "8.44.6",
     "@types/node": "^20.8.9",
     "@typescript-eslint/eslint-plugin": "6.9.0",
     "@typescript-eslint/parser": "6.9.0",
     "eslint": "8.52.0",
-    "eslint-plugin-qwik": "1.2.15",
+    "eslint-plugin-qwik": "1.2.17",
     "typescript": "5.2.2",
     "undici": "5.27.0",
     "vite": "4.5.0",

diff --git a/packages/qwik-speak/src/index.ts b/packages/qwik-speak/src/index.ts
@@ -20,7 +20,7 @@ export type { RelativeTimeFn } from './use-relative-time';
 export type { DisplayNameFn } from './use-display-name';
 // Components
 export { QwikSpeakProvider } from './qwik-speak-component';
-export { Speak } from './speak-component';
+export { Speak, useSpeak } from './speak-component';
 // Functions
 export { inlineTranslate } from './inline-translate';
 // Use functions

diff --git a/packages/qwik-speak/src/speak-component.tsx b/packages/qwik-speak/src/speak-component.tsx
@@ -21,9 +21,20 @@ export interface SpeakProps {
 }
 
 /**
- * Add scoped translation data to the context
+ * Add scoped translation data to the context.
+ * Translations will only be available in child components
  */
 export const Speak = component$((props: SpeakProps) => {
+  useSpeak(props);
+
+  return <Slot />;
+});
+
+/**
+ * Add scoped translation data to the context.
+ * Translations will only be available in child components
+ */
+export const useSpeak = (props: SpeakProps) => {
   const ctx = useSpeakContext();
 
   const { config } = ctx;
@@ -44,6 +55,4 @@ export const Speak = component$((props: SpeakProps) => {
 
     await loadTranslations(ctx, props.assets, props.runtimeAssets, props.langs);
   });
-
-  return <Slot />;
-});
+};
diff --git a/packages/qwik-speak/src/use-display-name.ts b/packages/qwik-speak/src/use-display-name.ts
@@ -12,7 +12,7 @@ export type DisplayNameFn = {
   (code: string, options: Intl.DisplayNamesOptions, lang?: string): string;
 };
 
-export const useDisplayName = () => {
+export const useDisplayName = (): DisplayNameFn => {
   const locale = useSpeakLocale();
 
   const displayName = (code: string, options: Intl.DisplayNamesOptions, lang?: string) => {

diff --git a/packages/qwik-speak/src/use-format-number.ts b/packages/qwik-speak/src/use-format-number.ts
@@ -13,7 +13,7 @@ export type FormatNumberFn = {
   (value: number | string, options?: Intl.NumberFormatOptions, lang?: string, currency?: string): string;
 };
 
-export const useFormatNumber = () => {
+export const useFormatNumber = (): FormatNumberFn => {
   const locale = useSpeakLocale();
 
   const formatNumber = (

diff --git a/packages/qwik-speak/src/use-relative-time.ts b/packages/qwik-speak/src/use-relative-time.ts
@@ -17,7 +17,7 @@ export type RelativeTimeFn = {
   ): string;
 };
 
-export const useRelativeTime = () => {
+export const useRelativeTime = (): RelativeTimeFn => {
   const locale = useSpeakLocale();
 
   const relativeTime = (

diff --git a/src/entry.preview.tsx b/src/entry.preview.tsx
@@ -11,8 +11,8 @@
  *
  */
 import { createQwikCity } from '@builder.io/qwik-city/middleware/node';
-import render from './entry.ssr';
 import qwikCityPlan from '@qwik-city-plan';
+import render from './entry.ssr';
 
 /**
  * The default export is the QwikCity adaptor used by Vite preview.

diff --git a/src/root.tsx b/src/root.tsx
@@ -19,10 +19,10 @@ export default component$(() => {
           <meta charSet="utf-8" />
           <link rel="manifest" href="/manifest.json" />
           <RouterHead />
+          <ServiceWorkerRegister />
         </head>
         <body>
           <RouterOutlet />
-          <ServiceWorkerRegister />
         </body>
       </QwikCityProvider>
     </QwikSpeakProvider>