@hanzogui/web 2.0.0

package/src/helpers/insertStyleRule.tsx

@@ -0,0 +1,365 @@
+import { StyleObjectIdentifier, StyleObjectRules } from '@hanzogui/helpers'
+import { createVariable } from '../createVariable'
+import type {
+  DedupedTheme,
+  DedupedThemes,
+  RulesToInsert,
+  ThemeParsed,
+  TokensParsed,
+} from '../types'
+
+// only cache hanzo-gui styles
+// TODO merge totalSelectorsInserted and allSelectors?
+const scannedCache = new WeakMap<CSSStyleSheet, string>()
+const totalSelectorsInserted = new Map<string, number>()
+const allSelectors: Record<string, string> = {}
+const allRules: Record<string, string> = {}
+
+export const getAllSelectors = () => allSelectors
+export const getAllRules = () => {
+  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+    // Sort by identifier to ensure deterministic CSS output order
+    const sortedKeys = Object.keys(allRules).sort()
+    return sortedKeys.map((key) => allRules[key])
+  }
+  return []
+}
+
+// once react 19 onyl supported we can remove most of this
+// gets existing ones (client side)
+// takes ~0.1ms for a fairly large page
+// used now for three things:
+//   1. debugging at dev time
+//   2. avoid duplicate insert styles at runtime
+//   3. used now for merging transforms atomically
+
+// multiple sheets could have the same ids so we have to count
+
+let lastScannedSheets: Set<CSSStyleSheet> | null = null
+
+export function scanAllSheets(
+  collectThemes = false,
+  tokens?: TokensParsed
+): DedupedThemes | undefined {
+  if (!process.env.HANZO_GUI_DID_OUTPUT_CSS) {
+    if (process.env.NODE_ENV === 'test') return
+    if (process.env.HANZO_GUI_TARGET !== 'web') return
+
+    let themes: DedupedThemes | undefined
+
+    const sheets = document.styleSheets || []
+    const prev = lastScannedSheets
+    const current = new Set(sheets as any as CSSStyleSheet[])
+
+    for (const sheet of current) {
+      if (sheet) {
+        const out = updateSheetStyles(sheet, false, collectThemes, tokens)
+        if (out) {
+          themes = out
+        }
+      }
+    }
+
+    lastScannedSheets = current
+
+    if (prev) {
+      for (const sheet of prev) {
+        if (sheet && !current.has(sheet)) {
+          updateSheetStyles(sheet, true)
+        }
+      }
+    }
+
+    return themes
+  }
+}
+
+function trackInsertedStyle(id: string) {
+  const next = (totalSelectorsInserted.get(id) || 0) + 1
+  totalSelectorsInserted.set(id, next)
+  return next
+}
+
+const bailAfterEnv = process.env.HANZO_GUI_BAIL_AFTER_SCANNING_X_CSS_RULES
+const bailAfter = bailAfterEnv ? +bailAfterEnv : 8000
+
+function updateSheetStyles(
+  sheet: CSSStyleSheet,
+  remove = false,
+  collectThemes = false,
+  tokens?: TokensParsed
+): DedupedThemes | undefined {
+  // avoid errors on cross origin sheets
+  // https://stackoverflow.com/questions/49993633/uncaught-domexception-failed-to-read-the-cssrules-property
+  let rules: CSSRuleList
+  try {
+    rules = sheet.cssRules
+    if (!rules) {
+      return
+    }
+  } catch {
+    return
+  }
+
+  const firstSelector = getGuiSelector(rules[0], collectThemes)?.[0]
+  const lastSelector = getGuiSelector(rules[rules.length - 1], collectThemes)?.[0]
+  const cacheKey = `${rules.length}${firstSelector}${lastSelector}`
+  const lastScanned = scannedCache.get(sheet)
+
+  if (!remove) {
+    // avoid re-scanning
+    if (lastScanned === cacheKey) {
+      return
+    }
+  }
+
+  const len = rules.length
+  let fails = 0
+
+  let dedupedThemes: DedupedThemes | undefined
+
+  // because end-users can add their own css like .t_dark { --something: #000 }
+  // and this actually entirely breaks scanning, we need to ensure we can handle multiple
+  // themes, so track that here. also, css processing utils could cause this too
+  const nameToTheme: Record<string, ThemeParsed> = {}
+
+  for (let i = 0; i < len; i++) {
+    const rule = rules[i]
+    if (!(rule instanceof CSSStyleRule)) continue
+
+    const response = getGuiSelector(rule, collectThemes)
+
+    if (response) {
+      // reset to 0 on any success as eg every other theme scan we get empty
+      fails = 0
+    } else {
+      fails++
+      if (fails > bailAfter) {
+        // conservatively bail out of non-gui sheets
+        return
+      }
+      continue
+    }
+
+    const [identifier, cssRule, isTheme] = response
+
+    if (isTheme) {
+      const deduped = addThemesFromCSS(cssRule, tokens)
+      if (deduped) {
+        for (const name of deduped.names) {
+          if (nameToTheme[name]) {
+            Object.apply(nameToTheme[name], deduped.theme as any)
+            deduped.names = deduped.names.filter((x) => x !== name)
+          } else {
+            nameToTheme[name] = deduped.theme
+          }
+        }
+        dedupedThemes ||= []
+        dedupedThemes.push(deduped)
+      }
+      continue
+    }
+  }
+
+  scannedCache.set(sheet, cacheKey)
+
+  return dedupedThemes
+}
+
+let colorVarToVal: Record<string, string>
+let rootComputedStyle: CSSStyleDeclaration | null = null
+
+function addThemesFromCSS(cssStyleRule: CSSStyleRule, tokens?: TokensParsed) {
+  const selectors = cssStyleRule.selectorText.split(',')
+  if (!selectors.length) return
+
+  if (tokens?.color && !colorVarToVal) {
+    colorVarToVal = {}
+    for (const key in tokens.color) {
+      const token = tokens.color[key]
+      if (token) {
+        colorVarToVal[token.name] = token.val
+      }
+    }
+  }
+
+  const rulesWithBraces = (cssStyleRule.cssText || '').slice(
+    cssStyleRule.selectorText.length + 2,
+    -1
+  )
+
+  const rules = rulesWithBraces.split(';')
+
+  // get theme object parsed
+  const values: ThemeParsed = {}
+  // build values first
+  for (const rule of rules) {
+    const sepI = rule.indexOf(':')
+    if (sepI === -1) continue
+    const varIndex = rule.indexOf('--')
+    let key = rule.slice(varIndex === -1 ? 0 : varIndex + 2, sepI)
+    if (process.env.HANZO_GUI_CSS_VARIABLE_PREFIX) {
+      key = key.replace(process.env.HANZO_GUI_CSS_VARIABLE_PREFIX, '')
+    }
+    const val = rule.slice(sepI + 2)
+    let value: string
+    if (val[0] === 'v' && val.startsWith('var(')) {
+      // var()
+      const varName = val.slice(6, -1)
+      const tokenVal = colorVarToVal?.[varName]
+      // either hydrate it from tokens directly or from computed style on body if no token
+      if (tokenVal) {
+        value = tokenVal
+      } else {
+        rootComputedStyle ||= getComputedStyle(document.body)
+        value = rootComputedStyle.getPropertyValue('--' + varName)
+      }
+    } else {
+      value = val
+    }
+    values[key] = createVariable(
+      {
+        key,
+        name: key,
+        val: value,
+      },
+      true
+    ) as any
+  }
+
+  const names = new Set<string>()
+
+  // loop selectors and build deduped
+  for (const selector of selectors) {
+    if (selector === ' .tm_xxt') continue
+    const lastThemeSelectorIndex = selector.lastIndexOf('.t_')
+    const name = selector.slice(lastThemeSelectorIndex).slice(3)
+    const [schemeChar] = selector[lastThemeSelectorIndex - 5]
+    const scheme = schemeChar === 'd' ? 'dark' : schemeChar === 'i' ? 'light' : ''
+    const themeName = scheme && scheme !== name ? `${scheme}_${name}` : name
+    if (!themeName || themeName === 'light_dark' || themeName === 'dark_light') {
+      continue
+    }
+    names.add(themeName)
+  }
+
+  return {
+    names: [...names],
+    theme: values,
+  } satisfies DedupedTheme
+}
+
+const guiSelectorRegex = /\.tm_xxt/
+
+function getGuiSelector(
+  rule: CSSRule | null,
+  collectThemes = false
+): readonly [string, CSSStyleRule] | [string, CSSStyleRule, true] | undefined {
+  if (rule instanceof CSSStyleRule) {
+    const text = rule.selectorText
+
+    // only matches t_ starting selector chains
+    if (text[0] === ':' && text[1] === 'r' && guiSelectorRegex.test(text)) {
+      const id = getIdentifierFromGuiSelector(
+        // next.js minifies it so its in front
+        text.replace(guiSelectorRegex, '')
+      )
+      return collectThemes ? [id, rule, true] : [id, rule]
+    }
+  } else if (rule instanceof CSSMediaRule) {
+    // hanzo-gui only ever inserts 1 rule per media
+    if (rule.cssRules.length > 1) return
+    return getGuiSelector(rule.cssRules[0])
+  }
+}
+
+const getIdentifierFromGuiSelector = (selector: string) => {
+  const dotIndex = selector.indexOf(':')
+  if (dotIndex > -1) {
+    return selector.slice(7, dotIndex)
+  }
+  return selector.slice(7)
+}
+
+let sheet: CSSStyleSheet | null = null
+
+let trackAllRules = true
+export function stopAccumulatingRules() {
+  trackAllRules = false
+}
+
+export function updateRules(identifier: string, rules: string[]) {
+  if (trackAllRules) {
+    allRules[identifier] = rules.join(' ')
+  }
+  return true
+}
+
+let nonce = ''
+export function setNonce(_: string) {
+  nonce = _
+}
+
+export function insertStyleRules(rulesToInsert: RulesToInsert) {
+  if (process.env.HANZO_GUI_TARGET !== 'web') return
+
+  if (!sheet && document.head) {
+    const styleTag = document.createElement('style')
+    styleTag.id = '_gui-styles'
+    if (nonce) {
+      styleTag.nonce = nonce
+    }
+    sheet = document.head.appendChild(styleTag).sheet
+  }
+
+  if (!sheet) return
+
+  for (const key in rulesToInsert) {
+    const styleObject = rulesToInsert[key]
+    const identifier = styleObject[StyleObjectIdentifier]
+
+    if (!shouldInsertStyleRules(identifier)) {
+      continue
+    }
+
+    const rules = styleObject[StyleObjectRules]
+    allSelectors[identifier] = rules.join('\n')
+    trackInsertedStyle(identifier)
+    updateRules(identifier, rules)
+
+    try {
+      for (const rule of rules) {
+        sheet.insertRule(rule, sheet.cssRules.length)
+      }
+    } catch (err) {
+      if (process.env.NODE_ENV === 'production') {
+        console.error(`Error inserting style rule`, rules)
+      }
+      // in dev throw to show error clearly
+    }
+  }
+}
+
+// The way browser or next.js work you end up with CSS being removed *after* the new CSS loads for the upcoming page
+// this causes many bugs. We defaulted to "2" here for safety, meaning we sacrificed some performance
+// setting HANZO_GUI_INSERT_SELECTOR_TRIES=1 will be faster so long as you are concatting your CSS together
+
+const maxToInsert = process.env.HANZO_GUI_INSERT_SELECTOR_TRIES
+  ? +process.env.HANZO_GUI_INSERT_SELECTOR_TRIES
+  : 1
+
+export function shouldInsertStyleRules(identifier: string) {
+  if (process.env.IS_STATIC === 'is_static') {
+    return true
+  }
+  const total = totalSelectorsInserted.get(identifier) || 0
+  if (process.env.NODE_ENV === 'development') {
+    if (total > +(process.env.HANZO_GUI_STYLE_INSERTION_WARNING_LIMIT || 10)) {
+      console.warn(
+        `Warning: inserting many CSS rules, you may be animating something and generating many CSS insertions, which can degrade performance. Instead, try using the "disableClassName" property on elements that change styles often. To disable this warning set HANZO_GUI_STYLE_INSERTION_WARNING_LIMIT from 50000 to something higher`
+      )
+    }
+  }
+  // note we are being conservative allowing duplicates
+  return total < maxToInsert
+}

package/src/helpers/isActivePlatform.ts

@@ -0,0 +1,14 @@
+import { currentPlatform } from '@hanzogui/constants'
+
+export function isActivePlatform(key: string) {
+  if (!key.startsWith('$platform')) {
+    return true
+  }
+  const platform = key.slice(10)
+  return (
+    // web, ios, android
+    platform === currentPlatform ||
+    // web, native
+    platform === process.env.HANZO_GUI_TARGET
+  )
+}

package/src/helpers/isActiveTheme.ts

@@ -0,0 +1,4 @@
+export function isActiveTheme(key: string, activeThemeName: string) {
+  if (!key.startsWith('$theme-')) return
+  return key.slice(7).startsWith(activeThemeName)
+}

package/src/helpers/isGuiComponent.tsx

@@ -0,0 +1,11 @@
+import type { StaticConfig } from '../types'
+
+export function isGuiComponent<A>(
+  comp: A,
+  name?: string
+): comp is A & {
+  staticConfig: StaticConfig
+} {
+  const config = comp?.['staticConfig'] as StaticConfig | undefined
+  return Boolean(config && (name ? name === config.componentName : true))
+}

package/src/helpers/isGuiElement.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+import type { StaticConfig } from '../types'
+import { isGuiComponent } from './isGuiComponent'
+
+export const isGuiElement = (
+  child: any,
+  name?: string
+): child is React.ReactElement<any> & { type: { staticConfig: StaticConfig } } => {
+  return React.isValidElement(child) && isGuiComponent(child.type, name)
+}

package/src/helpers/isObj.ts

@@ -0,0 +1 @@
+export const isObj = (x: any) => x && !Array.isArray(x) && typeof x === 'object'

package/src/helpers/log.ts

@@ -0,0 +1,17 @@
+import { _disableMediaTouch } from '../hooks/useMedia'
+
+export function log(...args: any[]) {
+  if (process.env.NODE_ENV === 'production') return
+  _disableMediaTouch(true)
+  try {
+    if (process.env.HANZO_GUI_TARGET === 'web') {
+      return console.info(...args)
+    }
+    // react native doesn't log in the cli unless it's log
+    return console.log(...args)
+  } catch (err) {
+    console.error(err)
+  } finally {
+    _disableMediaTouch(false)
+  }
+}

package/src/helpers/mainThreadPressEvents.native.ts

@@ -0,0 +1,41 @@
+/**
+ * Fallback press handling using React Native's usePressability
+ * Split into separate file to avoid deep import warnings when RNGH is enabled
+ *
+ * NOTE: This hook must be called unconditionally in the parent to avoid
+ * rules of hooks violations when disabled toggles. The `enabled` param
+ * controls whether the pressability events are actually applied.
+ */
+
+import { composeEventHandlers } from '@hanzogui/helpers'
+
+const dontComposePressabilityKeys: Record<string, boolean> = {
+  onBlur: true,
+  onFocus: true,
+}
+
+// empty config for when disabled - usePressability still needs to be called
+const emptyConfig = {}
+
+let usePressability: any = null
+
+export function useMainThreadPressEvents(events: any, viewProps: any, enabled = true) {
+  usePressability =
+    usePressability ||
+    require('react-native/Libraries/Pressability/usePressability').default
+
+  // always call the hook to maintain consistent hook order
+  const pressability = usePressability(enabled ? events : emptyConfig)
+
+  if (enabled && pressability) {
+    if (viewProps.hitSlop && events) {
+      events.hitSlop = viewProps.hitSlop
+    }
+    for (const key in pressability) {
+      const og = viewProps[key]
+      const val = pressability[key]
+      viewProps[key] =
+        og && !dontComposePressabilityKeys[key] ? composeEventHandlers(og, val) : val
+    }
+  }
+}

package/src/helpers/mainThreadPressEvents.ts

@@ -0,0 +1,6 @@
+// web stub - mainThreadPressEvents is native-only
+export function useMainThreadPressEvents(
+  _events: any,
+  _viewProps: any,
+  _enabled?: boolean
+) {}

package/src/helpers/matchMedia.native.ts

@@ -0,0 +1,34 @@
+import type { MatchMedia, MediaQueryList } from '../types'
+
+let matchMediaImpl: MatchMedia = matchMediaFallback
+
+export const matchMedia: MatchMedia = (...args) => matchMediaImpl(...args)
+
+function matchMediaFallback(query: string): MediaQueryList {
+  if (!process.env.IS_STATIC && process.env.NODE_ENV === 'development') {
+    console.warn('warning: matchMedia implementation is not provided.')
+  }
+  return {
+    match: (a, b) => false,
+    addListener: () => {},
+    removeListener: () => {},
+    matches: false,
+  }
+}
+
+export function setupMatchMedia(_: MatchMedia) {
+  if (process.env.NODE_ENV === 'development') {
+    if (typeof _ !== 'function') {
+      if (!process.env.IS_STATIC) {
+        console.trace(
+          `setupMatchMedia was called without a function, this can cause issues on native`,
+          _
+        )
+      }
+    }
+  }
+
+  matchMediaImpl = _
+  // @ts-ignore
+  globalThis['matchMedia'] = _
+}

package/src/helpers/matchMedia.ts

@@ -0,0 +1,17 @@
+import type { MatchMedia, MediaQueryList } from '../types'
+
+export const matchMedia =
+  (typeof window !== 'undefined' && window.matchMedia) || matchMediaFallback
+
+function matchMediaFallback(_: string): MediaQueryList {
+  return {
+    match: (a, b) => false,
+    addListener() {},
+    removeListener() {},
+    matches: false,
+  }
+}
+
+export function setupMatchMedia(_: MatchMedia) {
+  // no-op web
+}

package/src/helpers/mediaObjectToString.ts

@@ -0,0 +1,30 @@
+import type { MediaQueryObject } from '../types'
+
+function camelToHyphen(str: string) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()
+}
+
+const cache = new WeakMap<any, string>()
+
+export function mediaObjectToString(query: string | MediaQueryObject) {
+  if (typeof query === 'string') {
+    return query
+  }
+  if (cache.has(query)) {
+    return cache.get(query)!
+  }
+  const res = 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 ')
+  cache.set(query, res)
+  return res
+}

package/src/helpers/mediaState.ts

@@ -0,0 +1,32 @@
+import type { MediaQueries, MediaQueryState } from '../types'
+
+export let mediaState: MediaQueryState =
+  // development only safeguard
+  process.env.NODE_ENV === 'development'
+    ? new Proxy(
+        {},
+        {
+          get(target, key) {
+            if (
+              typeof key === 'string' &&
+              key[0] === '$' &&
+              // dont error on $$typeof
+              key[1] !== '$'
+            ) {
+              throw new Error(`Access mediaState should not use "$": ${key}`)
+            }
+            return Reflect.get(target, key)
+          },
+        }
+      )
+    : ({} as any)
+
+export const setMediaState = (next: MediaQueryState) => {
+  mediaState = next
+}
+
+export const mediaQueryConfig: MediaQueries = {}
+
+export const getMedia = () => mediaState
+
+export const mediaKeys = new Set<string>() // with $ prefix