rnwind 0.0.2 → 0.0.3

package/lib/esm/metro/transform-ast.mjs

@@ -83,6 +83,159 @@ const NON_INTERACTIVE_HOST_TAGS = new Set([
  * on top, never replacing this.
  */
 const DEFAULT_CLASSNAME_PREFIXES = ['contentContainer'];
+/**
+ * Module specifiers whose JSX exports are "host-like" — they consume
+ * `style` directly (and own no opaque component logic that depends on
+ * receiving the raw `className` string). For tags imported from these
+ * sources the transformer rewrites `className="…"` → `style={lookupCss(…)}`
+ * at build time, so the runtime cost is zero.
+ *
+ * For tags from ANY other source the transformer leaves `className`
+ * alone — the importing component receives the raw string and decides
+ * what to do with it (forward to an inner host, reshape, route a slice
+ * to `contentContainerStyle`, …). This is what makes patterns like
+ * `<MyButton className="px-4 bg-primary" />` work without rnwind
+ * stealing the prop before the component sees it.
+ *
+ * Users extend the list via `withRnwindConfig`'s `hostSources` option.
+ */
+const DEFAULT_HOST_SOURCES = [
+    'react-native',
+    'react-native-reanimated',
+    'react-native-svg',
+    'react-native-gesture-handler',
+    'react-native-safe-area-context',
+    'expo-linear-gradient',
+    'expo-image',
+    'expo-blur',
+    'expo-symbols',
+    '@shopify/flash-list',
+    '@shopify/react-native-skia',
+    'lottie-react-native',
+];
+/**
+ * Whether a JSX tag name is lowercase. Lowercase tags don't appear in
+ * native React Native userland — but if one shows up (web target via
+ * `react-native-web`, mdx, etc.) treat it as a host so the rewrite
+ * engages instead of silently dropping the className.
+ * @param name JSX tag identifier text.
+ * @returns True for ASCII-lowercase first character.
+ */
+function isLowercaseTag(name) {
+    const code = name.codePointAt(0);
+    return code !== undefined && code >= 97 && code <= 122;
+}
+/**
+ * Walk a JSX opening element's tag name node into a dotted string
+ * (`Animated.View`, `Foo.Bar.Baz`). Returns `null` for namespaced names
+ * (`<svg:rect>` — invalid in RN; we skip them).
+ * @param name JSXOpeningElement name node.
+ * @returns Dotted tag text, or null.
+ */
+function jsxTagText(name) {
+    if (t.isJSXIdentifier(name))
+        return name.name;
+    if (t.isJSXMemberExpression(name)) {
+        const left = jsxTagText(name.object);
+        return left ? `${left}.${name.property.name}` : null;
+    }
+    return null;
+}
+/**
+ * Leftmost identifier of a (possibly dotted) tag — used to look up its import source.
+ * @param tagText
+ */
+function leftmostIdentifier(tagText) {
+    const dot = tagText.indexOf('.');
+    return dot === -1 ? tagText : tagText.slice(0, dot);
+}
+/**
+ * Build the per-file host lookup. Walks every `import` declaration once
+ * to map every locally-bound name to its source module. A JSX tag is a
+ * host when:
+ *  1. its full text matches an entry in `extraHostComponents` (verbatim),
+ *  2. its leftmost identifier was imported from a `hostSources` module,
+ *  3. it's a lowercase tag (web targets, defensive).
+ *
+ * Anything else is custom and the transformer leaves its className alone.
+ * @param ast File AST.
+ * @param extraHostSources User-supplied additional host module specifiers.
+ * @param extraHostComponents User-supplied additional host component names.
+ * @returns Lookup callback.
+ */
+function buildHostLookup(ast, extraHostSources, extraHostComponents) {
+    const importSourceByLocal = new Map();
+    for (const node of ast.program.body) {
+        if (!t.isImportDeclaration(node))
+            continue;
+        const source = node.source.value;
+        for (const spec of node.specifiers) {
+            if (t.isImportDefaultSpecifier(spec) || t.isImportSpecifier(spec) || t.isImportNamespaceSpecifier(spec)) {
+                importSourceByLocal.set(spec.local.name, source);
+            }
+        }
+    }
+    // Recognise module-local host aliases — common pattern in React Native:
+    //   const AnimatedTextInput = Animated.createAnimatedComponent(TextInput)
+    //   const Animated = createAnimatedComponent(View)
+    // The local binding wraps a host underneath so its className must still
+    // be rewritten. Without this every `<AnimatedTextInput className="…" />`
+    // site looked custom and the className silently dropped.
+    const localHostAliases = collectCreateAnimatedComponentAliases(ast);
+    const hostSources = new Set([...DEFAULT_HOST_SOURCES, ...(extraHostSources ?? [])]);
+    const hostComponents = new Set(extraHostComponents);
+    return (tagText) => {
+        if (isLowercaseTag(tagText))
+            return true;
+        if (hostComponents.has(tagText))
+            return true;
+        const left = leftmostIdentifier(tagText);
+        if (localHostAliases.has(left))
+            return true;
+        const source = importSourceByLocal.get(left);
+        return source !== undefined && hostSources.has(source);
+    };
+}
+/**
+ * Walk top-level `const X = createAnimatedComponent(Y)` /
+ * `Animated.createAnimatedComponent(Y)` declarations and return the set
+ * of local names so the host-lookup recognises them. Reanimated +
+ * RN-core `Animated.createAnimatedComponent` are the only creators in
+ * common use; matching by callee-name covers both shapes without
+ * needing import-source resolution.
+ * @param ast File AST.
+ * @returns Set of locally-bound names that wrap a host component.
+ */
+function collectCreateAnimatedComponentAliases(ast) {
+    const aliases = new Set();
+    for (const node of ast.program.body) {
+        const declaration = t.isExportNamedDeclaration(node) ? node.declaration : node;
+        if (!t.isVariableDeclaration(declaration))
+            continue;
+        for (const decl of declaration.declarations) {
+            if (!t.isIdentifier(decl.id) || !decl.init)
+                continue;
+            if (!isCreateAnimatedComponentCall(decl.init))
+                continue;
+            aliases.add(decl.id.name);
+        }
+    }
+    return aliases;
+}
+/**
+ * True for `createAnimatedComponent(...)` and `<x>.createAnimatedComponent(...)` calls.
+ * @param expr
+ */
+function isCreateAnimatedComponentCall(expr) {
+    if (!t.isCallExpression(expr))
+        return false;
+    const { callee } = expr;
+    if (t.isIdentifier(callee) && callee.name === 'createAnimatedComponent')
+        return true;
+    if (t.isMemberExpression(callee) && t.isIdentifier(callee.property) && callee.property.name === 'createAnimatedComponent')
+        return true;
+    return false;
+}
 /**
  * Mutate an already-parsed Babel AST in place:
  *  - Rewrite every JSX `className="…"` / `className={expr}` attribute to
@@ -106,6 +259,7 @@ function transformAst(ast, options) {
     const literals = [];
     const prefixSet = buildPrefixSet(options.classNamePrefixes);
     const hapticHoister = createHapticHoister();
+    const isHostTag = buildHostLookup(ast, options.hostSources, options.hostComponents);
     const rewriteCtx = {
         needsInsets: false,
         gradientAtoms: options.gradientAtoms ?? EMPTY_GRADIENT_ATOMS,
@@ -118,6 +272,15 @@ function transformAst(ast, options) {
     let touched = false;
     let usedLookupCss = false;
     let usedInteractiveBox = false;
+    // Per-element host classification, captured the first time we see each
+    // JSXOpeningElement. Necessary because the InteractiveBox wrap mutates
+    // `parent.name` in-place from the original tag → `_ib`; sibling
+    // attributes processed AFTER the swap would otherwise re-classify off
+    // the now-meaningless `_ib` name and skip rewrites they should do
+    // (e.g. `contentContainerClassName` next to an `active:` className on
+    // the same `<ScrollView>`).
+    const customElements = new WeakSet();
+    const classifiedElements = new WeakSet();
     traverse(ast, {
         JSXAttribute(attributePath) {
             const { node } = attributePath;
@@ -126,6 +289,24 @@ function transformAst(ast, options) {
             const target = classifyAttributeName(node.name.name, prefixSet);
             if (!target)
                 return;
+            // Skip className rewrite when the parent JSX tag is a custom
+            // component (not imported from a known host source). Custom
+            // components own their `className` prop — the transformer would
+            // steal the string from under them otherwise. The literal still
+            // appears in source text, so oxide still discovers its atoms via
+            // the project scan; the inner host that ultimately consumes the
+            // forwarded className gets rewritten by ITS file's transform.
+            const { parent } = attributePath;
+            if (t.isJSXOpeningElement(parent)) {
+                if (!classifiedElements.has(parent)) {
+                    classifiedElements.add(parent);
+                    const tagText = jsxTagText(parent.name);
+                    if (tagText !== null && !isHostTag(tagText))
+                        customElements.add(parent);
+                }
+                if (customElements.has(parent))
+                    return;
+            }
             const rewritten = rewriteClassNameAttribute(attributePath, hoister, literals, rewriteCtx, target);
             if (!rewritten)
                 return;
@@ -226,12 +407,20 @@ function rewriteClassNameAttribute(attributePath, hoister, literals, rewriteCtx,
     const { value } = node;
     if (!value)
         return null;
-    const buildResult = buildFirstArgument(value, hoister, literals, rewriteCtx);
-    if (!buildResult)
-        return null;
     const { parent } = attributePath;
     if (!t.isJSXOpeningElement(parent))
         return null;
+    // The rewrite emits references to `_t` (the `useR_()` binding). That
+    // binding can only live in a component body — so if this JSX site has
+    // no enclosing component (e.g. a top-level `const renderItem = (...) =>
+    // <View className=.../>` helper), bail and leave className untouched
+    // rather than emit a dangling `_t`. Checked BEFORE any mutation
+    // (hoist, sibling-style drop) so a bail leaves the AST pristine.
+    if (!hasComponentBody(attributePath))
+        return null;
+    const buildResult = buildFirstArgument(value, hoister, literals, rewriteCtx);
+    if (!buildResult)
+        return null;
     const userStyleExpr = extractAndDropSiblingStyle(parent, target.styleProp);
     // Single context binding `_t = _r()` — carries scheme, fontScale,
     // insets together so React tracks all three as render deps via one
@@ -280,29 +469,36 @@ function applyDerivedJsxAttributes(attributePath, parent, result, target, rewrit
         injectEventHapticHandlers(attributePath, parent, result.eventHaptics, rewriteCtx);
 }
 /**
- * Splice gradient JSX attributes (`colors={…}` / `start={…}` /
- * `end={…}`) into a JSXOpeningElement's attribute list, replacing
- * any already-present attribute with the same name. Users who manually
- * set `colors=` on the same element lose; rnwind's class-derived
- * values win — matching how `className`-resolved styles override
- * inline `style={…}`.
+ * Splice class-derived JSX attributes (`colors={…}` / `start={…}` /
+ * `end={…}` for gradients; `numberOfLines=` / `ellipsizeMode=` for
+ * truncate) into a JSXOpeningElement's attribute list — but only when
+ * the developer hasn't already written that attribute themselves.
+ *
+ * **User attrs always win.** If a hand-written `colors={USER}` is
+ * present, the class-derived hoist is dropped on the floor for that
+ * specific attribute. Same rule for every derived prop, applied
+ * per-attribute so the user can override one slot (e.g. `start={…}`)
+ * and let rnwind fill in the others. Documented in
+ * `docs/architecture.md`.
  * @param opening JSXOpeningElement to mutate.
- * @param gradientAttrs Freshly built JSX attributes.
- * @param gradientAttributes
+ * @param gradientAttributes Freshly built JSX attributes.
  */
 function appendGradientAttributes(opening, gradientAttributes) {
-    const names = new Set();
-    for (const attribute of gradientAttributes)
-        if (t.isJSXIdentifier(attribute.name))
-            names.add(attribute.name.name);
-    opening.attributes = opening.attributes.filter((attribute) => {
+    const userAttributeNames = new Set();
+    for (const attribute of opening.attributes) {
         if (!t.isJSXAttribute(attribute))
-            return true;
+            continue;
         if (!t.isJSXIdentifier(attribute.name))
-            return true;
-        return !names.has(attribute.name.name);
-    });
-    opening.attributes.push(...gradientAttributes);
+            continue;
+        userAttributeNames.add(attribute.name.name);
+    }
+    for (const derived of gradientAttributes) {
+        if (!t.isJSXIdentifier(derived.name))
+            continue;
+        if (userAttributeNames.has(derived.name.name))
+            continue;
+        opening.attributes.push(derived);
+    }
 }
 /**
  * Whether a JSX tag can fire press / focus events. Pure host-tag check
@@ -957,6 +1153,27 @@ function injectContextHook(path) {
     componentBody.unshiftContainer('body', declaration);
     return CONTEXT_BINDING;
 }
+/**
+ * Whether `path` sits inside a recognised function component — i.e.
+ * {@link injectContextHook} would find a body to host `const _t =
+ * useR_()`. Pure lookup that mirrors {@link findComponentBody}'s walk
+ * but performs NO body promotion, so a caller can bail before mutating
+ * when the answer is no.
+ * @param path Rewrite-site path.
+ * @returns True when an enclosing component function exists.
+ */
+function hasComponentBody(path) {
+    let current = path;
+    while (current) {
+        const fn = current.findParent((parent) => parent.isFunction());
+        if (!fn)
+            return false;
+        if (isComponentFunction(fn))
+            return true;
+        current = fn;
+    }
+    return false;
+}
 /**
  * Walk up from `path` to the nearest recognised function component.
  * Accepts: