@tamagui/core 1.0.1-beta.152 → 1.0.1-beta.155
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/createComponent.js +13 -11
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js.map +1 -1
- package/dist/cjs/helpers/getStylesAtomic.js.map +1 -1
- package/dist/cjs/helpers/getThemeCSSRules.js +2 -1
- package/dist/cjs/helpers/getThemeCSSRules.js.map +2 -2
- package/dist/cjs/helpers/mergeTransform.js.map +1 -1
- package/dist/cjs/styled.js +5 -4
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/createComponent.js +14 -12
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js.map +1 -1
- package/dist/esm/helpers/getStylesAtomic.js.map +1 -1
- package/dist/esm/helpers/getThemeCSSRules.js +2 -1
- package/dist/esm/helpers/getThemeCSSRules.js.map +2 -2
- package/dist/esm/helpers/mergeTransform.js.map +1 -1
- package/dist/esm/styled.js +5 -4
- package/dist/esm/styled.js.map +2 -2
- package/package.json +11 -11
- package/src/createComponent.tsx +17 -14
- package/src/helpers/getSplitStyles.tsx +1 -1
- package/src/helpers/getStylesAtomic.ts +1 -1
- package/src/helpers/getThemeCSSRules.ts +2 -2
- package/src/helpers/mergeTransform.ts +1 -1
- package/src/styled.tsx +5 -5
- package/types/helpers/getSplitStyles.d.ts +1 -1
- package/types/helpers/getStylesAtomic.d.ts +1 -1
- package/types/helpers/mergeTransform.d.ts +1 -1
- package/dist/cjs/conf.js +0 -70
- package/dist/cjs/conf.js.map +0 -7
- package/dist/cjs/createComponent.server.js +0 -431
- package/dist/cjs/createComponent.server.js.map +0 -7
- package/dist/cjs/helpers/cssHash.js +0 -51
- package/dist/cjs/helpers/cssHash.js.map +0 -7
- package/dist/cjs/helpers/useAnimationDriver.js +0 -2
- package/dist/cjs/helpers/useAnimationDriver.js.map +0 -7
- package/dist/cjs/hooks/useAnimationDriver.js +0 -2
- package/dist/cjs/hooks/useAnimationDriver.js.map +0 -7
- package/dist/cjs/hooks/useFeatures.js +0 -89
- package/dist/cjs/hooks/useFeatures.js.map +0 -7
- package/dist/cjs/hooks/useServerContext.js +0 -21
- package/dist/cjs/hooks/useServerContext.js.map +0 -7
- package/dist/esm/conf.js +0 -39
- package/dist/esm/conf.js.map +0 -7
- package/dist/esm/createComponent.server.js +0 -408
- package/dist/esm/createComponent.server.js.map +0 -7
- package/dist/esm/helpers/cssHash.js +0 -27
- package/dist/esm/helpers/cssHash.js.map +0 -7
- package/dist/esm/helpers/useAnimationDriver.js +0 -1
- package/dist/esm/helpers/useAnimationDriver.js.map +0 -7
- package/dist/esm/hooks/useAnimationDriver.js +0 -1
- package/dist/esm/hooks/useAnimationDriver.js.map +0 -7
- package/dist/esm/hooks/useFeatures.js +0 -62
- package/dist/esm/hooks/useFeatures.js.map +0 -7
- package/dist/esm/hooks/useServerContext.js +0 -4
- package/dist/esm/hooks/useServerContext.js.map +0 -7
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getThemeCSSRules.ts"],
|
|
4
|
-
"sourcesContent": ["import { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Variable } from '../createVariable'\nimport { CreateTamaguiProps, ThemeObject } from '../types'\nimport { tokensValueToVariable } from './registerCSSVariable'\n\nexport function getThemeCSSRules({\n config,\n themeName,\n theme,\n names,\n}: {\n config: CreateTamaguiProps\n themeName: string\n theme: ThemeObject\n names: string[]\n}) {\n const cssRuleSets: string[] = []\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n let vars = ''\n\n // themeToVariableToValueMap.set(theme, {})\n // const varToValMap = themeToVariableToValueMap.get(theme)\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n // if (varToValMap) {\n // varToValMap[variable.variable] = variable.val\n // }\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const max = config.maxDarkLightNesting ?? 3\n\n if (!isDark && !subName.startsWith('light_')) {\n // neither light nor dark subtheme, just generate one selector with :root:root which\n // will override all :root light/dark selectors generated below\n selectors.push(`:root:root ${CNP}${subName}`)\n continue\n }\n\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const numSelectors = Math.round(max * 1.5)\n\n for (let pi = 0; pi < numSelectors; pi++) {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) continue\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n // avoid .t_light .t_light at the end (make sure child is unique from last parent)\n const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n selectors.push(\n `${parentSelectors.join(' ')} ${\n childSelector === lastParentSelector ? '' : childSelector\n }`\n )\n }\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRuleSets.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRuleSets.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\nbody { background:${theme.background}; color: ${theme.color} }\n:root {${vars} } \n}`\n )\n }\n\n return cssRuleSets\n}\n"],
|
|
5
|
-
"mappings": "AAAA,SAAS,8BAA8B;
|
|
4
|
+
"sourcesContent": ["import { THEME_CLASSNAME_PREFIX } from '../constants/constants'\nimport { Variable, variableToString } from '../createVariable'\nimport { CreateTamaguiProps, ThemeObject } from '../types'\nimport { tokensValueToVariable } from './registerCSSVariable'\n\nexport function getThemeCSSRules({\n config,\n themeName,\n theme,\n names,\n}: {\n config: CreateTamaguiProps\n themeName: string\n theme: ThemeObject\n names: string[]\n}) {\n const cssRuleSets: string[] = []\n\n // special case for SSR\n const hasDarkLight = 'light' in config.themes && 'dark' in config.themes\n const CNP = `.${THEME_CLASSNAME_PREFIX}`\n let vars = ''\n\n // themeToVariableToValueMap.set(theme, {})\n // const varToValMap = themeToVariableToValueMap.get(theme)\n for (const themeKey in theme) {\n const variable = theme[themeKey] as Variable\n let value: any = null\n // if (varToValMap) {\n // varToValMap[variable.variable] = variable.val\n // }\n if (variable.isFloating || !tokensValueToVariable.has(variable.val)) {\n value = variable.val\n } else {\n value = tokensValueToVariable.get(variable.val)!.variable\n }\n vars += `--${themeKey}:${value};`\n }\n\n const isDarkOrLightBase = themeName === 'dark' || themeName === 'light'\n const selectors = names.map((name) => {\n return `${CNP}${name}`\n })\n\n // since we dont specify dark/light in classnames we have to do an awkward specificity war\n // use config.maxDarkLightNesting to determine how deep you can nest until it breaks\n if (hasDarkLight) {\n for (const subName of names) {\n const isDark = isDarkOrLightBase || subName.startsWith('dark_')\n const max = config.maxDarkLightNesting ?? 3\n\n if (!isDark && !subName.startsWith('light_')) {\n // neither light nor dark subtheme, just generate one selector with :root:root which\n // will override all :root light/dark selectors generated below\n selectors.push(`:root:root ${CNP}${subName}`)\n continue\n }\n\n const childSelector = `${CNP}${subName.replace(isDark ? 'dark_' : 'light_', '')}`\n const order = isDark ? ['dark', 'light'] : ['light', 'dark']\n if (isDarkOrLightBase) {\n order.reverse()\n }\n const [stronger, weaker] = order\n const numSelectors = Math.round(max * 1.5)\n\n for (let pi = 0; pi < numSelectors; pi++) {\n const isOdd = pi % 2 === 1\n if (isOdd && pi < 3) continue\n const parents = new Array(pi + 1).fill(undefined).map((_, psi) => {\n return `${CNP}${psi % 2 === 0 ? stronger : weaker}`\n })\n let parentSelectors = parents.length > 1 ? parents.slice(1) : parents\n if (isOdd) {\n const [_first, second, ...rest] = parentSelectors\n parentSelectors = [second, ...rest, second]\n }\n // avoid .t_light .t_light at the end (make sure child is unique from last parent)\n const lastParentSelector = parentSelectors[parentSelectors.length - 1]\n selectors.push(\n `${parentSelectors.join(' ')} ${\n childSelector === lastParentSelector ? '' : childSelector\n }`\n )\n }\n }\n }\n\n const rootSep = config.themeClassNameOnRoot ? '' : ' '\n const css = `${selectors.map((x) => `:root${rootSep}${x}`).join(', ')} {${vars}}`\n cssRuleSets.push(css)\n\n if (config.shouldAddPrefersColorThemes && isDarkOrLightBase) {\n // add media prefers for dark/light base\n const isDark = themeName.startsWith('dark')\n cssRuleSets.push(\n `@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {\nbody { background:${variableToString(theme.background)}; color: ${variableToString(theme.color)} }\n:root {${vars} } \n}`\n )\n }\n\n return cssRuleSets\n}\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,8BAA8B;AACvC,SAAmB,wBAAwB;AAE3C,SAAS,6BAA6B;AAE/B,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAKG;AACD,QAAM,cAAwB,CAAC;AAG/B,QAAM,eAAe,WAAW,OAAO,UAAU,UAAU,OAAO;AAClE,QAAM,MAAM,IAAI;AAChB,MAAI,OAAO;AAIX,aAAW,YAAY,OAAO;AAC5B,UAAM,WAAW,MAAM;AACvB,QAAI,QAAa;AAIjB,QAAI,SAAS,cAAc,CAAC,sBAAsB,IAAI,SAAS,GAAG,GAAG;AACnE,cAAQ,SAAS;AAAA,IACnB,OAAO;AACL,cAAQ,sBAAsB,IAAI,SAAS,GAAG,EAAG;AAAA,IACnD;AACA,YAAQ,KAAK,YAAY;AAAA,EAC3B;AAEA,QAAM,oBAAoB,cAAc,UAAU,cAAc;AAChE,QAAM,YAAY,MAAM,IAAI,CAAC,SAAS;AACpC,WAAO,GAAG,MAAM;AAAA,EAClB,CAAC;AAID,MAAI,cAAc;AAChB,eAAW,WAAW,OAAO;AAC3B,YAAM,SAAS,qBAAqB,QAAQ,WAAW,OAAO;AAC9D,YAAM,MAAM,OAAO,uBAAuB;AAE1C,UAAI,CAAC,UAAU,CAAC,QAAQ,WAAW,QAAQ,GAAG;AAG5C,kBAAU,KAAK,cAAc,MAAM,SAAS;AAC5C;AAAA,MACF;AAEA,YAAM,gBAAgB,GAAG,MAAM,QAAQ,QAAQ,SAAS,UAAU,UAAU,EAAE;AAC9E,YAAM,QAAQ,SAAS,CAAC,QAAQ,OAAO,IAAI,CAAC,SAAS,MAAM;AAC3D,UAAI,mBAAmB;AACrB,cAAM,QAAQ;AAAA,MAChB;AACA,YAAM,CAAC,UAAU,MAAM,IAAI;AAC3B,YAAM,eAAe,KAAK,MAAM,MAAM,GAAG;AAEzC,eAAS,KAAK,GAAG,KAAK,cAAc,MAAM;AACxC,cAAM,QAAQ,KAAK,MAAM;AACzB,YAAI,SAAS,KAAK;AAAG;AACrB,cAAM,UAAU,IAAI,MAAM,KAAK,CAAC,EAAE,KAAK,MAAS,EAAE,IAAI,CAAC,GAAG,QAAQ;AAChE,iBAAO,GAAG,MAAM,MAAM,MAAM,IAAI,WAAW;AAAA,QAC7C,CAAC;AACD,YAAI,kBAAkB,QAAQ,SAAS,IAAI,QAAQ,MAAM,CAAC,IAAI;AAC9D,YAAI,OAAO;AACT,gBAAM,CAAC,QAAQ,WAAW,IAAI,IAAI;AAClC,4BAAkB,CAAC,QAAQ,GAAG,MAAM,MAAM;AAAA,QAC5C;AAEA,cAAM,qBAAqB,gBAAgB,gBAAgB,SAAS;AACpE,kBAAU;AAAA,UACR,GAAG,gBAAgB,KAAK,GAAG,KACzB,kBAAkB,qBAAqB,KAAK;AAAA,QAEhD;AAAA,MACF;AAAA,IACF;AAAA,EACF;AAEA,QAAM,UAAU,OAAO,uBAAuB,KAAK;AACnD,QAAM,MAAM,GAAG,UAAU,IAAI,CAAC,MAAM,QAAQ,UAAU,GAAG,EAAE,KAAK,IAAI,MAAM;AAC1E,cAAY,KAAK,GAAG;AAEpB,MAAI,OAAO,+BAA+B,mBAAmB;AAE3D,UAAM,SAAS,UAAU,WAAW,MAAM;AAC1C,gBAAY;AAAA,MACV,gCAAgC,SAAS,SAAS;AAAA,oBACpC,iBAAiB,MAAM,UAAU,aAAa,iBAAiB,MAAM,KAAK;AAAA,SACrF;AAAA;AAAA,IAEL;AAAA,EACF;AAEA,SAAO;AACT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/mergeTransform.ts"],
|
|
4
|
-
"sourcesContent": ["import { ViewStyle } from 'react-native'\n\nexport const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false) => {\n obj.transform ||= []\n obj.transform[backwards ? 'unshift' : 'push']({ [mapTransformKeys[key] || key]: val } as any)\n}\n\nconst mapTransformKeys = {\n x: 'translateX',\n y: 'translateY',\n}\n\nexport const invertMapTransformKeys = {\n translateX: 'x',\n translateY: 'y',\n}\n"],
|
|
4
|
+
"sourcesContent": ["import type { ViewStyle } from 'react-native'\n\nexport const mergeTransform = (obj: ViewStyle, key: string, val: any, backwards = false) => {\n obj.transform ||= []\n obj.transform[backwards ? 'unshift' : 'push']({ [mapTransformKeys[key] || key]: val } as any)\n}\n\nconst mapTransformKeys = {\n x: 'translateX',\n y: 'translateY',\n}\n\nexport const invertMapTransformKeys = {\n translateX: 'x',\n translateY: 'y',\n}\n"],
|
|
5
5
|
"mappings": "AAEO,MAAM,iBAAiB,CAAC,KAAgB,KAAa,KAAU,YAAY,UAAU;AAC1F,MAAI,cAAc,CAAC;AACnB,MAAI,UAAU,YAAY,YAAY,QAAQ,EAAE,CAAC,iBAAiB,QAAQ,MAAM,IAAI,CAAQ;AAC9F;AAEA,MAAM,mBAAmB;AAAA,EACvB,GAAG;AAAA,EACH,GAAG;AACL;AAEO,MAAM,yBAAyB;AAAA,EACpC,YAAY;AAAA,EACZ,YAAY;AACd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,4 +1,3 @@
|
|
|
1
|
-
import { Image, Text, TextInput } from "react-native";
|
|
2
1
|
import { createComponent } from "./createComponent";
|
|
3
2
|
import { RNComponents } from "./helpers/RNComponents";
|
|
4
3
|
function styled(Component, options, staticExtractionOptions) {
|
|
@@ -25,9 +24,11 @@ function styled(Component, options, staticExtractionOptions) {
|
|
|
25
24
|
const reactNativeWebComponent = isReactNativeWeb ? (parentStaticConfig == null ? void 0 : parentStaticConfig.reactNativeWebComponent) || Component : null;
|
|
26
25
|
const isTamagui = !isReactNativeWeb && !!parentStaticConfig;
|
|
27
26
|
const Comp = reactNativeWebComponent || Component;
|
|
28
|
-
const isImage =
|
|
29
|
-
const isInput =
|
|
30
|
-
const isText =
|
|
27
|
+
const isImage = Boolean((staticExtractionOptions == null ? void 0 : staticExtractionOptions.isImage) ?? (parentStaticConfig == null ? void 0 : parentStaticConfig.isImage));
|
|
28
|
+
const isInput = Boolean((staticExtractionOptions == null ? void 0 : staticExtractionOptions.isInput) ?? (parentStaticConfig == null ? void 0 : parentStaticConfig.isInput));
|
|
29
|
+
const isText = Boolean(
|
|
30
|
+
isInput || ((staticExtractionOptions == null ? void 0 : staticExtractionOptions.isText) ?? (parentStaticConfig == null ? void 0 : parentStaticConfig.isText))
|
|
31
|
+
);
|
|
31
32
|
const conf = {
|
|
32
33
|
...staticExtractionOptions,
|
|
33
34
|
...!isTamagui && {
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import {
|
|
5
|
-
"mappings": "AAAA,SAAS,
|
|
4
|
+
"sourcesContent": ["import { createComponent } from './createComponent'\nimport { RNComponents } from './helpers/RNComponents'\nimport {\n GetProps,\n GetVariantValues,\n MediaProps,\n PseudoProps,\n StaticConfig,\n StylableComponent,\n TamaguiComponent,\n VariantDefinitions,\n VariantSpreadFunction,\n} from './types'\n\n// TODO may be able to use this in the options?: arg below directly\nexport type StyledOptions<ParentComponent extends StylableComponent> = GetProps<ParentComponent> & {\n name?: string\n variants?: VariantDefinitions<ParentComponent> | undefined\n defaultVariants?: { [key: string]: any }\n}\n\nexport function styled<\n ParentComponent extends StylableComponent,\n Variants extends VariantDefinitions<ParentComponent> | void = VariantDefinitions<ParentComponent> | void\n>(\n Component: ParentComponent,\n // this should be Partial<GetProps<ParentComponent>> but causes excessively deep type issues\n options?: GetProps<ParentComponent> & {\n name?: string\n variants?: Variants | undefined\n // thought i had this typed, but can't get it linked\n defaultVariants?: { [key: string]: any }\n },\n staticExtractionOptions?: Partial<StaticConfig>\n) {\n const staticConfigProps = (() => {\n const parentStaticConfig =\n 'staticConfig' in Component ? (Component.staticConfig as StaticConfig) : null\n if (options) {\n const { variants, name, defaultVariants, ...defaultProps } = options\n if (defaultVariants) {\n Object.assign(defaultProps, defaultVariants)\n }\n let isReactNativeWeb = parentStaticConfig?.isReactNativeWeb || RNComponents.has(Component)\n // this can happen due to smart-ness in fake-react-native, rough heuristic here to ensure we match (could be better..)\n if (!('staticConfig' in Component) && !isReactNativeWeb) {\n if (RNComponents.has(Component['displayName'])) {\n RNComponents.add(Component)\n isReactNativeWeb = true\n } else {\n if (process.env.NODE_ENV === 'development') {\n // eslint-disable-next-line no-console\n console.warn(\n `Invalid styled() component: Tamagui only accepts react-native Text, View, Image, TextInput, or another styled Tamagui view`\n )\n }\n }\n }\n const reactNativeWebComponent = isReactNativeWeb\n ? parentStaticConfig?.reactNativeWebComponent || Component\n : null\n const isTamagui = !isReactNativeWeb && !!parentStaticConfig\n const Comp = reactNativeWebComponent || (Component as any)\n const isImage = Boolean(staticExtractionOptions?.isImage ?? parentStaticConfig?.isImage)\n const isInput = Boolean(staticExtractionOptions?.isInput ?? parentStaticConfig?.isInput)\n const isText = Boolean(\n isInput || (staticExtractionOptions?.isText ?? parentStaticConfig?.isText)\n )\n\n const conf: Partial<StaticConfig> = {\n ...staticExtractionOptions,\n ...(!isTamagui && {\n Component: Comp,\n }),\n isTamagui,\n // this type gets messed up by options?: Partial<GetProps<ParentComponent>> above\n // take away the Partial<> and it's fine\n variants,\n defaultProps,\n defaultVariants,\n componentName: name,\n isReactNativeWeb,\n // for nesting multiple levels of rnw styled() need keep use the OG component\n reactNativeWebComponent,\n isInput,\n isText,\n isImage,\n }\n\n return conf\n }\n return {}\n })()\n\n const component = createComponent(staticConfigProps, Component)\n\n // get parent props without pseudos and medias so we can rebuild both with new variants\n type ParentPropsBase = ParentComponent extends TamaguiComponent<any, any, infer P>\n ? P\n : GetProps<ParentComponent>\n type ParentVariants = ParentComponent extends TamaguiComponent<any, any, any, infer V> ? V : {}\n\n type OurVariants = Variants extends void\n ? {}\n : {\n [Key in keyof Variants]?: Variants[Key] extends VariantSpreadFunction<any, infer Val>\n ? Val\n : GetVariantValues<keyof Variants[Key]>\n }\n\n type VariantProps = Omit<ParentVariants, keyof OurVariants> & OurVariants\n type OurPropsBase = ParentPropsBase & VariantProps\n\n type Props = Variants extends void\n ? GetProps<ParentComponent>\n : // start with base props\n OurPropsBase &\n // add in media (+ pseudos nested)\n MediaProps<Partial<OurPropsBase>> &\n // add in pseudos\n PseudoProps<Partial<OurPropsBase>>\n\n return component as TamaguiComponent<\n Props,\n // TODO infer ref\n any,\n ParentPropsBase,\n ParentVariants & OurVariants\n >\n}\n\n// import { Stack } from './views/Stack'\n// const X = styled(Stack, {\n// variants: {\n// size: {\n// '...size': (val) => {\n// return {}\n// }\n// },\n// disabled: {\n// true: {\n// opacity: 0.5,\n// pointerEvents: 'none',\n// },\n// },\n// }\n// })\n// type variants = GetStyledVariants<typeof X>\n// const y = <X disabled size=\"$10\" />\n"],
|
|
5
|
+
"mappings": "AAAA,SAAS,uBAAuB;AAChC,SAAS,oBAAoB;AAoBtB,SAAS,OAId,WAEA,SAMA,yBACA;AACA,QAAM,qBAAqB,MAAM;AAC/B,UAAM,qBACJ,kBAAkB,YAAa,UAAU,eAAgC;AAC3E,QAAI,SAAS;AACX,YAAM,EAAE,UAAU,MAAM,oBAAoB,aAAa,IAAI;AAC7D,UAAI,iBAAiB;AACnB,eAAO,OAAO,cAAc,eAAe;AAAA,MAC7C;AACA,UAAI,oBAAmB,yDAAoB,qBAAoB,aAAa,IAAI,SAAS;AAEzF,UAAI,EAAE,kBAAkB,cAAc,CAAC,kBAAkB;AACvD,YAAI,aAAa,IAAI,UAAU,cAAc,GAAG;AAC9C,uBAAa,IAAI,SAAS;AAC1B,6BAAmB;AAAA,QACrB,OAAO;AACL,cAAI,QAAQ,IAAI,aAAa,eAAe;AAE1C,oBAAQ;AAAA,cACN;AAAA,YACF;AAAA,UACF;AAAA,QACF;AAAA,MACF;AACA,YAAM,0BAA0B,oBAC5B,yDAAoB,4BAA2B,YAC/C;AACJ,YAAM,YAAY,CAAC,oBAAoB,CAAC,CAAC;AACzC,YAAM,OAAO,2BAA4B;AACzC,YAAM,UAAU,SAAQ,mEAAyB,aAAW,yDAAoB,QAAO;AACvF,YAAM,UAAU,SAAQ,mEAAyB,aAAW,yDAAoB,QAAO;AACvF,YAAM,SAAS;AAAA,QACb,aAAY,mEAAyB,YAAU,yDAAoB;AAAA,MACrE;AAEA,YAAM,OAA8B;AAAA,QAClC,GAAG;AAAA,QACH,GAAI,CAAC,aAAa;AAAA,UAChB,WAAW;AAAA,QACb;AAAA,QACA;AAAA,QAGA;AAAA,QACA;AAAA,QACA;AAAA,QACA,eAAe;AAAA,QACf;AAAA,QAEA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAEA,aAAO;AAAA,IACT;AACA,WAAO,CAAC;AAAA,EACV,GAAG;AAEH,QAAM,YAAY,gBAAgB,mBAAmB,SAAS;AA4B9D,SAAO;AAOT;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tamagui/core",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.155",
|
|
4
4
|
"source": "src/index.ts",
|
|
5
5
|
"main": "dist/cjs",
|
|
6
6
|
"module": "dist/esm",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"watch": "tamagui-build --watch",
|
|
18
18
|
"clean": "tamagui-build clean",
|
|
19
19
|
"clean:build": "tamagui-build clean:build",
|
|
20
|
-
"test": "vitest --run --config ../vite-plugin-internal/vite.config.ts"
|
|
20
|
+
"test": "vitest --run --config ../vite-plugin-internal/src/vite.config.ts"
|
|
21
21
|
},
|
|
22
22
|
"files": [
|
|
23
23
|
"types",
|
|
@@ -27,14 +27,14 @@
|
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@expo/match-media": "^0.3.0",
|
|
30
|
-
"@tamagui/compose-refs": "^1.0.1-beta.
|
|
31
|
-
"@tamagui/helpers": "^1.0.1-beta.
|
|
32
|
-
"@tamagui/normalize-css-color-lite": "^1.0.1-beta.
|
|
33
|
-
"@tamagui/rnw": "^1.0.1-beta.
|
|
34
|
-
"@tamagui/rnw-lite": "^1.0.1-beta.
|
|
35
|
-
"@tamagui/use-debounce": "^1.0.1-beta.
|
|
36
|
-
"@tamagui/use-event": "^1.0.1-beta.
|
|
37
|
-
"@tamagui/use-force-update": "^1.0.1-beta.
|
|
30
|
+
"@tamagui/compose-refs": "^1.0.1-beta.155",
|
|
31
|
+
"@tamagui/helpers": "^1.0.1-beta.155",
|
|
32
|
+
"@tamagui/normalize-css-color-lite": "^1.0.1-beta.155",
|
|
33
|
+
"@tamagui/rnw": "^1.0.1-beta.155",
|
|
34
|
+
"@tamagui/rnw-lite": "^1.0.1-beta.155",
|
|
35
|
+
"@tamagui/use-debounce": "^1.0.1-beta.155",
|
|
36
|
+
"@tamagui/use-event": "^1.0.1-beta.155",
|
|
37
|
+
"@tamagui/use-force-update": "^1.0.1-beta.155",
|
|
38
38
|
"expo-screen-orientation": "^4.3.0",
|
|
39
39
|
"hyphenate-style-name": "^1.0.4"
|
|
40
40
|
},
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
"react-dom": "*"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@tamagui/build": "^1.0.1-beta.
|
|
46
|
+
"@tamagui/build": "^1.0.1-beta.155",
|
|
47
47
|
"@types/react": "^18.0.15",
|
|
48
48
|
"csstype": "^3.0.10",
|
|
49
49
|
"esbuild": "^0.14.49",
|
package/src/createComponent.tsx
CHANGED
|
@@ -22,7 +22,7 @@ import React, {
|
|
|
22
22
|
useContext,
|
|
23
23
|
useEffect,
|
|
24
24
|
} from 'react'
|
|
25
|
-
import {
|
|
25
|
+
import { Text, View, ViewStyle } from 'react-native'
|
|
26
26
|
|
|
27
27
|
import { getConfig, onConfiguredOnce } from './config'
|
|
28
28
|
import { stackDefaultStyles } from './constants/constants'
|
|
@@ -98,7 +98,7 @@ function mergeShorthands({ defaultProps }: StaticConfigParsed, { shorthands }: T
|
|
|
98
98
|
|
|
99
99
|
let initialTheme: any
|
|
100
100
|
let config: TamaguiInternalConfig
|
|
101
|
-
|
|
101
|
+
const mediaPropNames: string[] = []
|
|
102
102
|
|
|
103
103
|
export function createComponent<
|
|
104
104
|
ComponentPropTypes extends Object = {},
|
|
@@ -120,7 +120,6 @@ export function createComponent<
|
|
|
120
120
|
let AnimatedView: any
|
|
121
121
|
let avoidClasses = true
|
|
122
122
|
let defaultNativeStyle: any
|
|
123
|
-
let defaultNativeStyleSheet: StyleSheet.NamedStyles<{ base: {} }>
|
|
124
123
|
let tamaguiDefaultProps: any
|
|
125
124
|
let initialSplitStyles: SplitStyleResult
|
|
126
125
|
|
|
@@ -180,7 +179,7 @@ export function createComponent<
|
|
|
180
179
|
props['debug']
|
|
181
180
|
)
|
|
182
181
|
|
|
183
|
-
const hostRef = useServerRef<
|
|
182
|
+
const hostRef = useServerRef<TamaguiElement>(null)
|
|
184
183
|
const setState = states[1]
|
|
185
184
|
const setStateShallow = createShallowUpdate(setState)
|
|
186
185
|
|
|
@@ -638,11 +637,7 @@ export function createComponent<
|
|
|
638
637
|
...medias,
|
|
639
638
|
}
|
|
640
639
|
} else {
|
|
641
|
-
styles = [
|
|
642
|
-
isWeb ? null : defaultNativeStyleSheet ? (defaultNativeStyleSheet.base as ViewStyle) : null,
|
|
643
|
-
animationStyles ?? style,
|
|
644
|
-
medias,
|
|
645
|
-
]
|
|
640
|
+
styles = [isWeb ? null : defaultNativeStyle, animationStyles ?? style, medias]
|
|
646
641
|
if (!animationStyles && initialSplitStyles) {
|
|
647
642
|
const initPseudos = initialSplitStyles.pseudos
|
|
648
643
|
!state.mounted && addPseudoToStyles(styles, initPseudos, pseudos, 'enterStyle')
|
|
@@ -674,6 +669,10 @@ export function createComponent<
|
|
|
674
669
|
fontFamily = fontFamily.slice(1)
|
|
675
670
|
}
|
|
676
671
|
|
|
672
|
+
if (props['debug']) {
|
|
673
|
+
console.log('???', fontFamily, isText)
|
|
674
|
+
}
|
|
675
|
+
|
|
677
676
|
const classList = [
|
|
678
677
|
componentName ? componentClassName : '',
|
|
679
678
|
fontFamily ? `font_${fontFamily}` : '',
|
|
@@ -1142,10 +1141,6 @@ export function createComponent<
|
|
|
1142
1141
|
}
|
|
1143
1142
|
}
|
|
1144
1143
|
|
|
1145
|
-
defaultNativeStyleSheet = StyleSheet.create({
|
|
1146
|
-
base: defaultNativeStyle,
|
|
1147
|
-
})
|
|
1148
|
-
|
|
1149
1144
|
if (Object.keys(defaults).length) {
|
|
1150
1145
|
tamaguiDefaultProps = defaults
|
|
1151
1146
|
}
|
|
@@ -1372,12 +1367,20 @@ function isUnspaced(child: React.ReactNode) {
|
|
|
1372
1367
|
|
|
1373
1368
|
function AbsoluteFill(props: { children?: any }) {
|
|
1374
1369
|
return (
|
|
1375
|
-
<View pointerEvents="box-none" style={
|
|
1370
|
+
<View pointerEvents="box-none" style={absoluteFill}>
|
|
1376
1371
|
{props.children}
|
|
1377
1372
|
</View>
|
|
1378
1373
|
)
|
|
1379
1374
|
}
|
|
1380
1375
|
|
|
1376
|
+
const absoluteFill = {
|
|
1377
|
+
position: 'absolute',
|
|
1378
|
+
top: 0,
|
|
1379
|
+
left: 0,
|
|
1380
|
+
right: 0,
|
|
1381
|
+
bottom: 0,
|
|
1382
|
+
} as const
|
|
1383
|
+
|
|
1381
1384
|
// this can be done with CSS entirely right?
|
|
1382
1385
|
// const shouldWrapTextAncestor = isWeb && isText && !hasTextAncestor
|
|
1383
1386
|
// if (shouldWrapTextAncestor) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { stylePropsText, stylePropsTransform, validPseudoKeys, validStyles } from '@tamagui/helpers'
|
|
2
2
|
import { useInsertionEffect } from 'react'
|
|
3
|
-
import { ViewStyle } from 'react-native'
|
|
3
|
+
import type { ViewStyle } from 'react-native'
|
|
4
4
|
|
|
5
5
|
import { getConfig } from '../config'
|
|
6
6
|
import { isClient, isRSC, isWeb, useIsomorphicLayoutEffect } from '../constants/platform'
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
import { StyleObject, simpleHash } from '@tamagui/helpers'
|
|
7
7
|
import hyphenateStyleName from 'hyphenate-style-name'
|
|
8
|
-
import { TextStyle, ViewStyle } from 'react-native'
|
|
8
|
+
import type { TextStyle, ViewStyle } from 'react-native'
|
|
9
9
|
|
|
10
10
|
import { getConfig } from '../config'
|
|
11
11
|
import { TamaguiInternalConfig } from '../types'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { THEME_CLASSNAME_PREFIX } from '../constants/constants'
|
|
2
|
-
import { Variable } from '../createVariable'
|
|
2
|
+
import { Variable, variableToString } from '../createVariable'
|
|
3
3
|
import { CreateTamaguiProps, ThemeObject } from '../types'
|
|
4
4
|
import { tokensValueToVariable } from './registerCSSVariable'
|
|
5
5
|
|
|
@@ -95,7 +95,7 @@ export function getThemeCSSRules({
|
|
|
95
95
|
const isDark = themeName.startsWith('dark')
|
|
96
96
|
cssRuleSets.push(
|
|
97
97
|
`@media(prefers-color-scheme: ${isDark ? 'dark' : 'light'}) {
|
|
98
|
-
body { background:${theme.background}; color: ${theme.color} }
|
|
98
|
+
body { background:${variableToString(theme.background)}; color: ${variableToString(theme.color)} }
|
|
99
99
|
:root {${vars} }
|
|
100
100
|
}`
|
|
101
101
|
)
|
package/src/styled.tsx
CHANGED
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
import { Image, Text, TextInput } from 'react-native'
|
|
2
|
-
|
|
3
1
|
import { createComponent } from './createComponent'
|
|
4
2
|
import { RNComponents } from './helpers/RNComponents'
|
|
5
3
|
import {
|
|
@@ -63,9 +61,11 @@ export function styled<
|
|
|
63
61
|
: null
|
|
64
62
|
const isTamagui = !isReactNativeWeb && !!parentStaticConfig
|
|
65
63
|
const Comp = reactNativeWebComponent || (Component as any)
|
|
66
|
-
const isImage =
|
|
67
|
-
const isInput =
|
|
68
|
-
const isText =
|
|
64
|
+
const isImage = Boolean(staticExtractionOptions?.isImage ?? parentStaticConfig?.isImage)
|
|
65
|
+
const isInput = Boolean(staticExtractionOptions?.isInput ?? parentStaticConfig?.isInput)
|
|
66
|
+
const isText = Boolean(
|
|
67
|
+
isInput || (staticExtractionOptions?.isText ?? parentStaticConfig?.isText)
|
|
68
|
+
)
|
|
69
69
|
|
|
70
70
|
const conf: Partial<StaticConfig> = {
|
|
71
71
|
...staticExtractionOptions,
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ViewStyle } from 'react-native';
|
|
1
|
+
import type { ViewStyle } from 'react-native';
|
|
2
2
|
import type { DebugProp, MediaQueryKey, PseudoStyles, SplitStyleState, StackProps, StaticConfigParsed, TamaguiInternalConfig, ThemeObject } from '../types';
|
|
3
3
|
import { FontLanguageProps, LanguageContextType } from '../views/FontLanguage.types';
|
|
4
4
|
import { RulesToInsert } from './insertStyleRule';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { StyleObject } from '@tamagui/helpers';
|
|
2
|
-
import { TextStyle, ViewStyle } from 'react-native';
|
|
2
|
+
import type { TextStyle, ViewStyle } from 'react-native';
|
|
3
3
|
import { PseudoDescriptor } from './pseudoDescriptors';
|
|
4
4
|
declare type ViewOrTextStyle = ViewStyle | TextStyle;
|
|
5
5
|
export declare type ViewStyleWithPseudos = ViewOrTextStyle & {
|
package/dist/cjs/conf.js
DELETED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var conf_exports = {};
|
|
20
|
-
__export(conf_exports, {
|
|
21
|
-
configListeners: () => configListeners,
|
|
22
|
-
getConfig: () => getConfig,
|
|
23
|
-
getHasConfigured: () => getHasConfigured,
|
|
24
|
-
getThemes: () => getThemes,
|
|
25
|
-
getTokens: () => getTokens,
|
|
26
|
-
onConfiguredOnce: () => onConfiguredOnce,
|
|
27
|
-
setConfig: () => setConfig,
|
|
28
|
-
setConfigFont: () => setConfigFont
|
|
29
|
-
});
|
|
30
|
-
module.exports = __toCommonJS(conf_exports);
|
|
31
|
-
let conf;
|
|
32
|
-
const setConfig = (next) => {
|
|
33
|
-
conf = next;
|
|
34
|
-
if (configListeners.size) {
|
|
35
|
-
configListeners.forEach((cb) => cb(conf));
|
|
36
|
-
configListeners.clear();
|
|
37
|
-
}
|
|
38
|
-
};
|
|
39
|
-
const setConfigFont = (name, font, fontParsed) => {
|
|
40
|
-
if (process.env.NODE_ENV === "development") {
|
|
41
|
-
if (!conf)
|
|
42
|
-
throw new Error(`Haven't called createTamagui yet`);
|
|
43
|
-
}
|
|
44
|
-
Object.assign(conf.fonts, { [name]: font });
|
|
45
|
-
Object.assign(conf.fontsParsed, { [`$${name}`]: fontParsed });
|
|
46
|
-
};
|
|
47
|
-
const getHasConfigured = () => !!conf;
|
|
48
|
-
const getConfig = () => conf;
|
|
49
|
-
const getTokens = () => conf.tokensParsed;
|
|
50
|
-
const getThemes = () => conf.themes;
|
|
51
|
-
const configListeners = /* @__PURE__ */ new Set();
|
|
52
|
-
const onConfiguredOnce = (cb) => {
|
|
53
|
-
if (conf) {
|
|
54
|
-
cb(conf);
|
|
55
|
-
} else {
|
|
56
|
-
configListeners.add(cb);
|
|
57
|
-
}
|
|
58
|
-
};
|
|
59
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
60
|
-
0 && (module.exports = {
|
|
61
|
-
configListeners,
|
|
62
|
-
getConfig,
|
|
63
|
-
getHasConfigured,
|
|
64
|
-
getThemes,
|
|
65
|
-
getTokens,
|
|
66
|
-
onConfiguredOnce,
|
|
67
|
-
setConfig,
|
|
68
|
-
setConfigFont
|
|
69
|
-
});
|
|
70
|
-
//# sourceMappingURL=conf.js.map
|
package/dist/cjs/conf.js.map
DELETED
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../src/conf.ts"],
|
|
4
|
-
"sourcesContent": ["import { ConfigListener, TamaguiInternalConfig } from './types'\n\nlet conf: TamaguiInternalConfig | null\n\nexport const setConfig = (next: TamaguiInternalConfig) => {\n conf = next\n if (configListeners.size) {\n configListeners.forEach((cb) => cb(conf!))\n configListeners.clear()\n }\n}\n\nexport const setConfigFont = (name: string, font: any, fontParsed: any) => {\n if (process.env.NODE_ENV === 'development') {\n if (!conf) throw new Error(`Haven't called createTamagui yet`)\n }\n Object.assign(conf!.fonts, { [name]: font })\n Object.assign(conf!.fontsParsed, { [`$${name}`]: fontParsed })\n}\n\nexport const getHasConfigured = () => !!conf\nexport const getConfig = () => conf!\nexport const getTokens = () => conf!.tokensParsed\nexport const getThemes = () => conf!.themes\n\nexport const configListeners = new Set<ConfigListener>()\n\nexport const onConfiguredOnce = (cb: ConfigListener) => {\n if (conf) {\n cb(conf!)\n } else {\n configListeners.add(cb)\n }\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,IAAI;AAEG,MAAM,YAAY,CAAC,SAAgC;AACxD,SAAO;AACP,MAAI,gBAAgB,MAAM;AACxB,oBAAgB,QAAQ,CAAC,OAAO,GAAG,IAAK,CAAC;AACzC,oBAAgB,MAAM;AAAA,EACxB;AACF;AAEO,MAAM,gBAAgB,CAAC,MAAc,MAAW,eAAoB;AACzE,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,CAAC;AAAM,YAAM,IAAI,MAAM,kCAAkC;AAAA,EAC/D;AACA,SAAO,OAAO,KAAM,OAAO,EAAE,CAAC,OAAO,KAAK,CAAC;AAC3C,SAAO,OAAO,KAAM,aAAa,EAAE,CAAC,IAAI,SAAS,WAAW,CAAC;AAC/D;AAEO,MAAM,mBAAmB,MAAM,CAAC,CAAC;AACjC,MAAM,YAAY,MAAM;AACxB,MAAM,YAAY,MAAM,KAAM;AAC9B,MAAM,YAAY,MAAM,KAAM;AAE9B,MAAM,kBAAkB,oBAAI,IAAoB;AAEhD,MAAM,mBAAmB,CAAC,OAAuB;AACtD,MAAI,MAAM;AACR,OAAG,IAAK;AAAA,EACV,OAAO;AACL,oBAAgB,IAAI,EAAE;AAAA,EACxB;AACF;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|