zyzz 0.0.20 → 0.0.22

package/src/compiler/internal/NativeBindings.ts

@@ -1,13 +1,32 @@
 /** Lowers target-neutral callback declarations to ordered native binding data. @module */
-import type * as Recipe from '../../internal/Recipe.js'
 import * as Binding from '../../internal/Binding.js'
-import * as Token from '../../internal/Token.js'
-import type * as Style from '../../Style.js'
-import * as StyleSheet from '../../react-native/StyleSheet.js'
-import * as Scalar from '../../react-native/internal/Scalar.js'
-import type * as Runtime from '../../runtime/NativeDynamic.js'
 import type * as Native from '../Native.js'
+import type * as Recipe from '../../internal/Recipe.js'
+import type * as Runtime from '../../runtime/NativeDynamic.js'
+import * as Scalar from '../../react-native/internal/Scalar.js'
 import type * as Source from '../Source.js'
+import type * as Static from '../../runtime/NativeStatic.js'
+import type * as Style from '../../Style.js'
+import * as StyleSheet from '../../react-native/StyleSheet.js'
+import * as Token from '../../internal/Token.js'
+import * as Tokens from '../../react-native/internal/Tokens.js'
+
+type Step = Runtime.Program['rules'][number]['steps'][number]
+type PreparedStep =
+  | Extract<Step, { readonly style: string }>
+  | {
+      readonly property: keyof typeof Scalar.properties
+      readonly parts: readonly (
+        | string
+        | number
+        | Token.Reference
+        | { readonly slot: string; readonly number?: true }
+      )[]
+    }
+type PreparedRule = {
+  readonly matches: Runtime.Program['rules'][number]['matches']
+  readonly steps: readonly PreparedStep[]
+}
 
 /** Compiles static fragments and retains scalar assignments in authored order. */
 export function compile(
@@ -16,8 +35,36 @@ export function compile(
   options: Native.compile.Options,
   prepared = prepare(recipe, call, options),
 ): Runtime.create.Options {
+  const selected = options.vars?.[options.set ?? 'default']
+  const metadata =
+    selected &&
+    (Object.getOwnPropertyDescriptor(selected, Token.definition)?.value as
+      | Token.Metadata
+      | undefined)
   return {
     ...prepared,
+    program: {
+      slots: prepared.program.slots,
+      rules: prepared.program.rules.map((rule) => ({
+        ...rule,
+        steps: rule.steps.map((step) =>
+          'style' in step
+            ? step
+            : {
+                ...step,
+                parts: step.parts.map((part) =>
+                  Token.is(part)
+                    ? Tokens.resolve(part, {
+                        ...options,
+                        metadata,
+                        resolution: { schemeIndependent: true },
+                      })
+                    : part,
+                ),
+              },
+        ),
+      })),
+    },
     styles: StyleSheet.select(prepared.styles, {
       set: options.set ?? 'default',
       colorScheme: options.colorScheme,
@@ -25,6 +72,39 @@ export function compile(
   }
 }
 
+/** Removes dynamic instructions and resolves absolute line heights before publication. */
+export function finite(options: Runtime.create.Options): Static.create.Options {
+  const styles = { ...options.styles }
+  return {
+    axes: options.axes,
+    defaults: options.defaults,
+    rules: options.program.rules.map((rule) => ({
+      matches: rule.matches,
+      steps: rule.steps.map((step) => {
+        if ('style' in step) return step.style
+        if (
+          step.property !== 'lineHeight' ||
+          !step.parts.length ||
+          step.parts.some((part) => typeof part === 'object')
+        )
+          throw new Error(
+            'Static native recipes cannot contain runtime bindings.',
+          )
+        const value = (
+          step.parts.length === 1 ? step.parts[0]! : step.parts.join('')
+        ) as string | number
+        if (typeof value === 'number') return value
+        const name = String(Object.keys(styles).length)
+        styles[name] = {
+          lineHeight: Scalar.length(value, options, false, ['lineHeight']),
+        }
+        return name
+      }),
+    })),
+    styles,
+  }
+}
+
 /** Prepares immutable programs and all set/scheme tables before selection. */
 export function prepare(
   recipe: Recipe.Definition,
@@ -41,15 +121,10 @@ export function prepare(
     ),
   ])
   const fragments: Style.NamedStyle[] = []
-  const rules: Runtime.Program['rules'][number][] = []
-  let count = 1
-  for (const choices of Object.values(recipe.axes)) count *= choices.length + 1
-  if (count > 256)
-    throw new Error(
-      'Native recipes support at most 256 selections, including null choices.',
-    )
+  const rules: PreparedRule[] = []
+
   for (const rule of recipe.rules) {
-    const steps: Runtime.Program['rules'][number]['steps'][number][] = []
+    const steps: PreparedStep[] = []
     function fragment(style: Style.NamedStyle) {
       const name = String(fragments.length)
       fragments.push({ ...style, name })
@@ -94,14 +169,22 @@ export function prepare(
           )
         const values = parts.map((part) => {
           if (typeof part === 'string' || typeof part === 'number') return part
+          if (Token.is(part)) return part
           if (!Binding.is(part) || !available.has(part.name))
             throw new Error(
               'Native bindings require declared runtime scalar fields.',
             )
-          return { slot: part.name }
+          return {
+            slot: part.name,
+            ...(part.type === 'number' ? { number: true as const } : {}),
+          }
         })
+        const calculation = values.some(
+          (value) => typeof value === 'string' && /(?:^|\s)calc\(/i.test(value),
+        )
         if (
           values.length > 1 &&
+          !calculation &&
           !(
             values.length === 2 &&
             typeof values[0] === 'object' &&

package/src/compiler/internal/NativeMedia.ts

@@ -0,0 +1,342 @@
+/** Lowers native media rules and conditional tokens to bounded static alternatives. @module */
+import * as CssTree from 'css-tree'
+import type * as Media from '../../runtime/internal/NativeMedia.js'
+import * as Scalar from '../../react-native/internal/Scalar.js'
+import type * as Style from '../../Style.js'
+import type * as StyleSheet from '../../react-native/StyleSheet.js'
+import * as Token from '../../internal/Token.js'
+
+/** Retains authored precedence while selecting each possible media outcome. */
+export function prepare<variables extends StyleSheet.compile.Options['vars']>(
+  styles: readonly Style.NamedStyle[] | undefined,
+  vars: variables,
+  options: Scalar.Options,
+) {
+  const catalog: StyleSheet.compile.Options['vars'] = vars
+  const expressions = new Map<string, number>()
+  const names = new Map<string, number>()
+  const queries: Media.Query[] = []
+  const visited = new Set<object>()
+
+  function add(name: string) {
+    if (names.has(name)) return
+
+    const query = parse(name, options)
+    const expression = JSON.stringify(query)
+    let index = expressions.get(expression)
+    if (index === undefined) {
+      index = queries.length
+      if (index === 8)
+        throw new Error(
+          'Native media supports at most eight distinct conditions per definition.',
+        )
+
+      queries.push(query)
+      expressions.set(expression, index)
+    }
+
+    names.set(name, index)
+  }
+
+  function values(value: unknown) {
+    if (!value || typeof value !== 'object' || visited.has(value)) return
+
+    visited.add(value)
+    if (Token.is(value)) {
+      values(value.value)
+      for (const theme of Object.values(catalog ?? {})) {
+        const metadata = theme[Token.definition]
+        if (
+          metadata.contract === value.contract ||
+          (metadata.contract[Token.identity] !== undefined &&
+            metadata.contract[Token.identity] ===
+              value.contract[Token.identity])
+        )
+          values(metadata.values[value.path])
+      }
+    } else if (Token.isExpression(value)) value.parts.forEach(values)
+    else if ('default' in value) {
+      for (const [name, entry] of Object.entries(value)) {
+        if (name !== 'default') {
+          // Unsupported variable leaves keep their deferred read diagnostic.
+          try {
+            add(name)
+          } catch (error) {
+            if (!(error instanceof UnsupportedError)) throw error
+          }
+        }
+        values(entry)
+      }
+    } else if ('light' in value && 'dark' in value) {
+      values(value.light)
+      values(value.dark)
+    }
+  }
+
+  function visit(style: Style.NamedStyle) {
+    for (const declaration of style.declarations) values(declaration.value)
+    for (const rule of style.rules ?? []) {
+      if (rule.condition?.startsWith('@media')) add(rule.condition)
+      visit(rule.style)
+    }
+  }
+
+  styles?.forEach(visit)
+  if (!styles)
+    for (const theme of Object.values(catalog ?? {})) {
+      const metadata = theme[Token.definition]
+      Object.values(metadata.values).forEach(values)
+    }
+  if (!queries.length) return
+
+  return {
+    queries,
+    select(selection: string) {
+      const active = new Set<object>()
+      function value<entry>(entry: entry): entry {
+        if (!entry || typeof entry !== 'object') return entry
+        if (active.has(entry))
+          throw new Error('Native token aliases must not form a cycle.')
+
+        active.add(entry)
+        try {
+          if (Token.is(entry))
+            return Token.create({
+              ...entry,
+              value: value(entry.value),
+            }) as entry
+          if (Token.isExpression(entry))
+            return { ...entry, parts: entry.parts.map(value) } as entry
+          if ('default' in entry) {
+            const branches = Object.entries(entry)
+            if (
+              branches.some(([name]) => name !== 'default' && !names.has(name))
+            )
+              return Object.fromEntries(
+                branches
+                  .filter(([name]) => name === 'default' || !names.has(name))
+                  .map(([name, branch]) => [name, value(branch)]),
+              ) as entry
+
+            let selected = entry.default
+            for (const [name, branch] of branches)
+              if (name !== 'default' && selection[names.get(name)!] === '1')
+                selected = branch
+
+            return value(selected) as entry
+          }
+          if ('light' in entry && 'dark' in entry)
+            return {
+              ...entry,
+              dark: value(entry.dark),
+              light: value(entry.light),
+            }
+          return entry
+        } finally {
+          active.delete(entry)
+        }
+      }
+
+      function style(entry: Style.NamedStyle): Style.NamedStyle {
+        return {
+          ...entry,
+          declarations: entry.declarations.map((declaration) => ({
+            ...declaration,
+            value: value(declaration.value),
+          })),
+          ...(entry.rules
+            ? {
+                rules: entry.rules.flatMap((rule) => {
+                  const index =
+                    rule.condition === undefined
+                      ? undefined
+                      : names.get(rule.condition)
+                  if (index !== undefined && selection[index] !== '1') return []
+
+                  return [
+                    {
+                      ...(index === undefined ? rule : {}),
+                      style: style(rule.style),
+                    },
+                  ]
+                }),
+              }
+            : {}),
+        }
+      }
+
+      return {
+        style,
+        vars:
+          catalog &&
+          (Object.fromEntries(
+            Object.entries(catalog).map(([name, theme]) => {
+              const metadata = theme[Token.definition]
+              return [
+                name,
+                Object.defineProperty({}, Token.definition, {
+                  value: {
+                    ...metadata,
+                    values: Object.fromEntries(
+                      Object.entries(metadata.values).map(([path, entry]) => [
+                        path,
+                        value(entry),
+                      ]),
+                    ),
+                  },
+                }) as typeof theme,
+              ]
+            }),
+          ) as variables),
+      }
+    },
+    selections: Array.from({ length: 2 ** queries.length }, (_entry, index) =>
+      index.toString(2).padStart(queries.length, '0'),
+    ),
+  }
+}
+
+class UnsupportedError extends Error {
+  override name = 'NativeMedia.UnsupportedError'
+}
+
+function parse(input: string, options: Scalar.Options): Media.Query {
+  if (!input.startsWith('@media'))
+    throw new UnsupportedError(
+      'Native conditional variables require media queries.',
+    )
+  const parsed = CssTree.parse(input.slice(6), { context: 'mediaQueryList' })
+  let count = 0
+  function read(node: CssTree.CssNode): Media.Query {
+    if (++count > 128)
+      throw new Error('Native media queries exceed 128 syntax nodes.')
+    if (node.type === 'MediaQueryList') {
+      const queries = node.children.toArray().map(read)
+      return queries.length === 1 ? queries[0]! : { kind: 'or', queries }
+    }
+    if (node.type === 'MediaQuery') {
+      if (
+        (node.mediaType &&
+          !['all', 'screen'].includes(node.mediaType.toLowerCase())) ||
+        node.modifier?.toLowerCase() === 'not'
+      )
+        throw new UnsupportedError(
+          'Native media types support all or screen without negation.',
+        )
+      return node.condition
+        ? read(node.condition)
+        : { kind: 'compare', left: 0, operator: '=', right: 0 }
+    }
+    if (node.type === 'Condition') {
+      const parts = node.children.toArray()
+      if (parts.length === 1) return read(parts[0]!)
+      if (
+        parts.length === 2 &&
+        parts[0]?.type === 'Identifier' &&
+        parts[0].name.toLowerCase() === 'not'
+      )
+        return { kind: 'not', query: read(parts[1]!) }
+      const operator =
+        parts[1]?.type === 'Identifier'
+          ? parts[1].name.toLowerCase()
+          : undefined
+      if (
+        (operator !== 'and' && operator !== 'or') ||
+        parts.length % 2 !== 1 ||
+        parts.some(
+          (part, index) =>
+            index % 2 === 1 &&
+            (part.type !== 'Identifier' ||
+              part.name.toLowerCase() !== operator),
+        )
+      )
+        throw new UnsupportedError('Unsupported native media condition.')
+      return {
+        kind: operator,
+        queries: parts.filter((_part, index) => index % 2 === 0).map(read),
+      }
+    }
+    function operand(entry: CssTree.CssNode): number | 'height' | 'width' {
+      if (
+        entry.type === 'Identifier' &&
+        (entry.name.toLowerCase() === 'height' ||
+          entry.name.toLowerCase() === 'width')
+      )
+        return entry.name.toLowerCase() as 'height' | 'width'
+      if (entry.type === 'Dimension') {
+        try {
+          return Scalar.length(
+            `${entry.value}${entry.unit.toLowerCase()}`,
+            options,
+            false,
+            [],
+          )
+        } catch (error) {
+          throw new UnsupportedError((error as Error).message)
+        }
+      }
+      if (entry.type === 'Number' && Number(entry.value) === 0) return 0
+      throw new UnsupportedError(
+        'Native media ranges require width/height and px/rem thresholds.',
+      )
+    }
+    function comparison(
+      left: CssTree.CssNode,
+      operator: string | null,
+      right: CssTree.CssNode,
+    ): Media.Query {
+      if (!operator || !['<', '<=', '=', '>', '>='].includes(operator))
+        throw new UnsupportedError('Unsupported native media comparison.')
+      return {
+        kind: 'compare',
+        left: operand(left),
+        operator: operator as '<' | '<=' | '=' | '>' | '>=',
+        right: operand(right),
+      }
+    }
+    if (node.type === 'FeatureRange') {
+      const first = comparison(node.left, node.leftComparison, node.middle)
+      return node.right
+        ? {
+            kind: 'and',
+            queries: [
+              first,
+              comparison(node.middle, node.rightComparison, node.right),
+            ],
+          }
+        : first
+    }
+    if (node.type === 'Feature') {
+      const name = node.name.toLowerCase()
+      if (
+        name === 'orientation' &&
+        node.value?.type === 'Identifier' &&
+        ['landscape', 'portrait'].includes(node.value.name.toLowerCase())
+      )
+        return {
+          kind: 'compare',
+          left: 'width',
+          operator: node.value.name.toLowerCase() === 'landscape' ? '>' : '<=',
+          right: 'height',
+        }
+      const match = /^(?:(min|max)-)?(height|width)$/.exec(name)
+      if (match)
+        return {
+          kind: 'compare',
+          left: match[2] as 'height' | 'width',
+          operator:
+            match[1] === 'min'
+              ? '>='
+              : match[1] === 'max'
+                ? '<='
+                : node.value
+                  ? '='
+                  : '>',
+          right: node.value ? operand(node.value) : 0,
+        }
+    }
+    throw new UnsupportedError('Unsupported native media feature.')
+  }
+
+  return read(parsed)
+}