@tamagui/codemod-flat-values 3.0.0-beta.807.1 → 3.0.0-beta.881.1

package/src/index.ts

@@ -18,6 +18,12 @@ import {
 import { planContainers, type ContainerPlan } from './containers'
 import { convertJsxSite, convertStyleObject, type SiteReport } from './convert'
 import { compact, unwrapExpression } from './expressions'
+import {
+  addFunctionalVariantTypeImports,
+  convertFunctionalVariants,
+  type FunctionalVariantReport,
+  type RequiredTypeImport,
+} from './functionalVariants'
 import {
   codemodMediaNames,
   createModifierRegistry,
@@ -228,6 +234,28 @@ function variantSites(
         if (!Node.isPropertyAssignment(variant)) continue
         const variantName = compact(variant.getNameNode().getText())
         const branches = unwrapExpression(variant.getInitializerOrThrow())
+        if (Node.isCallExpression(branches)) {
+          const callee = branches.getExpression()
+          if (Node.isPropertyAccessExpression(callee) && callee.getName() === 'dynamic') {
+            const body = branches.getArguments()[0]
+            if (body && Node.isExpression(body)) {
+              for (const style of variantStyleObjects(body)) {
+                const site = convertStyleObject(
+                  style,
+                  'styled',
+                  `${label} variants.${variantName}`,
+                  registry,
+                  containers,
+                  targets,
+                  host,
+                  write
+                )
+                if (site) sites.push(site)
+              }
+            }
+          }
+          continue
+        }
         if (!Node.isObjectLiteralExpression(branches)) continue
         for (const branch of branches.getProperties()) {
           if (!Node.isPropertyAssignment(branch)) continue
@@ -250,32 +278,6 @@ function variantSites(
     }
   }
 
-  const compound = config.getProperty('compoundVariants')
-  if (Node.isPropertyAssignment(compound)) {
-    const array = unwrapExpression(compound.getInitializerOrThrow())
-    if (Node.isArrayLiteralExpression(array)) {
-      for (const [index, element] of array.getElements().entries()) {
-        const entry = unwrapExpression(element)
-        if (!Node.isObjectLiteralExpression(entry)) continue
-        const style = entry.getProperty('style')
-        if (!Node.isPropertyAssignment(style)) continue
-        for (const object of variantStyleObjects(style.getInitializerOrThrow())) {
-          const site = convertStyleObject(
-            object,
-            'styled',
-            `${label} compoundVariants[${index}]`,
-            registry,
-            containers,
-            targets,
-            host,
-            write
-          )
-          if (site) sites.push(site)
-        }
-      }
-    }
-  }
-
   return sites
 }
 
@@ -312,6 +314,8 @@ function inspectFile(
   const containers = planContainers(sourceFile, registry)
   const targets = conversionTargets(sourceFile.getFilePath())
   const sites: SiteReport[] = []
+  const functionalVariants: FunctionalVariantReport[] = []
+  const requiredTypeImports: RequiredTypeImport[] = []
   const styledCalls = sourceFile
     .getDescendantsOfKind(SyntaxKind.CallExpression)
     .filter((call) => provenance.isTamaguiStyledCall(call))
@@ -344,6 +348,9 @@ function inspectFile(
     if (!Node.isObjectLiteralExpression(config)) continue
     const label = `styled(${compact(call.getArguments()[0]?.getText() ?? 'unknown')}, …)`
     sites.push(...variantSites(config, label, registry, containers, targets, host, write))
+    const functional = convertFunctionalVariants(config, label, write)
+    functionalVariants.push(...functional.sites)
+    requiredTypeImports.push(...functional.requiredTypeImports)
     const site = convertStyleObject(
       config,
       'styled',
@@ -360,7 +367,15 @@ function inspectFile(
   sites.sort(
     (left, right) => left.line - right.line || left.label.localeCompare(right.label)
   )
-  return { file: relative(projectRoot, sourceFile.getFilePath()), sites }
+  functionalVariants.sort(
+    (left, right) => left.line - right.line || left.label.localeCompare(right.label)
+  )
+  if (write) addFunctionalVariantTypeImports(sourceFile, requiredTypeImports)
+  return {
+    file: relative(projectRoot, sourceFile.getFilePath()),
+    sites,
+    functionalVariants,
+  }
 }
 
 const usage = `Converts Tamagui style syntax to V3 flat property values and reports what it cannot convert.
@@ -513,5 +528,5 @@ if (write) {
 console.log(`wrote ${reportPath}`)
 if (write) console.log(`rewrote ${written} source files`)
 console.log(
-  `${summary.sites} sites: ${summary.clean - summary.waiting} clean, ${summary.needsRelocation} need relocation, ${summary.unknownHost} unknown host, ${summary.ineligible} ineligible, ${summary.waiting} waiting on runtime support, ${summary.flagged} syntax-flagged; ${summary.ignoredFiles} source files ignored`
+  `${summary.sites} style sites: ${summary.clean - summary.waiting} clean, ${summary.needsRelocation} need relocation, ${summary.unknownHost} unknown host, ${summary.ineligible} ineligible, ${summary.waiting} waiting on runtime support, ${summary.flagged} syntax-flagged; ${summary.functionalVariantSites} functional variants: ${summary.functionalVariantConverted} automatic, ${summary.functionalVariantFlagged} flagged; ${summary.ignoredFiles} source files ignored`
 )

package/src/legacyConditions.ts

@@ -319,7 +319,6 @@ export function convertLegacyConditionProp(
   const modifiers = root.modifiers.slice()
   const visit = (object: Record<string, unknown>, objectPath: string): void => {
     for (const childProp in object) {
-      if (!Object.prototype.hasOwnProperty.call(object, childProp)) continue
       const childValue = object[childProp]
       const childPath = `${objectPath}.${childProp}`
       const condition = resolveLegacyCondition(childProp, options.registry)

package/src/report.ts

@@ -1,8 +1,10 @@
 import type { Flag, SiteReport } from './convert'
+import type { FunctionalVariantReport } from './functionalVariants'
 
 export interface FileReport {
   file: string
   sites: SiteReport[]
+  functionalVariants: FunctionalVariantReport[]
 }
 
 function countCodes(flags: Iterable<Flag>): Array<[string, number]> {
@@ -25,6 +27,10 @@ export interface ReportSummary {
   /** sites with nothing to convert until the runtime catches up */
   waiting: number
   ignoredFiles: number
+  functionalVariantSites: number
+  functionalVariantConverted: number
+  functionalVariantFlagged: number
+  functionalVariantFlags: Record<string, number>
 }
 
 export function renderReport(
@@ -35,6 +41,9 @@ export function renderReport(
   write = false
 ): { text: string; summary: ReportSummary } {
   const sites = files.flatMap((file) => file.sites)
+  const functionalVariants = files.flatMap((file) => file.functionalVariants)
+  const convertedFunctionalVariants = functionalVariants.filter((site) => site.converted)
+  const flaggedFunctionalVariants = functionalVariants.filter((site) => !site.converted)
   const clean = sites.filter(
     (site) =>
       site.flags.length === 0 &&
@@ -64,12 +73,26 @@ export function renderReport(
       site.assessmentVerdict === 'clean'
   ).length
   const readyFiles = files.filter(
-    (file) => file.sites.length > 0 && file.sites.every((site) => site.legacyLeft === 0)
+    (file) =>
+      (file.sites.length > 0 || file.functionalVariants.length > 0) &&
+      file.sites.every((site) => site.legacyLeft === 0) &&
+      file.functionalVariants.every((site) => site.converted)
   )
-  const filesWithSites = files.filter((file) => file.sites.length > 0).length
+  const filesWithSites = files.filter(
+    (file) => file.sites.length > 0 || file.functionalVariants.length > 0
+  ).length
   const blockedFiles = files
-    .filter((file) => file.sites.some((site) => site.legacyLeft > 0))
+    .filter(
+      (file) =>
+        file.sites.some((site) => site.legacyLeft > 0) ||
+        file.functionalVariants.some((site) => !site.converted)
+    )
     .map((file) => file.file)
+  const functionalFlagCounts = countCodes(
+    flaggedFunctionalVariants.flatMap((site) => [
+      ...new Map(site.flags.map((flag) => [flag.code, flag])).values(),
+    ])
+  )
 
   const lines = [
     '# Flat-values codemod dry-run',
@@ -93,10 +116,19 @@ export function renderReport(
     `- ${ignoredFiles} source files skipped by \`.tamagui-flat-values-ignore\` markers`,
     `- ${jsx.length} JSX sites: ${cleanJsx} clean, ${jsx.length - cleanJsx} need review`,
     `- ${styled.length} styled config sites: ${cleanStyled} clean, ${styled.length - cleanStyled} need review`,
+    `- ${functionalVariants.length} functional variant sites found`,
+    `- ${convertedFunctionalVariants.length} functional variants have automatic styled.dynamic rewrites`,
+    `- ${flaggedFunctionalVariants.length} functional variants need manual migration`,
+    '',
+    '### Functional variant flag reasons',
+    '',
+    ...(functionalFlagCounts.length
+      ? functionalFlagCounts.map(([code, count]) => `- ${code}: ${count}`)
+      : ['- none']),
     '',
     '### Remaining manual migration',
     '',
-    `${readyFiles.length} of ${filesWithSites} files have no legacy condition object left after`,
+    `${readyFiles.length} of ${filesWithSites} files have no legacy condition object or flagged functional variant left after`,
     'conversion. V3 has no compatibility setting; finish the remaining files directly:',
     blockedFiles.length
       ? blockedFiles.map((file) => `\`${file}\``).join(', ')
@@ -156,8 +188,37 @@ export function renderReport(
   }
 
   for (const file of files) {
-    if (!file.sites.length) continue
+    if (!file.sites.length && !file.functionalVariants.length) continue
     lines.push('', `## \`${file.file}\``, '')
+    for (const site of file.functionalVariants) {
+      lines.push(
+        `### ${site.label} functional variant at line ${site.line} (${site.converted ? 'automatic' : 'manual'})`,
+        '',
+        'Before:',
+        '',
+        '```tsx',
+        site.before,
+        '```',
+        '',
+        site.converted ? 'Automatic rewrite:' : 'Left authored:',
+        '',
+        '```tsx',
+        site.after,
+        '```'
+      )
+      if (site.flags.length) {
+        lines.push('', 'Flags:', '')
+        for (const flag of site.flags) lines.push(`- **${flag.code}**: ${flag.detail}`)
+      }
+      if (site.draft) {
+        lines.push('', 'Generated `.resolve` draft:', '', '```tsx', site.draft, '```')
+      }
+      if (site.notes.length) {
+        lines.push('', 'Notes:', '')
+        for (const note of site.notes) lines.push(`- ${note}`)
+      }
+      lines.push('')
+    }
     for (const site of file.sites) {
       const status = [
         site.assessmentVerdict === 'clean' ? null : site.assessmentVerdict,
@@ -230,6 +291,10 @@ export function renderReport(
       warnings: warnings.length,
       waiting: waiting.length,
       ignoredFiles,
+      functionalVariantSites: functionalVariants.length,
+      functionalVariantConverted: convertedFunctionalVariants.length,
+      functionalVariantFlagged: flaggedFunctionalVariants.length,
+      functionalVariantFlags: Object.fromEntries(functionalFlagCounts),
     },
   }
 }