@tamagui/static 3.0.2 → 3.0.4

package/dist/cjs/compilerHost.cjs

@@ -635,8 +635,155 @@ function unusedIdentifier(source, base) {
 	return candidate;
 }
 const VIEW_WRAPPER_PROPS = /^(aria-|accessibilityState$|accessibilityValue$|id$|tabIndex$|nativeID$)/;
-function isBareHostView(element) {
-	return !element.entries.some((entry) => entry.kind === "child" || entry.kind === "spread" || entry.kind === "prop" && VIEW_WRAPPER_PROPS.test(entry.name));
+function isBareHostView(element, resetsTextAncestor) {
+	return !element.entries.some((entry) => entry.kind === "child" && !resetsTextAncestor || entry.kind === "spread" || entry.kind === "prop" && VIEW_WRAPPER_PROPS.test(entry.name));
+}
+const TEXT_WRAPPER_PROPS = /^(aria-|accessib|on[A-Z]|disabled$|id$|nativeID$|numberOfLines$|ellipsizeMode$|selectable$|selectionColor$|suppressHighlighting$|pressRetentionOffset$|role$|allowFontScaling$)/;
+function isBareHostText(element) {
+	return !element.entries.some((entry) => entry.kind === "spread" || entry.kind === "prop" && TEXT_WRAPPER_PROPS.test(entry.name));
+}
+const SCOPE_PRESERVING_PARENTS = {
+	react: ["Fragment"],
+	"react-native": [
+		"View",
+		"ScrollView",
+		"SafeAreaView"
+	],
+	"@tamagui/core": [
+		"View",
+		"Stack",
+		"XStack",
+		"YStack",
+		"ZStack"
+	],
+	tamagui: [
+		"View",
+		"Stack",
+		"XStack",
+		"YStack",
+		"ZStack"
+	]
+};
+const SCOPE_PROPS = /* @__PURE__ */ new Set([
+	"theme",
+	"themeInverse",
+	"themeShallow",
+	"componentName"
+]);
+let inlineModule = null;
+function inlineModuleOf(input) {
+	if (inlineModule?.source === input.source) return inlineModule;
+	const program = (0, import_compiler_core.parseModuleAst)(input.source, input.id);
+	const imports = /* @__PURE__ */ new Map();
+	for (const statement of (0, import_compiler_core.childNodes)(program, "body")) {
+		if (statement.type !== "ImportDeclaration" || statement.importKind === "type") continue;
+		const from = (0, import_compiler_core.childNode)(statement, "source")?.value;
+		for (const specifier of (0, import_compiler_core.childNodes)(statement, "specifiers")) {
+			if (specifier.type !== "ImportSpecifier") continue;
+			const local = (0, import_compiler_core.identifierName)((0, import_compiler_core.childNode)(specifier, "local"));
+			const imported = (0, import_compiler_core.identifierName)((0, import_compiler_core.childNode)(specifier, "imported"));
+			if (local && imported) imports.set(local, `${from}#${imported}`);
+		}
+	}
+	inlineModule = {
+		source: input.source,
+		program,
+		imports
+	};
+	return inlineModule;
+}
+function keepsThemeScope(element, imports) {
+	if (element.type === "JSXFragment") return true;
+	const opening = (0, import_compiler_core.childNode)(element, "openingElement");
+	if (!opening) return false;
+	for (const attribute of (0, import_compiler_core.childNodes)(opening, "attributes")) {
+		if (attribute.type !== "JSXAttribute") return false;
+		const name = (0, import_compiler_core.identifierName)((0, import_compiler_core.childNode)(attribute, "name"));
+		if (!name || SCOPE_PROPS.has(name)) return false;
+	}
+	const [from, imported] = (imports.get((0, import_compiler_core.identifierName)((0, import_compiler_core.childNode)(opening, "name")) ?? "") ?? "").split("#");
+	return !!SCOPE_PRESERVING_PARENTS[from]?.includes(imported);
+}
+function isComponentFunction(fn, parent) {
+	const pascal = (name) => !!name && /^[A-Z]/.test(name);
+	if (fn.type === "FunctionDeclaration") return pascal((0, import_compiler_core.identifierName)((0, import_compiler_core.childNode)(fn, "id")));
+	if (!parent) return false;
+	if (parent.type === "VariableDeclarator") {
+		return (0, import_compiler_core.childNode)(parent, "init") === fn && pascal((0, import_compiler_core.identifierName)((0, import_compiler_core.childNode)(parent, "id")));
+	}
+	if (parent.type === "CallExpression" && (0, import_compiler_core.childNodes)(parent, "arguments")[0] === fn) {
+		const callee = (0, import_compiler_core.childNode)(parent, "callee");
+		const name = callee?.type === "MemberExpression" ? (0, import_compiler_core.identifierName)((0, import_compiler_core.childNode)(callee, "property")) : (0, import_compiler_core.identifierName)(callee);
+		return name === "memo" || name === "forwardRef";
+	}
+	return false;
+}
+function isRenderCallback(fn, parent) {
+	if (parent?.type !== "CallExpression") return false;
+	const callee = (0, import_compiler_core.childNode)(parent, "callee");
+	if (callee?.type !== "MemberExpression") return false;
+	const args = (0, import_compiler_core.childNodes)(parent, "arguments");
+	const method = (0, import_compiler_core.identifierName)((0, import_compiler_core.childNode)(callee, "property"));
+	if (method === "map") return args[0] === fn;
+	return method === "from" && (0, import_compiler_core.identifierName)((0, import_compiler_core.childNode)(callee, "object")) === "Array" && args[1] === fn;
+}
+const FUNCTION_TYPES = /* @__PURE__ */ new Set([
+	"FunctionDeclaration",
+	"FunctionExpression",
+	"ArrowFunctionExpression"
+]);
+function nativeInlinePlacement(input) {
+	if (input.element.form !== "jsx") return null;
+	const { program, imports } = inlineModuleOf(input);
+	const { start, end } = input.element.span;
+	const path = [];
+	const element = (0, import_compiler_core.findAstNode)(program, (node, _parent, key) => {
+		path.push({
+			node,
+			key
+		});
+		return node.type === "JSXElement" && node.start === start && node.end === end;
+	}, {
+		start,
+		end
+	});
+	if (!element) return null;
+	const parentType = path.at(-2)?.node.type;
+	const braces = parentType === "JSXElement" || parentType === "JSXFragment";
+	let index = path.length - 2;
+	while (index >= 0) {
+		const { node } = path[index];
+		const childKey = path[index + 1].key;
+		switch (node.type) {
+			case "JSXElement":
+			case "JSXFragment":
+				if (childKey !== "children" || !keepsThemeScope(node, imports)) return null;
+				break;
+			case "ConditionalExpression":
+				if (childKey === "test") return null;
+				break;
+			case "JSXExpressionContainer":
+			case "LogicalExpression":
+			case "ParenthesizedExpression":
+			case "ChainExpression": break;
+			case "ReturnStatement":
+			case "ArrowFunctionExpression": {
+				if (node.type === "ArrowFunctionExpression" && childKey !== "body") return null;
+				let fnIndex = index;
+				while (fnIndex >= 0 && !FUNCTION_TYPES.has(path[fnIndex].node.type)) fnIndex--;
+				if (fnIndex < 0) return null;
+				const fn = path[fnIndex].node;
+				const fnParent = path[fnIndex - 1]?.node;
+				if (isComponentFunction(fn, fnParent)) return { braces };
+				if (!isRenderCallback(fn, fnParent)) return null;
+				index = fnIndex - 1;
+				break;
+			}
+			default: return null;
+		}
+		index--;
+	}
+	return null;
 }
 function entrySource(input, entry) {
 	return entry.value.kind === "static" ? JSON.stringify(entry.value.value) : input.source.slice(entry.value.span.start, entry.value.span.end);
@@ -1761,7 +1908,7 @@ function createTamaguiCompilerHost(options) {
 				const usesNativeFastPath = !!themedStyleKeys && !!options.experimentalNativeFastPath && dynamicStyleEntries.length === 0 && !input.element.entries.some((entry) => entry.kind === "spread");
 				const nativeStyleImports = [{
 					content: `
-function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify((usesNativeFastPath ? nativeStyle : collapseNativeShorthands(nativeStyle)) ?? {})}); } ${nativeStyleLocal}();`,
+function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify(collapseNativeShorthands(nativeStyle) ?? {})}); } ${nativeStyleLocal}();`,
 					origin: input.element.component.span
 				}];
 				const nativeStyleSource = `${nativeStyleLocal}._ ?? ${nativeStyleLocal}()`;
@@ -1928,7 +2075,8 @@ import { createElement as ${createElementLocal} } from "react"
 					};
 				}
 				const nativeName = component.staticConfig.isText ? "Text" : "View";
-				const useHostView = options.experimentalNativeFastPath && nativeName === "View" && isBareHostView(input.element);
+				const useHostView = options.experimentalNativeFastPath && nativeName === "View" && isBareHostView(input.element, !!nativeFastPath);
+				const useHostText = options.experimentalNativeFastPath && nativeName === "Text" && !!nativeFastPath && isBareHostText(input.element);
 				const nativeExport = useHostView ? "unstable_NativeView" : nativeName;
 				const nativeLocal = unusedIdentifier(input.source, `__TamaguiNative${useHostView ? "HostView" : nativeName}`);
 				if (themedStyleKeys && options.disablePartialExtraction) {
@@ -1958,9 +2106,25 @@ import { createElement as ${createElementLocal} } from "react"
 						if (!styleEdits) {
 							return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
 						}
+						const inline = nativeInlinePlacement(input);
+						const inlineEdits = inline ? [{
+							start: input.element.span.start,
+							end: input.element.span.start,
+							content: `${inline.braces ? "{" : ""}${fastLocal}.inline(`,
+							origin: input.element.span
+						}, {
+							start: input.element.span.end,
+							end: input.element.span.end,
+							content: `)${inline.braces ? "}" : ""}`,
+							origin: input.element.span
+						}] : [];
 						return {
 							ok: true,
-							edits: [...tagEdits4, ...styleEdits],
+							edits: [
+								...inlineEdits,
+								...tagEdits4,
+								...styleEdits
+							],
 							css: [],
 							imports: [
 								...nativeStyleImports,
@@ -1972,7 +2136,7 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 								},
 								{
 									content: `
-const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, ${nativeStyleSource}, ${nativeFastPath.mappingLocal});`,
+const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, ${nativeStyleSource}, ${nativeFastPath.mappingLocal}${useHostView ? `, 'view'` : useHostText ? `, 'text'` : ""});`,
 									origin: input.element.component.span
 								}
 							],

package/dist/esm/compilerHost.mjs

@@ -1,4 +1,4 @@
-import { collectLeaves, zeroRuleMessage, zeroThemeBoundaryMessage } from "@tamagui/compiler-core";
+import { childNode, childNodes, collectLeaves, findAstNode, identifierName, parseModuleAst, zeroRuleMessage, zeroThemeBoundaryMessage } from "@tamagui/compiler-core";
 import { StyleObjectIdentifier, StyleObjectProperty, StyleObjectRules, StyleObjectValue, stylePropsAll, stylePropsInput, stylePropsText, validStyles } from "@tamagui/helpers";
 import { ATTRIBUTES, EVENTS, NATIVE_BACKING, NATIVE_BLOCK_DEFAULTS, NATIVE_ELEMENT_DEFAULTS, NATIVE_FLEX_DEFAULTS, NATIVE_INPUT_TYPES, NATIVE_PRIMITIVE_MODULE, TAGS, TAG_WEB_DEFAULTS } from "@tamagui/dom";
 import { resolveTransition, toCSSTransition } from "@tamagui/animation-helpers";
@@ -610,8 +610,155 @@ function unusedIdentifier(source, base) {
 	return candidate;
 }
 const VIEW_WRAPPER_PROPS = /^(aria-|accessibilityState$|accessibilityValue$|id$|tabIndex$|nativeID$)/;
-function isBareHostView(element) {
-	return !element.entries.some((entry) => entry.kind === "child" || entry.kind === "spread" || entry.kind === "prop" && VIEW_WRAPPER_PROPS.test(entry.name));
+function isBareHostView(element, resetsTextAncestor) {
+	return !element.entries.some((entry) => entry.kind === "child" && !resetsTextAncestor || entry.kind === "spread" || entry.kind === "prop" && VIEW_WRAPPER_PROPS.test(entry.name));
+}
+const TEXT_WRAPPER_PROPS = /^(aria-|accessib|on[A-Z]|disabled$|id$|nativeID$|numberOfLines$|ellipsizeMode$|selectable$|selectionColor$|suppressHighlighting$|pressRetentionOffset$|role$|allowFontScaling$)/;
+function isBareHostText(element) {
+	return !element.entries.some((entry) => entry.kind === "spread" || entry.kind === "prop" && TEXT_WRAPPER_PROPS.test(entry.name));
+}
+const SCOPE_PRESERVING_PARENTS = {
+	react: ["Fragment"],
+	"react-native": [
+		"View",
+		"ScrollView",
+		"SafeAreaView"
+	],
+	"@tamagui/core": [
+		"View",
+		"Stack",
+		"XStack",
+		"YStack",
+		"ZStack"
+	],
+	tamagui: [
+		"View",
+		"Stack",
+		"XStack",
+		"YStack",
+		"ZStack"
+	]
+};
+const SCOPE_PROPS = /* @__PURE__ */ new Set([
+	"theme",
+	"themeInverse",
+	"themeShallow",
+	"componentName"
+]);
+let inlineModule = null;
+function inlineModuleOf(input) {
+	if (inlineModule?.source === input.source) return inlineModule;
+	const program = parseModuleAst(input.source, input.id);
+	const imports = /* @__PURE__ */ new Map();
+	for (const statement of childNodes(program, "body")) {
+		if (statement.type !== "ImportDeclaration" || statement.importKind === "type") continue;
+		const from = childNode(statement, "source")?.value;
+		for (const specifier of childNodes(statement, "specifiers")) {
+			if (specifier.type !== "ImportSpecifier") continue;
+			const local = identifierName(childNode(specifier, "local"));
+			const imported = identifierName(childNode(specifier, "imported"));
+			if (local && imported) imports.set(local, `${from}#${imported}`);
+		}
+	}
+	inlineModule = {
+		source: input.source,
+		program,
+		imports
+	};
+	return inlineModule;
+}
+function keepsThemeScope(element, imports) {
+	if (element.type === "JSXFragment") return true;
+	const opening = childNode(element, "openingElement");
+	if (!opening) return false;
+	for (const attribute of childNodes(opening, "attributes")) {
+		if (attribute.type !== "JSXAttribute") return false;
+		const name = identifierName(childNode(attribute, "name"));
+		if (!name || SCOPE_PROPS.has(name)) return false;
+	}
+	const [from, imported] = (imports.get(identifierName(childNode(opening, "name")) ?? "") ?? "").split("#");
+	return !!SCOPE_PRESERVING_PARENTS[from]?.includes(imported);
+}
+function isComponentFunction(fn, parent) {
+	const pascal = (name) => !!name && /^[A-Z]/.test(name);
+	if (fn.type === "FunctionDeclaration") return pascal(identifierName(childNode(fn, "id")));
+	if (!parent) return false;
+	if (parent.type === "VariableDeclarator") {
+		return childNode(parent, "init") === fn && pascal(identifierName(childNode(parent, "id")));
+	}
+	if (parent.type === "CallExpression" && childNodes(parent, "arguments")[0] === fn) {
+		const callee = childNode(parent, "callee");
+		const name = callee?.type === "MemberExpression" ? identifierName(childNode(callee, "property")) : identifierName(callee);
+		return name === "memo" || name === "forwardRef";
+	}
+	return false;
+}
+function isRenderCallback(fn, parent) {
+	if (parent?.type !== "CallExpression") return false;
+	const callee = childNode(parent, "callee");
+	if (callee?.type !== "MemberExpression") return false;
+	const args = childNodes(parent, "arguments");
+	const method = identifierName(childNode(callee, "property"));
+	if (method === "map") return args[0] === fn;
+	return method === "from" && identifierName(childNode(callee, "object")) === "Array" && args[1] === fn;
+}
+const FUNCTION_TYPES = /* @__PURE__ */ new Set([
+	"FunctionDeclaration",
+	"FunctionExpression",
+	"ArrowFunctionExpression"
+]);
+function nativeInlinePlacement(input) {
+	if (input.element.form !== "jsx") return null;
+	const { program, imports } = inlineModuleOf(input);
+	const { start, end } = input.element.span;
+	const path = [];
+	const element = findAstNode(program, (node, _parent, key) => {
+		path.push({
+			node,
+			key
+		});
+		return node.type === "JSXElement" && node.start === start && node.end === end;
+	}, {
+		start,
+		end
+	});
+	if (!element) return null;
+	const parentType = path.at(-2)?.node.type;
+	const braces = parentType === "JSXElement" || parentType === "JSXFragment";
+	let index = path.length - 2;
+	while (index >= 0) {
+		const { node } = path[index];
+		const childKey = path[index + 1].key;
+		switch (node.type) {
+			case "JSXElement":
+			case "JSXFragment":
+				if (childKey !== "children" || !keepsThemeScope(node, imports)) return null;
+				break;
+			case "ConditionalExpression":
+				if (childKey === "test") return null;
+				break;
+			case "JSXExpressionContainer":
+			case "LogicalExpression":
+			case "ParenthesizedExpression":
+			case "ChainExpression": break;
+			case "ReturnStatement":
+			case "ArrowFunctionExpression": {
+				if (node.type === "ArrowFunctionExpression" && childKey !== "body") return null;
+				let fnIndex = index;
+				while (fnIndex >= 0 && !FUNCTION_TYPES.has(path[fnIndex].node.type)) fnIndex--;
+				if (fnIndex < 0) return null;
+				const fn = path[fnIndex].node;
+				const fnParent = path[fnIndex - 1]?.node;
+				if (isComponentFunction(fn, fnParent)) return { braces };
+				if (!isRenderCallback(fn, fnParent)) return null;
+				index = fnIndex - 1;
+				break;
+			}
+			default: return null;
+		}
+		index--;
+	}
+	return null;
 }
 function entrySource(input, entry) {
 	return entry.value.kind === "static" ? JSON.stringify(entry.value.value) : input.source.slice(entry.value.span.start, entry.value.span.end);
@@ -1736,7 +1883,7 @@ function createTamaguiCompilerHost(options) {
 				const usesNativeFastPath = !!themedStyleKeys && !!options.experimentalNativeFastPath && dynamicStyleEntries.length === 0 && !input.element.entries.some((entry) => entry.kind === "spread");
 				const nativeStyleImports = [{
 					content: `
-function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify((usesNativeFastPath ? nativeStyle : collapseNativeShorthands(nativeStyle)) ?? {})}); } ${nativeStyleLocal}();`,
+function ${nativeStyleLocal}() { return ${nativeStyleLocal}._ ?? (${nativeStyleLocal}._ = ${JSON.stringify(collapseNativeShorthands(nativeStyle) ?? {})}); } ${nativeStyleLocal}();`,
 					origin: input.element.component.span
 				}];
 				const nativeStyleSource = `${nativeStyleLocal}._ ?? ${nativeStyleLocal}()`;
@@ -1903,7 +2050,8 @@ import { createElement as ${createElementLocal} } from "react"
 					};
 				}
 				const nativeName = component.staticConfig.isText ? "Text" : "View";
-				const useHostView = options.experimentalNativeFastPath && nativeName === "View" && isBareHostView(input.element);
+				const useHostView = options.experimentalNativeFastPath && nativeName === "View" && isBareHostView(input.element, !!nativeFastPath);
+				const useHostText = options.experimentalNativeFastPath && nativeName === "Text" && !!nativeFastPath && isBareHostText(input.element);
 				const nativeExport = useHostView ? "unstable_NativeView" : nativeName;
 				const nativeLocal = unusedIdentifier(input.source, `__TamaguiNative${useHostView ? "HostView" : nativeName}`);
 				if (themedStyleKeys && options.disablePartialExtraction) {
@@ -1933,9 +2081,25 @@ import { createElement as ${createElementLocal} } from "react"
 						if (!styleEdits) {
 							return bailout(input, "local/unsupported-target", `Compiled ${input.element.form} call has no editable props argument`);
 						}
+						const inline = nativeInlinePlacement(input);
+						const inlineEdits = inline ? [{
+							start: input.element.span.start,
+							end: input.element.span.start,
+							content: `${inline.braces ? "{" : ""}${fastLocal}.inline(`,
+							origin: input.element.span
+						}, {
+							start: input.element.span.end,
+							end: input.element.span.end,
+							content: `)${inline.braces ? "}" : ""}`,
+							origin: input.element.span
+						}] : [];
 						return {
 							ok: true,
-							edits: [...tagEdits4, ...styleEdits],
+							edits: [
+								...inlineEdits,
+								...tagEdits4,
+								...styleEdits
+							],
 							css: [],
 							imports: [
 								...nativeStyleImports,
@@ -1947,7 +2111,7 @@ const ${nativeLocal} = require('react-native').${nativeExport};`,
 								},
 								{
 									content: `
-const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, ${nativeStyleSource}, ${nativeFastPath.mappingLocal});`,
+const ${fastLocal} = require('@tamagui/core')._withNativeStyle(${nativeLocal}, ${nativeStyleSource}, ${nativeFastPath.mappingLocal}${useHostView ? `, 'view'` : useHostText ? `, 'text'` : ""});`,
 									origin: input.element.component.span
 								}
 							],