@tamagui/core 1.0.1-beta.138 → 1.0.1-beta.141

package/src/createFont.ts

@@ -0,0 +1,26 @@
+import { GenericFont } from './types'
+
+export const createFont = <A extends GenericFont>(font: A): A => {
+  // fills in any missing values based on size keys being standard
+  const sizeKeys = Object.keys(font.size)
+
+  for (const key in font) {
+    if (key === 'size' || key === 'family') continue
+    const section = font[key] as Object
+    const keys = Object.keys(section)
+
+    // fill with first filled in value to start
+    let fillVal = section[keys[0]]
+
+    for (const sKey of sizeKeys) {
+      if (!(sKey in section)) {
+        section[sKey] = fillVal
+      } else {
+        // if exists, set as the fillVal
+        fillVal = section[sKey]
+      }
+    }
+  }
+
+  return Object.freeze(font)
+}

package/src/createShorthands.ts

@@ -0,0 +1,5 @@
+// type helper
+
+export function createShorthands<A extends Record<string, string>>(shorthands: A): A {
+  return Object.freeze(shorthands) as any
+}

package/src/createTamagui.ts

@@ -0,0 +1,226 @@
+import { configListeners, setConfig } from './conf'
+import { isWeb } from './constants/platform'
+import { createVariables } from './createVariables'
+import { getThemeCSSRules } from './helpers/getThemeCSSRules'
+import { getAllRules } from './helpers/insertStyleRule'
+import {
+  registerCSSVariable,
+  tokensValueToVariable,
+  variableToCSS,
+} from './helpers/registerCSSVariable'
+import { ensureThemeVariable, proxyThemeToParents } from './helpers/themes'
+import { configureMedia } from './hooks/useMedia'
+import { parseFont, registerFontVariables } from './insertFont'
+import { Tamagui } from './Tamagui'
+import { CreateTamaguiProps, InferTamaguiConfig, TamaguiInternalConfig, ThemeObject } from './types'
+
+// config is re-run by the @tamagui/static, dont double validate
+const createdConfigs = new WeakMap<any, boolean>()
+
+export function createTamagui<Conf extends CreateTamaguiProps>(
+  configIn: Conf
+): InferTamaguiConfig<Conf> {
+  if (createdConfigs.has(configIn)) {
+    return configIn as any
+  }
+
+  if (process.env.NODE_ENV === 'development') {
+    if (!configIn.tokens) {
+      throw new Error(`Must define tokens`)
+    }
+    if (!configIn.themes) {
+      throw new Error(`Must define themes`)
+    }
+    if (!configIn.fonts) {
+      throw new Error(`Must define fonts`)
+    }
+  }
+
+  configureMedia({
+    queries: configIn.media as any,
+    defaultActive: configIn.mediaQueryDefaultActive,
+  })
+
+  const fontTokens = createVariables(configIn.fonts!, '', true)
+  const fontsParsed = (() => {
+    const res = {} as typeof fontTokens
+    for (const familyName in fontTokens) {
+      res[`$${familyName}`] = parseFont(fontTokens[familyName])
+    }
+    return res!
+  })()
+
+  const themeConfig = (() => {
+    const themes = { ...configIn.themes }
+    let cssRuleSets: string[] = []
+
+    if (isWeb) {
+      const declarations: string[] = []
+      const fontDeclarations: Record<
+        string,
+        { name: string; declarations: string[]; language?: string }
+      > = {}
+
+      for (const key in configIn.tokens) {
+        for (const skey in configIn.tokens[key]) {
+          const val = configIn.tokens[key][skey]
+          registerCSSVariable(val)
+          declarations.push(variableToCSS(val))
+        }
+      }
+
+      for (const key in fontsParsed) {
+        const fontParsed = fontsParsed[key]
+        const [name, language] = key.includes('_') ? key.split('_') : [key]
+        const fontVars = registerFontVariables(fontParsed)
+        fontDeclarations[key] = { name: name.slice(1), declarations: fontVars, language }
+      }
+
+      const sep = process.env.NODE_ENV === 'development' ? configIn.cssStyleSeparator || ' ' : ''
+
+      function declarationsToRuleSet(decs: string[], selector = '') {
+        return `:root${selector} {${sep}${[...decs].join(`;${sep}`)}${sep}}`
+      }
+
+      // non-font
+      cssRuleSets.push(declarationsToRuleSet(declarations))
+
+      // fonts
+      if (fontDeclarations) {
+        for (const key in fontDeclarations) {
+          const { name, declarations, language = 'default' } = fontDeclarations[key]
+          const fontSelector = `.font_${name}`
+          const langSelector = `:root .t_lang-${name}-${language} ${fontSelector}`
+          const selectors =
+            language === 'default' ? ` ${fontSelector}, ${langSelector}` : langSelector
+          const specificRuleSet = declarationsToRuleSet(declarations, selectors)
+          cssRuleSets.push(specificRuleSet)
+        }
+      }
+    }
+
+    // dedupe themes to avoid duplicate CSS generation
+    type DedupedTheme = {
+      names: string[]
+      theme: ThemeObject
+    }
+    const dedupedThemes: {
+      [key: string]: DedupedTheme
+    } = {}
+    const existing = new WeakMap<ThemeObject, DedupedTheme>()
+
+    // first, de-dupe and parse them
+    for (const themeName in themes) {
+      const rawTheme = themes[themeName]
+
+      // if existing, avoid
+      if (existing.has(rawTheme)) {
+        const e = existing.get(rawTheme)!
+        themes[themeName] = e.theme
+        e.names.push(themeName)
+        continue
+      }
+
+      // ensure each theme object unique for dedupe
+      const theme = { ...rawTheme }
+      // parse into variables
+      for (const key in theme) {
+        // make sure properly names theme variables
+        ensureThemeVariable(theme, key)
+      }
+      themes[themeName] = theme
+
+      // set deduped
+      dedupedThemes[themeName] = {
+        names: [themeName],
+        theme,
+      }
+      existing.set(rawTheme, dedupedThemes[themeName])
+    }
+
+    // then, generate CSS from de-duped
+    if (isWeb) {
+      for (const themeName in dedupedThemes) {
+        cssRuleSets = [
+          ...cssRuleSets,
+          ...getThemeCSSRules({
+            config: configIn,
+            themeName,
+            ...dedupedThemes[themeName],
+          }),
+        ]
+      }
+    }
+
+    // proxy upwards to get parent variables (themes are subset going down)
+    for (const themeName in themes) {
+      themes[themeName] = proxyThemeToParents(themeName, themes[themeName], themes)
+    }
+
+    tokensValueToVariable.clear()
+    Object.freeze(cssRuleSets)
+    const css = cssRuleSets.join('\n')
+
+    return {
+      themes,
+      cssRuleSets,
+      css,
+    }
+  })()
+
+  // faster lookups token keys become $keys to match input
+  const tokensParsed: any = parseTokens(configIn.tokens)
+
+  const getCSS = () => {
+    return `${themeConfig.css}\n${getAllRules().join('\n')}`
+  }
+
+  const shorthands = configIn.shorthands || {}
+
+  const config: TamaguiInternalConfig = {
+    fontLanguages: [],
+    defaultTheme: 'light',
+    animations: {} as any,
+    media: {},
+    ...configIn,
+    shorthands,
+    inverseShorthands: shorthands
+      ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k]))
+      : {},
+    themes: themeConfig.themes,
+    fontsParsed,
+    themeConfig,
+    tokensParsed,
+    parsed: true,
+    getCSS,
+  }
+
+  setConfig(config)
+
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(config))
+    configListeners.clear()
+  }
+
+  createdConfigs.set(config, true)
+
+  if (process.env.NODE_ENV === 'development') {
+    if (!globalThis['Tamagui']) {
+      globalThis['Tamagui'] = Tamagui
+    }
+  }
+
+  // @ts-expect-error
+  return config
+}
+
+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/createTheme.ts

@@ -0,0 +1,13 @@
+import { Variable } from './createVariable'
+
+type GenericTheme = { [key: string]: string | Variable }
+
+// export const themeToVariableToValueMap = new WeakMap<any, Record<string, string>>()
+
+export const createTheme = <Theme extends GenericTheme>(
+  theme: Theme
+): {
+  [K in keyof Theme]: Theme[K] | string | Variable
+} => {
+  return theme
+}

package/src/createTokens.ts

@@ -0,0 +1,35 @@
+import { Variable } from './createVariable'
+import { createVariables } from './createVariables'
+import { CreateTokens } from './types'
+
+// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
+export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
+  return createVariables(tokens as any) as any
+}
+
+// verbose but gives us nice types...
+type MakeTokens<T> = T extends {
+  color: infer E
+  space: infer F
+  size: infer G
+  radius: infer H
+  zIndex: infer J
+}
+  ? {
+      color: {
+        [key in keyof E]: Variable
+      }
+      space: {
+        [key in keyof F]: Variable
+      }
+      size: {
+        [key in keyof G]: Variable
+      }
+      radius: {
+        [key in keyof H]: Variable
+      }
+      zIndex: {
+        [key in keyof J]: Variable
+      }
+    }
+  : never

package/src/createVariable.ts

@@ -0,0 +1,94 @@
+import { isWeb } from './constants/platform'
+import { VariableColorVal } from './types'
+
+/**
+ * Should rename this to Token
+ * Moving to objects for React Server Components support
+ */
+
+const IS_VAR = '__isVar__'
+
+export type VariableValue = string | number
+
+type VariableIn<A extends VariableValue = VariableValue> = {
+  val: A
+  name: string
+  key: string
+  isFloating?: boolean
+}
+
+export type Variable<A extends VariableValue = VariableValue> = VariableIn<A> & {
+  [IS_VAR]?: true
+  variable?: string
+}
+
+export const createVariable = <A extends string | number = any>(props: VariableIn<A>) => {
+  if (isVariable(props)) {
+    return props
+  }
+  return {
+    [IS_VAR]: true,
+    // @ts-ignore
+    ...props,
+    variable: isWeb ? createCSSVariable(props.name) : '',
+  }
+}
+
+// on the client maybe we can change the prototype of variable object toString to keep backwards compat
+export function variableToString(vrble?: Variable | VariableColorVal) {
+  if (!vrble) return ''
+  if (typeof vrble === 'string') return vrble
+  return `${isWeb ? vrble.variable : vrble.val}`
+}
+
+export function isVariable(v: Variable | any): v is Variable {
+  return !!(v && v[IS_VAR])
+}
+
+export function getVariableValue(v: Variable | any) {
+  if (isVariable(v)) return v.val
+  return v
+}
+
+export function getVariableName(v: Variable | any) {
+  if (isVariable(v)) return v.name
+  return v
+}
+
+export function getVariableVariable(v: Variable | any) {
+  if (isVariable(v)) return v.variable
+  return v
+}
+
+// bugfix { space: { 0.5: 10 } } was generating var(--space-0.5) (invalid CSS):
+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 ``
+    }
+  }
+  let name = ''
+  for (let i = 0; i < nameProp.length; i++) {
+    const code = nameProp.charCodeAt(i)
+    if (
+      // A-Z
+      (code >= 65 && code <= 90) ||
+      // a-z
+      (code >= 97 && code <= 122) ||
+      // _
+      code == 95 ||
+      // -
+      code === 45 ||
+      // 0-9
+      (code >= 48 && code <= 57)
+    ) {
+      name += nameProp[i]
+    } else {
+      // allow any name but turn it into a stringified num
+      name += `-c${code}-`
+    }
+  }
+  return includeVar ? `var(--${name})` : name
+}

package/src/createVariables.ts

@@ -0,0 +1,39 @@
+import { Variable, createVariable, isVariable } from './createVariable'
+
+type DeepTokenObject<Val extends string | number = any> = {
+  [key: string]: Val | DeepTokenObject<Val>
+}
+
+export type DeepVariableObject<A extends DeepTokenObject> = {
+  [Key in keyof A]: A[Key] extends string | number
+    ? Variable<A[Key]>
+    : A[Key] extends DeepTokenObject
+    ? DeepVariableObject<A[Key]>
+    : never
+}
+
+export const createVariables = <A extends DeepTokenObject>(
+  tokens: A,
+  parentPath = '',
+  isFont = false
+): DeepVariableObject<A> => {
+  const res: any = {}
+  for (const key in tokens) {
+    const val = tokens[key]
+    if (isVariable(val)) {
+      res[key] = val
+      continue
+    }
+    let name = parentPath ? `${parentPath}-${key}` : key
+    if (isFont && name.includes('_')) {
+      name = name.replace(/_[a-z0-9]+/i, '')
+    }
+    if (val && typeof val === 'object') {
+      // recurse
+      res[key] = createVariables(tokens[key] as any, isFont ? 'f' : name)
+      continue
+    }
+    res[key] = isVariable(val) ? val : createVariable({ val, name, key })
+  }
+  return res
+}

package/src/helpers/RNComponents.tsx

@@ -0,0 +1,14 @@
+import * as ReactNative from 'react-native'
+
+// bye bye tree shaking... but only way to properly detect react-native components...
+// also neither rnw nor react support tree shaking atm
+export const RNComponents = new WeakMap()
+
+// I was looping over all of them, but casuses deprecation warnings and there's only a few
+// we realistically support - lets whitelist rather than blacklist
+for (const key of ['Image', 'TextInput', 'Text', 'View']) {
+  const val = ReactNative[key]
+  if (val && typeof val === 'object') {
+    RNComponents.set(val, true)
+  }
+}

package/src/helpers/ThemeManager.tsx

@@ -0,0 +1,226 @@
+import { createContext } from 'react'
+
+import { getThemes } from '../conf'
+import { THEME_CLASSNAME_PREFIX, THEME_NAME_SEPARATOR } from '../constants/constants'
+import { getThemeUnwrapped } from '../hooks/getThemeUnwrapped'
+import { ThemeObject, Themes } from '../types'
+
+type ThemeListener = (name: string | null, themeManager: ThemeManager) => void
+
+export type SetActiveThemeProps = {
+  className?: string
+  parentManager?: ThemeManager | null
+  name?: string | null
+  theme?: any
+}
+
+export type GetNextThemeProps = {
+  themes?: Themes
+  name?: string | null
+  componentName?: string | null
+  reset?: boolean
+}
+
+export class ThemeManager {
+  keys = new Map<any, Set<string>>()
+  listeners = new Map<any, Function>()
+  themeListeners = new Set<ThemeListener>()
+  className: string | null = null
+
+  constructor(
+    public name: string = '',
+    public theme: ThemeObject | null = null,
+    public parentManager: ThemeManager | null = null,
+    public reset: boolean = false
+  ) {
+    // find the nearest different parentManager
+    let parent = parentManager
+    let tries = 0
+    while (true) {
+      tries++
+      if (tries > 10) {
+        throw new Error(`Nested 10 of the same theme in a row, likely error`)
+      }
+      if (!parent) break
+      if (parent.name === name) {
+        // go up if same
+        parent = parent.parentManager
+      } else {
+        this.parentManager = parent
+        break
+      }
+    }
+  }
+
+  get didChangeTheme() {
+    return this.parentManager && this.name !== this.parentManager.fullName
+  }
+
+  get parentName() {
+    return this.parentManager?.name || null
+  }
+
+  get fullName(): string {
+    return this.getNextTheme().name || this.name || ''
+    // const parentName = this.parentManager?.fullName || ''
+    // const name = this.name || ''
+    // const parts = [...new Set([...`${parentName}_${name}`.split('_')])].filter(Boolean)
+    // return parts.join('_')
+  }
+
+  // gets value going up to parents
+  getValue(key: string) {
+    let theme = this.theme
+    let manager = this as ThemeManager | null
+    while (true) {
+      if (!theme) return
+      if (key in theme) {
+        return theme[key]
+      }
+      manager = this.parentManager
+      if (!manager || manager.theme === theme) {
+        return
+      }
+      theme = manager.theme
+    }
+  }
+
+  update({ name, theme, className }: SetActiveThemeProps = {}, force = false) {
+    if (!force) {
+      // className compare on web, avoids light/dark re-renders
+      const nameChanged = name !== this.name
+      if (!nameChanged) {
+        return false
+      }
+    }
+    this.className = className || null
+    this.name = name || ''
+    this.theme = theme
+    this.notifyListeners()
+    return true
+  }
+
+  getNextTheme(props: GetNextThemeProps = {}, debug?: any) {
+    const { themes = getThemes(), name, componentName } = props
+
+    if (props.reset && name) {
+      return {
+        name: name,
+        theme: themes[name],
+        className: this.getClassName(name),
+      }
+    }
+
+    const parentIsReset = this.parentManager?.reset
+
+    if (!name) {
+      if (componentName) {
+        // allow for _Card_Button or just _Button
+        const names = [
+          `${this.name}_${componentName}`,
+          `${withoutComponentName(this.name)}_${componentName}`,
+        ]
+        for (const name of names) {
+          if (name in themes) {
+            const className = this.getClassName(name)
+            return { name, theme: themes[name], className }
+          }
+        }
+      }
+      return {
+        name: this.name,
+        theme: this.theme,
+      }
+    }
+
+    let nextName = name || this.name || ''
+    let parentName = parentIsReset ? this.parentName || this.fullName : this.fullName
+
+    while (true) {
+      if (nextName in themes) {
+        break
+      }
+      nextName = `${parentName}_${name}`
+      if (nextName in themes) {
+        break
+      }
+      if (!parentName.includes(THEME_NAME_SEPARATOR)) {
+        // this is fine - some themes can not have parents
+        break
+      }
+      // go up one
+      parentName = parentName.slice(0, parentName.lastIndexOf(THEME_NAME_SEPARATOR))
+    }
+
+    if (componentName) {
+      // allow for _Card_Button or just _Button
+      const names = [
+        `${nextName}_${componentName}`,
+        `${withoutComponentName(nextName)}_${componentName}`,
+      ]
+      for (const name of names) {
+        if (name in themes) {
+          nextName = name
+        }
+      }
+    }
+
+    let theme = themes[nextName]
+    if (!theme) {
+      theme = themes[`light_${nextName}`]
+    }
+
+    if (process.env.NODE_ENV === 'development') {
+      if (debug) {
+        console.log('getNextTheme', this.getClassName(nextName), { props, nextName, parentName })
+      }
+    }
+
+    return {
+      name: nextName,
+      theme: getThemeUnwrapped(theme),
+      className: this.getClassName(nextName),
+    }
+  }
+
+  getClassName(name: string) {
+    return `${THEME_CLASSNAME_PREFIX}${name} t_Theme`.replace('light_', '').replace('dark_', '')
+  }
+
+  track(uuid: any, keys: Set<string>) {
+    if (!this.name) return
+    this.keys.set(uuid, keys)
+  }
+
+  notifyListeners() {
+    if (!this.name) {
+      this.keys.clear()
+    }
+    for (const [uuid, keys] of this.keys.entries()) {
+      if (keys.size) {
+        this.listeners.get(uuid)?.()
+      }
+    }
+    this.themeListeners.forEach((cb) => cb(this.name, this))
+  }
+
+  onChangeTheme(cb: ThemeListener) {
+    this.themeListeners.add(cb)
+    return () => {
+      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)
+export const emptyManager = new ThemeManager()
+
+const withoutComponentName = (name: string) => name.replace(/(\_[A-Z][a-zA-Z]+)+$/g, '')

package/src/helpers/areEqualSets.tsx

@@ -0,0 +1,9 @@
+export const areEqualSets = (a: Set<string>, b: Set<string>) => {
+  if (a.size !== b.size) return false
+  for (const val in a) {
+    if (!b.has(val)) {
+      return false
+    }
+  }
+  return true
+}

package/src/helpers/assignNativePropsToWeb.native.tsx

@@ -0,0 +1 @@
+export function assignNativePropsToWeb(elementType: string, viewProps: any, nativeProps: any) {}