@tamagui/core 1.0.1-beta.168 → 1.0.1-beta.170

package/dist/esm/hooks/useIsSSR.js

@@ -3,8 +3,8 @@ import { isServer, isWeb, useIsomorphicLayoutEffect } from "../constants/platfor
 import { startTransition } from "../helpers/startTransition";
 const useIsSSR = (props) => {
   const [val, setVal] = useState(true);
-  useIsomorphicLayoutEffect(() => {
-    if (isWeb && !isServer) {
+  if (isWeb && !isServer) {
+    useIsomorphicLayoutEffect(() => {
       if (props == null ? void 0 : props.immediate) {
         setVal(false);
       } else {
@@ -12,8 +12,8 @@ const useIsSSR = (props) => {
           setVal(false);
         });
       }
-    }
-  }, []);
+    }, []);
+  }
   return val;
 };
 export {

package/dist/esm/hooks/useIsSSR.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useIsSSR.tsx"],
-  "sourcesContent": ["import { useState } from 'react'\n\nimport { isServer, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { startTransition } from '../helpers/startTransition'\n\n// because any change before first useEffect causes hydration / mismatch issues\n\nexport const useIsSSR = (props?: { immediate?: boolean }) => {\n  const [val, setVal] = useState(true)\n\n  useIsomorphicLayoutEffect(() => {\n    if (isWeb && !isServer) {\n      // could also have a global tamagui `config.immediateSSRTransition`\n      if (props?.immediate) {\n        setVal(false)\n      } else {\n        startTransition(() => {\n          setVal(false)\n        })\n      }\n    }\n  }, [])\n\n  return val\n}\n"],
-  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,UAAU,OAAO,iCAAiC;AAC3D,SAAS,uBAAuB;AAIzB,MAAM,WAAW,CAAC,UAAoC;AAC3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,IAAI;AAEnC,4BAA0B,MAAM;AAC9B,QAAI,SAAS,CAAC,UAAU;AAEtB,UAAI,+BAAO,WAAW;AACpB,eAAO,KAAK;AAAA,MACd,OAAO;AACL,wBAAgB,MAAM;AACpB,iBAAO,KAAK;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,SAAO;AACT;",
+  "sourcesContent": ["import { useState } from 'react'\n\nimport { isServer, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { startTransition } from '../helpers/startTransition'\n\n// because any change before first useEffect causes hydration / mismatch issues\n\nexport const useIsSSR = (props?: { immediate?: boolean }) => {\n  const [val, setVal] = useState(true)\n\n  if (isWeb && !isServer) {\n    useIsomorphicLayoutEffect(() => {\n      // could also have a global tamagui `config.immediateSSRTransition`\n      if (props?.immediate) {\n        setVal(false)\n      } else {\n        startTransition(() => {\n          setVal(false)\n        })\n      }\n    }, [])\n  }\n\n  return val\n}\n"],
+  "mappings": "AAAA,SAAS,gBAAgB;AAEzB,SAAS,UAAU,OAAO,iCAAiC;AAC3D,SAAS,uBAAuB;AAIzB,MAAM,WAAW,CAAC,UAAoC;AAC3D,QAAM,CAAC,KAAK,MAAM,IAAI,SAAS,IAAI;AAEnC,MAAI,SAAS,CAAC,UAAU;AACtB,8BAA0B,MAAM;AAE9B,UAAI,+BAAO,WAAW;AACpB,eAAO,KAAK;AAAA,MACd,OAAO;AACL,wBAAgB,MAAM;AACpB,iBAAO,KAAK;AAAA,QACd,CAAC;AAAA,MACH;AAAA,IACF,GAAG,CAAC,CAAC;AAAA,EACP;AAEA,SAAO;AACT;",
   "names": []
 }

package/dist/esm/hooks/useMedia.js

@@ -45,6 +45,7 @@ const configureMedia = (config) => {
     setupMediaListeners();
   }
 };
+const getInitialMediaState = () => initialMediaState;
 function unlisten() {
   dispose.forEach((cb) => cb());
   dispose.clear();
@@ -65,7 +66,7 @@ function setupMediaListeners() {
       mediaState[key] = next;
       const listeners = mediaQueryListeners[key];
       if (listeners == null ? void 0 : listeners.size) {
-        listeners.forEach((cb) => cb());
+        listeners.forEach((cb) => cb(next));
       }
     };
     var update = update2;
@@ -151,6 +152,7 @@ function mediaObjectToString(query) {
 export {
   addMediaQueryListener,
   configureMedia,
+  getInitialMediaState,
   getMedia,
   mediaObjectToString,
   mediaQueryConfig,

package/dist/esm/hooks/useMedia.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useMedia.tsx"],
-  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n  TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n  // development time safeguard\n  process.env.NODE_ENV === 'development'\n    ? new Proxy(\n        {},\n        {\n          get(target, key) {\n            if (typeof key === 'string' && key[0] === '$') {\n              throw new Error(`Access of mediaState should never include $`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\nconst mediaQueryListeners: { [key: string]: Set<Function> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: any) {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    // eslint-disable-next-line no-console\n    console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n  }\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n  return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: any) {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\nconst dispose = new Set<Function>()\n\n// for SSR capture it at time of startup\nlet initialMediaState: MediaQueryState | null\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n  const { media, mediaQueryDefaultActive } = config\n  if (!media) return\n  for (const key in media) {\n    mediaState[key] = mediaQueryDefaultActive?.[key] || false\n  }\n  Object.assign(mediaQueryConfig, media)\n  initialMediaState = { ...mediaState }\n  if (config.disableSSR) {\n    setupMediaListeners()\n  }\n}\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n  // avoid setting up more than once per config\n  const nextKey = JSON.stringify(mediaQueryConfig)\n  if (nextKey === configuredKey) {\n    return\n  }\n  configuredKey = nextKey\n\n  // hmr, undo existing before re-binding\n  unlisten()\n\n  for (const key in mediaQueryConfig) {\n    const str = mediaObjectToString(mediaQueryConfig[key])\n    const getMatch = () => matchMedia(str)\n    const match = getMatch()\n    if (!match) {\n      throw new Error('\u26A0\uFE0F No match')\n    }\n    // react native needs these deprecated apis for now\n    match.addListener(update)\n    dispose.add(() => match.removeListener(update))\n\n    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      const listeners = mediaQueryListeners[key]\n      if (listeners?.size) {\n        listeners.forEach((cb) => cb())\n      }\n    }\n  }\n}\n\nexport function useMediaQueryListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) {\n    return\n  }\n\n  useEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const [state, setState] = useState(initialMediaState || {})\n  const keys = useSafeRef({} as Record<string, boolean>)\n\n  function updateState() {\n    setState((prev) => {\n      for (const key in keys.current) {\n        if (prev[key] !== mediaState[key]) {\n          return { ...mediaState }\n        }\n      }\n      return prev\n    })\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    const disposes: Function[] = Object.keys(keys.current).map((key) =>\n      addMediaQueryListener(key, updateState)\n    )\n    updateState()\n    return () => {\n      disposes.forEach((cb) => cb())\n    }\n  })\n\n  return useMemo(\n    () =>\n      new Proxy(state, {\n        get(_, key: string) {\n          if (process.env.NODE_ENV === 'development') {\n            if (!initialMediaState) {\n              throw new Error(\n                `To use useMedia() you must pass in media configuration to createTamagui, none was found.`\n              )\n            }\n          }\n          if (!keys.current[key]) {\n            keys.current[key] = true\n          }\n          return Reflect.get(state, key)\n        },\n      }),\n    [state, keys]\n  )\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useEffect, useMemo, useState } from 'react'\n\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { matchMedia } from '../helpers/matchMedia'\nimport {\n  MediaQueries,\n  MediaQueryKey,\n  MediaQueryObject,\n  MediaQueryState,\n  TamaguiInternalConfig,\n} from '../types'\nimport { useSafeRef } from './useSafeRef'\n\nexport const mediaState: MediaQueryState =\n  // development time safeguard\n  process.env.NODE_ENV === 'development'\n    ? new Proxy(\n        {},\n        {\n          get(target, key) {\n            if (typeof key === 'string' && key[0] === '$') {\n              throw new Error(`Access of mediaState should never include $`)\n            }\n            return Reflect.get(target, key)\n          },\n        }\n      )\n    : ({} as any)\n\ntype MediaListener = (next: boolean) => void\n\nconst mediaQueryListeners: { [key: string]: Set<MediaListener> } = {}\n\nexport function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  if (process.env.NODE_ENV === 'development' && key[0] === '$') {\n    // eslint-disable-next-line no-console\n    console.warn(`Warning, listening to media queries shouldn't use the \"$\" prefix`)\n  }\n  mediaQueryListeners[key] = mediaQueryListeners[key] || new Set()\n  mediaQueryListeners[key].add(cb)\n  return () => removeMediaQueryListener(key, cb)\n}\n\nexport function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {\n  mediaQueryListeners[key]?.delete(cb)\n}\n\nexport const mediaQueryConfig: MediaQueries = {}\n\nexport const getMedia = () => {\n  return mediaState\n}\n\nconst dispose = new Set<Function>()\n\n// for SSR capture it at time of startup\nlet initialMediaState: MediaQueryState | null\n\nexport const configureMedia = (config: TamaguiInternalConfig) => {\n  const { media, mediaQueryDefaultActive } = config\n  if (!media) return\n  for (const key in media) {\n    mediaState[key] = mediaQueryDefaultActive?.[key] || false\n  }\n  Object.assign(mediaQueryConfig, media)\n  initialMediaState = { ...mediaState }\n  if (config.disableSSR) {\n    setupMediaListeners()\n  }\n}\n\nexport const getInitialMediaState = () => initialMediaState\n\nfunction unlisten() {\n  dispose.forEach((cb) => cb())\n  dispose.clear()\n}\n\n/**\n * Note: This should *not* set the state on the first render!\n * Because to avoid hydration issues SSR must match the server\n * *and then* re-render with the actual media query state.\n */\nlet configuredKey = ''\nfunction setupMediaListeners() {\n  // avoid setting up more than once per config\n  const nextKey = JSON.stringify(mediaQueryConfig)\n  if (nextKey === configuredKey) {\n    return\n  }\n  configuredKey = nextKey\n\n  // hmr, undo existing before re-binding\n  unlisten()\n\n  for (const key in mediaQueryConfig) {\n    const str = mediaObjectToString(mediaQueryConfig[key])\n    const getMatch = () => matchMedia(str)\n    const match = getMatch()\n    if (!match) {\n      throw new Error('\u26A0\uFE0F No match')\n    }\n    // react native needs these deprecated apis for now\n    match.addListener(update)\n    dispose.add(() => match.removeListener(update))\n\n    update()\n\n    function update() {\n      const next = !!getMatch().matches\n      if (next === mediaState[key]) return\n      mediaState[key] = next\n      const listeners = mediaQueryListeners[key]\n      if (listeners?.size) {\n        listeners.forEach((cb) => cb(next))\n      }\n    }\n  }\n}\n\nexport function useMediaQueryListeners(config: TamaguiInternalConfig) {\n  if (config.disableSSR) {\n    return\n  }\n\n  useEffect(() => {\n    setupMediaListeners()\n    return unlisten\n  }, [])\n}\n\nexport function useMedia(): {\n  [key in MediaQueryKey]: boolean\n} {\n  const [state, setState] = useState(initialMediaState || {})\n  const keys = useSafeRef({} as Record<string, boolean>)\n\n  function updateState() {\n    setState((prev) => {\n      for (const key in keys.current) {\n        if (prev[key] !== mediaState[key]) {\n          return { ...mediaState }\n        }\n      }\n      return prev\n    })\n  }\n\n  useIsomorphicLayoutEffect(() => {\n    const disposes: Function[] = Object.keys(keys.current).map((key) =>\n      addMediaQueryListener(key, updateState)\n    )\n    updateState()\n    return () => {\n      disposes.forEach((cb) => cb())\n    }\n  })\n\n  return useMemo(\n    () =>\n      new Proxy(state, {\n        get(_, key: string) {\n          if (process.env.NODE_ENV === 'development') {\n            if (!initialMediaState) {\n              throw new Error(\n                `To use useMedia() you must pass in media configuration to createTamagui, none was found.`\n              )\n            }\n          }\n          if (!keys.current[key]) {\n            keys.current[key] = true\n          }\n          return Reflect.get(state, key)\n        },\n      }),\n    [state, keys]\n  )\n}\n\nfunction camelToHyphen(str: string) {\n  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`).toLowerCase()\n}\n\nexport function mediaObjectToString(query: string | MediaQueryObject) {\n  if (typeof query === 'string') {\n    return query\n  }\n  return Object.entries(query)\n    .map(([feature, value]) => {\n      feature = camelToHyphen(feature)\n      if (typeof value === 'string') {\n        return `(${feature}: ${value})`\n      }\n      if (typeof value === 'number' && /[height|width]$/.test(feature)) {\n        value = `${value}px`\n      }\n      return `(${feature}: ${value})`\n    })\n    .join(' and ')\n}\n"],
+  "mappings": "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",
   "names": ["update"]
 }

package/dist/esm/hooks/useTheme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/hooks/useTheme.tsx"],
-  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isRSC, isServer, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeParsed => {\n  // TODO this can use useChangeThemeEffect almost ready\n  if (isRSC) {\n    const config = getConfig()\n    // @ts-ignore\n    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate,\n    state.current.uuid\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        // eslint-disable-next-line no-console\n        console.log('  ', key, logs[key])\n      }\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    }\n  }\n\n  // track usage\n  state.current.isRendering = true\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[getConfig().defaultTheme || 'light']\n  }\n\n  return useMemo(() => {\n    return getThemeProxied(theme, name, className, themeManager, state, debugProp)\n  }, [theme, name, className, themeManager, state, debugProp])\n}\n\nfunction getThemeProxied(\n  theme: any,\n  name: string,\n  className?: string,\n  themeManager?: ThemeManager | null,\n  state?: React.MutableRefObject<UseThemeState>,\n  debugProp?: boolean | 'verbose'\n) {\n  return new Proxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string' && key[0] === '$') {\n        key = key.slice(1)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (key === GetThemeManager) {\n        return themeManager\n      }\n      if (key === 'name') {\n        return name\n      }\n      if (key === 'className') {\n        return className\n      }\n      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') {\n        key = key.slice(1)\n      }\n      if (!themeManager) {\n        return theme[key]\n      }\n      if (state) {\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n            // eslint-disable-next-line no-console\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n      }\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  if (isRSC) {\n    const config = getConfig()\n    return config.defaultTheme || 'light'\n  }\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any,\n  uuid?: Object\n): {\n  themes: Record<string, ThemeParsed>\n  themeManager: ThemeManager | null\n  name: string\n  theme: ThemeParsed | null\n  className?: string\n} => {\n  const { themes } = getConfig()\n\n  if (isRSC) {\n    // we need context working for this to work well\n    const parentManager = new ThemeManager('light', 'light', themes.light)\n    const next = parentManager.getNextTheme({\n      name,\n      componentName,\n      themes,\n      reset: props?.reset,\n    })\n    return {\n      ...next,\n      themes,\n      themeManager: null,\n    }\n  }\n\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = {\n    name,\n    componentName,\n    themes,\n    reset,\n  }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useConstant(() => {\n    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n  })\n\n  if (!isServer) {\n    useLayoutEffect(() => {\n      themeManager.update(next)\n\n      activeThemeManagers.add(themeManager)\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          if (uuid && !themeManager.isTracking(uuid)) {\n            // no need to re-render if not tracking any keys\n            return\n          }\n          if (process.env.NODE_ENV === 'development' && debug) {\n            // eslint-disable-next-line no-console\n            console.log('Changed theme', componentName, next, { props })\n          }\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [themes, next?.name, next?.className, componentName, debug])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    className: next.className === parentManager.className ? undefined : next.className,\n    themes,\n    themeManager,\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../config'\nimport { isDevTools } from '../constants/isDevTools'\nimport { isRSC, isServer, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { ThemeContext } from '../contexts/ThemeContext'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport {\n  GetNextThemeProps,\n  ThemeManager,\n  ThemeManagerContext,\n  emptyManager,\n} from '../helpers/ThemeManager'\nimport { ThemeName, ThemeParsed } from '../types'\nimport { GetThemeUnwrapped } from './getThemeUnwrapped'\nimport { useConstant } from './useConstant'\nimport { useServerRef } from './useServerHooks'\n\nexport interface ThemeProps {\n  className?: string\n  disableThemeClass?: boolean\n  name: Exclude<ThemeName, number> | null\n  componentName?: string\n  children?: any\n  reset?: boolean\n  debug?: boolean | 'verbose'\n}\n\ninterface UseThemeState {\n  uuid: Object\n  keys: Set<string>\n  isRendering: boolean\n}\n\nexport const useTheme = (\n  themeName?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdate?: any\n): ThemeParsed => {\n  // TODO this can use useChangeThemeEffect almost ready\n  if (isRSC) {\n    const config = getConfig()\n    // @ts-ignore\n    return getThemeProxied(config.themes[config.defaultTheme], config.defaultTheme)\n  }\n\n  const state = useServerRef() as React.MutableRefObject<UseThemeState>\n  if (!state.current) {\n    state.current = {\n      uuid: {},\n      keys: new Set(),\n      isRendering: true,\n    }\n  }\n\n  const { name, theme, themes, themeManager, className } = useChangeThemeEffect(\n    themeName,\n    componentName,\n    props,\n    forceUpdate,\n    state.current.uuid\n  )\n\n  if (process.env.NODE_ENV === 'development') {\n    if (props?.debug === 'verbose') {\n      // eslint-disable-next-line no-console\n      console.groupCollapsed('  \uD83D\uDD39 useTheme =>', name)\n      const logs = { themeName, componentName, name, className, ...(isDevTools && { theme }) }\n      for (const key in logs) {\n        // eslint-disable-next-line no-console\n        console.log('  ', key, logs[key])\n      }\n      // eslint-disable-next-line no-console\n      console.groupEnd()\n    }\n  }\n\n  // track usage\n  state.current.isRendering = true\n  useIsomorphicLayoutEffect(() => {\n    const st = state.current\n    st.isRendering = false\n    const cur = themeManager?.keys.get(st.uuid)\n    if (!cur || !areEqualSets(st.keys, cur)) {\n      themeManager?.track(st.uuid, st.keys)\n    }\n  })\n\n  const debugProp = props && props['debug']\n\n  if (!theme) {\n    if (process.env.NODE_ENV === 'development') {\n      // eslint-disable-next-line no-console\n      console.warn('No theme with name', themeName)\n    }\n    return themes[getConfig().defaultTheme || 'light']\n  }\n\n  return useMemo(() => {\n    return getThemeProxied(theme, name, className, themeManager, state, debugProp)\n  }, [theme, name, className, themeManager, state, debugProp])\n}\n\nfunction getThemeProxied(\n  theme: any,\n  name: string,\n  className?: string,\n  themeManager?: ThemeManager | null,\n  state?: React.MutableRefObject<UseThemeState>,\n  debugProp?: boolean | 'verbose'\n) {\n  return new Proxy(theme, {\n    has(_, key) {\n      if (typeof key === 'string' && key[0] === '$') {\n        key = key.slice(1)\n      }\n      return Reflect.has(theme, key)\n    },\n    get(_, key) {\n      if (key === GetThemeUnwrapped) {\n        return theme\n      }\n      if (key === GetThemeManager) {\n        return themeManager\n      }\n      if (key === 'name') {\n        return name\n      }\n      if (key === 'className') {\n        return className\n      }\n      if (!name || key === '__proto__' || typeof key === 'symbol' || key === '$typeof') {\n        return Reflect.get(_, key)\n      }\n      // auto convert variables to plain\n      if (key[0] === '$') {\n        key = key.slice(1)\n      }\n      if (!themeManager) {\n        return theme[key]\n      }\n      if (state) {\n        if (state.current.isRendering && !state.current.keys.has(key)) {\n          state.current.keys.add(key)\n          if (process.env.NODE_ENV === 'development' && debugProp === 'verbose') {\n            // eslint-disable-next-line no-console\n            console.log('  \uD83D\uDD38 tracking theme', key)\n          }\n        }\n      }\n      return themeManager.getValue(key)\n    },\n  })\n}\n\nconst GetThemeManager = Symbol()\n\nexport const getThemeManager = (theme: any): ThemeManager | undefined => {\n  if (!theme) return\n  return theme[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\n  if (isRSC) {\n    const config = getConfig()\n    return config.defaultTheme || 'light'\n  }\n  const parent = useContext(ThemeManagerContext)\n  const [name, setName] = useState(parent?.name || '')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!parent) return\n    return parent.onChangeTheme((next, manager) => {\n      const name = opts?.parent ? manager.parentName || next : next\n      if (!name) return\n      setName(name)\n    })\n  }, [parent])\n\n  return name\n}\n\nexport const useDefaultThemeName = () => {\n  return useContext(ThemeContext)?.defaultTheme\n}\n\nexport const activeThemeManagers = new Set<ThemeManager>()\n\nexport const useChangeThemeEffect = (\n  name?: string | null,\n  componentName?: string,\n  props?: ThemeProps,\n  forceUpdateProp?: any,\n  uuid?: Object\n): {\n  themes: Record<string, ThemeParsed>\n  themeManager: ThemeManager | null\n  name: string\n  theme: ThemeParsed | null\n  className?: string\n} => {\n  const { themes } = getConfig()\n\n  if (isRSC) {\n    // we need context working for this to work well\n    const parentManager = new ThemeManager('light', 'light', themes.light)\n    const next = parentManager.getNextTheme({\n      name,\n      componentName,\n      themes,\n      reset: props?.reset,\n    })\n    return {\n      ...next,\n      themes,\n      themeManager: null,\n    }\n  }\n\n  const debug = props && props['debug']\n  const parentManager = useContext(ThemeManagerContext) || emptyManager\n  const reset = props?.reset || false\n  const getThemeProps: GetNextThemeProps = {\n    name,\n    componentName,\n    themes,\n    reset,\n  }\n  const next = parentManager.getNextTheme(getThemeProps, debug)\n  // eslint-disable-next-line react-hooks/rules-of-hooks\n  const forceUpdate = forceUpdateProp || useForceUpdate()\n\n  const themeManager = useConstant(() => {\n    return new ThemeManager(next.name, next.className, next.theme, parentManager, reset)\n  })\n\n  if (!isServer) {\n    useLayoutEffect(() => {\n      themeManager.update(next)\n      activeThemeManagers.add(themeManager)\n\n      const disposeParentOnChange = parentManager.onChangeTheme(() => {\n        const next = parentManager.getNextTheme(getThemeProps, debug)\n        if (!next) return\n        if (themeManager.update(next)) {\n          if (uuid && !themeManager.isTracking(uuid)) {\n            // no need to re-render if not tracking any keys\n            return\n          }\n          if (process.env.NODE_ENV === 'development' && debug) {\n            // eslint-disable-next-line no-console\n            console.log('Changed theme', componentName, next, { props })\n          }\n          forceUpdate()\n        }\n      })\n\n      return () => {\n        activeThemeManagers.delete(themeManager)\n        disposeParentOnChange()\n      }\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [themes, next?.name, next?.className, componentName, debug])\n  }\n\n  return {\n    ...(parentManager && {\n      name: parentManager.name,\n      theme: parentManager.theme,\n    }),\n    ...next,\n    className: next.className === parentManager.className ? undefined : next.className,\n    themes,\n    themeManager,\n  }\n}\n"],
+  "mappings": "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",
   "names": ["name", "parentManager", "next"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-beta.168",
+  "version": "1.0.1-beta.170",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,14 +28,14 @@
   ],
   "dependencies": {
     "@expo/match-media": "^0.3.0",
-    "@tamagui/compose-refs": "^1.0.1-beta.168",
-    "@tamagui/helpers": "^1.0.1-beta.168",
-    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.168",
-    "@tamagui/rnw": "^1.0.1-beta.168",
-    "@tamagui/rnw-lite": "^1.0.1-beta.168",
-    "@tamagui/use-debounce": "^1.0.1-beta.168",
-    "@tamagui/use-event": "^1.0.1-beta.168",
-    "@tamagui/use-force-update": "^1.0.1-beta.168",
+    "@tamagui/compose-refs": "^1.0.1-beta.170",
+    "@tamagui/helpers": "^1.0.1-beta.170",
+    "@tamagui/normalize-css-color-lite": "^1.0.1-beta.170",
+    "@tamagui/rnw": "^1.0.1-beta.170",
+    "@tamagui/rnw-lite": "^1.0.1-beta.170",
+    "@tamagui/use-debounce": "^1.0.1-beta.170",
+    "@tamagui/use-event": "^1.0.1-beta.170",
+    "@tamagui/use-force-update": "^1.0.1-beta.170",
     "expo-screen-orientation": "^4.3.0",
     "hyphenate-style-name": "^1.0.4"
   },
@@ -44,7 +44,7 @@
     "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-beta.168",
+    "@tamagui/build": "^1.0.1-beta.170",
     "@types/react": "^18.0.15",
     "csstype": "^3.0.10",
     "esbuild": "^0.15.6",

package/src/createComponent.tsx

@@ -43,7 +43,11 @@ import { getAllSelectors } from './helpers/insertStyleRule'
 import { mergeProps } from './helpers/mergeProps'
 import { proxyThemeVariables } from './helpers/proxyThemeVariables'
 import { useShallowSetState } from './helpers/useShallowSetState'
-import { addMediaQueryListener, mediaState, removeMediaQueryListener } from './hooks/useMedia'
+import {
+  addMediaQueryListener,
+  getInitialMediaState,
+  removeMediaQueryListener,
+} from './hooks/useMedia'
 import { usePressable } from './hooks/usePressable'
 import { useServerRef, useServerState } from './hooks/useServerHooks'
 import { getThemeManager, useTheme } from './hooks/useTheme'
@@ -68,16 +72,7 @@ import { wrapThemeManagerContext } from './views/Theme'
 
 React['keep']
 
-const defaultComponentState: TamaguiComponentState = Object.freeze({
-  hover: false,
-  press: false,
-  pressIn: false,
-  focus: false,
-  // only used by enterStyle
-  mounted: false,
-  animation: null,
-})
-
+let defaultComponentState: TamaguiComponentState | null = null
 export const mouseUps = new Set<Function>()
 if (typeof document !== 'undefined') {
   const cancelTouches = () => {
@@ -148,7 +143,7 @@ export function createComponent<
     config = config || getConfig()
     const theme = useTheme(props.theme, componentName, props, forceUpdate)
 
-    const states = useServerState<TamaguiComponentState>(defaultComponentState)
+    const states = useServerState<TamaguiComponentState>(defaultComponentState!)
     const state = propsIn.forceStyle ? { ...states[0], [propsIn.forceStyle]: true } : states[0]
 
     const shouldAvoidClasses = !!(props.animation && avoidClasses) || !staticConfig.acceptsClassName
@@ -186,6 +181,11 @@ export function createComponent<
     const setStateShallow = useShallowSetState(setState)
 
     if (process.env.NODE_ENV === 'development') {
+      if (!process.env.TAMAGUI_TARGET) {
+        // eslint-disable-next-line no-console
+        console.error(`No process.env.TAMAGUI_TARGET set, please set it to "native" or "web".`)
+      }
+
       if (debugProp) {
         const name = `${
           componentName || Component?.displayName || Component?.name || '[Unnamed Component]'
@@ -215,27 +215,48 @@ export function createComponent<
       }
     }
 
-    const { viewProps: viewPropsIn, pseudos, medias, style, classNames, mediaKeys } = splitStyles
+    const {
+      viewProps: viewPropsIn,
+      pseudos,
+      medias,
+      style: splitStylesStyle,
+      classNames,
+      mediaKeys,
+    } = splitStyles
 
     // media queries
     useIsomorphicLayoutEffect(() => {
-      // if (!mediaKeys.length) {
-      //   return
-      // }
-      for (const key of mediaKeys) {
-        addMediaQueryListener(key, forceUpdate)
+      if (!mediaKeys.length) {
+        return
       }
-      return () => {
-        for (const key of mediaKeys) {
-          removeMediaQueryListener(key, forceUpdate)
-        }
+      const disposers: any[] = []
+      for (const key of mediaKeys) {
+        disposers.push(
+          addMediaQueryListener(key, (next: boolean) => {
+            setState((prev) => {
+              if (prev.mediaState![key] !== next) {
+                return {
+                  ...prev,
+                  mediaState: {
+                    ...prev.mediaState,
+                    [key]: next,
+                  },
+                }
+              }
+              return prev
+            })
+          })
+        )
       }
+      return () => {}
     }, [mediaKeys.join(',')])
 
     // animations
     const useAnimations = tamaguiConfig?.animations?.useAnimations as UseAnimationHook | undefined
     const isAnimated = !!(useAnimations && props.animation)
-    const animationFeatureStylesIn = props.animation ? { ...defaultNativeStyle, ...style } : null
+    const animationFeatureStylesIn = props.animation
+      ? { ...defaultNativeStyle, ...splitStylesStyle }
+      : null
     const propsWithAnimation = props as UseAnimationProps
 
     // lets make changing the key mandatory for adding/removing animations
@@ -652,11 +673,11 @@ export function createComponent<
     if (isStringElement && shouldAvoidClasses && !shouldForcePseudo) {
       styles = {
         ...defaultNativeStyle,
-        ...(animationStyles ?? style),
+        ...(animationStyles ?? splitStylesStyle),
         ...medias,
       }
     } else {
-      styles = [isWeb ? null : defaultNativeStyle, animationStyles ?? style, medias]
+      styles = [isWeb ? null : defaultNativeStyle, animationStyles ?? splitStylesStyle, medias]
       if (!animationStyles && initialSplitStyles) {
         const initPseudos = initialSplitStyles.pseudos
         !state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, 'enterStyle')
@@ -879,9 +900,9 @@ export function createComponent<
     let space = spaceProp
 
     // find space by media query
-    if (mediaKeys.length) {
-      for (const key in mediaState) {
-        if (!mediaState[key]) continue
+    if (state.mediaState && mediaKeys.length) {
+      for (const key in state.mediaState) {
+        if (!state.mediaState[key]) continue
         if (props[key] && props[key].space !== undefined) {
           space = props[key].space
         }
@@ -1035,7 +1056,7 @@ export function createComponent<
         if (typeof window !== 'undefined') {
           // prettier-ignore
           // eslint-disable-next-line no-console
-          console.log({ state, shouldProvideThemeManager, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style, defaultNativeStyle, initialSplitStyles, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
+          console.log({ state, shouldProvideThemeManager, tamaguiDefaultProps, viewProps, splitStyles, animationStyles, handlesPressEvents, isStringElement, classNamesIn: props.className?.split(' '), classNamesOut: viewProps.className?.split(' '), events, shouldAttach, styles, pseudos, content, childEls, shouldAvoidClasses, avoidClasses, animation: props.animation, style: splitStylesStyle, defaultNativeStyle, initialSplitStyles, ...(typeof window !== 'undefined' ? { theme, themeClassName:  theme.className, staticConfig, tamaguiConfig, events, shouldAvoidClasses, shouldForcePseudo, classNames: Object.fromEntries(Object.entries(classNames).map(([k, v]) => [v, getAllSelectors()[v]])) } : null) })
         }
         // eslint-disable-next-line no-console
         console.groupEnd()
@@ -1052,6 +1073,19 @@ export function createComponent<
   // Once configuration is run and all components are registered
   // get default props + className and analyze styles
   onConfiguredOnce((conf) => {
+    if (!defaultComponentState) {
+      defaultComponentState = Object.freeze({
+        hover: false,
+        press: false,
+        pressIn: false,
+        focus: false,
+        // only used by enterStyle
+        mounted: false,
+        animation: null,
+        mediaState: getInitialMediaState(),
+      })
+    }
+
     // in static mode we just use these to lookup configuration
     // ... we likely want this? need to test
     if (process.env.IS_STATIC === 'is_static') return

package/src/helpers/getSplitStyles.tsx

@@ -5,7 +5,7 @@ import type { ViewStyle } from 'react-native'
 import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
 import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
-import { mediaQueryConfig, mediaState } from '../hooks/useMedia'
+import { mediaState as globalMediaState, mediaQueryConfig } from '../hooks/useMedia'
 import type {
   DebugProp,
   MediaQueryKey,
@@ -115,6 +115,7 @@ export const getSplitStyles: StyleSplitter = (
   const viewProps: StackProps = {}
   const pseudos: PseudoStyles = {}
   const medias: Record<MediaQueryKey, ViewStyle> = {}
+  const mediaState = state.mediaState || globalMediaState
   const usedKeys = new Set<string>()
   const propKeys = Object.keys(props)
   const shouldDoClasses =

package/src/helpers/getVariantExtras.tsx

@@ -1,5 +1,5 @@
 import { getConfig } from '../config'
-import { GenericFonts, StaticConfig } from '../types'
+import { GenericFonts } from '../types'
 import { LanguageContextType } from '../views/FontLanguage.types'
 
 const extrasCache = new WeakMap()
@@ -17,9 +17,10 @@ export function getVariantExtras(
     return extrasCache.get(props)
   }
 
-  const fonts = languageContext
-    ? getFontsForLanguage(conf.fontsParsed, languageContext)
-    : conf.fontsParsed
+  let fonts = conf.fontsParsed
+  if (languageContext) {
+    fonts = getFontsForLanguage(conf.fontsParsed, languageContext)
+  }
 
   const next = {
     fonts,

package/src/hooks/useIsSSR.tsx

@@ -8,8 +8,8 @@ import { startTransition } from '../helpers/startTransition'
 export const useIsSSR = (props?: { immediate?: boolean }) => {
   const [val, setVal] = useState(true)
 
-  useIsomorphicLayoutEffect(() => {
-    if (isWeb && !isServer) {
+  if (isWeb && !isServer) {
+    useIsomorphicLayoutEffect(() => {
       // could also have a global tamagui `config.immediateSSRTransition`
       if (props?.immediate) {
         setVal(false)
@@ -18,8 +18,8 @@ export const useIsSSR = (props?: { immediate?: boolean }) => {
           setVal(false)
         })
       }
-    }
-  }, [])
+    }, [])
+  }
 
   return val
 }

package/src/hooks/useMedia.tsx

@@ -27,9 +27,11 @@ export const mediaState: MediaQueryState =
       )
     : ({} as any)
 
-const mediaQueryListeners: { [key: string]: Set<Function> } = {}
+type MediaListener = (next: boolean) => void
 
-export function addMediaQueryListener(key: MediaQueryKey, cb: any) {
+const mediaQueryListeners: { [key: string]: Set<MediaListener> } = {}
+
+export function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {
   if (process.env.NODE_ENV === 'development' && key[0] === '$') {
     // eslint-disable-next-line no-console
     console.warn(`Warning, listening to media queries shouldn't use the "$" prefix`)
@@ -39,7 +41,7 @@ export function addMediaQueryListener(key: MediaQueryKey, cb: any) {
   return () => removeMediaQueryListener(key, cb)
 }
 
-export function removeMediaQueryListener(key: MediaQueryKey, cb: any) {
+export function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener) {
   mediaQueryListeners[key]?.delete(cb)
 }
 
@@ -67,6 +69,8 @@ export const configureMedia = (config: TamaguiInternalConfig) => {
   }
 }
 
+export const getInitialMediaState = () => initialMediaState
+
 function unlisten() {
   dispose.forEach((cb) => cb())
   dispose.clear()
@@ -108,7 +112,7 @@ function setupMediaListeners() {
       mediaState[key] = next
       const listeners = mediaQueryListeners[key]
       if (listeners?.size) {
-        listeners.forEach((cb) => cb())
+        listeners.forEach((cb) => cb(next))
       }
     }
   }

package/src/hooks/useTheme.tsx

@@ -239,7 +239,6 @@ export const useChangeThemeEffect = (
   if (!isServer) {
     useLayoutEffect(() => {
       themeManager.update(next)
-
       activeThemeManagers.add(themeManager)
 
       const disposeParentOnChange = parentManager.onChangeTheme(() => {

package/src/types.tsx

@@ -1211,6 +1211,7 @@ export type TamaguiComponentState = {
   pressIn: boolean
   focus: boolean
   mounted: boolean
+  mediaState?: null | Record<string, boolean>
   animation?: null | {
     style?: any
     avoidClasses?: boolean

package/types/hooks/useMedia.d.ts

@@ -1,13 +1,16 @@
 import { MediaQueries, MediaQueryKey, MediaQueryObject, MediaQueryState, TamaguiInternalConfig } from '../types';
 export declare const mediaState: MediaQueryState;
-export declare function addMediaQueryListener(key: MediaQueryKey, cb: any): () => void;
-export declare function removeMediaQueryListener(key: MediaQueryKey, cb: any): void;
+declare type MediaListener = (next: boolean) => void;
+export declare function addMediaQueryListener(key: MediaQueryKey, cb: MediaListener): () => void;
+export declare function removeMediaQueryListener(key: MediaQueryKey, cb: MediaListener): void;
 export declare const mediaQueryConfig: MediaQueries;
 export declare const getMedia: () => MediaQueryState;
 export declare const configureMedia: (config: TamaguiInternalConfig) => void;
+export declare const getInitialMediaState: () => MediaQueryState | null;
 export declare function useMediaQueryListeners(config: TamaguiInternalConfig): void;
 export declare function useMedia(): {
     [key in MediaQueryKey]: boolean;
 };
 export declare function mediaObjectToString(query: string | MediaQueryObject): string;
+export {};
 //# sourceMappingURL=useMedia.d.ts.map

package/types/types.d.ts

@@ -551,6 +551,7 @@ export declare type TamaguiComponentState = {
     pressIn: boolean;
     focus: boolean;
     mounted: boolean;
+    mediaState?: null | Record<string, boolean>;
     animation?: null | {
         style?: any;
         avoidClasses?: boolean;