@tamagui/core 1.0.0-alpha.2 → 1.0.0-alpha.23

package/src/hooks/useMedia.tsx

@@ -1,194 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,107 +0,0 @@
-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

@@ -1,33 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,22 +0,0 @@
-// 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

@@ -1,82 +0,0 @@
-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,
-// })