@arcote.tech/platform 0.8.3 → 0.8.5

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@arcote.tech/platform",
   "type": "module",
-  "version": "0.8.3",
+  "version": "0.8.5",
   "private": false,
   "author": "Przemysław Krasiński [arcote.tech]",
   "description": "Arc Platform — module system, router, layout, theme, i18n, platform app shell",
@@ -14,12 +14,12 @@
     "type-check": "tsc --noEmit"
   },
   "dependencies": {
-    "@arcote.tech/arc-ds": "^0.8.3",
-    "@arcote.tech/arc-react": "^0.8.3"
+    "@arcote.tech/arc-ds": "^0.8.5",
+    "@arcote.tech/arc-react": "^0.8.5"
   },
   "peerDependencies": {
-    "@arcote.tech/arc": "^0.8.3",
-    "@arcote.tech/arc-otel": "^0.8.3",
+    "@arcote.tech/arc": "^0.8.5",
+    "@arcote.tech/arc-otel": "^0.8.5",
     "@lingui/core": "^5.0.0",
     "@lingui/react": "^5.0.0",
     "framer-motion": "^12.0.0",

package/src/i18n.tsx

@@ -16,6 +16,28 @@ interface I18nState {
 
 const I18nContext = createContext<I18nState | null>(null);
 
+/** Server-inlined i18n from the HTML shell (`window.__ARC_I18N__`): the locale
+ *  it picked (cookie → Accept-Language → sourceLocale) + that catalog. Present
+ *  on first paint → app renders translated with no round-trip / no blank wait. */
+interface InlinedI18n {
+  locale: string;
+  messages: Record<string, string>;
+}
+function getInlinedI18n(): InlinedI18n | null {
+  if (typeof window === "undefined") return null;
+  return (window as unknown as { __ARC_I18N__?: InlinedI18n }).__ARC_I18N__ ?? null;
+}
+
+/** Persist the chosen locale to a cookie so the next navigation's server-render
+ *  inlines the right catalog. Cookie (not localStorage) because only cookies
+ *  reach the server on `GET /`. */
+function writeLocaleCookie(locale: string): void {
+  if (typeof document === "undefined") return;
+  const secure =
+    typeof location !== "undefined" && location.protocol === "https:" ? "; Secure" : "";
+  document.cookie = `arc-locale=${encodeURIComponent(locale)}; Path=/; SameSite=Lax; Max-Age=${365 * 24 * 60 * 60}${secure}`;
+}
+
 export interface I18nProviderProps {
   children: ReactNode;
   defaultLocale: string;
@@ -29,34 +51,33 @@ export function I18nProvider({
   locales,
   loadMessages,
 }: I18nProviderProps) {
-  const [locale, setLocaleRaw] = useState(() => {
-    try {
-      const saved = localStorage.getItem("arc-locale");
-      if (saved && saved in locales) return saved;
-    } catch {}
-    return defaultLocale;
-  });
-  const [messages, setMessages] = useState<Record<string, string>>({});
-  // Bez `ready` pierwszy paint renderuje aplikację z pustym `messages`
-  // (bo `loadMessages` jest async w useEffect). `<Trans>foo</Trans>` w tej
-  // klatce pokazuje surowe "foo" zamiast tłumaczenia, a po dociągnięciu
-  // katalogu odbywa się re-render z poprawnym tekstem — widoczny flash.
-  // Wstrzymanie renderu do pierwszego setMessages eliminuje flash.
-  // Gdy `locales` jest puste (brak translations skonfigurowanych),
-  // setMessages też się wywoła (z `{}`) i `ready` przejdzie na true od razu.
-  const [ready, setReady] = useState(false);
+  const inlined = getInlinedI18n();
+  const [locale, setLocaleRaw] = useState(() => inlined?.locale ?? defaultLocale);
+  const [messages, setMessages] = useState<Record<string, string>>(
+    () => inlined?.messages ?? {},
+  );
+  // Render is gated on `ready` to avoid a flash of untranslated `<Trans>foo</Trans>`
+  // before the async catalog loads. The server inlines the catalog (even empty,
+  // for no-translation apps), so it's ALREADY here → ready immediately, zero
+  // round-trip. Only a missing shell (SSR / old build) falls back to fetching.
+  const [ready, setReady] = useState(() => !!inlined);
 
   const setLocale = useCallback(
     async (newLocale: string) => {
       const msgs = await loadMessages(newLocale);
       setMessages(msgs);
       setLocaleRaw(newLocale);
-      try { localStorage.setItem("arc-locale", newLocale); } catch {}
+      writeLocaleCookie(newLocale);
     },
     [loadMessages],
   );
 
   useEffect(() => {
+    // Catalog already inlined for this locale → nothing to fetch.
+    if (ready) {
+      writeLocaleCookie(locale);
+      return;
+    }
     setLocale(locale).finally(() => setReady(true));
   }, []);
 

package/src/module-loader.ts

@@ -1,4 +1,9 @@
-import { registerModuleSyncProvider } from "@arcote.tech/arc";
+import {
+  readAllTokenCookies,
+  registerModuleSyncProvider,
+  removeTokenCookie,
+  TOKEN_BUMP_KEY,
+} from "@arcote.tech/arc";
 import { clearModules, getAllRegisteredModules, getContext, setActiveModules } from "./registry";
 import type { BuildManifest, BuildManifestGroup } from "./types";
 import {
@@ -88,25 +93,19 @@ function decodeJwtPayload(jwt: string): { exp?: number } | null {
  * host in X-Arc-Tokens.
  */
 function getAllPersistedTokens(): Record<string, string> {
-  if (typeof localStorage === "undefined") return {};
   const tokens: Record<string, string> = {};
   const stale: string[] = [];
   const nowSec = Math.floor(Date.now() / 1000);
-  for (let i = 0; i < localStorage.length; i++) {
-    const key = localStorage.key(i);
-    if (!key?.startsWith("arc:token:")) continue;
-    const scope = key.slice(10);
-    if (scope.includes(":")) continue; // namespaced = token cudzego modelu
-    const raw = localStorage.getItem(key);
-    if (!raw) continue;
-    const payload = decodeJwtPayload(raw);
+  for (const { scopeKey, jwt } of readAllTokenCookies()) {
+    if (scopeKey.includes(":")) continue; // namespaced = token cudzego modelu
+    const payload = decodeJwtPayload(jwt);
     if (payload?.exp && payload.exp < nowSec) {
-      stale.push(key);
+      stale.push(scopeKey);
       continue;
     }
-    tokens[scope] = raw;
+    tokens[scopeKey] = jwt;
   }
-  for (const key of stale) localStorage.removeItem(key);
+  for (const scopeKey of stale) removeTokenCookie(scopeKey);
   return tokens;
 }
 
@@ -127,10 +126,9 @@ function buildHeaders(tokens: Record<string, string>): HeadersInit {
   return headers;
 }
 
-/** Remove the named token scopes from localStorage (invalid/rejected tokens). */
+/** Remove the named token scopes from cookies (invalid/rejected tokens). */
 function clearPersistedTokens(scopes: string[]): void {
-  if (typeof localStorage === "undefined") return;
-  for (const scope of scopes) localStorage.removeItem(`arc:token:${scope}`);
+  for (const scope of scopes) removeTokenCookie(scope);
 }
 
 /** Single manifest request with an explicit token map. `bust` forces a
@@ -262,13 +260,27 @@ async function importGroupsWithRecovery(
     console.error(
       `[arc] Group "${name}" still failing after manifest refresh; clearing token.`,
     );
-    if (typeof localStorage !== "undefined") {
-      localStorage.removeItem(`arc:token:${name}`);
-    }
+    removeTokenCookie(name);
   }
   return fresh;
 }
 
+/**
+ * Consume the server-inlined manifest (`window.__ARC_MANIFEST__`) exactly once.
+ * The server renders it into the HTML shell already filtered + signed for the
+ * caller's cookies, so the first load skips the `/api/modules` round-trip. We
+ * null it out after reading so any later sync (token change / dev reload)
+ * refetches fresh from `/api/modules`.
+ */
+function consumeInlinedManifest(): BuildManifest | null {
+  if (typeof window === "undefined") return null;
+  const w = window as unknown as { __ARC_MANIFEST__?: BuildManifest };
+  const m = w.__ARC_MANIFEST__;
+  if (!m) return null;
+  w.__ARC_MANIFEST__ = undefined;
+  return m;
+}
+
 /**
  * Load all modules from manifest. Each module auto-registers via module().build().
  */
@@ -276,7 +288,9 @@ export async function loadModules(
   baseUrl: string,
   tokens?: Record<string, string>,
 ): Promise<BuildManifest> {
-  const manifest = await fetchManifest(baseUrl, tokens);
+  // First paint: use the manifest the server inlined into the HTML (already
+  // filtered + signed for our cookies) instead of a `/api/modules` round-trip.
+  const manifest = consumeInlinedManifest() ?? (await fetchManifest(baseUrl, tokens));
 
   const names = Object.keys(manifest.groups);
   for (const name of names) importedGroupHashes.set(name, manifest.groups[name].hash);
@@ -432,19 +446,18 @@ export function useModuleLoader(
     return () => evtSource.close();
   }, [baseUrl, fullReload, options.skip]);
 
-  // Cross-tab token changes (another tab logged in/out → localStorage write)
-  // → sync. Same-tab changes are driven directly through the module-sync
-  // coordinator (scope.setToken → triggerModuleSync → registered provider),
-  // so we deliberately do NOT listen for the same-tab "arc:token-change"
-  // CustomEvent here — that would double-sync.
+  // Cross-tab token changes (another tab logged in/out) → sync. Tokens now live
+  // in cookies, which don't fire `storage`, so cookie-token-store bumps a tiny
+  // localStorage sentinel (TOKEN_BUMP_KEY) on every write/remove. The `storage`
+  // event fires only in OTHER tabs (never the writer) — exactly the cross-tab
+  // semantics we want. Same-tab changes are driven directly through the
+  // module-sync coordinator (scope.setToken → triggerModuleSync), so we do NOT
+  // react to same-tab changes here — that would double-sync.
   useEffect(() => {
     if (typeof window === "undefined") return;
 
     const onStorage = (e: StorageEvent) => {
-      if (!e.key?.startsWith("arc:token:")) return;
-      // Namespaced keys (`arc:token:<ns>:<scope>`) belong to federated app
-      // models — host module sync must not react to them.
-      if (e.key.slice(10).includes(":")) return;
+      if (e.key !== TOKEN_BUMP_KEY) return;
       setTokenVersion((v) => v + 1);
     };
     window.addEventListener("storage", onStorage);

package/src/platform-app.tsx

@@ -79,22 +79,34 @@ const EMPTY_I18N_CONFIG: I18nConfig = { locales: {}, sourceLocale: "en" };
 // I18nProvider RAZ z właściwymi propsami; locale state w providerze jest
 // w useState bez sync z propsami, więc remount po zmianie propsów
 // wprowadziłby dodatkowy flash.
+function toI18nConfig(data: any): I18nConfig | null {
+  if (data?.locales && Array.isArray(data.locales) && data.locales.length > 0) {
+    // ["pl-PL","en-US"] → { "pl-PL":"pl-PL", "en-US":"en-US" }
+    const localesMap: Record<string, string> = {};
+    for (const l of data.locales) localesMap[l] = l;
+    return { locales: localesMap, sourceLocale: data.sourceLocale };
+  }
+  return null;
+}
+
 function useI18nConfig(apiUrl: string): I18nConfig | null {
-  const [config, setConfig] = useState<I18nConfig | null>(null);
+  const [config, setConfig] = useState<I18nConfig | null>(() => {
+    // Server inlined the translations config into the HTML shell (always — even
+    // for no-translation apps) → no `/api/translations` round-trip. Presence of
+    // __ARC_I18N__ means "server answered"; a null config = no translations.
+    const shell =
+      typeof window !== "undefined"
+        ? (window as unknown as { __ARC_I18N__?: { config?: any } }).__ARC_I18N__
+        : undefined;
+    if (shell !== undefined) return toI18nConfig(shell.config) ?? EMPTY_I18N_CONFIG;
+    return null;
+  });
 
   useEffect(() => {
+    if (config) return; // already have it from the inlined shell
     fetch(`${apiUrl}/api/translations`)
       .then((r) => r.json())
-      .then((data) => {
-        if (data?.locales && Array.isArray(data.locales) && data.locales.length > 0) {
-          // Convert ["pl-PL", "en-US"] → { "pl-PL": "pl-PL", "en-US": "en-US" }
-          const localesMap: Record<string, string> = {};
-          for (const l of data.locales) localesMap[l] = l;
-          setConfig({ locales: localesMap, sourceLocale: data.sourceLocale });
-        } else {
-          setConfig(EMPTY_I18N_CONFIG);
-        }
-      })
+      .then((data) => setConfig(toI18nConfig(data) ?? EMPTY_I18N_CONFIG))
       .catch(() => setConfig(EMPTY_I18N_CONFIG));
   }, [apiUrl]);
 

package/src/types.ts

@@ -165,6 +165,9 @@ export interface BuildManifestGroup {
   readonly modules: readonly string[];
   /** Signed URL — server fills this for protected groups when filtering per request. */
   readonly url?: string;
+  /** Shared chunks this group statically imports (transitive closure) — the
+   *  server preloads them for accessible groups so they fetch in parallel. */
+  readonly staticChunks?: readonly string[];
 }
 
 /** Build manifest written to .arc/platform/manifest.json. */
@@ -176,6 +179,8 @@ export interface BuildManifest {
   readonly initial: {
     readonly file: string;
     readonly hash: string;
+    /** Shared chunks initial statically imports — server preloads them. */
+    readonly staticChunks?: readonly string[];
   };
   /**
    * Token-gated groups keyed by `token.name`. One bundle per group containing