Docs: add imports (#58)

docs/inline.md

@@ -26,6 +26,8 @@ sequenceDiagram
 ### Get the code ready
 Qwik uses the `q:base` attribute to determine the base URL for loading the chunks in the browser, so you have to set it in `entry.ssr.tsx` file:
 ```typescript
+import { isDev } from '@builder.io/qwik/build';
+
 export function extractBase({ serverData }: RenderOptions): string {
   if (!isDev && serverData?.locale) {
     return '/build/' + serverData.locale;

docs/quick-start.md

@@ -174,6 +174,8 @@ We can resolve the locale to use in two ways: passing the `locale` parameter to
 
 _src/routes/plugin.ts_
 ```typescript
+import { config } from '../speak-config';
+
 export const onRequest: RequestHandler = ({ request, locale }) => {
   const cookie = request.headers?.get('cookie');
   const acceptLanguage = request.headers?.get('accept-language');
@@ -204,7 +206,8 @@ Now we want to change locale. Let's create a `ChangeLocale` component:
 
 _src/components/change-locale.tsx_
 ```tsx
-import { useTranslate, useSpeakConfig, SpeakLocale } from 'qwik-speak';
+import type { SpeakLocale } from 'qwik-speak';
+import { useSpeakConfig, useTranslate } from 'qwik-speak';
 
 export const ChangeLocale = component$(() => {
   const t = useTranslate();
@@ -326,6 +329,8 @@ export default defineConfig(() => {
 ```
 Set the base URL for loading the chunks in the browser in `entry.ssr.tsx` file:
 ```typescript
+import { isDev } from '@builder.io/qwik/build';
+
 export function extractBase({ serverData }: RenderOptions): string {
   if (!isDev && serverData?.locale) {
     return '/build/' + serverData.locale;

docs/tutorial-routing.md

@@ -12,6 +12,8 @@ Let's create `speak-config.ts` and `speak-functions.ts` files in `src`:
 
 _src/speak-config.ts_
 ```typescript
+import type { SpeakConfig } from 'qwik-speak';
+
 export const config: SpeakConfig = {
   defaultLocale: { lang: 'en-US', currency: 'USD', timeZone: 'America/Los_Angeles' },
   supportedLocales: [
@@ -25,6 +27,9 @@ export const config: SpeakConfig = {
 ```
 _src/speak-functions.ts_
 ```typescript
+import { server$ } from '@builder.io/qwik-city';
+import type { LoadTranslationFn, Translation, TranslationFn } from 'qwik-speak';
+
 /**
  * Translation files are lazy-loaded via dynamic import and will be split into separate chunks during build.
  * Keys must be valid variable names
@@ -64,6 +69,8 @@ Now let's handle it. Create `plugin.ts` in the root of the `src/routes` director
 
 _src/routes/plugin.ts_
 ```typescript
+import { config } from '../speak-config';
+
 export const onRequest: RequestHandler = ({ params, locale }) => {
   const lang = params.lang;
 
@@ -78,6 +85,8 @@ Just wrap Qwik City provider with `QwikSpeakProvider` component in `root.tsx` an
 
 _src/root.tsx_
 ```tsx
+import { QwikSpeakProvider } from 'qwik-speak';
+
 export default component$(() => {
   return (
     <QwikSpeakProvider config={config} translationFn={translationFn}>
@@ -101,6 +110,13 @@ Finally we add an `index.tsx` with some translation, providing default values fo
 
 _src/routes/[...lang]/index.tsx_
 ```tsx
+import {
+  useTranslate,
+  useFormatDate,
+  useFormatNumber,
+  Speak,
+} from 'qwik-speak';
+
 export const Home = component$(() => {
   const t = useTranslate();
   const fd = useFormatDate();
@@ -169,6 +185,8 @@ We can also pass the `lang` attribute in the html tag:
 
 _src/entry.ssr.tsx_
 ```typescript
+import { config } from './speak-config';
+
 export default function (opts: RenderToStreamOptions) {
   return renderToStream(<Root />, {
     manifest,
@@ -187,6 +205,9 @@ Now we want to change locale. Let's create a `ChangeLocale` component:
 
 _src/components/change-locale.tsx_
 ```tsx
+import type { SpeakLocale } from 'qwik-speak';
+import { useSpeakConfig, useTranslate } from 'qwik-speak';
+
 export const ChangeLocale = component$(() => {
   const t = useTranslate();
 
@@ -316,6 +337,8 @@ export default defineConfig(() => {
 ```
 Set the base URL for loading the chunks in the browser in `entry.ssr.tsx` file:
 ```typescript
+import { isDev } from '@builder.io/qwik/build';
+
 export function extractBase({ serverData }: RenderOptions): string {
   if (!isDev && serverData?.locale) {
     return '/build/' + serverData.locale;

packages/qwik-speak/src/core.ts

@@ -80,16 +80,12 @@ export const loadTranslations = async (
  * Get translation value
  */
 export const getValue = (
-  key: string | string[],
+  key: string,
   data: Translation,
   params?: Record<string, any>,
   keySeparator = '.',
   keyValueSeparator = '@@',
-): any => {
-  if (Array.isArray(key)) {
-    return key.map(k => getValue(k, data, params, keySeparator, keyValueSeparator));
-  }
-
+) => {
   let defaultValue: string | undefined = undefined;
 
   [key, defaultValue] = separateKeyValue(key, keyValueSeparator);

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

@@ -36,5 +36,9 @@ export const inlineTranslate: InlineTranslateFn = (
 
   lang ??= locale.lang;
 
+  if (Array.isArray(keys)) {
+    return keys.map(k => getValue(k, translation[lang!], params, config.keySeparator, config.keyValueSeparator));
+  }
+
   return getValue(keys, translation[lang], params, config.keySeparator, config.keyValueSeparator);
 };

packages/qwik-speak/src/tests/config.ts

@@ -11,21 +11,23 @@ export const config: SpeakConfig = {
   keyValueSeparator: '@@'
 };
 
-export const loadTranslationStub$: LoadTranslationFn = $(() => {
-  return {
+export const mockJson = {
+  test: 'Test',
+  testParams: 'Test {{param}}',
+  nested: {
     test: 'Test',
-    testParams: 'Test {{param}}',
-    nested: {
-      test: 'Test',
-      array: ['Test1 {{ param }}', 'Test2 {{ param }}' ],
-    },
-    one: 'One {{ role }} developer',
-    other: '{{value}} {{ role }} developers',
-    arrayObjects: [
-      { num: 'one {{ param }}' },
-      { num: 'two {{ param }}' }
-    ]
-  };
+    array: ['Test1 {{ param }}', 'Test2 {{ param }}']
+  },
+  one: 'One {{ role }} developer',
+  other: '{{value}} {{ role }} developers',
+  arrayObjects: [
+    { num: 'One {{ param }}' },
+    { num: 'Two {{ param }}' }
+  ]
+};
+
+export const loadTranslationStub$: LoadTranslationFn = $(() => {
+  return mockJson;
 });
 
 export const translationFnStub: TranslationFn = {

packages/qwik-speak/src/tests/use-translate.test.tsx

@@ -99,8 +99,8 @@ describe('useTranslate function', async () => {
     expect((screen.querySelector('#A10') as HTMLDivElement).innerHTML).toContain('Test');
   });
   test('array of objects', () => {
-    expect((screen.querySelector('#A11') as HTMLDivElement).innerHTML).toContain('one params');
-    expect((screen.querySelector('#A11') as HTMLDivElement).innerHTML).toContain('two params');
+    expect((screen.querySelector('#A11') as HTMLDivElement).innerHTML).toContain('One params');
+    expect((screen.querySelector('#A11') as HTMLDivElement).innerHTML).toContain('Two params');
   });
   test('conditional rendering', () => {
     expect((screen.querySelector('#A12') as HTMLDivElement).innerHTML).toContain('Test');

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

@@ -12,11 +12,13 @@ export type PluralFn = {
    * @param lang Optional language if different from the current one
    * @returns The translation for the plural
    */
-  (value: number | string,
+  (
+    value: number | string,
     key?: string,
     params?: Record<string, any>,
     options?: Intl.PluralRulesOptions,
-    lang?: string): string;
+    lang?: string
+  ): string;
 };
 
 export const usePlural = (): PluralFn => {

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

@@ -32,6 +32,10 @@ export const useTranslate = (): TranslateFn => {
 
     lang ??= locale.lang;
 
+    if (Array.isArray(keys)) {
+      return keys.map(k => getValue(k, translation[lang!], params, config.keySeparator, config.keyValueSeparator));
+    }
+
     return getValue(keys, translation[lang], params, config.keySeparator, config.keyValueSeparator);
   };