@tamagui/core 1.0.1-rc.9 → 1.0.2

package/dist/esm/views/Theme.js

@@ -1,6 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import { isWeb } from "@tamagui/constants";
-import React, { useMemo } from "react";
+import { Children, cloneElement } from "react";
 import { variableToString } from "../createVariable";
 import { ThemeManagerContext } from "../helpers/ThemeManagerContext";
 import { useChangeThemeEffect } from "../hooks/useTheme";
@@ -9,16 +9,16 @@ function Theme(props) {
     return props.children;
   }
   const isRoot = !!props["_isRoot"];
-  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(
-    props,
-    isRoot
-  );
+  const { name, theme, themeManager, className } = useChangeThemeEffect(props, isRoot);
   const disableThemeClass = props.disableThemeClass;
   const missingTheme = !(name && theme);
-  let contents = useMemo(() => {
-    const next = props["data-themeable"] ? React.cloneElement(props.children, { ["data-themeable"]: true }) : props.children;
-    return missingTheme ? next : wrapThemeManagerContext(next, themeManager);
-  }, [missingTheme, props.children, themeManager]);
+  let contents = useThemeManagerContext(
+    props["data-themeable"] ? Children.map(
+      props.children,
+      (child) => cloneElement(child, { ["data-themeable"]: true })
+    ) : props.children,
+    themeManager
+  );
   if (process.env.NODE_ENV === "development" && missingTheme) {
     name && !theme && console.warn(`No theme found by name ${name}`);
     return props.children;
@@ -38,10 +38,10 @@ function Theme(props) {
   }
   return contents;
 }
-function wrapThemeManagerContext(children, themeManager, shouldReset) {
-  if (!themeManager) {
+function useThemeManagerContext(children, themeManager, shouldReset) {
+  const value = themeManager;
+  if (!value)
     return children;
-  }
   let next = children;
   if (shouldReset && themeManager) {
     next = /* @__PURE__ */ jsx(Theme, {
@@ -50,12 +50,12 @@ function wrapThemeManagerContext(children, themeManager, shouldReset) {
     });
   }
   return /* @__PURE__ */ jsx(ThemeManagerContext.Provider, {
-    value: themeManager,
+    value,
     children: next
   });
 }
 export {
   Theme,
-  wrapThemeManagerContext
+  useThemeManagerContext
 };
 //# sourceMappingURL=Theme.js.map

package/dist/esm/views/Theme.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/Theme.tsx"],
-  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport React, { useMemo } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManager } from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const { name, theme, themeManager, isNewTheme, className } = useChangeThemeEffect(\n    props,\n    isRoot\n  )\n\n  const disableThemeClass = props.disableThemeClass\n  const missingTheme = !(name && theme)\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  let contents = useMemo(() => {\n    const next = props['data-themeable']\n      ? React.cloneElement(props.children, { ['data-themeable']: true })\n      : props.children\n\n    return missingTheme ? next : wrapThemeManagerContext(next, themeManager)\n  }, [missingTheme, props.children, themeManager])\n\n  if (process.env.NODE_ENV === 'development' && missingTheme) {\n    // eslint-disable-next-line no-console\n    name && !theme && console.warn(`No theme found by name ${name}`)\n    return props.children\n  }\n\n  if (disableThemeClass || missingTheme) {\n    return contents\n  }\n\n  if (isWeb) {\n    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')\n    contents = (\n      <span\n        className={cn}\n        style={{\n          // in order to provide currentColor, set color by default\n          color: variableToString(theme?.color),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n}\n\nexport function wrapThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldReset?: boolean\n) {\n  // be sure to memoize themeManager to avoid reparenting\n  if (!themeManager) {\n    return children\n  }\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n  // TODO likely not necessary if we do reset logic now in useTheme?\n  // reset to parent theme\n  if (shouldReset && themeManager) {\n    next = <Theme name={themeManager.state.parentName}>{next}</Theme>\n  }\n  return (\n    <ThemeManagerContext.Provider value={themeManager}>\n      {next}\n    </ThemeManagerContext.Provider>\n  )\n}\n"],
-  "mappings": "AA+CM;AA/CN,SAAS,aAAa;AACtB,OAAO,SAAS,eAAe;AAE/B,SAAS,wBAAwB;AAEjC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAG9B,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM;AACvB,QAAM,EAAE,MAAM,OAAO,cAAc,YAAY,UAAU,IAAI;AAAA,IAC3D;AAAA,IACA;AAAA,EACF;AAEA,QAAM,oBAAoB,MAAM;AAChC,QAAM,eAAe,EAAE,QAAQ;AAI/B,MAAI,WAAW,QAAQ,MAAM;AAC3B,UAAM,OAAO,MAAM,oBACf,MAAM,aAAa,MAAM,UAAU,EAAE,CAAC,mBAAmB,KAAK,CAAC,IAC/D,MAAM;AAEV,WAAO,eAAe,OAAO,wBAAwB,MAAM,YAAY;AAAA,EACzE,GAAG,CAAC,cAAc,MAAM,UAAU,YAAY,CAAC;AAE/C,MAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc;AAE1D,YAAQ,CAAC,SAAS,QAAQ,KAAK,0BAA0B,MAAM;AAC/D,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,qBAAqB,cAAc;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AACT,UAAM,KAAK,CAAC,MAAM,WAAW,WAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjF,eACE,oBAAC;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QAEL,OAAO,iBAAiB,+BAAO,KAAK;AAAA,MACtC;AAAA,MAEC;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEO,SAAS,wBACd,UACA,cACA,aACA;AAEA,MAAI,CAAC,cAAc;AACjB,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AAGX,MAAI,eAAe,cAAc;AAC/B,WAAO,oBAAC;AAAA,MAAM,MAAM,aAAa,MAAM;AAAA,MAAa;AAAA,KAAK;AAAA,EAC3D;AACA,SACE,oBAAC,oBAAoB,UAApB;AAAA,IAA6B,OAAO;AAAA,IAClC;AAAA,GACH;AAEJ;",
+  "sourcesContent": ["import { isWeb } from '@tamagui/constants'\nimport React, { Children, cloneElement, useMemo } from 'react'\n\nimport { variableToString } from '../createVariable'\nimport { ThemeManager } from '../helpers/ThemeManager'\nimport { ThemeManagerContext } from '../helpers/ThemeManagerContext'\nimport { useChangeThemeEffect } from '../hooks/useTheme'\nimport { ThemeProps } from '../types'\n\nexport function Theme(props: ThemeProps) {\n  // @ts-expect-error only for internal views\n  if (props.disable) {\n    return props.children\n  }\n\n  const isRoot = !!props['_isRoot']\n  const { name, theme, themeManager, className } = useChangeThemeEffect(props, isRoot)\n  const disableThemeClass = props.disableThemeClass\n  const missingTheme = !(name && theme)\n\n  // memo here, changing theme without re-rendering all children is a critical optimization\n  // may require some effort of end user to memoize but without this memo they'd have no option\n  let contents = useThemeManagerContext(\n    props['data-themeable']\n      ? Children.map(props.children, (child) =>\n          cloneElement(child, { ['data-themeable']: true })\n        )\n      : props.children,\n    themeManager\n  )\n\n  if (process.env.NODE_ENV === 'development' && missingTheme) {\n    // eslint-disable-next-line no-console\n    name && !theme && console.warn(`No theme found by name ${name}`)\n    return props.children\n  }\n\n  if (disableThemeClass || missingTheme) {\n    return contents\n  }\n\n  if (isWeb) {\n    const cn = [props.className, className, '_dsp_contents'].filter(Boolean).join(' ')\n    contents = (\n      <span\n        className={cn}\n        style={{\n          // in order to provide currentColor, set color by default\n          color: variableToString(theme?.color),\n        }}\n      >\n        {contents}\n      </span>\n    )\n  }\n\n  return contents\n}\n\nexport function useThemeManagerContext(\n  children: any,\n  themeManager?: ThemeManager | null,\n  shouldReset?: boolean\n) {\n  // disabled super memoize it - listener first strategy\n  const value = themeManager // useMemo(() => themeManager, [!!themeManager])\n  // be sure to memoize themeManager to avoid reparenting\n  if (!value) return children\n  // be sure to memoize shouldReset to avoid reparenting\n  let next = children\n  // TODO likely not necessary if we do reset logic now in useTheme?\n  // reset to parent theme\n  if (shouldReset && themeManager) {\n    next = <Theme name={themeManager.state.parentName}>{next}</Theme>\n  }\n  return <ThemeManagerContext.Provider value={value}>{next}</ThemeManagerContext.Provider>\n}\n"],
+  "mappings": "AA4CM;AA5CN,SAAS,aAAa;AACtB,SAAgB,UAAU,oBAA6B;AAEvD,SAAS,wBAAwB;AAEjC,SAAS,2BAA2B;AACpC,SAAS,4BAA4B;AAG9B,SAAS,MAAM,OAAmB;AAEvC,MAAI,MAAM,SAAS;AACjB,WAAO,MAAM;AAAA,EACf;AAEA,QAAM,SAAS,CAAC,CAAC,MAAM;AACvB,QAAM,EAAE,MAAM,OAAO,cAAc,UAAU,IAAI,qBAAqB,OAAO,MAAM;AACnF,QAAM,oBAAoB,MAAM;AAChC,QAAM,eAAe,EAAE,QAAQ;AAI/B,MAAI,WAAW;AAAA,IACb,MAAM,oBACF,SAAS;AAAA,MAAI,MAAM;AAAA,MAAU,CAAC,UAC5B,aAAa,OAAO,EAAE,CAAC,mBAAmB,KAAK,CAAC;AAAA,IAClD,IACA,MAAM;AAAA,IACV;AAAA,EACF;AAEA,MAAI,QAAQ,IAAI,aAAa,iBAAiB,cAAc;AAE1D,YAAQ,CAAC,SAAS,QAAQ,KAAK,0BAA0B,MAAM;AAC/D,WAAO,MAAM;AAAA,EACf;AAEA,MAAI,qBAAqB,cAAc;AACrC,WAAO;AAAA,EACT;AAEA,MAAI,OAAO;AACT,UAAM,KAAK,CAAC,MAAM,WAAW,WAAW,eAAe,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjF,eACE,oBAAC;AAAA,MACC,WAAW;AAAA,MACX,OAAO;AAAA,QAEL,OAAO,iBAAiB,+BAAO,KAAK;AAAA,MACtC;AAAA,MAEC;AAAA,KACH;AAAA,EAEJ;AAEA,SAAO;AACT;AAEO,SAAS,uBACd,UACA,cACA,aACA;AAEA,QAAM,QAAQ;AAEd,MAAI,CAAC;AAAO,WAAO;AAEnB,MAAI,OAAO;AAGX,MAAI,eAAe,cAAc;AAC/B,WAAO,oBAAC;AAAA,MAAM,MAAM,aAAa,MAAM;AAAA,MAAa;AAAA,KAAK;AAAA,EAC3D;AACA,SAAO,oBAAC,oBAAoB,UAApB;AAAA,IAA6B;AAAA,IAAe;AAAA,GAAK;AAC3D;",
   "names": []
 }

package/dist/esm/views/ThemeProvider.js

@@ -17,13 +17,12 @@ const ThemeProvider = (props) => {
       };
     }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot]);
   }
-  const value = useMemo(() => {
-    return {
-      defaultTheme: props.defaultTheme
-    };
-  }, []);
   return /* @__PURE__ */ jsx(ThemeProviderRootContext.Provider, {
-    value,
+    value: useMemo(() => {
+      return {
+        defaultTheme: props.defaultTheme
+      };
+    }, []),
     children: /* @__PURE__ */ jsx(Theme, {
       className: props.className,
       name: props.defaultTheme,

package/dist/esm/views/ThemeProvider.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/views/ThemeProvider.tsx"],
-  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { createContext, useLayoutEffect, useMemo } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Theme } from './Theme'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProviderRootContext = createContext<Pick<\n  ThemeProviderProps,\n  'defaultTheme'\n> | null>(null)\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  const value = useMemo(() => {\n    return {\n      defaultTheme: props.defaultTheme,\n    }\n    // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...\n  }, [])\n\n  return (\n    <ThemeProviderRootContext.Provider value={value}>\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        disableThemeClass={props.disableRootThemeClass}\n        // @ts-expect-error\n        _isRoot\n      >\n        {props.children}\n      </Theme>\n    </ThemeProviderRootContext.Provider>\n  )\n}\n"],
-  "mappings": "AA2CM;AA3CN,SAAS,gBAAgB;AACzB,SAAS,eAAe,iBAAiB,eAAe;AAExD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AAWf,MAAM,2BAA2B,cAG9B,IAAI;AAEP,MAAM,gBAAgB,CAAC,UAA8B;AAE1D,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,MAAM;AAAuB;AACjC,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,QAAM,QAAQ,QAAQ,MAAM;AAC1B,WAAO;AAAA,MACL,cAAc,MAAM;AAAA,IACtB;AAAA,EAEF,GAAG,CAAC,CAAC;AAEL,SACE,oBAAC,yBAAyB,UAAzB;AAAA,IAAkC;AAAA,IACjC,8BAAC;AAAA,MACC,WAAW,MAAM;AAAA,MACjB,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MAEzB,SAAO;AAAA,MAEN,gBAAM;AAAA,KACT;AAAA,GACF;AAEJ;",
+  "sourcesContent": ["import { isClient } from '@tamagui/constants'\nimport { createContext, useLayoutEffect, useMemo } from 'react'\n\nimport { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Theme } from './Theme'\n\nexport type ThemeProviderProps = {\n  className?: string\n  defaultTheme: string\n  disableRootThemeClass?: boolean\n  themeClassNameOnRoot?: boolean\n  children?: any\n  reset?: boolean\n}\n\nexport const ThemeProviderRootContext = createContext<Pick<\n  ThemeProviderProps,\n  'defaultTheme'\n> | null>(null)\n\nexport const ThemeProvider = (props: ThemeProviderProps) => {\n  // ensure theme is attached to root body node as well to work with modals by default\n  if (isClient) {\n    useLayoutEffect(() => {\n      if (props.disableRootThemeClass) return\n      const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`\n      const target = props.themeClassNameOnRoot ? document.documentElement : document.body\n      target.classList.add(cn)\n      return () => {\n        target.classList.remove(cn)\n      }\n    }, [props.defaultTheme, props.disableRootThemeClass, props.themeClassNameOnRoot])\n  }\n\n  return (\n    <ThemeProviderRootContext.Provider\n      value={useMemo(() => {\n        return {\n          defaultTheme: props.defaultTheme,\n        }\n        // NOTE DON'T CHANGE THIS ITS ONLY USED BY useThemeName for SSR safety for now...\n      }, [])}\n    >\n      <Theme\n        className={props.className}\n        name={props.defaultTheme}\n        disableThemeClass={props.disableRootThemeClass}\n        // @ts-expect-error\n        _isRoot\n      >\n        {props.children}\n      </Theme>\n    </ThemeProviderRootContext.Provider>\n  )\n}\n"],
+  "mappings": "AA2CM;AA3CN,SAAS,gBAAgB;AACzB,SAAS,eAAe,iBAAiB,eAAe;AAExD,SAAS,8BAA8B;AACvC,SAAS,aAAa;AAWf,MAAM,2BAA2B,cAG9B,IAAI;AAEP,MAAM,gBAAgB,CAAC,UAA8B;AAE1D,MAAI,UAAU;AACZ,oBAAgB,MAAM;AACpB,UAAI,MAAM;AAAuB;AACjC,YAAM,KAAK,GAAG,yBAAyB,MAAM;AAC7C,YAAM,SAAS,MAAM,uBAAuB,SAAS,kBAAkB,SAAS;AAChF,aAAO,UAAU,IAAI,EAAE;AACvB,aAAO,MAAM;AACX,eAAO,UAAU,OAAO,EAAE;AAAA,MAC5B;AAAA,IACF,GAAG,CAAC,MAAM,cAAc,MAAM,uBAAuB,MAAM,oBAAoB,CAAC;AAAA,EAClF;AAEA,SACE,oBAAC,yBAAyB,UAAzB;AAAA,IACC,OAAO,QAAQ,MAAM;AACnB,aAAO;AAAA,QACL,cAAc,MAAM;AAAA,MACtB;AAAA,IAEF,GAAG,CAAC,CAAC;AAAA,IAEL,8BAAC;AAAA,MACC,WAAW,MAAM;AAAA,MACjB,MAAM,MAAM;AAAA,MACZ,mBAAmB,MAAM;AAAA,MAEzB,SAAO;AAAA,MAEN,gBAAM;AAAA,KACT;AAAA,GACF;AAEJ;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tamagui/core",
-  "version": "1.0.1-rc.9",
+  "version": "1.0.2",
   "source": "src/index.ts",
   "main": "dist/cjs",
   "module": "dist/esm",
@@ -28,28 +28,28 @@
     "reset.css"
   ],
   "dependencies": {
-    "@tamagui/compose-refs": "^1.0.1-rc.9",
-    "@tamagui/constants": "^1.0.1-rc.9",
-    "@tamagui/helpers": "^1.0.1-rc.9",
-    "@tamagui/react-native-use-pressable": "^1.0.1-rc.9",
-    "@tamagui/react-native-use-responder-events": "^1.0.1-rc.9",
-    "@tamagui/use-did-finish-ssr": "^1.0.1-rc.9",
-    "@tamagui/use-event": "^1.0.1-rc.9",
-    "@tamagui/use-force-update": "^1.0.1-rc.9",
+    "@tamagui/compose-refs": "^1.0.2",
+    "@tamagui/constants": "^1.0.2",
+    "@tamagui/helpers": "^1.0.2",
+    "@tamagui/react-native-use-pressable": "^1.0.2",
+    "@tamagui/react-native-use-responder-events": "^1.0.2",
+    "@tamagui/use-did-finish-ssr": "^1.0.2",
+    "@tamagui/use-event": "^1.0.2",
+    "@tamagui/use-force-update": "^1.0.2",
     "normalize-css-color": "^1.0.2"
   },
   "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "*",
+    "react-dom": "*"
   },
   "devDependencies": {
-    "@tamagui/build": "^1.0.1-rc.9",
+    "@tamagui/build": "^1.0.2",
     "@testing-library/react": "^13.4.0",
     "csstype": "^3.0.10",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "typescript": "^4.7.4",
-    "vitest": "^0.25.7"
+    "vitest": "^0.26.2"
   },
   "exports": {
     "./package.json": "./package.json",

package/src/config.ts

@@ -1,20 +1,18 @@
-import { ConfigListener, TamaguiInternalConfig, ThemeParsed, Tokens } from './types'
+import { ConfigListener, TamaguiInternalConfig, Tokens } from './types'
 
 let conf: TamaguiInternalConfig | null
 
 export const setConfig = (next: TamaguiInternalConfig) => {
   conf = next
-  if (configListeners.size) {
-    configListeners.forEach((cb) => cb(next))
-  }
+  configListeners.forEach((cb) => cb(next))
 }
 
 export const setConfigFont = (name: string, font: any, fontParsed: any) => {
   if (process.env.NODE_ENV === 'development') {
     if (!conf) throw new Error(`Haven't called createTamagui yet`)
   }
-  Object.assign(conf!.fonts, { [name]: font })
-  Object.assign(conf!.fontsParsed, { [`$${name}`]: fontParsed })
+  conf!.fonts[name] = font
+  conf!.fontsParsed[`$${name}`] = fontParsed
 }
 
 export const getConfig = () => {

package/src/constants/constants.ts

@@ -1,5 +1,3 @@
-import { isWeb } from '@tamagui/constants'
-
 export const THEME_NAME_SEPARATOR = '_'
 export const THEME_CLASSNAME_PREFIX = 't_'
 

package/src/createComponent.tsx

@@ -20,7 +20,6 @@ import React, {
   createElement,
   forwardRef,
   memo,
-  startTransition,
   useCallback,
   useContext,
   useEffect,
@@ -61,7 +60,7 @@ import {
 } from './types'
 import { usePressability } from './vendor/Pressability'
 import { Slot, mergeEvent } from './views/Slot'
-import { wrapThemeManagerContext } from './views/Theme'
+import { useThemeManagerContext } from './views/Theme'
 
 // let t
 // import { timer } from '@tamagui/timer'
@@ -558,7 +557,8 @@ export function createComponent<
 
     if (process.env.NODE_ENV === 'development' && !isText && isWeb) {
       Children.toArray(props.children).forEach((item) => {
-        if (typeof item === 'string') {
+        // allow newlines because why not its annoying with mdx
+        if (typeof item === 'string' && item !== '\n') {
           // eslint-disable-next-line no-console
           console.error(
             `Unexpected text node: ${item}. A text node cannot be a child of a <View>.`
@@ -585,10 +585,17 @@ export function createComponent<
     const shouldSetMounted = needsMount && state.unmounted
     useEffect(() => {
       if (!shouldSetMounted) return
+      if (state.unmounted === true && needsMount) {
+        setStateShallow({
+          unmounted: false,
+        })
+        return
+      }
+
       setStateShallow({
         unmounted: false,
       })
-    }, [shouldSetMounted])
+    }, [shouldSetMounted, state.unmounted])
 
     let styles: Record<string, any>[]
 
@@ -618,11 +625,15 @@ export function createComponent<
     const fontFamilyClassName = fontFamily ? `font_${fontFamily}` : ''
 
     const classList = [
+      hasEnterStyle && ((state.unmounted && needsMount) || !isClient)
+        ? 't_will-mount'
+        : '',
       componentName ? componentClassName : '',
       fontFamilyClassName,
       themeIsNew ? theme.className : '',
       classNames ? Object.values(classNames).join(' ') : '',
     ]
+
     const className = classList.join(' ')
 
     if (process.env.TAMAGUI_TARGET === 'web') {
@@ -811,23 +822,20 @@ export function createComponent<
       stateRef.current.themeShouldReset = true
     }
 
-    const childEls =
-      !children || asChild
-        ? children
-        : wrapThemeManagerContext(
-            spacedChildren({
-              separator,
-              children,
-              space,
-              direction: props.spaceDirection || 'both',
-              isZStack,
-            }),
-            // only set context if changed theme
-            stateRef.current.hasProvidedThemeManager ? themeManager : undefined,
-            stateRef.current.themeShouldReset
-          )
+    const innerContent = useThemeManagerContext(
+      spacedChildren({
+        separator,
+        children,
+        space,
+        direction: props.spaceDirection || 'both',
+        isZStack,
+      }),
+      // only set context if changed theme
+      stateRef.current.hasProvidedThemeManager ? themeManager : undefined,
+      stateRef.current.themeShouldReset
+    )
 
-    let content: any
+    let content = !children || asChild ? children : innerContent
 
     if (asChild) {
       elementType = Slot
@@ -865,7 +873,7 @@ export function createComponent<
       }
     }
 
-    content = createElement(elementType, viewProps, childEls)
+    content = createElement(elementType, viewProps, content)
 
     if (process.env.TAMAGUI_TARGET === 'web') {
       if (events || isAnimatedReactNativeWeb) {
@@ -921,7 +929,6 @@ export function createComponent<
             styles,
             pseudos,
             content,
-            childEls,
             shouldAvoidClasses,
             avoidClasses: avoidClassesWhileAnimating,
             animation: props.animation,
@@ -1162,41 +1169,38 @@ export type SpacedChildrenProps = {
   separator?: React.ReactNode
 }
 
-export function spacedChildren({
-  isZStack,
-  children,
-  space,
-  direction,
-  spaceFlex,
-  separator,
-}: SpacedChildrenProps) {
+export function spacedChildren(props: SpacedChildrenProps) {
+  const { isZStack, children, space, direction, spaceFlex, separator } = props
   const hasSpace = !!(space || spaceFlex)
   const hasSeparator = !(separator === undefined || separator === null)
   if (!(hasSpace || hasSeparator || isZStack)) {
     return children
   }
+
   const childrenList = Children.toArray(children)
+
   const len = childrenList.length
-  if (len <= 1 && !isZStack) {
-    if (len === 1) {
-      // forward space! only when one component doesn't make sense to forward space to all children
-      const [onlyChild] = childrenList
-      if (React.isValidElement(onlyChild) && onlyChild.type?.['shouldForwardSpace']) {
-        return React.cloneElement(onlyChild, {
-          space,
-          spaceFlex,
-          separator,
-        } as any)
-      }
-    }
+  if (len <= 1 && !isZStack && !childrenList[0]?.['type']?.['shouldForwardSpace']) {
     return childrenList
   }
+
   const final: React.ReactNode[] = []
-  for (const [index, child] of childrenList.entries()) {
+  for (let [index, child] of childrenList.entries()) {
     const isEmpty =
       child === null ||
       child === undefined ||
       (Array.isArray(child) && child.length === 0)
+
+    // forward space
+    if (!isEmpty && React.isValidElement(child) && child.type?.['shouldForwardSpace']) {
+      child = React.cloneElement(child, {
+        space,
+        spaceFlex,
+        separator,
+        key: child.key,
+      } as any)
+    }
+
     // push them all, but wrap some in Fragment
     if (isEmpty || !child || (child['key'] && !isZStack)) {
       final.push(child)

package/src/createFont.ts

@@ -34,7 +34,6 @@ const processSection = <T>(
 
 export const createFont = <A extends GenericFont>(font: A): A => {
   const sizeKeys = Object.keys(font.size)
-
   const processedFont = Object.fromEntries(
     Object.entries(font).map(([key, section]) => {
       return [
@@ -47,6 +46,5 @@ export const createFont = <A extends GenericFont>(font: A): A => {
       ]
     })
   )
-
   return Object.freeze(processedFont) as A
 }

package/src/createTamagui.ts

@@ -212,7 +212,8 @@ export function createTamagui<Conf extends CreateTamaguiProps>(
     tokensParsed,
     parsed: true,
     getCSS: (separator = '\n') => {
-      return `.is_Text .is_Text {display:inline-flex;}
+      return `.t_unmounted .t_will-mount {opacity:0;visibility:hidden;}
+.is_Text .is_Text {display:inline-flex;}
 ._dsp_contents {display:contents;}
 ${themeConfig.cssRuleSets.join(separator)}
 ${themeConfig.themeRuleSets.join(separator)}

package/src/helpers/ThemeManager.tsx

@@ -39,9 +39,10 @@ export class ThemeManager {
       this.updateState(props, false)
       return
     }
-    if (!parentManager) {
-      throw new Error('Must set up root first')
-    }
+    if (!parentManager) throw `❌`
+    // copy over listeners
+    this.themeListeners = parentManager.themeListeners
+
     // no change no props
     if (hasNoThemeUpdatingProps(props)) {
       return parentManager
@@ -101,9 +102,9 @@ export class ThemeManager {
     state: ThemeManagerState | null = this.state
   ) {
     if (!nextState?.theme || nextState.theme === state?.theme) {
-      return null
+      return false
     }
-    return nextState
+    return true
   }
 
   getState(props = this.props, parentManager = this.parentManager) {
@@ -136,6 +137,7 @@ export class ThemeManager {
   }
 
   notify() {
+    console.log('notify', this.themeListeners.size, this.themeListeners)
     this.themeListeners.forEach((cb) => cb(this.state.name, this))
   }
 
@@ -200,22 +202,9 @@ function getState(
       ? max // component name only don't search upwards
       : 0
 
-  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose')
-    [
-      // eslint-disable-next-line no-console
-      console.groupCollapsed('ThemeManager.getState()', props, {
-        parentName,
-        parentBaseTheme,
-        base,
-        min,
-        max,
-        isParentAComponentTheme,
-      }),
-      // eslint-disable-next-line no-console
-      console.trace(),
-      // eslint-disable-next-line no-console
-      console.groupEnd(),
-    ]
+  // prettier-ignore
+  // eslint-disable-next-line no-console
+  if (process.env.NODE_ENV === 'development' && props.debug === 'verbose') [ console.groupCollapsed('ThemeManager.getState()', props, { parentName,   parentBaseTheme,   base,   min,   max,   isParentAComponentTheme }), console.trace(), console.groupEnd() ]
 
   for (let i = max; i >= min; i--) {
     let prefix = base.slice(0, i).join(THEME_NAME_SEPARATOR)

package/src/helpers/cache.ts

@@ -2,17 +2,12 @@ type Value = Object | Array<any> | string | number
 
 export type Style = { [key: string]: Value }
 
-class Cache {
-  v: Record<string, any> = {}
-
-  get(key: string, valStr: string) {
-    return this.v[key]?.[valStr]
-  }
-
-  set(key: string, valStr: string, object: any) {
-    this.v[key] ??= {}
-    this.v[key][valStr] = object
-  }
+const v: Record<string, any> = {}
+
+export const cache = {
+  get: (key: string, valStr: string) => v[key]?.[valStr],
+  set: (key: string, valStr: string, object: any) => {
+    v[key] ??= {}
+    v[key][valStr] = object
+  },
 }
-
-export const cache = new Cache()

package/src/helpers/expandStyle.ts

@@ -30,25 +30,16 @@ export function expandStyle(key: string, value: any) {
 
     // web only
     switch (key) {
-      case 'aspectRatio': {
-        return [[key, value.toString()]]
-      }
-
       case 'textAlignVertical': {
         return [['verticalAlign', value === 'center' ? 'middle' : value]]
       }
-
-      case 'textDecorationLine': {
-        return [['textDecorationLine', value]]
-      }
-
       case 'writingDirection': {
         return [['direction', value]]
       }
     }
   }
 
-  const longKey = STYLE_SHORT_FORM_EXPANSIONS[key]
+  const longKey = EXPANSIONS[key]
   if (longKey) {
     return longKey.map((key) => {
       return [key, value]
@@ -56,41 +47,36 @@ export function expandStyle(key: string, value: any) {
   }
 }
 
-const STYLE_SHORT_FORM_EXPANSIONS: Record<string, string[]> = {
-  borderColor: [
-    'borderTopColor',
-    'borderRightColor',
-    'borderBottomColor',
-    'borderLeftColor',
-  ],
+const all = ['Top', 'Right', 'Bottom', 'Left']
+const horiz = ['Right', 'Left']
+const vert = ['Top', 'Bottom']
+const xy = ['X', 'Y']
+
+const EXPANSIONS: Record<string, string[]> = {
+  borderColor: ['TopColor', 'RightColor', 'BottomColor', 'LeftColor'],
   borderRadius: [
-    'borderTopLeftRadius',
-    'borderTopRightRadius',
-    'borderBottomRightRadius',
-    'borderBottomLeftRadius',
-  ],
-  borderWidth: [
-    'borderTopWidth',
-    'borderRightWidth',
-    'borderBottomWidth',
-    'borderLeftWidth',
+    'TopLeftRadius',
+    'TopRightRadius',
+    'BottomRightRadius',
+    'BottomLeftRadius',
   ],
-  margin: ['marginTop', 'marginRight', 'marginBottom', 'marginLeft'],
-  marginHorizontal: ['marginRight', 'marginLeft'],
-  marginVertical: ['marginTop', 'marginBottom'],
-  overscrollBehavior: ['overscrollBehaviorX', 'overscrollBehaviorY'],
-  padding: ['paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft'],
-  paddingHorizontal: ['paddingRight', 'paddingLeft'],
-  paddingVertical: ['paddingTop', 'paddingBottom'],
+  borderWidth: ['TopWidth', 'RightWidth', 'BottomWidth', 'LeftWidth'],
+  margin: all,
+  marginHorizontal: horiz,
+  marginVertical: vert,
+  overscrollBehavior: xy,
+  padding: all,
+  paddingHorizontal: horiz,
+  paddingVertical: vert,
   ...(isWeb && {
     // react-native only supports borderStyle
-    borderStyle: [
-      'borderTopStyle',
-      'borderRightStyle',
-      'borderBottomStyle',
-      'borderLeftStyle',
-    ],
+    borderStyle: ['TopStyle', 'RightStyle', 'BottomStyle', 'LeftStyle'],
     // react-native doesn't support X / Y
-    overflow: ['overflowX', 'overflowY'],
+    overflow: xy,
   }),
 }
+
+for (const parent in EXPANSIONS) {
+  const prefix = parent.slice(0, /[A-Z]/.exec(parent)?.index ?? parent.length)
+  EXPANSIONS[parent] = EXPANSIONS[parent].map((k) => `${prefix}${k}`)
+}

package/src/helpers/getBoundingClientRect.tsx

@@ -1,7 +1,4 @@
 export const getBoundingClientRect = (node: HTMLElement | null): void | DOMRect => {
-  if (!node) return
-  if (node.nodeType !== 1) return
-  if (node.getBoundingClientRect) {
-    return node.getBoundingClientRect()
-  }
+  if (!node || node.nodeType !== 1) return
+  return node.getBoundingClientRect?.()
 }

package/src/helpers/getSplitStyles.tsx

@@ -429,20 +429,12 @@ export const getSplitStyles: StyleSplitter = (
             }
             break
           }
-          case 'accessibilityControls': {
-            viewProps['aria-controls'] = processIDRefList(valInit)
-            break
-          }
+          case 'accessibilityLabelledBy':
+          case 'accessibilityFlowTo':
+          case 'accessibilityControls':
           case 'accessibilityDescribedBy': {
-            viewProps['aria-describedby'] = processIDRefList(valInit)
-            break
-          }
-          case 'accessibilityFlowTo': {
-            viewProps['aria-flowto'] = processIDRefList(valInit)
-            break
-          }
-          case 'accessibilityLabelledBy': {
-            viewProps['aria-labelledby'] = processIDRefList(valInit)
+            viewProps[`aria-${keyInit.replace('accessibility', '').toLowerCase()}`] =
+              processIDRefList(valInit)
             break
           }
           case 'accessibilityKeyShortcuts': {
@@ -646,7 +638,24 @@ export const getSplitStyles: StyleSplitter = (
             }
           }
         } else {
-          const isDisabled = !state[descriptor.stateKey || descriptor.name]
+          let isDisabled = !state[descriptor.stateKey || descriptor.name]
+
+          // we never animate in on server side just show the full thing
+          // on client side we use CSS to hide the fully in SSR items, then
+          // un-hide and replay with original animation.
+          if (isWeb && !isClient && isEnter) {
+            isDisabled = false
+          }
+
+          // console.log(
+          //   'isDisabled',
+          //   state,
+          //   descriptor.stateKey,
+          //   state[descriptor.stateKey || descriptor.name],
+          //   isDisabled,
+          //   descriptor
+          // )
+
           if (!isDisabled) {
             usedKeys[key] ||= 1
           }