@tamagui/core 1.0.0-beta.207 → 1.0.0-beta.208
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/Tamagui.js +5 -0
- package/dist/cjs/Tamagui.js.map +2 -2
- package/dist/cjs/createComponent.js +23 -45
- package/dist/cjs/createComponent.js.map +2 -2
- package/dist/cjs/helpers/createPropMapper.js +25 -26
- package/dist/cjs/helpers/createPropMapper.js.map +2 -2
- package/dist/cjs/helpers/getSplitStyles.js +20 -9
- package/dist/cjs/helpers/getSplitStyles.js.map +2 -2
- package/dist/cjs/helpers/getStylesAtomic.js +1 -0
- package/dist/cjs/helpers/getStylesAtomic.js.map +2 -2
- package/dist/cjs/helpers/insertStyleRule.js +5 -1
- package/dist/cjs/helpers/insertStyleRule.js.map +2 -2
- package/dist/cjs/hooks/useFeatures.js +88 -7
- package/dist/cjs/hooks/useFeatures.js.map +2 -2
- package/dist/cjs/hooks/useTheme.js +13 -14
- package/dist/cjs/hooks/useTheme.js.map +2 -2
- package/dist/cjs/styled.js.map +2 -2
- package/dist/cjs/types.js.map +1 -1
- package/dist/cjs/views/Stack.js +1 -0
- package/dist/cjs/views/Stack.js.map +2 -2
- package/dist/cjs/views/Text.js +1 -0
- package/dist/cjs/views/Text.js.map +2 -2
- package/dist/esm/Tamagui.js +2 -0
- package/dist/esm/Tamagui.js.map +2 -2
- package/dist/esm/createComponent.js +25 -50
- package/dist/esm/createComponent.js.map +2 -2
- package/dist/esm/helpers/createPropMapper.js +25 -26
- package/dist/esm/helpers/createPropMapper.js.map +2 -2
- package/dist/esm/helpers/getSplitStyles.js +20 -9
- package/dist/esm/helpers/getSplitStyles.js.map +2 -2
- package/dist/esm/helpers/getStylesAtomic.js +1 -0
- package/dist/esm/helpers/getStylesAtomic.js.map +2 -2
- package/dist/esm/helpers/insertStyleRule.js +5 -1
- package/dist/esm/helpers/insertStyleRule.js.map +2 -2
- package/dist/esm/hooks/useFeatures.js +88 -13
- package/dist/esm/hooks/useFeatures.js.map +2 -2
- package/dist/esm/hooks/useTheme.js +13 -14
- package/dist/esm/hooks/useTheme.js.map +2 -2
- package/dist/esm/styled.js.map +2 -2
- package/dist/esm/views/Stack.js +1 -0
- package/dist/esm/views/Stack.js.map +2 -2
- package/dist/esm/views/Text.js +1 -0
- package/dist/esm/views/Text.js.map +2 -2
- package/dist/jsx/Tamagui.js +2 -0
- package/dist/jsx/createComponent.js +25 -50
- package/dist/jsx/helpers/createPropMapper.js +25 -26
- package/dist/jsx/helpers/getSplitStyles.js +20 -9
- package/dist/jsx/helpers/getStylesAtomic.js +1 -0
- package/dist/jsx/helpers/insertStyleRule.js +5 -1
- package/dist/jsx/hooks/useFeatures.js +88 -13
- package/dist/jsx/hooks/useTheme.js +13 -14
- package/dist/jsx/views/Stack.js +1 -0
- package/dist/jsx/views/Text.js +1 -0
- package/package.json +6 -6
- package/types/Tamagui.d.ts +2 -0
- package/types/Tamagui.d.ts.map +1 -1
- package/types/createComponent.d.ts.map +1 -1
- package/types/createFont.d.ts +1 -1
- package/types/createFont.d.ts.map +1 -1
- package/types/helpers/createPropMapper.d.ts +1 -1
- package/types/helpers/createPropMapper.d.ts.map +1 -1
- package/types/helpers/getSplitStyles.d.ts +3 -13
- package/types/helpers/getSplitStyles.d.ts.map +1 -1
- package/types/helpers/getStylesAtomic.d.ts.map +1 -1
- package/types/helpers/insertStyleRule.d.ts.map +1 -1
- package/types/hooks/useFeatures.d.ts +6 -3
- package/types/hooks/useFeatures.d.ts.map +1 -1
- package/types/styled.d.ts +2 -2
- package/types/styled.d.ts.map +1 -1
- package/types/types.d.ts +29 -15
- package/types/types.d.ts.map +1 -1
- package/types/views/Stack.d.ts.map +1 -1
- package/types/views/Text.d.ts.map +1 -1
|
@@ -32,7 +32,8 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
32
32
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
33
33
|
var getSplitStyles_exports = {};
|
|
34
34
|
__export(getSplitStyles_exports, {
|
|
35
|
-
getSplitStyles: () => getSplitStyles
|
|
35
|
+
getSplitStyles: () => getSplitStyles,
|
|
36
|
+
getSubStyle: () => getSubStyle
|
|
36
37
|
});
|
|
37
38
|
module.exports = __toCommonJS(getSplitStyles_exports);
|
|
38
39
|
var import_helpers = require("@tamagui/helpers");
|
|
@@ -76,12 +77,16 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
76
77
|
if (val.startsWith("_transform-")) {
|
|
77
78
|
const isMediaOrPseudo = key !== "transform";
|
|
78
79
|
const isMedia = isMediaOrPseudo && key[11] === "_";
|
|
79
|
-
const isPsuedo = isMediaOrPseudo &&
|
|
80
|
+
const isPsuedo = isMediaOrPseudo && key[11] === "0";
|
|
80
81
|
const namespace = isMedia ? key.split("_")[2] : isPsuedo ? key.split("-")[1] : "transform";
|
|
81
82
|
if (!import_insertStyleRule.insertedTransforms[val]) {
|
|
82
83
|
(0, import_insertStyleRule.updateInserted)();
|
|
83
84
|
}
|
|
84
85
|
const transform = import_insertStyleRule.insertedTransforms[val];
|
|
86
|
+
if (!transform || transform === "undefined") {
|
|
87
|
+
console.trace("NO TRANSFORM", { key, val }, state);
|
|
88
|
+
return;
|
|
89
|
+
}
|
|
85
90
|
transforms[namespace] = transforms[namespace] || ["", ""];
|
|
86
91
|
transforms[namespace][0] += val.replace("_transform", "");
|
|
87
92
|
transforms[namespace][1] += transform;
|
|
@@ -105,7 +110,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
105
110
|
}
|
|
106
111
|
}
|
|
107
112
|
}
|
|
108
|
-
if (state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
|
|
113
|
+
if (!import_platform.isWeb || state.noClassNames || state.resolveVariablesAs === "value" || state.resolveVariablesAs === "both") {
|
|
109
114
|
for (const key in cur) {
|
|
110
115
|
if (key in import_helpers.stylePropsTransform) {
|
|
111
116
|
(0, import_helpers.mergeTransform)(style, key, cur[key]);
|
|
@@ -114,6 +119,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
114
119
|
}
|
|
115
120
|
}
|
|
116
121
|
}
|
|
122
|
+
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
123
|
+
console.log("getSplitStyles.push", { state, cur });
|
|
124
|
+
}
|
|
117
125
|
cur = null;
|
|
118
126
|
}
|
|
119
127
|
__name(push, "push");
|
|
@@ -135,7 +143,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
135
143
|
}
|
|
136
144
|
let isMedia = keyInit[0] === "$";
|
|
137
145
|
let isPseudo = import_helpers.validPseudoKeys[keyInit];
|
|
138
|
-
const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, props,
|
|
146
|
+
const out = isMedia || isPseudo ? true : staticConfig.propMapper(keyInit, valInit, theme, state.fallbackProps || props, state.resolveVariablesAs);
|
|
139
147
|
const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out);
|
|
140
148
|
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
141
149
|
console.log("split style", keyInit, expanded);
|
|
@@ -144,7 +152,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
144
152
|
if (val === void 0) {
|
|
145
153
|
continue;
|
|
146
154
|
}
|
|
147
|
-
if (val && val[0] === "_") {
|
|
155
|
+
if (key !== "target" && val && val[0] === "_") {
|
|
148
156
|
mergeClassName(key, val);
|
|
149
157
|
continue;
|
|
150
158
|
}
|
|
@@ -160,7 +168,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
160
168
|
continue;
|
|
161
169
|
}
|
|
162
170
|
pseudos[key] = pseudos[key] || {};
|
|
163
|
-
pseudos[key] = getSubStyle(val, staticConfig, theme, props, state
|
|
171
|
+
pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true);
|
|
164
172
|
if (import_platform.isWeb && !state.noClassNames) {
|
|
165
173
|
const pseudoStyles = (0, import_getStylesAtomic.getStylesAtomic)({ [key]: pseudos[key] });
|
|
166
174
|
for (const style2 of pseudoStyles) {
|
|
@@ -176,7 +184,7 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
176
184
|
viewProps[key] = val;
|
|
177
185
|
continue;
|
|
178
186
|
}
|
|
179
|
-
const mediaStyle = getSubStyle(val, staticConfig, theme, props, state
|
|
187
|
+
const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true);
|
|
180
188
|
if (import_platform.isWeb) {
|
|
181
189
|
const mediaStyles = (0, import_getStylesAtomic.getStylesAtomic)(mediaStyle);
|
|
182
190
|
for (const style2 of mediaStyles) {
|
|
@@ -228,6 +236,9 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
228
236
|
classNames[namespace] = identifier;
|
|
229
237
|
}
|
|
230
238
|
}
|
|
239
|
+
if (process.env.NODE_ENV === "development" && props["debug"] === "verbose") {
|
|
240
|
+
console.log("out", { style, pseudos, medias, classNames, viewProps });
|
|
241
|
+
}
|
|
231
242
|
return {
|
|
232
243
|
viewProps,
|
|
233
244
|
style,
|
|
@@ -236,11 +247,11 @@ const getSplitStyles = /* @__PURE__ */ __name((props, staticConfig, theme, state
|
|
|
236
247
|
classNames
|
|
237
248
|
};
|
|
238
249
|
}, "getSplitStyles");
|
|
239
|
-
const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props,
|
|
250
|
+
const getSubStyle = /* @__PURE__ */ __name((styleIn, staticConfig, theme, props, state, avoidDefaultProps) => {
|
|
240
251
|
const styleOut = {};
|
|
241
252
|
for (const key in styleIn) {
|
|
242
253
|
const val = styleIn[key];
|
|
243
|
-
const out = staticConfig.propMapper(key, val, theme, props,
|
|
254
|
+
const out = staticConfig.propMapper(key, val, theme, state.fallbackProps || props, state.resolveVariablesAs, avoidDefaultProps);
|
|
244
255
|
const expanded = out === true || !out ? [[key, val]] : Object.entries(out);
|
|
245
256
|
for (const [skey, sval] of expanded) {
|
|
246
257
|
if (skey in import_helpers.stylePropsTransform) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getSplitStyles.tsx"],
|
|
4
|
-
"sourcesContent": ["import {\n mergeTransform,\n stylePropsText,\n stylePropsTransform,\n validPseudoKeys,\n validStyles,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n MediaKeys,\n MediaQueryKey,\n PsuedoPropKeys,\n StackProps,\n StaticConfigParsed,\n TamaguiComponentState,\n ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { ResolveVariableTypes } from './createPropMapper'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { ViewStyleWithPseudos, getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule, insertedTransforms, updateInserted } from './insertStyleRule'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\n\nconst skipKeys = {\n // could put events in here\n animation: true,\n animated: true,\n children: true,\n key: true,\n ref: true,\n}\n\nexport type PseudoStyles = {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n enterStyle?: ViewStyle\n exitStyle?: ViewStyle\n}\n\nexport type ClassNamesObject = Record<string, string>\n\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nfunction normalizeStyleObject(style: any) {\n // fix flex to match web\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (typeof style.flex === 'number') {\n const val = style.flex\n delete style.flex\n style.flexGrow = style.flexGrow ?? val\n style.flexShrink = style.flexShrink ?? 1\n }\n\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\n// TODO can make a few of these objects lazy if profiling seems slow\n\nexport const getSplitStyles = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: Partial<TamaguiComponentState> & {\n noClassNames?: boolean\n resolveVariablesAs?: ResolveVariableTypes\n },\n defaultClassNames?: ClassNamesObject | null\n) => {\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const viewProps: StackProps = {}\n const style: ViewStyle = {}\n const classNames: ClassNamesObject = {\n ...defaultClassNames,\n }\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaKeys, ViewStyle> = {}\n let cur: ViewStyleWithPseudos | null = null\n\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n let transforms: Record<TransformNamespaceKey, [string, string]> = {}\n\n function mergeClassName(key: string, val: string) {\n if (!val) return\n if (val.startsWith('_transform-')) {\n const isMediaOrPseudo = key !== 'transform'\n const isMedia = isMediaOrPseudo && key[11] === '_'\n const isPsuedo = isMediaOrPseudo && !isMedia\n const namespace: TransformNamespaceKey = isMedia\n ? key.split('_')[2]\n : isPsuedo\n ? key.split('-')[1]\n : 'transform'\n if (!insertedTransforms[val]) {\n // HMR or loaded a new chunk\n updateInserted()\n }\n const transform = insertedTransforms[val]\n // if (!transform) {\n // console.error('NO TRANSFORM', key, val)\n // return\n // }\n transforms[namespace] = transforms[namespace] || ['', '']\n transforms[namespace][0] += val.replace('_transform', '')\n transforms[namespace][1] += transform\n } else {\n classNames[key] = val\n }\n }\n\n function push() {\n if (!cur) return\n normalizeStyleObject(cur)\n\n if (isWeb && !state.noClassNames) {\n const atomic = getStylesAtomic(cur)\n for (const atomicStyle of atomic) {\n if (!state.noClassNames) {\n mergeClassName(atomicStyle.property, atomicStyle.identifier)\n insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0])\n } else {\n style[atomicStyle.property] = atomicStyle.value\n }\n }\n }\n\n if (\n state.noClassNames ||\n state.resolveVariablesAs === 'value' ||\n state.resolveVariablesAs === 'both'\n ) {\n for (const key in cur) {\n if (key in stylePropsTransform) {\n mergeTransform(style, key, cur[key])\n } else {\n style[key] = cur[key]\n }\n }\n }\n\n // reset it for next group of styles\n cur = null\n }\n\n for (const keyInit in props) {\n const valInit = props[keyInit]\n\n if (skipKeys[keyInit]) {\n viewProps[keyInit] = valInit\n continue\n }\n\n if (\n // isPropClassName\n keyInit === 'className' ||\n // isExtractedClassName\n (validStyleProps[keyInit] && valInit && valInit[0] === '_')\n ) {\n push()\n mergeClassName(keyInit, valInit)\n if (cur) {\n if (cur[keyInit]) console.warn('just want to see how used')\n delete cur[keyInit]\n }\n continue\n }\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n\n const out =\n isMedia || isPseudo\n ? true\n : staticConfig.propMapper(\n keyInit,\n valInit,\n theme,\n props,\n staticConfig,\n state.resolveVariablesAs\n )\n\n const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log('split style', keyInit, expanded)\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) {\n continue\n }\n\n if (val && val[0] === '_') {\n mergeClassName(key, val)\n continue\n }\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n ) {\n viewProps[key] = val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n pseudos[key] = getSubStyle(val, staticConfig, theme, props, state.resolveVariablesAs, true)\n if (isWeb && !state.noClassNames) {\n const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n for (const style of pseudoStyles) {\n mergeClassName(`${style.property}-${key}`, style.identifier)\n insertStyleRule(style.identifier, style.rules[0])\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key.slice(1)\n\n if (!mediaQueryConfig[mediaKey]) {\n // this isn't a media key, pass through\n viewProps[key] = val\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(\n val,\n staticConfig,\n theme,\n props,\n state.resolveVariablesAs,\n true\n )\n\n if (isWeb) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKey, mediaQueryConfig)\n mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n insertStyleRule(out.identifier, out.styleRule)\n }\n if (mediaState[mediaKey]) {\n Object.assign(medias, mediaStyle)\n }\n } else {\n if (mediaState[mediaKey]) {\n // TODO i think media + pseudo needs handling here\n Object.assign(style, mediaStyle)\n }\n }\n continue\n }\n\n // TODO\n if (key === 'style' || key.startsWith('_style')) {\n push()\n Object.assign(style, val)\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n cur = cur || {}\n cur[key] = val\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (key !== 'animation' && key !== 'debug') {\n push()\n viewProps[key] = val\n }\n }\n }\n }\n\n push()\n\n if (transforms) {\n for (const namespace in transforms) {\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n insertStyleRule(identifier, rule)\n }\n classNames[namespace] = identifier\n }\n }\n\n return {\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n }\n}\n\nconst getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n resolveVariablesAs?: ResolveVariableTypes,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (const key in styleIn) {\n const val = styleIn[key]\n const out = staticConfig.propMapper(\n key,\n val,\n theme,\n props,\n staticConfig,\n resolveVariablesAs,\n avoidDefaultProps\n )\n const expanded = out === true || !out ? [[key, val]] : Object.entries(out)\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = sval\n }\n }\n }\n normalizeStyleObject(styleOut)\n return styleOut\n}\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAMO;AAGP,sBAAsB;AACtB,sBAA6C;
|
|
4
|
+
"sourcesContent": ["import {\n mergeTransform,\n stylePropsText,\n stylePropsTransform,\n validPseudoKeys,\n validStyles,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb } from '../constants/platform'\nimport { mediaQueryConfig, mediaState } from '../hooks/useMedia'\nimport {\n MediaKeys,\n MediaQueryKey,\n PseudoStyles,\n PsuedoPropKeys,\n SplitStyleState,\n StackProps,\n StaticConfigParsed,\n ThemeObject,\n} from '../types'\nimport { createMediaStyle } from './createMediaStyle'\nimport { ResolveVariableTypes } from './createPropMapper'\nimport { fixNativeShadow } from './fixNativeShadow'\nimport { ViewStyleWithPseudos, getStylesAtomic } from './getStylesAtomic'\nimport { insertStyleRule, insertedTransforms, updateInserted } from './insertStyleRule'\n\nexport type SplitStyles = ReturnType<typeof getSplitStyles>\n\nconst skipKeys = {\n // could put events in here\n animation: true,\n animated: true,\n children: true,\n key: true,\n ref: true,\n}\n\nexport type ClassNamesObject = Record<string, string>\n\nexport type SplitStyleResult = ReturnType<typeof getSplitStyles>\n\nfunction normalizeStyleObject(style: any) {\n // fix flex to match web\n // see spec for flex shorthand https://developer.mozilla.org/en-US/docs/Web/CSS/flex\n if (typeof style.flex === 'number') {\n const val = style.flex\n delete style.flex\n style.flexGrow = style.flexGrow ?? val\n style.flexShrink = style.flexShrink ?? 1\n }\n\n if (!isWeb) {\n fixNativeShadow(style)\n }\n}\n\ntype TransformNamespaceKey = 'transform' | PsuedoPropKeys | MediaQueryKey\n\n// TODO can make a few of these objects lazy if profiling seems slow\n\nexport const getSplitStyles = (\n props: { [key: string]: any },\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n state: SplitStyleState,\n defaultClassNames?: ClassNamesObject | null\n) => {\n const validStyleProps = staticConfig.isText ? stylePropsText : validStyles\n const viewProps: StackProps = {}\n const style: ViewStyle = {}\n const classNames: ClassNamesObject = {\n ...defaultClassNames,\n }\n const pseudos: PseudoStyles = {}\n const medias: Record<MediaKeys, ViewStyle> = {}\n let cur: ViewStyleWithPseudos | null = null\n\n // we need to gather these specific to each media query / pseudo\n // value is [hash, val], so [\"-jnjad-asdnjk\", \"scaleX(1) rotate(10deg)\"]\n let transforms: Record<TransformNamespaceKey, [string, string]> = {}\n\n function mergeClassName(key: string, val: string) {\n if (!val) return\n if (val.startsWith('_transform-')) {\n const isMediaOrPseudo = key !== 'transform'\n const isMedia = isMediaOrPseudo && key[11] === '_'\n const isPsuedo = isMediaOrPseudo && key[11] === '0'\n const namespace: TransformNamespaceKey = isMedia\n ? key.split('_')[2]\n : isPsuedo\n ? key.split('-')[1]\n : 'transform'\n\n if (!insertedTransforms[val]) {\n // HMR or loaded a new chunk\n updateInserted()\n }\n const transform = insertedTransforms[val]\n if (!transform || transform === 'undefined') {\n console.trace('NO TRANSFORM', { key, val }, state)\n return\n }\n transforms[namespace] = transforms[namespace] || ['', '']\n transforms[namespace][0] += val.replace('_transform', '')\n transforms[namespace][1] += transform\n } else {\n classNames[key] = val\n }\n }\n\n function push() {\n if (!cur) return\n normalizeStyleObject(cur)\n\n if (isWeb && !state.noClassNames) {\n const atomic = getStylesAtomic(cur)\n for (const atomicStyle of atomic) {\n if (!state.noClassNames) {\n mergeClassName(atomicStyle.property, atomicStyle.identifier)\n insertStyleRule(atomicStyle.identifier, atomicStyle.rules[0])\n } else {\n style[atomicStyle.property] = atomicStyle.value\n }\n }\n }\n\n if (\n !isWeb ||\n state.noClassNames ||\n state.resolveVariablesAs === 'value' ||\n state.resolveVariablesAs === 'both'\n ) {\n for (const key in cur) {\n if (key in stylePropsTransform) {\n mergeTransform(style, key, cur[key])\n } else {\n style[key] = cur[key]\n }\n }\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log('getSplitStyles.push', { state, cur })\n }\n\n // reset it for next group of styles\n cur = null\n }\n\n for (const keyInit in props) {\n const valInit = props[keyInit]\n\n if (skipKeys[keyInit]) {\n viewProps[keyInit] = valInit\n continue\n }\n\n if (\n // isPropClassName\n keyInit === 'className' ||\n // isExtractedClassName\n (validStyleProps[keyInit] && valInit && valInit[0] === '_')\n ) {\n push()\n mergeClassName(keyInit, valInit)\n if (cur) {\n if (cur[keyInit]) console.warn('just want to see how used')\n delete cur[keyInit]\n }\n continue\n }\n\n let isMedia = keyInit[0] === '$'\n let isPseudo = validPseudoKeys[keyInit]\n\n const out =\n isMedia || isPseudo\n ? true\n : staticConfig.propMapper(\n keyInit,\n valInit,\n theme,\n state.fallbackProps || props,\n state.resolveVariablesAs\n )\n\n const expanded = out === true || !out ? [[keyInit, valInit]] : Object.entries(out)\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log('split style', keyInit, expanded)\n }\n\n for (const [key, val] of expanded) {\n if (val === undefined) {\n continue\n }\n\n if (key !== 'target' && val && val[0] === '_') {\n mergeClassName(key, val)\n continue\n }\n\n isMedia = key[0] === '$'\n isPseudo = validPseudoKeys[key]\n\n if (\n (staticConfig.deoptProps && staticConfig.deoptProps.has(key)) ||\n (staticConfig.inlineProps && staticConfig.inlineProps.has(key))\n ) {\n viewProps[key] = val\n }\n\n // pseudo\n if (isPseudo) {\n if (!val) continue\n if (key === 'enterStyle' && state.mounted) {\n // once mounted we can ignore enterStyle\n continue\n }\n pseudos[key] = pseudos[key] || {}\n pseudos[key] = getSubStyle(val, staticConfig, theme, props, state, true)\n if (isWeb && !state.noClassNames) {\n const pseudoStyles = getStylesAtomic({ [key]: pseudos[key] })\n for (const style of pseudoStyles) {\n mergeClassName(`${style.property}-${key}`, style.identifier)\n insertStyleRule(style.identifier, style.rules[0])\n }\n }\n continue\n }\n\n // media\n if (isMedia) {\n const mediaKey = key.slice(1)\n\n if (!mediaQueryConfig[mediaKey]) {\n // this isn't a media key, pass through\n viewProps[key] = val\n continue\n }\n\n // dont check if media is active, we just apply *all* media styles\n // we combine the media props on top regular props, could proxy this\n // TODO test proxy here instead of merge\n // THIS USED TO PROXY BACK TO REGULAR PROPS BUT THAT IS THE WRONG BEHAVIOR\n // we avoid passing in default props for media queries because that would confuse things like SizableText.size:\n const mediaStyle = getSubStyle(val, staticConfig, theme, props, state, true)\n\n if (isWeb) {\n const mediaStyles = getStylesAtomic(mediaStyle)\n for (const style of mediaStyles) {\n const out = createMediaStyle(style, mediaKey, mediaQueryConfig)\n mergeClassName(`${out.identifier}-${mediaKey}`, out.identifier)\n insertStyleRule(out.identifier, out.styleRule)\n }\n if (mediaState[mediaKey]) {\n Object.assign(medias, mediaStyle)\n }\n } else {\n if (mediaState[mediaKey]) {\n // TODO i think media + pseudo needs handling here\n Object.assign(style, mediaStyle)\n }\n }\n continue\n }\n\n // TODO\n if (key === 'style' || key.startsWith('_style')) {\n push()\n Object.assign(style, val)\n continue\n }\n\n if (!isWeb && key === 'pointerEvents') {\n viewProps[key] = val\n continue\n }\n\n if (validStyleProps[key]) {\n cur = cur || {}\n cur[key] = val\n continue\n }\n\n // pass to view props\n if (!staticConfig.variants || !(key in staticConfig.variants)) {\n if (key !== 'animation' && key !== 'debug') {\n push()\n viewProps[key] = val\n }\n }\n }\n }\n\n push()\n\n if (transforms) {\n for (const namespace in transforms) {\n const [hash, val] = transforms[namespace]\n const identifier = `_transform${hash}`\n if (!insertedTransforms[identifier]) {\n const rule = `.${identifier} { transform: ${val}; }`\n insertStyleRule(identifier, rule)\n }\n classNames[namespace] = identifier\n }\n }\n\n if (process.env.NODE_ENV === 'development' && props['debug'] === 'verbose') {\n console.log('out', { style, pseudos, medias, classNames, viewProps })\n }\n\n return {\n viewProps,\n style,\n medias,\n pseudos,\n classNames,\n }\n}\n\nexport const getSubStyle = (\n styleIn: Object,\n staticConfig: StaticConfigParsed,\n theme: ThemeObject,\n props: any,\n state: SplitStyleState,\n avoidDefaultProps?: boolean\n): ViewStyle => {\n const styleOut: ViewStyle = {}\n for (const key in styleIn) {\n const val = styleIn[key]\n const out = staticConfig.propMapper(\n key,\n val,\n theme,\n state.fallbackProps || props,\n state.resolveVariablesAs,\n avoidDefaultProps\n )\n const expanded = out === true || !out ? [[key, val]] : Object.entries(out)\n for (const [skey, sval] of expanded) {\n if (skey in stylePropsTransform) {\n mergeTransform(styleOut, skey, sval)\n } else {\n styleOut[skey] = sval\n }\n }\n }\n normalizeStyleObject(styleOut)\n return styleOut\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -101,6 +101,7 @@ function getAtomicStyle(style, pseudo, options) {
|
|
|
101
101
|
atomicStyles[key] = __spreadProps(__spreadValues({}, out[key]), {
|
|
102
102
|
transformProperty
|
|
103
103
|
});
|
|
104
|
+
console.log("got", JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2));
|
|
104
105
|
}
|
|
105
106
|
} else {
|
|
106
107
|
atomicStyles = generateAtomicStyles(style);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/getStylesAtomic.ts"],
|
|
4
|
-
"sourcesContent": ["import {\n StyleObject,\n invertMapTransformKeys,\n mergeTransform,\n stylePropsTransform,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { rnw } from '../constants/rnw'\nimport { isVariable } from '../createVariable'\n\n// NOTE: going to refactor and merge getSplitStyles + getAtomicStyles into one\n// before i can do that need to not rely on rnw for generateAtomicStyles\n// will change that to not be external at all and just logically do it in the\n// merged getSplitStyles/getAtomicStyles file in one loop.\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n splitTransforms?: boolean\n}\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options: AtomicStyleOptions = {}) {\n const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n let res: StyleObject[] = []\n\n // *1 order matched to *0\n for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n if (!style || !Object.keys(style).length) {\n continue\n }\n const pseudo = pseudosOrdered[index]\n for (const skey in style) {\n const val = style[skey]\n if (isVariable(val)) {\n style[skey] = val.toString()\n }\n if (stylePropsTransform[skey]) {\n delete style[skey]\n mergeTransform(style, skey, val)\n }\n }\n res = [...res, ...getAtomicStyle(style, pseudo, options)]\n }\n\n return res\n}\n\nconst generateAtomicStyles = (style: ViewStyle) => {\n return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style))) as {\n [key: string]: StyleObject\n }\n}\n\nfunction getAtomicStyle(\n style: ViewStyle,\n pseudo: { name: string; priority: number } | undefined,\n options: AtomicStyleOptions\n): StyleObject[] {\n if (style == null || typeof style !== 'object') {\n throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n }\n\n // why is this diff from react-native-web!? need to figure out\n for (const key in borderDefaults) {\n if (key in style) {\n style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'\n }\n }\n\n let atomicStyles: { [key: string]: StyleObject & { transformProperty?: string } } = {}\n\n if (options.splitTransforms && style.transform) {\n let { transform, ...rest } = style\n Object.assign(atomicStyles, generateAtomicStyles(rest))\n for (const t of transform) {\n const tKey = Object.keys(t)[0]\n const transformProperty = invertMapTransformKeys[tKey] || tKey\n const out = generateAtomicStyles({ transform: [t] })\n const key = Object.keys(out)[0]\n atomicStyles[key] = {\n ...out[key],\n transformProperty,\n }\n }\n } else {\n // TODO we can do this all in one loop likely inside getSplitStyles in existing loop and avoid O(n^3)...\n atomicStyles = generateAtomicStyles(style)\n }\n\n // TODO ... and then also avoid this loop! n^4\n return Object.keys(atomicStyles).map((key) => {\n const val = atomicStyles[key]\n // r-transform-1ns13n\n const [_, ogProperty, hash] = val.identifier.split('-')\n // pseudos have a `--` to be easier to find with concatClassNames\n const psuedoPrefix = pseudo ? `0${pseudo.name}-` : ''\n const identifier = `_${ogProperty}-${psuedoPrefix}${hash}`\n const className = `.${identifier}`\n const rules = val.rules.map((rule) => {\n if (pseudo) {\n const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n let res = rule\n .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)\n .replace('{', `:${pseudo.name}{`)\n\n if (pseudo.name === 'hover') {\n // hover styles need to be conditional\n // perhaps this can be generalized but for now lets just shortcut\n // and hardcode for hover styles, if we need to later we can\n // WEIRD SYNTAX, SEE:\n // https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n res = `@media not all and (hover: none) { ${res} }`\n }\n return res\n }\n return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')\n })\n\n const result: StyleObject = {\n property: val.transformProperty || val.property,\n value: val.value,\n identifier,\n className,\n rules,\n }\n\n return result\n })\n}\n\nconst importantRegex = /\\!important*/g\n\nconst borderDefaults = {\n borderWidth: 'borderStyle',\n borderBottomWidth: 'borderBottomStyle',\n borderTopWidth: 'borderTopStyle',\n borderLeftWidth: 'borderLeftStyle',\n borderRightWidth: 'borderRightStyle',\n}\n\n// *0 order matches to *1\nexport const pseudos = {\n hoverStyle: {\n name: 'hover',\n priority: 1,\n },\n pressStyle: {\n name: 'active',\n priority: 2,\n },\n focusStyle: {\n name: 'focus',\n priority: 3,\n },\n}\n\nconst pseudosOrdered = Object.values(pseudos)\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAKO;AAGP,iBAAoB;AACpB,4BAA2B;AAiBpB,yBAAyB,UAAgC,UAA8B,CAAC,GAAG;AAChG,QAAwD,eAAhD,cAAY,YAAY,eAAwB,IAAT,iBAAS,IAAT,CAAvC,cAAY,cAAY;AAChC,MAAI,MAAqB,CAAC;AAG1B,aAAW,CAAC,OAAO,UAAU,CAAC,YAAY,YAAY,YAAY,IAAI,EAAE,QAAQ,GAAG;AACjF,QAAI,CAAC,SAAS,CAAC,OAAO,KAAK,KAAK,EAAE,QAAQ;AACxC;AAAA,IACF;AACA,UAAM,SAAS,eAAe;AAC9B,eAAW,QAAQ,OAAO;AACxB,YAAM,MAAM,MAAM;AAClB,UAAI,sCAAW,GAAG,GAAG;AACnB,cAAM,QAAQ,IAAI,SAAS;AAAA,MAC7B;AACA,UAAI,mCAAoB,OAAO;AAC7B,eAAO,MAAM;AACb,2CAAe,OAAO,MAAM,GAAG;AAAA,MACjC;AAAA,IACF;AACA,UAAM,CAAC,GAAG,KAAK,GAAG,eAAe,OAAO,QAAQ,OAAO,CAAC;AAAA,EAC1D;AAEA,SAAO;AACT;AAxBgB;AA0BhB,MAAM,uBAAuB,wBAAC,UAAqB;AACjD,SAAO,eAAI,OAAO,eAAI,uBAAuB,eAAI,oBAAoB,KAAK,CAAC,CAAC;AAG9E,GAJ6B;AAM7B,wBACE,OACA,QACA,SACe;AACf,MAAI,SAAS,QAAQ,OAAO,UAAU,UAAU;AAC9C,UAAM,IAAI,MAAM,sBAAsB,OAAO,WAAW,OAAO;AAAA,EACjE;AAGA,aAAW,OAAO,gBAAgB;AAChC,QAAI,OAAO,OAAO;AAChB,YAAM,eAAe,QAAQ,MAAM,eAAe,SAAS;AAAA,IAC7D;AAAA,EACF;AAEA,MAAI,eAAgF,CAAC;AAErF,MAAI,QAAQ,mBAAmB,MAAM,WAAW;AAC9C,QAA6B,YAAvB,gBAAuB,IAAT,iBAAS,IAAT,CAAd;AACN,WAAO,OAAO,cAAc,qBAAqB,IAAI,CAAC;AACtD,eAAW,KAAK,WAAW;AACzB,YAAM,OAAO,OAAO,KAAK,CAAC,EAAE;AAC5B,YAAM,oBAAoB,sCAAuB,SAAS;AAC1D,YAAM,MAAM,qBAAqB,EAAE,WAAW,CAAC,CAAC,EAAE,CAAC;AACnD,YAAM,MAAM,OAAO,KAAK,GAAG,EAAE;AAC7B,mBAAa,OAAO,iCACf,IAAI,OADW;AAAA,QAElB;AAAA,MACF;AAAA,
|
|
4
|
+
"sourcesContent": ["import {\n StyleObject,\n invertMapTransformKeys,\n mergeTransform,\n stylePropsTransform,\n} from '@tamagui/helpers'\nimport { ViewStyle } from 'react-native'\n\nimport { rnw } from '../constants/rnw'\nimport { isVariable } from '../createVariable'\n\n// NOTE: going to refactor and merge getSplitStyles + getAtomicStyles into one\n// before i can do that need to not rely on rnw for generateAtomicStyles\n// will change that to not be external at all and just logically do it in the\n// merged getSplitStyles/getAtomicStyles file in one loop.\n\nexport type ViewStyleWithPseudos = ViewStyle & {\n hoverStyle?: ViewStyle\n pressStyle?: ViewStyle\n focusStyle?: ViewStyle\n}\n\ntype AtomicStyleOptions = {\n splitTransforms?: boolean\n}\n\nexport function getStylesAtomic(stylesIn: ViewStyleWithPseudos, options: AtomicStyleOptions = {}) {\n const { hoverStyle, pressStyle, focusStyle, ...base } = stylesIn\n let res: StyleObject[] = []\n\n // *1 order matched to *0\n for (const [index, style] of [hoverStyle, pressStyle, focusStyle, base].entries()) {\n if (!style || !Object.keys(style).length) {\n continue\n }\n const pseudo = pseudosOrdered[index]\n for (const skey in style) {\n const val = style[skey]\n if (isVariable(val)) {\n style[skey] = val.toString()\n }\n if (stylePropsTransform[skey]) {\n delete style[skey]\n mergeTransform(style, skey, val)\n }\n }\n res = [...res, ...getAtomicStyle(style, pseudo, options)]\n }\n\n return res\n}\n\nconst generateAtomicStyles = (style: ViewStyle) => {\n return rnw.atomic(rnw.createCompileableStyle(rnw.createReactDOMStyle(style))) as {\n [key: string]: StyleObject\n }\n}\n\nfunction getAtomicStyle(\n style: ViewStyle,\n pseudo: { name: string; priority: number } | undefined,\n options: AtomicStyleOptions\n): StyleObject[] {\n if (style == null || typeof style !== 'object') {\n throw new Error(`Wrong style type: \"${typeof style}\": ${style}`)\n }\n\n // why is this diff from react-native-web!? need to figure out\n for (const key in borderDefaults) {\n if (key in style) {\n style[borderDefaults[key]] = style[borderDefaults[key]] ?? 'solid'\n }\n }\n\n let atomicStyles: { [key: string]: StyleObject & { transformProperty?: string } } = {}\n\n if (options.splitTransforms && style.transform) {\n let { transform, ...rest } = style\n Object.assign(atomicStyles, generateAtomicStyles(rest))\n for (const t of transform) {\n const tKey = Object.keys(t)[0]\n const transformProperty = invertMapTransformKeys[tKey] || tKey\n const out = generateAtomicStyles({ transform: [t] })\n const key = Object.keys(out)[0]\n atomicStyles[key] = {\n ...out[key],\n transformProperty,\n }\n console.log('got', JSON.stringify({ t, tKey, out, key, atomicStyles }, null, 2))\n }\n } else {\n // TODO we can do this all in one loop likely inside getSplitStyles in existing loop and avoid O(n^3)...\n atomicStyles = generateAtomicStyles(style)\n }\n\n // TODO ... and then also avoid this loop! n^4\n return Object.keys(atomicStyles).map((key) => {\n const val = atomicStyles[key]\n // r-transform-1ns13n\n const [_, ogProperty, hash] = val.identifier.split('-')\n // pseudos have a `--` to be easier to find with concatClassNames\n const psuedoPrefix = pseudo ? `0${pseudo.name}-` : ''\n const identifier = `_${ogProperty}-${psuedoPrefix}${hash}`\n const className = `.${identifier}`\n const rules = val.rules.map((rule) => {\n if (pseudo) {\n const psuedoPrefixSelect = [...Array(pseudo.priority)].map(() => ':root').join('') + ' '\n let res = rule\n .replace(`.${val.identifier}`, `${psuedoPrefixSelect} ${className}`)\n .replace('{', `:${pseudo.name}{`)\n\n if (pseudo.name === 'hover') {\n // hover styles need to be conditional\n // perhaps this can be generalized but for now lets just shortcut\n // and hardcode for hover styles, if we need to later we can\n // WEIRD SYNTAX, SEE:\n // https://stackoverflow.com/questions/40532204/media-query-for-devices-supporting-hover\n res = `@media not all and (hover: none) { ${res} }`\n }\n return res\n }\n return rule.replace(`.${val.identifier}`, className).replace(importantRegex, '')\n })\n\n const result: StyleObject = {\n property: val.transformProperty || val.property,\n value: val.value,\n identifier,\n className,\n rules,\n }\n\n return result\n })\n}\n\nconst importantRegex = /\\!important*/g\n\nconst borderDefaults = {\n borderWidth: 'borderStyle',\n borderBottomWidth: 'borderBottomStyle',\n borderTopWidth: 'borderTopStyle',\n borderLeftWidth: 'borderLeftStyle',\n borderRightWidth: 'borderRightStyle',\n}\n\n// *0 order matches to *1\nexport const pseudos = {\n hoverStyle: {\n name: 'hover',\n priority: 1,\n },\n pressStyle: {\n name: 'active',\n priority: 2,\n },\n focusStyle: {\n name: 'focus',\n priority: 3,\n },\n}\n\nconst pseudosOrdered = Object.values(pseudos)\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -45,8 +45,9 @@ function addTransform(identifier, rule) {
|
|
|
45
45
|
}
|
|
46
46
|
__name(addTransform, "addTransform");
|
|
47
47
|
let hasInsertedSinceUpdate = true;
|
|
48
|
+
const isClient = typeof document !== "undefined";
|
|
48
49
|
function updateInserted() {
|
|
49
|
-
if (
|
|
50
|
+
if (!isClient) {
|
|
50
51
|
return;
|
|
51
52
|
}
|
|
52
53
|
if (!hasInsertedSinceUpdate) {
|
|
@@ -87,6 +88,9 @@ function insertStyleRule(identifier, rule) {
|
|
|
87
88
|
return;
|
|
88
89
|
}
|
|
89
90
|
hasInsertedSinceUpdate = true;
|
|
91
|
+
if (identifier === "_transform-1abwpjw") {
|
|
92
|
+
console.trace("inserting", identifier, rule);
|
|
93
|
+
}
|
|
90
94
|
insertedSelectors[identifier] = rule;
|
|
91
95
|
allSelectors[identifier] = process.env.NODE_ENV === "development" ? rule : true;
|
|
92
96
|
if (identifier.startsWith("_transform")) {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/helpers/insertStyleRule.tsx"],
|
|
4
|
-
"sourcesContent": ["// this needs to check if its inserted already? 99% of the time it is\n// this should avoid re-inserts, but need to test the perf trade-offs\n// i tested with the site itself and the initial insert was trivial\n\nconst allSelectors = {}\nconst insertedSelectors = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getInsertedRules = () => Object.values(insertedSelectors)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, rule: string) {\n const s = rule.indexOf('transform:')\n if (s === -1) {\n console.error(`not a transform ${identifier} ${rule}`)\n return\n }\n const startI = s + 'transform:'.length\n const endI = rule.indexOf(';')\n const value = rule.slice(startI, endI)\n insertedTransforms[identifier] = value\n}\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n// 1. debugging at dev time\n// 2. avoid duplicate insert styles at runtime\n// 3. used now for merging transforms atomically\nlet hasInsertedSinceUpdate = true\nexport function updateInserted() {\n if (
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,MAAM,eAAe,CAAC;AACtB,MAAM,oBAAoB,CAAC;AACpB,MAAM,qBAAqB,CAAC;AAE5B,MAAM,kBAAkB,6BAAM,cAAN;AACxB,MAAM,mBAAmB,6BAAM,OAAO,OAAO,iBAAiB,GAArC;AACzB,MAAM,mBAAmB,6BAAM,oBAAN;AAGhC,sBAAsB,YAAoB,MAAc;AACtD,QAAM,IAAI,KAAK,QAAQ,YAAY;AACnC,MAAI,MAAM,IAAI;AACZ,YAAQ,MAAM,mBAAmB,cAAc,MAAM;AACrD;AAAA,EACF;AACA,QAAM,SAAS,IAAI,aAAa;AAChC,QAAM,OAAO,KAAK,QAAQ,GAAG;AAC7B,QAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI;AACrC,qBAAmB,cAAc;AACnC;AAVS;AAkBT,IAAI,yBAAyB;
|
|
4
|
+
"sourcesContent": ["// this needs to check if its inserted already? 99% of the time it is\n// this should avoid re-inserts, but need to test the perf trade-offs\n// i tested with the site itself and the initial insert was trivial\n\nconst allSelectors = {}\nconst insertedSelectors = {}\nexport const insertedTransforms = {}\n\nexport const getAllSelectors = () => allSelectors\nexport const getInsertedRules = () => Object.values(insertedSelectors)\nexport const getAllTransforms = () => insertedTransforms\n\n// keep transforms in map for merging later\nfunction addTransform(identifier: string, rule: string) {\n const s = rule.indexOf('transform:')\n if (s === -1) {\n console.error(`not a transform ${identifier} ${rule}`)\n return\n }\n const startI = s + 'transform:'.length\n const endI = rule.indexOf(';')\n const value = rule.slice(startI, endI)\n insertedTransforms[identifier] = value\n}\n\n// gets existing ones (client side)\n// takes ~0.1ms for a fairly large page\n// used now for three things:\n// 1. debugging at dev time\n// 2. avoid duplicate insert styles at runtime\n// 3. used now for merging transforms atomically\nlet hasInsertedSinceUpdate = true\nconst isClient = typeof document !== 'undefined'\nexport function updateInserted() {\n if (!isClient) {\n return\n }\n if (!hasInsertedSinceUpdate) {\n console.warn('hasnt inserted since')\n return\n }\n const sheets = document.styleSheets\n if (!sheets) return\n for (let i = 0; i < sheets.length; i++) {\n const rules = sheets[i].cssRules\n const firstRule = rules[0]\n if (!(firstRule instanceof CSSStyleRule)) continue\n const firstSelector = firstRule.selectorText\n if (!firstSelector) continue\n if (firstSelector === ':root' || firstSelector.startsWith('._')) {\n for (let i = 0; i < rules.length; i++) {\n const rule = rules.item(i)\n if (!(rule instanceof CSSStyleRule)) continue\n const identifier = rule.selectorText.slice(1)\n allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rule.cssText : true\n if (identifier.startsWith('_transform')) {\n addTransform(identifier, rule.cssText)\n }\n }\n }\n }\n hasInsertedSinceUpdate = false\n}\n\nupdateInserted()\n\nconst newRulesStyleTag =\n typeof document !== 'undefined'\n ? document.head.appendChild(document.createElement('style'))\n : null\n\nexport function insertStyleRule(identifier: string, rule: string) {\n if (allSelectors[identifier]) {\n return\n }\n hasInsertedSinceUpdate = true\n if (identifier === '_transform-1abwpjw') {\n console.trace('inserting', identifier, rule)\n }\n insertedSelectors[identifier] = rule\n allSelectors[identifier] = process.env.NODE_ENV === 'development' ? rule : true\n if (identifier.startsWith('_transform')) {\n addTransform(identifier, rule)\n }\n if (!newRulesStyleTag) {\n return\n }\n const sheet = newRulesStyleTag.sheet!\n sheet.insertRule(rule, sheet.cssRules.length)\n return identifier\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIA,MAAM,eAAe,CAAC;AACtB,MAAM,oBAAoB,CAAC;AACpB,MAAM,qBAAqB,CAAC;AAE5B,MAAM,kBAAkB,6BAAM,cAAN;AACxB,MAAM,mBAAmB,6BAAM,OAAO,OAAO,iBAAiB,GAArC;AACzB,MAAM,mBAAmB,6BAAM,oBAAN;AAGhC,sBAAsB,YAAoB,MAAc;AACtD,QAAM,IAAI,KAAK,QAAQ,YAAY;AACnC,MAAI,MAAM,IAAI;AACZ,YAAQ,MAAM,mBAAmB,cAAc,MAAM;AACrD;AAAA,EACF;AACA,QAAM,SAAS,IAAI,aAAa;AAChC,QAAM,OAAO,KAAK,QAAQ,GAAG;AAC7B,QAAM,QAAQ,KAAK,MAAM,QAAQ,IAAI;AACrC,qBAAmB,cAAc;AACnC;AAVS;AAkBT,IAAI,yBAAyB;AAC7B,MAAM,WAAW,OAAO,aAAa;AAC9B,0BAA0B;AAC/B,MAAI,CAAC,UAAU;AACb;AAAA,EACF;AACA,MAAI,CAAC,wBAAwB;AAC3B,YAAQ,KAAK,sBAAsB;AACnC;AAAA,EACF;AACA,QAAM,SAAS,SAAS;AACxB,MAAI,CAAC;AAAQ;AACb,WAAS,IAAI,GAAG,IAAI,OAAO,QAAQ,KAAK;AACtC,UAAM,QAAQ,OAAO,GAAG;AACxB,UAAM,YAAY,MAAM;AACxB,QAAI,CAAE,sBAAqB;AAAe;AAC1C,UAAM,gBAAgB,UAAU;AAChC,QAAI,CAAC;AAAe;AACpB,QAAI,kBAAkB,WAAW,cAAc,WAAW,IAAI,GAAG;AAC/D,eAAS,KAAI,GAAG,KAAI,MAAM,QAAQ,MAAK;AACrC,cAAM,OAAO,MAAM,KAAK,EAAC;AACzB,YAAI,CAAE,iBAAgB;AAAe;AACrC,cAAM,aAAa,KAAK,aAAa,MAAM,CAAC;AAC5C,qBAAa,cAAc,QAAQ,IAAI,aAAa,gBAAgB,KAAK,UAAU;AACnF,YAAI,WAAW,WAAW,YAAY,GAAG;AACvC,uBAAa,YAAY,KAAK,OAAO;AAAA,QACvC;AAAA,MACF;AAAA,IACF;AAAA,EACF;AACA,2BAAyB;AAC3B;AA7BgB;AA+BhB,eAAe;AAEf,MAAM,mBACJ,OAAO,aAAa,cAChB,SAAS,KAAK,YAAY,SAAS,cAAc,OAAO,CAAC,IACzD;AAEC,yBAAyB,YAAoB,MAAc;AAChE,MAAI,aAAa,aAAa;AAC5B;AAAA,EACF;AACA,2BAAyB;AACzB,MAAI,eAAe,sBAAsB;AACvC,YAAQ,MAAM,aAAa,YAAY,IAAI;AAAA,EAC7C;AACA,oBAAkB,cAAc;AAChC,eAAa,cAAc,QAAQ,IAAI,aAAa,gBAAgB,OAAO;AAC3E,MAAI,WAAW,WAAW,YAAY,GAAG;AACvC,iBAAa,YAAY,IAAI;AAAA,EAC/B;AACA,MAAI,CAAC,kBAAkB;AACrB;AAAA,EACF;AACA,QAAM,QAAQ,iBAAiB;AAC/B,QAAM,WAAW,MAAM,MAAM,SAAS,MAAM;AAC5C,SAAO;AACT;AAnBgB;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -55,6 +55,7 @@ __export(useFeatures_exports, {
|
|
|
55
55
|
module.exports = __toCommonJS(useFeatures_exports);
|
|
56
56
|
var import_react = __toESM(require("react"));
|
|
57
57
|
var import_platform = require("../constants/platform");
|
|
58
|
+
var import_getSplitStyles = require("../helpers/getSplitStyles");
|
|
58
59
|
var import_useMedia = require("./useMedia");
|
|
59
60
|
const createDefinition = /* @__PURE__ */ __name(({
|
|
60
61
|
Component,
|
|
@@ -93,33 +94,113 @@ function loadAnimationFeature() {
|
|
|
93
94
|
return createDefinition({
|
|
94
95
|
Component: (_a) => {
|
|
95
96
|
var _b = _a, { _utils } = _b, props = __objRest(_b, ["_utils"]);
|
|
96
|
-
const {
|
|
97
|
+
const {
|
|
98
|
+
state,
|
|
99
|
+
useAnimations,
|
|
100
|
+
pseudos,
|
|
101
|
+
style: inStyle,
|
|
102
|
+
setStateShallow,
|
|
103
|
+
staticConfig,
|
|
104
|
+
theme,
|
|
105
|
+
onDidAnimate
|
|
106
|
+
} = _utils;
|
|
97
107
|
if (!useAnimations) {
|
|
98
108
|
console.error("no useAnimations hook provided");
|
|
99
109
|
return null;
|
|
100
110
|
}
|
|
101
111
|
const propsWithAnimation = props;
|
|
102
|
-
const styleKey = JSON.stringify(style);
|
|
103
112
|
const res = useAnimations(propsWithAnimation, {
|
|
104
|
-
styleKey,
|
|
105
|
-
style: style || {},
|
|
106
113
|
state,
|
|
107
114
|
pseudos,
|
|
108
|
-
|
|
109
|
-
|
|
115
|
+
onDidAnimate,
|
|
116
|
+
staticConfig,
|
|
117
|
+
getStyle({ isEntering, exitVariant, enterVariant } = {}) {
|
|
118
|
+
var _a2, _b2, _c, _d;
|
|
119
|
+
const style = inStyle || {};
|
|
120
|
+
const enterStyle = isEntering === true || state.mounted === false ? enterVariant && ((_a2 = staticConfig.variants) == null ? void 0 : _a2[enterVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)((_b2 = staticConfig.variants) == null ? void 0 : _b2[enterVariant]["true"], staticConfig, theme, props, state) || pseudos.enterStyle : pseudos.enterStyle : null;
|
|
121
|
+
const exitStyle = isEntering === false ? exitVariant && ((_c = staticConfig.variants) == null ? void 0 : _c[exitVariant]["true"]) ? (0, import_getSplitStyles.getSubStyle)((_d = staticConfig.variants) == null ? void 0 : _d[exitVariant]["true"], staticConfig, theme, props, state) || pseudos.exitStyle : pseudos.exitStyle : null;
|
|
122
|
+
ensureBaseHasDefaults(style, enterStyle, pseudos.hoverStyle, pseudos.focusStyle, pseudos.pressStyle, pseudos.pressStyle);
|
|
123
|
+
enterStyle && merge(style, enterStyle);
|
|
124
|
+
state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle);
|
|
125
|
+
state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle);
|
|
126
|
+
state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle);
|
|
127
|
+
exitStyle && merge(style, exitStyle);
|
|
128
|
+
return style;
|
|
110
129
|
}
|
|
111
130
|
});
|
|
112
131
|
(0, import_platform.useIsomorphicLayoutEffect)(() => {
|
|
113
132
|
setStateShallow({
|
|
114
133
|
animation: res
|
|
115
134
|
});
|
|
116
|
-
}, [
|
|
135
|
+
}, [res]);
|
|
117
136
|
return null;
|
|
118
137
|
},
|
|
119
138
|
propNames: ["animation"]
|
|
120
139
|
});
|
|
121
140
|
}
|
|
122
141
|
__name(loadAnimationFeature, "loadAnimationFeature");
|
|
142
|
+
const defaults = {
|
|
143
|
+
left: 0,
|
|
144
|
+
right: 0,
|
|
145
|
+
top: 0,
|
|
146
|
+
bottom: 0,
|
|
147
|
+
opacity: 1,
|
|
148
|
+
translateX: 0,
|
|
149
|
+
translateY: 0,
|
|
150
|
+
skew: 0,
|
|
151
|
+
skewX: 0,
|
|
152
|
+
skewY: 0,
|
|
153
|
+
scale: 1,
|
|
154
|
+
rotate: "0deg",
|
|
155
|
+
rotateY: "0deg",
|
|
156
|
+
rotateX: "0deg"
|
|
157
|
+
};
|
|
158
|
+
function ensureBaseHasDefaults(base, ...pseudos) {
|
|
159
|
+
for (const pseudo of pseudos) {
|
|
160
|
+
if (!pseudo)
|
|
161
|
+
continue;
|
|
162
|
+
for (const key in pseudo) {
|
|
163
|
+
const val = pseudo[key];
|
|
164
|
+
if (key === "transform") {
|
|
165
|
+
for (const t of val) {
|
|
166
|
+
const tkey = Object.keys(t)[0];
|
|
167
|
+
const defaultVal = defaults[tkey];
|
|
168
|
+
const tDefaultVal = { [tkey]: defaultVal };
|
|
169
|
+
if (!base.transform) {
|
|
170
|
+
base.transform = [tDefaultVal];
|
|
171
|
+
} else {
|
|
172
|
+
if (!base.transform.find((x) => x[tkey])) {
|
|
173
|
+
base.transform.push(tDefaultVal);
|
|
174
|
+
}
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
} else {
|
|
178
|
+
if (!(key in base)) {
|
|
179
|
+
base[key] = defaults[key];
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
}
|
|
183
|
+
}
|
|
184
|
+
}
|
|
185
|
+
__name(ensureBaseHasDefaults, "ensureBaseHasDefaults");
|
|
186
|
+
function merge(base, next) {
|
|
187
|
+
if (!next.transform || !base.transform) {
|
|
188
|
+
Object.assign(base, next);
|
|
189
|
+
return;
|
|
190
|
+
}
|
|
191
|
+
const _a = next, { transform } = _a, rest = __objRest(_a, ["transform"]);
|
|
192
|
+
Object.assign(base, rest);
|
|
193
|
+
for (const t of transform) {
|
|
194
|
+
const key = Object.keys(t)[0];
|
|
195
|
+
const existing = base.transform.find((x) => key in x);
|
|
196
|
+
if (existing) {
|
|
197
|
+
existing[key] = t[key];
|
|
198
|
+
} else {
|
|
199
|
+
base.transform.push(t);
|
|
200
|
+
}
|
|
201
|
+
}
|
|
202
|
+
}
|
|
203
|
+
__name(merge, "merge");
|
|
123
204
|
function loadMediaQueryFeature() {
|
|
124
205
|
const mediaPropNames = Object.keys(import_useMedia.mediaState);
|
|
125
206
|
return createDefinition({
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useFeatures.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport {
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAGlB,sBAAiD;
|
|
4
|
+
"sourcesContent": ["import React from 'react'\nimport { ViewStyle } from 'react-native'\n\nimport { isWeb, useIsomorphicLayoutEffect } from '../constants/platform'\nimport { getSubStyle } from '../helpers/getSplitStyles'\nimport { PseudoStyles, SplitStyleState } from '../types'\nimport {\n StaticConfig,\n StaticConfigParsed,\n TamaguiComponentState,\n UseAnimationHook,\n UseAnimationProps,\n} from '../types'\nimport { addMediaQueryListener, mediaState, removeMediaQueryListener } from './useMedia'\n\ntype FeatureDefinition = {\n isEnabled: (props: any) => boolean\n Component: any\n}\n\ntype FeatureUtils = {\n forceUpdate: Function\n state: SplitStyleState\n setStateShallow: (next: Partial<TamaguiComponentState>) => void\n useAnimations?: UseAnimationHook\n pseudos: PseudoStyles\n style: ViewStyle | null | undefined\n staticConfig: StaticConfigParsed\n theme: any\n onDidAnimate?: () => void\n}\n\nconst createDefinition = ({\n Component,\n propNames,\n}: {\n Component: (props: { _utils: FeatureUtils; [key: string]: any }) => void\n propNames: string[]\n}): FeatureDefinition => ({\n isEnabled: (props: any) => propNames.some((name) => !!props[name]),\n Component,\n})\n\nlet featureDefinitions: Record<string, FeatureDefinition> | null = null\n\nexport const useFeatures = (props: any, utils?: FeatureUtils) => {\n if (!featureDefinitions) {\n featureDefinitions = loadFeatures()\n }\n const features: JSX.Element[] = []\n for (const name in featureDefinitions) {\n const { isEnabled, Component } = featureDefinitions[name]\n if (isEnabled(props) && Component) {\n features.push(<Component key={name} {...props} _utils={utils} />)\n }\n }\n return features\n}\n\nfunction loadFeatures(): Record<string, FeatureDefinition> {\n return {\n // loads animations and sets state with the results\n animation: loadAnimationFeature(),\n\n // will update the parent whenever media query changes\n // no need on web, media queries are inserted and run in css\n ...(!isWeb && {\n mediaQuery: loadMediaQueryFeature(),\n }),\n }\n}\n\nfunction loadAnimationFeature() {\n return createDefinition({\n Component: ({ _utils, ...props }) => {\n const {\n state,\n useAnimations,\n pseudos,\n style: inStyle,\n setStateShallow,\n staticConfig,\n theme,\n onDidAnimate,\n } = _utils\n\n if (!useAnimations) {\n console.error('no useAnimations hook provided')\n return null\n }\n\n // const animatedStyleIn =\n\n // we always have .animation set\n const propsWithAnimation = props as UseAnimationProps\n\n const res = useAnimations(propsWithAnimation, {\n state,\n pseudos,\n onDidAnimate,\n staticConfig,\n getStyle({ isEntering, exitVariant, enterVariant } = {}) {\n // we have to merge such that transforms keys all exist\n const style = inStyle || {}\n\n const enterStyle =\n isEntering === true || state.mounted === false\n ? enterVariant && staticConfig.variants?.[enterVariant]['true']\n ? getSubStyle(\n staticConfig.variants?.[enterVariant]['true'],\n staticConfig,\n theme,\n props,\n state\n ) || pseudos.enterStyle\n : null || pseudos.enterStyle\n : null\n\n const exitStyle =\n isEntering === false\n ? exitVariant && staticConfig.variants?.[exitVariant]['true']\n ? getSubStyle(\n staticConfig.variants?.[exitVariant]['true'],\n staticConfig,\n theme,\n props,\n state\n ) || pseudos.exitStyle\n : null || pseudos.exitStyle\n : null\n\n // if you have hoverStyle={{ scale: 1.1 }} and don't have scale set on the base style\n // no animation will run! this is really confusing. this will look at all variants,\n // and fill in base styles if they don't exist. eg:\n // input:\n // base: {}\n // hoverStyle: { scale: 2 }\n // enterStyle: { x: 100 }\n // output:\n // base: { x: 0, scale: 1 }\n ensureBaseHasDefaults(\n style,\n enterStyle,\n pseudos.hoverStyle,\n pseudos.focusStyle,\n pseudos.pressStyle,\n pseudos.pressStyle\n )\n\n enterStyle && merge(style, enterStyle)\n state.hover && pseudos.hoverStyle && merge(style, pseudos.hoverStyle)\n state.focus && pseudos.focusStyle && merge(style, pseudos.focusStyle)\n state.press && pseudos.pressStyle && merge(style, pseudos.pressStyle)\n exitStyle && merge(style, exitStyle)\n\n return style\n },\n //, delay\n })\n\n useIsomorphicLayoutEffect(() => {\n setStateShallow({\n animation: res,\n })\n }, [res])\n\n return null\n },\n propNames: ['animation'],\n })\n}\n\nconst defaults = {\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n opacity: 1,\n translateX: 0,\n translateY: 0,\n skew: 0,\n skewX: 0,\n skewY: 0,\n scale: 1,\n rotate: '0deg',\n rotateY: '0deg',\n rotateX: '0deg',\n}\n\nfunction ensureBaseHasDefaults(base: ViewStyle, ...pseudos: (ViewStyle | null | undefined)[]) {\n for (const pseudo of pseudos) {\n if (!pseudo) continue\n for (const key in pseudo) {\n const val = pseudo[key]\n if (key === 'transform') {\n for (const t of val) {\n const tkey = Object.keys(t)[0]\n const defaultVal = defaults[tkey]\n const tDefaultVal = { [tkey]: defaultVal } as any\n if (!base.transform) {\n base.transform = [tDefaultVal]\n } else {\n if (!base.transform.find((x) => x[tkey])) {\n base.transform.push(tDefaultVal)\n }\n }\n }\n } else {\n if (!(key in base)) {\n base[key] = defaults[key]\n }\n }\n }\n }\n}\n\nfunction merge(base: ViewStyle, next: ViewStyle) {\n if (!next.transform || !base.transform) {\n Object.assign(base, next)\n return\n }\n const { transform, ...rest } = next\n Object.assign(base, rest)\n for (const t of transform) {\n const key = Object.keys(t)[0]\n const existing = base.transform.find((x) => key in x)\n if (existing) {\n existing[key] = t[key]\n } else {\n base.transform.push(t)\n }\n }\n}\n\nfunction loadMediaQueryFeature() {\n const mediaPropNames = Object.keys(mediaState)\n\n return createDefinition({\n Component: (props: any) => {\n const keys = mediaPropNames.flatMap((x) => (x in props ? x.slice(1) : []))\n\n useIsomorphicLayoutEffect(() => {\n for (const key of keys) {\n addMediaQueryListener(key, props._utils.forceUpdate)\n }\n return () => {\n for (const key of keys) {\n removeMediaQueryListener(key, props._utils.forceUpdate)\n }\n }\n }, [keys.join(',')])\n\n return null\n },\n propNames: mediaPropNames,\n })\n}\n\n// TODO\n// measureLayout: createDefinition({\n// Component: (props) => {\n// console.log('measure', props)\n// return null\n// },\n// propNames: ['onLayout'],\n// }),\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -91,14 +91,14 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
|
|
|
91
91
|
return Reflect.has(theme, key);
|
|
92
92
|
},
|
|
93
93
|
get(_, key) {
|
|
94
|
-
if (!name || key === "__proto__") {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
return
|
|
94
|
+
if (!name || key === "__proto__" || typeof key === "symbol") {
|
|
95
|
+
if (key === GetThemeManager) {
|
|
96
|
+
if (!didChangeTheme) {
|
|
97
|
+
return null;
|
|
98
|
+
}
|
|
99
|
+
return themeManager;
|
|
100
100
|
}
|
|
101
|
-
return
|
|
101
|
+
return Reflect.get(_, key);
|
|
102
102
|
}
|
|
103
103
|
if (process.env.NODE_ENV === "development") {
|
|
104
104
|
if (key === "__state") {
|
|
@@ -115,11 +115,6 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
|
|
|
115
115
|
console.error("No themeManager");
|
|
116
116
|
return;
|
|
117
117
|
}
|
|
118
|
-
if (process.env.NODE_ENV === "development") {
|
|
119
|
-
if ((props == null ? void 0 : props["debug"]) === "verbose") {
|
|
120
|
-
console.log(" \xBB accessing theme val", key, __spreadValues({}, state.current));
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
118
|
if (typeof key === "string") {
|
|
124
119
|
if (key[0] === "$") {
|
|
125
120
|
key = key.slice(1);
|
|
@@ -128,12 +123,16 @@ const useTheme = /* @__PURE__ */ __name((themeName, componentName, props, forceU
|
|
|
128
123
|
if (val) {
|
|
129
124
|
if (state.current.isRendering) {
|
|
130
125
|
state.current.keys.add(key);
|
|
126
|
+
if (process.env.NODE_ENV === "development") {
|
|
127
|
+
if ((props == null ? void 0 : props["debug"]) === "verbose") {
|
|
128
|
+
console.log(" \xBB tracking theme key", key);
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
131
|
}
|
|
132
132
|
return val;
|
|
133
133
|
}
|
|
134
134
|
if (process.env.NODE_ENV === "development") {
|
|
135
|
-
console.
|
|
136
|
-
return null;
|
|
135
|
+
console.log(`No theme value "${String(key)}" in ${name}`);
|
|
137
136
|
}
|
|
138
137
|
}
|
|
139
138
|
return Reflect.get(_, key);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../src/hooks/useTheme.tsx"],
|
|
4
|
-
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\ntype 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?: any,\n forceUpdate?: any\n): ThemeObject => {\n const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.['debug'] === 'verbose') {\n console.log(' \u00BB useTheme', { themeName, componentName, name, className })\n }\n }\n\n const state = useRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\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 return useMemo(() => {\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('No theme', { themeName, theme, componentName, className })\n }\n return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n }\n return new Proxy(theme, {\n has(_, key) {\n if (typeof key === 'string') {\n if (key[0] === '$') {\n key = key.slice(1)\n }\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (!name || key === '__proto__'
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAA+B;AAC/B,mBAA8E;AAE9E,kBAA0B;AAC1B,sBAA0C;AAC1C,0BAA6B;AAC7B,0BAA6B;AAC7B,0BAAgE;AAEhE,yBAA4B;AAQrB,MAAM,WAAW,wBACtB,WACA,eACA,OACA,gBACgB;AAChB,QAAM,EAAE,MAAM,OAAO,QAAQ,cAAc,WAAW,mBAAmB,qBACvE,WACA,eACA,OACA,WACF;AAEA,MAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,QAAI,gCAAQ,cAAa,WAAW;AAClC,cAAQ,IAAI,mBAAgB,EAAE,WAAW,eAAe,MAAM,UAAU,CAAC;AAAA,IAC3E;AAAA,EACF;AAEA,QAAM,QAAQ,yBAAO;AACrB,MAAI,CAAC,MAAM,SAAS;AAClB,UAAM,UAAU;AAAA,MACd,MAAM,CAAC;AAAA,MACP,MAAM,oBAAI,IAAI;AAAA,MACd,aAAa;AAAA,IACf;AAAA,EACF;AACA,QAAM,QAAQ,cAAc;AAG5B,iDAA0B,MAAM;AAC9B,UAAM,KAAK,MAAM;AACjB,OAAG,cAAc;AACjB,UAAM,MAAM,6CAAc,KAAK,IAAI,GAAG;AACtC,QAAI,CAAC,OAAO,CAAC,sCAAa,GAAG,MAAM,GAAG,GAAG;AACvC,mDAAc,MAAM,GAAG,MAAM,GAAG;AAAA,IAClC;AAAA,EACF,CAAC;AAED,SAAO,0BAAQ,MAAM;AACnB,QAAI,CAAC,OAAO;AACV,UAAI,QAAQ,IAAI,aAAa,eAAe;AAC1C,gBAAQ,KAAK,YAAY,EAAE,WAAW,OAAO,eAAe,UAAU,CAAC;AAAA,MACzE;AACA,aAAO,OAAO,2BAAU,EAAE,gBAAgB;AAAA,IAC5C;AACA,WAAO,IAAI,MAAM,OAAO;AAAA,MACtB,IAAI,GAAG,KAAK;AACV,YAAI,OAAO,QAAQ,UAAU;AAC3B,cAAI,IAAI,OAAO,KAAK;AAClB,kBAAM,IAAI,MAAM,CAAC;AAAA,UACnB;AAAA,QACF;AACA,eAAO,QAAQ,IAAI,OAAO,GAAG;AAAA,MAC/B;AAAA,MACA,IAAI,GAAG,KAAK;AACV,YAAI,CAAC,QAAQ,QAAQ,
|
|
4
|
+
"sourcesContent": ["import { useForceUpdate } from '@tamagui/use-force-update'\nimport React, { useContext, useLayoutEffect, useMemo, useRef, useState } from 'react'\n\nimport { getConfig } from '../conf'\nimport { useIsomorphicLayoutEffect } from '../constants/platform'\nimport { areEqualSets } from '../helpers/areEqualSets'\nimport { ThemeContext } from '../ThemeContext'\nimport { ThemeManager, ThemeManagerContext, emptyManager } from '../ThemeManager'\nimport { ThemeObject } from '../types'\nimport { useConstant } from './useConstant'\n\ntype 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?: any,\n forceUpdate?: any\n): ThemeObject => {\n const { name, theme, themes, themeManager, className, didChangeTheme } = useChangeThemeEffect(\n themeName,\n componentName,\n props,\n forceUpdate\n )\n\n if (process.env.NODE_ENV === 'development') {\n if (props?.['debug'] === 'verbose') {\n console.log(' \u00BB useTheme', { themeName, componentName, name, className })\n }\n }\n\n const state = useRef() as React.MutableRefObject<UseThemeState>\n if (!state.current) {\n state.current = {\n uuid: {},\n keys: new Set(),\n isRendering: true,\n }\n }\n state.current.isRendering = true\n\n // track usage\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 return useMemo(() => {\n if (!theme) {\n if (process.env.NODE_ENV === 'development') {\n console.warn('No theme', { themeName, theme, componentName, className })\n }\n return themes[getConfig().defaultTheme || 'light' || Object.keys(themes)[0]]\n }\n return new Proxy(theme, {\n has(_, key) {\n if (typeof key === 'string') {\n if (key[0] === '$') {\n key = key.slice(1)\n }\n }\n return Reflect.has(theme, key)\n },\n get(_, key) {\n if (!name || key === '__proto__' || typeof key === 'symbol') {\n // TODO make this pattern better\n if (key === GetThemeManager) {\n if (!didChangeTheme) {\n return null\n }\n // TODO\n // console.log('DID CHANGE THEME')\n return themeManager\n }\n return Reflect.get(_, key)\n }\n if (process.env.NODE_ENV === 'development') {\n if (key === '__state') {\n return state.current\n }\n }\n if (key === 'name') {\n return name\n }\n if (key === 'className') {\n return className\n }\n if (!themeManager) {\n console.error('No themeManager')\n return\n }\n if (typeof key === 'string') {\n // auto convert variables to plain\n if (key[0] === '$') {\n key = key.slice(1)\n }\n const val = themeManager.getValue(key)\n if (val) {\n if (state.current.isRendering) {\n state.current.keys.add(key)\n if (process.env.NODE_ENV === 'development') {\n if (props?.['debug'] === 'verbose') {\n console.log(' \u00BB tracking theme key', key)\n }\n }\n }\n return val\n }\n // react native debuger uses toJSON\n if (process.env.NODE_ENV === 'development') {\n console.log(`No theme value \"${String(key)}\" in ${name}`)\n }\n }\n return Reflect.get(_, key)\n },\n })\n }, [name, theme, className, didChangeTheme])\n}\n\nconst GetThemeManager = Symbol('GetThemeManager')\n\nexport const getThemeManagerIfChanged = (theme: any) => {\n return theme?.[GetThemeManager]\n}\n\nexport const useThemeName = (opts?: { parent?: true }) => {\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 useChangeThemeEffect = (\n name?: string | null,\n componentName?: string,\n props?: any,\n forceUpdateProp?: any\n) => {\n const debug = props && props['debug']\n const parentManager = useContext(ThemeManagerContext) || emptyManager\n const { themes } = useContext(ThemeContext)!\n const next = parentManager.getNextTheme({ name, componentName, themes }, props)\n const forceUpdate = forceUpdateProp || useForceUpdate()\n const themeManager = useConstant<ThemeManager | null>(() => {\n if (!next) {\n return null\n }\n return new ThemeManager(next.name, next.theme, parentManager)\n })\n\n if (typeof document !== 'undefined') {\n useLayoutEffect(() => {\n if (!themeManager) return\n if (next?.name) {\n themeManager.update(next)\n }\n return parentManager.onChangeTheme(() => {\n const next = parentManager.getNextTheme({ name, componentName, themes }, debug)\n if (!next) return\n if (themeManager.update(next)) {\n forceUpdate()\n }\n })\n }, [themes, name, componentName, debug, next?.name])\n }\n\n const didChangeTheme = next && parentManager && next.name !== parentManager.fullName\n\n return {\n ...(parentManager && {\n name: parentManager.name,\n theme: parentManager.theme,\n }),\n ...next,\n didChangeTheme,\n themes,\n themeManager,\n }\n}\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|