Feat: add logger (#22)

robisim74 · Feb 19, 2023 · f1eb895 · f1eb895
1 parent 6fab04f
commit f1eb895
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 1 deletion.
diff --git a/src/library/change-locale.ts b/src/library/change-locale.ts
@@ -1,4 +1,7 @@
+import { isDev } from '@builder.io/qwik/build';
+
 import type { SpeakLocale, SpeakState } from './types';
+import { logDebug, logWarn } from './log';
 
 /**
  * Change locale at runtime: loads translation data and rerenders components that uses translations.
@@ -14,5 +17,9 @@ export const changeLocale = async (newLocale: SpeakLocale, ctx: SpeakState): Pro
     Object.assign(locale, newLocale);
   } else {
     Object.assign(locale, config.defaultLocale);
+
+    if (isDev) logWarn(`${newLocale.lang} is not a supported locale. Fallback to default locale ${config.defaultLocale.lang}`);
   }
+
+  if (isDev) logDebug(`New locale: ${locale.lang}`);
 };
diff --git a/src/library/log.ts b/src/library/log.ts
@@ -0,0 +1,13 @@
+import { isBrowser } from '@builder.io/qwik/build';
+
+const STYLE = isBrowser
+  ? `background-color: #0093ee; color: #fff; padding: 2px 3px; border-radius: 2px; font-size: 0.8em;`
+  : '';
+
+export const logWarn = (message: string) => {
+  console.warn('%cQwik Speak warn', STYLE, message);
+};
+
+export const logDebug = (message: string) => {
+  console.debug('%cQwik Speak', STYLE, message);
+};
diff --git a/src/library/qwik-speak-component.tsx b/src/library/qwik-speak-component.tsx
@@ -1,9 +1,10 @@
 import { $, component$, Slot, useContextProvider, useServerData, useStore, useTask$ } from '@builder.io/qwik';
-import { isServer } from '@builder.io/qwik/build';
+import { isDev, isServer } from '@builder.io/qwik/build';
 
 import type { InternalSpeakState, SpeakConfig, SpeakLocale, SpeakState, TranslationFn } from './types';
 import { SpeakContext } from './context';
 import { loadTranslations } from './core';
+import { logDebug } from './log';
 
 export interface QwikSpeakProps {
   /**
@@ -45,6 +46,8 @@ export const QwikSpeakProvider = component$((props: QwikSpeakProps) => {
     props.config.supportedLocales.find(value => value.lang === lang) ??
     props.config.defaultLocale;
 
+  if (isDev) logDebug(`Resolved locale: ${resolvedLocale.lang}`);
+
   // Set initial state
   const state = useStore<InternalSpeakState>({
     locale: Object.assign({}, resolvedLocale),