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

package/src/createTamagui.ts

@@ -170,15 +170,15 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     }
   })()
 
-  // faster lookups token keys become $keys to match input
-  const tokensParsed: any = parseTokens(configIn.tokens)
-
-  const getCSS = () => {
-    return `${themeConfig.css}\n${getAllRules().join('\n')}`
-  }
+  // faster $lookups
+  const tokensParsed: any = Object.fromEntries(
+    Object.entries(configIn.tokens).map(([k, v]) => [
+      k,
+      Object.fromEntries(Object.entries(v).map(([k, v]) => [`$${k}`, v])),
+    ])
+  )
 
   const shorthands = configIn.shorthands || {}
-
   const config: TamaguiInternalConfig = {
     fontLanguages: [],
     defaultTheme: 'light',
@@ -195,7 +195,11 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     themeConfig,
     tokensParsed,
     parsed: true,
-    getCSS,
+    getCSS: () => `
+${themeConfig.css}
+${getAllRules().join('\n')}
+.is_Text .is_Text { display: inline-flex; }
+`,
   }
 
   configureMedia(config)
@@ -209,6 +213,10 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
   createdConfigs.set(config, true)
 
   if (process.env.NODE_ENV === 'development') {
+    if (process.env.DEBUG?.startsWith('tamagui')) {
+      // eslint-disable-next-line no-console
+      console.log('Tamagui config:', config)
+    }
     if (!globalThis['Tamagui']) {
       globalThis['Tamagui'] = Tamagui
     }
@@ -216,14 +224,3 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
 
   return config as any
 }
-
-const parseTokens = (tokens: any) => {
-  const res: any = {}
-  for (const key in tokens) {
-    res[key] = {}
-    for (const skey in tokens[key]) {
-      res[key][`$${skey}`] = tokens[key][skey]
-    }
-  }
-  return res
-}

package/src/createVariable.ts

@@ -75,9 +75,7 @@ export function getVariableVariable(v: Variable | any) {
 export const createCSSVariable = (nameProp: string, includeVar = true) => {
   if (process.env.NODE_ENV === 'development') {
     if (!nameProp || typeof nameProp !== 'string') {
-      // eslint-disable-next-line no-console
-      console.trace('createCSSVariable invalid name', nameProp)
-      return ``
+      throw new Error(`createCSSVariable expected string: ${nameProp}`)
     }
   }
   const name = simpleHash(nameProp, 60)

package/src/helpers/ThemeManager.tsx

@@ -101,7 +101,7 @@ export class ThemeManager {
     this.name = name || ''
     this.theme = theme
     if (notify) {
-      this.notifyListeners()
+      this.notify()
     }
     return true
   }
@@ -120,7 +120,7 @@ export class ThemeManager {
       return {
         name: name,
         theme: themes[name] as ThemeParsed,
-        className: this.getClassName(name),
+        className: this.getCN(name),
       }
     }
 
@@ -135,7 +135,7 @@ export class ThemeManager {
         ]
         for (const name of names) {
           if (name in themes) {
-            const className = this.getClassName(name)
+            const className = this.getCN(name)
             return { name, theme: themes[name], className }
           }
         }
@@ -181,18 +181,18 @@ export class ThemeManager {
     if (process.env.NODE_ENV === 'development') {
       if (debug) {
         // eslint-disable-next-line no-console
-        console.log('getNextTheme', this.getClassName(nextName), { props, nextName, parentName })
+        console.log('getNextTheme', this.getCN(nextName), { props, nextName, parentName })
       }
     }
 
     return {
       name: nextName,
       theme: getThemeUnwrapped(theme),
-      className: this.getClassName(nextName),
+      className: this.getCN(nextName),
     }
   }
 
-  getClassName(name: string) {
+  getCN(name: string) {
     return `${THEME_CLASSNAME_PREFIX}${name} t_Theme`.replace('light_', '').replace('dark_', '')
   }
 
@@ -201,7 +201,7 @@ export class ThemeManager {
     this.keys.set(uuid, keys)
   }
 
-  notifyListeners() {
+  notify() {
     if (!this.name) {
       this.keys.clear()
     }
@@ -219,14 +219,6 @@ export class ThemeManager {
       this.themeListeners.delete(cb)
     }
   }
-
-  onUpdate(uuid: any, cb: Function) {
-    this.listeners.set(uuid, cb)
-    return () => {
-      this.listeners.delete(uuid)
-      this.keys.delete(uuid)
-    }
-  }
 }
 
 export const ThemeManagerContext = createContext<ThemeManager | null>(null)

package/src/helpers/cache.ts

@@ -0,0 +1,18 @@
+type Value = Object | Array<any> | string | number
+
+export type Style = { [key: string]: Value }
+
+class Cache {
+  v: Record<string, any> = {}
+
+  get(key: string, valStr: string) {
+    return this.v[key]?.[valStr]
+  }
+
+  set(key: string, valStr: string, object: any) {
+    this.v[key] ??= {}
+    this.v[key][valStr] = object
+  }
+}
+
+export const cache = new Cache()

package/src/helpers/createMediaStyle.ts

@@ -8,19 +8,27 @@ import { PartialStyleObject } from './insertStyleRule'
 // not synced to static/constants for now
 export const MEDIA_SEP = '_'
 
+let prefixes: Record<string, string> | null = null
+let selectors: Record<string, string> | null = null
+
 export const createMediaStyle = (
   { property, identifier, rules }: StyleObject,
   mediaKey: string,
   mediaQueries: MediaQueries,
-  negate?: boolean,
-  importance?: number
+  negate?: boolean
 ): PartialStyleObject => {
-  const mediaKeys = Object.keys(mediaQueries)
-  const importance_ = Math.max(
-    0,
-    importance == undefined ? mediaKeys.indexOf(mediaKey) : importance || 0
-  )
-  const precendencePrefix = new Array(importance_ + 1).fill(':root').join('')
+  if (!prefixes || !selectors) {
+    // TODO move this into useMedia calc once there and unify w getMediaImportance
+    const mediaKeys = Object.keys(mediaQueries)
+    prefixes = Object.fromEntries(
+      mediaKeys.map((key, index) => [key, new Array(index + 1).fill(':root').join('')])
+    )
+    selectors = Object.fromEntries(
+      mediaKeys.map((key) => [key, mediaObjectToString(mediaQueries[key])])
+    )
+  }
+  const precendencePrefix = prefixes[mediaKey]
+  const mediaSelector = selectors[mediaKey]
   const negKey = negate ? '0' : ''
   const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)
   const nextIdentifier = `${identifier.replace(
@@ -28,7 +36,6 @@ export const createMediaStyle = (
     `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`
   )}`
   const screenStr = negate ? 'not all and' : ''
-  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])
   const mediaQuery = `${screenStr} ${mediaSelector}`
   const styleInner = rules.map((rule) => rule.replace(identifier, nextIdentifier)).join(';')
   // combines media queries if they already exist

package/src/helpers/createProxy.ts

@@ -0,0 +1,16 @@
+export function createProxy<A extends object>(target: A, handler: ProxyHandler<A>) {
+  if (process.env.NODE_ENV === 'development') {
+    if (typeof target !== 'object' || !target) {
+      // eslint-disable-next-line no-console
+      console.warn(
+        `Invalid object given for proxy:`,
+        target,
+        `
+  
+  This can be due to a missing theme or configuration given to Tamagui.`,
+        new Error().stack
+      )
+    }
+  }
+  return new Proxy(target || {}, handler)
+}

package/src/helpers/extendStaticConfig.ts

@@ -41,7 +41,6 @@ export function extendStaticConfig(config: Partial<StaticConfig>, parent?: Styla
     parentNames,
     isZStack: config.isZStack || parentStaticConf.isZStack,
     isText: config.isText || parentStaticConf.isText || false,
-    isInput: config.isInput || parentStaticConf.isInput || false,
     neverFlatten: config.neverFlatten || parentStaticConf.neverFlatten,
     ensureOverriddenProp: config.ensureOverriddenProp ?? parentStaticConf.ensureOverriddenProp,
     validStyles: config.validStyles