@tamagui/codemod-flat-values 0.0.0-bootstrap.0 → 3.0.0-beta.637.1

package/src/expressions.ts

@@ -0,0 +1,220 @@
+// Two different questions get asked about a dynamic style value, each answered
+// exactly one way.
+//
+// 1. Can the expression be rewritten? Only a tree of literals can: its `$token`
+//    spellings are right there in the source, so `active ? '$red10' : '$blue10'`
+//    becomes `active ? 'red10' : 'blue10'`. `literalTree` answers this from the
+//    AST.
+// 2. Can the expression be left alone? Only if its runtime type cannot carry a
+//    legacy `$token` string. `runtimeType` answers this from the type checker, so
+//    `const GREY = 'rgb(217, 215, 210)'` is provably safe while an untyped
+//    identifier is not.
+
+import { Node, SyntaxKind, type Expression, type TemplateExpression } from 'ts-morph'
+import { flatStringValue, type ModifierRegistryView } from './grammar'
+
+export function unwrapExpression(expression: Expression): Expression {
+  let current = expression
+  while (
+    Node.isParenthesizedExpression(current) ||
+    Node.isAsExpression(current) ||
+    Node.isTypeAssertion(current) ||
+    Node.isNonNullExpression(current)
+  ) {
+    current = current.getExpression()
+  }
+  return current
+}
+
+export function numericValue(expression: Expression): number | null {
+  const current = unwrapExpression(expression)
+  if (Node.isNumericLiteral(current)) return Number(current.getText())
+  if (Node.isPrefixUnaryExpression(current)) {
+    const operand = current.getOperand()
+    if (!Node.isNumericLiteral(operand)) return null
+    const value = Number(operand.getText())
+    const operator = current.getOperatorToken()
+    if (operator === SyntaxKind.MinusToken) return -value
+    if (operator === SyntaxKind.PlusToken) return value
+  }
+  return null
+}
+
+/** the statically known value of a legacy condition object leaf */
+export function staticLeafValue(
+  expression: Expression
+): { found: true; value: unknown } | null {
+  const current = unwrapExpression(expression)
+  if (Node.isStringLiteral(current) || Node.isNoSubstitutionTemplateLiteral(current)) {
+    return { found: true, value: current.getLiteralValue() }
+  }
+  const number = numericValue(current)
+  if (number !== null) return { found: true, value: number }
+  if (current.getKind() === SyntaxKind.TrueKeyword) return { found: true, value: true }
+  if (current.getKind() === SyntaxKind.FalseKeyword) return { found: true, value: false }
+  if (current.getKind() === SyntaxKind.NullKeyword) return { found: true, value: null }
+  return null
+}
+
+export type LiteralKind = 'number' | 'string' | 'nullish'
+
+export interface TreeError {
+  code: string
+  message: string
+}
+
+export interface LiteralTree {
+  kind: LiteralKind
+  /** the expression source with legacy token spellings rewritten */
+  text: string
+  /** original string literal chunks, for migrations that need authored names */
+  strings: readonly string[]
+  /** set when a token spelling in the tree has no flat name */
+  error: TreeError | null
+}
+
+/**
+ * One literal chunk's flat spelling. A chunk with no `$` is already flat, and one
+ * that has a `$` goes through the shared converter, so the same value refused as
+ * a clause payload (`url($asset)`) is refused here instead of being rewritten.
+ */
+function literalText(
+  value: string,
+  registry: ModifierRegistryView
+): { text: string; error: TreeError | null } {
+  if (!value.includes('$')) return { text: value, error: null }
+  const flat = flatStringValue(value, registry)
+  if (flat.text === null) {
+    return {
+      text: value,
+      error: {
+        code: flat.error?.code ?? 'unsupported-legacy-value',
+        message: flat.error?.message ?? `"${value}" has no flat spelling`,
+      },
+    }
+  }
+  return { text: flat.text, error: null }
+}
+
+function templateTree(
+  template: TemplateExpression,
+  registry: ModifierRegistryView
+): LiteralTree {
+  // every literal chunk converts on its own: `\`$accent${i}\`` names one token
+  // whose tail is computed, and a chunk holding quoted or url() content is refused
+  const head = literalText(template.getHead().getLiteralText(), registry)
+  let error = head.error
+  let text = `\`${head.text}`
+  const strings = [template.getHead().getLiteralText()]
+  for (const span of template.getTemplateSpans()) {
+    const literal = span.getLiteral().getLiteralText()
+    const tail = literalText(literal, registry)
+    error ??= tail.error
+    strings.push(literal)
+    text += `\${${span.getExpression().getText().trim()}}${tail.text}`
+  }
+  return { kind: 'string', text: `${text}\``, strings, error }
+}
+
+/**
+ * The expression as a tree of literals, or null when any leaf is computed. Every
+ * literal is reprinted, which is what strips `$` from token spellings.
+ */
+export function literalTree(
+  expression: Expression,
+  registry: ModifierRegistryView
+): LiteralTree | null {
+  const current = unwrapExpression(expression)
+
+  if (Node.isStringLiteral(current) || Node.isNoSubstitutionTemplateLiteral(current)) {
+    const value = current.getLiteralValue()
+    const literal = literalText(value, registry)
+    return {
+      kind: 'string',
+      text: JSON.stringify(literal.text),
+      strings: [value],
+      error: literal.error,
+    }
+  }
+  if (Node.isTemplateExpression(current)) return templateTree(current, registry)
+
+  const number = numericValue(current)
+  if (number !== null) {
+    return { kind: 'number', text: String(number), strings: [], error: null }
+  }
+
+  if (
+    current.getKind() === SyntaxKind.UndefinedKeyword ||
+    current.getKind() === SyntaxKind.NullKeyword ||
+    (Node.isIdentifier(current) && current.getText() === 'undefined')
+  ) {
+    return { kind: 'nullish', text: current.getText(), strings: [], error: null }
+  }
+
+  if (Node.isConditionalExpression(current)) {
+    const whenTrue = literalTree(current.getWhenTrue(), registry)
+    const whenFalse = literalTree(current.getWhenFalse(), registry)
+    if (!whenTrue || !whenFalse) return null
+    if (
+      whenTrue.kind !== whenFalse.kind &&
+      whenTrue.kind !== 'nullish' &&
+      whenFalse.kind !== 'nullish'
+    ) {
+      return null
+    }
+    return {
+      kind: whenTrue.kind === 'nullish' ? whenFalse.kind : whenTrue.kind,
+      text: `${current.getCondition().getText().trim()} ? ${whenTrue.text} : ${whenFalse.text}`,
+      strings: [...whenTrue.strings, ...whenFalse.strings],
+      error: whenTrue.error ?? whenFalse.error,
+    }
+  }
+
+  return null
+}
+
+export interface RuntimeType {
+  kind: 'number' | 'string' | 'unknown'
+  /** every string literal the type can be, or null when the set is open */
+  literals: readonly string[] | null
+}
+
+/** what the type checker can prove the expression evaluates to */
+export function runtimeType(expression: Expression): RuntimeType {
+  const type = unwrapExpression(expression).getType()
+  const parts = type.isUnion() ? type.getUnionTypes() : [type]
+  const literals: string[] = []
+  let numbers = 0
+  let strings = 0
+  let known = 0
+
+  for (const part of parts) {
+    if (part.isUndefined() || part.isNull()) continue
+    known++
+    if (part.isNumber() || part.isNumberLiteral()) {
+      numbers++
+      continue
+    }
+    if (part.isStringLiteral()) {
+      strings++
+      literals.push(String(part.getLiteralValue()))
+      continue
+    }
+    if (part.isString()) {
+      strings++
+      continue
+    }
+    return { kind: 'unknown', literals: null }
+  }
+
+  if (!known) return { kind: 'unknown', literals: null }
+  if (numbers === known) return { kind: 'number', literals: null }
+  if (strings === known) {
+    return { kind: 'string', literals: literals.length === known ? literals : null }
+  }
+  return { kind: 'unknown', literals: null }
+}
+
+export function compact(text: string): string {
+  return text.replace(/\s+/g, ' ').trim()
+}

package/src/grammar.ts

@@ -0,0 +1,180 @@
+// Every piece of style knowledge the codemod needs comes from
+// `@tamagui/style-grammar`: the value parser, the legacy condition converter, the
+// clause merge, and the property/unit tables. Nothing here re-derives grammar
+// behavior, so a converted program is spelled exactly the way the runtime and the
+// compiler will read it back.
+
+import { stylePropsAll } from '@tamagui/helpers'
+import { shorthands } from '@tamagui/shorthands/v6'
+import * as styleGrammarTooling from '@tamagui/style-grammar/tooling'
+import type {
+  ConvertLegacyConditionOptions,
+  LegacyConditionError,
+  LegacyConditionResult,
+} from './legacyConditions'
+import type {
+  ConversionReason,
+  ConversionTargets,
+  HostView,
+  ModifierRegistryView,
+  ParsedClause,
+  ParsedValue,
+} from '@tamagui/style-grammar/tooling'
+import { replaceV6BuiltInTokens } from './builtInNames'
+import {
+  convertLegacyConditionProp as convertLegacyConditionPropLocal,
+  pseudoToModifier,
+} from './legacyConditions'
+
+const grammar = styleGrammarTooling
+
+export const {
+  assessFlatConversion,
+  createModifierRegistry,
+  defaultMediaKeys,
+  evaluateProgram,
+  expandToLonghands,
+  grammarEntries,
+  grammarPlatformNames,
+  legacyPartComposite,
+  mergeProgramValues,
+  parseValue,
+  programEligibility,
+  standaloneValueProps,
+  parseTransformString,
+} = grammar
+
+export { pseudoToModifier }
+
+export type {
+  ConversionReason,
+  ConversionTargets,
+  HostView,
+  LegacyConditionError,
+  ModifierRegistryView,
+  ParsedClause,
+  ParsedValue,
+}
+
+export { shorthands }
+
+function renameBuiltInTokens(value: unknown): unknown {
+  if (typeof value === 'string') return replaceV6BuiltInTokens(value)
+  if (Array.isArray(value)) return value.map(renameBuiltInTokens)
+  if (value === null || typeof value !== 'object') return value
+
+  const renamed: Record<string, unknown> = {}
+  for (const key in value) {
+    renamed[key] = renameBuiltInTokens((value as Record<string, unknown>)[key])
+  }
+  return renamed
+}
+
+export function convertLegacyConditionProp(
+  propName: string,
+  value: unknown,
+  options: ConvertLegacyConditionOptions
+): LegacyConditionResult | null {
+  return convertLegacyConditionPropLocal(propName, renameBuiltInTokens(value), options)
+}
+
+/** every prop spelling the codemod treats as carrying a style value */
+export const styleProps: ReadonlySet<string> = new Set<string>([
+  ...grammarEntries.map((entry) => entry.prop),
+  ...Object.keys(standaloneValueProps),
+  ...Object.keys(stylePropsAll),
+  ...Object.keys(shorthands),
+  ...Object.values(shorthands),
+])
+
+/** the media keys of the V6 default config, plus the two motion queries */
+export const codemodMediaNames: readonly string[] = [
+  ...defaultMediaKeys,
+  'motionReduce',
+  'motionSafe',
+]
+
+export function resolveProp(prop: string): string {
+  return shorthands[prop] ?? prop
+}
+
+/**
+ * The one registered condition the codemod uses to reach the shared value
+ * converter for a single (prop, value) pair. Base values and clause payloads then
+ * spell identically by construction.
+ */
+const payloadProbeCondition = '$platform-web'
+
+export interface SharedPayload {
+  payload: string | null
+  errors: readonly LegacyConditionError[]
+}
+
+export function sharedPayload(
+  prop: string,
+  value: unknown,
+  registry: ModifierRegistryView
+): SharedPayload {
+  const converted = convertLegacyConditionProp(
+    payloadProbeCondition,
+    { [prop]: value },
+    { registry }
+  )
+  if (converted === null) {
+    throw new Error(
+      `the payload probe condition "${payloadProbeCondition}" is unregistered`
+    )
+  }
+  return {
+    payload: converted.contributions[0]?.clause.payload ?? null,
+    errors: converted.errors,
+  }
+}
+
+/**
+ * A property with no family split, no unit table entry, and no transform part, so
+ * the shared converter's answer for a string value is exactly its token rule and
+ * nothing else.
+ */
+const stringProbeProp = 'color'
+
+export interface FlatString {
+  /** the flat spelling, or null when the shared converter refused the value */
+  text: string | null
+  error: LegacyConditionError | null
+}
+
+/**
+ * The flat spelling of a legacy string, taken from the shared converter rather
+ * than re-derived. That converter drops `$` from token spellings anywhere in a
+ * composite value and refuses a value that mixes `$` with quoted or unquoted
+ * `url()` content, where a `$` is literal CSS the resolver never reads as a
+ * token candidate.
+ */
+export function flatStringValue(
+  value: string,
+  registry: ModifierRegistryView
+): FlatString {
+  const probe = sharedPayload(stringProbeProp, value, registry)
+  return { text: probe.payload, error: probe.errors[0] ?? null }
+}
+
+const unitSuffixes = new Map<string, string>()
+
+/**
+ * The unit a raw number carries for this property, taken from the shared
+ * converter itself: `px` for lengths, `deg` for `rotate`, nothing for the
+ * unitless table. A dynamic numeric expression interpolates with the same
+ * suffix a literal would have received.
+ */
+export function unitSuffix(prop: string, registry: ModifierRegistryView): string {
+  const cached = unitSuffixes.get(prop)
+  if (cached !== undefined) return cached
+  const probe = sharedPayload(prop, 1, registry)
+  const suffix =
+    probe.payload !== null && probe.payload.startsWith('1') ? probe.payload.slice(1) : ''
+  unitSuffixes.set(prop, suffix)
+  return suffix
+}
+
+export const printProgram = grammar.formatParsedValue