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 do an evaluation of how our compiler compiles components with dynamic / reactive values. Show a sample of how this component looks after being compiled:

<!-- app/comp/counter.html -->
<template name="my-counter">
    <style>
        .on {
            background-color: blue;
        }
        .off {
            background-color: aliceblue;
        }
        .btn {
            padding: 20px;
        }
    </style>

    <button class="{status} btn">Count: <span>{count}</span></button>
</template>

<script>
    this.count = 0;
    this.status = 'on';
    
    const button = this.shadowRoot.querySelector('button');
    const span = this.shadowRoot.querySelector('span');

    const component = this; // To maintain correct context inside functions

    function updateCount() {
        component.count++;

        component.status = component.status === 'on' ? 'off' : 'on';
    }

    button.addEventListener('click', updateCount);
</script>

Also, dive deep on a technical evaluation and determine weather this logic fits our principles, browser runtime and memory usage, and if outperform how svelte handles this type of dynamic values?