atomico-rendering

Name: atomico-rendering
Availability: InStock
Author: Atomico

Explains Atomico's render pipeline, VNode structure, and keyed reconciliation for DOM updates.

1.3k|44|Updated Aug 25, 2018

Search Tags:#rendering #reconciliation #web-components #render-pipeline #fragment #atomico #virtual-dom

Ready to run

npx skills add https://github.com/atomicojs/atomico --skill atomico-rendering

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: atomico-rendering
Source: https://github.com/atomicojs/atomico/tree/main/.agents/skills/atomico-rendering
Command: npx skills add https://github.com/atomicojs/atomico --skill atomico-rendering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Understand Atomico's virtual DOM rendering engine, including createElement, render, Fragment, Mark, and reconciliation, so developers can reason about performance and DOM updates.

Core Features & Use Cases

Understand createElement / h vnode creation and the render lifecycle
Learn Fragment, Mark, and reconciliation semantics for keyed and non-keyed lists
Explore utilities like createRef, className, and delegateValidity in real usage

Quick Start

Explain Atomico's render pipeline and how keyed reconciliation preserves state during list reordering.

Frequently Asked Questions about atomico-rendering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How does virtual DOM rendering work in Atomico web components?▼

Atomico's virtual DOM rendering uses createElement to build VNodes and a render lifecycle to process updates. The engine manages mount and update cycles, allowing developers to reason about DOM mutations and performance.

How do I preserve component state during keyed list reconciliation?▼

Keyed reconciliation preserves component state during list reordering by matching existing VNodes to their DOM counterparts. Atomico's render pipeline uses keys to track items, ensuring state survives moveBefore operations and dynamic list updates.

When should I use Fragment and Mark in a web component render pipeline?▼

Use Fragment to group multiple elements without adding a wrapper DOM node, and Mark for specialized rendering semantics. Both utilities help structure VNode trees efficiently within Atomico's reconciliation engine during component updates.

Does Atomico support createRef and className utilities for web components?▼

Atomico supports createRef for referencing DOM nodes and className for managing class strings. These utilities integrate with the render lifecycle to help developers manipulate elements during mount and update cycles in web components.

What is the render lifecycle order for mount and update cycles in Atomico?▼

The Atomico render lifecycle processes VNode creation, DOM mounting, and subsequent update cycles sequentially. Developers can track this order to optimize performance and ensure correct DOM updates during web component state changes.

Why does delegateValidity behave differently across mount and update cycles?▼

delegateValidity operates within Atomico's rendering engine to manage form validation state across DOM updates. Its behavior depends on the reconciliation pipeline phase, affecting how validity is delegated during component re-renders.