@tamagui/core 1.0.1-beta.191 → 1.0.1-beta.193

package/src/helpers/getSplitStyles.tsx

@@ -20,6 +20,7 @@ import type {
 import { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types'
 import { createMediaStyle } from './createMediaStyle'
 import { getPropMappedFontFamily } from './createPropMapper'
+import { createProxy } from './createProxy'
 import { fixStyles } from './expandStyles'
 import { getAtomicStyle, getStylesAtomic, styleToCSS } from './getStylesAtomic'
 import {
@@ -45,8 +46,11 @@ const skipProps = {
   animateOnly: true,
   debug: true,
   componentName: true,
+}
 
-  ...(!isWeb && {
+// native only skips
+if (process.env.TAMAGUI_TARGET === 'native') {
+  Object.assign(skipProps, {
     tag: true,
     whiteSpace: true,
     wordWrap: true,
@@ -58,7 +62,7 @@ const skipProps = {
     contain: true,
     boxSizing: true,
     boxShadow: true,
-  }),
+  })
 }
 
 type TransformNamespaceKey = 'transform' | PseudoPropKeys | MediaQueryKey
@@ -478,17 +482,13 @@ export const getSplitStyles: StyleSplitter = (
     }
   }
 
-  if (shouldDoClasses) {
-    const atomic = getStylesAtomic(style)
-    for (const atomicStyle of atomic) {
-      const key = atomicStyle.property
-      // pointerEvents box-none must be CSS-ified
-      // should probably have a few more exceptions here!
-      if (key === 'pointerEvents' || !state.dynamicStylesInline) {
+  if (process.env.TAMAGUI_TARGET === 'web') {
+    if (shouldDoClasses) {
+      const atomic = getStylesAtomic(style)
+      for (const atomicStyle of atomic) {
+        const key = atomicStyle.property
         addStyleToInsertRules(rulesToInsert, atomicStyle)
         mergeClassName(transforms, classNames, key, atomicStyle.identifier)
-      } else {
-        style[key] = atomicStyle.value
       }
     }
   }
@@ -655,7 +655,7 @@ function getSubStyleProxiedProps(defaultProps: Object, baseProps: Object, specif
   if (propProxies.has(specificProps)) {
     return propProxies.get(specificProps)
   }
-  const next = new Proxy(specificProps, {
+  const next = createProxy(specificProps, {
     has(_, key) {
       return key in defaultProps || key in specificProps || key in baseProps
     },

package/src/helpers/getVariantExtras.tsx

@@ -1,6 +1,7 @@
 import { getConfig } from '../config'
 import { GenericFonts } from '../types'
 import { LanguageContextType } from '../views/FontLanguage.types'
+import { createProxy } from './createProxy'
 
 const extrasCache = new WeakMap()
 
@@ -30,7 +31,7 @@ export function getVariantExtras(
     // we avoid passing in default props for media queries because that would confuse things like SizableText.size:
     props: avoidDefaultProps
       ? props
-      : new Proxy(props, {
+      : createProxy(props, {
           // handles shorthands
           get(target, key) {
             const shorthand = conf.inverseShorthands[key as any]

package/src/helpers/proxyThemeVariables.tsx

@@ -1,10 +1,7 @@
+import { createProxy } from './createProxy'
+
 export function proxyThemeVariables<A extends Object>(obj: A): A {
-  if (process.env.NODE_ENV === 'development' && !obj) {
-    // eslint-disable-next-line no-console
-    console.trace(`empty value for proxyThemeVariables`, obj)
-    return obj
-  }
-  return new Proxy<A>(obj || {}, {
+  return createProxy<A>(obj || {}, {
     has(target, key) {
       return Reflect.has(target, removeStarting$(key))
     },

package/src/hooks/useMedia.tsx

@@ -2,6 +2,7 @@ import { useIsomorphicLayoutEffect } from '@tamagui/constants'
 import { startTransition, useEffect, useMemo, useState } from 'react'
 
 import { getConfig } from '../config'
+import { createProxy } from '../helpers/createProxy'
 import { matchMedia } from '../helpers/matchMedia'
 import {
   MediaQueries,
@@ -15,7 +16,7 @@ import { useSafeRef } from './useSafeRef'
 export const mediaState: MediaQueryState =
   // development time safeguard
   process.env.NODE_ENV === 'development'
-    ? new Proxy(
+    ? createProxy(
         {},
         {
           get(target, key) {

package/src/hooks/useTheme.tsx

@@ -6,6 +6,7 @@ import { getConfig } from '../config'
 import { isDevTools } from '../constants/isDevTools'
 import { ThemeContext } from '../contexts/ThemeContext'
 import { areEqualSets } from '../helpers/areEqualSets'
+import { createProxy } from '../helpers/createProxy'
 import {
   GetNextThemeProps,
   ThemeManager,
@@ -111,7 +112,7 @@ function getThemeProxied(
   state?: React.MutableRefObject<UseThemeState>,
   debugProp?: boolean | 'verbose'
 ) {
-  return new Proxy(theme, {
+  return createProxy(theme, {
     has(_, key) {
       if (typeof key === 'string' && key[0] === '$') {
         key = key.slice(1)

package/types/helpers/createProxy.d.ts

@@ -0,0 +1,2 @@
+export declare function createProxy<A extends object>(target: A, handler: ProxyHandler<A>): A;
+//# sourceMappingURL=createProxy.d.ts.map

package/src/helpers/validate.ts

@@ -1,80 +0,0 @@
-// // published a patched version that works on native
-// // @ts-ignore
-// import { default as ow } from '@tamagui/ow/dev-only'
-
-// let Config: any
-// let Tokens: any
-// let FontRequired: any
-// let FontOptional: any
-
-// export const validateConfig = (conf: any) => {
-//   if (!conf) {
-//     console.warn('no conf?')
-//     return
-//   }
-//   try {
-//     ow(conf, Config)
-//   } catch (err: any) {
-//     console.warn('Given config:\n', JSON.stringify(conf, null, 2), err)
-//   }
-// }
-
-// export const validateTokens = (tokens: any) => {
-//   try {
-//     ow(tokens, Tokens)
-//   } catch (err: any) {
-//     console.warn('Given tokens:\n', JSON.stringify(tokens, null, 2), err)
-//   }
-// }
-
-// export const validateFont = (font: any) => {
-//   try {
-//     const { style, transform, color, ...required } = font
-//     ow(required, FontRequired)
-//     ow({ style, transform, color }, FontOptional)
-//   } catch (err: any) {
-//     console.warn('Given font:\n', JSON.stringify(font, null, 2), err)
-//   }
-// }
-
-// if (process.env.NODE_ENV === 'development') {
-//   const fontReq = {
-//     family: ow.string,
-//     size: ow.object.nonEmpty.valuesOfType(ow.number),
-//     lineHeight: ow.object.nonEmpty.valuesOfType(ow.number),
-//     weight: ow.object.nonEmpty.valuesOfType(ow.string),
-//     letterSpacing: ow.object.nonEmpty.valuesOfType(ow.number),
-//   }
-//   const fontOpt = {
-//     style: ow.optional.object.valuesOfType(ow.string),
-//     transform: ow.optional.object.valuesOfType(ow.string),
-//     color: ow.optional.object.valuesOfType(ow.any(ow.string, ow.object)),
-//   }
-
-//   Config = ow.object.exactShape({
-//     defaultTheme: ow.optional.string,
-//     disableRootThemeClass: ow.optional.boolean,
-//     shorthands: ow.optional.object.valuesOfType(ow.string),
-//     themes: ow.object.valuesOfType(ow.object),
-//     tokens: ow.object.valuesOfType(ow.object),
-//     media: ow.object.valuesOfType(ow.object),
-//     animations: ow.object.valuesOfType(ow.object),
-//     fonts: ow.object.valuesOfType(
-//       ow.object.partialShape({
-//         ...fontReq,
-//         ...fontOpt,
-//       })
-//     ),
-//   })
-
-//   FontRequired = ow.object.exactShape(fontReq)
-//   FontOptional = ow.object.partialShape(fontOpt)
-
-//   Tokens = ow.object.exactShape({
-//     size: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
-//     space: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
-//     zIndex: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
-//     radius: ow.object.nonEmpty.valuesOfType(ow.any(ow.number, ow.object)),
-//     color: ow.object.nonEmpty.valuesOfType(ow.any(ow.string, ow.object)),
-//   })
-// }