1. Project Overview
Cat.js is a lightweight, state-of-the-art engine designed to build powerful User Interfaces (UIs). It prioritizes the highest performance and efficiency, based exclusively on modern native browser APIs, primarily Web Components.

- Version: 0.1.0 (as of October 1, 2024)

2. Core Concepts and Principles
- Utilizes modern native browser APIs, especially Web Components
- Focuses on maximum performance and efficiency
- Promotes a lightweight approach to UI development
- Emphasizes simplicity and ease of use

3. Technical Details

Key Features
- Client-Side Compiler (CSC) before loading the DOM
- Attachment through a script:src tag in the head of HTML documents
- Written in vanilla, low-level JavaScript optimized for browser runtime
- Beautiful and easy-to-use syntax
- Efficient project tree structure

Implementation Details
- No Virtual DOM or similar abstractions
- Avoids use of bundlers, Webpack, polyfills, etc.
- Discourages writing HTML or CSS code within JavaScript files
- Eliminates render methods for components and logic that trigger unnecessary reflows and repainting

4. Code

```

// cat.js

// Immediately Invoked Function Expression (IIFE) to encapsulate the engine
(function() {
  'use strict';

  /**
   * Internal module for tracking loaded files and components.
   */
  const Registry = (function() {
    const loadedFiles = new Set();
    const registeredComponents = new Set();

    return {
      isFileLoaded: (path) => loadedFiles.has(path),
      markFileAsLoaded: (path) => loadedFiles.add(path),
      isComponentRegistered: (name) => registeredComponents.has(name),
      registerComponent: (name) => registeredComponents.add(name),
    };
  })();

  /**
   * Compiler module for processing component scripts.
   */
  const Compiler = (function() {
    /**
     * Parses and transforms the user script into init and cleanup functions.
     * @param {string} script - The raw script content from the component's <script> tag.
     * @returns {Object} - An object containing the init and cleanup functions.
     */
    function compileScript(script) {
      const transformedScript = `
        (function() {
          // Override addEventListener to track event listeners
          const originalAddEventListener = this.addEventListener.bind(this);
          this.addEventListener = function(type, listener, options) {
            originalAddEventListener(type, listener, options);
            this.__eventListeners.push({ type, listener, options });
          };

          // Execute the user-defined script in the context of the component
          ${script}

          // If an init function is defined by the user, call it
          if (typeof this.init === 'function') {
            this.init();
          }
        }).call(this);
      `;

      // Create the init function
      const initFunction = new Function(transformedScript);

      // Create the cleanup function to remove all tracked event listeners
      const cleanupFunction = function() {
        this.__eventListeners.forEach(({ type, listener, options }) => {
          this.removeEventListener(type, listener, options);
        });
        this.__eventListeners = [];

        // If a cleanup function is defined by the user, call it
        if (typeof this.cleanup === 'function') {
          this.cleanup();
        }
      };

      return { initFunction, cleanupFunction };
    }

    return {
      compileScript,
    };
  })();

  /**
   * Internal module for handling component registration.
   */
  const ComponentManager = (function() {
    const templateCache = new Map();
    const scriptCache = new Map(); // Cache for component scripts

    function registerComponent(name, templateContent, scriptContent) {
      if (Registry.isComponentRegistered(name)) {
        console.warn(`Component already registered: ${name}`);
        return;
      }

      // Cache the template content
      templateCache.set(name, templateContent);
      scriptCache.set(name, scriptContent);

      // Define the Custom Element class
      class CustomElement extends HTMLElement {
        constructor() {
          super();
          // Initialize a storage for event listeners
          this.__eventListeners = [];
          this.attachShadow({ mode: 'open' });
        }

        connectedCallback() {
          this.initialize();

          if (typeof this.__init === 'function') {
            this.__init();
          }
        }

        disconnectedCallback() {
          if (typeof this.__cleanup === 'function') {
            this.__cleanup();
          }
        }

        initialize() {
          // Process the template
          const templateContent = templateCache.get(name);
          this.setupBindings(templateContent);
        }

        setupBindings(templateContent) {
          const template = document.createElement('template');
          template.innerHTML = templateContent;
          const content = template.content;

          this.__bindings = {}; // A map from variable names to arrays of DOM nodes or attributes

          const processNode = (node) => {
            if (node.nodeType === Node.TEXT_NODE) {
              const originalText = node.textContent;
              const regex = /\{(\w+)\}/g;
              let result;
              let hasBinding = false;

              while ((result = regex.exec(originalText)) !== null) {
                const varName = result[1];
                hasBinding = true;

                // Keep track of the binding
                if (!this.__bindings[varName]) {
                  this.__bindings[varName] = [];
                }
                this.__bindings[varName].push({
                  type: 'text',
                  node: node,
                  originalText: originalText,
                });

                // Define property if not already defined
                if (!(varName in this)) {
                  this.defineReactiveProperty(varName);
                }
              }

              if (hasBinding) {
                // Replace {variable} with current value
                node.textContent = originalText.replace(regex, (match, varName) => {
                  return this[varName] || '';
                });
              }
            } else if (node.nodeType === Node.ELEMENT_NODE) {
              // Process attributes
              for (let attr of Array.from(node.attributes)) {
                const originalValue = attr.value;
                const regex = /\{(\w+)\}/g;
                let result;
                let hasBinding = false;

                while ((result = regex.exec(originalValue)) !== null) {
                  const varName = result[1];
                  hasBinding = true;

                  // Keep track of the binding
                  if (!this.__bindings[varName]) {
                    this.__bindings[varName] = [];
                  }
                  this.__bindings[varName].push({
                    type: 'attribute',
                    node: node,
                    attrName: attr.name,
                    originalValue: originalValue,
                  });

                  // Define property if not already defined
                  if (!(varName in this)) {
                    this.defineReactiveProperty(varName);
                  }
                }

                if (hasBinding) {
                  // Replace {variable} with current value
                  node.setAttribute(attr.name, originalValue.replace(regex, (match, varName) => {
                    return this[varName] || '';
                  }));
                }
              }

              // Recursively process child nodes
              node.childNodes.forEach((child) => processNode(child));
            }
          };

          content.childNodes.forEach((child) => processNode(child));

          // Append the content to shadow DOM
          this.shadowRoot.appendChild(content);
        }

        defineReactiveProperty(varName) {
          let value = this[varName] || '';

          Object.defineProperty(this, varName, {
            get: () => value,
            set: (newValue) => {
              value = newValue;
              // Update the bound nodes
              if (this.__bindings[varName]) {
                this.__bindings[varName].forEach((binding) => {
                  if (binding.type === 'text') {
                    // Update text node
                    binding.node.textContent = binding.originalText.replace(
                      new RegExp(`\\{${varName}\\}`, 'g'),
                      newValue
                    );
                  } else if (binding.type === 'attribute') {
                    // Update attribute
                    binding.node.setAttribute(
                      binding.attrName,
                      binding.originalValue.replace(
                        new RegExp(`\\{${varName}\\}`, 'g'),
                        newValue
                      )
                    );
                  }
                });
              }
            },
          });
        }
      }

      // Compile the user script and attach it to the class prototype
      if (scriptContent.trim()) {
        try {
          // Create init and cleanup functions using the Compiler
          const { initFunction, cleanupFunction } = Compiler.compileScript(scriptContent);

          // Attach the compiled functions to the CustomElement prototype
          CustomElement.prototype.__init = initFunction;
          CustomElement.prototype.__cleanup = cleanupFunction;
        } catch (error) {
          console.error(`Error compiling script for component '${name}': ${error.message}`);
          return; // Prevent registration if script fails
        }
      }

      // Define the custom element
      customElements.define(name, CustomElement);
      Registry.registerComponent(name);
      console.log(`Component registered: ${name}`);
    }

    return {
      registerComponent,
    };
  })();

  /**
   * Internal module for loading and parsing HTML files.
   */
  const Loader = (function() {
    /**
     * Loads an HTML file from the given path.
     * @param {string} path - The path to the HTML file (without .html extension).
     * @returns {Promise<string>} - A promise that resolves to the content of the HTML file.
     */
    async function loadFile(path) {
      const fullPath = `${path}.html`;

      try {
        const response = await fetch(fullPath);
        if (!response.ok) {
          throw new Error(`Failed to load: ${fullPath} (Status: ${response.status})`);
        }
        const content = await response.text();
        return content;
      } catch (error) {
        console.error(error.message);
        throw error;
      }
    }

    /**
     * Parses an HTML string into a Document object.
     * @param {string} htmlString - The HTML string to parse.
     * @returns {Document} - The parsed Document object.
     */
    function parseHTML(htmlString) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlString, 'text/html');
      return doc;
    }

    return {
      loadFile,
      parseHTML,
    };
  })();

  /**
   * Global load function.
   * @param {string} path - The path to the HTML file (without .html extension).
   * @returns {Promise<void>}
   */
  window.load = async function(path) {
    console.log(`Loading: ${path}`);

    if (Registry.isFileLoaded(path)) {
      console.log(`Already loaded: ${path}`);
      return;
    }

    try {
      const responseText = await Loader.loadFile(path);
      const doc = Loader.parseHTML(responseText);

      Registry.markFileAsLoaded(path);

      // Extract the <template> with the 'name' attribute
      const template = doc.querySelector('template[name]');
      if (!template) {
        console.error(`No <template name="..."> found in ${path}.html`);
        return;
      }

      const componentName = template.getAttribute('name');
      const templateContent = template.innerHTML;

      // Extract the <script> content
      const script = doc.querySelector('script');
      const scriptContent = script ? script.textContent : '';

      // Register the component with its template and script
      ComponentManager.registerComponent(componentName, templateContent, scriptContent);
    } catch (error) {
      // Error has already been logged in Loader; no need to throw
    }
  };
})();

```

Your first task it's evaluate our most recent integration, how our compiler compiles reactive values. And determine if this logic fits our principles, browser runtime and memory usage, and if outperform svelte on performance (Comparing the output compiled component logic, not the compiler or performance of the compiler, focus on a 1:1 comparison of the output of the compiler)