zyzz 0.0.21 → 0.0.22

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,42 +127,233 @@ 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) {
       if (
         !t.isJSXIdentifier(path.node.name, { name: 'style' }) ||
@@ -166,7 +361,36 @@ export function visitor(
         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
+      }
+      const binding = owner(
+        path,
+        files.get(state.file)!,
+        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,14 +440,67 @@ 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 requiresResolution(
+    path: Babel.NodePath,
+    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 owner(
     path: Babel.NodePath,
     owners: Owners,
-    method: 'props' | 'style',
+    method: Method,
   ): Babel.types.Identifier {
     const parent = path.findParent((candidate) => {
       if (!candidate.isFunction()) return false
@@ -255,6 +532,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

package/src/compiler/Graph.ts

@@ -8,6 +8,8 @@ import type * as Mapping from '@jridgewell/gen-mapping'
 import * as Css from '../web/Css.js'
 import * as ClassName from '../web/internal/ClassName.js'
 import * as Native from './Native.js'
+import * as NativeVars from './internal/NativeVars.js'
+import * as NativeStyleSheet from '../react-native/StyleSheet.js'
 import * as Edits from './internal/Edits.js'
 import * as Identity from '../internal/Identity.js'
 import type * as Ast from '@oxc-project/types'
@@ -1086,10 +1088,82 @@ function build(options: compile.Options, cache?: Cache): Cache {
           : {}),
       }
     }
+    const profiles = new Map<
+      string,
+      {
+        definitions: Map<string, string>
+        reads: Map<number, { name: string; source?: string }>
+      }
+    >()
+    const reserved = new Set(
+      [...identifiers.values()].flatMap((names) => [...names]),
+    )
+    function profile(moduleId: string) {
+      let value = profiles.get(moduleId)
+      if (!value) {
+        value = { definitions: new Map(), reads: new Map() }
+        profiles.set(moduleId, value)
+      }
+      return value
+    }
+    if (ids.some((id) => extracted.get(id)!.nativeVars?.length))
+      NativeStyleSheet.compile({
+        fonts: native.fonts,
+        platform: native.platform,
+        units: native.units,
+        styles: { styles: [] },
+      })
+    for (const moduleId of ids) {
+      for (const read of extracted.get(moduleId)!.nativeVars ?? []) {
+        const owner = owners[read.owner]?.moduleId
+        // Single-file adapters cannot publish changes to dependency modules.
+        // Packed catalogs without source also retain their local fallback.
+        if (
+          native[Edits.runtime] ||
+          !owner ||
+          !Object.hasOwn(options.modules, owner)
+        )
+          continue
+        let value: string
+        try {
+          value = JSON.stringify(
+            NativeVars.compile({
+              ...read,
+              fonts: native.fonts,
+              units: native.units,
+            }),
+          )
+        } catch (error) {
+          throw new Native.CompileError((error as Error).message)
+        }
+        const definitions = profile(owner).definitions
+        let name = definitions.get(value)
+        if (!name) {
+          name = `__zyzzProfile${Identity.hash(value)}`
+          while (reserved.has(name)) name += '_'
+          reserved.add(name)
+          definitions.set(value, name)
+        }
+        const from = moduleId.split('/').slice(0, -1)
+        const to = owner.split('/')
+        while (from.length && from[0] === to[0]) {
+          from.shift()
+          to.shift()
+        }
+        const source =
+          (from.length ? '../'.repeat(from.length) : './') +
+          to.join('/').replace(/\.([cm]?)tsx?$/, '.$1js')
+        profile(moduleId).reads.set(read.start, {
+          name,
+          ...(owner !== moduleId ? { source } : {}),
+        })
+      }
+    }
     const modules = Object.fromEntries(
       ids.map((moduleId) => {
         if (
           previous &&
+          !profiles.size &&
           extracted.get(moduleId) === previous.extracted.get(moduleId)
         )
           return [moduleId, previous.result.modules[moduleId]!]
@@ -1133,6 +1207,7 @@ function build(options: compile.Options, cache?: Cache): Cache {
         }
         const output = Native.compile({
           ...native,
+          [NativeVars.shared]: profiles.get(moduleId),
           moduleId,
           source: options.modules[moduleId]!,
           [Themes.context]: {