@tamagui/web 1.2.5

package/src/index.ts

@@ -0,0 +1,72 @@
+export * from './Tamagui'
+export * from './createComponent'
+export * from './createShorthands'
+export * from './createTheme'
+export * from './createTamagui'
+export * from './createFont'
+export * from './createTokens'
+export * from './createVariable'
+export * from './createVariables'
+export * from './insertFont'
+export * from './addTheme'
+export * from './updateTheme'
+export * from './styled'
+export * from './types'
+export * from './setupReactNative'
+
+export { getConfig, getThemes, getTokens, onConfiguredOnce } from './config'
+
+export * from './constants/constants'
+
+export * from './helpers/useShallowSetState'
+export * from './helpers/getVariantExtras'
+export * from './helpers/getAnimationDriver'
+export * from './helpers/getExpandedShorthands'
+export * from './helpers/getSplitStyles'
+export * from './helpers/getStylesAtomic'
+export * from './helpers/pseudoDescriptors'
+export * from './helpers/mergeProps'
+export * from './helpers/expandStyles'
+export * from './helpers/isTamaguiElement'
+export * from './helpers/isTamaguiComponent'
+export * from './helpers/matchMedia'
+export * from './helpers/proxyThemeVariables'
+export * from './helpers/themeable'
+export * from './helpers/withStaticProperties'
+
+export * from './contexts/ButtonNestingContext'
+
+export * from './hooks/useId'
+export * from './hooks/useIsTouchDevice'
+
+export {
+  configureMedia,
+  getMedia,
+  mediaState,
+  useMedia,
+  useMediaPropsActive,
+  mediaObjectToString,
+  mediaQueryConfig,
+} from './hooks/useMedia'
+export * from './hooks/useTheme'
+export * from './hooks/useThemeName'
+export * from './hooks/useSafeRef'
+export * from './hooks/useStyle'
+
+export * from './views/Slot'
+export * from './views/Stack'
+export * from './views/Text'
+export * from './contexts/TextAncestorContext'
+export * from './views/Theme'
+export * from './views/ThemeProvider'
+export * from './views/FontLanguage'
+export * from './views/TamaguiProvider'
+
+export * from '@tamagui/use-force-update'
+export * from '@tamagui/use-did-finish-ssr'
+export * from '@tamagui/use-event'
+export * from '@tamagui/compose-refs'
+export * from '@tamagui/helpers'
+export * from '@tamagui/constants'
+
+export * from './setupHooks'

package/src/inject-styles.ts

@@ -0,0 +1,20 @@
+// for vite dev mode
+
+const stylesheets: Record<string, HTMLElement> = {}
+
+interface InjectStylesOptions {
+  filePath: string
+  css: string
+}
+
+export const injectStyles = ({ filePath, css }: InjectStylesOptions) => {
+  let stylesheet = stylesheets[filePath]
+  if (!stylesheet) {
+    const styleEl = document.createElement('style')
+    styleEl.setAttribute('data-file', filePath)
+    styleEl.setAttribute('type', 'text/css')
+    stylesheet = stylesheets[filePath] = styleEl
+    document.head.appendChild(styleEl)
+  }
+  stylesheet.innerHTML = css
+}

package/src/insertFont.ts

@@ -0,0 +1,73 @@
+import { setConfigFont } from './config'
+import { createFont } from './createFont'
+import { Variable } from './createVariable'
+import { DeepVariableObject, createVariables } from './createVariables'
+import { registerCSSVariable, variableToCSS } from './helpers/registerCSSVariable'
+import { GenericFont } from './types'
+
+/**
+ * Runtime dynamic insert font
+ */
+export function insertFont<A extends GenericFont>(
+  name: string,
+  fontIn: A
+): DeepVariableObject<A> {
+  const font = createFont(fontIn)
+  const tokened = createVariables(font, name) as GenericFont
+  const parsed = parseFont(tokened) as DeepVariableObject<A>
+  if (process.env.TAMAGUI_TARGET === 'web' && typeof document !== 'undefined') {
+    const fontVars = registerFontVariables(parsed)
+    const style = document.createElement('style')
+    style.innerText = `:root .font_${name} {${fontVars.join(';')}}`
+    style.setAttribute('data-tamagui-font', name)
+    document.head.appendChild(style)
+  }
+  setConfigFont(name, tokened, parsed)
+  return parsed
+}
+
+export function parseFont<A extends GenericFont>(definition: A): DeepVariableObject<A> {
+  const parsed: any = {}
+  for (const attrKey in definition) {
+    const attr = definition[attrKey]
+    if (attrKey === 'family' || attrKey === 'face') {
+      parsed[attrKey] = attr
+      continue
+    }
+    parsed[attrKey] = {}
+    for (const key in attr) {
+      let val = attr[key] as any
+      // is a theme reference
+      if (val.val?.[0] === '$') {
+        val = val.val
+      }
+      parsed[attrKey][`$${key}`] = val
+    }
+  }
+  return parsed
+}
+
+export function registerFontVariables(parsedFont: any) {
+  const response: string[] = []
+
+  for (const fkey in parsedFont) {
+    if (fkey === 'face') continue
+    if (fkey === 'family') {
+      const val = parsedFont[fkey] as Variable
+      registerCSSVariable(val)
+      response.push(variableToCSS(val))
+    } else {
+      for (const fskey in parsedFont[fkey]) {
+        const fval = parsedFont[fkey][fskey]
+        if (typeof fval === 'string') {
+          // no need to add its a theme reference like "$borderColor"
+        } else {
+          const val = parsedFont[fkey][fskey] as Variable
+          registerCSSVariable(val)
+          response.push(variableToCSS(val))
+        }
+      }
+    }
+  }
+  return response
+}

package/src/setupHooks.ts

@@ -0,0 +1,35 @@
+import { RefObject } from 'react'
+
+import {
+  GetStyleResult,
+  TamaguiComponentEvents,
+  TamaguiComponentState,
+  TamaguiElement,
+} from './types'
+
+export const hooks: InternalHooks = {}
+
+// internal hooks setup
+export function setupHooks(next: InternalHooks) {
+  Object.assign(hooks, next)
+}
+
+type InternalHooks = {
+  usePropsTransform?: (
+    elementType: any,
+    props: Record<string, any>,
+    hostRef: RefObject<TamaguiElement>
+  ) => any
+
+  useEvents?: (
+    viewProps: Record<string, any>,
+    events: TamaguiComponentEvents | null,
+    splitStyles: GetStyleResult,
+    setStateShallow: (next: Partial<TamaguiComponentState>) => void
+  ) => any
+
+  getBaseViews?: () => {
+    View: any
+    Text: any
+  }
+}

package/src/setupReactNative.ts

@@ -0,0 +1,22 @@
+import { StaticConfig } from './types'
+
+export const ReactNativeStaticConfigs = new WeakMap<any, Partial<StaticConfig> | null>()
+
+export function getReactNativeConfig(Component: any) {
+  return ReactNativeStaticConfigs.get(Component)
+}
+
+export function setupReactNative(rnExports: Record<string, any>) {
+  for (const key in rnExports) {
+    if (key[0].toLowerCase() === key[0]) continue
+    const val = rnExports[key]
+    if (val && typeof val === 'object') {
+      ReactNativeStaticConfigs.set(val, {
+        isReactNative: true,
+        isText: key === 'Text' || key === 'TextInput',
+        isInput: key === 'TextInput',
+        inlineProps: key === 'Image' ? new Set(['src', 'width', 'height']) : undefined,
+      })
+    }
+  }
+}

package/src/styled.tsx

@@ -0,0 +1,195 @@
+import { stylePropsAll } from '@tamagui/helpers'
+
+import { createComponent } from './createComponent'
+import { ReactNativeStaticConfigs } from './setupReactNative'
+import {
+  GetProps,
+  GetVariantValues,
+  MediaProps,
+  PseudoProps,
+  StaticConfig,
+  StylableComponent,
+  TamaguiComponent,
+  TamaguiElement,
+  VariantDefinitions,
+  VariantSpreadFunction,
+} from './types'
+
+// TODO may be able to use this in the options?: arg below directly
+export type StyledOptions<ParentComponent extends StylableComponent> =
+  GetProps<ParentComponent> & {
+    name?: string
+    variants?: VariantDefinitions<ParentComponent> | undefined
+    defaultVariants?: { [key: string]: any }
+  }
+
+type GetBaseProps<A extends StylableComponent> = A extends TamaguiComponent<
+  any,
+  any,
+  infer P
+>
+  ? P
+  : GetProps<A>
+
+type GetVariantProps<A extends StylableComponent> = A extends TamaguiComponent<
+  any,
+  any,
+  any,
+  infer V
+>
+  ? V
+  : {}
+
+export function styled<
+  ParentComponent extends StylableComponent,
+  Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void
+>(
+  Component: ParentComponent,
+  // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues
+  options?: GetProps<ParentComponent> & {
+    name?: string
+    variants?: Variants | undefined
+    // thought i had this typed, but can't get it linked
+    defaultVariants?: { [key: string]: any }
+    acceptsClassName?: boolean
+  },
+  staticExtractionOptions?: Partial<StaticConfig>
+) {
+  // validate not using a variant over an existing valid style
+  if (process.env.NODE_ENV !== 'production') {
+    if (!Component) {
+      throw new Error(`No component given to styled()`)
+    }
+    if (options?.variants) {
+      for (const key in options.variants) {
+        if (key in stylePropsAll) {
+          console.error(
+            `Invalid variant key overlaps with style key: ${key}. Tamagui prevents defining variants that use valid style keys to reduce implementation complexity.`
+          )
+        }
+      }
+    }
+  }
+
+  const staticConfigProps = (() => {
+    const parentStaticConfig =
+      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
+
+    if (options) {
+      const {
+        variants,
+        name,
+        defaultVariants,
+        acceptsClassName: acceptsClassNameProp,
+        ...defaultProps
+      } = options
+      if (defaultVariants) {
+        Object.assign(defaultProps, defaultVariants)
+      }
+      const isReactNative = Boolean(
+        ReactNativeStaticConfigs.has(Component) ||
+          ReactNativeStaticConfigs.has(parentStaticConfig?.Component) ||
+          parentStaticConfig?.isReactNative ||
+          staticExtractionOptions?.isReactNative
+      )
+      const isTamagui = !isReactNative && !!parentStaticConfig
+
+      const Comp = isReactNative
+        ? parentStaticConfig?.Component || Component
+        : (Component as any)
+      const nativeConf = (isReactNative && ReactNativeStaticConfigs.get(Comp)) || null
+
+      const isText = Boolean(
+        staticExtractionOptions?.isText || parentStaticConfig?.isText
+      )
+      const acceptsClassName = acceptsClassNameProp ?? (isTamagui || isReactNative)
+
+      const conf: Partial<StaticConfig> = {
+        ...staticExtractionOptions,
+        ...(!isTamagui && {
+          Component: Comp,
+        }),
+        // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above
+        // take away the Partial<> and it's fine
+        variants,
+        defaultProps,
+        defaultVariants,
+        componentName: name,
+        isReactNative,
+        isText,
+        acceptsClassName,
+        ...nativeConf,
+      }
+
+      // bail on non className views as well
+      if (defaultProps.children || !acceptsClassName) {
+        conf.neverFlatten = true
+      }
+
+      return conf
+    }
+    return {}
+  })()
+
+  const component = createComponent(staticConfigProps, Component)
+
+  // get parent props without pseudos and medias so we can rebuild both with new variants
+  // get parent props without pseudos and medias so we can rebuild both with new variants
+  type ParentPropsBase = GetBaseProps<ParentComponent>
+  type ParentVariants = GetVariantProps<ParentComponent>
+
+  type OurVariants = Variants extends void
+    ? {}
+    : {
+        [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<
+          any,
+          infer Val
+        >
+          ? Val
+          : GetVariantValues<keyof Variants[Key]>
+      }
+
+  type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants
+  type OurPropsBase = ParentPropsBase & VariantProps
+
+  type Props = Variants extends void
+    ? GetProps<ParentComponent>
+    : // start with base props
+      OurPropsBase &
+        // add in media (+ pseudos nested)
+        MediaProps<Partial<OurPropsBase>> &
+        // add in pseudos
+        PseudoProps<Partial<OurPropsBase>>
+
+  type StyledComponent = TamaguiComponent<
+    Props,
+    TamaguiElement,
+    ParentPropsBase,
+    ParentVariants & OurVariants
+  >
+
+  return component as StyledComponent
+}
+
+// sanity check types
+// import { Stack } from './views/Stack'
+// const X = styled(Stack, {
+//   variants: {
+//     size: {
+//       '...size': (val) => {
+//         return {
+//           pointerEvents: 'auto'
+//         }
+//       }
+//     },
+//     disabled: {
+//       true: {
+//         alignContent: 'center',
+//         opacity: 0.5,
+//         pointerEvents: 'none',
+//       },
+//     },
+//   } as const
+// })
+// // type variants = GetStyledVariants<typeof X>
+// const y = <X disabled size="$10" />