@kbach/native 0.1.8 → 0.1.9

package/README.md

@@ -1,8 +1,8 @@
 # @kbach/native
 
-Tailwind-like utility classes for **React Native and Expo**. One package includes everything: the core engine, JSX runtime, Babel plugin for compile-time optimization, and Metro config helper.
+Tailwind-like utility classes for **React Native and Expo**. One package includes everything: the core engine, JSX runtime, Babel preset for compile-time optimization, and Metro config helper.
 
-```
+```jsx
 import { View, Text, TouchableOpacity } from 'react-native';
 import { styled } from '@kbach/native';
 
@@ -31,20 +31,36 @@ export default function Screen() {
 npm install @kbach/native
 ```
 
-That's it. Core engine, Babel plugin, and Metro helpers are bundled — nothing else to install.
+Core engine, Babel preset, and Metro helpers are all bundled — nothing else to install.
 
 ## Setup
 
 ### 1. babel.config.js
 
-```
+One-liner using the helper:
+
+```js
 const { createKbachConfig } = require('@kbach/native');
 module.exports = createKbachConfig();
 ```
 
-If you need to keep an existing Babel config:
+Or written manually (identical to NativeWind's config shape):
 
+```js
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: [
+      ['babel-preset-expo', { jsxImportSource: '@kbach/native' }],
+      '@kbach/native/babel',
+    ],
+  };
+};
 ```
+
+If you need to keep an existing Babel config:
+
+```js
 const { withKbachBabel } = require('@kbach/native');
 
 module.exports = withKbachBabel({
@@ -55,7 +71,7 @@ module.exports = withKbachBabel({
 
 ### 2. Wrap your app
 
-```
+```jsx
 import { ThemeProvider } from '@kbach/native';
 
 export default function App() {
@@ -79,7 +95,7 @@ npx expo start --clear
 
 Works on any React Native component — View, Text, TouchableOpacity, TextInput, and third-party components.
 
-```
+```jsx
 <View className="flex-1 bg-gray-2 dark:bg-gray-11 p-4" />
 <Text className="text-lg font-bold text-gray-10 dark:text-white" />
 <TouchableOpacity className="bg-blue-7 pressed:bg-blue-8 rounded-xl px-6 py-3" />
@@ -89,7 +105,7 @@ Works on any React Native component — View, Text, TouchableOpacity, TextInput,
 
 Pre-style any component. Handles interaction states (pressed, focus, etc.) automatically.
 
-```
+```jsx
 import { styled } from '@kbach/native';
 import { View, Text, TouchableOpacity, TextInput } from 'react-native';
 
@@ -105,11 +121,11 @@ const Input = styled(
 );
 ```
 
-Pass extra classes at use time with the `tw` prop:
+Pass extra classes at use time with the `kb` prop:
 
-```
-<Card tw="mt-4 mb-2">
-  <Title tw="text-3xl">Hello</Title>
+```jsx
+<Card kb="mt-4 mb-2">
+  <Title kb="text-3xl">Hello</Title>
 </Card>
 ```
 
@@ -117,7 +133,7 @@ Pass extra classes at use time with the `tw` prop:
 
 Resolve classes to a style object inside a component. Use this when you need a value for the `style` prop.
 
-```
+```jsx
 import { useStyles } from '@kbach/native';
 import { View, Text } from 'react-native';
 
@@ -137,7 +153,7 @@ function Badge() {
 
 Resolve classes outside a component, for use in StyleSheet.create() or static contexts.
 
-```
+```js
 import { StyleSheet } from 'react-native';
 import { tw } from '@kbach/native';
 
@@ -151,7 +167,7 @@ const styles = StyleSheet.create({
 
 Conditionally join class strings. Falsy values are ignored.
 
-```
+```jsx
 import { cx } from '@kbach/native';
 
 <View className={cx(
@@ -163,7 +179,7 @@ import { cx } from '@kbach/native';
 
 ### useTheme()
 
-```
+```js
 import { useTheme } from '@kbach/native';
 
 const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
@@ -181,7 +197,7 @@ const { mode, resolvedMode, isDark, setMode, toggle } = useTheme();
 
 Drop-in toggle component that works on both web and native.
 
-```
+```jsx
 <ThemeToggle />                                  // button (default)
 <ThemeToggle variant="switch" />                // toggle switch
 <ThemeToggle variant="icon-button" />           // icon button
@@ -194,21 +210,22 @@ Up to 3 modifiers can be chained in any order.
 
 | Modifier | Trigger |
 |---|---|
-| dark: | Dark mode active |
-| light: | Light mode active |
-| pressed: | Touch pressed |
-| focus: | Element focused |
-| active: | Element active |
-| disabled: | Element disabled |
-
-```
+| `dark:` | Dark mode active |
+| `light:` | Light mode active |
+| `hover:` | Mouse hover |
+| `pressed:` | Touch pressed |
+| `focus:` | Element focused |
+| `active:` | Element active |
+| `disabled:` | Element disabled |
+
+```jsx
 <View className="dark:bg-gray-10" />
 <TouchableOpacity className="dark:pressed:bg-indigo-8" />
 ```
 
 ## Arbitrary values
 
-```
+```jsx
 <View className="bg-[#6366f1]" />
 <View className="p-[14px]" />
 <Text className="text-[18px]" />
@@ -218,14 +235,14 @@ Up to 3 modifiers can be chained in any order.
 
 ## Negative values
 
-```
+```jsx
 <View className="-mt-4" />   // marginTop: -16
 <View className="-mx-2" />   // marginHorizontal: -8
 ```
 
 ## Color with opacity
 
-```
+```jsx
 <View className="bg-blue-6/50" />   // 50% opacity
 <View className="bg-gray-10/75" />  // 75% opacity
 ```
@@ -257,7 +274,7 @@ Available families: slate, gray, zinc, neutral, stone, red, orange, amber, yello
 
 ## Configuration
 
-```
+```js
 // kbach.config.js
 module.exports = {
   darkMode: 'attribute', // 'attribute' | 'class' | 'media'
@@ -288,7 +305,7 @@ module.exports = {
 
 Apply at runtime:
 
-```
+```js
 import { updateConfig } from '@kbach/native';
 
 updateConfig({ extend: { theme: { colors: { brand: { 6: '#6366f1' } } } } });

package/dist/index.d.mts

@@ -10,7 +10,7 @@ export * from '@kbach/react';
 interface KbachOptions {
     /** Path to kbach.config.js, relative to project root. Default: 'kbach.config.js' */
     configFile?: string;
-    /** JSX attribute names to transform at build time. Default: ['tw', 'className'] */
+    /** JSX attribute names to transform at build time. Default: ['kb', 'className'] */
     attributes?: string[];
     /** Log transformed class strings to the Metro console. Default: false */
     debug?: boolean;
@@ -36,7 +36,7 @@ interface KbachOptions {
  */
 declare function withKbach(metroConfig: Record<string, any>, _options?: KbachOptions): Record<string, any>;
 /**
- * Add the Kbach plugin to an existing Babel config.
+ * Add the Kbach preset to an existing Babel config.
  * Use this when you have a custom babel.config.js and want to keep it.
  *
  * babel.config.js:
@@ -57,6 +57,19 @@ declare function withKbachBabel(babelConfig: Record<string, any>, options?: Kbac
  * const { createKbachConfig } = require('@kbach/native');
  * module.exports = createKbachConfig();
  * ```
+ *
+ * Or written manually (identical to NativeWind's config shape):
+ * ```js
+ * module.exports = function(api) {
+ *   api.cache(true);
+ *   return {
+ *     presets: [
+ *       ['babel-preset-expo', { jsxImportSource: '@kbach/native' }],
+ *       '@kbach/native/babel',
+ *     ],
+ *   };
+ * };
+ * ```
  */
 declare function createKbachConfig(options?: KbachOptions): Record<string, unknown>;
 

package/dist/index.d.ts

@@ -10,7 +10,7 @@ export * from '@kbach/react';
 interface KbachOptions {
     /** Path to kbach.config.js, relative to project root. Default: 'kbach.config.js' */
     configFile?: string;
-    /** JSX attribute names to transform at build time. Default: ['tw', 'className'] */
+    /** JSX attribute names to transform at build time. Default: ['kb', 'className'] */
     attributes?: string[];
     /** Log transformed class strings to the Metro console. Default: false */
     debug?: boolean;
@@ -36,7 +36,7 @@ interface KbachOptions {
  */
 declare function withKbach(metroConfig: Record<string, any>, _options?: KbachOptions): Record<string, any>;
 /**
- * Add the Kbach plugin to an existing Babel config.
+ * Add the Kbach preset to an existing Babel config.
  * Use this when you have a custom babel.config.js and want to keep it.
  *
  * babel.config.js:
@@ -57,6 +57,19 @@ declare function withKbachBabel(babelConfig: Record<string, any>, options?: Kbac
  * const { createKbachConfig } = require('@kbach/native');
  * module.exports = createKbachConfig();
  * ```
+ *
+ * Or written manually (identical to NativeWind's config shape):
+ * ```js
+ * module.exports = function(api) {
+ *   api.cache(true);
+ *   return {
+ *     presets: [
+ *       ['babel-preset-expo', { jsxImportSource: '@kbach/native' }],
+ *       '@kbach/native/babel',
+ *     ],
+ *   };
+ * };
+ * ```
  */
 declare function createKbachConfig(options?: KbachOptions): Record<string, unknown>;
 

package/dist/index.js

@@ -35,34 +35,29 @@ function withKbach(metroConfig, _options = {}) {
 function withKbachBabel(babelConfig, options = {}) {
   const {
     configFile = "kbach.config.js",
-    attributes = ["tw", "className"],
+    attributes = ["kb", "className"],
     debug = false
   } = options;
-  const pluginEntry = ["babel-plugin-kbach", { configFile, attributes, debug, jsxRuntime: false }];
   const presets = (babelConfig.presets ?? []).map((preset) => {
     const [name, presetOpts = {}] = Array.isArray(preset) ? preset : [preset, {}];
-    if (name === "babel-preset-expo" || name === "@babel/preset-react" || typeof name === "string" && name.includes("react")) {
+    if (typeof name === "string" && (name.includes("babel-preset-expo") || name.includes("preset-react"))) {
       return [name, { ...presetOpts, jsxImportSource: "@kbach/native" }];
     }
     return preset;
   });
   return {
     ...babelConfig,
-    presets,
-    plugins: [pluginEntry, ...babelConfig.plugins ?? []]
+    presets: [...presets, ["@kbach/native/babel", { configFile, attributes, debug }]]
   };
 }
 function createKbachConfig(options = {}) {
   return {
     presets: [
-      ["babel-preset-expo", { jsxImportSource: "@kbach/native" }]
-    ],
-    plugins: [
-      ["babel-plugin-kbach", {
+      ["babel-preset-expo", { jsxImportSource: "@kbach/native" }],
+      ["@kbach/native/babel", {
         configFile: options.configFile ?? "kbach.config.js",
-        attributes: options.attributes ?? ["tw", "className"],
-        debug: options.debug ?? false,
-        jsxRuntime: false
+        attributes: options.attributes ?? ["kb", "className"],
+        debug: options.debug ?? false
       }]
     ]
   };

package/dist/index.mjs

@@ -8,34 +8,29 @@ function withKbach(metroConfig, _options = {}) {
 function withKbachBabel(babelConfig, options = {}) {
   const {
     configFile = "kbach.config.js",
-    attributes = ["tw", "className"],
+    attributes = ["kb", "className"],
     debug = false
   } = options;
-  const pluginEntry = ["babel-plugin-kbach", { configFile, attributes, debug, jsxRuntime: false }];
   const presets = (babelConfig.presets ?? []).map((preset) => {
     const [name, presetOpts = {}] = Array.isArray(preset) ? preset : [preset, {}];
-    if (name === "babel-preset-expo" || name === "@babel/preset-react" || typeof name === "string" && name.includes("react")) {
+    if (typeof name === "string" && (name.includes("babel-preset-expo") || name.includes("preset-react"))) {
       return [name, { ...presetOpts, jsxImportSource: "@kbach/native" }];
     }
     return preset;
   });
   return {
     ...babelConfig,
-    presets,
-    plugins: [pluginEntry, ...babelConfig.plugins ?? []]
+    presets: [...presets, ["@kbach/native/babel", { configFile, attributes, debug }]]
   };
 }
 function createKbachConfig(options = {}) {
   return {
     presets: [
-      ["babel-preset-expo", { jsxImportSource: "@kbach/native" }]
-    ],
-    plugins: [
-      ["babel-plugin-kbach", {
+      ["babel-preset-expo", { jsxImportSource: "@kbach/native" }],
+      ["@kbach/native/babel", {
         configFile: options.configFile ?? "kbach.config.js",
-        attributes: options.attributes ?? ["tw", "className"],
-        debug: options.debug ?? false,
-        jsxRuntime: false
+        attributes: options.attributes ?? ["kb", "className"],
+        debug: options.debug ?? false
       }]
     ]
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kbach/native",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Single-package Kbach install for React Native and Expo — includes core, components, Babel plugin, and Metro config",
   "source": "./src/index.ts",
   "main": "./dist/index.js",
@@ -24,7 +24,9 @@
       "source": "./src/jsx-dev-runtime.ts",
       "import": "./dist/jsx-dev-runtime.mjs",
       "require": "./dist/jsx-dev-runtime.js"
-    }
+    },
+    "./babel-plugin": "./src/babel-plugin/index.js",
+    "./babel": "./src/babel/index.js"
   },
   "scripts": {
     "build": "tsup src/index.ts src/jsx-runtime.ts src/jsx-dev-runtime.ts --format esm,cjs --dts --clean",
@@ -33,9 +35,7 @@
     "lint": "tsc --noEmit"
   },
   "dependencies": {
-    "@kbach/core": "0.1.1",
-    "@kbach/react": "0.1.6",
-    "babel-plugin-kbach": "0.1.2"
+    "@kbach/react": "0.1.9"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",
@@ -53,6 +53,6 @@
   "publishConfig": {
     "access": "public"
   },
-  "files": ["dist"],
-  "keywords": ["react-native", "expo", "tailwind", "css-in-js", "styling", "khmer"]
+  "files": ["dist", "src/babel-plugin", "src/babel"],
+  "keywords": ["react-native", "expo", "tailwind", "css-in-js", "styling", "framework", "frontend", "mobile"]
 }

package/src/babel/index.js

@@ -0,0 +1,30 @@
+'use strict';
+
+/**
+ * @kbach/native/babel — Babel preset (NativeWind-style).
+ *
+ * babel.config.js:
+ * ```js
+ * module.exports = function(api) {
+ *   api.cache(true);
+ *   return {
+ *     presets: [
+ *       ['babel-preset-expo', { jsxImportSource: '@kbach/native' }],
+ *       '@kbach/native/babel',
+ *     ],
+ *   };
+ * };
+ * ```
+ *
+ * Presets run in reverse order, so this preset's plugin runs BEFORE
+ * babel-preset-expo's JSX transform — which is the correct ordering:
+ * kbach renames className/tw attributes first, then the JSX transform
+ * compiles JSX using @kbach/native/jsx-runtime.
+ */
+module.exports = function kbachBabelPreset(api, options = {}) {
+  return {
+    plugins: [
+      [require('../babel-plugin'), options],
+    ],
+  };
+};

package/src/babel-plugin/index.js

@@ -0,0 +1,259 @@
+'use strict';
+
+const path = require('path');
+const fs = require('fs');
+
+// ─── Cross-file resolve cache ─────────────────────────────────────────────────
+// Keyed by classString. Config is process-global so one entry covers all files.
+const _resolveCache = new Map();
+
+// ─── Load core lazily, reloading when the dist changes ───────────────────────
+let _core = null;
+let _coreMtime = 0;
+let _corePath = null;
+let _lastStatMs = 0;
+const STAT_INTERVAL_MS = 500;
+
+function getCore() {
+  const now = Date.now();
+  if (_core && (now - _lastStatMs) < STAT_INTERVAL_MS) return _core;
+
+  try {
+    if (!_corePath) _corePath = require.resolve('@kbach/react');
+    const mtime = fs.statSync(_corePath).mtimeMs;
+    _lastStatMs = now;
+    if (_core && mtime === _coreMtime) return _core;
+    for (const id of Object.keys(require.cache)) {
+      if (id.includes(`${path.sep}@kbach${path.sep}react`) || id.includes(`${path.sep}packages${path.sep}react${path.sep}`)) {
+        delete require.cache[id];
+      }
+    }
+    _core = require('@kbach/react');
+    _coreMtime = mtime;
+    _config = null;
+    _resolveCache.clear(); // config changed — invalidate resolve cache too
+  } catch {
+    if (!_core) _core = require('@kbach/react');
+  }
+  return _core;
+}
+
+// ─── Load user config ─────────────────────────────────────────────────────────
+let _config = null;
+function getUserConfig(configFile) {
+  if (_config) return _config;
+  try {
+    const cfgPath = path.resolve(process.cwd(), configFile);
+    // eslint-disable-next-line import/no-dynamic-require
+    const userCfg = require(cfgPath);
+    const { buildConfig } = getCore();
+    _config = buildConfig(userCfg);
+  } catch {
+    const { getConfig } = getCore();
+    _config = getConfig();
+  }
+  return _config;
+}
+
+// ─── Convert a StyleValue to a Babel AST ObjectExpression ────────────────────
+function styleToAST(t, styles) {
+  if (!styles || typeof styles !== 'object') return t.nullLiteral();
+
+  const props = [];
+  for (const [key, val] of Object.entries(styles)) {
+    if (val === undefined || val === null) continue;
+
+    let valueNode;
+    if (typeof val === 'number') {
+      valueNode = val < 0 ? t.unaryExpression('-', t.numericLiteral(-val)) : t.numericLiteral(val);
+    } else if (typeof val === 'string') {
+      valueNode = t.stringLiteral(val);
+    } else if (typeof val === 'object' && !Array.isArray(val)) {
+      valueNode = styleToAST(t, val);
+    } else if (Array.isArray(val)) {
+      valueNode = t.arrayExpression(val.map(item =>
+        typeof item === 'object' ? styleToAST(t, item) : t.stringLiteral(String(item)),
+      ));
+    } else {
+      valueNode = t.stringLiteral(String(val));
+    }
+
+    props.push(t.objectProperty(t.stringLiteral(key), valueNode));
+  }
+
+  return t.objectExpression(props);
+}
+
+// ─── Convert a ResolvedStyle to a Babel AST ObjectExpression ─────────────────
+function resolvedStyleToAST(t, resolved) {
+  const props = [];
+  for (const [bucketKey, styles] of Object.entries(resolved)) {
+    if (!styles || Object.keys(styles).length === 0) continue;
+    props.push(
+      t.objectProperty(t.stringLiteral(bucketKey), styleToAST(t, styles)),
+    );
+  }
+  return t.objectExpression(props);
+}
+
+// ─── Plugin ───────────────────────────────────────────────────────────────────
+
+module.exports = function kbachBabelPlugin(api, options = {}) {
+  const { types: t } = api;
+
+  const {
+    configFile = 'kbach.config.js',
+    attributes = ['kb', 'className'],
+    debug = false,
+  } = options;
+
+  const SEP = path.sep;
+
+  return {
+    name: 'babel-plugin-kbach',
+
+    // Two-pronged JSX runtime setup (NativeWind-style — plugin is self-sufficient):
+    //
+    // 1. If the project has a React preset (babel-preset-expo, @babel/preset-react):
+    //    it already includes @babel/plugin-transform-react-jsx. We leave that transform
+    //    in place and just inject a @jsxImportSource comment in pre() so the transform
+    //    picks up our runtime. This runs after our pre() and before any other pre() calls.
+    //
+    // 2. If there is NO React preset, we add @babel/plugin-transform-react-jsx ourselves
+    //    (pushed after kbach so kbach's JSXAttribute visitor runs first).
+    manipulateOptions(opts) {
+      const presets = opts.presets || [];
+      const hasReactPreset = presets.some(p => {
+        const name = Array.isArray(p) ? p[0] : p;
+        return (
+          typeof name === 'string' &&
+          (name.includes('babel-preset-expo') || name.includes('preset-react'))
+        );
+      });
+
+      if (hasReactPreset) return; // pre() comment pragma handles it
+
+      // No preset — add the JSX transform plugin directly so JSX files work
+      // without any manual configuration.
+      const plugins = opts.plugins || (opts.plugins = []);
+      const hasJsxTransform = plugins.some(p => {
+        const n = Array.isArray(p) ? p[0] : p;
+        return typeof n === 'string' && n.includes('transform-react-jsx');
+      });
+      if (!hasJsxTransform) {
+        plugins.push([
+          require.resolve('@babel/plugin-transform-react-jsx'),
+          { runtime: 'automatic', importSource: '@kbach/native' },
+        ]);
+      }
+    },
+
+    pre(file) {
+      // Skip node_modules — they have their own JSX runtime configuration
+      const filename = file.opts.filename || '';
+      if (filename.includes(`${SEP}node_modules${SEP}`) && !filename.includes('kbach')) return;
+
+      // Inject @jsxImportSource so @babel/plugin-transform-react-jsx (from a React preset)
+      // uses our runtime. This pre() runs before the preset's pre() calls.
+      const comments = file.ast.comments;
+      if (!Array.isArray(comments)) return;
+      const alreadySet = comments.some(c => /@jsxImportSource|@jsxRuntime/.test(c.value));
+      if (!alreadySet) {
+        comments.unshift({ type: 'CommentLine', value: ' @jsxImportSource @kbach/native' });
+      }
+    },
+
+    visitor: {
+      Program: {
+        enter(programPath, state) {
+          state.kbachDeclarations = new Map();
+        },
+
+        exit(programPath, state) {
+          if (!state.kbachDeclarations || !state.kbachDeclarations.size) return;
+
+          const body = programPath.get('body');
+          const imports = body.filter(p => p.isImportDeclaration());
+          const insertAfterPath = imports.length > 0 ? imports[imports.length - 1] : null;
+
+          const entries = [...state.kbachDeclarations.values()];
+          for (let i = entries.length - 1; i >= 0; i--) {
+            const { uid, astNode } = entries[i];
+            const decl = t.variableDeclaration('const', [t.variableDeclarator(uid, astNode)]);
+            if (insertAfterPath) {
+              insertAfterPath.insertAfter(decl);
+            } else {
+              programPath.unshiftContainer('body', decl);
+            }
+          }
+        },
+      },
+
+      JSXAttribute(nodePath, state) {
+        // Skip third-party node_modules — they won't have kbach className attrs
+        const filename = state.file.opts.filename || '';
+        if (
+          filename.includes(`${SEP}node_modules${SEP}`) &&
+          !filename.includes('kbach')
+        ) return;
+
+        const attrName = nodePath.node.name;
+        const name = t.isJSXIdentifier(attrName) ? attrName.name : null;
+
+        if (!name || !attributes.includes(name)) return;
+
+        const value = nodePath.node.value;
+
+        if (!t.isStringLiteral(value) && !(t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression))) {
+          return;
+        }
+
+        const classString = t.isStringLiteral(value)
+          ? value.value
+          : value.expression.value;
+
+        if (!classString || !classString.trim()) return;
+
+        try {
+          // Use global cache to avoid re-resolving the same class string
+          // across different files in the same build.
+          let resolved;
+          if (_resolveCache.has(classString)) {
+            resolved = _resolveCache.get(classString);
+          } else {
+            const { resolve } = getCore();
+            const config = getUserConfig(configFile);
+            resolved = resolve(classString, config.theme, config.darkMode);
+            _resolveCache.set(classString, resolved);
+          }
+
+          if (debug) {
+            console.log(`[Kbach] Transformed: "${classString}"`);
+          }
+
+          let uid;
+          if (state.kbachDeclarations.has(classString)) {
+            uid = state.kbachDeclarations.get(classString).uid;
+          } else {
+            const astNode = resolvedStyleToAST(t, resolved);
+            uid = nodePath.scope.getProgramParent().generateUidIdentifier('kbach');
+            state.kbachDeclarations.set(classString, { uid, astNode });
+          }
+
+          nodePath.insertAfter(
+            t.jSXAttribute(
+              t.jSXIdentifier('__kbachStyles'),
+              t.jSXExpressionContainer(t.identifier(uid.name)),
+            ),
+          );
+
+          nodePath.node.name = t.jSXIdentifier('__kbachClasses');
+        } catch (err) {
+          if (debug) {
+            console.warn(`[Kbach] Could not transform "${classString}":`, err.message);
+          }
+        }
+      },
+    },
+  };
+};