@kbach/react-native 1.0.0-beta.2 → 1.0.0-beta.21

package/src/babel-plugin.js

@@ -1,5 +1,9 @@
 'use strict';
 
+const path = require('path');
+const fs = require('fs');
+const template = require('@babel/template').default;
+
 /**
  * Injects a per-file `@jsxImportSource @kbach/react-native` pragma comment
  * so Metro's JSX transform routes className resolution through
@@ -19,9 +23,67 @@
  * Deliberately NOT porting old-kbach's build-time class-resolution half
  * (the __kbachStyles fast path) — resolution happens at the (already
  * synchronous) native-bridge call inside the jsx-runtime instead (see
- * nativeBridge.ts), so this plugin's only job is the pragma injection.
+ * nativeBridge.ts), so this plugin's only job is the pragma injection —
+ * PLUS one more, added later: auto-applying `kbach.config.js` if one
+ * exists (see `getConfigStatement`'s own doc comment), so a project never
+ * needs its own explicit `applyKbachConfig(kbachConfig)` call at all. That
+ * addition deliberately still stops short of old-kbach's own version of
+ * this (an mtime-polling live-reload of the config, re-checked on every
+ * file) — a Babel-plugin-level change needs a dev-server restart to take
+ * effect either way, so a one-time check per (root, process) pair is
+ * enough, and much simpler to reason about.
+ */
+
+// Keyed by the root directory checked — undefined = not checked yet for
+// that root, null = checked, no kbach.config.js found there. A Babel/Metro
+// worker process transforms many files over its lifetime — this makes the
+// existsSync + template-build work happen ONCE per root, not on every
+// single file `pre()` runs for.
+const _configStatementCache = new Map();
+
+/**
+ * Builds the (uncompiled) AST statement that applies `kbach.config.js`,
+ * cached per `root` after the first call — `null` if no such file exists
+ * there. `root` defaults to `process.cwd()` (how `metro start`/`expo
+ * start` are conventionally invoked) at the plugin's own call site below;
+ * pass `{ configRoot: '...' }` as this plugin's Babel options if your
+ * `kbach.config.js` lives somewhere else (a monorepo where Metro's actual
+ * working directory isn't the app's own root, for instance).
+ *
+ * The injected statement is a plain `require(...).applyKbachConfig(require(...))`
+ * — no try/catch around it. `kbach.config.js`'s own path is only ever
+ * baked in here after `existsSync` already confirmed it exists, so the
+ * only way this could still throw is a genuine bug in that file (a syntax
+ * error, a bad nested require) — letting that surface as a real, visible
+ * Metro bundling error is far better than silently swallowing it: a
+ * developer's real customization would otherwise go missing with zero
+ * indication why, exactly the kind of headache a good default should avoid.
+ *
+ * `@babel/template` builds this from a plain string with the absolute path
+ * JSON-escaped directly into it (correct on Windows too, backslashes and
+ * all) — simpler than building the equivalent `@babel/types` node graph by
+ * hand for one straightforward statement.
  */
-module.exports = function kbachReactNativeBabelPlugin() {
+function getConfigStatement(root) {
+  if (_configStatementCache.has(root)) return _configStatementCache.get(root);
+
+  const configPath = path.join(root, 'kbach.config.js');
+  if (!fs.existsSync(configPath)) {
+    _configStatementCache.set(root, null);
+    return null;
+  }
+
+  const buildStatement = template(
+    `require('@kbach/react-native').applyKbachConfig(require(${JSON.stringify(configPath)}));`,
+  );
+  const statement = buildStatement();
+  _configStatementCache.set(root, statement);
+  return statement;
+}
+
+module.exports = function kbachReactNativeBabelPlugin(_babel, options) {
+  const configRoot = (options && options.configRoot) || process.cwd();
+
   return {
     name: 'kbach-react-native',
     pre(file) {
@@ -33,7 +95,17 @@ module.exports = function kbachReactNativeBabelPlugin() {
       if (!alreadySet) {
         comments.unshift({ type: 'CommentLine', value: ' @jsxImportSource @kbach/react-native' });
       }
+
+      const configStatement = getConfigStatement(configRoot);
+      if (configStatement) {
+        file.ast.program.body.unshift(configStatement);
+      }
     },
     visitor: {},
   };
 };
+
+/** Exported for tests only — clears the per-root config-file cache between test cases. */
+module.exports._resetForTests = function resetForTests() {
+  _configStatementCache.clear();
+};

package/dist/chunk-SVMYVXY6.mjs

@@ -1,44 +0,0 @@
-import {
-  resolveStyle
-} from "./chunk-YHF3QLRL.mjs";
-
-// src/jsx-runtime.tsx
-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) {
-  const resolved = resolveStyle(classStrRaw, pressed);
-  if (userStyle === void 0) {
-    return resolved;
-  }
-  if (typeof userStyle === "function") {
-    return [resolved, userStyle({ pressed })];
-  }
-  return [resolved, userStyle];
-}
-function processElement(type, rawProps, key, isStaticChildren) {
-  if (type === null || typeof type === "symbol" || !rawProps) {
-    return makeElement(isStaticChildren, type, rawProps ?? {}, key);
-  }
-  const { className: classStrRaw, style: userStyle, ...rest } = rawProps;
-  if (typeof classStrRaw !== "string") {
-    return makeElement(isStaticChildren, type, rawProps, key);
-  }
-  const finalStyle = type === Pressable ? (state) => resolvedStyleFor(classStrRaw, userStyle, state.pressed) : resolvedStyleFor(classStrRaw, userStyle, false);
-  return makeElement(isStaticChildren, type, { ...rest, style: finalStyle }, key);
-}
-function jsx(type, props, key) {
-  return processElement(type, props, key, false);
-}
-function jsxs(type, props, key) {
-  return processElement(type, props, key, true);
-}
-
-export {
-  Fragment,
-  jsx,
-  jsxs
-};

package/dist/index.d.mts

@@ -1,148 +0,0 @@
-import * as react from 'react';
-import { ReactNode } from 'react';
-
-interface ThemeConfig {
-    /** Plain hex only, this pass — e.g. "blue-6" -> "#2563eb" */
-    colors: Record<string, string>;
-    spacing: Record<string, number>;
-    screens: Record<string, number>;
-    darkMode: 'attribute' | 'class' | 'media';
-}
-declare const defaultTheme: ThemeConfig;
-declare function setTheme(theme: ThemeConfig): void;
-declare function getTheme(): ThemeConfig;
-
-interface StyleObject {
-    [key: string]: string | number;
-}
-/**
- * Calls the Rust engine via the KbachModule TurboModule (see
- * apps/native-sandbox/android/.../KbachModule.kt and
- * packages/core-engine/src/resolve_style.rs) and returns a plain style
- * object ready for RN's `style` prop. Synchronous — no async init step,
- * unlike the web/WASM path, since JSI-backed TurboModule methods are
- * available as soon as the module is loaded.
- *
- * Reads `getGlobalDarkMode()` (darkModeStore.ts) fresh on every call (no
- * caching) so `dark:` resolves correctly whenever this runs. That store —
- * not a direct `Appearance.getColorScheme()` read, which this function
- * used prior to `<ThemeProvider>` support — is what makes an explicit
- * `setGlobalThemeMode('dark')`/`toggle()` override actually affect
- * rendering; the store itself falls back to tracking `Appearance` live
- * whenever the mode is `'system'` (its own default), so nothing regresses
- * for apps that never touch the override API at all. This function itself
- * has no subscription of its own, so nothing re-renders just because the
- * store's value changed — call `useGlobalDarkMode()` (or consume
- * `useTheme()`'s `isDark`) somewhere in the tree for that, NOT React
- * Native's own `useColorScheme()`, which only reflects the raw OS setting
- * and would miss an explicit override entirely.
- *
- * Phase 11 originally shipped with live in-place theme switching unverified
- * (a `uiMode` toggle triggered a re-render but `Appearance.getColorScheme()`
- * kept returning a stale value). Root-caused in Phase 12 while debugging an
- * unrelated `active:` failure: `apps/native-sandbox` has its own separate
- * `node_modules/react-native` (excluded from the npm workspace since Phase
- * 5), while `packages/react-native` resolved `react-native` hierarchically
- * up to a *different* copy at the repo root — two physical module
- * instances, so a `useColorScheme()` subscription and an
- * `Appearance.getColorScheme()` read were silently talking to two separate
- * copies of the Appearance module. Fixed by forcing a single instance via
- * `resolver.resolveRequest` in apps/native-sandbox/metro.config.js; live
- * theme switching (and `active:`, the bug that surfaced this) both verified
- * working after the fix — see Phase 12. Still relevant here: darkModeStore.ts
- * itself calls `Appearance.addChangeListener`, so the same dual-instance
- * failure mode would silently break the 'system' fallback path too if that
- * metro.config.js fix ever regressed.
- *
- * `pressed` gates the `active:` modifier — unlike `colorScheme`, there's no
- * system-level getter for "is this element currently pressed"; only RN's
- * `Pressable` ever knows this, so it's passed in directly by the caller
- * (jsx-runtime, from Pressable's own style-function callback) rather than
- * queried here. Defaults to `false` for every other element type.
- */
-declare function resolveStyle(classString: string, pressed?: boolean): StyleObject;
-
-/**
- * Native port of @kbach/react's darkModeStore.ts — same architecture (a
- * single module-level store is the real source of truth;
- * ThemeProvider/useTheme are a thin, OPTIONAL wrapper around it; every
- * function here works standalone with no provider mounted anywhere), with
- * two real platform differences from the web version:
- *
- * 1. No persistence. There's no React-Native-builtin equivalent of
- *    localStorage — adding one would mean forcing a real native dependency
- *    (e.g. @react-native-async-storage/async-storage) on every consumer,
- *    even ones that don't want it. The mode always starts at 'system' on a
- *    fresh app launch. If you want persistence, read your own storage at
- *    startup (before your first render) and call setGlobalThemeMode() with
- *    the result — same "seed once, no built-in write-back" shape as
- *    seedDefaultMode() below, just driven by your own storage instead of
- *    one this package picks for you.
- * 2. No DOM to "apply" the resolved mode to. On web, applyToDom() flips a
- *    class/attribute the generated CSS's `dark:` selectors match against.
- *    On native there's no CSS at all — nativeBridge.ts's resolveStyle()
- *    reads getGlobalDarkMode() directly on every call instead of querying
- *    Appearance.getColorScheme() itself, which is what actually makes an
- *    explicit override affect rendering (previously that function always
- *    read the raw OS setting, so it had no way to reflect a user choice —
- *    see nativeBridge.ts's own comment on this for why that's the one
- *    genuinely fixed bug this change introduces, not just a new feature).
- */
-type ThemeMode = 'light' | 'dark' | 'system';
-declare function getGlobalDarkMode(): boolean;
-declare function getGlobalThemeMode(): ThemeMode;
-/** Explicit user choice — takes priority over any later `<ThemeProvider defaultMode>` seed (see `seedDefaultMode` below). Not persisted; see this module's own doc comment. */
-declare function setGlobalThemeMode(nextMode: ThemeMode): void;
-declare function toggleGlobalDarkMode(): void;
-declare function subscribeGlobalDarkMode(listener: () => void): () => void;
-
-/**
- * Reactive read of the global dark-mode store — works with or without a
- * `<ThemeProvider>` mounted anywhere in the tree, since it subscribes to
- * `darkModeStore.ts` directly. No server-snapshot argument (unlike
- * @kbach/react's web version) — React Native has no SSR concept at all,
- * so there's no third argument for `useSyncExternalStore` to need.
- */
-declare function useGlobalDarkMode(): boolean;
-
-interface ThemeProviderProps {
-    children: ReactNode;
-    /**
-     * Applied once, on this provider's first mount, but ONLY if nothing has
-     * made an explicit mode choice yet (see
-     * `darkModeStore.ts::seedDefaultMode`) — an explicit prior choice always
-     * wins over a component's own default. Unlike @kbach/react's web
-     * version, there's no persisted value to check here — see
-     * darkModeStore.ts's own doc comment on why this package doesn't persist
-     * the mode across app launches.
-     */
-    defaultMode?: ThemeMode;
-}
-/**
- * Native port of @kbach/react's `ThemeProvider` — a thin, OPTIONAL React
- * Context wrapper around `darkModeStore.ts`'s single global store, not the
- * source of truth itself. Because the store is global, MULTIPLE mounted
- * providers share the exact same `mode`/`isDark` state rather than each
- * getting their own scoped value — mounting more than one is very likely a
- * mistake (each fighting over the same state via a different
- * `defaultMode`), so this warns once in dev, matching the web version's
- * identical guard.
- */
-declare function ThemeProvider({ children, defaultMode }: ThemeProviderProps): react.JSX.Element;
-
-interface ThemeContextValue {
-    mode: ThemeMode;
-    isDark: boolean;
-    setMode: (mode: ThemeMode) => void;
-    toggle: () => void;
-}
-/**
- * Requires a `<ThemeProvider>` ancestor — throws otherwise, since a
- * component that destructures `{ mode, setMode }` genuinely needs Context
- * (unlike a component that just wants the dark/light boolean, which should
- * reach for `useGlobalDarkMode()` instead and never needs a provider at
- * all).
- */
-declare function useTheme(): ThemeContextValue;
-
-export { type StyleObject, type ThemeConfig, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, defaultTheme, getGlobalDarkMode, getGlobalThemeMode, getTheme, resolveStyle, setGlobalThemeMode, setTheme, subscribeGlobalDarkMode, toggleGlobalDarkMode, useGlobalDarkMode, useTheme };

package/dist/index.mjs

@@ -1,80 +0,0 @@
-import {
-  defaultTheme,
-  getGlobalDarkMode,
-  getGlobalThemeMode,
-  getTheme,
-  resolveStyle,
-  seedDefaultMode,
-  setGlobalThemeMode,
-  setTheme,
-  subscribeGlobalDarkMode,
-  toggleGlobalDarkMode
-} from "./chunk-YHF3QLRL.mjs";
-
-// src/useGlobalDarkMode.ts
-import { useSyncExternalStore } from "react";
-function useGlobalDarkMode() {
-  return useSyncExternalStore(subscribeGlobalDarkMode, getGlobalDarkMode);
-}
-
-// src/ThemeProvider.tsx
-import { useEffect, useMemo, useRef, useSyncExternalStore as useSyncExternalStore2 } from "react";
-
-// 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 { 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 {
-  ThemeProvider,
-  defaultTheme,
-  getGlobalDarkMode,
-  getGlobalThemeMode,
-  getTheme,
-  resolveStyle,
-  setGlobalThemeMode,
-  setTheme,
-  subscribeGlobalDarkMode,
-  toggleGlobalDarkMode,
-  useGlobalDarkMode,
-  useTheme
-};

package/dist/jsx-dev-runtime.d.mts

@@ -1,19 +0,0 @@
-import { ReactElement } from 'react';
-export { Fragment } from 'react';
-
-/**
- * @kbach/react-native/jsx-dev-runtime
- *
- * Development variant — Metro calls jsxDEV instead of jsx/jsxs in dev
- * builds. Same pattern as @kbach/react/jsx-dev-runtime (Phase 3): reuses
- * jsx/jsxs for the actual interception, then patches _source/_self onto
- * the result so React DevTools shows the original file/line.
- */
-
-declare function jsxDEV(type: unknown, props: Record<string, unknown> | null, key?: string, isStaticChildren?: boolean, source?: {
-    fileName: string;
-    lineNumber: number;
-    columnNumber: number;
-}, self?: unknown): ReactElement;
-
-export { jsxDEV };

package/dist/jsx-dev-runtime.mjs

@@ -1,20 +0,0 @@
-import {
-  Fragment,
-  jsx,
-  jsxs
-} from "./chunk-SVMYVXY6.mjs";
-import "./chunk-YHF3QLRL.mjs";
-
-// src/jsx-dev-runtime.tsx
-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,
-  jsxDEV
-};

package/dist/jsx-runtime.d.mts

@@ -1,27 +0,0 @@
-import { ReactElement } from 'react';
-export { Fragment, JSX } from 'react';
-
-/**
- * @kbach/react-native/jsx-runtime
- *
- * Drop-in replacement for react/jsx-runtime — same interception shape as
- * @kbach/react/jsx-runtime (Phase 3), but the resolved value becomes the
- * `style` prop instead of `className`: View/Text have no `className` prop
- * at all. Covers layout, color, spacing, border, typography, dark:, and
- * active: (Pressable only) — see nativeBridge.ts / resolve_style.rs for
- * exactly what's resolved; every other modifier (hover:/responsive/...)
- * parses but isn't applied yet.
- *
- * `active:` needs different handling from every other modifier: whether an
- * element is "pressed" isn't a value that can be read once and reused like
- * `dark:`'s color scheme — only RN's `Pressable` ever knows it, and only
- * via a style FUNCTION it calls on every press/release
- * (`style={({pressed}) => ...}`). So for `type === Pressable` specifically,
- * `style` is built as a function instead of a static value; every other
- * element type is completely unaffected by this — same code path as before.
- */
-
-declare function jsx(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
-declare function jsxs(type: unknown, props: Record<string, unknown> | null, key?: string): ReactElement;
-
-export { jsx, jsxs };