@thekatze/locolize-react 0.0.0-stage → 0.1.0-test.0

package/dist/context.d.ts

@@ -0,0 +1,11 @@
+import { Snapshot } from "@thekatze/locolize-core/internal";
+import { Locolize } from "@thekatze/locolize-core";
+//#region src/context.d.ts
+export type LocolizeContextValue = {
+  runtime: Locolize;
+  /** Changes on every runtime change, so consumers re-render. */
+  snapshot: Snapshot;
+};
+export declare const LocolizeContext: import("react").Context<LocolizeContextValue | null>;
+export declare function useLocolize(): LocolizeContextValue;
+//#endregion

package/dist/context.js

@@ -0,0 +1,10 @@
+import { createContext, use } from "react";
+//#region src/context.ts
+const LocolizeContext = createContext(null);
+function useLocolize() {
+	const context = use(LocolizeContext);
+	if (!context) throw new Error("useI18n() and <Message> must be used inside <LocolizeProvider>.");
+	return context;
+}
+//#endregion
+export { LocolizeContext, useLocolize };

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+import { MessageComponent, MessageProps } from "./types.js";
+import { LocolizeProvider, Message, useI18n } from "./react.js";
+export { LocolizeProvider, Message, type MessageComponent, type MessageProps, useI18n };

package/dist/index.js

@@ -0,0 +1 @@
+export { LocolizeProvider, Message, useI18n } from "./react.js";

package/dist/inline.d.ts

@@ -0,0 +1,4 @@
+import { Mode } from "./types.js";
+//#region src/inline.d.ts
+export declare const mode: Mode;
+//#endregion

package/dist/inline.js

@@ -0,0 +1,38 @@
+import { useLocolize } from "./context.js";
+import { jsx } from "react/jsx-runtime";
+import { isInlineRuntime } from "@thekatze/locolize-core/internal";
+//#region src/inline.tsx
+function InspectedMessage({ message, data }) {
+	const { runtime } = useLocolize();
+	if (!isInlineRuntime(runtime)) return message(data);
+	const { text, edited } = runtime.textOf(message, data);
+	return /* @__PURE__ */ jsx("span", {
+		"data-locolize-message": "",
+		"data-locolize-edited": edited ? "" : void 0,
+		ref: (element) => element ? runtime.track(element, {
+			message,
+			data
+		}) : void 0,
+		children: text
+	});
+}
+/** Loads and mounts the overlay. The cleanup also cancels a pending load. */
+function mount(runtime) {
+	if (!isInlineRuntime(runtime)) return () => {};
+	let dispose;
+	let cancelled = false;
+	(async () => {
+		const { mountOverlay } = await import("@thekatze/locolize-overlay");
+		if (!cancelled) dispose = mountOverlay(runtime);
+	})();
+	return () => {
+		cancelled = true;
+		dispose?.();
+	};
+}
+const mode = {
+	Message: InspectedMessage,
+	mount
+};
+//#endregion
+export { mode };

package/dist/plain.d.ts

@@ -0,0 +1,4 @@
+import { Mode } from "./types.js";
+//#region src/plain.d.ts
+export declare const mode: Mode;
+//#endregion

package/dist/plain.js

@@ -0,0 +1,10 @@
+//#region src/plain.ts
+function PlainMessage({ message, data }) {
+	return message(data);
+}
+const mode = {
+	Message: PlainMessage,
+	mount: void 0
+};
+//#endregion
+export { mode };

package/dist/react.d.ts

@@ -0,0 +1,21 @@
+import { MessageProps } from "./types.js";
+import { PropsWithChildren, ReactNode } from "react";
+import { AnyMessage, Locolize, TranslateFn } from "@thekatze/locolize-core";
+//#region src/react.d.ts
+export declare function LocolizeProvider({ locolize, children }: PropsWithChildren<{
+  /** From `createLocolize()`, created once at module level. */
+  locolize: Locolize;
+}>): ReactNode;
+/**
+ * Renders a message. Prefer it over `t()` for text on the page: with inline
+ * editing, the overlay can then point at exactly this message.
+ */
+export declare function Message<F extends AnyMessage>(props: MessageProps<F>): ReactNode;
+/** `t()` is for strings outside of markup, like `placeholder` or `title`. */
+export declare function useI18n(): {
+  t: TranslateFn;
+  locale: string;
+  locales: readonly string[];
+  setLocale: (locale: string) => Promise<void>;
+};
+//#endregion

package/dist/react.js

@@ -0,0 +1,32 @@
+import { LocolizeContext, useLocolize } from "./context.js";
+import { useEffect, useMemo, useSyncExternalStore } from "react";
+import { mode } from "#mode";
+import { jsx } from "react/jsx-runtime";
+//#region src/react.tsx
+function LocolizeProvider({ locolize, children }) {
+	const snapshot = useSyncExternalStore(locolize.subscribe, locolize.getSnapshot);
+	useEffect(() => mode.mount?.(locolize), [locolize]);
+	const value = useMemo(() => ({
+		runtime: locolize,
+		snapshot
+	}), [locolize, snapshot]);
+	return /* @__PURE__ */ jsx(LocolizeContext, {
+		value,
+		children
+	});
+}
+function Message(props) {
+	return /* @__PURE__ */ jsx(mode.Message, { ...props });
+}
+/** `t()` is for strings outside of markup, like `placeholder` or `title`. */
+function useI18n() {
+	const { runtime, snapshot } = useLocolize();
+	return useMemo(() => ({
+		t: runtime.t,
+		locale: snapshot.locale,
+		locales: runtime.config.locales,
+		setLocale: runtime.setLocale
+	}), [runtime, snapshot]);
+}
+//#endregion
+export { LocolizeProvider, Message, useI18n };

package/dist/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import { AnyMessage, IsAny, MessageData } from "@thekatze/locolize-core/internal";
+import { Locolize } from "@thekatze/locolize-core";
+//#region src/types.d.ts
+export type MessageDataProp<D> = IsAny<D> extends true ? {
+  data?: unknown;
+} : [D] extends [undefined] ? {
+  data?: never;
+} : undefined extends D ? {
+  data?: Exclude<D, undefined>;
+} : {} extends D ? {
+  data?: D;
+} : {
+  data: D;
+};
+export type MessageProps<F extends AnyMessage> = {
+  message: F;
+} & MessageDataProp<MessageData<F>>;
+export type MessageComponent = <F extends AnyMessage>(props: MessageProps<F>) => ReactNode;
+export type MessageImplProps = {
+  message: AnyMessage;
+  data?: unknown;
+};
+/** What `#mode` provides: the plain build or the inline editing one. */
+export interface Mode {
+  Message: MessageComponent;
+  /** Mounts the overlay; returns the cleanup. */
+  mount: ((locolize: Locolize) => () => void) | undefined;
+}
+//#endregion

package/package.json

@@ -1,6 +1,37 @@
 {
   "name": "@thekatze/locolize-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0-test.0",
+  "description": "React 19 bindings for Locolize: LocolizeProvider, useI18n and <Message>.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/enXess-ag/locolize-js.git",
+    "directory": "packages/react"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "imports": {
+    "#mode": {
+      "locolize-inline": "./dist/inline.js",
+      "default": "./dist/plain.js"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@thekatze/locolize-core": "0.1.0-test.0",
+    "@thekatze/locolize-overlay": "0.1.0-test.0"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0"
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.