@tamagui/core 1.0.0-alpha.0

package/src/hooks/useMedia.tsx

@@ -0,0 +1,194 @@
+import { useRef } from 'react'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+import { matchMedia } from '../helpers/matchMedia'
+import {
+  ConfigureMediaQueryOptions,
+  MediaQueries,
+  MediaQueryObject,
+  MediaQueryState,
+} from '../types'
+import { useConstant } from './useConstant'
+import { useForceUpdate } from './useForceUpdate'
+
+export const mediaState: { [key in keyof MediaQueryState]: boolean } = {} as any
+const mediaQueryListeners: { [key: string]: Set<Function> } = {}
+
+export const addMediaQueryListener = (key: string, cb: any) => {
+  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()
+  mediaQueryListeners[key].add(cb)
+}
+
+export const removeMediaQueryListener = (key: string, cb: any) => {
+  mediaQueryListeners[key].delete(cb)
+}
+
+let conf: MediaQueries | null = null
+
+export const mediaQueryConfig = new Proxy<MediaQueries>({} as any, {
+  get(target, key) {
+    if (!conf) {
+      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`)
+    }
+    return Reflect.get(conf, key)
+  },
+  ownKeys() {
+    if (!conf) {
+      throw new Error(`Be sure to run configureMedia before accessing mediaQueryConfig`)
+    }
+    return Object.keys(conf)
+  },
+  getOwnPropertyDescriptor() {
+    return {
+      enumerable: true,
+      configurable: true,
+    }
+  },
+})
+
+export const getMedia = () => {
+  if (!conf) {
+    throw new Error(`not configured yet`)
+  }
+  return mediaState
+}
+
+export const configureMedia = ({
+  queries,
+  defaultActive = ['sm', 'xs'],
+}: ConfigureMediaQueryOptions = {}) => {
+  if (conf) {
+    console.warn(
+      `Already configured mediaQueries once (you may have called getMedia() before configureMedia())`
+    )
+  }
+
+  if (queries) {
+    conf = queries
+  }
+
+  // setup
+  for (const key in queries) {
+    const str = mediaObjectToString(queries[key])
+    try {
+      const getMatch = () => matchMedia(str)
+      const match = getMatch()
+      if (!match || typeof match.addListener !== 'function') {
+        // caught below
+        throw new Error('⚠️ No match (seeing this in RN sometimes)')
+      }
+      mediaState[key] = !!match.matches
+      match.addListener(() => {
+        const next = !!getMatch().matches
+        if (next === mediaState[key]) return
+        mediaState[key] = next
+        const listeners = mediaQueryListeners[key]
+        if (listeners?.size) {
+          for (const cb of [...listeners]) {
+            cb()
+          }
+        }
+      })
+    } catch (err: any) {
+      console.error('Error running media query', str, err.message, err.stack)
+      const isDefaultActive = defaultActive?.includes(key as any) ?? true
+      mediaState[key] = isDefaultActive
+    }
+  }
+}
+
+type UseMediaState = {
+  selections: { [key: string]: boolean }
+  nextSelections: { [key: string]: boolean }
+  isRendering: boolean
+  isUnmounted: boolean
+}
+
+export const useMedia = () => {
+  const forceUpdate = useForceUpdate()
+  const state = useRef() as React.MutableRefObject<UseMediaState>
+  if (!state.current) {
+    state.current = {
+      selections: {},
+      nextSelections: {},
+      isUnmounted: false,
+      isRendering: true,
+    }
+  }
+  state.current.isRendering = true
+
+  // track usage
+  useIsomorphicLayoutEffect(() => {
+    const st = state.current
+    st.isRendering = false
+    // delete old
+    for (const key in st.selections) {
+      if (!(key in st.nextSelections)) {
+        removeMediaQueryListener(key, forceUpdate)
+      }
+    }
+    // add new
+    for (const key in st.nextSelections) {
+      if (!(key in st.selections)) {
+        addMediaQueryListener(key, forceUpdate)
+      }
+    }
+  })
+
+  // unmount
+  useIsomorphicLayoutEffect(() => {
+    return () => {
+      const st = state.current
+      st.isUnmounted = true
+      const allKeys = {
+        ...st.selections,
+        ...st.nextSelections,
+      }
+      for (const key in allKeys) {
+        removeMediaQueryListener(key, forceUpdate)
+      }
+    }
+  }, [])
+
+  return useConstant(() => {
+    const st = state.current
+    return new Proxy(mediaState, {
+      get(target, key: string) {
+        if (!(key in mediaState)) {
+          return Reflect.get(target, key)
+        }
+        if (!st.isUnmounted) {
+          if (st.isRendering) {
+            st.nextSelections[key] = true
+          }
+        }
+        if (key in mediaState) {
+          return mediaState[key]
+        }
+        return Reflect.get(mediaState, key)
+      },
+    })
+  })
+}
+
+function camelToHyphen(str: string) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()
+}
+
+export function mediaObjectToString(query: string | MediaQueryObject) {
+  if (typeof query === 'string') {
+    return query
+  }
+  return Object.entries(query)
+    .map(([feature, value]) => {
+      feature = camelToHyphen(feature)
+      if (typeof value === 'string') {
+        return `(${feature}: ${value})`
+      }
+      if (typeof value === 'number' && /[height|width]$/.test(feature)) {
+        value = `${value}px`
+      }
+      return `(${feature}: ${value})`
+    })
+    .join(' and ')
+}

package/src/hooks/usePressable.tsx

@@ -0,0 +1,9 @@
+import { Pressable, PressableProps } from 'react-native'
+
+const getPressable = Pressable?.['type']?.['render']
+
+export const usePressable = (props: PressableProps) => {
+  const out = getPressable(props)
+  const { children, style, ...pressableProps } = out.props
+  return [pressableProps, style] as const
+}

package/src/hooks/useTheme.tsx

@@ -0,0 +1,107 @@
+import React, { useContext, useEffect, useMemo, useRef, useState } from 'react'
+
+import { useIsomorphicLayoutEffect } from '../constants/platform'
+import { Variable } from '../createVariable'
+import { ThemeName } from '../types'
+import { ThemeContext } from '../views/ThemeContext'
+import { ThemeManagerContext } from '../views/ThemeManagerContext'
+import { GET_DEFAULT_THEME } from '../views/ThemeProvider'
+import { useForceUpdate } from './useForceUpdate'
+
+type UseThemeState = {
+  uuid: Object
+  keys: Set<string>
+  isRendering: boolean
+}
+
+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
+}
+
+export const useThemeName = () => {
+  const parent = useContext(ThemeManagerContext)
+  const [name, setName] = useState(parent.name)
+  useEffect(() => {
+    return parent.onChangeTheme((next) => {
+      setName((prev) => {
+        if (prev === next) return prev
+        return next
+      })
+    })
+  }, [parent])
+  return name || 'light'
+}
+
+export const useDefaultThemeName = () => {
+  return useContext(ThemeContext)[GET_DEFAULT_THEME] as any as ThemeName
+}
+
+export const useTheme = () => {
+  const forceUpdate = useForceUpdate()
+  const manager = useContext(ThemeManagerContext)
+  const themes = useContext(ThemeContext)
+  const state = useRef() as React.MutableRefObject<UseThemeState>
+  if (!state.current) {
+    state.current = {
+      uuid: {},
+      keys: new Set(),
+      isRendering: true,
+    }
+  }
+  state.current.isRendering = true
+
+  // track usage
+  useIsomorphicLayoutEffect(() => {
+    const st = state.current
+    st.isRendering = false
+    const cur = manager.keys.get(st.uuid)
+    if (!cur || !areEqualSets(st.keys, cur)) {
+      manager.track(st.uuid, st.keys)
+    }
+  })
+
+  useEffect(() => {
+    return manager.onUpdate(state.current.uuid, forceUpdate)
+  }, [])
+
+  const theme = (manager.name ? themes[manager.name] : themes.light) ?? themes.light
+
+  return useMemo(
+    () => {
+      return new Proxy(theme, {
+        get(_, key: string) {
+          const name = manager.name
+          if (!name) {
+            return Reflect.get(_, key)
+          }
+          let activeTheme = themes[name]
+          if (!activeTheme) {
+            console.error('No theme by name', name, 'only:', themes, 'keeping current theme')
+            activeTheme = theme
+          }
+          const val = activeTheme[key]
+          if (process.env.NODE_ENV === 'development') {
+            if (typeof val === 'undefined') {
+              throw new Error(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`)
+            }
+          }
+          if (state.current.isRendering) {
+            state.current.keys.add(key)
+          }
+          // TODO costly, can make faster (we need name mapping to og name, but val pointing to new val)
+          // console.log('returning new variable', val, key)
+          return new Variable({ val: val.val, name: key })
+        },
+      })
+    },
+    [
+      /* if concurrent mode wanted put manager.name here */
+    ]
+  )
+}

package/src/index.ts

@@ -0,0 +1,33 @@
+export * from './createComponent'
+export * from './createShorthands'
+export * from './createTheme'
+export * from './createTamagui'
+export * from './createFont'
+export { createTokens } from './createTokens'
+export * from './createVariable'
+export * from './styled'
+export * from './types'
+
+export * from './constants/pseudos'
+export * from './constants/constants'
+export * from './constants/platform'
+export * from './constants/rnw'
+
+export * from './helpers/isObj'
+export * from './helpers/getStylesAtomic'
+export * from './helpers/matchMedia'
+export * from './helpers/themeable'
+
+export * from './hooks/useConstant'
+export * from './hooks/useForceUpdate'
+export * from './hooks/useMedia'
+export * from './hooks/useTheme'
+
+export * from './views/Animated'
+export * from './views/Stack'
+export * from './views/Text'
+export * from './views/Theme'
+export * from './views/ThemeInverse'
+export * from './views/ThemeProvider'
+export * from './views/TextAncestorContext'
+export * from './views/SafeAreaProvider'

package/src/static/postProcessStyles.tsx

@@ -0,0 +1,20 @@
+import { getSplitStyles } from '../helpers/getSplitStyles'
+import { StaticConfigParsed, TamaguiInternalConfig, ThemeObject } from '../types'
+
+// used only by static extractor
+
+export const postProcessStyles = (
+  inStyles: any,
+  staticConfig: StaticConfigParsed,
+  theme: ThemeObject
+) => {
+  const { style, viewProps, pseudos, classNames } = getSplitStyles(inStyles, staticConfig, theme)
+  // flattening
+  const next = {}
+  for (const s of style) {
+    if (!s) continue
+    Object.assign(next, s)
+  }
+  Object.assign(next, pseudos)
+  return { style: next, viewProps, classNames }
+}

package/src/static.ts

@@ -0,0 +1,22 @@
+// only stuff that gets extracted or needed by tamagui-static
+
+export * from './styled'
+export * from './createComponent'
+export * from './createFont'
+export * from './createTokens'
+export * from './createTamagui'
+export * from './constants/constants'
+
+export * from './hooks/useMedia'
+export * from './hooks/useTheme'
+
+export * from './helpers/isObj'
+export * from './helpers/getStylesAtomic'
+export * from './helpers/getSplitStyles'
+export * from '@tamagui/helpers'
+
+export * from './constants/pseudos'
+
+// -- below exports are only bundled compile-time --
+
+export * from './static/postProcessStyles'

package/src/styled.ts

@@ -0,0 +1,82 @@
+import React from 'react'
+
+import { createComponent } from './createComponent'
+import { extendStaticConfig } from './helpers/extendStaticConfig'
+import { MediaProps, StaticComponent, StaticConfig, TamaguiConfig, Themes, Tokens } from './types'
+
+export function styled<
+  ParentComponent extends StaticComponent | React.Component<any>,
+  Variants extends GetVariants<ParentComponent>
+>(
+  Component: ParentComponent,
+  options?: GetProps<ParentComponent> & {
+    variants?: Variants
+  },
+  staticExtractionOptions?: StaticConfig
+) {
+  const staticConfigProps: StaticConfig = (() => {
+    if (options) {
+      const { variants, ...defaultProps } = options
+      return { ...staticExtractionOptions, variants, defaultProps }
+    }
+    return {}
+  })()
+  const config = extendStaticConfig(Component, staticConfigProps)
+  const component = createComponent(config!) // error is good here its on init
+  type VariantProps = GetVariantProps<Variants>
+  return component as StaticComponent<
+    Omit<GetProps<ParentComponent>, keyof VariantProps> & VariantProps & MediaProps<VariantProps>
+    // leave this out it was causing infinite recursion type issues
+    // VariantProps
+  >
+}
+
+// type ParentVariants = A extends StaticComponent<any, infer Variants> ? Variants : {}
+
+export type GetProps<A> = A extends StaticComponent<infer Props>
+  ? Props
+  : A extends React.Component<infer Props>
+  ? Props
+  : {}
+
+export type GetVariants<ParentComponent extends StaticComponent | React.Component<any>> = void | {
+  [key: string]: {
+    [key: string]:
+      | Partial<GetProps<ParentComponent>>
+      | ((
+          val: any,
+          config: {
+            tokens: TamaguiConfig['tokens']
+            theme: Themes extends { [key: string]: infer B } ? B : unknown
+            props: GetProps<ParentComponent>
+          }
+        ) => Partial<GetProps<ParentComponent>>)
+  }
+}
+
+export type GetVariantProps<Variants> = Variants extends void
+  ? {}
+  : {
+      // ensure variants actually defined
+      [Key in keyof Variants]?: keyof Variants[Key] extends `...${infer VariantSpread}`
+        ? VariantSpread extends keyof Tokens
+          ? keyof Tokens[VariantSpread] extends string | number
+            ? `$${keyof Tokens[VariantSpread]}`
+            : unknown
+          : unknown
+        : keyof Variants[Key] extends 'true'
+        ? boolean
+        : keyof Exclude<Variants[Key], undefined>
+    }
+
+// type X = { ok: 1 }
+// type Y = { okk: 2; ok: 3 }
+// type Z = X & Y
+// type Z2 = Z
+
+// TODO get name
+// const displayName = `styled(Component)`
+// Object.defineProperty(component, 'name', {
+//   value: displayName,
+//   writable: false,
+// })