@multiplatform.one/core 7.4.0 → 7.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@multiplatform.one/core",
-  "version": "7.4.0",
+  "version": "7.5.0",
   "description": "Core framework shell, provider composition, and layout factories for multiplatform.one",
   "keywords": [
     "app",
@@ -47,11 +47,11 @@
     "@tanstack/react-devtools": "^0.10.2",
     "@tanstack/react-form-devtools": "0.2.22",
     "react-cookie": "^8.1.2",
-    "@multiplatform.one/i18n": "7.4.0",
-    "@multiplatform.one/logger": "7.4.0",
-    "@multiplatform.one/platform": "7.4.0",
-    "@multiplatform.one/store": "7.4.0",
-    "@multiplatform.one/theme": "7.4.0"
+    "@multiplatform.one/i18n": "7.5.0",
+    "@multiplatform.one/store": "7.5.0",
+    "@multiplatform.one/theme": "7.5.0",
+    "@multiplatform.one/platform": "7.5.0",
+    "@multiplatform.one/logger": "7.5.0"
   },
   "devDependencies": {
     "@sentry/react": "^10.51.0",
@@ -69,8 +69,8 @@
     "tamagui": "2.7.6",
     "typescript": "~5.9.3",
     "vitest": "^4.1.5",
-    "@multiplatform.one/frappe": "7.4.0",
-    "@multiplatform.one/web3": "7.4.0"
+    "@multiplatform.one/web3": "7.5.0",
+    "@multiplatform.one/frappe": "7.5.0"
   },
   "peerDependencies": {
     "@sentry/react": "^9.0.0",
@@ -86,10 +86,10 @@
     "react-native-gesture-handler": ">=2.0.0",
     "react-native-safe-area-context": ">=4.0.0",
     "tamagui": "^2.0.0-rc",
-    "@multiplatform.one/frappe": "^7.4.0",
-    "@multiplatform.one/frappe-ui": "^7.4.0",
-    "@multiplatform.one/keycloak": "^7.4.0",
-    "@multiplatform.one/web3": "^7.4.0"
+    "@multiplatform.one/frappe": "^7.5.0",
+    "@multiplatform.one/web3": "^7.5.0",
+    "@multiplatform.one/frappe-ui": "^7.5.0",
+    "@multiplatform.one/keycloak": "^7.5.0"
   },
   "peerDependenciesMeta": {
     "@multiplatform.one/web3": {

package/src/app/CreateRootLayout.native.tsx

@@ -1,7 +1,7 @@
 import { SchemeProvider, useUserScheme } from "@vxrn/color-scheme";
 import { useFonts } from "expo-font";
 import i18n from "i18next";
-import { Slot } from "one";
+import { Slot, routerStore } from "one";
 import type { ComponentType, ReactNode } from "react";
 import { StyleSheet } from "react-native";
 import { GestureHandlerRootView } from "react-native-gesture-handler";
@@ -58,6 +58,21 @@ export function createRootLayout(cfg: CreateRootLayoutConfig): ComponentType {
   }
   DeepLinkBridge.displayName = "DeepLinkBridge";
 
+  // One's native usePathname() reads useRouteInfo().pathname. For a layout
+  // node that is the store's routeInfo, which is undefined from module load
+  // until initialize() runs setupLinkingAndRouteInfo() (and then notifies
+  // store subscribers — not root-state subscribers). Rendering RootLayout
+  // in that window throws `Cannot read property 'pathname' of undefined`
+  // into RootErrorBoundary and the app never boots (MPO-24). useOneRouter
+  // is the store subscription, so the consumer layout's first paint is the
+  // one where routeInfo already exists (initial path is "/").
+  function NativeRootLayout({ children }: { children: ReactNode }) {
+    const snap = routerStore.useOneRouter();
+    if (!snap?.routeInfo) return children;
+    return <RootLayout>{children}</RootLayout>;
+  }
+  NativeRootLayout.displayName = "NativeRootLayout";
+
   function Layout() {
     const [fontsLoaded, fontError] = useFonts(fontsMap);
     // Gate on fonts being ready, but never block forever: if font loading
@@ -70,9 +85,9 @@ export function createRootLayout(cfg: CreateRootLayoutConfig): ComponentType {
           <SchemeProvider>
             <NativeRootProvider>
               {cfg.deepLinks !== false && <DeepLinkBridge />}
-              <RootLayout>
+              <NativeRootLayout>
                 <Slot />
-              </RootLayout>
+              </NativeRootLayout>
             </NativeRootProvider>
           </SchemeProvider>
         </SafeAreaProvider>

package/src/app/TanstackProvider.tsx

@@ -1,10 +1,23 @@
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { Suspense, lazy, type PropsWithChildren } from "react";
+import { Suspense, lazy, useEffect, useState, type PropsWithChildren } from "react";
 import { platform } from "@multiplatform.one/platform";
 import type { ProviderComponent, TanstackConfig } from "./CreateApp";
 
 const LazyDevtools = lazy(() => import("./TanstackDevtools"));
 
+/**
+ * True only after hydration has finished on the client. `useEffect` never
+ * runs on the server and does not run during the hydration render, so the
+ * server markup and the first client render agree on `false`.
+ */
+function useHydrated(): boolean {
+  const [hydrated, setHydrated] = useState(false);
+  useEffect(() => {
+    setHydrated(true);
+  }, []);
+  return hydrated;
+}
+
 export function createTanstackProvider(tanstackConfig: TanstackConfig): ProviderComponent {
   const queryClient = new QueryClient({
     defaultOptions: {
@@ -20,7 +33,18 @@ export function createTanstackProvider(tanstackConfig: TanstackConfig): Provider
     // TODO(native): TanStack Devtools does not yet support React Native. When it does,
     // revisit this guard to also handle native (e.g. !platform.isNative) so devtools
     // are enabled on native when supported.
-    const showDevtools = tanstackConfig.debug && !platform.isStorybook;
+    const wantsDevtools = tanstackConfig.debug && !platform.isStorybook;
+    const hydrated = useHydrated();
+
+    // Devtools mount CLIENT-ONLY, after hydration. Rendering the lazy
+    // component inside a fallback-less <Suspense> during SSR made the server
+    // suspend on a chunk that only exists in the browser, and React raced
+    // that boundary against Fizz streaming: suspense markers leaked into the
+    // served document under a cold module cache, which broke the marketplace
+    // SSR smoke (SHC-329). Apps worked around it with per-app vite rewrites;
+    // gating here retires those. Nothing devtools-related reaches the server
+    // renderer now, so the served document is identical with debug on or off.
+    const showDevtools = wantsDevtools && hydrated;
 
     const scheme = tanstackConfig.useUserScheme?.();
     const resolvedScheme = scheme?.value ?? "light";

package/src/app/tanstackProvider.ssr.spec.tsx

@@ -0,0 +1,44 @@
+/**
+ * MPO-8 / SHC-329 regression guard.
+ *
+ * The devtools used to render as `lazy()` inside a fallback-less <Suspense>
+ * whenever `debug` was on. On the server that boundary suspends on a chunk
+ * that only exists in the browser, and React raced it against Fizz
+ * streaming — suspense markers (`<!--$?-->`, `<template id="B:0">`) landed in
+ * the served document under a cold module cache and broke the marketplace SSR
+ * smoke. Apps papered over it with per-app vite rewrites.
+ *
+ * The rule now: nothing devtools-related reaches the server renderer, so the
+ * served document is identical with debug on or off, and the overlay mounts
+ * client-side after hydration instead.
+ */
+
+import { renderToString } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+import { createTanstackProvider } from "./TanstackProvider";
+import type { TanstackConfig } from "./CreateApp";
+
+function ssr(config: TanstackConfig) {
+  const Provider = createTanstackProvider(config);
+  return renderToString(
+    <Provider>
+      <main>app</main>
+    </Provider>,
+  );
+}
+
+describe("createTanstackProvider on the server", () => {
+  it("serves the same document with debug on and off", () => {
+    expect(ssr({ debug: true })).toBe(ssr({ debug: false }));
+  });
+
+  // Without the client-only gate this renders
+  // `<!--$!--><template data-msg="Switched to client rendering…` — the exact
+  // marker family that leaked into the marketplace document.
+  it("emits no suspense seam when debug is on", () => {
+    const html = ssr({ debug: true });
+    expect(html).toBe("<main>app</main>");
+    expect(html).not.toContain("<!--$");
+    expect(html).not.toContain("<template");
+  });
+});

package/types/app/CreateRootLayout.native.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CreateRootLayout.native.d.ts","sourceRoot":"","sources":["../../src/app/CreateRootLayout.native.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AAQtD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAGjE,YAAY,EACV,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,cAAc,EACd,YAAY,GACb,MAAM,oBAAoB,CAAC;AAM5B;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,sBAAsB,GAAG,aAAa,CAgD3E"}
+{"version":3,"file":"CreateRootLayout.native.d.ts","sourceRoot":"","sources":["../../src/app/CreateRootLayout.native.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,aAAa,EAAa,MAAM,OAAO,CAAC;AAQtD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AAGjE,YAAY,EACV,sBAAsB,EACtB,UAAU,EACV,eAAe,EACf,cAAc,EACd,YAAY,GACb,MAAM,oBAAoB,CAAC;AAM5B;;;;;;;;GAQG;AACH,wBAAgB,gBAAgB,CAAC,GAAG,EAAE,sBAAsB,GAAG,aAAa,CA+D3E"}

package/types/app/TanstackProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TanstackProvider.d.ts","sourceRoot":"","sources":["../../src/app/TanstackProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAIrE,wBAAgB,sBAAsB,CAAC,cAAc,EAAE,cAAc,GAAG,iBAAiB,CAiCxF"}
+{"version":3,"file":"TanstackProvider.d.ts","sourceRoot":"","sources":["../../src/app/TanstackProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAiBrE,wBAAgB,sBAAsB,CAAC,cAAc,EAAE,cAAc,GAAG,iBAAiB,CA4CxF"}