@hanzogui/web 2.0.0

package/src/hooks/useMedia.tsx

@@ -0,0 +1,298 @@
+import { isServer, isWeb } from '@hanzogui/constants'
+import { useRef, useSyncExternalStore } from 'react'
+import { getSetting } from '../config'
+import { resetMediaStyleCache } from '../helpers/createMediaStyle'
+import { matchMedia } from '../helpers/matchMedia'
+import { mediaObjectToString } from '../helpers/mediaObjectToString'
+import {
+  getMedia,
+  mediaKeys,
+  mediaQueryConfig,
+  setMediaState,
+} from '../helpers/mediaState'
+import type {
+  ComponentContextI,
+  DebugProp,
+  GetStyleState,
+  IsMediaType,
+  MediaQueryState,
+  GuiInternalConfig,
+  UseMediaState,
+  WidthHeight,
+} from '../types'
+import { defaultMediaImportance } from '../helpers/pseudoDescriptors'
+
+const mediaKeyRegex = /\$(platform|theme|group)-/
+
+export const isMediaKey = (key: string): boolean => {
+  if (key[0] !== '$') return false
+  if (mediaKeys.has(key)) return true
+  if (mediaKeyRegex.test(key)) return true
+  return false
+}
+
+export const getMediaKey = (key: string): IsMediaType => {
+  if (key[0] !== '$') return false
+  if (mediaKeys.has(key)) return true
+  const match = key.match(mediaKeyRegex)
+  if (match) return match[1] as 'platform' | 'theme' | 'group'
+  return false
+}
+
+// for SSR capture it at time of startup
+let initState: MediaQueryState
+
+let mediaKeysOrdered: string[]
+
+export const getMediaKeyImportance = (key: string) => {
+  if (process.env.NODE_ENV === 'development' && key[0] === '$') {
+    throw new Error('use short key')
+  }
+
+  // + 100 because we set base usedKeys=1, pseudos are 2-N (however many we have)
+  // all media go above all pseudos so we need to pad it based on that
+  // right now theres 5 pseudos but in the future could be a few more
+  return mediaKeysOrdered.indexOf(key) + 100
+}
+
+const dispose = new Set<Function>()
+
+let mediaVersion = 0
+
+export const configureMedia = (config: GuiInternalConfig) => {
+  const { media } = config
+  const mediaQueryDefaultActive = getSetting('mediaQueryDefaultActive')
+  if (!media) return
+  mediaVersion++
+  // reset cached media style prefixes/selectors so they get recalculated with new key order
+  resetMediaStyleCache()
+  for (const key in media) {
+    getMedia()[key] = mediaQueryDefaultActive?.[key] || false
+    mediaKeys.add(`$${key}`)
+  }
+  Object.assign(mediaQueryConfig, media)
+  initState = { ...getMedia() }
+  mediaKeysOrdered = Object.keys(media)
+  setupMediaListeners()
+}
+
+function unlisten() {
+  dispose.forEach((cb) => cb())
+  dispose.clear()
+}
+
+/**
+ * Note: This should *not* set the state on the first render!
+ * Because to avoid hydration issues SSR must match the server
+ * *and then* re-render with the actual media query state.
+ */
+let setupVersion = -1
+export function setupMediaListeners() {
+  if (isWeb && isServer) return
+  if (process.env.IS_STATIC) return
+
+  // avoid setting up more than once per config
+  if (setupVersion === mediaVersion) return
+  setupVersion = mediaVersion
+
+  // hmr, undo existing before re-binding
+  unlisten()
+
+  for (const key in mediaQueryConfig) {
+    const str = mediaObjectToString(mediaQueryConfig[key])
+    const getMatch = () => matchMedia(str)
+    const match = getMatch()
+    if (!match) {
+      throw new Error('⚠️ No match')
+    }
+
+    // react native needs these deprecated apis for now
+    match.addListener(update)
+    dispose.add(() => {
+      match.removeListener(update)
+    })
+
+    function update() {
+      const next = !!getMatch().matches
+      if (next === getMedia()[key]) return
+      setMediaState({ ...getMedia(), [key]: next })
+      updateMediaListeners()
+    }
+
+    update()
+  }
+}
+
+const listeners = new Set<any>()
+
+export function updateMediaListeners() {
+  listeners.forEach((cb) => cb(getMedia()))
+}
+
+type MediaState = {
+  enabled?: boolean
+  keys?: Set<string> | null
+}
+
+const States = new WeakMap<any, MediaState>()
+
+export function setMediaShouldUpdate(
+  ref: any,
+  enabled?: boolean,
+  keys?: MediaState['keys']
+) {
+  const cur = States.get(ref)
+
+  if (!cur || cur.enabled !== enabled || keys) {
+    States.set(ref, {
+      ...cur,
+      enabled,
+      keys,
+    })
+  }
+}
+
+function subscribe(subscriber: () => void) {
+  listeners.add(subscriber)
+  return () => {
+    listeners.delete(subscriber)
+  }
+}
+
+export function useMedia(
+  componentContext?: ComponentContextI,
+  debug?: DebugProp
+): UseMediaState {
+  'use no memo'
+
+  const componentState = componentContext ? States.get(componentContext) : null
+
+  const internalRef = useRef<{
+    keys: Set<string>
+    lastState: MediaQueryState
+    pendingState?: MediaQueryState
+  }>(null)
+  if (!internalRef.current) {
+    internalRef.current = {
+      keys: new Set(),
+      lastState: getMedia(),
+    }
+  }
+
+  // reset on next render
+  if (internalRef.current.pendingState) {
+    internalRef.current.lastState = internalRef.current.pendingState
+    internalRef.current.pendingState = undefined
+  }
+
+  const { keys } = internalRef.current
+
+  // clear each render to track only rendered touched keys
+  if (keys.size) {
+    keys.clear()
+  }
+
+  const state = useSyncExternalStore(
+    subscribe,
+    () => {
+      const curKeys = componentState?.keys || keys
+      const { lastState, pendingState } = internalRef.current!
+
+      if (!curKeys.size) {
+        return lastState
+      }
+
+      const ms = getMedia()
+      for (const key of curKeys) {
+        if (ms[key] !== (pendingState || lastState)[key]) {
+          if (process.env.NODE_ENV === 'development' && debug) {
+            console.warn(`useMedia() ✍️`, key, lastState[key], '=>', ms[key])
+          }
+
+          // in emitter mode (no-rerender) avoid changing state, instead emit
+          if (componentContext?.mediaEmit) {
+            componentContext.mediaEmit(ms)
+            internalRef.current!.pendingState = ms
+            return lastState
+          }
+
+          internalRef.current!.lastState = ms
+
+          return ms
+        }
+      }
+
+      return lastState
+    },
+    getServerSnapshot
+  )
+
+  return new Proxy(state, {
+    get(_, key) {
+      if (!disableMediaTouch && typeof key === 'string') {
+        keys.add(key)
+      }
+      return Reflect.get(state, key)
+    },
+  })
+}
+
+const getServerSnapshot = () => initState
+
+let disableMediaTouch = false
+export function _disableMediaTouch(val: boolean) {
+  disableMediaTouch = val
+}
+
+export function getMediaState(mediaGroups: Set<string>, layout: WidthHeight) {
+  disableMediaTouch = true
+  let res: Record<string, boolean>
+  try {
+    res = Object.fromEntries(
+      [...mediaGroups].map((mediaKey) => {
+        return [mediaKey, mediaKeyMatch(mediaKey, layout as any)]
+      })
+    )
+  } finally {
+    disableMediaTouch = false
+  }
+  return res
+}
+
+export const getMediaImportanceIfMoreImportant = (
+  mediaKey: string,
+  key: string,
+  styleState: GetStyleState,
+  isSizeMedia: boolean
+) => {
+  const importance = isSizeMedia
+    ? getMediaKeyImportance(mediaKey)
+    : defaultMediaImportance
+  const usedKeys = styleState.usedKeys
+  return !usedKeys[key] || importance > usedKeys[key] ? importance : null
+}
+
+const cachedMediaKeyToQuery: Record<string, string> = {}
+
+export function mediaKeyToQuery(key: string) {
+  return (
+    cachedMediaKeyToQuery[key] ||
+    (cachedMediaKeyToQuery[key] = mediaObjectToString(mediaQueryConfig[key]))
+  )
+}
+
+export function mediaKeyMatch(
+  key: string,
+  dimensions: { width: number; height: number }
+) {
+  const mediaQueries = mediaQueryConfig[key]
+  const result = Object.keys(mediaQueries).every((query) => {
+    const expectedVal = +mediaQueries[query]
+    const isMax = query.startsWith('max')
+    const isWidth = query.endsWith('Width')
+    const givenVal = dimensions[isWidth ? 'width' : 'height']
+    // if not max then min
+    return isMax ? givenVal < expectedVal : givenVal > expectedVal
+  })
+  return result
+}

package/src/hooks/useProps.tsx

@@ -0,0 +1,158 @@
+import { useIsomorphicLayoutEffect } from '@hanzogui/constants'
+import React from 'react'
+import { getConfig } from '../config'
+import { ComponentContext } from '../contexts/ComponentContext'
+import { GroupContext } from '../contexts/GroupContext'
+import { useSplitStyles } from '../helpers/getSplitStyles'
+import { subscribeToContextGroup } from '../helpers/subscribeToContextGroup'
+import type { SplitStyleProps, StaticConfig, ThemeParsed, UseMediaState } from '../types'
+import type { ViewProps, ViewStyle } from '../views/View'
+import { View } from '../views/View'
+import { useComponentState } from './useComponentState'
+import { mediaState } from '../helpers/mediaState'
+import { useMedia } from './useMedia'
+import { useThemeWithState } from './useTheme'
+
+type UsePropsOptions = Pick<
+  SplitStyleProps,
+  'noExpand' | 'noNormalize' | 'noClass' | 'resolveValues'
+> & {
+  disableExpandShorthands?: boolean
+  forComponent?: { staticConfig: StaticConfig }
+  noClass?: boolean
+
+  /**
+   * Disable watching for media queries
+   */
+  noMedia?: boolean
+}
+
+export type PropsWithoutMediaStyles<A> = {
+  // remove all media
+  [Key in keyof A as Key extends `$${string}` ? never : Key]?: A[Key]
+}
+
+type PropsLikeObject = (ViewProps & Record<string, any>) | object
+type StyleLikeObject = (ViewStyle & Record<string, any>) | object
+
+/**
+ * Returns props and style as a single object, expanding and merging shorthands and media queries.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries you access.
+ *
+ * */
+export function useProps<A extends PropsLikeObject>(
+  props: A,
+  opts?: UsePropsOptions
+): PropsWithoutMediaStyles<A> {
+  const [propsOut, styleOut] = usePropsAndStyle(props, {
+    ...opts,
+    noExpand: true,
+    noNormalize: true,
+    resolveValues: 'none',
+  })
+  return {
+    ...propsOut,
+    ...styleOut,
+  }
+}
+
+/**
+ * Returns only style values fully resolved and flattened with merged media queries and shorthands with all theme and token values resolved.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries you access.
+ *
+ * */
+export function useStyle<A extends StyleLikeObject>(
+  props: A,
+  opts?: UsePropsOptions
+): PropsWithoutMediaStyles<A> {
+  return usePropsAndStyle(props, opts)[1] || {}
+}
+
+/**
+ * Returns [props, styles, theme, media] fully resolved and flattened with merged media queries and shorthands with all theme and token values resolved.
+ *
+ * Use sparingly, it will loop props and trigger re-render on all media queries you access.
+ *
+ * */
+export function usePropsAndStyle<A extends PropsLikeObject>(
+  props: A,
+  opts?: UsePropsOptions
+): [PropsWithoutMediaStyles<A>, PropsWithoutMediaStyles<A>, ThemeParsed, UseMediaState] {
+  const staticConfig = opts?.forComponent?.staticConfig ?? View.staticConfig
+  const [theme, themeState] = useThemeWithState({
+    componentName: staticConfig.componentName,
+    name: 'theme' in props ? props.theme : undefined,
+    needsUpdate() {
+      return true
+    },
+  })
+  const componentContext = React.useContext(ComponentContext)
+  const groupContext = React.useContext(GroupContext)
+  const { state, disabled, setStateShallow } = useComponentState(
+    props,
+    componentContext.animationDriver,
+    staticConfig,
+    getConfig()
+  )
+
+  const mediaStateNow = opts?.noMedia
+    ? // not safe to use mediaState but really marginal to hit this
+      mediaState
+    : useMedia()
+
+  const splitStyles = useSplitStyles(
+    props,
+    staticConfig,
+    theme,
+    themeState?.name || '',
+    state,
+    {
+      isAnimated: false,
+      mediaState: mediaStateNow,
+      noSkip: true,
+      noMergeStyle: true,
+      noClass: true,
+      resolveValues: 'auto',
+      ...opts,
+    },
+    null,
+    componentContext,
+    groupContext
+  )
+
+  const { mediaGroups, pseudoGroups } = splitStyles || {}
+
+  useIsomorphicLayoutEffect(() => {
+    if (disabled) {
+      return
+    }
+
+    if (state.unmounted) {
+      setStateShallow({ unmounted: false })
+      return
+    }
+
+    if (groupContext) {
+      return subscribeToContextGroup({
+        groupContext,
+        setStateShallow,
+        mediaGroups,
+        pseudoGroups,
+      })
+    }
+  }, [
+    disabled,
+    groupContext,
+    pseudoGroups ? Object.keys([...pseudoGroups]).join('') : 0,
+    mediaGroups ? Object.keys([...mediaGroups]).join('') : 0,
+  ])
+
+  return [
+    splitStyles?.viewProps || {},
+    splitStyles?.style || {},
+    theme,
+    mediaState,
+  ] as any
+}

package/src/hooks/useTheme.tsx

@@ -0,0 +1,48 @@
+import { useRef } from 'react'
+import type { ThemeParsed, ThemeState, UseThemeWithStateProps } from '../types'
+import { getThemeProxied, type ThemeProxied } from './getThemeProxied'
+import { useThemeState } from './useThemeState'
+
+const EMPTY = {}
+
+export const useTheme = () => {
+  'use no memo'
+
+  const [theme] = useThemeWithState(EMPTY)
+  const res = theme
+  return res as ThemeProxied
+}
+
+export type ThemeWithState = [ThemeParsed, ThemeState]
+
+/**
+ * Adds a proxy around themeState that tracks update keys
+ */
+export const useThemeWithState = (
+  props: UseThemeWithStateProps,
+  isRoot = false
+): ThemeWithState => {
+  'use no memo'
+
+  const keys = useRef<Set<string> | null>(null)
+  const schemeKeys = useRef<Set<string> | null>(null)
+  const themeState = useThemeState(props, isRoot, keys, schemeKeys)
+
+  if (process.env.NODE_ENV === 'development') {
+    if (!props.passThrough && !themeState?.theme) {
+      if (process.env.HANZO_GUI_DISABLE_NO_THEME_WARNING !== '1') {
+        console.error(
+          `[hanzo-gui] No theme found, this could be due to an invalid theme name (given theme props ${JSON.stringify(
+            props
+          )}).\n\nIf this is intended and you are using Hanzo GUI without any themes, you can disable this warning by setting the environment variable HANZO_GUI_DISABLE_NO_THEME_WARNING=1`
+        )
+      }
+    }
+  }
+
+  const themeProxied = props.passThrough
+    ? {}
+    : getThemeProxied(props, themeState, keys, schemeKeys)
+
+  return [themeProxied, themeState]
+}

package/src/hooks/useThemeName.tsx

@@ -0,0 +1,10 @@
+import type { ThemeName } from '../types'
+import { useThemeState } from './useThemeState'
+
+// can probably simplify this way down
+const forceUpdateState = { forceClassName: true, deopt: true, needsUpdate: () => true }
+const forceKeys = { current: new Set(['']) }
+
+export function useThemeName(): ThemeName {
+  return useThemeState(forceUpdateState, false, forceKeys)?.name || ''
+}