add context component

Author: Hugos68

packages/skeleton-react/src/components/locale-provider/anatomy/root-context.tsx

@@ -0,0 +1,14 @@
+import { LocaleProviderRootContext } from '../modules/root-context.js';
+import { type ContextType, type ReactNode, use } from 'react';
+
+export interface LocaleProviderRootContextProps {
+	children: (locale: ContextType<typeof LocaleProviderRootContext>) => ReactNode;
+}
+
+export default function RootContext(props: LocaleProviderRootContextProps) {
+	const locale = use(LocaleProviderRootContext);
+
+	const { children } = props;
+
+	return children(locale);
+}

packages/skeleton-react/src/components/locale-provider/modules/anatomy.ts

@@ -1,3 +1,6 @@
 import Root from '../anatomy/root.jsx';
+import RootContext from '../anatomy/root-context.jsx';
 
-export const LocaleProvider = Root;
+export const LocaleProvider = Object.assign(Root, {
+	Context: RootContext,
+});

packages/skeleton-svelte/src/components/locale-provider/anatomy/root-context.svelte

@@ -0,0 +1,19 @@
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface LocaleProviderRootContextProps {
+		children: Snippet<[ReturnType<typeof LocaleProviderRootContext.consume>]>;
+	}
+</script>
+
+<script lang="ts">
+	import { LocaleProviderRootContext } from '../modules/root-context.js';
+
+	const props: LocaleProviderRootContextProps = $props();
+
+	const locale = LocaleProviderRootContext.consume();
+
+	const { children } = $derived(props);
+</script>
+
+{@render children(locale)}

packages/skeleton-svelte/src/components/locale-provider/modules/anatomy.ts

@@ -1,3 +1,6 @@
 import Root from '../anatomy/root.svelte';
+import RootContext from '../anatomy/root-context.svelte';
 
-export const LocaleProvider = Root;
+export const LocaleProvider = Object.assign(Root, {
+	Context: RootContext,
+});