@tamagui/static 1.0.1-beta.192 → 1.0.1-beta.194

package/src/extractor/createExtractor.ts

@@ -1,12 +1,11 @@
 /* eslint-disable no-console */
-import path, { basename, relative } from 'path'
+import { basename, join, relative } from 'path'
 
-import traverse, { NodePath, Visitor } from '@babel/traverse'
+import traverse, { NodePath, TraverseOptions } from '@babel/traverse'
 import * as t from '@babel/types'
 import {
   PseudoStyles,
   StaticConfigParsed,
-  createDOMProps,
   expandStyles,
   getSplitStyles,
   getStylesAtomic,
@@ -14,6 +13,7 @@ import {
   proxyThemeVariables,
   pseudoDescriptors,
 } from '@tamagui/core-node'
+import { createDOMProps } from '@tamagui/rnw'
 import type { ViewStyle } from 'react-native'
 
 import { FAILED_EVAL } from '../constants.js'
@@ -29,12 +29,25 @@ import type {
 } from '../types.js'
 import { createEvaluator, createSafeEvaluator } from './createEvaluator.js'
 import { evaluateAstNode } from './evaluateAstNode.js'
-import { attrStr, findComponentName, isPresent, isValidImport, objToStr } from './extractHelpers.js'
+import {
+  attrStr,
+  findComponentName,
+  getValidComponent,
+  getValidImport,
+  isPresent,
+  isValidImport,
+  objToStr,
+} from './extractHelpers.js'
 import { findTopmostFunction } from './findTopmostFunction.js'
 import { getPrefixLogs } from './getPrefixLogs.js'
 import { cleanupBeforeExit, getStaticBindingsForScope } from './getStaticBindingsForScope.js'
 import { literalToAst } from './literalToAst.js'
-import { TamaguiProjectInfo, loadTamagui, loadTamaguiSync } from './loadTamagui.js'
+import {
+  LoadedComponents,
+  TamaguiProjectInfo,
+  loadTamagui,
+  loadTamaguiSync,
+} from './loadTamagui.js'
 import { logLines } from './logLines.js'
 import { normalizeTernaries } from './normalizeTernaries.js'
 import { removeUnusedHooks } from './removeUnusedHooks.js'
@@ -71,6 +84,8 @@ export type Extractor = ReturnType<typeof createExtractor>
 
 type FileOrPath = NodePath<t.Program> | t.File
 
+let hasLoggedBaseInfo = false
+
 export function createExtractor({ logger = console }: ExtractorOptions = { logger: console }) {
   if (!process.env.TAMAGUI_TARGET) {
     console.log('⚠️ Please set process.env.TAMAGUI_TARGET to either "web" or "native"')
@@ -156,6 +171,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
       disableExtractVariables,
       disableDebugAttr,
       disableExtractFoundComponents,
+      includeExtensions = ['.tsx', '.jsx'],
       extractStyledDefinitions = false,
       prefixLogs,
       excludeProps,
@@ -165,7 +181,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
 
     let shouldPrintDebug = options.shouldPrintDebug || false
 
-    if (disable) {
+    if (disable === true || (Array.isArray(disable) && disable.includes(sourcePath))) {
       return null
     }
     if (sourcePath === '') {
@@ -174,6 +190,20 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
     if (!components) {
       throw new Error(`Must provide components`)
     }
+    if (includeExtensions && !includeExtensions.some((ext) => sourcePath.endsWith(ext))) {
+      if (shouldPrintDebug) {
+        logger.info(
+          `Ignoring file due to includeExtensions: ${sourcePath}, includeExtensions: ${includeExtensions.join(
+            ', '
+          )}`
+        )
+      }
+      return null
+    }
+
+    /**
+     * Step 1: Determine if importing any statically extractable components
+     */
 
     const isTargetingHTML = target === 'html'
     const ogDebug = shouldPrintDebug
@@ -181,10 +211,31 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
     const propsWithFileInfo: TamaguiOptionsWithFileInfo = {
       ...options,
       sourcePath,
+      allLoadedComponents: [...components],
     }
 
-    if (shouldPrintDebug === 'verbose') {
-      console.log('tamagui.config.ts:', { components, config })
+    if (!hasLoggedBaseInfo) {
+      hasLoggedBaseInfo = true
+      if (shouldPrintDebug) {
+        logger.info(
+          [
+            'loaded components:',
+            propsWithFileInfo.allLoadedComponents
+              .map((comp) => Object.keys(comp.nameToInfo).join(', '))
+              .join(', '),
+          ].join(' ')
+        )
+      }
+      if (process.env.DEBUG?.startsWith('tamagui')) {
+        const next = [...propsWithFileInfo.allLoadedComponents].map((info) => {
+          const nameToInfo = { ...info.nameToInfo }
+          for (const key in nameToInfo) {
+            delete nameToInfo[key].staticConfig.validStyles
+          }
+          return { ...info, nameToInfo }
+        })
+        logger.info(['loaded:', JSON.stringify(next, null, 2)].join('\n'))
+      }
     }
 
     tm.mark('load-tamagui', !!shouldPrintDebug)
@@ -194,13 +245,12 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
 
     if (!firstTheme || typeof firstTheme !== 'object') {
       console.error(`Missing theme, an error occurred when importing your config`)
-      console.log(`Got themes:`, tamaguiConfig.themes)
+      console.log(`Got config:`, tamaguiConfig)
       console.log(`Looking for theme:`, firstThemeName)
       process.exit(0)
     }
 
     const proxiedTheme = proxyThemeVariables(firstTheme)
-
     type AccessListener = (key: string) => void
     const themeAccessListeners = new Set<AccessListener>()
     const defaultTheme = new Proxy(proxiedTheme, {
@@ -215,19 +265,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
     // @ts-ignore
     const body = fileOrPath.type === 'Program' ? fileOrPath.get('body') : fileOrPath.program.body
 
-    /**
-     * Step 1: Determine if importing any statically extractable components
-     */
-
-    const validComponents: { [key: string]: any } = Object.keys(components)
-      // check if uppercase to avoid hitting media query proxy before init
-      .filter((key) => key[0].toUpperCase() === key[0] && !!components[key]?.staticConfig)
-      .reduce((obj, name) => {
-        obj[name] = components[name]
-        return obj
-      }, {})
-
-    if (Object.keys(validComponents).length === 0) {
+    if (Object.keys(components).length === 0) {
       console.warn(`Warning: Tamagui didn't find any valid components (DEBUG=tamagui for more)`)
       if (process.env.DEBUG === 'tamagui') {
         console.log(`components`, Object.keys(components), components)
@@ -235,27 +273,33 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
     }
 
     if (shouldPrintDebug === 'verbose') {
-      logger.info(`validComponents ${Object.keys(validComponents).join(', ')}`)
+      logger.info(
+        `allLoadedComponent modules ${propsWithFileInfo.allLoadedComponents
+          .map((k) => k.moduleName)
+          .join(', ')}`
+      )
     }
 
     let doesUseValidImport = false
     let hasImportedTheme = false
 
+    const importDeclarations: t.ImportDeclaration[] = []
+
     for (const bodyPath of body) {
       if (bodyPath.type !== 'ImportDeclaration') continue
       const node = ('node' in bodyPath ? bodyPath.node : bodyPath) as t.ImportDeclaration
-      const from = node.source.value
+      const moduleName = node.source.value
+
+      // if importing valid module
+      const valid = isValidImport(propsWithFileInfo, moduleName)
 
-      // if importing styled()
-      const valid = isValidImport(propsWithFileInfo, from)
+      if (valid) {
+        importDeclarations.push(node)
+      }
 
       if (extractStyledDefinitions) {
         if (valid) {
-          if (
-            node.specifiers.some((specifier) => {
-              return specifier.local.name === 'styled'
-            })
-          ) {
+          if (node.specifiers.some((specifier) => specifier.local.name === 'styled')) {
             doesUseValidImport = true
             break
           }
@@ -264,10 +308,12 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
 
       if (valid) {
         const names = node.specifiers.map((specifier) => specifier.local.name)
-        const isValidComponent = names.some((name) => !!(validComponents[name] || validHooks[name]))
+        const isValidComponent = names.some((name) =>
+          Boolean(isValidImport(propsWithFileInfo, moduleName, name) || validHooks[name])
+        )
         if (shouldPrintDebug === 'verbose') {
           logger.info(
-            `import ${names.join(', ')} from ${from} isValidComponent ${isValidComponent}`
+            `import ${names.join(', ')} from ${moduleName} isValidComponent ${isValidComponent}`
           )
         }
         if (isValidComponent) {
@@ -278,13 +324,23 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
     }
 
     if (shouldPrintDebug) {
-      logger.info(`source: ${sourcePath} doesUseValidImport ${doesUseValidImport}`)
+      logger.info(`file: ${sourcePath} ${JSON.stringify({ doesUseValidImport, hasImportedTheme })}`)
     }
 
     if (!doesUseValidImport) {
       return null
     }
 
+    function getValidImportedComponent(componentName: string) {
+      const importDeclaration = importDeclarations.find((dec) =>
+        dec.specifiers.some((spec) => spec.local.name === componentName)
+      )
+      if (!importDeclaration) {
+        return null
+      }
+      return getValidImport(propsWithFileInfo, importDeclaration.source.value, componentName)
+    }
+
     tm.mark('import-check', !!shouldPrintDebug)
 
     let couldntParse = false
@@ -293,10 +349,14 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
     // only keeping a cache around per-file, reset it if it changes
     const bindingCache: Record<string, string | null> = {}
 
-    const callTraverse = (a: Visitor<{}>) => {
+    const callTraverse = (a: TraverseOptions<any>) => {
       return fileOrPath.type === 'File' ? traverse(fileOrPath, a) : fileOrPath.traverse(a)
     }
 
+    const shouldDisableExtraction =
+      disableExtraction === true ||
+      (Array.isArray(disableExtraction) && disableExtraction.includes(sourcePath))
+
     /**
      * Step 2: Statically extract from JSX < /> nodes
      */
@@ -311,6 +371,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
     }
 
     callTraverse({
+      // @ts-ignore
       Program: {
         enter(path) {
           programPath = path
@@ -319,7 +380,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
 
       // styled() calls
       CallExpression(path) {
-        if (disable || disableExtraction || extractStyledDefinitions === false) {
+        if (disable || shouldDisableExtraction || extractStyledDefinitions === false) {
           return
         }
 
@@ -331,20 +392,31 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
           t.isVariableDeclarator(path.parent) && t.isIdentifier(path.parent.id)
             ? path.parent.id.name
             : 'unknown'
+
         const definition = path.node.arguments[1]
 
         if (!name || !definition || !t.isObjectExpression(definition)) {
           return
         }
 
-        let Component = validComponents[name] as { staticConfig: StaticConfigParsed } | undefined
+        let Component = getValidImportedComponent(name)
 
         if (!Component) {
-          if (disableExtractFoundComponents) {
+          if (disableExtractFoundComponents === true) {
+            return
+          }
+          if (
+            Array.isArray(disableExtractFoundComponents) &&
+            disableExtractFoundComponents.includes(name)
+          ) {
             return
           }
 
           try {
+            if (shouldPrintDebug) {
+              logger.info(`Unknown component ${name}, attempting dynamic load: ${sourcePath}`)
+            }
+
             const out = loadTamaguiSync({
               // TODO would extract more, is NO-OP for now..
               forceExports: true,
@@ -352,16 +424,22 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
               components: [sourcePath],
             })
 
-            if (out.components?.[name]) {
-              // add new components
-              // TODO dont Clobber, do by file
-              Object.assign(validComponents, out.components)
+            if (!out?.components) {
+              if (shouldPrintDebug) {
+                logger.info(`Couldn't load, got ${out}`)
+              }
+              return
             }
 
-            Component = validComponents[name]
+            propsWithFileInfo.allLoadedComponents = [
+              ...propsWithFileInfo.allLoadedComponents,
+              ...out.components,
+            ]
+
+            Component = out.components.flatMap((x) => x.nameToInfo[name] ?? [])[0]
 
             if (shouldPrintDebug) {
-              logger.info([`Loaded`, Object.keys(out.components).join(', '), !!Component].join(' '))
+              logger.info([`Tamagui Loaded`, JSON.stringify(out.components), !!Component].join(' '))
             }
           } catch (err: any) {
             if (shouldPrintDebug) {
@@ -411,7 +489,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
         const attemptEval = !evaluateVars
           ? evaluateAstNode
           : createEvaluator({
-              props: options,
+              props: propsWithFileInfo,
               staticNamespace,
               sourcePath,
               shouldPrintDebug,
@@ -492,6 +570,10 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
       },
 
       JSXElement(traversePath) {
+        if (shouldDisableExtraction) {
+          return
+        }
+
         tm.mark('jsx-element', !!shouldPrintDebug)
 
         const node = traversePath.node.openingElement
@@ -506,6 +588,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
 
         // validate its a proper import from tamagui (or internally inside tamagui)
         const binding = traversePath.scope.getBinding(node.name.name)
+        let modulePath = ''
 
         if (binding) {
           if (!t.isImportDeclaration(binding.path.parent)) {
@@ -514,24 +597,16 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
             }
             return
           }
-          const source = binding.path.parent.source
-          if (!isValidImport(propsWithFileInfo, source.value)) {
+          modulePath = binding.path.parent.source.value
+          if (!isValidImport(propsWithFileInfo, modulePath, binding.identifier.name)) {
             if (shouldPrintDebug) {
-              logger.info(` - Binding not internal import or from components ${source.value}`)
-            }
-            return
-          }
-          if (!validComponents[binding.identifier.name]) {
-            if (shouldPrintDebug) {
-              logger.info(
-                ` - Binding not valid component (binding.identifier.name) ${binding.identifier.name}`
-              )
+              logger.info(` - Binding not internal import or from components ${modulePath}`)
             }
             return
           }
         }
 
-        const component = validComponents[node.name.name] as { staticConfig?: StaticConfigParsed }
+        const component = getValidComponent(propsWithFileInfo, modulePath, node.name.name)
         if (!component || !component.staticConfig) {
           if (shouldPrintDebug) {
             logger.info(` - No Tamagui conf on this: ${node.name.name}`)
@@ -557,7 +632,8 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
           .filter(
             (n) => t.isJSXAttribute(n) && t.isJSXIdentifier(n.name) && n.name.name === 'debug'
           )
-          .map((n) => {
+          // @ts-ignore
+          .map((n: t.JSXAttribute) => {
             if (n.value === null) return true
             if (t.isStringLiteral(n.value)) return n.value.value as 'verbose'
             return false
@@ -658,7 +734,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
           const attemptEval = !evaluateVars
             ? evaluateAstNode
             : createEvaluator({
-                props: options,
+                props: propsWithFileInfo,
                 staticNamespace,
                 sourcePath,
                 traversePath,
@@ -1405,7 +1481,11 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
                 traversePath.node.children.every((x) => x.type === 'JSXText')))
 
           const themeVal = inlined.get('theme')
-          inlined.delete('theme')
+
+          // on native we can't flatten when theme prop is set
+          if (target !== 'native') {
+            inlined.delete('theme')
+          }
 
           for (const [key] of [...inlined]) {
             const isStaticObjectVariant = staticConfig.variants?.[key] && variantValues.has(key)
@@ -1416,13 +1496,14 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
 
           const canFlattenProps = inlined.size === 0
 
-          let shouldFlatten =
+          let shouldFlatten = Boolean(
             flatNode &&
-            !shouldDeopt &&
-            canFlattenProps &&
-            !hasSpread &&
-            staticConfig.neverFlatten !== true &&
-            (staticConfig.neverFlatten === 'jsx' ? hasOnlyStringChildren : true)
+              !shouldDeopt &&
+              canFlattenProps &&
+              !hasSpread &&
+              staticConfig.neverFlatten !== true &&
+              (staticConfig.neverFlatten === 'jsx' ? hasOnlyStringChildren : true)
+          )
 
           const shouldWrapTheme = shouldFlatten && themeVal
           const usedThemeKeys = new Set<string>()
@@ -1432,7 +1513,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
             themeAccessListeners.add((key) => {
               shouldFlatten = false
               usedThemeKeys.add(key)
-              if (shouldPrintDebug) {
+              if (shouldPrintDebug === 'verbose') {
                 logger.info([' ! accessing theme key, avoid flatten', key].join(' '))
               }
             })
@@ -1517,6 +1598,9 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
           }
 
           if (shouldDeopt) {
+            if (shouldPrintDebug) {
+              logger.info(`Deopting`)
+            }
             node.attributes = ogAttributes
             return
           }
@@ -1852,6 +1936,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
                 },
                 undefined,
                 undefined,
+                undefined,
                 debugPropValue
               )
 
@@ -1882,6 +1967,15 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
             throw new Error(`Impossible, no styles`)
           }
 
+          const isNativeNotFlat = !shouldFlatten && target === 'native'
+          if (isNativeNotFlat) {
+            if (shouldPrintDebug) {
+              logger.info(`Disabled flattening except for simple cases on native for now`)
+              node.attributes = ogAttributes
+              return null
+            }
+          }
+
           let getStyleError: any = null
 
           // fix up ternaries, combine final style values
@@ -1925,7 +2019,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
           if (getStyleError) {
             logger.info([' ⚠️ postprocessing error, deopt', getStyleError].join(' '))
             node.attributes = ogAttributes
-            return node
+            return null
           }
 
           // final lazy extra loop:
@@ -1996,9 +2090,11 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
             if (shouldPrintDebug) {
               logger.info(['  [✅] flattening', originalNodeName, flatNode].join(' '))
             }
+            // @ts-ignore
             node.name.name = flatNode
             res.flattened++
             if (closingElement) {
+              // @ts-ignore
               closingElement.name.name = flatNode
             }
           }
@@ -2010,6 +2106,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
           }
 
           onExtractTag({
+            parserProps: propsWithFileInfo,
             attrs,
             node,
             lineNumbers,
@@ -2018,7 +2115,7 @@ export function createExtractor({ logger = console }: ExtractorOptions = { logge
             jsxPath: traversePath,
             originalNodeName,
             isFlattened: shouldFlatten,
-            programPath,
+            programPath: programPath!,
             completeProps,
             staticConfig,
           })

package/src/extractor/extractHelpers.ts

@@ -58,7 +58,7 @@ export const ternaryStr = (x: Ternary) => {
     ? x.test.name
     : t.isMemberExpression(x.test)
     ? [x.test.object['name'], x.test.property['name']]
-    : generate(x.test).code
+    : generate(x.test as any).code
   return [
     'ternary(',
     conditional,
@@ -118,9 +118,9 @@ export function isValidThemeHook(
   return true
 }
 
-export const isInsideComponentPackage = (props: TamaguiOptionsWithFileInfo, srcName: string) => {
+export const isInsideComponentPackage = (props: TamaguiOptionsWithFileInfo, moduleName: string) => {
   return getValidComponentsPaths(props).some((path) => {
-    return srcName.startsWith(path)
+    return moduleName.startsWith(path)
   })
 }
 
@@ -130,15 +130,62 @@ export const isComponentPackage = (props: TamaguiOptionsWithFileInfo, srcName: s
   })
 }
 
-export const isValidImport = (props: TamaguiOptionsWithFileInfo, srcName: string) => {
-  if (typeof srcName !== 'string') {
-    // eslint-disable-next-line no-console
-    console.trace(`Invalid file name: ${srcName}`)
+export function getValidComponent(
+  props: TamaguiOptionsWithFileInfo,
+  moduleName: string,
+  componentName: string
+) {
+  // must be uppercase of course
+  if (componentName[0].toUpperCase() !== componentName[0]) {
     return false
   }
-  return srcName.startsWith('.')
-    ? isInsideComponentPackage(props, srcName)
-    : isComponentPackage(props, srcName)
+
+  for (const loaded of props.allLoadedComponents) {
+    const isInModule = moduleName === '*' || moduleName.startsWith(loaded.moduleName)
+    const foundComponent = loaded.nameToInfo[componentName]
+    // eslint-disable-next-line no-console
+    if (isInModule && foundComponent) {
+      return foundComponent
+    }
+  }
+
+  return null
+}
+
+export const isValidModule = (props: TamaguiOptionsWithFileInfo, moduleName: string) => {
+  if (typeof moduleName !== 'string') {
+    throw new Error(`No module name`)
+  }
+  const isLocal = moduleName.startsWith('.')
+  return {
+    isLocal,
+    isValid: isLocal
+      ? isInsideComponentPackage(props, moduleName)
+      : isComponentPackage(props, moduleName),
+  }
+}
+
+export const getValidImport = (
+  props: TamaguiOptionsWithFileInfo,
+  moduleName: string,
+  componentName?: string
+) => {
+  const { isValid, isLocal } = isValidModule(props, moduleName)
+  if (!isValid || !componentName) {
+    return null
+  }
+  return getValidComponent(props, isLocal ? '*' : moduleName, componentName) || null
+}
+
+export const isValidImport = (
+  props: TamaguiOptionsWithFileInfo,
+  moduleName: string,
+  componentName?: string
+) => {
+  if (!componentName) {
+    return isValidModule(props, moduleName).isValid
+  }
+  return Boolean(getValidImport(props, moduleName, componentName))
 }
 
 const getValidComponentPackages = memoize((props: TamaguiOptionsWithFileInfo) => {

package/src/extractor/extractToClassNames.ts

@@ -36,19 +36,21 @@ export type ExtractedResponse = {
   map: any // RawSourceMap from 'source-map'
 }
 
+export type ExtractToClassNamesProps = {
+  extractor: Extractor
+  source: string | Buffer
+  sourcePath: string
+  options: TamaguiOptions
+  shouldPrintDebug: boolean | 'verbose'
+}
+
 export async function extractToClassNames({
   extractor,
   source,
   sourcePath,
   options,
   shouldPrintDebug,
-}: {
-  extractor: Extractor
-  source: string | Buffer
-  sourcePath: string
-  options: TamaguiOptions
-  shouldPrintDebug: boolean | 'verbose'
-}): Promise<ExtractedResponse | null> {
+}: ExtractToClassNamesProps): Promise<ExtractedResponse | null> {
   const tm = timer()
 
   if (typeof source !== 'string') {
@@ -98,6 +100,7 @@ export async function extractToClassNames({
       return tag
     },
     onExtractTag: ({
+      parserProps,
       attrs,
       node,
       attemptEval,
@@ -223,7 +226,7 @@ export async function extractToClassNames({
           }
           case 'ternary': {
             const mediaExtraction = extractMediaStyle(
-              { ...options, sourcePath },
+              parserProps,
               attr.value,
               jsxPath,
               extractor.getTamagui()!,
@@ -383,7 +386,7 @@ export async function extractToClassNames({
     .trim()
 
   const result = generate(
-    ast,
+    ast as any,
     {
       concise: false,
       filename: sourcePath,

package/src/extractor/getPropValueFromAttributes.ts

@@ -70,7 +70,7 @@ export function getPropValueFromAttributes(
             return false
           }
           throw new Error(
-            `unsupported spread of type "${attr.argument.type}": ${generate(attr).code}`
+            `unsupported spread of type "${attr.argument.type}": ${generate(attr as any).code}`
           )
         }
         return false