feat: add support for nested StringParamsProvider (#548)

stevenle · web-flow · commit 501ab72c3042 · 2025-05-20T22:29:38.000-07:00
diff --git a/.changeset/plucky-birds-obey.md b/.changeset/plucky-birds-obey.md
@@ -0,0 +1,5 @@
+---
+"@blinkk/root": patch
+---
+
+fix: merge params from nested StringParamsProvider
diff --git a/packages/root/src/core/hooks/useStringParams.tsx b/packages/root/src/core/hooks/useStringParams.tsx
@@ -1,4 +1,4 @@
-import {createContext} from 'preact';
+import {ComponentChildren, FunctionalComponent, createContext} from 'preact';
 import {useContext} from 'preact/hooks';
 
 export type StringParamsContext = Record<string, string>;
@@ -7,7 +7,21 @@ export const STRING_PARAMS_CONTEXT = createContext<StringParamsContext | null>(
   null
 );
 
-export const StringParamsProvider = STRING_PARAMS_CONTEXT.Provider;
+export interface StringParamsProviderProps {
+  value?: StringParamsContext;
+  children?: ComponentChildren;
+}
+
+export const StringParamsProvider: FunctionalComponent<StringParamsProviderProps> = (props) => {
+  // Allow for nested param values from parent content providers.
+  const parent = useContext(STRING_PARAMS_CONTEXT) || {};
+  const merged = {...parent, ...props.value};
+  return (
+    <STRING_PARAMS_CONTEXT.Provider value={merged}>
+      {props.children}
+    </STRING_PARAMS_CONTEXT.Provider>
+  );
+};
 
 /**
  * A hook that returns a map of string params, configured via the
diff --git a/packages/root/test/fixtures/string-params/root.config.ts b/packages/root/test/fixtures/string-params/root.config.ts
@@ -0,0 +1,3 @@
+export default {
+  prettyHtml: true,
+};
diff --git a/packages/root/test/fixtures/string-params/routes/index.tsx b/packages/root/test/fixtures/string-params/routes/index.tsx
@@ -0,0 +1,12 @@
+import {StringParamsProvider, useTranslations} from '../../../../dist/core';
+
+export default function Page() {
+  const t = useTranslations();
+  return (
+    <StringParamsProvider value={{foo: 'foovalue'}}>
+      <StringParamsProvider value={{bar: 'barvalue'}}>
+        <p>{t('{foo} / {bar}')}</p>
+      </StringParamsProvider>
+    </StringParamsProvider>
+  );
+}
diff --git a/packages/root/test/string-params.test.ts b/packages/root/test/string-params.test.ts
@@ -0,0 +1,36 @@
+import {promises as fs} from 'node:fs';
+import path from 'node:path';
+import {beforeEach, afterEach, expect, test, assert} from 'vitest';
+import {fileExists} from '../src/utils/fsutils.js';
+import {Fixture, loadFixture} from './testutils.js';
+
+let fixture: Fixture;
+
+beforeEach(async () => {
+  fixture = await loadFixture('./fixtures/string-params');
+});
+
+afterEach(async () => {
+  if (fixture) {
+    await fixture.cleanup();
+  }
+});
+
+test('merge nested StringParamsProvider values', async () => {
+  await fixture.build();
+  const indexPath = path.join(fixture.distDir, 'html/index.html');
+  assert.isTrue(await fileExists(indexPath));
+  const html = await fs.readFile(indexPath, 'utf-8');
+  expect(html).toMatchInlineSnapshot(`
+    "<!doctype html>
+    <html>
+    <head>
+    <meta charset=\"utf-8\">
+    </head>
+    <body>
+    <p>foovalue / barvalue</p>
+    </body>
+    </html>
+    "
+  `);
+});

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"@blinkk/root": patch
 +---
++
 +fix: merge params from nested StringParamsProvider
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export default {`
	`2`	`+ prettyHtml: true,`
	`3`	`+};`