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

  /**
   * 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 and script content
      templateCache.set(name, templateContent);
      scriptCache.set(name, scriptContent);

      class CustomElement extends HTMLElement {
        constructor() {
          super();
          const shadow = this.attachShadow({ mode: 'open' });
          shadow.innerHTML = templateCache.get(name);

          // Execute the component's script in the context of this instance
          if (scriptCache.has(name)) {
            const script = scriptCache.get(name);
            try {
              // Bind the script's context to this component instance
              new Function('component', script).call(this, this);
            } catch (error) {
              console.error(`Error executing script for component ${name}: ${error.message}`);
            }
          }
        }
      }

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

    function parseHTML(htmlString) {
      const parser = new DOMParser();
      const doc = parser.parseFromString(htmlString, 'text/html');
      return doc;
    }

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

  /**
   * Internal module for handling script execution and nested loading.
   */
  const ScriptProcessor = (function() {
    async function processScripts(doc, componentName) {
      const scripts = doc.querySelectorAll('script');
      for (const script of scripts) {
        if (script.type === 'module') {
          console.warn(`Module scripts are not supported: ${script.src}`);
          continue;
        }

        const scriptContent = script.textContent;

        if (scriptContent.trim()) {
          if (script.hasAttribute('data-load')) {
            // Handle load calls within scripts
            const loadCalls = [...scriptContent.matchAll(/load\(\s*['"]([^'"]+)['"](?:\s*,\s*['"]([^'"]+)['"])?\s*\)/g)];
            for (const match of loadCalls) {
              const componentPath = match[1];
              const targetSelector = match[2];
              await window.load(componentPath, targetSelector);
            }
          } else {
            // Assume it's component logic; handled during registration
            // No action needed here
          }
        }
      }
    }

    return {
      processScripts,
    };
  })();

  /**
   * Internal module for inserting content into the DOM.
   */
  const DOMHandler = (function() {
    function insertContent(doc, targetSelector) {
      const insert = () => {
        const targetElement = document.querySelector(targetSelector);
        if (targetElement) {
          const fragment = document.createDocumentFragment();
          const bodyContent = doc.body;
          while (bodyContent.firstChild) {
            fragment.appendChild(bodyContent.firstChild);
          }
          targetElement.appendChild(fragment);
        } else {
          console.error(`Target element not found: ${targetSelector}`);
        }
      };

      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', insert);
      } else {
        insert();
      }
    }

    return {
      insertContent,
    };
  })();

  /**
   * Global load function.
   * @param {string} path - The path to the HTML file (without .html extension).
   * @param {string} [targetSelector] - Optional CSS selector of the target element to insert content into.
   * @returns {Promise<void>}
   */
  window.load = async function(path, targetSelector) {
    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);

      // Process nested loads and other scripts
      await ScriptProcessor.processScripts(doc, componentName);

      // Insert content into the target element if specified
      if (targetSelector) {
        DOMHandler.insertContent(doc, targetSelector);
      }
    } 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. Feel free to ask any possible doubt or question you have about the project, in case you have them.

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.