@tamagui/core 1.0.1-beta.99 → 1.0.1-rc.0

package/src/createFont.test.ts

@@ -0,0 +1,129 @@
+import { describe, expect, test } from 'vitest'
+
+import { createFont } from './createFont'
+import { GenericFont } from './types'
+
+const font: GenericFont = {
+  family: 'Inter',
+  size: {
+    1: 11,
+    2: 12,
+    3: 14,
+    4: 16,
+    5: 20,
+    6: 24,
+  },
+  lineHeight: {
+    1: 14,
+    2: 16,
+    3: 18,
+    4: 20,
+    5: 24,
+    6: 28,
+  },
+  transform: {
+    3: 'uppercase',
+    4: 'none',
+  },
+  weight: {
+    1: '400',
+    3: '700',
+  },
+  color: {
+    1: '$colorFocus',
+    6: '$color',
+  },
+  letterSpacing: {
+    5: 2,
+    6: 1,
+    7: 0,
+    8: 0,
+    9: -1,
+    10: -1.5,
+    12: -2,
+    14: -3,
+    15: -4,
+  },
+  face: {
+    700: { normal: 'InterBold' },
+    800: { normal: 'InterBold' },
+  },
+}
+
+const expectedProcessedFont: GenericFont = {
+  family: 'Inter',
+  size: {
+    1: 11,
+    2: 12,
+    3: 14,
+    4: 16,
+    5: 20,
+    6: 24,
+  },
+  lineHeight: {
+    1: 14,
+    2: 16,
+    3: 18,
+    4: 20,
+    5: 24,
+    6: 28,
+  },
+  transform: {
+    1: 'uppercase',
+    2: 'uppercase',
+    3: 'uppercase',
+    4: 'none',
+    5: 'none',
+    6: 'none',
+  },
+  weight: {
+    1: '400',
+    2: '400',
+    3: '700',
+    4: '700',
+    5: '700',
+    6: '700',
+  },
+  color: {
+    1: '$colorFocus',
+    2: '$colorFocus',
+    3: '$colorFocus',
+    4: '$colorFocus',
+    5: '$colorFocus',
+    6: '$color',
+  },
+  letterSpacing: {
+    1: 2,
+    2: 2,
+    3: 2,
+    4: 2,
+    5: 2,
+    6: 1,
+    7: 0,
+    8: 0,
+    9: -1,
+    10: -1.5,
+    12: -2,
+    14: -3,
+    15: -4,
+  },
+  face: {
+    100: { normal: 'Inter' },
+    200: { normal: 'Inter' },
+    300: { normal: 'Inter' },
+    400: { normal: 'Inter' },
+    500: { normal: 'Inter' },
+    600: { normal: 'Inter' },
+    700: { normal: 'InterBold' },
+    800: { normal: 'InterBold' },
+    900: { normal: 'InterBold' },
+  },
+}
+
+describe('createFont', () => {
+  test('should return a font object with normalised property hashes', () => {
+    const processedFont = createFont(font)
+
+    expect(processedFont).toStrictEqual(expectedProcessedFont)
+  })
+})

package/src/createFont.ts

@@ -0,0 +1,52 @@
+import { FontWeightSteps, GenericFont } from './types'
+
+const fontWeights: FontWeightSteps[] = [
+  '100',
+  '200',
+  '300',
+  '400',
+  '500',
+  '600',
+  '700',
+  '800',
+  '900',
+]
+
+const processSection = <T>(
+  section: string | Record<string, T>,
+  keys: string[],
+  defaultValue?: any
+): string | Record<string, T> => {
+  if (typeof section === 'string') return section
+
+  const sectionKeys = Object.keys(section)
+  let fillValue = section[sectionKeys[0]]
+
+  return Object.fromEntries(
+    [...new Set([...keys, ...sectionKeys])].map((key) => {
+      const value = section[key] ?? defaultValue ?? fillValue
+      fillValue = value
+      defaultValue = value
+      return [key, value]
+    })
+  )
+}
+
+export const createFont = <A extends GenericFont>(font: A): A => {
+  const sizeKeys = Object.keys(font.size)
+
+  const processedFont = Object.fromEntries(
+    Object.entries(font).map(([key, section]) => {
+      return [
+        key,
+        processSection(
+          section,
+          key === 'face' ? fontWeights : sizeKeys,
+          key === 'face' ? { normal: font.family } : undefined
+        ),
+      ]
+    })
+  )
+
+  return Object.freeze(processedFont) as A
+}

package/src/createShorthands.ts

@@ -0,0 +1,7 @@
+import { CreateShorthands } from './types'
+
+// just a type helper util
+
+export function createShorthands<A extends CreateShorthands>(shorthands: A): A {
+  return Object.freeze(shorthands) as any
+}

package/src/createTamagui.ts

@@ -0,0 +1,230 @@
+import { isClient, isRSC, isWeb } from '@tamagui/constants'
+
+import { configListeners, setConfig } from './config'
+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, ThemeParsed } 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`)
+    }
+  }
+
+  const fontTokens = Object.fromEntries(
+    Object.entries(configIn.fonts!).map(([k, v]) => {
+      return [k, createVariables(v, 'f', 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 }
+    const 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: ThemeParsed
+    }
+    const dedupedThemes: {
+      [key: string]: DedupedTheme
+    } = {}
+    const existing = new WeakMap<ThemeParsed, DedupedTheme>()
+
+    // first, de-dupe and parse them
+    for (const themeName in themes) {
+      const rawTheme = themes[themeName] as ThemeParsed
+
+      // 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
+    let themeRuleSets: string[] = []
+
+    if (isWeb || isRSC) {
+      for (const themeName in dedupedThemes) {
+        themeRuleSets = [
+          ...themeRuleSets,
+          ...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()
+
+    return {
+      themes,
+      cssRuleSets,
+      themeRuleSets,
+    }
+  })()
+
+  // 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: [],
+    animations: {} as any,
+    media: {},
+    ...configIn,
+    // vite made this into a function if it wasn't set
+    shorthands: { ...shorthands },
+    inverseShorthands: shorthands
+      ? Object.fromEntries(Object.entries(shorthands).map(([k, v]) => [v, k]))
+      : {},
+    themes: themeConfig.themes as any,
+    fontsParsed,
+    themeConfig,
+    tokensParsed,
+    parsed: true,
+    getCSS: (separator = '\n') => {
+      return `
+      .is_Text .is_Text {display:inline-flex;}
+      ._dsp_contents {display:contents;}
+      ${themeConfig.cssRuleSets.join(separator)}
+      ${themeConfig.themeRuleSets.join(separator)}
+      ${getAllRules().join(separator)}`
+    },
+    // const tokens = [...getToken(tokens.size[0])]
+    // .spacer-sm + ._dsp_contents._dsp-sm-hidden { margin-left: -var(--${}) }
+  }
+
+  configureMedia(config)
+  setConfig(config)
+
+  if (configListeners.size) {
+    configListeners.forEach((cb) => cb(config))
+    configListeners.clear()
+  }
+
+  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
+    }
+  }
+
+  return config as any
+}

package/src/createTheme.ts

@@ -0,0 +1,13 @@
+import type { 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.test.ts

@@ -0,0 +1,29 @@
+import { getDefaultTamaguiConfig } from '@tamagui/config-default-node'
+import { expect, test } from 'vitest'
+
+import { createTokens } from './createTokens'
+
+test('snapshot', () => {
+  expect(createTokens(getDefaultTamaguiConfig().tokens)).toMatchSnapshot()
+})
+
+test('color name no dot', () => {
+  expect(
+    // @ts-ignore partial
+    createTokens({
+      color: {
+        'yellow.10': 'yellow',
+      },
+    })
+  ).toMatchObject({
+    color: {
+      'yellow.10': {
+        isVar: true,
+        key: 'yellow101a',
+        name: 'color-1',
+        val: 'yellow',
+        variable: '',
+      },
+    },
+  })
+})

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
+}
+
+// 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]: E[Key] extends Variable ? E[Key] : Variable<E[Key]>
+      }
+      space: {
+        [Key in keyof F]: F[Key] extends Variable ? F[Key] : Variable<F[Key]>
+      }
+      size: {
+        [Key in keyof G]: G[Key] extends Variable ? G[Key] : Variable<G[Key]>
+      }
+      radius: {
+        [Key in keyof H]: H[Key] extends Variable ? H[Key] : Variable<H[Key]>
+      }
+      zIndex: {
+        [Key in keyof J]: J[Key] extends Variable ? J[Key] : Variable<J[Key]>
+      }
+    }
+  : never

package/src/createVariable.test.ts

@@ -0,0 +1,7 @@
+import { expect, test } from 'vitest'
+
+import { createCSSVariable } from './createVariable'
+
+test('dots', () => {
+  expect(createCSSVariable('yellow.10')).toBe('var(--yellow101a)')
+})

package/src/createVariable.ts

@@ -0,0 +1,79 @@
+import { isWeb } from '@tamagui/constants'
+import { simpleHash } from '@tamagui/helpers'
+
+import { getConfig } from './config'
+
+/**
+ * Should rename this to Token
+ * Moving to objects for React Server Components support
+ */
+
+const IS_VAR = 'isVar'
+
+type VariableIn<A = any> = {
+  val: A
+  name: string
+  key: string
+}
+
+export type Variable<A = any> = VariableIn<A> & {
+  [IS_VAR]?: true
+  variable?: string
+}
+
+export const createVariable = <A extends string | number = any>(props: VariableIn<A>) => {
+  if (isVariable(props)) return props
+  const { key, name, val } = props
+  return {
+    [IS_VAR]: true,
+    key,
+    name: simpleHash(name, 40),
+    val,
+    variable: isWeb ? createCSSVariable(name) : '',
+  }
+}
+
+export function variableToString(vrble?: any, getValue = false) {
+  if (isVariable(vrble)) {
+    return getValue ? `${vrble.val}` : `${isWeb ? vrble.variable : vrble.val}`
+  }
+  return `${vrble || ''}`
+}
+
+export function isVariable(v: Variable | any): v is Variable {
+  return v && typeof v === 'object' && IS_VAR in v
+}
+
+export function getVariable(nameOrVariable: Variable | string) {
+  if (isVariable(nameOrVariable)) {
+    return variableToString(nameOrVariable)
+  }
+  const tokens = getConfig().tokensParsed
+  return variableToString(tokens[nameOrVariable] ?? nameOrVariable)
+}
+
+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') {
+      throw new Error(`createCSSVariable expected string: ${nameProp}`)
+    }
+  }
+  const name = simpleHash(nameProp, 60)
+  return includeVar ? `var(--${name})` : name
+}

package/src/createVariables.ts

@@ -0,0 +1,42 @@
+import { simpleHash } from '@tamagui/helpers'
+
+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 = {}
+  let i = 0
+  for (const key in tokens) {
+    i++
+    const val = tokens[key]
+    if (isVariable(val)) {
+      res[key] = val
+      continue
+    }
+    const niceKey = simpleHash(key)
+    let name = isFont ? niceKey.slice(0, 2) : i
+    name = parentPath ? `${parentPath}-${name}` : niceKey
+    if (val && typeof val === 'object') {
+      // recurse
+      res[key] = createVariables(tokens[key] as any, name)
+      continue
+    }
+    res[key] = isVariable(val) ? val : createVariable({ val, name, key: niceKey })
+  }
+  return res
+}

package/src/helpers/RNComponents.tsx

@@ -0,0 +1,14 @@
+import { Image, Text, TextInput, View } from 'react-native'
+
+// limited support
+export const RNComponents = new Set<any>([
+  Image,
+  TextInput,
+  Text,
+  View,
+  // see fake-react-native + styled() check
+  'Image',
+  'TextInput',
+  'Text',
+  'View',
+])