XTool.init(options?)

Initialize FyneJS and start processing directives in the DOM.

// Basic initialization
XTool.init();

// With options
XTool.init({
  container: 'body',           // Root element selector (default: 'body')
  prefix: 'x',                 // Directive prefix (default: 'x')
  debug: false,                // Enable debug logging
  staticDirectives: true       // Optimize static directive performance
});

XTool.registerComponent(definition)

Register a reusable component that can be used with <component> elements.

XTool.registerComponent({
  name: 'my-component',        // Required: component name
  template: '<div>...</div>',     // Required: HTML template string or selector
  makeData: (props) => ({}),   // Optional: data factory function
  methods: {                   // Optional: component methods
    doSomething() { /* */ }
  },
  computed: {                  // Optional: computed properties
    fullName() { return this.first + ' ' + this.last; }
  },
  propEffects: {               // Optional: prop change handlers
    value(newVal, oldVal) { /* react to prop changes */ }
  },
  // Lifecycle hooks (all optional)
  beforeMount() { /* before DOM insertion */ },
  mounted() { /* after DOM insertion */ },
  updated() { /* after reactive update */ },
  beforeUnmount() { /* before removal */ },
  unmounted() { /* after cleanup */ }
});

XTool.directive(name, definition)

Register custom directives to extend FyneJS's functionality.

// Custom directive example
XTool.directive('tooltip', {
  bind(element, value, expression, component, modifiers, evaluator) {
    // Called when directive is first bound
    element.title = value;
    element.style.position = 'relative';
  },
  
  update(element, value, expression, component, modifiers, evaluator) {
    // Called when the bound value changes
    element.title = value;
  },
  
  unbind(element, component) {
    // Called when directive is removed (cleanup)
    element.removeAttribute('title');
  }
});

// Usage: <div x-tooltip="'Hover message'"></div>

// Advanced directive with modifiers
XTool.directive('animate', {
  bind(element, value, expression, component, modifiers) {
    const duration = modifiers?.duration || 300;
    const easing = modifiers?.ease || 'ease-in-out';
    
    element.style.transition = `all ${duration}ms ${easing}`;
    if (value) element.classList.add(value);
  },
  
  update(element, value) {
    // Toggle animation class
    element.classList.toggle(value, !!value);
  }
});

// Usage: <div x-animate.duration.500.ease="'fade-in'"></div>

🎯 Flexible Template System

FyneJS supports multiple template sources for maximum flexibility:

// HTML string template
template: '<div x-text="message"></div>'

// Element selector (any element, not just <template>)
template: '#my-template'       // Uses element with id="my-template"
template: '.template-class'    // Uses first element with class

// Special behavior:
// - <template> elements: Content is cloned for new instances
// - Other elements: Original element is used directly (replacement)
// - Template elements are automatically skipped during rendering

💬 Enhanced Text Interpolation

Smart mustache syntax with escape support:

<!-- Basic interpolation -->
<p>Hello \{{ name }}!</p>

<!-- Empty expressions are ignored -->
<p>\{{ }} This won't cause errors</p>

<!-- Escape with backslash to render literally -->
<p>\{{ this will show as literal mustaches }}</p>

<!-- Complex expressions -->
<p>\{{ user.name.toUpperCase() }} (\{{ items.length }} items)</p>

⚡ Performance Optimizations

🧹 Automatic Memory Management

🧊 Seal & Freeze Controls

Temporarily pause interactivity or lock state when needed. Seal allows internal state but suppresses renders and external side‑effects (timers, listeners, observers). Freeze is fully read‑only—no state changes and no renders. Useful for previews, embed modes, audits, and page builders. Remove readonly (or call $seal(false)) to resume interactivity.

<!-- Freeze via attribute: no state changes, timers/listeners/observers paused, no renders -->
<component source="stats-card" readonly></component>

<!-- Seal programmatically: internal state can change, but no renders/effects/globals -->
<div x-data="{ paused:false, toggle(){ this.$seal(!(this.$isSealed)); this.paused = this.$isSealed; } }">
  <button x-on:click="toggle()" x-text="$isSealed ? 'Resume' : 'Pause'"></button>
</div>

📦 Remarkably Compact

XTool.createComponent(definition)

Create and mount component instances programmatically (alternative to registerComponent).

const instance = XTool.createComponent({
  data: { message: 'Hello' },
  template: '<div x-text="message"></div>'
});

// Mount to DOM
document.body.appendChild(instance.element);