Refactor: make assets optional

README.md

@@ -93,7 +93,7 @@ stateDiagram-v2
 - `defaultLocale` The default locale to use as fallback
 - `supportedLocales` List of locales supported by the app
 - `assets` An array of strings: each asset is passed to the `loadTranslation$` function to obtain data according to the language
-- `runtimeAssets` Optional assets available at runtime
+- `runtimeAssets` Assets available at runtime
 - `keySeparator` Separator of nested keys. Default is `.`
 - `keyValueSeparator` Key-value separator. Default is `@@`
 
@@ -115,33 +115,19 @@ and optionally contains:
 
 ## APIs
 ### Components
-```mermaid
-C4Container
-    Container_Boundary(a, "App") {
-        Component(a0, "QwikSpeakProvider", "", "Creates Speak context")
-        Container_Boundary(b1, "Home") {
-            Component(a10, "Speak", "", "Adds its own translation data to the context")        
-        }  
-        Container_Boundary(b2, "Page") {
-            Component(a20, "Speak", "", "Adds its own translation data to the context")        
-        }       
-    }
-```
 #### QwikSpeakProvider component
 `QwikSpeakProvider` component provides the Speak context to the app. `Props`:
-  - `config` Speak config (required)
+  - `config` Speak config
   - `translationFn` Optional functions to use
   - `locale` Optional locale to use
   - `langs` Optional additional languages to preload data for (multilingual)
 
 #### Speak component (scoped translations)
 `Speak` component can be used for scoped translations. `Props`:
-  - `assets` Assets to load (required)
-  - `runtimeAssets` Optional assets to load available at runtime
+  - `assets` Assets to load
+  - `runtimeAssets` Assets to load available at runtime
   - `langs` Optional additional languages to preload data for (multilingual)
 
-> `QwikSpeakProvider` and `Speak` components are `Slot` components: because Qwik renders `Slot` components and direct children in isolation, translations are not immediately available in direct children
-
 ### Functions
 - `$translate(keys: string | string[], params?: any, ctx?: SpeakState, lang?: string)`
 Translates a key or an array of keys. The syntax of the string is `key@@[default value]`

packages/qwik-speak/src/core.ts

@@ -27,7 +27,7 @@ export const memoize = (fn: LoadTranslationFn) => {
  */
 export const loadTranslations = async (
   ctx: SpeakState,
-  assets: string[],
+  assets?: string[],
   runtimeAssets?: string[],
   langs?: string[],
   origin?: string
@@ -37,10 +37,11 @@ export const loadTranslations = async (
 
     let resolvedAssets: string[];
     if (isDev === true || isServer) {
-      resolvedAssets = [...assets, ...runtimeAssets ?? []];
+      resolvedAssets = [...assets ?? [], ...runtimeAssets ?? []];
     } else {
       resolvedAssets = [...runtimeAssets ?? []];
     }
+    if (resolvedAssets.length === 0) return;
 
     // Multilingual
     const resolvedLangs = new Set(langs || []);
@@ -57,7 +58,7 @@ export const loadTranslations = async (
 
       for (const data of assetSources) {
         if (data?.source) {
-          if (!isDev && isServer && assets.includes(data.asset)) {
+          if (!isDev && isServer && assets?.includes(data.asset)) {
             // In prod mode, assets are not serialized
             for (let [key, value] of Object.entries<Translation>(data.source)) {
               // Depth 0: convert string to String object

packages/qwik-speak/src/speak-component.tsx

@@ -1,16 +1,17 @@
 import { component$, Slot, useServerData, useTask$ } from '@builder.io/qwik';
-import { isServer } from '@builder.io/qwik/build';
+import { isDev, isServer } from '@builder.io/qwik/build';
 
 import { useSpeakContext } from './use-functions';
 import { loadTranslations } from './core';
+import { logWarn } from './log';
 
 export interface SpeakProps {
   /**
    * Assets to load
    */
-  assets: string[];
+  assets?: string[];
   /**
-   * Optional assets to load available at runtime
+   * Assets to load available at runtime
    */
   runtimeAssets?: string[];
   /**
@@ -31,6 +32,8 @@ export const Speak = component$((props: SpeakProps) => {
 
   // Called the first time when the component mounts
   useTask$(async () => {
+    if (isDev && !props.assets && !props.runtimeAssets) logWarn('Speak component: no assets provided');
+
     await loadTranslations(ctx, props.assets, props.runtimeAssets, props.langs, url?.origin);
   });
 

packages/qwik-speak/src/types.ts

@@ -58,9 +58,9 @@ export interface SpeakConfig {
   /**
    * An array of strings: each asset is passed to the loadTranslation$ function to obtain data according to the language
    */
-  assets: string[];
+  assets?: string[];
   /**
-   * Optional assets available at runtime
+   * Assets available at runtime
    */
   runtimeAssets?: string[];
   /**