@tamagui/core 1.0.0-alpha.7 → 1.0.0-beta.0

package/src/createTamagui.ts

@@ -1,215 +0,0 @@
-import { getStyleRules } from '@tamagui/helpers'
-
-import { Variable, createVariable, isVariable } from './createVariable'
-import { createTamaguiProvider } from './helpers/createTamaguiProvider'
-import { validateConfig } from './helpers/validate'
-import { configureMedia } from './hooks/useMedia'
-import {
-  CreateTamaguiConfig,
-  GenericTamaguiConfig,
-  MediaQueryKey,
-  TamaguiInternalConfig,
-  TamaguiProviderProps,
-} from './types'
-
-export type CreateTamaguiProps = TamaguiProviderProps &
-  // we omit and re-declare it because we need to allow instantation types to be flexible
-  // user then re-defines the types after createTamagui returns the typed object they want
-  Omit<GenericTamaguiConfig, 'themes'> & {
-    themes: {
-      [key: string]: {
-        [key: string]: string | number | Variable
-      }
-    }
-    // for ssr/native, will default to active
-    mediaQueryDefaultActive?: MediaQueryKey[]
-  }
-
-let conf: TamaguiInternalConfig | null
-
-export const getHasConfigured = () => !!conf
-export const getTamaguiConfig = () => conf!
-
-type ConfigListener = (conf: TamaguiInternalConfig) => void
-const configListeners = new Set<ConfigListener>()
-export const onConfiguredOnce = (cb: ConfigListener) => {
-  if (conf) {
-    cb(conf)
-  } else {
-    configListeners.add(cb)
-  }
-}
-
-const PREFIX = `theme--`
-
-export function createTamagui<Conf extends CreateTamaguiProps>(
-  config: Conf
-): Conf extends CreateTamaguiConfig<infer A, infer B, infer C, infer D>
-  ? TamaguiInternalConfig<A, B, C, D>
-  : unknown {
-  if (process.env.NODE_ENV === 'development') {
-    // config is re-run by the @tamagui/static, dont double validate
-    if (!config['parsed']) {
-      validateConfig(config)
-    }
-  }
-  // test env loads a few times as it runs diff tests
-  if (conf) {
-    console.warn('Called createTamagui twice! Should never do so')
-    // throw new Error(`#000 createTamagui called twice`)
-  }
-
-  configureMedia({
-    queries: config.media as any,
-    defaultActive: config.mediaQueryDefaultActive,
-  })
-
-  // TODO can avoid some of this CSS creation on native
-  const themeConfig = (() => {
-    let cssRules: string[] = []
-
-    // tokens
-    let tokenRule = `:root {`
-    const varsByValue = new Map<string, Variable>()
-    const addVar = (v: Variable) => {
-      varsByValue[v.val] = v
-      const rule = `--${v.name}:${typeof v.val === 'number' ? `${v.val}px` : v.val};`
-      tokenRule += rule
-    }
-
-    for (const key in config.tokens) {
-      for (const skey in config.tokens[key]) {
-        const val = config.tokens[key][skey]
-        if (key === 'font') {
-          for (const fkey in val) {
-            if (fkey === 'family') {
-              addVar(val[fkey])
-            } else {
-              for (const fskey in val[fkey]) {
-                addVar(val[fkey][fskey])
-              }
-            }
-          }
-        } else {
-          addVar(val)
-        }
-      }
-    }
-    cssRules.push(`${tokenRule}\n}`)
-
-    // themes
-    for (const themeName in config.themes) {
-      // to allow using the same theme with diff names, be sure we don't mutate!
-      config.themes[themeName] = { ...config.themes[themeName] }
-      const theme = config.themes[themeName]
-      let vars = ''
-      for (const themeKey in theme) {
-        const val = theme[themeKey]
-        const getVariableCSS = (inv: any) => {
-          const v = varsByValue[inv] ?? inv
-          return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`
-        }
-        vars += getVariableCSS(val)
-        // TODO sanity check is necessary
-        // make everything a variable that gets put into css
-        if (!isVariable(val)) {
-          theme[themeKey] = createVariable({
-            name: themeKey,
-            val,
-          })
-        }
-      }
-
-      const [themeClassName, parentName] = themeName.includes('-')
-        ? themeName.split('-')
-        : [themeName, '']
-      // tiny hack for now assuming light/dark are typical parentName
-      const oppositeName = parentName === 'dark' ? 'light' : 'dark'
-      const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ''
-      const cssChildSel = `.${PREFIX}${themeClassName}`
-      const cssSel = `${cssParentSel} ${cssChildSel}`
-      // we need to force specificity
-      const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} {\n${vars}\n}`
-      cssRules.push(cssRule)
-    }
-
-    Object.freeze(cssRules)
-
-    return {
-      cssRules,
-      css: cssRules.join('\n'),
-    }
-  })()
-
-  // faster lookups token keys become $keys to match input
-  const tokensParsed: any = parseTokens(config.tokens)
-  // all themes should match key and we just need variable name
-  // TODO once w react native we'd want to have a reverse lookup back to value
-  const themeParsed: any = {}
-  const firstKey = Object.keys(config.themes)[0]
-  for (const key in config.themes[firstKey]) {
-    // themeParsed[`$${key}`] = config.themes[firstKey][key]
-    const val = config.themes[firstKey][key].val
-    themeParsed[`$${key}`] = new Variable({ val, name: key })
-  }
-
-  const next: TamaguiInternalConfig = {
-    // @ts-ignore
-    shorthands: {},
-    ...config,
-    Provider: createTamaguiProvider({
-      defaultTheme: 'light',
-      ...config,
-    }),
-    themeConfig,
-    themeParsed,
-    tokensParsed,
-    parsed: true,
-    getCSS() {
-      return `${themeConfig.css}\n${[...getStyleRules()].join('\n')}`
-    },
-  }
-  conf = next
-
-  if (configListeners.size) {
-    configListeners.forEach((cb) => cb(next))
-    configListeners.clear()
-  }
-
-  // @ts-expect-error
-  return next
-}
-
-export function getThemeParentClassName(themeName?: string | null) {
-  return `theme-parent ${themeName ? `${PREFIX}${themeName}` : ''}`
-}
-
-const parseTokens = (tokens: any) => {
-  const res: any = {}
-  for (const key in tokens) {
-    res[key] = {}
-    if (key === 'font') {
-      for (const family in tokens.font) {
-        const obj = {}
-        res.font[`$${family}`] = obj
-        for (const attrKey in tokens.font[family]) {
-          const attr = tokens.font[family][attrKey]
-          if (attrKey === 'family') {
-            obj[attrKey] = attr
-            continue
-          }
-          obj[attrKey] = Object.keys(attr).reduce((acc, cur) => {
-            acc[`$${cur}`] = attr[cur]
-            return acc
-          }, {})
-        }
-      }
-      continue
-    }
-    for (const skey in tokens[key]) {
-      res[key][`$${skey}`] = tokens[key][skey]
-    }
-  }
-
-  return res
-}

package/src/createTheme.ts

@@ -1,19 +0,0 @@
-import { Variable, createVariable } from './createVariable'
-
-export const createTheme = <Theme extends { [key: string]: string | Variable }>(
-  theme: Theme
-): {
-  [key in keyof Theme]: Variable
-} => {
-  const res = {} as any
-  for (const key in theme) {
-    const val = theme[key]
-    if (!(val instanceof Variable)) {
-      res[key] = createVariable({
-        name: key,
-        val,
-      })
-    }
-  }
-  return res
-}

package/src/createTokens.ts

@@ -1,88 +0,0 @@
-import { Variable, createVariable } from './createVariable'
-import { validateTokens } from './helpers/validate'
-import { CreateTokens } from './types'
-
-// tokens.color.dark.red ===> { var: `color-dark-red`, val: '' }
-
-export function createTokens<T extends CreateTokens>(tokens: T): MakeTokens<T> {
-  if (process.env.NODE_ENV === 'development') {
-    validateTokens(tokens)
-  }
-
-  return setupTokens(tokens) as any
-}
-
-function setupTokens(tokens: any) {
-  return mapTokensToVariables(tokens)
-}
-
-export const mapTokensToVariables = (
-  tokens: CreateTokens,
-  parentPath = ''
-): CreateTokens<Variable> => {
-  const res = {}
-  for (const key in tokens) {
-    const val = tokens[key]
-    const name = parentPath ? `${parentPath}-${key}` : key
-    if (val && typeof val === 'object') {
-      res[key] = mapTokensToVariables(tokens[key], name)
-    } else {
-      res[key] = createVariable({ val, name })
-    }
-  }
-  // @ts-expect-error
-  return res
-}
-
-// verbose but gives us nice types...
-type MakeTokens<T> = T extends {
-  font: {
-    [key in infer A]: {
-      size: infer B
-      lineHeight: infer C
-      letterSpacing: infer D
-      weight: infer Z
-      family: infer Y
-    }
-  }
-  color: infer E
-  space: infer F
-  size: infer G
-  radius: infer H
-  zIndex: infer J
-}
-  ? {
-      font: {
-        [key in A]: {
-          size: {
-            [key in keyof B]: Variable
-          }
-          lineHeight: {
-            [key in keyof C]: Variable
-          }
-          letterSpacing: {
-            [key in keyof D]: Variable
-          }
-          weight: {
-            [key in keyof Z]: Variable
-          }
-          family: Y
-        }
-      }
-      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

@@ -1,26 +0,0 @@
-import { isWeb } from './constants/platform'
-
-export class Variable {
-  name: string
-  val: string | number
-  variable: string | number
-
-  constructor({ val, name }: VariableIn) {
-    // converting to px breaks rn
-    this.val = val //typeof val === 'string' ? val : `${val}px`
-    this.name = name
-    this.variable = isWeb ? `var(--${name})` : this.val
-  }
-
-  toString() {
-    return isWeb ? this.variable : this.val
-  }
-}
-
-type VariableIn = { val: string | number; name: string }
-
-export const createVariable = (props: VariableIn) => new Variable(props)
-
-export function isVariable(v: Variable | any): v is Variable {
-  return v instanceof Variable
-}

package/src/helpers/addStylesUsingClassname.tsx

@@ -1,60 +0,0 @@
-// @ts-ignore
-import { useInsertionEffect } from 'react'
-
-import { getStylesAtomic } from './getStylesAtomic'
-import { insertStyleRule } from './insertStyleRule'
-
-// uses new useInsertionEffect for better perf if available
-
-// could be cleared occasionally
-let added = new Set<string>()
-
-export function useStylesAsClassname(styles: any[]) {
-  if (!useInsertionEffect) {
-    return addStylesUsingClassname(styles)
-  } else {
-    const insertions: any[] = []
-    const className = addStylesUsingClassname(styles, (_, rules) => {
-      for (const rule of rules) {
-        insertions.push(rule)
-      }
-    })
-
-    useInsertionEffect(() => {
-      for (const ruleset of insertions) {
-        insertStyleRule(ruleset)
-      }
-    })
-
-    return className
-  }
-}
-
-export function addStylesUsingClassname(
-  styles: any[],
-  onAdd?: (identifier: string, rules: string[]) => any
-) {
-  let className = ''
-  for (const style of styles) {
-    if (!style) continue
-    if (Array.isArray(style)) {
-      className += ' ' + addStylesUsingClassname(style)
-      continue
-    }
-    for (const { identifier, rules } of getStylesAtomic(style)) {
-      className += ` ${identifier}`
-      if (added.has(identifier)) {
-        continue
-      }
-      added.add(identifier)
-      if (onAdd) {
-        onAdd(identifier, rules)
-      } else {
-        for (const rule of rules) {
-          insertStyleRule(rule)
-        }
-      }
-    }
-  }
-  return className
-}

package/src/helpers/createMediaStyle.ts

@@ -1,46 +0,0 @@
-import { StyleObject } from '@tamagui/helpers'
-
-import { mediaObjectToString } from '../hooks/useMedia'
-import { MediaQueries } from '../types'
-
-// TODO have this be used by extractMediaStyle in tamagui static
-
-// not synced to static/constants for now
-export const MEDIA_SEP = '_'
-
-export const createMediaStyle = (
-  { identifier, rules }: StyleObject,
-  mediaKey: string,
-  mediaQueries: MediaQueries,
-  negate?: boolean,
-  importance = 0
-) => {
-  const mediaKeys = Object.keys(mediaQueries)
-  const mediaKeyPrecendence = mediaKeys.reduce((acc, cur, i) => {
-    acc[cur] = new Array(importance + 1).fill(':root').join('')
-    return acc
-  }, {})
-  const negKey = negate ? '0' : ''
-  const ogPrefix = identifier.slice(0, identifier.indexOf('-') + 1)
-  const nextIdentifier = `${identifier.replace(
-    ogPrefix,
-    `${ogPrefix}${MEDIA_SEP}${mediaKey}${negKey}${MEDIA_SEP}`
-  )}`
-  const screenStr = negate ? 'not all' : 'screen'
-  const mediaSelector = mediaObjectToString(mediaQueries[mediaKey])
-  const mediaQuery = `${screenStr} and ${mediaSelector}`
-  const precendencePrefix = mediaKeyPrecendence[mediaKey]
-  const styleInner = rules[0].replace(identifier, nextIdentifier)
-  // combines media queries if they already exist
-  let styleRule = ''
-  if (styleInner.includes('@media')) {
-    // combine
-    styleRule = styleInner.replace('{', ` and ${mediaQuery} {`)
-  } else {
-    styleRule = `@media ${mediaQuery} { ${precendencePrefix} ${styleInner} }`
-  }
-  return {
-    styleRule,
-    identifier: nextIdentifier,
-  }
-}

package/src/helpers/createPropMapper.ts

@@ -1,184 +0,0 @@
-import { getTamaguiConfig } from '../createTamagui'
-import { Variable } from '../createVariable'
-import { StaticConfig, TamaguiInternalConfig } from '../types'
-import { isObj } from './isObj'
-
-export const createPropMapper = (c: StaticConfig) => {
-  const variants = c.variants
-  let variantsParsed
-  const defaultProps = c.defaultProps || {}
-
-  return (key: string, value: any, theme: any, props: any) => {
-    const conf = getTamaguiConfig()
-    if (!conf) {
-      console.trace('no conf! err')
-      return
-    }
-    if (variants && !variantsParsed) {
-      variantsParsed = parseVariants(variants, conf)
-    }
-
-    // handled here because we need to resolve this off tokens, its the only one-off like this
-    let fontFamily = props.fontFamily || defaultProps.fontFamily || '$body'
-
-    // expand variants
-    const variant = variantsParsed?.[key]
-    if (variant && typeof value !== 'undefined') {
-      const val =
-        value === true
-          ? variant['$true'] || variant['true']
-          : variant[value] ?? variant['...'] ?? value
-
-      const res =
-        typeof val === 'function'
-          ? val(value, { tokens: conf.tokensParsed, theme, props })
-          : isObj(val)
-          ? { ...val }
-          : val
-
-      if (isObj(res)) {
-        resolveTokens(res, conf, fontFamily)
-      }
-
-      return res
-    }
-
-    let shouldReturn = false
-
-    // handle shorthands
-    if (conf.shorthands[key]) {
-      shouldReturn = true
-      key = conf.shorthands[key]
-    }
-
-    if (value && value[0] === '$') {
-      shouldReturn = true
-      value = getToken(key, value, conf, fontFamily)
-    }
-
-    if (value instanceof Variable) {
-      shouldReturn = true
-      value = value.variable
-    }
-
-    if (shouldReturn) {
-      return {
-        [key]: value,
-      }
-    }
-  }
-}
-
-const resolveTokens = (res: any, conf: TamaguiInternalConfig, fontFamily: any) => {
-  for (const rKey in res) {
-    const fKey = conf.shorthands[rKey] || rKey
-    const val = res[rKey]
-    if (val instanceof Variable) {
-      res[fKey] = val.variable
-    } else if (typeof val === 'string') {
-      const fVal = val[0] === '$' ? getToken(fKey, val, conf, fontFamily) : val
-      res[fKey] = fVal
-    } else {
-      if (isObj(val)) {
-        // for things like shadowOffset which is a sub-object
-        resolveTokens(val, conf, fontFamily)
-      }
-      // nullish values cant be tokens so need no exrta parsing
-    }
-  }
-}
-
-const getToken = (
-  key: string,
-  value: string,
-  { tokensParsed, themeParsed }: TamaguiInternalConfig,
-  fontFamily: string | undefined = '$body'
-) => {
-  if (themeParsed[value]) {
-    return themeParsed[value].variable
-  }
-  let valOrVar: any
-  if (key === 'fontFamily') {
-    valOrVar = tokensParsed.font[value]?.family || value
-  }
-  if (key === 'fontSize') {
-    valOrVar = tokensParsed.font[fontFamily]?.size[value] || value
-  }
-  if (key === 'lineHeight') {
-    valOrVar = tokensParsed.font[fontFamily]?.lineHeight[value] || value
-  }
-  if (key === 'letterSpacing') {
-    valOrVar = tokensParsed.font[fontFamily]?.letterSpacing[value] || value
-  }
-  if (key === 'fontWeight') {
-    valOrVar = tokensParsed.font[fontFamily]?.weight[value] || value
-  }
-  if (typeof valOrVar !== 'undefined') {
-    if (valOrVar instanceof Variable) {
-      return valOrVar.variable
-    } else {
-      return valOrVar
-    }
-  }
-  for (const cat in tokenCategories) {
-    if (tokenCategories[cat][key]) {
-      const res = tokensParsed[cat][value]
-      if (res) {
-        return res.variable
-      } else {
-        const themeVar = themeParsed[value]
-        if (themeVar) {
-          return themeVar.variable
-        }
-      }
-    }
-  }
-  const spaceVar = tokensParsed.space[value]
-  if (spaceVar) {
-    return spaceVar.variable
-  }
-  return value
-}
-
-// just specificy the least costly, all else go to `space` (most keys - we can exclude)
-const tokenCategories = {
-  size: {
-    width: true,
-    height: true,
-    minWidth: true,
-    minHeight: true,
-    maxWidth: true,
-    maxHeight: true,
-  },
-  color: {
-    color: true,
-    backgroundColor: true,
-    borderColor: true,
-    borderBottomColor: true,
-    borderTopColor: true,
-    borderLeftColor: true,
-    borderRightColor: true,
-  },
-}
-
-// turns variant spreads into individual lookups
-function parseVariants(variants: any, conf: TamaguiInternalConfig) {
-  return Object.keys(variants).reduce((acc, key) => {
-    acc[key] = Object.keys(variants[key]).reduce((vacc, vkey) => {
-      const variantVal = variants[key][vkey]
-      if (vkey.startsWith('...')) {
-        // set the default one at '...' for easy fallback on non-exact-variant-match
-        vacc['...'] = variantVal
-        const tokenKey = vkey.slice(3)
-        const tokens = conf.tokens[tokenKey]
-        for (const tkey in tokens) {
-          vacc[`$${tkey}`] = variantVal
-        }
-      } else {
-        vacc[vkey] = variantVal
-      }
-      return vacc
-    }, {})
-    return acc
-  }, {})
-}

package/src/helpers/createTamaguiProvider.tsx

@@ -1,22 +0,0 @@
-import * as React from 'react'
-
-import { TamaguiProviderProps } from '../types'
-import { TextAncestorProvider } from '../views/TextAncestorContext'
-import { ThemeProvider, ThemeProviderProps } from '../views/ThemeProvider'
-
-export function createTamaguiProvider(themeProps: ThemeProviderProps) {
-  return function TamaguiProvider({
-    initialWindowMetrics,
-    fallback,
-    children,
-    ...themePropsProvider
-  }: TamaguiProviderProps) {
-    return (
-      <TextAncestorProvider>
-        <ThemeProvider {...themeProps} {...themePropsProvider}>
-          <React.Suspense fallback={fallback || null}>{children}</React.Suspense>
-        </ThemeProvider>
-      </TextAncestorProvider>
-    )
-  }
-}