zyzz 0.0.21 → 0.0.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zyzz",
-  "version": "0.0.21",
+  "version": "0.0.23",
   "license": "MIT",
   "description": "Modern, universal, simple styling library for the Web and React Native",
   "repository": {
@@ -16,6 +16,9 @@
   "files": [
     "dist",
     "src",
+    "native",
+    "react-native.config.ts",
+    "Zyzz.podspec",
     "!src/**/*.bench-d.ts",
     "!src/**/*.bench.ts",
     "!src/**/*.test-d.ts",
@@ -25,6 +28,20 @@
     "./src/reset.css",
     "./dist/reset.css"
   ],
+  "codegenConfig": {
+    "name": "ZyzzSpec",
+    "type": "modules",
+    "jsSrcsDir": "src/react-native/internal",
+    "android": {
+      "javaPackageName": "xyz.wevm.zyzz"
+    },
+    "ios": {
+      "modulesProvider": {
+        "NativeZyzz": "ZyzzModuleProvider"
+      }
+    },
+    "includesGeneratedCode": true
+  },
   "module": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "exports": {
@@ -84,11 +101,24 @@
       "default": "./dist/oxlint/index.js"
     },
     "./react-native": {
+      "react-native": {
+        "types": "./dist/react-native/index.native.d.ts",
+        "default": "./dist/react-native/index.native.js"
+      },
       "src": "./src/react-native/index.ts",
       "types": "./dist/react-native/index.d.ts",
       "default": "./dist/react-native/index.js"
     },
+    "./react-native/reanimated": {
+      "src": "./src/react-native/reanimated.ts",
+      "types": "./dist/react-native/reanimated.d.ts",
+      "default": "./dist/react-native/reanimated.js"
+    },
     "./react-native/react": {
+      "react-native": {
+        "types": "./dist/react-native/react.d.ts",
+        "default": "./dist/react-native/internal/Device.js"
+      },
       "src": "./src/react-native/react.ts",
       "types": "./dist/react-native/react.d.ts",
       "default": "./dist/react-native/react.js"
@@ -146,6 +176,8 @@
     "@babel/core": "^7.29.7",
     "next": "^16.3.5",
     "react": "^19.0.0",
+    "react-native": ">=0.86.0 <1.0.0",
+    "react-native-reanimated": ">=4.5.3 <5.0.0",
     "vite": "^8.0.0"
   },
   "peerDependenciesMeta": {
@@ -158,6 +190,12 @@
     "react": {
       "optional": true
     },
+    "react-native": {
+      "optional": true
+    },
+    "react-native-reanimated": {
+      "optional": true
+    },
     "vite": {
       "optional": true
     }

package/react-native.config.ts

@@ -0,0 +1,14 @@
+/** Autolinks the shared native adapter without application registration. @module */
+export default {
+  dependency: {
+    platforms: {
+      android: {
+        cxxModuleCMakeListsModuleName: 'react_codegen_ZyzzSpec',
+        cxxModuleCMakeListsPath: 'CMakeLists.txt',
+        cxxModuleHeaderName: 'NativeZyzz',
+        sourceDir: 'native/android',
+      },
+      ios: {},
+    },
+  },
+}

package/src/Style.ts

@@ -75,14 +75,17 @@ export type Accepted<
                         ? LiteralDeclarations
                         : DeclarationProperties<tokens>)[key] extends style[key]
                     ? style[key]
-                    : Value.Accepted<
-                        Pick<style, key>,
-                        literal extends true
-                          ? LiteralDeclarations
-                          : DeclarationProperties<tokens>
-                      >[key] &
-                        Value.Checked<Pick<style, key>, tokens>[key] &
-                        Value.Tokens<style[key], tokens, key>
+                    : // Naming the expected tokens avoids a `never` diagnostic and keeps completions to accepted values.
+                      [Value.Tokens<style[key], tokens, key>] extends [never]
+                      ? Value.Mismatch<tokens, key>
+                      : Value.Accepted<
+                          Pick<style, key>,
+                          literal extends true
+                            ? LiteralDeclarations
+                            : DeclarationProperties<tokens>
+                        >[key] &
+                          Value.Checked<Pick<style, key>, tokens>[key] &
+                          Value.Tokens<style[key], tokens, key>
                   : key extends Condition.Keys<tokens, key>
                     ? [style[key]] extends [undefined]
                       ? never

package/src/babel/NativeJsx.ts

@@ -112,9 +112,13 @@ export function visitor(
   callables: WeakSet<Babel.types.Node>,
 ): Babel.Visitor<Babel.PluginPass> {
   const t = api.types
-  type Bindings = Map<'props' | 'style', Babel.types.Identifier>
+  type Method = 'nativeStyle' | 'props' | 'style' | 'view'
+  type Bindings = Map<Method, Babel.types.Identifier>
   type Owners = Map<Babel.NodePath<Babel.types.Function>, Bindings>
   const files = new WeakMap<Babel.BabelFile, Owners>()
+  const native = new WeakSet<Babel.types.JSXOpeningElement>()
+  const animated = new WeakSet<Babel.types.JSXOpeningElement>()
+  const wrapped = new WeakSet<Babel.types.JSXOpeningElement>()
   return {
     Program: {
       enter(_, state) {
@@ -123,50 +127,275 @@ export function visitor(
       exit(path, state) {
         const owners = files.get(state.file)!
         if (!owners.size) return
-        const hook = path.scope.generateUidIdentifier('useZyzzStyles')
-        path.unshiftContainer(
-          'body',
-          t.importDeclaration(
-            [t.importSpecifier(hook, t.identifier('useStyles'))],
-            t.stringLiteral('zyzz/react-native/react'),
-          ),
-        )
+        const hooks = new Map<boolean, Babel.types.Identifier>()
+        for (const native of [false, true]) {
+          if (
+            ![...owners.values()].some((bindings) =>
+              [...bindings.keys()].some(
+                (method) =>
+                  (method === 'nativeStyle' || method === 'view') === native,
+              ),
+            )
+          )
+            continue
+          const hook = path.scope.generateUidIdentifier(
+            native ? 'useZyzzNativeStyles' : 'useZyzzStyles',
+          )
+          hooks.set(native, hook)
+          path.unshiftContainer(
+            'body',
+            t.importDeclaration(
+              [
+                t.importSpecifier(
+                  t.cloneNode(hook),
+                  t.identifier(native ? 'useNativeStyles' : 'useStyles'),
+                ),
+              ],
+              t.stringLiteral('zyzz/react-native/react'),
+            ),
+          )
+        }
         for (const [owner, bindings] of owners) {
           if (!t.isBlockStatement(owner.node.body))
             owner.node.body = t.blockStatement([
               t.returnStatement(owner.node.body),
             ])
-          const context =
-            bindings.size > 1
-              ? owner.scope.generateUidIdentifier('zyzzStyles')
-              : undefined
-          const declarations = context
-            ? [t.variableDeclarator(context, t.callExpression(hook, []))]
-            : []
-          for (const [method, binding] of bindings)
-            declarations.push(
-              t.variableDeclarator(
-                binding,
-                t.memberExpression(
-                  context ?? t.callExpression(hook, []),
-                  t.identifier(method),
-                ),
-              ),
+          const declarations: Babel.types.VariableDeclarator[] = []
+          for (const [native, hook] of hooks) {
+            const entries = [...bindings].filter(
+              ([method]) =>
+                (method === 'nativeStyle' || method === 'view') === native,
             )
+            const context =
+              entries.length > 1
+                ? owner.scope.generateUidIdentifier('zyzzStyles')
+                : undefined
+            if (context)
+              declarations.push(
+                t.variableDeclarator(
+                  t.cloneNode(context),
+                  t.callExpression(t.cloneNode(hook), []),
+                ),
+              )
+            for (const [method, binding] of entries)
+              declarations.push(
+                t.variableDeclarator(
+                  t.cloneNode(binding),
+                  t.memberExpression(
+                    context
+                      ? t.cloneNode(context)
+                      : t.callExpression(t.cloneNode(hook), []),
+                    t.identifier(method === 'nativeStyle' ? 'style' : method),
+                  ),
+                ),
+              )
+          }
           owner.node.body.body.unshift(
             t.variableDeclaration('var', declarations),
           )
         }
       },
     },
+    JSXOpeningElement: {
+      enter(path, state) {
+        const name = path.node.name
+        const root = (() => {
+          if (t.isJSXIdentifier(name)) return name
+          if (t.isJSXMemberExpression(name) && t.isJSXIdentifier(name.object))
+            return name.object
+          return undefined
+        })()
+        if (!root) return
+        const binding = path.scope.getBinding(root.name)
+        if (
+          binding?.path.parentPath?.isImportDeclaration() &&
+          binding.path.parentPath.node.source.value ===
+            'react-native-reanimated'
+        ) {
+          animated.add(path.node)
+          return
+        }
+        if (binding?.constant && binding.path.isVariableDeclarator()) {
+          const call = binding.path.node.init
+          if (t.isCallExpression(call)) {
+            const callee = call.callee
+            const name = t.isIdentifier(callee)
+              ? callee
+              : t.isMemberExpression(callee) &&
+                  !callee.computed &&
+                  t.isIdentifier(callee.object) &&
+                  t.isIdentifier(callee.property, { name: 'withStyles' })
+                ? callee.object
+                : undefined
+            const factory = name && binding.path.scope.getBinding(name.name)
+            if (
+              factory?.path.parentPath?.isImportDeclaration() &&
+              ['zyzz/react-native', 'zyzz/react-native/react'].includes(
+                factory.path.parentPath.node.source.value,
+              ) &&
+              (t.isIdentifier(callee)
+                ? factory.path.isImportSpecifier() &&
+                  t.isIdentifier(factory.path.node.imported, {
+                    name: 'withStyles',
+                  })
+                : factory.path.isImportNamespaceSpecifier())
+            ) {
+              wrapped.add(path.node)
+              return
+            }
+          }
+        }
+        if (
+          !binding?.path.parentPath?.isImportDeclaration() ||
+          binding.path.parentPath.node.source.value !== 'react-native'
+        )
+          return
+        const imported = (() => {
+          if (
+            binding.path.isImportSpecifier() &&
+            t.isIdentifier(binding.path.node.imported)
+          )
+            return binding.path.node.imported.name
+          if (
+            t.isJSXMemberExpression(name) &&
+            binding.path.isImportNamespaceSpecifier()
+          )
+            return name.property.name
+          return undefined
+        })()
+        if (
+          !imported ||
+          !['Image', 'Pressable', 'Text', 'TextInput', 'View'].includes(
+            imported,
+          )
+        )
+          return
+        if (
+          !path.node.attributes.some(
+            (attribute) =>
+              t.isJSXSpreadAttribute(attribute) ||
+              (t.isJSXAttribute(attribute) &&
+                t.isJSXIdentifier(attribute.name, { name: 'style' })),
+          )
+        )
+          return
+        native.add(path.node)
+        owner(path, files.get(state.file)!, 'view')
+      },
+      exit(path, state) {
+        if (!native.has(path.node)) return
+        const properties: (
+          | Babel.types.ObjectProperty
+          | Babel.types.SpreadElement
+        )[] = []
+        for (const attribute of path.node.attributes) {
+          if (t.isJSXSpreadAttribute(attribute))
+            properties.push(t.spreadElement(attribute.argument))
+          else if (t.isJSXIdentifier(attribute.name)) {
+            const value = attribute.value
+            const expression = (() => {
+              if (value === null) return t.booleanLiteral(true)
+              if (
+                t.isJSXExpressionContainer(value) &&
+                !t.isJSXEmptyExpression(value.expression)
+              )
+                return value.expression
+              if (t.isStringLiteral(value))
+                return t.stringLiteral(value.value.replace(/\n\s+/g, ' '))
+              if (t.isJSXElement(value) || t.isJSXFragment(value)) return value
+              return undefined
+            })()
+            if (!expression)
+              throw path.buildCodeFrameError(
+                'Unsupported native JSX attribute.',
+              )
+            properties.push(
+              t.objectProperty(
+                t.stringLiteral(attribute.name.name),
+                expression,
+              ),
+            )
+          } else
+            throw path.buildCodeFrameError('Unsupported native JSX attribute.')
+        }
+        const binding = owner(path, files.get(state.file)!, 'view')
+        const props = t.objectExpression(properties)
+        const key = path.node.attributes.some(
+          (attribute) =>
+            t.isJSXAttribute(attribute) &&
+            t.isJSXIdentifier(attribute.name, { name: 'key' }),
+        )
+        const temporary = key
+          ? path.scope.generateUidIdentifier('zyzzProps')
+          : undefined
+        if (temporary)
+          path.scope.push({ id: t.cloneNode(temporary), kind: 'var' })
+        path.node.attributes = [
+          t.jsxSpreadAttribute(
+            t.callExpression(binding, [
+              temporary
+                ? t.assignmentExpression('=', t.cloneNode(temporary), props)
+                : props,
+            ]),
+          ),
+          ...(temporary
+            ? [
+                t.jsxAttribute(
+                  t.jsxIdentifier('key'),
+                  t.jsxExpressionContainer(
+                    t.memberExpression(
+                      t.cloneNode(temporary),
+                      t.identifier('key'),
+                    ),
+                  ),
+                ),
+              ]
+            : []),
+        ]
+      },
+    },
     JSXAttribute(path, state) {
+      const name = path.node.name
       if (
-        !t.isJSXIdentifier(path.node.name, { name: 'style' }) ||
+        !t.isJSXIdentifier(name) ||
+        (name.name !== 'style' && !name.name.endsWith('Style')) ||
         !t.isJSXExpressionContainer(path.node.value) ||
         t.isJSXEmptyExpression(path.node.value.expression)
       )
         return
-      const binding = owner(path, files.get(state.file)!, 'style')
+      if (
+        animated.has(path.parentPath.node as Babel.types.JSXOpeningElement) &&
+        !requiresResolution(path, path.node.value.expression)
+      )
+        return
+      if (wrapped.has(path.parentPath.node as Babel.types.JSXOpeningElement)) {
+        const value = path.node.value.expression
+        if (t.isIdentifier(value) && callables.has(value))
+          path.node.value.expression = t.memberExpression(
+            t.callExpression(value, []),
+            t.identifier('style'),
+          )
+        else if (
+          t.isCallExpression(value) &&
+          t.isIdentifier(value.callee) &&
+          callables.has(value.callee)
+        )
+          path.node.value.expression = t.memberExpression(
+            value,
+            t.identifier('style'),
+          )
+        return
+      }
+      // Unlike style, other style props stay untouched outside components, so class and module-scope JSX keep compiling.
+      if (name.name !== 'style' && !component(path)) return
+      const binding = owner(
+        path,
+        files.get(state.file)!,
+        name.name === 'style' &&
+          native.has(path.parentPath.node as Babel.types.JSXOpeningElement)
+          ? 'nativeStyle'
+          : 'style',
+      )
       let inputs = [path.node.value.expression]
       let value = path.node.value.expression
       while (
@@ -216,15 +445,64 @@ export function visitor(
       path.node.value.expression = t.callExpression(binding, inputs)
     },
     JSXSpreadAttribute(path, state) {
+      if (
+        (animated.has(path.parentPath.node as Babel.types.JSXOpeningElement) &&
+          !requiresResolution(path, path.node.argument)) ||
+        native.has(path.parentPath.node as Babel.types.JSXOpeningElement) ||
+        wrapped.has(path.parentPath.node as Babel.types.JSXOpeningElement)
+      )
+        return
       const binding = owner(path, files.get(state.file)!, 'props')
       path.node.argument = t.callExpression(binding, [path.node.argument])
     },
   }
-  function owner(
+  function requiresResolution(
     path: Babel.NodePath,
-    owners: Owners,
-    method: 'props' | 'style',
-  ): Babel.types.Identifier {
+    expression: Babel.types.Node,
+  ): boolean {
+    const pending = [{ expression, scope: path.scope }]
+    const seen = new Set<Babel.types.VariableDeclarator>()
+    for (const entry of pending) {
+      let required = false
+      t.traverseFast(entry.expression, (node) => {
+        if (
+          callables.has(node) ||
+          (entry.expression === expression && t.isCallExpression(node)) ||
+          (t.isMemberExpression(node) &&
+            !node.computed &&
+            t.isIdentifier(node.property, { name: 'style' }))
+        ) {
+          required = true
+          return t.traverseFast.stop
+        }
+        // Alias factories stay opaque so worklet inputs do not become React subscriptions.
+        if (
+          t.isCallExpression(node) ||
+          t.isFunction(node) ||
+          t.isNewExpression(node)
+        )
+          return t.traverseFast.skip
+        if (!t.isIdentifier(node)) return
+        const binding = entry.scope.getBinding(node.name)
+        if (
+          binding?.constant &&
+          binding.path.isVariableDeclarator() &&
+          binding.path.node.init &&
+          !seen.has(binding.path.node)
+        ) {
+          seen.add(binding.path.node)
+          pending.push({
+            expression: binding.path.node.init,
+            scope: binding.path.scope,
+          })
+        }
+      })
+      if (required) return true
+    }
+
+    return false
+  }
+  function component(path: Babel.NodePath) {
     const parent = path.findParent((candidate) => {
       if (!candidate.isFunction()) return false
       let declaration = candidate.parentPath
@@ -241,7 +519,15 @@ export function visitor(
         candidate.parentPath.isExportDefaultDeclaration()
       )
     })
-    if (!parent?.isFunction() || parent.isClassMethod())
+    return parent?.isFunction() && !parent.isClassMethod() ? parent : undefined
+  }
+  function owner(
+    path: Babel.NodePath,
+    owners: Owners,
+    method: Method,
+  ): Babel.types.Identifier {
+    const parent = component(path)
+    if (!parent)
       throw path.buildCodeFrameError(
         'Native style props must be rendered in a function component or custom hook.',
       )
@@ -255,6 +541,6 @@ export function visitor(
       binding = parent.scope.generateUidIdentifier(`zyzz${method}`)
       bindings.set(method, binding)
     }
-    return binding
+    return t.cloneNode(binding)
   }
 }

package/src/babel/index.ts

@@ -17,12 +17,16 @@ import * as Transform from '../compiler/Transform.js'
 export type NativeOptions = {
   /** Fixed build-time scheme. Omit for runtime selection through React. */
   readonly colorScheme?: 'dark' | 'light' | undefined
-  /** Closed source graph supplied by the bundler for imported authoring. */
-  readonly modules?: Readonly<Record<string, string>> | undefined
+  /** Packed authoring contracts supplied by the bundler. */
+  readonly contracts?: Graph.compile.Options['contracts']
+  /** Authored font-family text mapped to registered native families. */
+  readonly fonts?: Native.compile.Options['fonts']
   /** Host-resolved graph imports. */
   readonly imports?: Graph.compile.Options['imports']
   /** Portable source identity. Defaults to a native module-local identity. */
   readonly moduleId?: string | undefined
+  /** Closed source graph supplied by the bundler for imported authoring. */
+  readonly modules?: Readonly<Record<string, string>> | undefined
   /** Native destination selected by the bundler. */
   readonly platform: 'android' | 'ios'
   /** Native compiler selection. Omission preserves existing native configurations. */
@@ -188,9 +192,11 @@ export function zyzz(
             options[Compilation.key]?.programs ??
             (parsed ? new Map([[moduleId, parsed]]) : undefined),
           modules: { ...options.modules, [moduleId]: file.code },
+          contracts: options.contracts,
           imports: options.imports,
           native: {
             [Edits.runtime]: true,
+            fonts: options.fonts,
             platform: options.platform,
             units: options.units,
             colorScheme: options.colorScheme ?? 'light',
@@ -201,6 +207,7 @@ export function zyzz(
       return Native.compile({
         [Themes.context]: parsed ? { parsed, links: {} } : undefined,
         [Edits.runtime]: true,
+        fonts: options.fonts,
         platform: options.platform,
         units: options.units,
         colorScheme: options.colorScheme ?? 'light',
@@ -333,7 +340,18 @@ export function zyzz(
     },
     visitor:
       options.target !== 'web' && options.colorScheme === undefined
-        ? NativeJsx.visitor(api, callables)
+        ? {
+            Program(path, state) {
+              // Bind before framework transforms clone components or rewrite imports.
+              api.traverse(
+                state.file.ast,
+                NativeJsx.visitor(api, callables),
+                path.scope,
+                state,
+              )
+              path.scope.crawl()
+            },
+          }
         : {
             Program(path) {
               if (options.target !== 'web' || !options.reset) return