@furystack/shades-i18n 1.0.27 → 2.0.0

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## [2.0.0] - 2026-02-09
+
+### ⬆️ Dependencies
+
+- Updated peer dependency `@furystack/shades` to latest minor version
+- Updated peer dependency `@furystack/shades` to new major version
+- Updated `@furystack/shades` dependency with microtask-based batched rendering
+- Updated `@furystack/*` dependencies
+- Peer dependency on `@furystack/shades` bumped to new major version
+- Updated `@furystack/shades` dependency
+
+### 💥 Breaking Changes
+
+### Requires `@furystack/shades` v3
+
+This package now depends on the new major version of `@furystack/shades` which removed the `constructed` callback from the Shade API.
+
+### Peer Dependency Bump
+
+Updated peer dependency on `@furystack/shades` to the new major version with VNode-based rendering. No API changes in this package.
+
+## [1.0.28] - 2026-02-01
+
+### ⬆️ Dependencies
+
+- Updated peer dependency `@furystack/shades` to include new CSS styling features
+
 ## [1.0.27] - 2026-01-26
 
 ### 🔧 Chores

package/esm/create-i18n-component.d.ts

@@ -6,5 +6,7 @@ export declare const createI18nComponent: <TKeys extends string>(options: {
     key: TKeys;
 } & Omit<Partial<HTMLElement>, "style"> & {
     style?: Partial<CSSStyleDeclaration>;
+} & {
+    ref?: import("@furystack/shades").RefObject<Element>;
 }, children?: import("@furystack/shades").ChildrenList) => JSX.Element;
 //# sourceMappingURL=create-i18n-component.d.ts.map

package/esm/create-i18n-component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"create-i18n-component.d.ts","sourceRoot":"","sources":["../src/create-i18n-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,eAAO,MAAM,mBAAmB,GAAI,KAAK,SAAS,MAAM,EAAE,SAAS;IACjE,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAA;IAC3B,aAAa,EAAE,MAAM,CAAA;CACtB;SACqB,KAAK;;;sEAgB1B,CAAA"}
+{"version":3,"file":"create-i18n-component.d.ts","sourceRoot":"","sources":["../src/create-i18n-component.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAA;AAGlD,eAAO,MAAM,mBAAmB,GAAI,KAAK,SAAS,MAAM,EAAE,SAAS;IACjE,OAAO,EAAE,WAAW,CAAC,KAAK,CAAC,CAAA;IAC3B,aAAa,EAAE,MAAM,CAAA;CACtB;SACqB,KAAK;;;;;sEAgB1B,CAAA"}

package/esm/create-i18n-component.spec.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=create-i18n-component.spec.d.ts.map

package/esm/create-i18n-component.spec.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-i18n-component.spec.d.ts","sourceRoot":"","sources":["../src/create-i18n-component.spec.tsx"],"names":[],"mappings":""}

package/esm/create-i18n-component.spec.js

@@ -0,0 +1,216 @@
+import { I18NService } from '@furystack/i18n';
+import { Injector } from '@furystack/inject';
+import { createComponent, initializeShadeRoot } from '@furystack/shades';
+import { sleepAsync, usingAsync } from '@furystack/utils';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createI18nComponent } from './create-i18n-component.js';
+const createTestService = () => {
+    return new I18NService({
+        code: 'en',
+        values: {
+            hello: 'Hello',
+            goodbye: 'Goodbye',
+            world: 'World',
+        },
+    }, {
+        code: 'hu',
+        values: {
+            hello: 'Szia',
+            goodbye: 'Viszlát',
+            world: 'Világ',
+        },
+    }, {
+        code: 'de',
+        values: {
+            hello: 'Hallo',
+            goodbye: 'Auf Wiedersehen',
+        },
+    });
+};
+describe('createI18nComponent', () => {
+    beforeEach(() => {
+        document.body.innerHTML = '<div id="root"></div>';
+    });
+    afterEach(() => {
+        document.body.innerHTML = '';
+    });
+    it('should render with the initial translation', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const service = createTestService();
+            const I18n = createI18nComponent({
+                service,
+                shadowDomName: 'test-i18n-initial',
+            });
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(I18n, { key: "hello" }),
+            });
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('Hello');
+        });
+    });
+    it('should render with the correct translation for different keys', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const service = createTestService();
+            const I18n = createI18nComponent({
+                service,
+                shadowDomName: 'test-i18n-keys',
+            });
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent(createComponent, null,
+                    createComponent(I18n, { key: "hello" }),
+                    createComponent("span", null, " "),
+                    createComponent(I18n, { key: "world" }))),
+            });
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('Hello World');
+        });
+    });
+    it('should update when language changes', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const service = createTestService();
+            const I18n = createI18nComponent({
+                service,
+                shadowDomName: 'test-i18n-language-change',
+            });
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(I18n, { key: "hello" }),
+            });
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('Hello');
+            service.currentLanguage = 'hu';
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('Szia');
+            service.currentLanguage = 'de';
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('Hallo');
+        });
+    });
+    it('should fallback to default language for missing keys', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const service = createTestService();
+            const I18n = createI18nComponent({
+                service,
+                shadowDomName: 'test-i18n-fallback',
+            });
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(I18n, { key: "world" }),
+            });
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('World');
+            // German doesn't have 'world' translation, should fallback to English
+            service.currentLanguage = 'de';
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('World');
+        });
+    });
+    it('should handle rapid language changes', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const service = createTestService();
+            const I18n = createI18nComponent({
+                service,
+                shadowDomName: 'test-i18n-rapid-changes',
+            });
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(I18n, { key: "hello" }),
+            });
+            await sleepAsync(50);
+            // Rapid language changes
+            service.currentLanguage = 'hu';
+            service.currentLanguage = 'de';
+            service.currentLanguage = 'en';
+            service.currentLanguage = 'hu';
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('Szia');
+        });
+    });
+    it('should cleanup subscription on unmount', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const service = createTestService();
+            const unsubscribeSpy = vi.fn();
+            const originalSubscribe = service.subscribe.bind(service);
+            vi.spyOn(service, 'subscribe').mockImplementation((event, callback) => {
+                const subscription = originalSubscribe(event, callback);
+                return {
+                    [Symbol.dispose]: () => {
+                        unsubscribeSpy();
+                        subscription[Symbol.dispose]();
+                    },
+                };
+            });
+            const I18n = createI18nComponent({
+                service,
+                shadowDomName: 'test-i18n-cleanup',
+            });
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(I18n, { key: "hello" }),
+            });
+            await sleepAsync(50);
+            expect(unsubscribeSpy).not.toHaveBeenCalled();
+            // Unmount by clearing the DOM
+            document.body.innerHTML = '';
+            await sleepAsync(50);
+            expect(unsubscribeSpy).toHaveBeenCalled();
+        });
+    });
+    it('should render as span element', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const service = createTestService();
+            const I18n = createI18nComponent({
+                service,
+                shadowDomName: 'test-i18n-span',
+            });
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: createComponent(I18n, { key: "hello" }),
+            });
+            await sleepAsync(50);
+            // The component uses elementBaseName: 'span', so it renders as <span is="test-i18n-span">
+            const i18nElement = rootElement.querySelector('span[is="test-i18n-span"]');
+            expect(i18nElement).toBeInstanceOf(HTMLSpanElement);
+        });
+    });
+    it('should work with multiple instances using different keys', async () => {
+        await usingAsync(new Injector(), async (injector) => {
+            const service = createTestService();
+            const I18n = createI18nComponent({
+                service,
+                shadowDomName: 'test-i18n-multiple',
+            });
+            const rootElement = document.getElementById('root');
+            initializeShadeRoot({
+                injector,
+                rootElement,
+                jsxElement: (createComponent("div", null,
+                    createComponent(I18n, { key: "hello" }),
+                    ' - ',
+                    createComponent(I18n, { key: "goodbye" }))),
+            });
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('Hello - Goodbye');
+            service.currentLanguage = 'hu';
+            await sleepAsync(50);
+            expect(rootElement.textContent).toBe('Szia - Viszlát');
+        });
+    });
+});
+//# sourceMappingURL=create-i18n-component.spec.js.map

package/esm/create-i18n-component.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-i18n-component.spec.js","sourceRoot":"","sources":["../src/create-i18n-component.spec.tsx"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@furystack/shades-i18n",
-  "version": "1.0.27",
+  "version": "2.0.0",
   "description": "I18n translation package and components for Shades",
   "type": "module",
   "scripts": {
@@ -37,9 +37,9 @@
   },
   "homepage": "https://github.com/furystack/furystack",
   "dependencies": {
-    "@furystack/i18n": "^1.0.27",
-    "@furystack/inject": "^12.0.28",
-    "@furystack/shades": "^11.0.35"
+    "@furystack/i18n": "^1.0.28",
+    "@furystack/inject": "^12.0.29",
+    "@furystack/shades": "^12.0.0"
   },
   "devDependencies": {
     "@types/node": "^25.0.10",

package/src/create-i18n-component.spec.tsx

@@ -0,0 +1,263 @@
+import { I18NService } from '@furystack/i18n'
+import { Injector } from '@furystack/inject'
+import { createComponent, initializeShadeRoot } from '@furystack/shades'
+import { sleepAsync, usingAsync } from '@furystack/utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18nComponent } from './create-i18n-component.js'
+
+type TestKeys = 'hello' | 'goodbye' | 'world'
+
+const createTestService = () => {
+  return new I18NService<TestKeys>(
+    {
+      code: 'en',
+      values: {
+        hello: 'Hello',
+        goodbye: 'Goodbye',
+        world: 'World',
+      },
+    },
+    {
+      code: 'hu',
+      values: {
+        hello: 'Szia',
+        goodbye: 'Viszlát',
+        world: 'Világ',
+      },
+    },
+    {
+      code: 'de',
+      values: {
+        hello: 'Hallo',
+        goodbye: 'Auf Wiedersehen',
+      },
+    },
+  )
+}
+
+describe('createI18nComponent', () => {
+  beforeEach(() => {
+    document.body.innerHTML = '<div id="root"></div>'
+  })
+
+  afterEach(() => {
+    document.body.innerHTML = ''
+  })
+
+  it('should render with the initial translation', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const service = createTestService()
+      const I18n = createI18nComponent({
+        service,
+        shadowDomName: 'test-i18n-initial',
+      })
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <I18n key="hello" />,
+      })
+
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('Hello')
+    })
+  })
+
+  it('should render with the correct translation for different keys', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const service = createTestService()
+      const I18n = createI18nComponent({
+        service,
+        shadowDomName: 'test-i18n-keys',
+      })
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <>
+            <I18n key="hello" />
+            <span> </span>
+            <I18n key="world" />
+          </>
+        ),
+      })
+
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('Hello World')
+    })
+  })
+
+  it('should update when language changes', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const service = createTestService()
+      const I18n = createI18nComponent({
+        service,
+        shadowDomName: 'test-i18n-language-change',
+      })
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <I18n key="hello" />,
+      })
+
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('Hello')
+
+      service.currentLanguage = 'hu'
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('Szia')
+
+      service.currentLanguage = 'de'
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('Hallo')
+    })
+  })
+
+  it('should fallback to default language for missing keys', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const service = createTestService()
+      const I18n = createI18nComponent({
+        service,
+        shadowDomName: 'test-i18n-fallback',
+      })
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <I18n key="world" />,
+      })
+
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('World')
+
+      // German doesn't have 'world' translation, should fallback to English
+      service.currentLanguage = 'de'
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('World')
+    })
+  })
+
+  it('should handle rapid language changes', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const service = createTestService()
+      const I18n = createI18nComponent({
+        service,
+        shadowDomName: 'test-i18n-rapid-changes',
+      })
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <I18n key="hello" />,
+      })
+
+      await sleepAsync(50)
+
+      // Rapid language changes
+      service.currentLanguage = 'hu'
+      service.currentLanguage = 'de'
+      service.currentLanguage = 'en'
+      service.currentLanguage = 'hu'
+
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('Szia')
+    })
+  })
+
+  it('should cleanup subscription on unmount', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const service = createTestService()
+      const unsubscribeSpy = vi.fn()
+      const originalSubscribe = service.subscribe.bind(service)
+      vi.spyOn(service, 'subscribe').mockImplementation((event, callback) => {
+        const subscription = originalSubscribe(event, callback)
+        return {
+          [Symbol.dispose]: () => {
+            unsubscribeSpy()
+            subscription[Symbol.dispose]()
+          },
+        }
+      })
+
+      const I18n = createI18nComponent({
+        service,
+        shadowDomName: 'test-i18n-cleanup',
+      })
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <I18n key="hello" />,
+      })
+
+      await sleepAsync(50)
+      expect(unsubscribeSpy).not.toHaveBeenCalled()
+
+      // Unmount by clearing the DOM
+      document.body.innerHTML = ''
+      await sleepAsync(50)
+
+      expect(unsubscribeSpy).toHaveBeenCalled()
+    })
+  })
+
+  it('should render as span element', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const service = createTestService()
+      const I18n = createI18nComponent({
+        service,
+        shadowDomName: 'test-i18n-span',
+      })
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: <I18n key="hello" />,
+      })
+
+      await sleepAsync(50)
+      // The component uses elementBaseName: 'span', so it renders as <span is="test-i18n-span">
+      const i18nElement = rootElement.querySelector('span[is="test-i18n-span"]')
+      expect(i18nElement).toBeInstanceOf(HTMLSpanElement)
+    })
+  })
+
+  it('should work with multiple instances using different keys', async () => {
+    await usingAsync(new Injector(), async (injector) => {
+      const service = createTestService()
+      const I18n = createI18nComponent({
+        service,
+        shadowDomName: 'test-i18n-multiple',
+      })
+
+      const rootElement = document.getElementById('root') as HTMLDivElement
+      initializeShadeRoot({
+        injector,
+        rootElement,
+        jsxElement: (
+          <div>
+            <I18n key="hello" />
+            {' - '}
+            <I18n key="goodbye" />
+          </div>
+        ),
+      })
+
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('Hello - Goodbye')
+
+      service.currentLanguage = 'hu'
+      await sleepAsync(50)
+      expect(rootElement.textContent).toBe('Szia - Viszlát')
+    })
+  })
+})