zyzz 0.0.21 → 0.0.23

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,133 @@ 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
+    }
+
+    function encode(read: Omit<Themes.VarsRead, 'end' | 'start'>) {
+      try {
+        return JSON.stringify(
+          NativeVars.compile({
+            ...read,
+            fonts: native.fonts,
+            units: native.units,
+          }),
+        )
+      } catch (error) {
+        throw new Native.CompileError((error as Error).message)
+      }
+    }
+
+    function define(owner: string, value: string) {
+      const definitions = profile(owner).definitions
+      let name = definitions.get(value)
+      if (!name) {
+        // Hashing the owner keeps names independent of which modules share the graph.
+        name = `__zyzzProfile${Identity.hash(owner + value)}`
+        while (reserved.has(name)) name += '_'
+        reserved.add(name)
+        definitions.set(value, name)
+      }
+      return name
+    }
+
+    if (ids.some((id) => extracted.get(id)!.nativeVars?.length))
+      NativeStyleSheet.compile({
+        fonts: native.fonts,
+        platform: native.platform,
+        units: native.units,
+        styles: { styles: [] },
+      })
+
+    // Single-file adapters compile each owner without its consumers, so owners publish every exported profile.
+    if (native[Edits.runtime])
+      for (const moduleId of ids)
+        for (const link of Object.values(
+          extracted.get(moduleId)!.themeExports ?? {},
+        )) {
+          if (
+            owners[link.call.name]?.moduleId !== moduleId ||
+            !(
+              link.call.variableSet ||
+              (link.kind === 'config' &&
+                link.call.variableConfig &&
+                !link.call.initialization &&
+                !link.call.root)
+            )
+          )
+            continue
+          const value = (() => {
+            try {
+              return encode(Themes.varsRead(link))
+            } catch {
+              // Consumers that read this profile report the same error.
+              return undefined
+            }
+          })()
+          if (value !== undefined) define(moduleId, value)
+        }
+
+    for (const moduleId of ids) {
+      for (const read of extracted.get(moduleId)!.nativeVars ?? []) {
+        const owner = owners[read.owner]?.moduleId
+        // Packed catalogs without source retain their local fallback.
+        if (!owner || !Object.hasOwn(options.modules, owner)) continue
+
+        const value = encode(read)
+        const name = native[Edits.runtime]
+          ? profiles.get(owner)?.definitions.get(value)
+          : define(owner, value)
+        if (!name) continue
+
+        const source = (() => {
+          if (owner === moduleId) return undefined
+
+          // Host identities are opaque, so reuse the consumer's own resolved specifier.
+          if (native[Edits.runtime] && options.imports) {
+            const imports = options.imports[moduleId] ?? {}
+            return Object.keys(imports).find((key) => imports[key] === owner)
+          }
+
+          const from = moduleId.split('/').slice(0, -1)
+          const to = owner.split('/')
+          while (from.length && from[0] === to[0]) {
+            from.shift()
+            to.shift()
+          }
+          return (
+            (from.length ? '../'.repeat(from.length) : './') +
+            to.join('/').replace(/\.([cm]?)tsx?$/, '.$1js')
+          )
+        })()
+        if (owner !== moduleId && !source) continue
+        profile(moduleId).reads.set(read.start, {
+          name,
+          ...(source ? { source } : {}),
+        })
+      }
+    }
     const modules = Object.fromEntries(
       ids.map((moduleId) => {
+        // Single-file profiles derive only from this module's extraction and its dependencies.
         if (
           previous &&
+          (native[Edits.runtime] || !profiles.size) &&
           extracted.get(moduleId) === previous.extracted.get(moduleId)
         )
           return [moduleId, previous.result.modules[moduleId]!]
@@ -1133,6 +1258,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]: {

package/src/compiler/Native.ts

@@ -5,6 +5,8 @@ import type * as Recipe from '../internal/Recipe.js'
 import * as Source from './Source.js'
 import * as Edits from './internal/Edits.js'
 import * as NativeBindings from './internal/NativeBindings.js'
+import * as NativeMedia from './internal/NativeMedia.js'
+import * as NativeVars from './internal/NativeVars.js'
 import * as Themes from './internal/Themes.js'
 import * as StyleSheet from '../react-native/StyleSheet.js'
 import * as Syntax from './internal/Syntax.js'
@@ -12,7 +14,7 @@ import * as Variants from '../react-native/Variants.js'
 import * as Walker from 'oxc-walker'
 
 /**
- * Compiles local style and variants calls for an explicit native context.
+ * Compiles local styles, variants, and variable reads for an explicit native target.
  * @param options - Shared source, destination mappings, and selected set/scheme.
  * @returns Native callables, source map, and static recipe tables.
  * @throws {Source.ExtractError} For invalid source authoring.
@@ -50,9 +52,13 @@ export function compile(options: compile.Options): compile.ReturnType {
     })
   let helper = '__zyzzNative'
   while (
-    [helper, `${helper}Context`, `${helper}Dynamic`].some((name) =>
-      names.has(name),
-    )
+    [
+      helper,
+      `${helper}Context`,
+      `${helper}Dynamic`,
+      `${helper}Static`,
+      `${helper}Vars`,
+    ].some((name) => names.has(name))
   )
     helper += '_'
   let dynamicHelper = `${helper}Dynamic`
@@ -70,6 +76,7 @@ export function compile(options: compile.Options): compile.ReturnType {
   }
   const recipes: Record<string, Variants.Definition> = Object.create(null)
   let dynamic = false
+  let finite = false
   const contexts = new Map<string, string>()
   const compiledCalls = new WeakMap<
     Variants.Definition,
@@ -92,6 +99,54 @@ export function compile(options: compile.Options): compile.ReturnType {
   }
 
   const staticTables = new Map<Source.Call, Variants.Definition>()
+  if (extracted.nativeVars?.length)
+    StyleSheet.compile({
+      fonts: options.fonts,
+      platform: options.platform,
+      styles: { styles: [] },
+      units: options.units,
+    })
+
+  const shared = options[NativeVars.shared]
+  const variables = new Map(shared?.definitions)
+  const imports = new Set<string>()
+  for (const read of extracted.nativeVars ?? []) {
+    const imported = shared?.reads.get(read.start)
+    if (imported) {
+      if (imported.source)
+        imports.add(
+          `import {${imported.name}} from ${JSON.stringify(imported.source)};`,
+        )
+      const type = typed
+        ? ` as typeof ${options.source.slice(read.start, read.end)}`
+        : ''
+      overwrite(read.start, read.end, `(${imported.name}${type})`, true)
+      continue
+    }
+    const definition = (() => {
+      try {
+        return NativeVars.compile({
+          ...read,
+          fonts: options.fonts,
+          units: options.units,
+        })
+      } catch (error) {
+        throw new CompileError((error as Error).message)
+      }
+    })()
+    const key = JSON.stringify(definition)
+    let name = variables.get(key)
+    if (!name) {
+      name = `${helper}Vars${variables.size}`
+      while (names.has(name)) name += '_'
+      names.add(name)
+      variables.set(key, name)
+    }
+    const type = typed
+      ? ` as typeof ${options.source.slice(read.start, read.end)}`
+      : ''
+    overwrite(read.start, read.end, `(${name}${type})`, true)
+  }
   if (options.contextual) {
     const groups = new Map<StyleSheet.compile.Options['vars'], Source.Call[]>()
     for (const call of extracted.calls) {
@@ -104,6 +159,15 @@ export function compile(options: compile.Options): compile.ReturnType {
       )
         continue
       const vars = call.nativeContext?.vars ?? options.vars
+      try {
+        if (
+          NativeMedia.prepare(stylesByName.get(call.name) ?? [], vars, options)
+        )
+          continue
+      } catch (error) {
+        throw new CompileError((error as Error).message)
+      }
+
       const group = groups.get(vars)
       if (group) group.push(call)
       else groups.set(vars, [call])
@@ -233,9 +297,58 @@ export function compile(options: compile.Options): compile.ReturnType {
     compiled?: Variants.Definition,
     bindings?: ReturnType<typeof NativeBindings.prepare>,
   ): string {
+    const program =
+      Object.keys(recipe.axes).length > 0 ||
+      call?.slots ||
+      call?.recipe?.payloads?.length
+
     if (contextOptions.contextual) {
       const vars = call?.nativeContext?.vars ?? contextOptions.vars
-      if (!call?.slots && !call?.recipe?.payloads?.length)
+      const media = (() => {
+        try {
+          return NativeMedia.prepare(
+            recipe.rules.flatMap((rule) => rule.value.styles),
+            vars,
+            contextOptions,
+          )
+        } catch (error) {
+          throw new CompileError((error as Error).message)
+        }
+      })()
+      if (media) {
+        const profiles = media.selections.map((selection) => {
+          const selected = media.select(selection)
+          const next = {
+            ...recipe,
+            rules: recipe.rules.map((rule) => ({
+              ...rule,
+              value: {
+                ...rule.value,
+                styles: rule.value.styles.map(selected.style),
+              },
+            })),
+          }
+          const source = call?.nativeContext
+            ? {
+                ...call,
+                nativeContext: {
+                  ...call.nativeContext,
+                  vars: selected.vars as typeof call.nativeContext.vars,
+                },
+              }
+            : call
+          const value = callable(next, name, source, {
+            ...contextOptions,
+            vars: selected.vars,
+          })
+          return `${JSON.stringify(selection)}:${value}`
+        })
+        // A single static table cannot represent the responsive callable.
+        delete recipes[name]
+
+        return `${helper}Context.responsive(${JSON.stringify(media.queries)},{${profiles.join(',')}})`
+      }
+      if (!program)
         compiled ??= Variants.compile({
           recipe,
           fonts: contextOptions.fonts,
@@ -245,7 +358,7 @@ export function compile(options: compile.Options): compile.ReturnType {
         })
       else {
         try {
-          bindings = NativeBindings.prepare(recipe, call!, {
+          bindings = NativeBindings.prepare(recipe, call ?? {}, {
             ...contextOptions,
             vars,
           })
@@ -315,18 +428,36 @@ export function compile(options: compile.Options): compile.ReturnType {
       }
       return `${context}(${[...tables.keys()].join(',')})`
     }
-    if (call?.slots || call?.recipe?.payloads?.length) {
-      dynamic = true
+    const axes = Object.entries(recipe.axes)
+      .map(
+        ([axis, choices]) =>
+          `${JSON.stringify(axis)}:readonly ${JSON.stringify(choices)}`,
+      )
+      .join(';')
+
+    if (program) {
+      const scalar = !!(call?.slots || call?.recipe?.payloads?.length)
+      dynamic ||= scalar
+      finite ||= !scalar
       const compiled = (() => {
         try {
-          return NativeBindings.compile(recipe, call, contextOptions, bindings)
+          const compiled = NativeBindings.compile(
+            recipe,
+            call ?? {},
+            contextOptions,
+            bindings,
+          )
+          return scalar ? compiled : NativeBindings.finite(compiled)
         } catch (error) {
           if (error instanceof StyleSheet.CompileError) throw error
           throw new CompileError((error as Error).message)
         }
       })()
-      const value = create(dynamicHelper, compiled)
+      const value = create(scalar ? dynamicHelper : `${helper}Static`, compiled)
       if (!typed) return value
+      if (!call?.slots && !call?.recipe?.payloads?.length)
+        return `(${value} as import('zyzz/runtime').Native.Callable<{${axes}}>)`
+
       let input = call.valuesType ?? '{}'
       if (call.recipe) {
         input = `{${Object.entries(recipe.axes)
@@ -371,12 +502,6 @@ export function compile(options: compile.Options): compile.ReturnType {
           })
     if (options.contextual) compiledCalls.set(compiled, { styles, value })
     if (!typed) return value
-    const axes = Object.entries(compiled.axes)
-      .map(
-        ([axis, choices]) =>
-          `${JSON.stringify(axis)}:readonly ${JSON.stringify(choices)}`,
-      )
-      .join(';')
     return `(${value} as import('zyzz/runtime').Native.Callable<{${axes}}>)`
   }
 
@@ -483,10 +608,9 @@ export function compile(options: compile.Options): compile.ReturnType {
         throw new CompileError(
           `Packed native callable ${name} requires a static recipe contract.`,
         )
-      const expression = callable(
-        recipe,
-        `${specifier}:${name}`,
-        link.style?.dynamic
+      const expression = callable(recipe, `${specifier}:${name}`, {
+        nativeContext: link.style?.nativeContext,
+        ...(link.style?.dynamic
           ? {
               slots: link.style.dynamic.slots,
               recipe: {
@@ -496,8 +620,8 @@ export function compile(options: compile.Options): compile.ReturnType {
                 defaultPayloads: link.style.dynamic.defaultPayloads,
               },
             }
-          : undefined,
-      )
+          : {}),
+      })
       if (!link.style?.dynamic || !typed) return expression
       const type = `typeof import(${JSON.stringify(specifier)})${path
         .map((part) => `[${JSON.stringify(part)}]`)
@@ -698,7 +822,13 @@ export function compile(options: compile.Options): compile.ReturnType {
       imports.length ? `import ${imports.join(',')} from 'zyzz';` : '',
     )
   }
-  if (extracted.calls.length || compositions.length || packed.length) {
+  if (
+    extracted.calls.length ||
+    compositions.length ||
+    packed.length ||
+    variables.size ||
+    imports.size
+  ) {
     let offset = 0
     if (options.source.startsWith('#!')) {
       const newline = /\r\n|[\n\r\u2028\u2029]/.exec(options.source)
@@ -713,7 +843,7 @@ export function compile(options: compile.Options): compile.ReturnType {
       offset = node.end
     }
 
-    const prelude = `\nimport {Native as ${helper}${dynamic ? `,NativeDynamic as ${dynamicHelper}` : ''}${options.contextual ? `,NativeContext as ${helper}Context` : ''}} from 'zyzz/runtime';\n${[...factories].map(([expression, factory]) => `const ${factory.name}=(${factory.parameters.join(',')})=>${expression};`).join('\n')}\n${[...contexts].map(([expression, name]) => `const ${name}=${expression};`).join('\n')}\n${[...compositions, ...packed].join('\n')}\n`
+    const prelude = `\nimport {Native as ${helper}${dynamic ? `,NativeDynamic as ${dynamicHelper}` : ''}${finite ? `,NativeStatic as ${helper}Static` : ''}${options.contextual ? `,NativeContext as ${helper}Context` : ''}${variables.size ? `,NativeVars as ${helper}Vars` : ''}} from 'zyzz/runtime';\n${[...factories].map(([expression, factory]) => `const ${factory.name}=(${factory.parameters.join(',')})=>${expression};`).join('\n')}\n${[...contexts].map(([expression, name]) => `const ${name}=${expression};`).join('\n')}\n${[...variables].map(([value, name]) => `${shared?.definitions.has(value) ? 'export ' : ''}const ${name}=${helper}Vars.create(JSON.parse(${JSON.stringify(value)}));`).join('\n')}\n${[...imports, ...compositions, ...packed].join('\n')}\n`
     module.appendLeft(offset, prelude)
     edits.push({ start: offset, end: offset, code: prelude, expression: false })
   }
@@ -738,6 +868,8 @@ export declare namespace compile {
   type Options = Omit<StyleSheet.compile.Options, 'styles'> & {
     /** Internal Babel emission mode; authoring types are still validated. */
     readonly [Edits.runtime]?: boolean | undefined
+    /** Compiler-owned shared native variable profiles. */
+    readonly [NativeVars.shared]?: NativeVars.Shared | undefined
     /** Compiler-owned graph context. */
     readonly [Themes.context]?: Themes.Context | undefined
     /** Retain every set and scheme for render-local selection. */
@@ -751,7 +883,7 @@ export declare namespace compile {
     /** Label selected from supplied vars. Defaults to the token-fallback default table. */
     readonly set?: string | undefined
   }
-  /** Executable source with immutable recipe tables and authored source mappings. */
+  /** Executable source with immutable native data and authored source mappings. */
   type ReturnType = {
     /** Internal node replacements for syntax-tree adapters. */
     readonly [Edits.key]: readonly Edits.Edit[]
@@ -759,7 +891,7 @@ export declare namespace compile {
     readonly code: string
     /** Version-three source map encoded as JSON. */
     readonly map: string
-    /** All set/scheme tables for each extracted definition. */
+    /** Set/scheme tables for definitions without variant or scalar programs. */
     readonly recipes: Readonly<Record<string, Variants.Definition>>
   }
 }

package/src/compiler/Source.ts

@@ -269,6 +269,7 @@ export function extract(options: extract.Options): extract.ReturnType {
   const themes = (() => {
     try {
       return Themes.collect(program, {
+        native: options.target === 'native',
         staticBindings: staticData.bindings,
         namespace: `src-${Identity.label(
           options.moduleId
@@ -336,7 +337,7 @@ export function extract(options: extract.Options): extract.ReturnType {
       contributions.read(node, parent, binding)
 
       try {
-        if (variables.reference(node, parent, binding)) return
+        if (variables.reference(node, parent, ancestors, binding)) return
       } catch (error) {
         if (!(error instanceof Themes.InvalidError)) throw error
 
@@ -347,7 +348,16 @@ export function extract(options: extract.Options): extract.ReturnType {
 
       if (themes)
         try {
-          if (themes.reference(node, parent, ancestors, binding)) return
+          if (
+            themes.reference(
+              node,
+              parent,
+              ancestors,
+              binding,
+              (name) => scopeTracker.getDeclaration(name) ?? null,
+            )
+          )
+            return
         } catch (error) {
           if (!(error instanceof Themes.InvalidError)) throw error
 
@@ -1520,7 +1530,17 @@ export function extract(options: extract.Options): extract.ReturnType {
     const style = call && styles.find((style) => style.name === call.name)
     return {
       ...link,
-      ...(call && style ? { style: PackedStyles.create(call, style) } : {}),
+      ...(call && style
+        ? {
+            style: PackedStyles.create(
+              {
+                ...call,
+                nativeContext: themes?.nativeContext(call.start, call.end),
+              },
+              style,
+            ),
+          }
+        : {}),
       ...(link.members
         ? {
             members: Object.fromEntries(
@@ -1560,6 +1580,8 @@ export function extract(options: extract.Options): extract.ReturnType {
     ),
   }
   Object.defineProperty(definition, ClassName.labels, { enumerable: false })
+  const selections =
+    options.target === 'native' ? themes?.selectionUses : themes?.selections
 
   return Object.freeze({
     namespaces: contributionData.filter(
@@ -1611,8 +1633,8 @@ export function extract(options: extract.Options): extract.ReturnType {
     ...(themes?.scripts.size
       ? { themeScripts: Object.freeze([...themes.scripts]) }
       : {}),
-    ...(themes?.selections.size
-      ? { themeSelections: Object.freeze([...themes.selections]) }
+    ...(selections?.size
+      ? { themeSelections: Object.freeze([...selections]) }
       : {}),
     themeCalls: Object.freeze(themes?.calls ?? []),
     ...(themes?.staticTokens.length
@@ -1630,6 +1652,9 @@ export function extract(options: extract.Options): extract.ReturnType {
       : {}),
     themeReferences: Object.freeze(themes?.references ?? []),
     vars: themes?.themes ?? Object.freeze({}),
+    ...(themes?.varsReads.length
+      ? { nativeVars: Object.freeze(themes.varsReads) }
+      : {}),
   })
 }
 
@@ -1654,6 +1679,8 @@ export declare namespace extract {
 
   /** Ordered public compiler input and spans for later rewriting. */
   type ReturnType = {
+    /** Readonly native variable arguments and their complete catalogs. */
+    readonly nativeVars?: readonly Themes.VarsRead[] | undefined
     /** Module-owned namespace bindings retained when contributions are shared. */
     readonly namespaces?: readonly Namespace.Definition[] | undefined
     /** Static stylesheet effects and their source replacements. */

package/src/compiler/internal/Configurations.ts

@@ -252,10 +252,28 @@ export function collect(options: collect.Options): Themes.Link {
     ...(input.layers ? { layers: input.layers } : {}),
     ...(input.storageKey ? { storageKey: input.storageKey } : {}),
   }
+  const authoredType = type(
+    variableMode
+      ? {
+          ...normalized,
+          theme: undefined,
+          themes: undefined,
+          defaultTheme: undefined,
+          vars: 'themes' in normalized ? normalized.themes : normalized.theme,
+          ...('themes' in normalized
+            ? { defaultVars: normalized.defaultTheme }
+            : {}),
+          ...(authored.mappings !== undefined
+            ? { mappings: VariableSets.mappings(authored.mappings) }
+            : {}),
+        }
+      : normalized,
+  )
 
   return {
     binding: options.name,
     call: {
+      ...(options.nativeProvider ? { nativeProvider: true } : {}),
       ...(variableMode
         ? { variableConfig: true, variableMappings: authored.mappings }
         : {}),
@@ -269,9 +287,11 @@ export function collect(options: collect.Options): Themes.Link {
       options: normalized,
       start: options.expression.start,
       tokenType: selected?.call.tokenType ?? '{}',
-      type: variableMode
-        ? `import('zyzz').Config.VariableConfig<${type({ ...normalized, theme: undefined, themes: undefined, defaultTheme: undefined, vars: 'themes' in normalized ? normalized.themes : normalized.theme, ...('themes' in normalized ? { defaultVars: normalized.defaultTheme } : {}), ...(authored.mappings !== undefined ? { mappings: VariableSets.mappings(authored.mappings) } : {}) })}>`
-        : `import('zyzz').Config.create.ReturnType<${type(normalized)}>`,
+      type: options.nativeProvider
+        ? `import('zyzz/react-native').defineConfig.ReturnType<${authoredType}>`
+        : variableMode
+          ? `import('zyzz').Config.VariableConfig<${authoredType}>`
+          : `import('zyzz').Config.create.ReturnType<${authoredType}>`,
     },
     definition,
     kind: 'config',
@@ -289,6 +309,8 @@ export declare namespace collect {
     readonly expression: Ast.CallExpression
     /** Stable module/binding identity. */
     readonly name: string
+    /** Native factory supplies an ordinary React Provider export. */
+    readonly nativeProvider?: boolean | undefined
     /** Looks up preceding immutable theme definitions. */
     readonly resolve: (node: Ast.Node) => Themes.Link | undefined
   }