@kbach/react-native 1.0.0-beta.3 → 1.0.0-beta.5

package/README.md

@@ -4,11 +4,12 @@ Kbach's utility-class styling engine for React Native — the same class
 names as [`@kbach/react`](https://www.npmjs.com/package/@kbach/react),
 resolved to a real `StyleSheet`-ready style object instead of injected CSS.
 
-> **Beta, Android-only.** Resolution runs through a Kotlin/JNI TurboModule
-> calling the same Rust core `@kbach/react` uses, so class semantics stay
-> identical across web and native. The native module ships prebuilt (see
-> Setup below) — no Rust toolchain or manual native wiring required — but
-> there's no iOS bridge yet.
+> **Beta.** Native (Android-only, no iOS bridge yet) resolves through a
+> Kotlin/JNI TurboModule; Expo Web / react-native-web resolves through the
+> same Rust engine compiled to WASM instead — both call the identical
+> resolution logic, so class semantics stay identical everywhere. The
+> native module ships prebuilt (see Setup below) — no Rust toolchain or
+> manual native wiring required on any platform.
 
 ## Setup
 
@@ -46,13 +47,18 @@ one needs (a plain single-app install doesn't need any of that — it's
 only relevant if you're linking packages locally instead of installing
 from npm).
 
-### Expo
+### Expo (native — Android)
 
-**Expo Go doesn't work** — it's a fixed pre-built binary with no way to
-load a custom native module like this one. You need a **dev client**
-instead (a custom build of your app with this module baked in) —
-functionally the same "real native project" setup as the CLI path above,
-just generated and driven through Expo's own tooling:
+**Expo Go can never work with this package, and that isn't specific to
+Kbach.** Expo Go is a single fixed binary Expo pre-builds and ships
+through the app stores, containing only the native code Expo bundled into
+it at their own build time — there is no mechanism for *any* third-party
+package to add native code to it at runtime, whether that's a raw
+TurboModule (what this package uses) or even Expo's own Modules API. This
+is exactly why the **dev client** concept exists: a custom build of your
+app — built once via `expo prebuild`/`expo run:android`, functionally the
+same "real native project" as the CLI path above — that *does* include
+this module:
 
 ```js
 // babel.config.js
@@ -76,11 +82,36 @@ Architecture off, turn it on in `app.json`
 EAS Build works the same way — it runs the same `prebuild` step, so no
 extra configuration beyond the two steps above.
 
+See `apps/expo-sandbox` in the [repo](https://github.com/semsakadanupol/kbach)
+for a full working reference project covering both this section and Expo
+Web below — including the `metro.config.js` a monorepo setup like this one
+needs (a plain single-app install doesn't need it).
+
+### Expo Web
+
+**Works — no extra setup, no separate package, no init call.** `expo start
+--web` (and EAS's web builds) render through `react-native-web` —
+`View`/`Text`/etc. become real DOM elements with real CSS, not a
+Kotlin/JNI bridge, so on web this package resolves classes through the
+same Rust engine [`@kbach/react`](https://www.npmjs.com/package/@kbach/react)
+uses — WASM instead of JNI — automatically. Metro picks the right
+implementation per platform on its own via this package's `"browser"`
+export condition; your app code and JSX never change. The WASM module
+initializes itself eagerly (synchronously, at import time — no `await`
+needed before your first render, unlike a from-scratch WASM setup).
+
+The only thing this doesn't cover on web is an iOS-parity feature gap —
+everything web-side resolves through the exact same
+[`resolve_style.rs`](https://github.com/semsakadanupol/kbach/blob/main/packages/core-engine/src/resolve_style.rs)
+logic real native uses, so see this README's "What this is" section above
+for what's covered.
+
 ## What this is
 
 - A JSX runtime (`@kbach/react-native/jsx-runtime`) that intercepts
-  `className`/`kb` props on every element and calls into the native bridge
-  to resolve them to a style object, synchronously, on every render.
+  `className`/`kb` props on every element and calls into the native/WASM
+  bridge (whichever platform you're on) to resolve them to a style object,
+  synchronously, on every render.
 - A Babel plugin (`@kbach/react-native/babel-plugin`) that routes your
   app's own files (never `node_modules`) through that JSX runtime via a
   per-file `@jsxImportSource` pragma.

package/dist/chunk-4KCCEMEN.mjs

@@ -0,0 +1,66 @@
+import {
+  getGlobalDarkMode,
+  getGlobalThemeMode,
+  seedDefaultMode,
+  setGlobalThemeMode,
+  subscribeGlobalDarkMode,
+  toggleGlobalDarkMode
+} from "./chunk-AEVOM2NB.mjs";
+
+// src/useGlobalDarkMode.ts
+import { useSyncExternalStore } from "react";
+function useGlobalDarkMode() {
+  return useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
+}
+
+// src/ThemeContext.tsx
+import { createContext, useContext } from "react";
+var ThemeContext = createContext(null);
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (!ctx) {
+    throw new Error(
+      'useTheme() must be called within a <ThemeProvider>. For dark-mode state without a provider, use useGlobalDarkMode() (read) or toggleGlobalDarkMode()/setGlobalThemeMode() (write) from "@kbach/react-native" instead.'
+    );
+  }
+  return ctx;
+}
+
+// src/ThemeProvider.tsx
+import { useEffect, useMemo, useRef, useSyncExternalStore as useSyncExternalStore2 } from "react";
+import { jsx } from "react/jsx-runtime";
+var mountedProviderCount = 0;
+var warnedMultipleProviders = false;
+function ThemeProvider({ children, defaultMode = "system" }) {
+  useEffect(() => {
+    mountedProviderCount++;
+    if (mountedProviderCount > 1 && !warnedMultipleProviders) {
+      warnedMultipleProviders = true;
+      console.warn(
+        "[kbach] Multiple <ThemeProvider> instances are mounted at once. Dark-mode state is one global store (the same one useGlobalDarkMode()/toggleGlobalDarkMode() read and write), not scoped per-provider, so they will fight over the same state instead of each getting their own."
+      );
+    }
+    return () => {
+      mountedProviderCount--;
+    };
+  }, []);
+  const seeded = useRef(false);
+  useEffect(() => {
+    if (seeded.current) return;
+    seeded.current = true;
+    seedDefaultMode(defaultMode);
+  }, []);
+  const isDark = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalDarkMode);
+  const mode = useSyncExternalStore2(subscribeGlobalDarkMode, getGlobalThemeMode);
+  const value = useMemo(
+    () => ({ mode, isDark, setMode: setGlobalThemeMode, toggle: toggleGlobalDarkMode }),
+    [mode, isDark]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+
+export {
+  useGlobalDarkMode,
+  useTheme,
+  ThemeProvider
+};

package/dist/{chunk-7KUNKZBM.mjs → chunk-AEVOM2NB.mjs}

@@ -357,25 +357,15 @@ function seedDefaultMode(fallback) {
   notify();
 }
 
-// src/nativeBridge.ts
-import { Dimensions, TurboModuleRegistry } from "react-native";
-function resolveStyle(classString, pressed = false) {
-  const KbachModule = TurboModuleRegistry.getEnforcing("KbachModule");
-  const colorScheme = getGlobalDarkMode() ? "dark" : "light";
-  const width = Dimensions.get("window").width;
-  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed, width);
-  return JSON.parse(json);
-}
-
 export {
   defaultTheme,
   setTheme,
   getTheme,
+  getThemeJson,
   getGlobalDarkMode,
   getGlobalThemeMode,
   setGlobalThemeMode,
   toggleGlobalDarkMode,
   subscribeGlobalDarkMode,
-  seedDefaultMode,
-  resolveStyle
+  seedDefaultMode
 };

package/dist/{chunk-UP5ZN7CN.mjs → chunk-DLIXI5OW.mjs}

@@ -1,15 +1,11 @@
-import {
-  resolveStyle
-} from "./chunk-7KUNKZBM.mjs";
-
-// src/jsx-runtime.tsx
+// src/jsxRuntimeCore.ts
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment } from "react";
 import { Pressable } from "react-native";
 function makeElement(isStaticChildren, type, props, key) {
   return (isStaticChildren ? _jsxs : _jsx)(type, props, key);
 }
-function resolvedStyleFor(classStrRaw, userStyle, pressed) {
+function resolvedStyleFor(resolveStyle, classStrRaw, userStyle, pressed) {
   const resolved = resolveStyle(classStrRaw, pressed);
   if (userStyle === void 0) {
     return resolved;
@@ -19,7 +15,7 @@ function resolvedStyleFor(classStrRaw, userStyle, pressed) {
   }
   return [resolved, userStyle];
 }
-function processElement(type, rawProps, key, isStaticChildren) {
+function processElement(resolveStyle, type, rawProps, key, isStaticChildren) {
   if (type === null || typeof type === "symbol" || !rawProps) {
     return makeElement(isStaticChildren, type, rawProps ?? {}, key);
   }
@@ -27,18 +23,31 @@ function processElement(type, rawProps, key, isStaticChildren) {
   if (typeof classStrRaw !== "string") {
     return makeElement(isStaticChildren, type, rawProps, key);
   }
-  const finalStyle = type === Pressable ? (state) => resolvedStyleFor(classStrRaw, userStyle, state.pressed) : resolvedStyleFor(classStrRaw, userStyle, false);
+  const finalStyle = type === Pressable ? (state) => resolvedStyleFor(resolveStyle, classStrRaw, userStyle, state.pressed) : resolvedStyleFor(resolveStyle, classStrRaw, userStyle, false);
   return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
 }
-function jsx(type, props, key) {
-  return processElement(type, props, key, false);
+function createJsxFunctions(resolveStyle) {
+  function jsx(type, props, key) {
+    return processElement(resolveStyle, type, props, key, false);
+  }
+  function jsxs(type, props, key) {
+    return processElement(resolveStyle, type, props, key, true);
+  }
+  return { jsx, jsxs };
 }
-function jsxs(type, props, key) {
-  return processElement(type, props, key, true);
+function createJsxDEV(jsx, jsxs) {
+  return function jsxDEV(type, props, key, isStaticChildren, source, self) {
+    const element = (isStaticChildren ? jsxs : jsx)(type, props, key);
+    if (source && element && typeof element === "object" && Object.isExtensible(element)) {
+      element._source = source;
+      element._self = self;
+    }
+    return element;
+  };
 }
 
 export {
   Fragment,
-  jsx,
-  jsxs
+  createJsxFunctions,
+  createJsxDEV
 };

package/dist/chunk-FG5E4NLJ.mjs

@@ -0,0 +1,18 @@
+import {
+  getGlobalDarkMode,
+  getThemeJson
+} from "./chunk-AEVOM2NB.mjs";
+
+// src/nativeBridge.ts
+import { Dimensions, TurboModuleRegistry } from "react-native";
+function resolveStyle(classString, pressed = false) {
+  const KbachModule = TurboModuleRegistry.getEnforcing("KbachModule");
+  const colorScheme = getGlobalDarkMode() ? "dark" : "light";
+  const width = Dimensions.get("window").width;
+  const json = KbachModule.resolveStyle(classString, getThemeJson(), colorScheme, pressed, width);
+  return JSON.parse(json);
+}
+
+export {
+  resolveStyle
+};