htmlTag.transform() — astro Function Reference

Architecture documentation for the htmlTag.transform() function in html.tag.ts from the astro codebase.

Function typescript CoreAstro RenderingEngine

Entity Profile

CoreAstro→ RenderingEngine→ htmlTag.transform() — astro Function Reference

Dependency Diagram

graph TD
  786f72a1_cab6_232d_d740_42267b86eff4["htmlTag.transform()"]
  60d1be76_cd98_f7e8_4ba2_44daa9480023["html.tag.ts"]
  786f72a1_cab6_232d_d740_42267b86eff4 -->|defined in| 60d1be76_cd98_f7e8_4ba2_44daa9480023
  style 786f72a1_cab6_232d_d740_42267b86eff4 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/integrations/markdoc/src/html/tagdefs/html.tag.ts lines 45–68

	transform(node, config) {
		const { name, attrs: unsafeAttributes } = node.attributes;
		const children = node.transformChildren(config);

		// pull out any "unsafe" attributes which need additional processing
		const { style, ...safeAttributes } = unsafeAttributes as Record<string, unknown>;

		// Convert boolean attributes to boolean literals
		for (const [key, value] of Object.entries(safeAttributes)) {
			if (booleanAttributes.has(key)) {
				// If the attribute exists, ensure its value is a boolean
				safeAttributes[key] = value === '' || value === true || value === 'true';
			}
		}

		// if the inline "style" attribute is present we need to parse the HTML into a react-like React.CSSProperties object
		if (typeof style === 'string') {
			const styleObject = parseInlineCSSToReactLikeObject(style);
			safeAttributes.style = styleObject;
		}

		// create a Markdoc Tag for the given HTML node with the HTML attributes and children
		return new Markdoc.Tag(name, safeAttributes, children);
	},