@tamagui/static 1.46.1 → 1.47.0

package/src/extractor/createExtractor.ts

@@ -7,10 +7,17 @@ import {
   expandStylesAndRemoveNullishValues,
   getSplitStyles,
   mediaQueryConfig,
+  propMapper,
   proxyThemeVariables,
   pseudoDescriptors,
 } from '@tamagui/core-node'
-import type { GetStyleState, PseudoStyles, StaticConfigParsed } from '@tamagui/web'
+import type {
+  GetStyleState,
+  PseudoStyles,
+  SplitStyleProps,
+  StaticConfig,
+  TamaguiComponentState,
+} from '@tamagui/web'
 import type { ViewStyle } from 'react-native'
 import { createDOMProps } from 'react-native-web-internals'
 
@@ -66,17 +73,6 @@ const INLINE_EXTRACTABLE = {
   }),
 }
 
-const defaultComponentState = {
-  focus: false,
-  hover: false,
-  unmounted: true,
-  press: false,
-  pressIn: false,
-  resolveVariablesAs: 'variable',
-  noClassNames: false,
-  isAnimated: false,
-} as const
-
 const validHooks = {
   useMedia: true,
   useTheme: true,
@@ -102,6 +98,20 @@ export function createExtractor(
     process.exit(1)
   }
 
+  const componentState: TamaguiComponentState = {
+    focus: false,
+    hover: false,
+    unmounted: true,
+    press: false,
+    pressIn: false,
+  } as const
+
+  const styleProps: SplitStyleProps = {
+    resolveVariablesAs: process.env.TAMAGUI_TARGET === 'native' ? 'value' : 'variable',
+    noClassNames: false,
+    isAnimated: false,
+  }
+
   const shouldAddDebugProp =
     // really basic disable this for next.js because it messes with ssr
     !process.env.npm_package_dependencies_next &&
@@ -202,7 +212,7 @@ export function createExtractor(
       return null
     }
 
-    function isValidStyleKey(name: string, staticConfig: StaticConfigParsed) {
+    function isValidStyleKey(name: string, staticConfig: StaticConfig) {
       if (!projectInfo) {
         throw new Error(`Tamagui extractor not loaded yet`)
       }
@@ -416,10 +426,6 @@ export function createExtractor(
       found: 0,
     }
 
-    const themeState =
-      // TODO
-      { theme: defaultTheme, name: '' }
-
     callTraverse({
       // @ts-ignore
       Program: {
@@ -588,8 +594,10 @@ export function createExtractor(
         const out = getSplitStyles(
           styles,
           Component.staticConfig,
-          themeState,
-          defaultComponentState,
+          defaultTheme,
+          '',
+          componentState,
+          styleProps,
           undefined,
           undefined,
           undefined,
@@ -768,12 +776,13 @@ export function createExtractor(
 
         try {
           const { staticConfig } = component
+          const defaultProps = { ...(staticConfig.defaultProps || {}) }
           const variants = staticConfig.variants || {}
           const isTextView = staticConfig.isText || false
           const validStyles = staticConfig?.validStyles ?? {}
 
           // find tag="a" tag="main" etc dom indicators
-          let tagName = staticConfig.defaultProps.tag ?? (isTextView ? 'span' : 'div')
+          let tagName = defaultProps.tag ?? (isTextView ? 'span' : 'div')
           traversePath
             .get('openingElement')
             .get('attributes')
@@ -882,12 +891,13 @@ export function createExtractor(
             classNames: {},
             style: {},
             theme: defaultTheme,
-            viewProps: staticConfig.defaultProps,
+            viewProps: defaultProps,
             conf: tamaguiConfig!,
-            curProps: staticConfig.defaultProps,
-            props: staticConfig.defaultProps,
-            state: {
-              ...defaultComponentState,
+            curProps: defaultProps,
+            props: defaultProps,
+            componentState,
+            styleProps: {
+              ...styleProps,
               resolveVariablesAs: 'auto',
             },
             debug: shouldPrintDebug,
@@ -1127,7 +1137,7 @@ export function createExtractor(
 
               // for now passing empty props {}, a bit odd, need to at least document
               // for now we don't expose custom components so just noting behavior
-              out = staticConfig.propMapper(name, styleValue, propMapperStyleState)
+              out = propMapper(name, styleValue, propMapperStyleState)
 
               if (out) {
                 if (!Array.isArray(out)) {
@@ -1204,7 +1214,7 @@ export function createExtractor(
                 if (shouldPrintDebug) {
                   logger.info(`  style: ${name} = ${styleValue}`)
                 }
-                if (!(name in staticConfig.defaultProps)) {
+                if (!(name in defaultProps)) {
                   if (!hasSetOptimized) {
                     res.optimized++
                     hasSetOptimized = true
@@ -1655,28 +1665,26 @@ export function createExtractor(
 
           // only if we flatten, ensure the default styles are there
           if (shouldFlatten) {
-            const defaultStyleAttrs = Object.keys(staticConfig.defaultProps).flatMap(
-              (key) => {
-                if (!isValidStyleKey(key, staticConfig)) {
-                  return []
-                }
-                const value = staticConfig.defaultProps[key]
-                const name = tamaguiConfig?.shorthands[key] || key
-                if (value === undefined) {
-                  logger.warn(
-                    `⚠️ Error evaluating default style for component, prop ${key} ${value}`
-                  )
-                  shouldDeopt = true
-                  return
-                }
-                const attr: ExtractedAttrStyle = {
-                  type: 'style',
-                  name,
-                  value: { [name]: value },
-                }
-                return attr
+            const defaultStyleAttrs = Object.keys(defaultProps).flatMap((key) => {
+              if (!isValidStyleKey(key, staticConfig)) {
+                return []
+              }
+              const value = defaultProps[key]
+              const name = tamaguiConfig?.shorthands[key] || key
+              if (value === undefined) {
+                logger.warn(
+                  `⚠️ Error evaluating default style for component, prop ${key} ${value}`
+                )
+                shouldDeopt = true
+                return
+              }
+              const attr: ExtractedAttrStyle = {
+                type: 'style',
+                name,
+                value: { [name]: value },
               }
-            ) as ExtractedAttr[]
+              return attr
+            }) as ExtractedAttr[]
 
             if (defaultStyleAttrs.length) {
               attrs = [...defaultStyleAttrs, ...attrs]
@@ -1699,16 +1707,6 @@ export function createExtractor(
             )
           }
 
-          const state = {
-            noClassNames: false,
-            focus: false,
-            hover: false,
-            unmounted: false, // TODO match logic in createComponent
-            press: false,
-            pressIn: false,
-            isAnimated: false,
-          }
-
           function mergeToEnd(obj: Object, key: string, val: any) {
             if (key in obj) {
               delete obj[key]
@@ -1767,9 +1765,9 @@ export function createExtractor(
 
           // must preserve exact order
           const completeProps = {}
-          for (const key in staticConfig.defaultProps) {
+          for (const key in defaultProps) {
             if (!(key in foundStaticProps)) {
-              completeProps[key] = staticConfig.defaultProps[key]
+              completeProps[key] = defaultProps[key]
             }
           }
           for (const key in foundStaticProps) {
@@ -1797,11 +1795,7 @@ export function createExtractor(
                     }
 
                     let out = Object.fromEntries(
-                      staticConfig.propMapper(
-                        name,
-                        variantValues.get(name),
-                        styleState
-                      ) || []
+                      propMapper(name, variantValues.get(name), styleState) || []
                     )
                     if (out && isTargetingHTML) {
                       const cn = out.className
@@ -1959,10 +1953,7 @@ export function createExtractor(
               ].join(' ')
             )
             logger.info(
-              [
-                '  - defaultProps: \n',
-                logLines(objToStr(staticConfig.defaultProps)),
-              ].join(' ')
+              ['  - defaultProps: \n', logLines(objToStr(defaultProps))].join(' ')
             )
             // prettier-ignore
             logger.info(['  - foundStaticProps: \n', logLines(objToStr(foundStaticProps))].join(' '))
@@ -1994,9 +1985,11 @@ export function createExtractor(
               const out = getSplitStyles(
                 props,
                 staticConfig,
-                themeState,
+                defaultTheme,
+                '',
+                componentState,
                 {
-                  ...state,
+                  ...styleProps,
                   fallbackProps: completeProps,
                 },
                 undefined,
@@ -2110,7 +2103,7 @@ export function createExtractor(
           if (shouldFlatten) {
             attrs.unshift({
               type: 'style',
-              value: getProps(staticConfig.defaultProps) as any,
+              value: getProps(defaultProps) as any,
             })
           }
 

package/types/extractor/bundleConfig.d.ts

@@ -1,4 +1,4 @@
-import type { StaticConfigParsed, TamaguiInternalConfig } from '@tamagui/web';
+import type { StaticConfig, TamaguiInternalConfig } from '@tamagui/web';
 import { TamaguiOptions } from '../types';
 type NameToPaths = {
     [key: string]: Set<string>;
@@ -6,7 +6,7 @@ type NameToPaths = {
 export type LoadedComponents = {
     moduleName: string;
     nameToInfo: Record<string, {
-        staticConfig: StaticConfigParsed;
+        staticConfig: StaticConfig;
     }>;
 };
 export type TamaguiProjectInfo = {

package/types/extractor/bundleConfig.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bundleConfig.d.ts","sourceRoot":"","sources":["../../src/extractor/bundleConfig.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAK7E,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAOzC,KAAK,WAAW,GAAG;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAChB,MAAM,EACN;QACE,YAAY,EAAE,kBAAkB,CAAA;KACjC,CACF,CAAA;CACF,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC/B,aAAa,CAAC,EAAE,qBAAqB,CAAA;IACrC,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAiBD,eAAO,MAAM,cAAc;;;;;;;;CAMK,CAAA;AAEhC,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;AAQxF,wBAAgB,uBAAuB,YAMtC;AAED,wBAAsB,gBAAgB,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,UAAQ;;;;sBAS5E;AAED,wBAAsB,YAAY,CAAC,KAAK,EAAE,cAAc;;;;eA0JvD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,GAAG,gBAAgB,EAAE,CA8H/E"}
+{"version":3,"file":"bundleConfig.d.ts","sourceRoot":"","sources":["../../src/extractor/bundleConfig.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,YAAY,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAA;AAKvE,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAA;AAOzC,KAAK,WAAW,GAAG;IACjB,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAC,MAAM,CAAC,CAAA;CAC3B,CAAA;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,EAAE,MAAM,CAAA;IAClB,UAAU,EAAE,MAAM,CAChB,MAAM,EACN;QACE,YAAY,EAAE,YAAY,CAAA;KAC3B,CACF,CAAA;CACF,CAAA;AAED,MAAM,MAAM,kBAAkB,GAAG;IAC/B,UAAU,CAAC,EAAE,gBAAgB,EAAE,CAAA;IAC/B,aAAa,CAAC,EAAE,qBAAqB,CAAA;IACrC,WAAW,CAAC,EAAE,WAAW,CAAA;CAC1B,CAAA;AAiBD,eAAO,MAAM,cAAc;;;;;;;;CAMK,CAAA;AAEhC,MAAM,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC,EAAE,SAAS,CAAC,CAAA;AAQxF,wBAAgB,uBAAuB,YAMtC;AAED,wBAAsB,gBAAgB,CAAC,KAAK,EAAE,cAAc,EAAE,OAAO,UAAQ;;;;sBAS5E;AAED,wBAAsB,YAAY,CAAC,KAAK,EAAE,cAAc;;;;eA0JvD;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,IAAI,GAAG,gBAAgB,EAAE,CA8H/E"}

package/types/extractor/createExtractor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAGA,OAAiB,EAAE,QAAQ,EAAmB,MAAM,iBAAiB,CAAA;AACrE,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAajC,OAAO,KAAK,EAGV,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EAGf,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAcnD,OAAO,EAAE,iBAAiB,EAA6B,MAAM,6BAA6B,CAAA;AA8C1F,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAE1D,KAAK,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAQ9C,wBAAgB,eAAe,CAC7B,EAAE,MAAgB,EAAE,GAAE,gBAAsC;;;;;yBA4BjC,cAAc;6BAPhB,cAAc;;mBAwBtB,UAAU,SAAS,mBAAmB;;;;;;;eAIpC,UAAU,SAAS,mBAAmB;;;;;;;EAykE1D"}
+{"version":3,"file":"createExtractor.d.ts","sourceRoot":"","sources":["../../src/extractor/createExtractor.ts"],"names":[],"mappings":"AAGA,OAAiB,EAAE,QAAQ,EAAmB,MAAM,iBAAiB,CAAA;AACrE,OAAO,KAAK,CAAC,MAAM,cAAc,CAAA;AAoBjC,OAAO,KAAK,EAGV,gBAAgB,EAChB,mBAAmB,EACnB,cAAc,EAGf,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAcnD,OAAO,EAAE,iBAAiB,EAA6B,MAAM,6BAA6B,CAAA;AAmC1F,MAAM,MAAM,SAAS,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAA;AAE1D,KAAK,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,IAAI,CAAA;AAQ9C,wBAAgB,eAAe,CAC7B,EAAE,MAAgB,EAAE,GAAE,gBAAsC;;;;;yBA0CjC,cAAc;6BAPhB,cAAc;;mBAwBtB,UAAU,SAAS,mBAAmB;;;;;;;eAIpC,UAAU,SAAS,mBAAmB;;;;;;;EAwjE1D"}

package/types/extractor/extractHelpers.d.ts

@@ -11,14 +11,14 @@ export declare function isValidThemeHook(props: TamaguiOptionsWithFileInfo, jsxP
 export declare const isInsideComponentPackage: (props: TamaguiOptionsWithFileInfo, moduleName: string) => any;
 export declare const isComponentPackage: (props: TamaguiOptionsWithFileInfo, srcName: string) => any;
 export declare function getValidComponent(props: TamaguiOptionsWithFileInfo, moduleName: string, componentName: string): false | {
-    staticConfig: import("@tamagui/web").StaticConfigParsed;
+    staticConfig: import("@tamagui/web").StaticConfig;
 } | null;
 export declare const isValidModule: (props: TamaguiOptionsWithFileInfo, moduleName: string) => {
     isLocal: boolean;
     isValid: any;
 };
 export declare const getValidImport: (props: TamaguiOptionsWithFileInfo, moduleName: string, componentName?: string) => {
-    staticConfig: import("@tamagui/web").StaticConfigParsed;
+    staticConfig: import("@tamagui/web").StaticConfig;
 } | null;
 export declare const isValidImport: (props: TamaguiOptionsWithFileInfo, moduleName: string, componentName?: string) => any;
 export declare const getValidComponentsPaths: {