@tamagui/static 2.7.7 → 3.0.0-beta.643.1

package/dist/cjs/zero/theme.cjs

@@ -0,0 +1,328 @@
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var theme_exports = {};
+__export(theme_exports, {
+	foldBranches: () => foldBranches,
+	lowerStaticTheme: () => lowerStaticTheme,
+	readStaticTheme: () => readStaticTheme,
+	resolveThemeChain: () => resolveThemeChain
+});
+module.exports = __toCommonJS(theme_exports);
+var import_compiler_core = require("@tamagui/compiler-core");
+var import_helpers = require("@tamagui/helpers");
+var import_web = require("@tamagui/web");
+const MAX_THEME_BRANCHES = 8;
+const LOWERABLE_RESERVED_PROPS = /* @__PURE__ */ new Set([
+	"name",
+	"reset",
+	"contain"
+]);
+function jsxAttributeName(attribute) {
+	const name = (0, import_compiler_core.childNode)(attribute, "name");
+	return name && typeof name.name === "string" ? name.name : null;
+}
+function literalOf(node) {
+	if (!node) return void 0;
+	if (node.type === "Literal" && typeof node.value !== "object") {
+		return node.value;
+	}
+	return void 0;
+}
+function hasSideEffects(node) {
+	let found = false;
+	(0, import_compiler_core.walkAst)(node, (child) => {
+		if (child.type === "CallExpression" || child.type === "OptionalCallExpression" || child.type === "NewExpression" || child.type === "AwaitExpression" || child.type === "YieldExpression" || child.type === "AssignmentExpression" || child.type === "UpdateExpression" || child.type === "TaggedTemplateExpression") {
+			found = true;
+		}
+	});
+	return found;
+}
+function readNameOptions(value, source, guards) {
+	const literal = literalOf(value);
+	if (typeof literal === "string") {
+		return [{
+			test: guards.length ? guards.join(" && ") : null,
+			name: literal
+		}];
+	}
+	if (value.type === "ConditionalExpression") {
+		const test = (0, import_compiler_core.childNode)(value, "test");
+		const consequent = (0, import_compiler_core.childNode)(value, "consequent");
+		const alternate = (0, import_compiler_core.childNode)(value, "alternate");
+		if (!test || !consequent || !alternate) return null;
+		if (hasSideEffects(test)) return null;
+		const testText = source.slice(test.start, test.end).replace(/\s+/g, " ").trim();
+		const left = readNameOptions(consequent, source, [...guards, `(${testText})`]);
+		const right = readNameOptions(alternate, source, [...guards, `!(${testText})`]);
+		if (!left || !right) return null;
+		return [...left, ...right];
+	}
+	return null;
+}
+function foldBranches(branches) {
+	const last = branches[branches.length - 1];
+	if (new Set(branches.map((branch) => branch.value)).size === 1) return last.value;
+	let expression = last.value;
+	for (let index = branches.length - 2; index >= 0; index--) {
+		const branch = branches[index];
+		expression = branch.test === null ? branch.value : `${branch.test} ? ${branch.value} : ${expression}`;
+	}
+	return expression;
+}
+function resolveThemeChain(chain, rootThemeName, config) {
+	let branches = [{
+		test: null,
+		name: rootThemeName,
+		isNew: false
+	}];
+	for (const node of chain) {
+		const next = [];
+		for (const parent of branches) {
+			for (const option of node.options) {
+				const resolved = (0, import_web.resolveThemeName)(parent.name, option.name, node.reset, config.themes);
+				const tests = [parent.test, option.test].filter(Boolean);
+				next.push({
+					test: tests.length ? tests.join(" && ") : null,
+					name: resolved ?? parent.name,
+					isNew: resolved !== null
+				});
+			}
+		}
+		branches = next;
+	}
+	return branches;
+}
+function readStaticTheme(element, id, source, config) {
+	const moduleId = (0, import_compiler_core.resolvedModuleId)(id);
+	const violations = [];
+	const css = /* @__PURE__ */ new Map();
+	const opening = (0, import_compiler_core.childNode)(element, "openingElement");
+	const closing = (0, import_compiler_core.childNode)(element, "closingElement");
+	const span = (node) => ({
+		id: moduleId,
+		start: node.start,
+		end: node.end
+	});
+	let options = [{
+		test: null,
+		name: void 0
+	}];
+	let reset = false;
+	let contain = false;
+	const themeKeyProps = {};
+	for (const attribute of (0, import_compiler_core.childNodes)(opening, "attributes")) {
+		if (attribute.type !== "JSXAttribute") {
+			violations.push({
+				rule: 1,
+				code: "local/unsafe-style-spread",
+				span: span(attribute),
+				component: "Theme",
+				message: (0, import_compiler_core.zeroRuleMessage)(1, { component: "Theme" })
+			});
+			continue;
+		}
+		const key = jsxAttributeName(attribute);
+		if (!key) continue;
+		const rawValue = (0, import_compiler_core.childNode)(attribute, "value");
+		const value = rawValue && rawValue.type === "JSXExpressionContainer" ? (0, import_compiler_core.childNode)(rawValue, "expression") : rawValue;
+		if (key === "name") {
+			const read = value ? readNameOptions(value, source, []) : null;
+			if (!read) {
+				violations.push({
+					rule: 4,
+					code: "local/unsupported-target",
+					span: span(attribute),
+					component: "Theme",
+					message: (0, import_compiler_core.zeroRuleMessage)(4, { detail: `the <Theme name> value ${source.slice(attribute.start, attribute.end).replace(/\s+/g, " ").trim()}, which is not a literal theme name or a conditional over literal theme names,` })
+				});
+				continue;
+			}
+			options = read;
+			continue;
+		}
+		if (import_helpers.reservedThemeProps[key]) {
+			if (!LOWERABLE_RESERVED_PROPS.has(key)) {
+				violations.push({
+					rule: 4,
+					code: "local/unsupported-target",
+					span: span(attribute),
+					component: "Theme",
+					message: (0, import_compiler_core.zeroRuleMessage)(4, { detail: `the <Theme ${key}> prop, which has no compiled form,` })
+				});
+				continue;
+			}
+			const literal2 = value ? literalOf(value) : true;
+			if (typeof literal2 !== "boolean") {
+				violations.push({
+					rule: 4,
+					code: "local/unsupported-target",
+					span: span(attribute),
+					component: "Theme",
+					message: (0, import_compiler_core.zeroRuleMessage)(4, { detail: `a non-literal <Theme ${key}> value,` })
+				});
+				continue;
+			}
+			if (key === "reset") reset = literal2;
+			if (key === "contain") contain = literal2;
+			continue;
+		}
+		const literal = value ? literalOf(value) : void 0;
+		if (typeof literal !== "string" && typeof literal !== "number") {
+			violations.push({
+				rule: 3,
+				code: "local/dynamic-style-value",
+				span: span(attribute),
+				component: "Theme",
+				message: (0, import_compiler_core.zeroRuleMessage)(3, {
+					prop: key,
+					component: "Theme",
+					detail: value ? "a theme value must be a string or number literal at build time" : "a theme key needs a value"
+				})
+			});
+			continue;
+		}
+		themeKeyProps[key] = literal;
+	}
+	if (reset && options.some((option) => option.name !== void 0)) {
+		violations.push({
+			rule: 4,
+			code: "local/unsupported-target",
+			span: span(opening),
+			component: "Theme",
+			message: (0, import_compiler_core.zeroRuleMessage)(4, { detail: "a <Theme> with both name and reset, which cannot mean one theme," })
+		});
+	}
+	if (!closing) {
+		violations.push({
+			rule: 4,
+			code: "local/unsupported-target",
+			span: span(element),
+			component: "Theme",
+			message: (0, import_compiler_core.zeroRuleMessage)(4, { detail: "a self-closing <Theme>, which has no subtree to theme," })
+		});
+	}
+	const issues = [];
+	const inlineValues = Object.keys(themeKeyProps).length ? (0, import_web.getInlineValuesFromProps)(themeKeyProps, config, (issue) => issues.push(issue)) : null;
+	for (const issue of issues) {
+		violations.push({
+			rule: 3,
+			code: "local/dynamic-style-value",
+			span: span(opening),
+			component: "Theme",
+			message: (0, import_compiler_core.zeroRuleMessage)(3, {
+				prop: issue.key,
+				component: "Theme",
+				detail: issue.message
+			})
+		});
+	}
+	const inlineCSS = inlineValues ? (0, import_web.getVariablesCSSRules)(inlineValues, config) : null;
+	if (inlineCSS) css.set(inlineCSS.identifier, inlineCSS.rules.join(""));
+	if (violations.length) return {
+		node: null,
+		violations,
+		css
+	};
+	return {
+		node: {
+			element,
+			opening,
+			closing,
+			options,
+			reset,
+			contain,
+			layer: inlineValues && inlineCSS ? {
+				inlineValues,
+				inlineClassName: inlineCSS.identifier
+			} : null
+		},
+		violations,
+		css
+	};
+}
+function lowerStaticTheme(node, chain, rootThemeName, config, id) {
+	const moduleId = (0, import_compiler_core.resolvedModuleId)(id);
+	const branches = resolveThemeChain(chain, rootThemeName, config);
+	if (branches.length > MAX_THEME_BRANCHES) {
+		return {
+			edits: [],
+			violations: [{
+				rule: 4,
+				code: "local/unsupported-target",
+				span: {
+					id: moduleId,
+					start: node.element.start,
+					end: node.element.end
+				},
+				component: "Theme",
+				message: (0, import_compiler_core.zeroRuleMessage)(4, { detail: `a <Theme> chain that enumerates ${branches.length} theme names, past the ${MAX_THEME_BRANCHES} this lowers,` })
+			}]
+		};
+	}
+	const inlineClass = node.layer?.inlineClassName ?? "";
+	const classBranches = branches.map((branch) => ({
+		test: branch.test,
+		value: JSON.stringify([
+			branch.isNew ? (0, import_helpers.getThemeClassNames)(branch.name) : "",
+			"is_Theme",
+			inlineClass
+		].filter(Boolean).join(" ").replace(/\s+/g, " ").trim())
+	}));
+	const baseStyle = node.contain ? `display:"contents",contain:"strict"` : `display:"contents"`;
+	const styleBranches = branches.map((branch) => {
+		const theme = config.themes[branch.name];
+		const color = branch.isNew && theme ? (0, import_web.variableToString)(theme.color) : "";
+		return {
+			test: branch.test,
+			value: color ? `{color:${JSON.stringify(color)},${baseStyle}}` : `{${baseStyle}}`
+		};
+	});
+	const className = foldBranches(classBranches);
+	const style = foldBranches(styleBranches);
+	const classAttribute = className.startsWith("\"") ? `className=${className}` : `className={${className}}`;
+	const edits = [{
+		start: node.opening.start,
+		end: node.opening.end,
+		content: `<span ${classAttribute} style={${style}}>`,
+		origin: {
+			id: moduleId,
+			start: node.opening.start,
+			end: node.opening.end
+		}
+	}];
+	if (node.closing) {
+		edits.push({
+			start: node.closing.start,
+			end: node.closing.end,
+			content: `</span>`,
+			origin: {
+				id: moduleId,
+				start: node.closing.start,
+				end: node.closing.end
+			}
+		});
+	}
+	return {
+		edits,
+		violations: []
+	};
+}

package/dist/cjs/zero/transform.cjs

@@ -0,0 +1,203 @@
+
+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 __export = (target, all) => {
+	for (var name in all) __defProp(target, name, {
+		get: all[name],
+		enumerable: true
+	});
+};
+var __copyProps = (to, from, except, desc) => {
+	if (from && typeof from === "object" || typeof from === "function") {
+		for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+			get: () => from[key],
+			enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+		});
+	}
+	return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
+	value: mod,
+	enumerable: true
+}) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var transform_exports = {};
+__export(transform_exports, { transformZeroModule: () => transformZeroModule });
+module.exports = __toCommonJS(transform_exports);
+var import_compiler_core = require("@tamagui/compiler-core");
+var import_node_crypto = require("node:crypto");
+var import_node_path = __toESM(require("node:path"), 1);
+var import_theme = require("./theme.cjs");
+function identifierNameOf(node) {
+	return node && node.type === "Identifier" && typeof node.name === "string" ? node.name : null;
+}
+function jsxNameOf(element) {
+	const opening = (0, import_compiler_core.childNode)(element, "openingElement");
+	if (!opening) return null;
+	const name = (0, import_compiler_core.childNode)(opening, "name");
+	return name && name.type === "JSXIdentifier" && typeof name.name === "string" ? name.name : null;
+}
+function transformZeroModule(input) {
+	const { id, source, config } = input;
+	const moduleId = (0, import_compiler_core.resolvedModuleId)(id);
+	const program = (0, import_compiler_core.parseModuleAst)(source, id);
+	const violations = (0, import_compiler_core.zeroViolationsFromPlan)(input.plan);
+	const edits = [];
+	const bridges = /* @__PURE__ */ new Map();
+	const bridgeCSS = /* @__PURE__ */ new Map();
+	let themeLocal = null;
+	const islandLocals = /* @__PURE__ */ new Map();
+	for (const statement of (0, import_compiler_core.childNodes)(program, "body")) {
+		if (statement.type !== "ImportDeclaration") continue;
+		const sourceNode = (0, import_compiler_core.childNode)(statement, "source");
+		const specifier = sourceNode && typeof sourceNode.value === "string" ? sourceNode.value : null;
+		if (!specifier) continue;
+		const island = input.resolveIslandLoader(specifier);
+		for (const importSpecifier of (0, import_compiler_core.childNodes)(statement, "specifiers")) {
+			const local = identifierNameOf((0, import_compiler_core.childNode)(importSpecifier, "local"));
+			if (!local) continue;
+			if (island) {
+				islandLocals.set(local, island.islandId);
+				continue;
+			}
+			if (!input.isTamaguiSpecifier(specifier)) continue;
+			const imported = (0, import_compiler_core.childNode)(importSpecifier, "imported");
+			if (imported && imported.name === "Theme") themeLocal = local;
+		}
+	}
+	const parents = /* @__PURE__ */ new Map();
+	const elements = [];
+	(0, import_compiler_core.walkAst)(program, (node, parent) => {
+		if (parent) parents.set(node, parent);
+		if (node.type === "JSXElement") elements.push(node);
+	});
+	const themeElements = themeLocal ? elements.filter((element) => jsxNameOf(element) === themeLocal) : [];
+	const themeNodes = /* @__PURE__ */ new Map();
+	for (const element of themeElements) {
+		const read = (0, import_theme.readStaticTheme)(element, id, source, config);
+		for (const [identifier, rules] of read.css) bridgeCSS.set(identifier, rules);
+		violations.push(...read.violations);
+		if (read.node) themeNodes.set(element, read.node);
+	}
+	const themeChainOf = (element) => {
+		const chain = [];
+		let cursor = element;
+		while (cursor) {
+			const node = themeNodes.get(cursor);
+			if (node) chain.unshift(node);
+			cursor = parents.get(cursor);
+		}
+		return chain;
+	};
+	const rootThemeName = Object.keys(config.themes)[0] ?? "light";
+	for (const element of themeElements) {
+		const node = themeNodes.get(element);
+		if (!node) continue;
+		const lowered = (0, import_theme.lowerStaticTheme)(node, themeChainOf(element), rootThemeName, config, id);
+		violations.push(...lowered.violations);
+		edits.push(...lowered.edits);
+	}
+	const mounts = elements.filter((element) => {
+		const name = jsxNameOf(element);
+		return !!name && islandLocals.has(name);
+	}).sort((left, right) => left.start - right.start);
+	const moduleBridgePrefix = (0, import_node_crypto.createHash)("sha256").update(import_node_path.default.relative(input.root, id).replace(/\\/g, "/")).digest("hex").slice(0, 8);
+	const loweredRanges = input.plan.edits.filter((edit) => edit.end > edit.start);
+	const isOpaqueAncestor = (element) => {
+		if (themeNodes.has(element)) return false;
+		const name = jsxNameOf(element);
+		if (!name || islandLocals.has(name)) return false;
+		if (name[0] !== name[0].toUpperCase()) return false;
+		const nameNode = (0, import_compiler_core.childNode)((0, import_compiler_core.childNode)(element, "openingElement"), "name");
+		return !loweredRanges.some((edit) => edit.start <= nameNode.start && edit.end >= nameNode.end);
+	};
+	mounts.forEach((element, index) => {
+		const islandId = islandLocals.get(jsxNameOf(element));
+		let opaque = null;
+		for (let cursor = parents.get(element); cursor; cursor = parents.get(cursor)) {
+			if (cursor.type === "JSXElement" && isOpaqueAncestor(cursor)) opaque = cursor;
+		}
+		if (opaque) {
+			violations.push({
+				rule: 4,
+				code: "local/unsupported-target",
+				span: {
+					id: moduleId,
+					start: element.start,
+					end: element.end
+				},
+				component: islandId,
+				message: (0, import_compiler_core.zeroIslandThemeMessage)(islandId)
+			});
+			return;
+		}
+		const chain = themeChainOf(element);
+		const layers = chain.map((node) => node.layer).filter((layer) => !!layer);
+		const branches = (0, import_theme.resolveThemeChain)(chain, rootThemeName, config);
+		const descriptors = branches.map((branch, branchIndex) => ({
+			test: branch.test,
+			bridge: {
+				id: branches.length === 1 ? `b${moduleBridgePrefix}_${index}` : `b${moduleBridgePrefix}_${index}_${branchIndex}`,
+				name: branch.name,
+				layers
+			}
+		}));
+		const list = bridges.get(islandId) ?? [];
+		for (const descriptor of descriptors) list.push(descriptor.bridge);
+		bridges.set(islandId, list);
+		const fold = (value) => (0, import_theme.foldBranches)(descriptors.map((descriptor) => ({
+			test: descriptor.test,
+			value: value(descriptor.bridge)
+		})));
+		const opening = (0, import_compiler_core.childNode)(element, "openingElement");
+		const nameNode = (0, import_compiler_core.childNode)(opening, "name");
+		edits.push({
+			start: nameNode.end,
+			end: nameNode.end,
+			content: ` data-tamagui-bridge={${fold((bridge) => JSON.stringify(bridge.id))}} __tamaguiBridge={${fold((bridge) => JSON.stringify(bridge))}}`,
+			origin: {
+				id: moduleId,
+				start: nameNode.start,
+				end: nameNode.end
+			}
+		});
+	});
+	const erasure = violations.length ? null : (0, import_compiler_core.planZeroErasure)({
+		id: moduleId,
+		source,
+		loweredEdits: [...input.plan.edits, ...edits],
+		isTamaguiSpecifier: input.isTamaguiSpecifier,
+		islandIdFor: input.resolveIslandModule
+	});
+	if (erasure) {
+		edits.push(...erasure.edits);
+		violations.push(...erasure.violations);
+	}
+	const output = input.mode === "report" ? (0, import_compiler_core.applyLoweredModule)(source, moduleId, input.plan) : violations.length ? {
+		changed: false,
+		code: source,
+		map: null
+	} : (0, import_compiler_core.applyLoweredModule)(source, moduleId, {
+		id: moduleId,
+		sourceHash: input.plan.sourceHash,
+		edits: [...input.plan.edits, ...edits]
+	});
+	return {
+		output,
+		edits: input.mode === "report" ? [] : edits,
+		bridges: input.mode === "report" ? /* @__PURE__ */ new Map() : bridges,
+		bridgeCSS: input.mode === "report" ? /* @__PURE__ */ new Map() : bridgeCSS,
+		violations,
+		erased: {
+			modules: erasure?.removedModules ?? [],
+			bindings: erasure?.removedBindings ?? [],
+			styledDefinitions: erasure?.erasedStyledDefinitions ?? [],
+			exports: erasure?.erasedExports ?? []
+		},
+		rewrittenAnimatedNumberHooks: erasure?.rewrittenAnimatedNumberHooks ?? []
+	};
+}