rnwind 0.0.4 → 0.0.5

package/src/testing/index.ts

@@ -2,7 +2,7 @@
 import type { File as BabelFile } from '@babel/types'
 import { parse } from '@babel/parser'
 import generateImport from '@babel/generator'
-import { existsSync, mkdtempSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
+import { existsSync, mkdtempSync, readdirSync, readFileSync, rmSync, writeFileSync } from 'node:fs'
 import { createRequire } from 'node:module'
 import { tmpdir } from 'node:os'
 import path from 'node:path'
@@ -13,10 +13,16 @@ import type {
   RenderHookOptions,
 } from '@testing-library/react-native'
 import { configureRnwindState, resetRnwindState, transform as metroTransform } from '../metro'
-import { __resetLookupCssState, lookupCss, registerAtoms } from '../runtime/lookup-css'
+import {
+  __resetLookupCssState,
+  registerAtoms,
+  registerBreakpoints,
+  registerSchemeLoader,
+} from '../runtime/lookup-css'
+import { __resetResolveState, registerGradients, registerHaptics, registerMolecules } from '../runtime/resolve'
+import * as rnwindRuntime from '../runtime'
 import type { Insets } from '../runtime/components/rnwind-provider'
-import { RnwindProvider, useRnwind, useR_ } from '../runtime/components/rnwind-provider'
-import { triggerHaptic, useMountHaptic } from '../runtime/haptics'
+import { RnwindProvider } from '../runtime/components/rnwind-provider'
 import type { OnHaptics } from '../core/parser/haptics'
 import type { Scheme } from '../runtime/types'
 
@@ -41,29 +47,6 @@ const DEFAULT_THEME_CSS = `@import 'tailwindcss';
 /** `StyleSheet.create` stub the evaluated bundle calls — identity at test time. */
 const BUNDLE_STYLE_SHEET = { create: <T>(styles: T): T => styles, hairlineWidth: 1 }
 
-/** Stubbed interactive-state hook return matching `useInteract()`. */
-const NOOP_INTERACT = {
-  state: undefined,
-  onPressIn: (): void => undefined,
-  onPressOut: (): void => undefined,
-  onFocus: (): void => undefined,
-  onBlur: (): void => undefined,
-}
-
-/**
- * Identity chain helper matching `chainPress` / `chainFocus`. Returns a
- * single callback that invokes every supplied handler in turn.
- * @param handlers Handlers to chain.
- * @returns Combined callback.
- */
-const NOOP_CHAIN =
-  (...handlers: ReadonlyArray<((...args: unknown[]) => unknown) | undefined>) =>
-  (...args: unknown[]): void => {
-    for (const handler of handlers) {
-      if (typeof handler === 'function') handler(...args)
-    }
-  }
-
 // Synthesize a require rooted at the consumer's cwd so optional peer
 // lookups (`@testing-library/react-native`, `esbuild`) resolve from THEIR
 // node_modules, not rnwind's. A workspace-local rnwind install resolves
@@ -149,28 +132,104 @@ function compileToJs(source: string): string {
 }
 
 /**
- * Evaluate the union `style.js` the ledger wrote during the transform
- * so its `registerAtoms` call lands in the process-global registry.
- * Strips the `react-native` + `rnwind` imports from the source and
- * forwards local bindings into the evaluated closure.
- * @param cacheDir The rnwind cache dir where the ledger writes bundles.
+ * Evaluate one generated registry file (`common.style.js`,
+ * `<variant>.style.js`, or `schemes.js`) so its `registerAtoms` /
+ * `registerBreakpoints` / `registerGradients` / `registerHaptics` /
+ * `registerSchemeLoader` calls land in the process-global registries the
+ * runtime resolver reads. Imports (`'rnwind'`, `'react-native'`, relative
+ * `./common.style`), `require(...)` loaders, and `export {...}` are
+ * stripped — every scheme file is evaluated directly, so lazy loaders are
+ * inert.
+ * @param filePath Absolute path to the generated file.
  */
-function evaluateStyleBundle(cacheDir: string): void {
-  const filePath = path.join(cacheDir, 'style.js')
+function evaluateGeneratedFile(filePath: string): void {
   if (!existsSync(filePath)) return
   const body = readFileSync(filePath, 'utf8')
-    .replaceAll(/import \{ StyleSheet \} from 'react-native'\s*\n/g, '')
-    .replaceAll(/import \{[^}]+\} from 'rnwind'\s*\n/g, '')
-  // Bundle body is generated by rnwind itself — not user-controlled.
+    .replaceAll(/import\s+\{[^}]*\}\s+from\s+['"][^'"]+['"];?\s*\n?/g, '')
+    .replaceAll(/import\s+['"][^'"]+['"];?\s*\n?/g, '')
+    .replaceAll(/export\s+\{[^}]*\}\s*;?\s*\n?/g, '')
+  // Generated body is produced by rnwind itself — not user-controlled.
+  // `require` is neutralised: each variant file is evaluated directly,
+  // so the manifest's lazy `require('./x.style')` loaders are no-ops.
   // eslint-disable-next-line sonarjs/code-eval
-  new Function('StyleSheet', 'registerAtoms', body)(BUNDLE_STYLE_SHEET, registerAtoms)
+  new Function(
+    'StyleSheet',
+    'registerAtoms',
+    'registerMolecules',
+    'registerBreakpoints',
+    'registerGradients',
+    'registerHaptics',
+    'registerSchemeLoader',
+    'require',
+    body,
+  )(
+    BUNDLE_STYLE_SHEET,
+    registerAtoms,
+    registerMolecules,
+    registerBreakpoints,
+    registerGradients,
+    registerHaptics,
+    registerSchemeLoader,
+    () => {},
+  )
+}
+
+/**
+ * Sort comparator that floats `common.style.js` to the front, rest alpha.
+ * @param a
+ * @param b
+ */
+function commonFirst(a: string, b: string): number {
+  if (a === 'common.style.js') return -1
+  if (b === 'common.style.js') return 1
+  return a.localeCompare(b)
+}
+
+/**
+ * Evaluate every generated registry the transform wrote (`common` +
+ * every variant scheme + the manifest) so the runtime resolver sees the
+ * full atom / molecule / gradient / haptic registries — same state a
+ * production bundle would hold once all scheme files load.
+ * @param cacheDir The rnwind cache dir holding the generated files.
+ */
+function evaluateGeneratedRegistries(cacheDir: string): void {
+  if (!existsSync(cacheDir)) return
+  const files = readdirSync(cacheDir).filter((name) => name.endsWith('.style.js'))
+  // common first so variants layer their diffs on top of it.
+  for (const name of files.toSorted(commonFirst)) {
+    evaluateGeneratedFile(path.join(cacheDir, name))
+  }
+  evaluateGeneratedFile(path.join(cacheDir, 'schemes.js'))
+}
+
+/**
+ * Move every `const {…} = __rnwind;` / `const {…} = __reactNative;`
+ * binding line to the top of the source, preserving order, so they
+ * initialise before the transformer's `const View = _rnwWrap(_rnw0)`
+ * wrap declarations reference them. Mirrors ESM import hoisting.
+ * @param source Source with imports already converted to const-destructures.
+ * @returns Source with binding consts hoisted to the front.
+ */
+function hoistBindingConsts(source: string): string {
+  const hoisted: string[] = []
+  const rest: string[] = []
+  for (const line of source.split('\n')) {
+    if (/=\s*__(?:rnwind|reactNative);\s*$/.test(line)) hoisted.push(line)
+    else rest.push(line)
+  }
+  return [...hoisted, ...rest].join('\n')
 }
 
 /**
  * Evaluate the transformer's rewritten source as a standalone module:
- * strip synthetic imports, forward `import ... from 'rnwind'` +
- * `'react-native'` to local bindings, compile JSX via the compiler, and
- * capture the default export.
+ * strip synthetic generated imports, forward `import ... from 'rnwind'`
+ * (incl. the injected `wrap as _rnwWrap`) and `'react-native'` to local
+ * bindings, compile JSX via the compiler, and capture the default export.
+ * Aliased named imports (`{ View as _rnw0 }`) are converted to valid
+ * destructuring (`{ View: _rnw0 }`). The import-derived `const`s are then
+ * hoisted above the body: the transformer injects `const View =
+ * _rnwWrap(_rnw0)` ahead of the (real-ESM-hoisted) `import … as _rnw0`,
+ * so without re-hoisting the binding the eval would hit a TDZ on `_rnw0`.
  * @param transformedSource Post-transformer source.
  * @param reactNative `react-native` namespace bindings to forward.
  * @returns The default-exported component.
@@ -181,25 +240,15 @@ function evaluateRewrittenModule(
 ): React.ComponentType<Record<string, unknown>> {
   const prepared = transformedSource
     .replaceAll(/import\s+["']rnwind\/__generated\/[^"']+["'];?\s*\n?/g, '')
-    .replaceAll(/import\s+\{([^}]+)\}\s+from\s+["']rnwind["'];?/g, 'const {$1} = __rnwind;')
-    .replaceAll(/import\s+\{([^}]+)\}\s+from\s+["']react-native["'];?/g, 'const {$1} = __reactNative;')
+    .replaceAll(/import\s+\{([^}]+)\}\s+from\s+["']rnwind["'];?/g, (_m, spec: string) => `const {${spec.replaceAll(/\bas\b/g, ':')}} = __rnwind;`)
+    .replaceAll(/import\s+\{([^}]+)\}\s+from\s+["']react-native["'];?/g, (_m, spec: string) => `const {${spec.replaceAll(/\bas\b/g, ':')}} = __reactNative;`)
     .replace(/export\s+default\s+/, 'module.exports.default = ')
 
-  const compiled = compileToJs(prepared)
-  const rnwindEnv = {
-    lookupCss,
-    useRnwind,
-    useR_,
-    useMountHaptic,
-    triggerHaptic,
-    useInteract: () => NOOP_INTERACT,
-    chainPress: NOOP_CHAIN,
-    chainFocus: NOOP_CHAIN,
-  }
+  const compiled = compileToJs(hoistBindingConsts(prepared))
   const moduleObject: { exports: { default?: React.ComponentType<Record<string, unknown>> } } = { exports: {} }
   // Compiled source originates from rnwind's own transformer + the JSX compiler.
   // eslint-disable-next-line sonarjs/code-eval
-  new Function('React', '__rnwind', '__reactNative', 'module', compiled)(React, rnwindEnv, reactNative, moduleObject)
+  new Function('React', '__rnwind', '__reactNative', 'module', compiled)(React, rnwindRuntime, reactNative, moduleObject)
   if (!moduleObject.exports.default) {
     throw new Error('rnwind/testing: evaluated module did not export a default component.')
   }
@@ -287,11 +336,12 @@ async function bootstrapRnwindRuntime(options: { themeCss?: string; source?: str
     const ast: BabelFile = parse(options.source, { sourceType: 'module', plugins: ['typescript', 'jsx'] })
     const result = await metroTransform({ filename, src: options.source, options: { projectRoot }, ast })
     transformedSource = generate(result.ast).code
-    evaluateStyleBundle(cacheDir)
+    evaluateGeneratedRegistries(cacheDir)
   }
 
   const cleanup = (): void => {
     __resetLookupCssState()
+    __resetResolveState()
     resetRnwindState()
     if (existsSync(projectRoot)) rmSync(projectRoot, { recursive: true, force: true })
   }

package/lib/cjs/core/parser/text-truncate.cjs

@@ -1,78 +0,0 @@
-'use strict';
-
-/**
- * Text-truncate atom detector.
- *
- * React Native's `<Text>` exposes two props that cover every case
- * Tailwind's text-truncation utilities express:
- *
- *   numberOfLines   — clamp after N lines (1 for single-line ellipsis)
- *   ellipsizeMode   — 'tail' (ellipsis) or 'clip' at the truncation point
- *
- * rnwind treats the Tailwind classes as **metadata**: the transformer
- * strips the truncate atoms from the JSX site's className and emits
- * `numberOfLines={N}` / `ellipsizeMode="tail"` props on the element.
- *
- * Covered atoms:
- *   truncate              → { numberOfLines: 1, ellipsizeMode: 'tail' }
- *   text-ellipsis         → { ellipsizeMode: 'tail' }
- *   text-clip             → { ellipsizeMode: 'clip' }
- *   line-clamp-<N>        → { numberOfLines: <N> }
- *   line-clamp-none       → { numberOfLines: 0 }   (reset — overrides prior)
- *
- * Detection is pure name matching — no CSS inspection — because every
- * relevant piece of data lives in the class name itself.
- */
-/** Regex matching `line-clamp-<N>` with a positive-integer N. */
-const LINE_CLAMP_RE = /^line-clamp-(\d+)$/;
-/** Regex matching Tailwind v4's `line-clamp-[<value>]` arbitrary form. */
-const LINE_CLAMP_ARBITRARY_RE = /^line-clamp-\[([^\]]+)\]$/;
-/**
- * Inspect one class-name token and return the text-truncate metadata it
- * contributes, or `null` when the atom isn't a truncate utility.
- * @param atom Single class-name token (no variant prefix).
- * @returns The atom's contribution, or null.
- */
-function detectTextTruncate(atom) {
-    if (atom === 'truncate')
-        return { numberOfLines: 1, ellipsizeMode: 'tail' };
-    if (atom === 'text-ellipsis')
-        return { ellipsizeMode: 'tail' };
-    if (atom === 'text-clip')
-        return { ellipsizeMode: 'clip' };
-    if (atom === 'line-clamp-none')
-        return { numberOfLines: 0 };
-    const numeric = LINE_CLAMP_RE.exec(atom);
-    if (numeric)
-        return { numberOfLines: Number(numeric[1]) };
-    const arbitrary = LINE_CLAMP_ARBITRARY_RE.exec(atom);
-    if (arbitrary) {
-        const n = Number.parseInt(arbitrary[1], 10);
-        if (Number.isFinite(n) && n >= 0)
-            return { numberOfLines: n };
-    }
-    return null;
-}
-/**
- * Fast pre-check — returns true when ANY atom in the list could be a
- * truncate utility, false when none can. Lets callers skip the
- * allocation of the merge pass for the common "no truncate" case.
- * @param atoms Tokenised atom list from a literal className.
- * @returns Whether to run the full per-atom detection.
- */
-function mayContainTextTruncate(atoms) {
-    for (const atom of atoms) {
-        if (atom === 'truncate' ||
-            atom === 'text-ellipsis' ||
-            atom === 'text-clip' ||
-            atom === 'line-clamp-none' ||
-            atom.startsWith('line-clamp-')) {
-            return true;
-        }
-    }
-    return false;
-}
-
-exports.detectTextTruncate = detectTextTruncate;
-exports.mayContainTextTruncate = mayContainTextTruncate;
-//# sourceMappingURL=text-truncate.cjs.map

package/lib/cjs/core/parser/text-truncate.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"text-truncate.cjs","sources":["../../../../../src/core/parser/text-truncate.ts"],"sourcesContent":["/**\n * Text-truncate atom detector.\n *\n * React Native's `<Text>` exposes two props that cover every case\n * Tailwind's text-truncation utilities express:\n *\n *   numberOfLines   — clamp after N lines (1 for single-line ellipsis)\n *   ellipsizeMode   — 'tail' (ellipsis) or 'clip' at the truncation point\n *\n * rnwind treats the Tailwind classes as **metadata**: the transformer\n * strips the truncate atoms from the JSX site's className and emits\n * `numberOfLines={N}` / `ellipsizeMode=\"tail\"` props on the element.\n *\n * Covered atoms:\n *   truncate              → { numberOfLines: 1, ellipsizeMode: 'tail' }\n *   text-ellipsis         → { ellipsizeMode: 'tail' }\n *   text-clip             → { ellipsizeMode: 'clip' }\n *   line-clamp-<N>        → { numberOfLines: <N> }\n *   line-clamp-none       → { numberOfLines: 0 }   (reset — overrides prior)\n *\n * Detection is pure name matching — no CSS inspection — because every\n * relevant piece of data lives in the class name itself.\n */\n\n/** Text-truncate metadata produced by a single atom. */\nexport interface TextTruncateInfo {\n  readonly numberOfLines?: number\n  readonly ellipsizeMode?: 'tail' | 'clip'\n}\n\n/** Regex matching `line-clamp-<N>` with a positive-integer N. */\nconst LINE_CLAMP_RE = /^line-clamp-(\\d+)$/\n/** Regex matching Tailwind v4's `line-clamp-[<value>]` arbitrary form. */\nconst LINE_CLAMP_ARBITRARY_RE = /^line-clamp-\\[([^\\]]+)\\]$/\n\n/**\n * Inspect one class-name token and return the text-truncate metadata it\n * contributes, or `null` when the atom isn't a truncate utility.\n * @param atom Single class-name token (no variant prefix).\n * @returns The atom's contribution, or null.\n */\nfunction detectTextTruncate(atom: string): TextTruncateInfo | null {\n  if (atom === 'truncate') return { numberOfLines: 1, ellipsizeMode: 'tail' }\n  if (atom === 'text-ellipsis') return { ellipsizeMode: 'tail' }\n  if (atom === 'text-clip') return { ellipsizeMode: 'clip' }\n  if (atom === 'line-clamp-none') return { numberOfLines: 0 }\n  const numeric = LINE_CLAMP_RE.exec(atom)\n  if (numeric) return { numberOfLines: Number(numeric[1]) }\n  const arbitrary = LINE_CLAMP_ARBITRARY_RE.exec(atom)\n  if (arbitrary) {\n    const n = Number.parseInt(arbitrary[1]!, 10)\n    if (Number.isFinite(n) && n >= 0) return { numberOfLines: n }\n  }\n  return null\n}\n\n/**\n * Fast pre-check — returns true when ANY atom in the list could be a\n * truncate utility, false when none can. Lets callers skip the\n * allocation of the merge pass for the common \"no truncate\" case.\n * @param atoms Tokenised atom list from a literal className.\n * @returns Whether to run the full per-atom detection.\n */\nfunction mayContainTextTruncate(atoms: readonly string[]): boolean {\n  for (const atom of atoms) {\n    if (\n      atom === 'truncate' ||\n      atom === 'text-ellipsis' ||\n      atom === 'text-clip' ||\n      atom === 'line-clamp-none' ||\n      atom.startsWith('line-clamp-')\n    ) {\n      return true\n    }\n  }\n  return false\n}\n\nexport { detectTextTruncate, mayContainTextTruncate }\n"],"names":[],"mappings":";;AAAA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AAQH;AACA,MAAM,aAAa,GAAG,oBAAoB;AAC1C;AACA,MAAM,uBAAuB,GAAG,2BAA2B;AAE3D;;;;;AAKG;AACH,SAAS,kBAAkB,CAAC,IAAY,EAAA;IACtC,IAAI,IAAI,KAAK,UAAU;QAAE,OAAO,EAAE,aAAa,EAAE,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE;IAC3E,IAAI,IAAI,KAAK,eAAe;AAAE,QAAA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE;IAC9D,IAAI,IAAI,KAAK,WAAW;AAAE,QAAA,OAAO,EAAE,aAAa,EAAE,MAAM,EAAE;IAC1D,IAAI,IAAI,KAAK,iBAAiB;AAAE,QAAA,OAAO,EAAE,aAAa,EAAE,CAAC,EAAE;IAC3D,MAAM,OAAO,GAAG,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AACxC,IAAA,IAAI,OAAO;QAAE,OAAO,EAAE,aAAa,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE;IACzD,MAAM,SAAS,GAAG,uBAAuB,CAAC,IAAI,CAAC,IAAI,CAAC;IACpD,IAAI,SAAS,EAAE;AACb,QAAA,MAAM,CAAC,GAAG,MAAM,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAE,EAAE,EAAE,CAAC;QAC5C,IAAI,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC;AAAE,YAAA,OAAO,EAAE,aAAa,EAAE,CAAC,EAAE;IAC/D;AACA,IAAA,OAAO,IAAI;AACb;AAEA;;;;;;AAMG;AACH,SAAS,sBAAsB,CAAC,KAAwB,EAAA;AACtD,IAAA,KAAK,MAAM,IAAI,IAAI,KAAK,EAAE;QACxB,IACE,IAAI,KAAK,UAAU;AACnB,YAAA,IAAI,KAAK,eAAe;AACxB,YAAA,IAAI,KAAK,WAAW;AACpB,YAAA,IAAI,KAAK,iBAAiB;AAC1B,YAAA,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,EAC9B;AACA,YAAA,OAAO,IAAI;QACb;IACF;AACA,IAAA,OAAO,KAAK;AACd;;;;;"}