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) {
      // Wrap the user script to track event listeners and manage lifecycle
      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();
          const shadow = this.attachShadow({ mode: 'open' });
          shadow.innerHTML = templateCache.get(name);
          // Initialize a storage for event listeners
          this.__eventListeners = [];
        }

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

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

      // 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
    }
  };
})();

```

Before moving on with the first task, you must acknowledge the project and create your own mental model of the project. Also, consider this engine it's a Work In Progress, we are building step by step, adding a feature at time.

You must be willing to compromise when exploring and researching, base your reasoning on factual information, and invest all the time necessary to consistently find the most optimal implementation.

Your fist task it's incrementing the compiler capacity for adding the first type of dynamic / reactive values in a component. Making possible the behavior of this sample:

<!-- components/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>
    let count = 0;
    let status = '.on';
    
    const button = this.shadowRoot.querySelector('button');
    const span = this.shadowRoot.querySelector('span');

    function updateCount() {
        count++;

        if(status=='.on') {status = '.off'}
        else {status == '.on'}
        span.textContent = count;
    }

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

As you notice, the idea it's integrating this dynamic / reactive values through a simple syntax, using {value}, and letting our compiler format the optimized code to make possible such behavior. You must find the most optimal approach, that outperforms the way svelte does it (limit the comparison point to this specific type of behavior), the browser runtime and memory usage, and that fits our principles.

After you finding it, provide the cat.js with the implementation, and a debugging case.