\n```\n\n### References\n\nAccess DOM elements through refs:\n\n```html\n\n
\n\n\n
Item 1
\n
Item 2
\n\n\n
\n```\n\nIn component:\n```javascript\nclass MyComponent extends DRender.Component {\n afterInitialized() {\n // Access refs\n const input = this.refs.usernameInput;\n const items = this.refs.items; // Array\n const submitBtn = this.refs.submitButton;\n\n input.focus();\n }\n}\n```\n\n## Advanced Features\n\n### MutationObserver Integration\n\nD-Render automatically detects DOM changes and updates components:\n\n```javascript\n// Components are automatically created/destroyed when DOM changes\nconst newElement = document.createElement('div');\nnewElement.setAttribute('d-component', 'MyComponent');\ndocument.body.appendChild(newElement); // Component automatically initialized\n```\n\n### Debug Mode\n\nEnable debug logging for development:\n\n```javascript\n// Enable debug features\nDRender.debug.logAllFuncStr = true; // Log function compilation\nDRender.debug.logCompiledFuncExecutionError = true; // Log execution errors\nDRender.debug.logAttributeChanges = true; // Log attribute changes\nDRender.debug.keepDirectives = true; // Keep directives in DOM for inspection\n```\n\n### Component Utilities\n\n```javascript\n// Find components by name\nconst components = DRender.findComponents('MyComponent');\n\n// Get component hierarchy\nDRender.graphComponents(); // Console log component tree\n\n// Access closest component to element\nconst component = element.closestComponent();\n\n// Access component depth\nconst depth = component.depth;\n\n// Get component name formats\nconst kebabName = component.kebabName; // my-component\nconst kebabPrefix = component.kebabPrefix; // d-my-component\n```\n\n### Performance Optimization\n\n```javascript\n// Debounced rendering\nthis.setState({ count: 5 }, {}, false); // Don't trigger render\nthis.setState({ count: 6 }, {}, true, true); // Immediate render\n\n// Control child rendering\nshouldFollowRender(parent, transition) {\n // Prevent unnecessary child re-renders\n return this.state.shouldUpdateChildren;\n}\n```\n\n## API Reference\n\n### Component API\n\n#### Properties\n- `element` - DOM element associated with component\n- `state` - Component state object\n- `parent` - Parent component instance\n- `children` - Array of child components\n- `root` - Root component instance\n- `refs` - Object containing DOM element references\n- `depth` - Component depth in hierarchy\n- `name` - Component name\n- `kebabName` - Kebab-case component name\n- `kebabPrefix` - Directive prefix for global directives\n\n#### Methods\n- `setState(state, transition, triggerRendering, immediateRendering)` - Update component state\n- `destroy()` - Clean up component and remove event listeners\n- `filterChildren(name)` - Get child components by name\n- `findRefs()` - Get all DOM element references\n- `closestComponent(element)` - Get closest component to element\n\n#### Lifecycle Methods\n- `defaultState(state)` - Define default state values\n- `afterInitialized()` - Called after component initialization\n- `stateChanged(prevState)` - Called when state changes\n- `childrenChanged(child)` - Called when child components change\n- `unmounted()` - Called when component is destroyed\n- `transistionOnStateChanging(prevState, newState)` - Define state transitions\n- `shouldFollowRender(parent, transition)` - Control child rendering\n- `mixins()` - Return array of mixins to apply\n- `componentSpecificDirectives()` - Define custom directives\n\n### DRender Global API\n\n#### Methods\n- `run()` - Initialize D-Render and scan DOM for components\n- `registerComponents(...components)` - Register component classes\n- `defineComponent(name, ...mixins)` - Define component with mixins\n- `findComponents(name, scopeNode)` - Find components by name\n- `graphComponents(html, scopeNode)` - Log component hierarchy\n- `closestComponent(node)` - Get closest component to element\n- `addHelpers()` - Add global helper methods to window\n- `createComponent(node, options)` - Create component from element\n\n#### Properties\n- `Component` - Base component class\n- `Directives` - Object containing all directive implementations\n- `Prefixes` - Object containing event modifier implementations\n- `debug` - Debug configuration object\n\n### Directives Reference\n\n#### Event Directives\n- `d-click` - Click event handler\n- `d-change` - Change event handler\n- `d-input` - Input event handler\n- `d-keyup` - Keyup event handler\n- `d-keypress` - Keypress event handler\n- `d-submit` - Submit event handler\n- `d-focus` - Focus event handler\n- `d-blur` - Blur event handler\n\n#### Event Modifiers\n- `.prevent` - Call event.preventDefault()\n- `.stop` - Call event.stopPropagation()\n- `.debounce` - Debounce event handler\n\n#### Conditional Directives\n- `d-show` - Show/hide element based on condition\n- `d-debounce-show` - Debounced show/hide\n- `d-disabled` - Enable/disable element\n- `d-readonly` - Make element read-only\n\n#### Binding Directives\n- `d-model` - Two-way data binding\n- `d-text` - Set text content\n- `d-html` - Set HTML content\n- `d-value` - Set element value\n- `d-class` - Bind CSS classes\n- `d-style` - Bind inline styles\n- `d-prop` - Set DOM properties\n- `d-attr` - Set HTML attributes\n\n#### Structural Directives\n- `d-loop` - Loop over arrays/objects\n- `d-key` - Unique key for loop items\n\n#### Lifecycle Directives\n- `d-on-state-change` - State change hook\n- `d-on-render` - Render hook\n- `d-after-initialized` - Initialize hook\n\n#### Reference Directives\n- `d-ref` - DOM element reference\n- `d-component-ref` - Component-specific reference\n\n## Examples\n\n### Complete Todo Application\n\n```html\n
\n
Todo List
\n\n \n
\n \n \n
\n\n \n
\n All\n Active\n Completed\n
\n\n \n
\n \n
\n - \n
\n \n \n ×\n
\n \n \n
\n\n \n \n\n \n
\n No todos yet! Add one above.\n
\n
\n\n\n```\n\n### Modal Component with Global Directives\n\n```html\n\n
\n\n\n
\n\n\n
\n```\n\n## Best Practices\n\n1. **State Management**\n - Always use `setState()` to update state\n - Keep state simple and focused\n - Use functional updates for complex state changes\n - Leverage deep merging for nested objects\n\n2. **Component Design**\n - Keep components focused and reusable\n - Use mixins for shared functionality\n - Implement proper cleanup in `unmounted()`\n - Use lifecycle hooks for setup/teardown\n\n3. **Performance**\n - Use `shouldFollowRender()` to optimize child rendering\n - Implement debouncing for frequent events\n - Avoid unnecessary state updates\n - Use refs instead of queries when possible\n\n4. **Directives**\n - Create custom directives for reusable behavior\n - Use global directives for cross-component functionality\n - Leverage event modifiers for common patterns\n - Keep directive logic simple and focused\n\n## Debugging\n\n1. **Enable Debug Mode**\n```javascript\nDRender.debug.logAllFuncStr = true;\nDRender.debug.logCompiledFuncExecutionError = true;\nDRender.debug.logAttributeChanges = true;\nDRender.debug.keepDirectives = true;\n```\n\n2. **Component Inspection**\n```javascript\n// View component tree\nDRender.graphComponents();\n\n// Find components\nconst components = DRender.findComponents('MyComponent');\n\n// Access component from element\nconst component = element._dComponent;\n\n// Use global helpers\ngraphComponents();\nfindComponents();\n$0.closestComponent;\n```\n\n3. **State Debugging**\n```javascript\n// Log state changes\nclass MyComponent extends DRender.Component {\n stateChanged(prevState) {\n console.log('State changed:', prevState, '->', this.state);\n }\n}\n```\n\n## Tips\n\n1. Always use `setState()` to update state - never modify state directly\n2. Use transitions for temporary UI states and animations\n3. Keep components small and focused on single responsibilities\n4. Use refs to access DOM elements directly when needed\n5. Leverage lifecycle hooks for proper setup and cleanup\n6. Use mixins to share common functionality across components\n7. Implement `shouldFollowRender()` for performance optimization\n8. Use global directives for cross-component communication\n9. Enable debug mode during development for better visibility\n10. Use the component graph to visualize your application structure\n\n","readmeFilename":"README.md"}