@hanzogui/web 2.0.0

package/src/hooks/getThemeProxied.ts

@@ -0,0 +1,202 @@
+import { isIos } from '@hanzogui/constants'
+import type { MutableRefObject } from 'react'
+import { getConfig, getSetting } from '../config'
+import { getVariable } from '../createVariable'
+import { getDynamicVal } from '../helpers/getDynamicVal'
+import type {
+  ThemeParsed,
+  ThemeState,
+  Tokens,
+  UseThemeWithStateProps,
+  Variable,
+  VariableVal,
+  VariableValGeneric,
+} from '../types'
+import { doesRootSchemeMatchSystem } from './doesRootSchemeMatchSystem'
+
+export type ThemeProxied = {
+  [Key in keyof ThemeParsed | keyof Tokens['color']]: ThemeGettable<
+    Key extends keyof ThemeParsed ? ThemeParsed[Key] : Variable<any>
+  >
+} & {
+  // fallback to other tokens
+  [Key in string & {}]?: ThemeGettable<Variable<any>>
+}
+
+type ThemeGettable<Val> = Val & {
+  /**
+   * Tries to return an optimized value that avoids the need for re-rendering:
+   * On web a CSS variable, on iOS a dynamic color, on Android it doesn't
+   * optimize and returns the underyling value.
+   *
+   * See: https://reactnative.dev/docs/dynamiccolorios
+   *
+   * @param platform when "web" it will only return the dynamic value for web, avoiding the iOS dynamic value.
+   * For things like SVG, gradients, or other external components that don't support it, use this option.
+   */
+  get: (
+    platform?: 'web'
+  ) =>
+    | string
+    | (Val extends Variable<infer X>
+        ? X extends VariableValGeneric
+          ? any
+          : Exclude<X, Variable>
+        : Val extends VariableVal
+          ? string | number
+          : unknown)
+}
+
+// only proxy each theme one time, after that we know that renders are sync,
+// so we can just change the focus of the proxied theme and it can be re-used
+const cache: Map<ThemeParsed, ThemeProxied> = new Map()
+
+let curKeys: MutableRefObject<Set<string> | null>
+let curSchemeKeys: MutableRefObject<Set<string> | null>
+let curProps: UseThemeWithStateProps
+let curState: ThemeState | null
+
+const emptyObject = {}
+
+export function getThemeProxied(
+  // underscore to prevent accidental usage below
+  _props: UseThemeWithStateProps,
+  _state: ThemeState | null,
+  _keys: MutableRefObject<Set<string> | null>,
+  _schemeKeys?: MutableRefObject<Set<string> | null>
+): ThemeProxied {
+  if (!_state?.theme) {
+    return emptyObject
+  }
+
+  curKeys = _keys
+  curSchemeKeys = _schemeKeys!
+  curProps = _props
+  curState = _state
+
+  if (cache.has(curState.theme)) {
+    const proxied = cache.get(curState.theme)!
+    return proxied
+  }
+
+  // first time running on this theme, create:
+  // from here on only use current*
+
+  const config = getConfig()
+
+  function track(key: string, schemeOptimized = false) {
+    if (!curKeys) return
+    if (!curKeys.current) {
+      curKeys.current = new Set()
+    }
+    curKeys.current.add(key)
+
+    // track scheme-optimized keys separately so we know if a scheme-only
+    // change can skip re-render (when all accessed keys use DynamicColorIOS)
+    if (schemeOptimized && curSchemeKeys) {
+      if (!curSchemeKeys.current) {
+        curSchemeKeys.current = new Set()
+      }
+      curSchemeKeys.current.add(key)
+    }
+
+    if (process.env.NODE_ENV === 'development' && curProps.debug) {
+      console.info(
+        ` 🎨 useTheme() tracking key: ${key} schemeOptimized=${schemeOptimized}`
+      )
+    }
+  }
+
+  const proxied = Object.fromEntries(
+    Object.entries(_state.theme).flatMap(([key, value]) => {
+      const proxied = {
+        ...value,
+        get val() {
+          // when they touch the actual value we only track it if its a variable (web), its ignored!
+          if (!globalThis.guiAvoidTracking) {
+            // always track .val - not scheme optimized since they're getting raw value
+            track(key, false)
+          }
+          return value.val
+        },
+        get(platform?: 'web') {
+          if (!curState) return
+
+          const outVal = getVariable(value)
+          const { name, scheme } = curState
+
+          if (process.env.HANZO_GUI_TARGET === 'native') {
+            // ios can avoid re-rendering for scheme changes (light↔dark) when using DynamicColorIOS
+            // this does NOT work for sub-theme changes (red→blue) or when scheme inverses from parent
+            const fastSchemeChange = getSetting('fastSchemeChange')
+            const rootMatchesSystem = doesRootSchemeMatchSystem()
+            const shouldOptimize =
+              scheme &&
+              platform !== 'web' &&
+              isIos &&
+              !curProps.deopt &&
+              !curState.isInverse &&
+              fastSchemeChange &&
+              rootMatchesSystem
+
+            if (process.env.NODE_ENV === 'development' && curProps.debug === 'verbose') {
+              console.info(
+                ` 🎨 useTheme().get(${key}) theme=${name} scheme=${scheme}`,
+                `\n   shouldOptimize=${shouldOptimize} (iOS=${isIos} deopt=${curProps.deopt} isInverse=${curState.isInverse} fastScheme=${fastSchemeChange} rootMatch=${rootMatchesSystem})`
+              )
+            }
+
+            if (shouldOptimize) {
+              const oppositeScheme = scheme === 'dark' ? 'light' : 'dark'
+              const oppositeName = name.replace(scheme, oppositeScheme)
+              const color = getVariable(config.themes[name]?.[key])
+              const oppositeColor = getVariable(config.themes[oppositeName]?.[key])
+
+              if (
+                process.env.NODE_ENV === 'development' &&
+                curProps.debug === 'verbose'
+              ) {
+                console.info(
+                  ` 🎨 useTheme().get(${key}) using DynamicColorIOS`,
+                  `\n   color=${color} oppositeColor=${oppositeColor}`
+                )
+              }
+
+              const dynamicVal = getDynamicVal({
+                scheme,
+                val: color,
+                oppositeVal: oppositeColor,
+              })
+
+              // track as scheme-optimized - can skip re-render for scheme-only changes
+              track(key, true)
+
+              return dynamicVal
+            }
+
+            if (process.env.NODE_ENV === 'development' && curProps.debug) {
+              console.info(
+                ` 🎨 useTheme().get(${key}) tracking key (not optimizing)`,
+                `\n   platform=${platform} isIOS=${isIos} deopt=${curProps.deopt} fastScheme=${fastSchemeChange}`
+              )
+            }
+
+            // not scheme-optimized
+            track(key, false)
+          }
+
+          return outVal
+        },
+      }
+
+      return [
+        [key, proxied],
+        [`$${key}`, proxied],
+      ]
+    })
+  ) as ThemeProxied
+
+  cache.set(_state.theme, proxied)
+
+  return proxied
+}

package/src/hooks/useComponentState.ts

@@ -0,0 +1,269 @@
+import { isServer, isWeb } from '@hanzogui/constants'
+import { useCreateShallowSetState } from '@hanzogui/is-equal-shallow'
+import { useDidFinishSSR, useIsClientOnly } from '@hanzogui/use-did-finish-ssr'
+import { useRef, useState } from 'react'
+import { getSetting } from '../config'
+import {
+  defaultComponentState,
+  defaultComponentStateMounted,
+  defaultComponentStateShouldEnter,
+} from '../defaultComponentState'
+import { isObj } from '../helpers/isObj'
+import { log } from '../helpers/log'
+import type {
+  ComponentContextI,
+  StaticConfig,
+  GuiComponentState,
+  GuiComponentStateRef,
+  GuiInternalConfig,
+  TextProps,
+  UseAnimationHook,
+} from '../types'
+import type { ViewProps } from '../views/View'
+
+export const useComponentState = (
+  props: ViewProps | TextProps | Record<string, any>,
+  animationDriver: ComponentContextI['animationDriver'],
+  staticConfig: StaticConfig,
+  config: GuiInternalConfig
+) => {
+  'use no memo'
+
+  const isHydrated = useDidFinishSSR()
+  const needsHydration = !useIsClientOnly()
+
+  const useAnimations = animationDriver?.isStub
+    ? undefined
+    : (animationDriver?.useAnimations as UseAnimationHook | undefined)
+
+  const { isHOC } = staticConfig
+
+  const stateRef = useRef<GuiComponentStateRef>(
+    // performance: avoid creating object every render
+    undefined as unknown as GuiComponentStateRef
+  )
+
+  if (!stateRef.current) {
+    stateRef.current = {
+      startedUnhydrated: needsHydration && !isHydrated,
+    }
+  }
+
+  // after we get states mount we need to turn off isAnimated for server side
+  const hasAnimationProp = Boolean(
+    (!isHOC && 'transition' in props) ||
+    (props.style && hasAnimatedStyleValue(props.style))
+  )
+
+  const inputStyle = animationDriver?.inputStyle ?? 'css'
+  const outputStyle = animationDriver?.outputStyle ?? 'css'
+  const curStateRef = stateRef.current
+
+  if (!needsHydration && hasAnimationProp) {
+    curStateRef.hasAnimated = true
+  }
+
+  const willBeAnimatedClient = (() => {
+    const next = !!(hasAnimationProp && !isHOC && useAnimations)
+    return Boolean(next || curStateRef.hasAnimated)
+  })()
+
+  const willBeAnimated = !isServer && willBeAnimatedClient
+
+  // once animated, always animated to preserve hooks / vdom structure
+  if (willBeAnimated && !curStateRef.hasAnimated) {
+    curStateRef.hasAnimated = true
+  }
+
+  const { disableClassName } = props
+
+  // HOOK
+  const presence =
+    (!isHOC &&
+      willBeAnimated &&
+      props['animatePresence'] !== false &&
+      animationDriver?.usePresence?.()) ||
+    null
+
+  const presenceState = presence?.[2]
+  const isExiting = presenceState?.isPresent === false
+  const isEntering = presenceState?.isPresent === true && presenceState.initial !== false
+
+  const hasEnterStyle = !!props.enterStyle
+
+  const hasAnimationThatNeedsHydrate =
+    hasAnimationProp &&
+    !isHydrated &&
+    (animationDriver?.isReactNative || inputStyle !== 'css')
+
+  const canImmediatelyEnter = hasEnterStyle || isEntering
+
+  // this can be conditional because its only ever needed with animations
+  const shouldEnter =
+    !isHOC &&
+    (hasEnterStyle ||
+      isEntering ||
+      hasAnimationThatNeedsHydrate ||
+      // disableClassName doesnt work server side, only client, so needs hydrate
+      // this is just for a better ux, supports css variables for light/dark, media queries, etc
+      disableClassName)
+
+  // two stage enter: because we switch from css driver to spring driver
+  //   - first render: render to match server with css driver
+  //   - second render: state.unmounted = should-enter, still rendering the initial,
+  //     non-entered state but now with the spring animation driver
+
+  const initialState = shouldEnter
+    ? // on the very first render we switch all spring animation drivers to css rendering
+      // this is because we need to use css variables, which they don't support to do proper SSR
+      // without flickers of the wrong colors.
+      // but once we do that initial hydration and we are in client side rendering mode,
+      // we can avoid the extra re-render on mount
+      canImmediatelyEnter
+      ? defaultComponentStateShouldEnter
+      : defaultComponentState
+    : defaultComponentStateMounted
+
+  // will be nice to deprecate half of these:
+  const disabled = isDisabled(props)
+
+  if (disabled != null) {
+    initialState.disabled = disabled
+  }
+
+  // HOOK
+  const states = useState<GuiComponentState>(initialState)
+
+  const state = props.forceStyle ? { ...states[0], [props.forceStyle]: true } : states[0]
+  const setState = states[1]
+
+  // apply states we never updated from avoiding re-renders in animation driver
+  // unsafe yea yea
+  // if (stateRef.current.nextComponentState) {
+  //   Object.assign(state, stateRef.current.nextComponentState)
+  // }
+
+  // only web server + initial client render run this when not hydrated:
+  let isAnimated = willBeAnimated
+  if (isWeb && hasAnimationThatNeedsHydrate && !staticConfig.isHOC && !isHydrated) {
+    isAnimated = false
+    curStateRef.willHydrate = true
+  }
+
+  // immediately update disabled state and reset component state
+  if (disabled !== state.disabled) {
+    // if disabled remove all press/focus/hover states
+    if (disabled) {
+      Object.assign(state, defaultComponentStateMounted)
+    }
+    state.disabled = disabled
+    setState((_) => ({ ...state }))
+  }
+
+  const groupName = props.group as any as string | undefined
+
+  const setStateShallow = useCreateShallowSetState(setState, props.debug)
+
+  // set enter/exit variants onto our new props object
+  if (presenceState && isAnimated && isHydrated && staticConfig.variants) {
+    if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
+      console.warn(`has presenceState ${JSON.stringify(presenceState)}`)
+    }
+    const { enterVariant, exitVariant, enterExitVariant, custom } = presenceState
+    if (isObj(custom)) {
+      Object.assign(props, custom)
+    }
+    const exv = exitVariant ?? enterExitVariant
+    const env = enterVariant ?? enterExitVariant
+    if (state.unmounted && env && staticConfig.variants[env]) {
+      if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
+        console.warn(`Animating presence ENTER "${env}"`)
+      }
+      props[env] = true
+    } else if (isExiting && exv) {
+      if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
+        console.warn(`Animating presence EXIT "${exv}"`)
+      }
+      props[exv] = exitVariant !== enterExitVariant
+    }
+  }
+
+  let noClass = !isWeb || !!props.forceStyle
+
+  if (!isHydrated) {
+    noClass = false
+  } else {
+    // on server for SSR and animation compat added the && isHydrated but perhaps we want
+    // disableClassName="until-hydrated" to be more straightforward
+    // see issue if not, Button sets disableClassName to true <Button transition="" /> with
+    // the react-native driver errors because it tries to animate var(--color) to rbga(..)
+    // no matter what if fully unmounted or on the server we use className
+    // only once we hydrate do we switch to spring animation drivers or disableClassName etc
+    if (isWeb && isHydrated) {
+      const isAnimatedAndHydrated = isAnimated && isHydrated
+
+      const isClassNameDisabled =
+        !staticConfig.acceptsClassName && (getSetting('disableSSR') || !state.unmounted)
+
+      const isDisabledManually = disableClassName && !state.unmounted
+
+      if (
+        // Only disable className for animation drivers that output inline styles (not css)
+        (isAnimatedAndHydrated && outputStyle !== 'css') ||
+        isDisabledManually ||
+        isClassNameDisabled
+      ) {
+        noClass = true
+
+        if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') {
+          log(`avoiding className`, {
+            isAnimatedAndHydrated,
+            isDisabledManually,
+            isClassNameDisabled,
+          })
+        }
+      }
+    }
+  }
+
+  return {
+    startedUnhydrated: curStateRef.startedUnhydrated,
+    curStateRef,
+    disabled,
+    groupName,
+    hasAnimationProp,
+    hasEnterStyle,
+    isAnimated,
+    isExiting,
+    isHydrated,
+    presence,
+    presenceState,
+    setState,
+    setStateShallow,
+    noClass,
+    state,
+    stateRef,
+    inputStyle,
+    outputStyle,
+    willBeAnimated,
+    willBeAnimatedClient,
+  }
+}
+
+function hasAnimatedStyleValue(style: object) {
+  return Object.keys(style).some((k) => {
+    const val = style[k]
+    return val && typeof val === 'object' && '_animation' in val
+  })
+}
+
+const isDisabled = (props: any) => {
+  return (
+    props.disabled ||
+    props.passThrough ||
+    props.accessibilityState?.disabled ||
+    props['aria-disabled'] ||
+    props.accessibilityDisabled ||
+    false
+  )
+}

package/src/hooks/useDisableSSR.tsx

@@ -0,0 +1,6 @@
+import { getSetting } from '../config'
+import type { ComponentContextI } from '../types'
+
+export function getDisableSSR(componentContext?: ComponentContextI) {
+  return componentContext?.disableSSR ?? getSetting('disableSSR')
+}

package/src/hooks/useIsTouchDevice.tsx

@@ -0,0 +1,6 @@
+import { isTouchable, isWeb } from '@hanzogui/constants'
+import { useDidFinishSSR } from '@hanzogui/use-did-finish-ssr'
+
+export const useIsTouchDevice = () => {
+  return !isWeb ? true : useDidFinishSSR() ? isTouchable : false
+}