Fix: add noSerialize to functions to avoid Code(3) error (#57)

Author: robisim74

docs/translate.md

@@ -1,4 +1,5 @@
 # Translate
+> The return functions of `useTranslate`, `inlineTranslate` and `usePlural` are parsed and replaced with translated texts at compile time. For this reason, they expect _values_ or _identifiers_ as parameters, and no JavaScript _operators_
 
 ## useTranslate
 `useTranslate` returns a functions to get the translation using key-value pairs:

packages/qwik-speak/src/use-display-name.ts

@@ -1,3 +1,4 @@
+import { noSerialize } from '@builder.io/qwik';
 import { useSpeakLocale } from './use-speak';
 
 export type DisplayNameFn = {
@@ -20,5 +21,5 @@ export const useDisplayName = () => {
     return new Intl.DisplayNames(lang, options).of(code) || code;
   };
 
-  return displayName as DisplayNameFn;
+  return noSerialize(displayName) as DisplayNameFn;
 };

packages/qwik-speak/src/use-format-date.ts

@@ -1,4 +1,4 @@
-
+import { noSerialize } from '@builder.io/qwik';
 import { useSpeakLocale } from './use-speak';
 
 export type FormatDateFn = {
@@ -33,5 +33,5 @@ export const useFormatDate = (): FormatDateFn => {
     return new Intl.DateTimeFormat(lang, options).format(value);
   };
 
-  return formateDate as FormatDateFn;
+  return noSerialize(formateDate) as FormatDateFn;
 };

packages/qwik-speak/src/use-format-number.ts

@@ -1,3 +1,4 @@
+import { noSerialize } from '@builder.io/qwik';
 import { useSpeakLocale } from './use-speak';
 
 export type FormatNumberFn = {
@@ -32,5 +33,5 @@ export const useFormatNumber = () => {
     return new Intl.NumberFormat(lang, options).format(value);
   };
 
-  return formatNumber as FormatNumberFn;
+  return noSerialize(formatNumber) as FormatNumberFn;
 };

packages/qwik-speak/src/use-plural.ts

@@ -1,3 +1,4 @@
+import { noSerialize } from '@builder.io/qwik';
 import { useSpeakContext } from './use-speak';
 import { getValue } from './core';
 
@@ -42,5 +43,5 @@ export const usePlural = (): PluralFn => {
     return getValue(key, translation[lang], { value, ...params }, config.keySeparator, config.keyValueSeparator);
   };
 
-  return plural as PluralFn;
+  return noSerialize(plural) as PluralFn;
 };

packages/qwik-speak/src/use-relative-time.ts

@@ -1,3 +1,4 @@
+import { noSerialize } from '@builder.io/qwik';
 import { useSpeakLocale } from './use-speak';
 
 export type RelativeTimeFn = {
@@ -32,5 +33,5 @@ export const useRelativeTime = () => {
     return new Intl.RelativeTimeFormat(lang, options).format(value, unit);
   };
 
-  return relativeTime as RelativeTimeFn;
+  return noSerialize(relativeTime) as RelativeTimeFn;
 };

packages/qwik-speak/src/use-translate.ts

@@ -1,3 +1,4 @@
+import { noSerialize } from '@builder.io/qwik';
 import { useSpeakContext } from './use-speak';
 import { getValue } from './core';
 
@@ -39,5 +40,5 @@ export const useTranslate = (): TranslateFn => {
     return getValue(keys, translation[lang], params, config.keySeparator, config.keyValueSeparator);
   };
 
-  return translate as TranslateFn;
+  return noSerialize(translate) as TranslateFn;
 };

src/components/header/header.tsx

@@ -24,7 +24,7 @@ export const Header = component$(() => {
     <>
       <header class="header">
         <div class="logo">
-          <Link href={getHref('/')}>
+          <Link href={getHref('/')} title={t('app.title')}>
             <SpeakLogo />
           </Link>
         </div>