@tamagui/core
Advanced tools
Comparing version 1.0.0-alpha.28 to 1.0.0-alpha.29
@@ -73,4 +73,4 @@ var __create = Object.create; | ||
var import_usePressable = __toModule(require("./hooks/usePressable")); | ||
var import_useTheme = __toModule(require("./hooks/useTheme")); | ||
var import_TextAncestorContext = __toModule(require("./views/TextAncestorContext")); | ||
var import_ThemeManagerContext = __toModule(require("./views/ThemeManagerContext")); | ||
const mouseUps = new Set(); | ||
@@ -83,2 +83,20 @@ if (typeof document !== "undefined") { | ||
} | ||
const defaultComponentState = { | ||
hover: false, | ||
press: false, | ||
pressIn: false | ||
}; | ||
function createShallowUpdate(setter) { | ||
return (next) => { | ||
setter((prev) => { | ||
for (const key in next) { | ||
if (prev[key] !== next[key]) { | ||
return __spreadValues(__spreadValues({}, prev), next); | ||
} | ||
} | ||
return prev; | ||
}); | ||
}; | ||
} | ||
__name(createShallowUpdate, "createShallowUpdate"); | ||
function createComponent(configIn) { | ||
@@ -102,17 +120,5 @@ let staticConfig; | ||
const features = (0, import_useFeatures.useFeatures)(props, { forceUpdate }); | ||
const manager = (0, import_react.useContext)(import_ThemeManagerContext.ThemeManagerContext); | ||
const [state, set_] = (0, import_react.useState)(() => ({ | ||
hover: false, | ||
press: false, | ||
pressIn: false, | ||
theme: manager.name | ||
})); | ||
const set = /* @__PURE__ */ __name((next) => set_((prev) => { | ||
for (const key in next) { | ||
if (prev[key] !== next[key]) { | ||
return __spreadValues(__spreadValues({}, prev), next); | ||
} | ||
} | ||
return prev; | ||
}), "set"); | ||
const theme = (0, import_useTheme.useTheme)(); | ||
const [state, set_] = (0, import_react.useState)(defaultComponentState); | ||
const set = createShallowUpdate(set_); | ||
if (process.env.NODE_ENV === "development" && !isText && import_platform.isWeb) { | ||
@@ -127,3 +133,2 @@ import_react.Children.toArray(props.children).forEach((item) => { | ||
const hostRef = (0, import_react.useRef)(null); | ||
const theme = manager.theme || initialTheme; | ||
const { | ||
@@ -234,3 +239,2 @@ viewProps: viewPropsIn, | ||
} | ||
const isTracking = (0, import_react.useRef)(false); | ||
const internal = (0, import_react.useRef)(); | ||
@@ -244,14 +248,7 @@ if (!internal.current) { | ||
internal.current.isMounted = true; | ||
const dispose = manager == null ? void 0 : manager.onChangeTheme((name) => { | ||
if (isTracking.current) { | ||
set({ theme: name }); | ||
} | ||
}); | ||
return () => { | ||
dispose(); | ||
mouseUps.delete(unPress); | ||
isTracking.current = false; | ||
internal.current.isMounted = false; | ||
}; | ||
}, [manager]); | ||
}, []); | ||
const element = import_platform.isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component; | ||
@@ -258,0 +255,0 @@ const ReactView = !import_platform.isWeb ? import_react_native.View : element || (hasTextAncestor ? "span" : "div"); |
@@ -52,5 +52,5 @@ var __create = Object.create; | ||
var import_helpers = __toModule(require("@tamagui/helpers")); | ||
var import_platform = __toModule(require("./constants/platform")); | ||
var import_createVariable = __toModule(require("./createVariable")); | ||
var import_createTamaguiProvider = __toModule(require("./helpers/createTamaguiProvider")); | ||
var import_validate = __toModule(require("./helpers/validate")); | ||
var import_useMedia = __toModule(require("./hooks/useMedia")); | ||
@@ -72,6 +72,4 @@ let conf; | ||
function createTamagui(config) { | ||
if (process.env.NODE_ENV === "development") { | ||
if (!config["parsed"]) { | ||
(0, import_validate.validateConfig)(config); | ||
} | ||
if (config["parsed"]) { | ||
return config; | ||
} | ||
@@ -86,58 +84,58 @@ if (conf) { | ||
const themeConfig = (() => { | ||
var _a; | ||
let cssRules = []; | ||
let tokenRule = `:root {`; | ||
const varsByValue = new Map(); | ||
const addVar = /* @__PURE__ */ __name((v) => { | ||
varsByValue[v.val] = v; | ||
const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`; | ||
tokenRule += rule; | ||
}, "addVar"); | ||
for (const key in config.tokens) { | ||
for (const skey in config.tokens[key]) { | ||
const val = config.tokens[key][skey]; | ||
if (key === "font") { | ||
for (const fkey in val) { | ||
if (fkey === "family") { | ||
addVar(val[fkey]); | ||
} else { | ||
for (const fskey in val[fkey]) { | ||
addVar(val[fkey][fskey]); | ||
if (import_platform.isWeb) { | ||
let tokenRule = `:root {`; | ||
const addVar = /* @__PURE__ */ __name((v) => { | ||
varsByValue[v.val] = v; | ||
const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`; | ||
tokenRule += rule; | ||
}, "addVar"); | ||
for (const key in config.tokens) { | ||
for (const skey in config.tokens[key]) { | ||
const val = config.tokens[key][skey]; | ||
if (key === "font") { | ||
for (const fkey in val) { | ||
if (fkey === "family") { | ||
addVar(val[fkey]); | ||
} else { | ||
for (const fskey in val[fkey]) { | ||
addVar(val[fkey][fskey]); | ||
} | ||
} | ||
} | ||
} else { | ||
addVar(val); | ||
} | ||
} else { | ||
addVar(val); | ||
} | ||
} | ||
cssRules.push(`${tokenRule} | ||
}`); | ||
} | ||
cssRules.push(`${tokenRule} | ||
}`); | ||
for (const themeName in config.themes) { | ||
config.themes[themeName] = __spreadValues({}, config.themes[themeName]); | ||
const theme = config.themes[themeName]; | ||
const theme = __spreadValues({}, config.themes[themeName]); | ||
config.themes[themeName] = theme; | ||
let vars = ""; | ||
for (const themeKey in theme) { | ||
const val = theme[themeKey]; | ||
const getVariableCSS = /* @__PURE__ */ __name((inv) => { | ||
const v = varsByValue[inv] ?? inv; | ||
return (0, import_createVariable.isVariable)(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`; | ||
}, "getVariableCSS"); | ||
vars += getVariableCSS(val); | ||
if (!(0, import_createVariable.isVariable)(val)) { | ||
theme[themeKey] = (0, import_createVariable.createVariable)({ | ||
name: themeKey, | ||
val | ||
}); | ||
if (import_platform.isWeb) { | ||
const val = theme[themeKey]; | ||
const varName = val instanceof import_createVariable.Variable ? val.name : (_a = varsByValue[val]) == null ? void 0 : _a.name; | ||
vars += `--${themeKey}:${varName ? `var(--${varName});` : `${val}`};`; | ||
} | ||
ensureThemeVariable(theme, themeKey); | ||
} | ||
const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""]; | ||
const oppositeName = parentName === "dark" ? "light" : "dark"; | ||
const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ""; | ||
const cssChildSel = `.${PREFIX}${themeClassName}`; | ||
const cssSel = `${cssParentSel} ${cssChildSel}`; | ||
const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} { | ||
if (import_platform.isWeb) { | ||
const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""]; | ||
const oppositeName = parentName === "dark" ? "light" : "dark"; | ||
const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ""; | ||
const cssChildSel = `.${PREFIX}${themeClassName}`; | ||
const cssSel = `${cssParentSel} ${cssChildSel}`; | ||
const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} { | ||
${vars} | ||
}`; | ||
cssRules.push(cssRule); | ||
cssRules.push(cssRule); | ||
} | ||
} | ||
varsByValue.clear(); | ||
Object.freeze(cssRules); | ||
@@ -211,2 +209,19 @@ return { | ||
}, "parseTokens"); | ||
function ensureThemeVariable(theme, key) { | ||
const val = theme[key]; | ||
if (!(val instanceof import_createVariable.Variable)) { | ||
theme[key] = (0, import_createVariable.createVariable)({ | ||
name: key, | ||
val | ||
}); | ||
} else { | ||
if (val.name !== key) { | ||
theme[key] = (0, import_createVariable.createVariable)({ | ||
name: key, | ||
val: val.val | ||
}); | ||
} | ||
} | ||
} | ||
__name(ensureThemeVariable, "ensureThemeVariable"); | ||
//# sourceMappingURL=createTamagui.js.map |
@@ -1,7 +0,2 @@ | ||
var __create = Object.create; | ||
var __defProp = Object.defineProperty; | ||
var __getOwnPropDesc = Object.getOwnPropertyDescriptor; | ||
var __getOwnPropNames = Object.getOwnPropertyNames; | ||
var __getProtoOf = Object.getPrototypeOf; | ||
var __hasOwnProp = Object.prototype.hasOwnProperty; | ||
var __markAsModule = (target) => __defProp(target, "__esModule", { value: true }); | ||
@@ -14,32 +9,6 @@ var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); | ||
}; | ||
var __reExport = (target, module2, desc) => { | ||
if (module2 && typeof module2 === "object" || typeof module2 === "function") { | ||
for (let key of __getOwnPropNames(module2)) | ||
if (!__hasOwnProp.call(target, key) && key !== "default") | ||
__defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable }); | ||
} | ||
return target; | ||
}; | ||
var __toModule = (module2) => { | ||
return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2); | ||
}; | ||
__export(exports, { | ||
createTheme: () => createTheme | ||
}); | ||
var import_createVariable = __toModule(require("./createVariable")); | ||
const createTheme = /* @__PURE__ */ __name((theme) => { | ||
const res = {}; | ||
for (const key in theme) { | ||
const val = theme[key]; | ||
if (!(val instanceof import_createVariable.Variable)) { | ||
res[key] = (0, import_createVariable.createVariable)({ | ||
name: key, | ||
val | ||
}); | ||
} else { | ||
res[key] = val; | ||
} | ||
} | ||
return res; | ||
}, "createTheme"); | ||
const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme"); | ||
//# sourceMappingURL=createTheme.js.map |
@@ -100,5 +100,11 @@ var __create = Object.create; | ||
if (typeof val === "undefined") { | ||
console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`); | ||
console.warn(`No theme value "${String(key)}" in`, activeTheme, themes); | ||
return null; | ||
} | ||
if (!(val instanceof import_createVariable.Variable)) { | ||
console.warn("Non variable!", val); | ||
} | ||
if (val.name !== key) { | ||
console.warn("Non-matching name for variable to key", key, val.name); | ||
} | ||
} | ||
@@ -108,3 +114,3 @@ if (state.current.isRendering) { | ||
} | ||
return new import_createVariable.Variable({ val: val.val, name: key }); | ||
return val; | ||
} | ||
@@ -111,0 +117,0 @@ }); |
@@ -26,4 +26,4 @@ var __defProp = Object.defineProperty; | ||
import { usePressable } from "./hooks/usePressable"; | ||
import { useTheme } from "./hooks/useTheme"; | ||
import { TextAncestorContext } from "./views/TextAncestorContext"; | ||
import { ThemeManagerContext } from "./views/ThemeManagerContext"; | ||
const mouseUps = new Set(); | ||
@@ -36,2 +36,20 @@ if (typeof document !== "undefined") { | ||
} | ||
const defaultComponentState = { | ||
hover: false, | ||
press: false, | ||
pressIn: false | ||
}; | ||
function createShallowUpdate(setter) { | ||
return (next) => { | ||
setter((prev) => { | ||
for (const key in next) { | ||
if (prev[key] !== next[key]) { | ||
return { ...prev, ...next }; | ||
} | ||
} | ||
return prev; | ||
}); | ||
}; | ||
} | ||
__name(createShallowUpdate, "createShallowUpdate"); | ||
function createComponent(configIn) { | ||
@@ -54,17 +72,5 @@ let staticConfig; | ||
const features = useFeatures(props, { forceUpdate }); | ||
const manager = useContext(ThemeManagerContext); | ||
const [state, set_] = useState(() => ({ | ||
hover: false, | ||
press: false, | ||
pressIn: false, | ||
theme: manager.name | ||
})); | ||
const set = /* @__PURE__ */ __name((next) => set_((prev) => { | ||
for (const key in next) { | ||
if (prev[key] !== next[key]) { | ||
return { ...prev, ...next }; | ||
} | ||
} | ||
return prev; | ||
}), "set"); | ||
const theme = useTheme(); | ||
const [state, set_] = useState(defaultComponentState); | ||
const set = createShallowUpdate(set_); | ||
if (process.env.NODE_ENV === "development" && !isText && isWeb) { | ||
@@ -79,3 +85,2 @@ Children.toArray(props.children).forEach((item) => { | ||
const hostRef = useRef(null); | ||
const theme = manager.theme || initialTheme; | ||
const { | ||
@@ -151,3 +156,2 @@ viewProps: viewPropsIn, | ||
} | ||
const isTracking = useRef(false); | ||
const internal = useRef(); | ||
@@ -161,14 +165,7 @@ if (!internal.current) { | ||
internal.current.isMounted = true; | ||
const dispose = manager?.onChangeTheme((name) => { | ||
if (isTracking.current) { | ||
set({ theme: name }); | ||
} | ||
}); | ||
return () => { | ||
dispose(); | ||
mouseUps.delete(unPress); | ||
isTracking.current = false; | ||
internal.current.isMounted = false; | ||
}; | ||
}, [manager]); | ||
}, []); | ||
const element = isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component; | ||
@@ -175,0 +172,0 @@ const ReactView = !isWeb ? View : element || (hasTextAncestor ? "span" : "div"); |
var __defProp = Object.defineProperty; | ||
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); | ||
import { getStyleRules } from "@tamagui/helpers"; | ||
import { Variable, createVariable, isVariable } from "./createVariable"; | ||
import { isWeb } from "./constants/platform"; | ||
import { Variable, createVariable } from "./createVariable"; | ||
import { createTamaguiProvider } from "./helpers/createTamaguiProvider"; | ||
import { validateConfig } from "./helpers/validate"; | ||
import { configureMedia } from "./hooks/useMedia"; | ||
@@ -23,6 +23,4 @@ let conf; | ||
function createTamagui(config) { | ||
if (process.env.NODE_ENV === "development") { | ||
if (!config["parsed"]) { | ||
validateConfig(config); | ||
} | ||
if (config["parsed"]) { | ||
return config; | ||
} | ||
@@ -38,57 +36,56 @@ if (conf) { | ||
let cssRules = []; | ||
let tokenRule = `:root {`; | ||
const varsByValue = new Map(); | ||
const addVar = /* @__PURE__ */ __name((v) => { | ||
varsByValue[v.val] = v; | ||
const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`; | ||
tokenRule += rule; | ||
}, "addVar"); | ||
for (const key in config.tokens) { | ||
for (const skey in config.tokens[key]) { | ||
const val = config.tokens[key][skey]; | ||
if (key === "font") { | ||
for (const fkey in val) { | ||
if (fkey === "family") { | ||
addVar(val[fkey]); | ||
} else { | ||
for (const fskey in val[fkey]) { | ||
addVar(val[fkey][fskey]); | ||
if (isWeb) { | ||
let tokenRule = `:root {`; | ||
const addVar = /* @__PURE__ */ __name((v) => { | ||
varsByValue[v.val] = v; | ||
const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`; | ||
tokenRule += rule; | ||
}, "addVar"); | ||
for (const key in config.tokens) { | ||
for (const skey in config.tokens[key]) { | ||
const val = config.tokens[key][skey]; | ||
if (key === "font") { | ||
for (const fkey in val) { | ||
if (fkey === "family") { | ||
addVar(val[fkey]); | ||
} else { | ||
for (const fskey in val[fkey]) { | ||
addVar(val[fkey][fskey]); | ||
} | ||
} | ||
} | ||
} else { | ||
addVar(val); | ||
} | ||
} else { | ||
addVar(val); | ||
} | ||
} | ||
cssRules.push(`${tokenRule} | ||
}`); | ||
} | ||
cssRules.push(`${tokenRule} | ||
}`); | ||
for (const themeName in config.themes) { | ||
config.themes[themeName] = { ...config.themes[themeName] }; | ||
const theme = config.themes[themeName]; | ||
const theme = { ...config.themes[themeName] }; | ||
config.themes[themeName] = theme; | ||
let vars = ""; | ||
for (const themeKey in theme) { | ||
const val = theme[themeKey]; | ||
const getVariableCSS = /* @__PURE__ */ __name((inv) => { | ||
const v = varsByValue[inv] ?? inv; | ||
return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`; | ||
}, "getVariableCSS"); | ||
vars += getVariableCSS(val); | ||
if (!isVariable(val)) { | ||
theme[themeKey] = createVariable({ | ||
name: themeKey, | ||
val | ||
}); | ||
if (isWeb) { | ||
const val = theme[themeKey]; | ||
const varName = val instanceof Variable ? val.name : varsByValue[val]?.name; | ||
vars += `--${themeKey}:${varName ? `var(--${varName});` : `${val}`};`; | ||
} | ||
ensureThemeVariable(theme, themeKey); | ||
} | ||
const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""]; | ||
const oppositeName = parentName === "dark" ? "light" : "dark"; | ||
const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ""; | ||
const cssChildSel = `.${PREFIX}${themeClassName}`; | ||
const cssSel = `${cssParentSel} ${cssChildSel}`; | ||
const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} { | ||
if (isWeb) { | ||
const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""]; | ||
const oppositeName = parentName === "dark" ? "light" : "dark"; | ||
const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ""; | ||
const cssChildSel = `.${PREFIX}${themeClassName}`; | ||
const cssSel = `${cssParentSel} ${cssChildSel}`; | ||
const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} { | ||
${vars} | ||
}`; | ||
cssRules.push(cssRule); | ||
cssRules.push(cssRule); | ||
} | ||
} | ||
varsByValue.clear(); | ||
Object.freeze(cssRules); | ||
@@ -163,2 +160,19 @@ return { | ||
}, "parseTokens"); | ||
function ensureThemeVariable(theme, key) { | ||
const val = theme[key]; | ||
if (!(val instanceof Variable)) { | ||
theme[key] = createVariable({ | ||
name: key, | ||
val | ||
}); | ||
} else { | ||
if (val.name !== key) { | ||
theme[key] = createVariable({ | ||
name: key, | ||
val: val.val | ||
}); | ||
} | ||
} | ||
} | ||
__name(ensureThemeVariable, "ensureThemeVariable"); | ||
export { | ||
@@ -165,0 +179,0 @@ createTamagui, |
var __defProp = Object.defineProperty; | ||
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); | ||
import { Variable, createVariable } from "./createVariable"; | ||
const createTheme = /* @__PURE__ */ __name((theme) => { | ||
const res = {}; | ||
for (const key in theme) { | ||
const val = theme[key]; | ||
if (!(val instanceof Variable)) { | ||
res[key] = createVariable({ | ||
name: key, | ||
val | ||
}); | ||
} else { | ||
res[key] = val; | ||
} | ||
} | ||
return res; | ||
}, "createTheme"); | ||
const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme"); | ||
export { | ||
@@ -20,0 +5,0 @@ createTheme |
@@ -73,5 +73,11 @@ var __defProp = Object.defineProperty; | ||
if (typeof val === "undefined") { | ||
console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`); | ||
console.warn(`No theme value "${String(key)}" in`, activeTheme, themes); | ||
return null; | ||
} | ||
if (!(val instanceof Variable)) { | ||
console.warn("Non variable!", val); | ||
} | ||
if (val.name !== key) { | ||
console.warn("Non-matching name for variable to key", key, val.name); | ||
} | ||
} | ||
@@ -81,3 +87,3 @@ if (state.current.isRendering) { | ||
} | ||
return new Variable({ val: val.val, name: key }); | ||
return val; | ||
} | ||
@@ -84,0 +90,0 @@ }); |
@@ -26,4 +26,4 @@ var __defProp = Object.defineProperty; | ||
import { usePressable } from "./hooks/usePressable"; | ||
import { useTheme } from "./hooks/useTheme"; | ||
import { TextAncestorContext } from "./views/TextAncestorContext"; | ||
import { ThemeManagerContext } from "./views/ThemeManagerContext"; | ||
const mouseUps = new Set(); | ||
@@ -36,2 +36,20 @@ if (typeof document !== "undefined") { | ||
} | ||
const defaultComponentState = { | ||
hover: false, | ||
press: false, | ||
pressIn: false | ||
}; | ||
function createShallowUpdate(setter) { | ||
return (next) => { | ||
setter((prev) => { | ||
for (const key in next) { | ||
if (prev[key] !== next[key]) { | ||
return { ...prev, ...next }; | ||
} | ||
} | ||
return prev; | ||
}); | ||
}; | ||
} | ||
__name(createShallowUpdate, "createShallowUpdate"); | ||
function createComponent(configIn) { | ||
@@ -54,17 +72,5 @@ let staticConfig; | ||
const features = useFeatures(props, { forceUpdate }); | ||
const manager = useContext(ThemeManagerContext); | ||
const [state, set_] = useState(() => ({ | ||
hover: false, | ||
press: false, | ||
pressIn: false, | ||
theme: manager.name | ||
})); | ||
const set = /* @__PURE__ */ __name((next) => set_((prev) => { | ||
for (const key in next) { | ||
if (prev[key] !== next[key]) { | ||
return { ...prev, ...next }; | ||
} | ||
} | ||
return prev; | ||
}), "set"); | ||
const theme = useTheme(); | ||
const [state, set_] = useState(defaultComponentState); | ||
const set = createShallowUpdate(set_); | ||
if (process.env.NODE_ENV === "development" && !isText && isWeb) { | ||
@@ -79,3 +85,2 @@ Children.toArray(props.children).forEach((item) => { | ||
const hostRef = useRef(null); | ||
const theme = manager.theme || initialTheme; | ||
const { | ||
@@ -151,3 +156,2 @@ viewProps: viewPropsIn, | ||
} | ||
const isTracking = useRef(false); | ||
const internal = useRef(); | ||
@@ -161,14 +165,7 @@ if (!internal.current) { | ||
internal.current.isMounted = true; | ||
const dispose = manager?.onChangeTheme((name) => { | ||
if (isTracking.current) { | ||
set({ theme: name }); | ||
} | ||
}); | ||
return () => { | ||
dispose(); | ||
mouseUps.delete(unPress); | ||
isTracking.current = false; | ||
internal.current.isMounted = false; | ||
}; | ||
}, [manager]); | ||
}, []); | ||
const element = isWeb ? !Component || typeof Component === "string" ? tag || Component : Component : Component; | ||
@@ -175,0 +172,0 @@ const ReactView = !isWeb ? View : element || (hasTextAncestor ? "span" : "div"); |
var __defProp = Object.defineProperty; | ||
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); | ||
import { getStyleRules } from "@tamagui/helpers"; | ||
import { Variable, createVariable, isVariable } from "./createVariable"; | ||
import { isWeb } from "./constants/platform"; | ||
import { Variable, createVariable } from "./createVariable"; | ||
import { createTamaguiProvider } from "./helpers/createTamaguiProvider"; | ||
import { validateConfig } from "./helpers/validate"; | ||
import { configureMedia } from "./hooks/useMedia"; | ||
@@ -23,6 +23,4 @@ let conf; | ||
function createTamagui(config) { | ||
if (process.env.NODE_ENV === "development") { | ||
if (!config["parsed"]) { | ||
validateConfig(config); | ||
} | ||
if (config["parsed"]) { | ||
return config; | ||
} | ||
@@ -38,57 +36,56 @@ if (conf) { | ||
let cssRules = []; | ||
let tokenRule = `:root {`; | ||
const varsByValue = new Map(); | ||
const addVar = /* @__PURE__ */ __name((v) => { | ||
varsByValue[v.val] = v; | ||
const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`; | ||
tokenRule += rule; | ||
}, "addVar"); | ||
for (const key in config.tokens) { | ||
for (const skey in config.tokens[key]) { | ||
const val = config.tokens[key][skey]; | ||
if (key === "font") { | ||
for (const fkey in val) { | ||
if (fkey === "family") { | ||
addVar(val[fkey]); | ||
} else { | ||
for (const fskey in val[fkey]) { | ||
addVar(val[fkey][fskey]); | ||
if (isWeb) { | ||
let tokenRule = `:root {`; | ||
const addVar = /* @__PURE__ */ __name((v) => { | ||
varsByValue[v.val] = v; | ||
const rule = `--${v.name}:${typeof v.val === "number" ? `${v.val}px` : v.val};`; | ||
tokenRule += rule; | ||
}, "addVar"); | ||
for (const key in config.tokens) { | ||
for (const skey in config.tokens[key]) { | ||
const val = config.tokens[key][skey]; | ||
if (key === "font") { | ||
for (const fkey in val) { | ||
if (fkey === "family") { | ||
addVar(val[fkey]); | ||
} else { | ||
for (const fskey in val[fkey]) { | ||
addVar(val[fkey][fskey]); | ||
} | ||
} | ||
} | ||
} else { | ||
addVar(val); | ||
} | ||
} else { | ||
addVar(val); | ||
} | ||
} | ||
cssRules.push(`${tokenRule} | ||
}`); | ||
} | ||
cssRules.push(`${tokenRule} | ||
}`); | ||
for (const themeName in config.themes) { | ||
config.themes[themeName] = { ...config.themes[themeName] }; | ||
const theme = config.themes[themeName]; | ||
const theme = { ...config.themes[themeName] }; | ||
config.themes[themeName] = theme; | ||
let vars = ""; | ||
for (const themeKey in theme) { | ||
const val = theme[themeKey]; | ||
const getVariableCSS = /* @__PURE__ */ __name((inv) => { | ||
const v = varsByValue[inv] ?? inv; | ||
return isVariable(v) ? `--${themeKey}:var(--${v.name});` : `--${themeKey}:${v};`; | ||
}, "getVariableCSS"); | ||
vars += getVariableCSS(val); | ||
if (!isVariable(val)) { | ||
theme[themeKey] = createVariable({ | ||
name: themeKey, | ||
val | ||
}); | ||
if (isWeb) { | ||
const val = theme[themeKey]; | ||
const varName = val instanceof Variable ? val.name : varsByValue[val]?.name; | ||
vars += `--${themeKey}:${varName ? `var(--${varName});` : `${val}`};`; | ||
} | ||
ensureThemeVariable(theme, themeKey); | ||
} | ||
const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""]; | ||
const oppositeName = parentName === "dark" ? "light" : "dark"; | ||
const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ""; | ||
const cssChildSel = `.${PREFIX}${themeClassName}`; | ||
const cssSel = `${cssParentSel} ${cssChildSel}`; | ||
const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} { | ||
if (isWeb) { | ||
const [themeClassName, parentName] = themeName.includes("-") ? themeName.split("-") : [themeName, ""]; | ||
const oppositeName = parentName === "dark" ? "light" : "dark"; | ||
const cssParentSel = parentName ? `.${PREFIX}${parentName}` : ""; | ||
const cssChildSel = `.${PREFIX}${themeClassName}`; | ||
const cssSel = `${cssParentSel} ${cssChildSel}`; | ||
const cssRule = `${cssSel}, .${PREFIX}${oppositeName} ${cssSel} { | ||
${vars} | ||
}`; | ||
cssRules.push(cssRule); | ||
cssRules.push(cssRule); | ||
} | ||
} | ||
varsByValue.clear(); | ||
Object.freeze(cssRules); | ||
@@ -163,2 +160,19 @@ return { | ||
}, "parseTokens"); | ||
function ensureThemeVariable(theme, key) { | ||
const val = theme[key]; | ||
if (!(val instanceof Variable)) { | ||
theme[key] = createVariable({ | ||
name: key, | ||
val | ||
}); | ||
} else { | ||
if (val.name !== key) { | ||
theme[key] = createVariable({ | ||
name: key, | ||
val: val.val | ||
}); | ||
} | ||
} | ||
} | ||
__name(ensureThemeVariable, "ensureThemeVariable"); | ||
export { | ||
@@ -165,0 +179,0 @@ createTamagui, |
var __defProp = Object.defineProperty; | ||
var __name = (target, value) => __defProp(target, "name", { value, configurable: true }); | ||
import { Variable, createVariable } from "./createVariable"; | ||
const createTheme = /* @__PURE__ */ __name((theme) => { | ||
const res = {}; | ||
for (const key in theme) { | ||
const val = theme[key]; | ||
if (!(val instanceof Variable)) { | ||
res[key] = createVariable({ | ||
name: key, | ||
val | ||
}); | ||
} else { | ||
res[key] = val; | ||
} | ||
} | ||
return res; | ||
}, "createTheme"); | ||
const createTheme = /* @__PURE__ */ __name((theme) => theme, "createTheme"); | ||
export { | ||
createTheme | ||
}; |
@@ -73,5 +73,11 @@ var __defProp = Object.defineProperty; | ||
if (typeof val === "undefined") { | ||
console.warn(`No theme value "${String(key)}" in: ${Object.keys(activeTheme)}`); | ||
console.warn(`No theme value "${String(key)}" in`, activeTheme, themes); | ||
return null; | ||
} | ||
if (!(val instanceof Variable)) { | ||
console.warn("Non variable!", val); | ||
} | ||
if (val.name !== key) { | ||
console.warn("Non-matching name for variable to key", key, val.name); | ||
} | ||
} | ||
@@ -81,3 +87,3 @@ if (state.current.isRendering) { | ||
} | ||
return new Variable({ val: val.val, name: key }); | ||
return val; | ||
} | ||
@@ -84,0 +90,0 @@ }); |
{ | ||
"name": "@tamagui/core", | ||
"version": "1.0.0-alpha.28", | ||
"version": "1.0.0-alpha.29", | ||
"source": "src/index.ts", | ||
@@ -17,3 +17,3 @@ "main": "dist/cjs", | ||
"dependencies": { | ||
"@tamagui/helpers": "^1.0.0-alpha.26", | ||
"@tamagui/helpers": "^1.0.0-alpha.29", | ||
"@tamagui/ow": "^0.28.1", | ||
@@ -41,3 +41,3 @@ "@tamagui/use-debounce": "^1.0.0-alpha.26", | ||
}, | ||
"gitHead": "304fb085ec9a927d043b9444fe1c8724d9924db0" | ||
"gitHead": "ef2e601f5d8524d1f8722208341cb16d866285f9" | ||
} |
import { Variable } from './createVariable'; | ||
export declare const createTheme: <Theme extends { | ||
declare type GenericTheme = { | ||
[key: string]: string | Variable; | ||
}>(theme: Theme) => { [key in keyof Theme]: string | Variable; }; | ||
}; | ||
export declare const createTheme: <Theme extends GenericTheme>(theme: Theme) => Theme; | ||
export {}; | ||
//# sourceMappingURL=createTheme.d.ts.map |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
43
634404
9057