langsys-js-react 0.6.6 → 0.7.0

package/dist/index.mjs

@@ -1,16 +1,45 @@
-import { createSignal, tSignal, currentlyLoadedLocale, sTranslations, Translate as Translate$1, Phrase as Phrase$1, PHRASE_MARKER_ATTR, LangsysApp as LangsysApp$1 } from 'langsys-js-typescript';
-export { LangsysAppAPI, canonicalizeLocale, createSignal, currentlyLoadedLocale, sTranslations, tSignal as t } from 'langsys-js-typescript';
-import { useSyncExternalStore, useState, useRef, useEffect, createElement } from 'react';
+import { LangsysApp, scopeFromSeed, createSignal, tSignal, currentlyLoadedLocale, sTranslations, writeEnabled, notifyNavigation, renderServerMessage, renderBlock, currentRequestScope, CONTENT_BLOCK_MARKER_ATTR, PHRASE_MARKER_ATTR, registerBlock, warnUnregistered, isTranslationExcluded, warnUnrenderedBlock, Translate as Translate$1, Phrase as Phrase$1 } from 'langsys-js-typescript';
+export { DEFAULT_SERVER_MESSAGE_CATEGORY, LangsysAppAPI, LangsysConfigurationError, LegacyFormatError, SnapshotError, canonicalizeLocale, createSignal, currentlyLoadedLocale, inCategory, interpolate, isCategoryRef, localeHeaders, notifyNavigation, renderServerMessage, resolveServerMessages, sTranslations, setWriteGrant, tSignal as t } from 'langsys-js-typescript';
+import * as React from 'react';
+import { createContext, useState, useInsertionEffect, createElement, useContext, useSyncExternalStore, useEffect, useMemo, useRef, isValidElement, cloneElement, Fragment, Children } from 'react';
+import { NON_TRANSLATABLE_ELEMENTS } from 'langsys-js-typescript/pure';
 
 // src/index.ts
-function useSignal(signal) {
-  return useSyncExternalStore(signal.subscribe, signal.get, signal.get);
+var SeedScope = createContext(null);
+var noSubscription = () => () => {
+};
+function useServerSnapshotWindow() {
+  return useSyncExternalStore(
+    noSubscription,
+    () => false,
+    () => true
+  );
 }
+function useSeedScopeRunner() {
+  const scope = useContext(SeedScope);
+  const inWindow = useServerSnapshotWindow();
+  return scope && inWindow ? (fn) => scope.run(fn) : (fn) => fn();
+}
+function LangsysProvider({ seed, children }) {
+  const [scope] = useState(() => seed ? scopeFromSeed(seed) : null);
+  useInsertionEffect(() => {
+    if (seed) LangsysApp.seedCatalog(seed.catalog, seed.locale, seed);
+  }, []);
+  return createElement(SeedScope.Provider, { value: scope }, children);
+}
+var LangsysApp2 = LangsysApp;
 function createLocaleStore(initial = "en-US") {
   return createSignal(initial);
 }
+
+// src/adapters.ts
+function useSignal(signal) {
+  const scope = useContext(SeedScope);
+  return useSyncExternalStore(signal.subscribe, signal.get, scope ? () => scope.run(signal.get) : signal.get);
+}
 function useT() {
-  return useSignal(tSignal);
+  const scope = useContext(SeedScope);
+  return useSyncExternalStore(tSignal.subscribe, tSignal.get, scope ? () => scope.t : tSignal.get);
 }
 function useCurrentLocale() {
   return useSignal(currentlyLoadedLocale);
@@ -23,123 +52,428 @@ function useLocaleStore(initial = "en-US") {
   const locale = useSignal(store);
   return [locale, store.set, store];
 }
+var writeEnabledServerSnapshot = () => void 0;
+function useWriteEnabled() {
+  return useSyncExternalStore(writeEnabled.subscribe, writeEnabled.get, writeEnabledServerSnapshot);
+}
+function useNotifyNavigation(location) {
+  useEffect(() => {
+    notifyNavigation();
+  }, [location]);
+}
+function useRenderServerMessage() {
+  const t = useT();
+  const inSeedScope = useSeedScopeRunner();
+  return useMemo(
+    () => (entry, category) => inSeedScope(() => renderServerMessage(entry, category)),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [t]
+  );
+}
+function DontTranslate({ tag = "span", className, children }) {
+  return createElement(
+    tag,
+    { translate: "no", "data-ls-dont-translate": "", className },
+    children
+  );
+}
+
+// src/block-nodes.ts
+var PORTAL = /* @__PURE__ */ Symbol.for("react.portal");
+var PROP_TO_ATTR = { className: "class", htmlFor: "for" };
+function attrValue(value) {
+  if (typeof value === "function" || typeof value === "object" || value === void 0 || value === false) return void 0;
+  return value === true ? "" : String(value);
+}
+function attrsOf(props) {
+  const out = {};
+  for (const [name, value] of Object.entries(props)) {
+    if (name === "children" || name === "key" || name === "ref") continue;
+    const attr = attrValue(value);
+    if (attr !== void 0) out[PROP_TO_ATTR[name] ?? name] = attr;
+  }
+  return Object.keys(out).length ? out : void 0;
+}
+var CONTEXT = /* @__PURE__ */ Symbol.for("react.context");
+var read = React.use;
+function isContext(node) {
+  return typeof node === "object" && node !== null && node.$$typeof === CONTEXT;
+}
+function isUsable(node) {
+  if (typeof node !== "object" || node === null) return false;
+  return typeof node.then === "function" || node.$$typeof === CONTEXT;
+}
+function isParamValue(value) {
+  return typeof value === "string" || typeof value === "number" || typeof value === "boolean" || isDate(value);
+}
+function isDate(value) {
+  return Object.prototype.toString.call(value) === "[object Date]";
+}
+var oneShotItems = /* @__PURE__ */ new WeakMap();
+function itemsOf(list) {
+  if (list[Symbol.iterator]() !== list) return Array.from(list);
+  let items = oneShotItems.get(list);
+  if (!items) oneShotItems.set(list, items = Array.from(list));
+  return items;
+}
+function isIterable(node) {
+  return typeof node === "object" && node !== null && !isValidElement(node) && typeof node[Symbol.iterator] === "function";
+}
+function isPortal(node) {
+  return typeof node === "object" && node !== null && node.$$typeof === PORTAL;
+}
+function toBlockNodes(children) {
+  const elements = [];
+  const portals = [];
+  const nested = [];
+  let failure;
+  function mapLevel(level, parent) {
+    const out = [];
+    const visit = (node) => {
+      if (failure || node === null || node === void 0 || typeof node === "boolean") return;
+      if (typeof node === "string" || typeof node === "number" || typeof node === "bigint") {
+        out.push({ text: String(node) });
+        return;
+      }
+      if (Array.isArray(node)) return node.forEach(visit);
+      if (isPortal(node)) {
+        if (parent === null) portals.push(node);
+        else nested[parent].push(node);
+        return;
+      }
+      if (!isValidElement(node)) {
+        failure = `an unsupported child (${typeof node})`;
+        return;
+      }
+      const props = node.props;
+      if (node.type === DontTranslate) return visit(DontTranslate(props));
+      if (typeof node.type !== "string") {
+        failure = "a component, provider, lazy or Suspense child, whose DOM is unknown until React renders it";
+        return;
+      }
+      if (props.dangerouslySetInnerHTML) {
+        failure = "dangerouslySetInnerHTML, an HTML string rather than a tree";
+        return;
+      }
+      const index = elements.push(node) - 1;
+      nested[index] = [];
+      const kids = mapLevel(props.children, index);
+      const attrs = attrsOf(props);
+      out.push({ tag: node.type, ...attrs ? { attrs } : {}, ...kids.length ? { children: kids } : {} });
+    };
+    Children.toArray(withoutFragments(level)).forEach(visit);
+    return out;
+  }
+  const nodes = mapLevel(children, null);
+  return failure ? { ok: false, reason: failure } : { ok: true, nodes, elements, portals, nested };
+}
+var ATTR_TO_PROP = { class: "className", for: "htmlFor" };
+var literally = (text) => text.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+function propFor(attr, props) {
+  const same = new RegExp(`^${literally(attr)}$`, "i");
+  return ATTR_TO_PROP[attr] ?? Object.keys(props).find((name) => same.test(name)) ?? attr;
+}
+function toReactNodes(nodes, elements, nested = []) {
+  return nodes.flatMap((node) => {
+    if ("text" in node) return [node.text];
+    if ("comment" in node) return [];
+    const original = elements[node.source];
+    const originalProps = original.props;
+    const changed = {};
+    for (const [attr, value] of Object.entries(node.attrs)) {
+      if (value === true) continue;
+      const prop = propFor(attr, originalProps);
+      if ((attrValue(originalProps[prop]) ?? "") !== value) changed[prop] = value;
+    }
+    const kids = [...toReactNodes(node.children, elements, nested), ...nested[node.source] ?? []];
+    return [kids.length ? cloneElement(original, changed, ...kids) : cloneElement(original, { ...changed, children: void 0 })];
+  });
+}
+function hasRuntimeValues(children, skipExcluded = false) {
+  let run = [];
+  const flush = () => {
+    const hit = run.filter((p) => String(p).trim() !== "").length > 1;
+    run = [];
+    return hit;
+  };
+  for (const c of [...inRun(children), null]) {
+    if (typeof c === "string" || typeof c === "number" || typeof c === "bigint") {
+      run.push(c);
+      continue;
+    }
+    if (flush()) return true;
+    if (!isValidElement(c)) continue;
+    const node = c.type === DontTranslate ? DontTranslate(c.props) : c;
+    if (typeof node.type !== "string") continue;
+    const props = node.props;
+    if (skipExcluded && opaqueInPhrase(node.type, props)) continue;
+    if (hasRuntimeValues(props.children, skipExcluded)) return true;
+  }
+  return false;
+}
+function withoutFragments(node) {
+  if (read && isContext(node)) return withoutFragments(read(node));
+  if (Array.isArray(node)) return node.map(withoutFragments);
+  if (isIterable(node)) return Array.from(node, withoutFragments);
+  if (isValidElement(node) && node.type === Fragment) return [withoutFragments(node.props.children)];
+  return node;
+}
+function inRun(level) {
+  return Children.toArray(withoutFragments(level));
+}
+function opaqueInPhrase(tag, props) {
+  return NON_TRANSLATABLE_ELEMENTS.includes(tag) || isTranslationExcluded(attributeReader(tag, attrsOf(props)));
+}
+function attributeReader(tagName, attrs) {
+  const valueOf = (name) => Object.entries(attrs ?? {}).find(([key]) => key === name)?.[1];
+  return { tagName, getAttribute: (name) => valueOf(name) ?? null, hasAttribute: (name) => valueOf(name) !== void 0 };
+}
+function withNodeParams(children, given) {
+  const nodes = {};
+  const rest = {};
+  const props = /* @__PURE__ */ Object.create(null);
+  for (const [name, param] of Object.entries(given)) {
+    const value = read && isUsable(param) ? read(param) : param;
+    if (value === null || value === void 0) rest[name] = "";
+    else if (typeof value === "bigint") rest[name] = String(value);
+    else if (isParamValue(value)) rest[name] = value;
+    else {
+      nodes[name] = isIterable(value) && !Array.isArray(value) ? itemsOf(value) : value;
+      props[`%${name}%`] = props[`{${name}}`] = value;
+    }
+  }
+  const names = Object.keys(nodes);
+  if (!names.length) return { children, params: rest };
+  const alternatives = names.map(literally).join("|");
+  const split = new RegExp(`%(${alternatives})%|(%[A-Za-z_][A-Za-z0-9_]*%)|\\{(${alternatives})\\}`);
+  const inText = /* @__PURE__ */ new Set();
+  const ownProps = (element) => {
+    let out;
+    for (const [prop, value] of Object.entries(element)) {
+      if (prop === "children" || typeof value !== "string") continue;
+      if (value in props) (out ??= {})[prop] = props[value];
+      else {
+        for (const match of value.matchAll(new RegExp(split.source, "g"))) {
+          const name = match[1] ?? match[3];
+          if (name !== void 0) inText.add(name);
+        }
+      }
+    }
+    return out;
+  };
+  const visit = (node) => {
+    if (typeof node === "string") {
+      const parts = node.split(new RegExp(split.source, "g"));
+      const out = [];
+      let text = "";
+      for (let i = 0; i < parts.length; i += 4) {
+        text += parts[i] + (parts[i + 2] ?? "");
+        const name = parts[i + 1] ?? parts[i + 3];
+        if (name === void 0) continue;
+        if (text) out.push(text);
+        text = "";
+        out.push(createElement(Fragment, { key: i + 1 }, nodes[name]));
+      }
+      if (out.length === 0) return node;
+      if (text) out.push(text);
+      return out;
+    }
+    if (Array.isArray(node)) {
+      const kids2 = node.map(visit);
+      return kids2.some((kid, i) => kid !== node[i]) ? kids2 : node;
+    }
+    if (!isValidElement(node)) return node;
+    if (typeof node.type !== "string" && node.type !== Fragment && node.type !== DontTranslate) return node;
+    const attrs = typeof node.type === "string" ? ownProps(node.props) : void 0;
+    const own = node.props.children;
+    if (own === void 0) return attrs ? cloneElement(node, attrs) : node;
+    const kids = Array.isArray(own) ? own.map(visit) : [visit(own)];
+    const same = Array.isArray(own) ? kids.every((kid, i) => kid === own[i]) : kids[0] === own;
+    return same && !attrs ? node : cloneElement(node, attrs, ...kids);
+  };
+  const rendered = visit(children);
+  for (const name of inText) rest[name] = String(props[`%${name}%`]);
+  return { children: rendered, params: rest };
+}
+var BlockCategory = createContext(void 0);
+function useUnitCategory(named, namedPrevious) {
+  const block = useContext(BlockCategory);
+  const outerCategory = block?.category;
+  const outerPrevious = block?.previousCategory;
+  return useMemo(() => {
+    if (named !== void 0 || !block) return { category: named ?? "", previousCategory: namedPrevious };
+    return { category: block.category, previousCategory: namedPrevious ?? block.previousCategory };
+  }, [named, namedPrevious, block !== void 0, outerCategory, outerPrevious]);
+}
+
+// src/components/Translate.tsx
 function Translate({
-  category = "",
+  category: named,
+  previousCategory: namedPrevious,
   custom_id = "",
   label = "",
-  params,
+  params: given,
   tag = "translate",
   className,
-  children
+  children: content,
+  "data-ls-unnamed": unmarked
 }) {
+  const unit = useUnitCategory(named, namedPrevious);
+  const { category, previousCategory } = unit;
+  const { children, params } = given ? withNodeParams(content, given) : { children: content, params: given };
+  const t = useT();
   const hostRef = useRef(null);
   const instanceRef = useRef(void 0);
+  const mapped = toBlockNodes(children);
+  const unnamedValues = unmarked !== void 0 || hasRuntimeValues(children);
+  const options = {
+    category,
+    ...previousCategory === void 0 || previousCategory === null ? {} : { previousCategory },
+    params,
+    label,
+    ...custom_id ? { id: custom_id } : {},
+    ...unnamedValues ? { register: false } : {}
+  };
+  const inSeedScope = useSeedScopeRunner();
+  const rendered = mapped.ok ? inSeedScope(() => renderBlock(mapped.nodes, options)) : null;
+  const scope = currentRequestScope();
+  const register = (host) => {
+    if (!mapped.ok || !rendered || rendered.shape === "empty") return;
+    if (unnamedValues) warnUnnamed(unmarked !== void 0);
+    void registerBlock(mapped.nodes, { ...options, host });
+  };
+  if (scope) {
+    register();
+    if (!mapped.ok) warnUnrenderedBlock(mapped.reason);
+  }
+  const blockKey = rendered ? `${category}\0${custom_id}\0${rendered.customId}` : null;
+  useEffect(() => {
+    register(hostRef.current ?? void 0);
+  }, [t, blockKey, tag]);
   useEffect(() => {
     const host = hostRef.current;
-    if (!host) return;
-    const instance = new Translate$1(host, { category, custom_id, label, params });
+    if (mapped.ok || !host) return;
+    if (unnamedValues) warnUnnamed(unmarked !== void 0);
+    const instance = new Translate$1(host, {
+      category,
+      ...previousCategory === void 0 || previousCategory === null ? {} : { previousCategory },
+      custom_id,
+      label,
+      params,
+      ...unnamedValues ? { register: false } : {}
+    });
     instanceRef.current = instance;
     return () => {
       instance.destroy();
       instanceRef.current = void 0;
     };
-  }, [category, custom_id, label]);
+  }, [mapped.ok, category, previousCategory, custom_id, label, tag]);
   useEffect(() => {
     instanceRef.current?.setParams(params);
   });
-  return createElement(tag, { ref: hostRef, className }, children);
+  if (mapped.ok && rendered) {
+    return createElement(
+      tag,
+      { ref: hostRef, className, ...rendered.hostAttrs },
+      ...toReactNodes(rendered.nodes, mapped.elements, mapped.nested),
+      ...mapped.portals
+    );
+  }
+  return createElement(
+    tag,
+    { ref: hostRef, className, ...custom_id ? { [CONTENT_BLOCK_MARKER_ATTR]: custom_id } : {} },
+    createElement(
+      BlockCategory.Provider,
+      { value: unit },
+      ...children !== content && Array.isArray(children) ? children : [children]
+    )
+  );
 }
-function Phrase({ category = "", params = {}, tag = "span", className, children }) {
+function warnUnnamed(unmarked) {
+  warnUnregistered(
+    unmarked ? "a value the build transform left as written: inside MathML or SVG, <script> or <style>, or an element that holds text only" : "a value the build transform did not name: it is not enabled (langsys-js-react/vite, /babel or /next), or the value is a conditional, which it leaves as written"
+  );
+}
+function Phrase({
+  category: named,
+  previousCategory: namedPrevious,
+  params: given = {},
+  tag = "span",
+  className,
+  children: content,
+  "data-ls-unnamed": unmarked
+}) {
+  const inherited = useUnitCategory(named, namedPrevious);
+  const { category, previousCategory } = inherited;
+  const { children, params } = withNodeParams(content, given ?? {});
+  const t = useT();
   const hostRef = useRef(null);
   const instanceRef = useRef(void 0);
+  const mapped = toBlockNodes(children);
+  const unit = mapped.ok ? [{ tag, attrs: { [PHRASE_MARKER_ATTR]: "" }, children: mapped.nodes }] : null;
+  const unnamedValues = unmarked !== void 0 || hasRuntimeValues(children, true);
+  const moved = previousCategory === void 0 || previousCategory === null ? {} : { previousCategory };
+  const options = { category, ...moved, params, ...unnamedValues ? { register: false } : {} };
+  const inSeedScope = useSeedScopeRunner();
+  const rendered = unit ? inSeedScope(() => renderBlock(unit, options)) : null;
+  const scope = currentRequestScope();
+  const register = (host2) => {
+    if (!unit) return;
+    if (unnamedValues) warnUnnamed2(unmarked !== void 0);
+    void registerBlock(unit, { ...options, host: host2 });
+  };
+  if (scope) {
+    register();
+    if (!mapped.ok) warnUnrenderedBlock(mapped.reason);
+  }
   useEffect(() => {
-    const host = hostRef.current;
-    if (!host) return;
-    const instance = new Phrase$1(host, { category, params });
+    register(hostRef.current ?? void 0);
+  }, [t, category, rendered ? JSON.stringify(unit) : null]);
+  useEffect(() => {
+    const host2 = hostRef.current;
+    if (mapped.ok || !host2) return;
+    if (unnamedValues) warnUnnamed2(unmarked !== void 0);
+    const instance = new Phrase$1(host2, {
+      category,
+      ...moved,
+      params,
+      ...unnamedValues ? { register: false } : {}
+    });
     instanceRef.current = instance;
     return () => {
       instance.destroy();
       instanceRef.current = void 0;
     };
-  }, [category]);
+  }, [mapped.ok, category, previousCategory, tag]);
   useEffect(() => {
     instanceRef.current?.setParams(params);
   });
-  return createElement(tag, { ref: hostRef, className, [PHRASE_MARKER_ATTR]: "" }, children);
-}
-function DontTranslate({ tag = "span", className, children }) {
+  const host = rendered?.nodes[0];
+  if (mapped.ok && host && "tag" in host) {
+    const { class: _class, ...hostAttrs } = host.attrs;
+    return createElement(
+      tag,
+      { ref: hostRef, className, ...hostAttrs },
+      ...toReactNodes(host.children, [createElement(tag), ...mapped.elements], [[], ...mapped.nested]),
+      ...mapped.portals
+    );
+  }
   return createElement(
     tag,
-    { translate: "no", "data-ls-dont-translate": "", className },
-    children
+    { ref: hostRef, className, [PHRASE_MARKER_ATTR]: "" },
+    createElement(
+      BlockCategory.Provider,
+      { value: inherited },
+      ...children !== content && Array.isArray(children) ? children : [children]
+    )
+  );
+}
+function warnUnnamed2(unmarked) {
+  warnUnregistered(
+    unmarked ? "a value the build transform left as written in a phrase whose values are all marked: in a translated <svg>, or an element that holds text only" : "a value the build transform did not name: it is not enabled (langsys-js-react/vite, /babel or /next), or the value is a conditional, which it leaves as written"
   );
 }
 
-// src/index.ts
-var LangsysAppReact = class {
-  /** Initialize Langsys. Pass a `Signal<string>` (from `createLocaleStore`) as `UserLocaleStore`. */
-  init(config) {
-    return LangsysApp$1.init(config);
-  }
-  get Translations() {
-    return LangsysApp$1.Translations;
-  }
-  get translationsLoadingPromise() {
-    return LangsysApp$1.translationsLoadingPromise;
-  }
-  /** Current translation function. Reads fresh state on every call (not reactive on its own — use `useT()` in components). */
-  get t() {
-    return LangsysApp$1.t;
-  }
-  get debug() {
-    return LangsysApp$1.debug;
-  }
-  refresh() {
-    return LangsysApp$1.refresh();
-  }
-  getCountries(inLocale) {
-    return LangsysApp$1.getCountries(inLocale);
-  }
-  getCountryName(forCountryCode, inLocale) {
-    return LangsysApp$1.getCountryName(forCountryCode, inLocale);
-  }
-  getCurrencies(inLocale) {
-    return LangsysApp$1.getCurrencies(inLocale);
-  }
-  getCurrencyName(forCurrencyCode, inLocale) {
-    return LangsysApp$1.getCurrencyName(forCurrencyCode, inLocale);
-  }
-  getDialCodes(inLocale) {
-    return LangsysApp$1.getDialCodes(inLocale);
-  }
-  getLocales(inLocale) {
-    return LangsysApp$1.getLocales(inLocale);
-  }
-  getLocalesFlat(inLocale) {
-    return LangsysApp$1.getLocalesFlat(inLocale);
-  }
-  getLocalesData(inLocale, forceRefresh) {
-    return LangsysApp$1.getLocalesData(inLocale, forceRefresh);
-  }
-  getLocalesFormat(format = "", inLocale) {
-    return LangsysApp$1.getLocalesFormat(format, inLocale);
-  }
-  getLocaleName(forLocale, shortName, inLocale) {
-    return LangsysApp$1.getLocaleName(forLocale, shortName, inLocale);
-  }
-  getLocaleNameWithLookup(forLocale, shortName, inLocale) {
-    return LangsysApp$1.getLocaleNameWithLookup(forLocale, shortName, inLocale);
-  }
-  /** @deprecated use `getLocaleNameWithLookup` or `getLocaleName` */
-  getLanguageName(forLocale, shortName, inLocale) {
-    return LangsysApp$1.getLanguageName(forLocale, shortName, inLocale);
-  }
-  detectPreferredLocale(acceptLanguageHeader, supportedLocales) {
-    return LangsysApp$1.detectPreferredLocale(acceptLanguageHeader, supportedLocales);
-  }
-};
-var LangsysApp = new LangsysAppReact();
-
-export { DontTranslate, LangsysApp, Phrase, Translate, createLocaleStore, useCurrentLocale, useLocaleStore, useSignal, useT, useTranslations };
+export { DontTranslate, LangsysApp2 as LangsysApp, LangsysProvider, Phrase, Translate, createLocaleStore, useCurrentLocale, useLocaleStore, useNotifyNavigation, useRenderServerMessage, useSignal, useT, useTranslations, useWriteEnabled };
 //# sourceMappingURL=index.mjs.map
 //# sourceMappingURL=index.mjs.map