feat: add StringParamsProvider for injecting param values to strings (#…

…339)

.changeset/sixty-humans-bake.md

@@ -0,0 +1,5 @@
+---
+'@blinkk/root': patch
+---
+
+feat: add StringParamsProvider for injecting values to strings

packages/create-root/src/root-version.ts

@@ -1,2 +1,2 @@
 // This file is autogenerated by update-root-version.mjs.
-export const ROOT_VERSION = '1.0.3';
+export const ROOT_VERSION = '1.0.9';

packages/root/src/core/core.ts

@@ -3,6 +3,11 @@ export {Body} from './components/Body.js';
 export {Head} from './components/Head.js';
 export {Html, HTML_CONTEXT} from './components/Html.js';
 export {Script} from './components/Script.js';
+export {
+  StringParamsContext,
+  StringParamsProvider,
+  useStringParams,
+} from './hooks/useStringParams.js';
 export {
   I18nContext,
   useI18nContext,

packages/root/src/core/hooks/useStringParams.ts

@@ -0,0 +1,39 @@
+import {createContext} from 'preact';
+import {useContext} from 'preact/hooks';
+
+export type StringParamsContext = Record<string, string>;
+
+export const STRING_PARAMS_CONTEXT = createContext<StringParamsContext | null>(
+  null
+);
+
+export const StringParamsProvider = STRING_PARAMS_CONTEXT.Provider;
+
+/**
+ * A hook that returns a map of string params, configured via the
+ * `StringParamsProvider` context provider. These params are automatically
+ * applied to the `useTranslations()` hook.
+ *
+ *
+ * Usage:
+ *
+ * ```
+ * export default function Page() {
+ *   return (
+ *     <StringParamsProvider value={{name: 'Alice'}}>
+ *       <SayHello />
+ *     </StringParamsProvider>
+ *   );
+ * }
+ *
+ * function SayHello() {
+ *   const t = useTranslations();
+ *   return <h1>{t('Hello, {name}!')}</h1>;
+ * }
+ * ```
+ *
+ * This should render `<h1>Hello, Alice!</h1>`.
+ */
+export function useStringParams() {
+  return useContext(STRING_PARAMS_CONTEXT) || {};
+}

packages/root/src/core/hooks/useTranslations.ts

@@ -1,4 +1,5 @@
 import {I18nContext, useI18nContext} from './useI18nContext.js';
+import {useStringParams} from './useStringParams.js';
 
 /**
  * A hook that returns a function that can be used to translate a string, and
@@ -21,14 +22,14 @@ export function useTranslations() {
     console.warn('I18nContext not found');
   }
   const translations = i18nContext?.translations || {};
+  const stringParams = useStringParams();
   const t = (str: string, params?: Record<string, string | number>) => {
     const key = normalizeString(str);
     let translation = translations[key] ?? key ?? '';
-    if (params) {
-      for (const param of Object.keys(params)) {
-        const val = String(params[param] ?? '');
-        translation = translation.replaceAll(`{${param}}`, val);
-      }
+    const allParams = {...stringParams, ...params};
+    for (const paramName of Object.keys(allParams)) {
+      const paramValue = String(allParams[paramName] ?? '');
+      translation = translation.replaceAll(`{${paramName}}`, paramValue);
     }
     return translation;
   };