@tamagui/core 1.0.1-beta.21 → 1.0.1-beta.210

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,70 @@
+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/setupReactNative.ts

@@ -0,0 +1,9 @@
+let rn
+
+export function getReactNative() {
+  return rn
+}
+
+export function setupReactNative(_) {
+  rn = _
+}

package/src/static.ts

@@ -0,0 +1,5 @@
+// only stuff that gets extracted or needed by tamagui-static
+export * from './index'
+
+// for static
+export * from './helpers/proxyThemeVariables'

package/src/styled.tsx

@@ -0,0 +1,204 @@
+import { getConfig } from './config'
+import { createComponent } from './createComponent'
+import { getReactNative } 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 }
+}
+
+// can't infer from styled(<YStack />) which would be nice
+// * excessively deep type instantiation
+
+type GetBaseProps<A extends StylableComponent> =
+  // A extends TamaguiReactElement
+  //   ? GetBaseProps<A['type']> :
+  A extends TamaguiComponent<any, any, infer P> ? P : GetProps<A>
+
+type GetVariantProps<A extends StylableComponent> =
+  // A extends TamaguiReactElement
+  //   ? GetVariantProps<A['type']>
+  //   :
+  A extends TamaguiComponent<any, any, any, infer V> ? V : {}
+
+let RNComponentConfigs: WeakMap<any, Partial<StaticConfig>> | null = null
+
+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>
+) {
+  // allows passing styled(<H1 bc="red" />)
+  // but to get types right would be tricky
+  // if (isValidElement(Component) && isTamaguiComponent(Component.type)) {
+  //   const props = Component.props
+  //   if (props && typeof props === 'object') {
+  //     Component = Component.type as any
+  //     options = options ? ({ ...props, ...options } as any) : props
+  //   }
+  // }
+
+  const RN = getReactNative()
+  if (RN && typeof RN === 'object' && !RNComponentConfigs) {
+    RNComponentConfigs = new WeakMap()
+    for (const key in RN) {
+      const val = RN[key]
+      if (!val) continue
+      if (key[0].toLowerCase() === key[0]) continue
+      RNComponentConfigs.set(val, {
+        isReactNative: true,
+        isText: key === 'Text' || key === 'TextInput',
+        inlineProps: key === 'Image' ? new Set(['src', 'width', 'height']) : undefined,
+      })
+    }
+  }
+
+  const staticConfigProps = (() => {
+    const parentStaticConfig =
+      'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null
+
+    if (process.env.NODE_ENV === 'development') {
+      if (parentStaticConfig?.isHOC) {
+        // eslint-disable-next-line no-console
+        console.warn(
+          `Warning: Parent component is a functional component, not a Tamagui styled() component. Extending with styled() will break and lead to incorrect styles.`,
+          `Given options:`,
+          options,
+          new Error().stack
+        )
+      }
+    }
+
+    if (options) {
+      const {
+        variants,
+        name,
+        defaultVariants,
+        acceptsClassName: acceptsClassNameProp,
+        ...defaultProps
+      } = options
+      if (defaultVariants) {
+        Object.assign(defaultProps, defaultVariants)
+      }
+      const isReactNative = Boolean(
+        (RNComponentConfigs &&
+          (RNComponentConfigs.has(Component) ||
+            RNComponentConfigs.has(parentStaticConfig?.Component))) ||
+          parentStaticConfig?.isReactNative ||
+          staticExtractionOptions?.isReactNative
+      )
+      const isTamagui = !isReactNative && !!parentStaticConfig
+
+      const Comp = isReactNative ? parentStaticConfig?.Component || Component : (Component as any)
+      const nativeConf = (isReactNative && RNComponentConfigs?.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,
+      }
+
+      // TODO compiler doesn't have logic to include children, de-opt (see EnsureFlexed for test usage)
+      // 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
+}
+
+// import { Stack } from './views/Stack'
+// const X = styled(Stack, {
+//   variants: {
+//     size: {
+//       '...size': (val) => {
+//         return {}
+//       }
+//     },
+//     disabled: {
+//       true: {
+//         opacity: 0.5,
+//         pointerEvents: 'none',
+//       },
+//     },
+//   } as const
+// })
+// type variants = GetStyledVariants<typeof X>
+// const y = <X disabled size="$10" />

package/src/types-rnw.tsx

@@ -0,0 +1,162 @@
+// The following list is sourced from:
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L76
+type RNWCursorValue =
+  | 'alias'
+  | 'all-scroll'
+  | 'auto'
+  | 'cell'
+  | 'context-menu'
+  | 'copy'
+  | 'crosshair'
+  | 'default'
+  | 'grab'
+  | 'grabbing'
+  | 'help'
+  | 'pointer'
+  | 'progress'
+  | 'wait'
+  | 'text'
+  | 'vertical-text'
+  | 'move'
+  | 'none'
+  | 'no-drop'
+  | 'not-allowed'
+  | 'zoom-in'
+  | 'zoom-out'
+  | 'col-resize'
+  | 'e-resize'
+  | 'ew-resize'
+  | 'n-resize'
+  | 'ne-resize'
+  | 'ns-resize'
+  | 'nw-resize'
+  | 'row-resize'
+  | 's-resize'
+  | 'se-resize'
+  | 'sw-resize'
+  | 'w-resize'
+  | 'nesw-resize'
+  | 'nwse-resize'
+
+// This list is the combination of the following two lists:
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAriaRole.js#L10
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L12
+// Plus the single hard-coded value "label" from here:
+// - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/modules/AccessibilityUtil/propsToAccessibilityComponent.js#L36
+type RNWWebAccessibilityRole =
+  | 'adjustable'
+  | 'article'
+  | 'banner'
+  | 'blockquote'
+  | 'button'
+  | 'code'
+  | 'complementary'
+  | 'contentinfo'
+  | 'deletion'
+  | 'emphasis'
+  | 'figure'
+  | 'form'
+  | 'header'
+  | 'image'
+  | 'imagebutton'
+  | 'insertion'
+  | 'keyboardkey'
+  | 'label'
+  | 'link'
+  | 'list'
+  | 'listitem'
+  | 'main'
+  | 'navigation'
+  | 'none'
+  | 'region'
+  | 'search'
+  | 'strong'
+  | 'summary'
+  | 'text'
+
+export interface RNWViewProps {
+  // our internal hack to pass className down (until styleq transition)
+  dataSet?: any
+
+  // TODO get proper types:
+  target?: any
+  rel?: any
+  download?: any
+
+  accessibilityRole?: RNWWebAccessibilityRole
+  href?: string
+  hrefAttrs?: {
+    target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'
+    rel?: string
+    download?: boolean
+  }
+  onMouseDown?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseUp?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void
+  onScroll?: (event: React.UIEvent<HTMLDivElement, UIEvent>) => void
+  // For compatibility with RNW internals
+  onScrollShouldSetResponder?: unknown
+  onScrollShouldSetResponderCapture?: unknown
+  onSelectionChangeShouldSetResponder?: unknown
+  onSelectionChangeShouldSetResponderCapture?: unknown
+}
+
+export interface RNWTextProps {
+  dir?: 'ltr' | 'rtl' | 'auto'
+  focusable?: boolean
+  accessibilityRole?: RNWWebAccessibilityRole
+  accessibilityState?: {
+    busy?: boolean
+    checked?: boolean | 'mixed'
+    disabled?: boolean
+    expanded?: boolean
+    grabbed?: boolean
+    hidden?: boolean
+    invalid?: boolean
+    pressed?: boolean
+    readonly?: boolean
+    required?: boolean
+    selected?: boolean
+  }
+  href?: string
+  // TODO hrefAttrs or come up with proper html escape hatch
+  // hrefAttrs?: {
+  //   target?: '_blank' | '_self' | '_top' | 'blank' | 'self' | 'top'
+  //   rel?: string
+  //   download?: boolean
+  // }
+  onMouseEnter?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onMouseLeave?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void
+  // For compatibility with RNW internals
+  onMoveShouldSetResponder?: unknown
+  onMoveShouldSetResponderCapture?: unknown
+  onResponderEnd?: unknown
+  onResponderGrant?: unknown
+  onResponderMove?: unknown
+  onResponderReject?: unknown
+  onResponderRelease?: unknown
+  onResponderStart?: unknown
+  onResponderTerminate?: unknown
+  onResponderTerminationRequest?: unknown
+  onScrollShouldSetResponder?: unknown
+  onScrollShouldSetResponderCapture?: unknown
+  onSelectionChangeShouldSetResponder?: unknown
+  onSelectionChangeShouldSetResponderCapture?: unknown
+  onStartShouldSetResponder?: unknown
+  onStartShouldSetResponderCapture?: unknown
+}
+
+export interface RNWViewStyle {
+  cursor?: RNWCursorValue
+  transitionProperty?: string
+  display?: 'flex' | 'inline-flex' | 'none'
+}
+
+export interface RNWTextStyle {
+  // The following list is sourced from:
+  // - https://github.com/necolas/react-native-web/blob/0.17.5/packages/react-native-web/src/types/styles.js#L128
+  userSelect?: 'all' | 'auto' | 'contain' | 'none' | 'text'
+}