### cat\src\compiler.js

```javascript
// cat/src/compiler.js

const fs = require('fs-extra');
const path = require('path');
const glob = require('glob');
const {
  parseComponent,
  generateComponentClassCode,
} = require('./component');
const {
  parsePageComponent,
  generatePageClassCode,
} = require('./page');
const { parseScript } = require('./scripter');

/**
 * Detect used components in the provided HTML contents by parsing the HTML tags.
 * @param {Array<string>} htmlContents - Array of HTML file contents.
 * @param {Set<string>} availableComponents - Set of all available component tag names.
 * @returns {Set<string>} - Set of used component tag names.
 */
function detectUsedComponents(htmlContents, availableComponents) {
  const usedComponents = new Set();

  // Regex to match all tags in the HTML
  const tagRegex = /<\s*([a-zA-Z][a-zA-Z0-9-]*)\b[^>]*>/g;

  htmlContents.forEach((content) => {
    let match;
    while ((match = tagRegex.exec(content)) !== null) {
      let tag = match[1];
      if (availableComponents.has(tag)) {
        usedComponents.add(tag);
      }
    }
  });

  return usedComponents;
}

/**
 * Generate the registration script for the components and pages.
 * @param {Map<string, string>} classes - Map of tagName to compiled class code.
 * @returns {string} - JavaScript code for registering components and pages.
 */
function generateRegistrationScript(classes) {
  let script = '';

  classes.forEach((classCode, tagName) => {
    script += `
${classCode}
    `;
  });

  return script;
}

/**
 * Generate the router script for handling <load> and <router> elements.
 * @param {Array<{ route: string, tagName: string }>} routeToTagName - Mappings of routes to tag names.
 * @returns {string} - JavaScript code for the router.
 */
function generateRouterScript(routeToTagName) {
  let routeMappings = routeToTagName
    .map(({ route, tagName }) => `    '${route}': '${tagName}'`)
    .join(',\n');

  return `
const routeToTagName = {
${routeMappings}
};

function loadRouteContent(routerId, route) {
  const tagName = routeToTagName[route];
  if (tagName) {
    const routerElement = document.getElementById(routerId);
    if (routerElement) {
      // Clear existing content
      routerElement.innerHTML = '';
      // Create and append the new page element
      const customElement = document.createElement(tagName);
      routerElement.appendChild(customElement);
      // Set up router for the newly loaded content
      setupRouterForElement(routerElement);
    } else {
      console.error('No router found with id:', routerId);
    }
  } else {
    console.error('No page found for route:', route);
  }
}

function handleRouterClick(event) {
  event.preventDefault();
  const navElement = event.currentTarget;
  const routerId = navElement.getAttribute('router');
  const route = navElement.getAttribute('route');

  // Remove 'current' attribute from all navigation elements with the same router
  document.querySelectorAll('[router="' + routerId + '"][route]').forEach(function(el) {
    el.removeAttribute('current');
  });

  // Set 'current' attribute on the clicked navigation element
  navElement.setAttribute('current', '');

  // Load the corresponding route content into the router container
  loadRouteContent(routerId, route);
}

function setupRouterForElement(element) {
  // Handle <load route=""> elements
  element.querySelectorAll('load[route]').forEach(function(loadElement) {
    const route = loadElement.getAttribute('route');
    const tagName = routeToTagName[route];
    if(tagName) {
      const customElement = document.createElement(tagName);
      // Copy all attributes from <load> to the custom element
      for (let i = 0; i < loadElement.attributes.length; i++) {
        let attr = loadElement.attributes[i];
        if (attr.name !== 'route') {
          customElement.setAttribute(attr.name, attr.value);
        }
      }
      loadElement.parentNode.replaceChild(customElement, loadElement);
      setupRouterForElement(customElement);
    } else {
      console.error('No page found for route:', route);
    }
  });

  // Handle navigation elements with [router] and [route] attributes
  element.querySelectorAll('[router][route]').forEach(function(navElement) {
    // Remove existing event listener if any
    navElement.removeEventListener('click', handleRouterClick);

    // Add the new click event listener
    navElement.addEventListener('click', handleRouterClick);
  });

  // Initial loading based on elements with 'current' attribute
  element.querySelectorAll('[router][route][current]').forEach(function(navElement) {
    const routerId = navElement.getAttribute('router');
    const route = navElement.getAttribute('route');
    loadRouteContent(routerId, route);
  });
}

function setupRouter() {
  setupRouterForElement(document);
}

document.addEventListener('DOMContentLoaded', setupRouter);
`;
}

/**
 * Compiler Function
 * @param {string} indexPath - Path to the index.html file.
 * @returns {Promise<string>} - Compiled HTML content with component registrations.
 */
async function compile(indexPath) {
  // Read the index.html content
  let indexContent = await fs.readFile(indexPath, 'utf-8');

  // Define project root
  const projectRoot = path.dirname(indexPath);

  // Initialize style accumulator
  let accumulatedStyles = '';

  // -----------------------
  // Step 1: Process Components and Pages
  // -----------------------

  // Find all .comp.html and .page.html files in the project directory
  const compFiles = glob.sync('**/*.comp.html', {
    cwd: projectRoot,
    absolute: true,
    ignore: ['node_modules/**', 'cat/**'], // Ignore node_modules and cat directory to prevent recursion
  });

  const pageFiles = glob.sync('**/*.page.html', {
    cwd: projectRoot,
    absolute: true,
    ignore: ['node_modules/**', 'cat/**'],
  });

  const componentMap = new Map(); // Map of tagName to compiled class code
  const parsedComponents = new Set(); // To track parsed components
  const routeTagMap = []; // Array of { route, tagName }

  // Parse and compile each component file
  for (const file of compFiles) {
    try {
      const { tagName, html, script, style } = await parseComponent(file);

      if (!parsedComponents.has(tagName)) {
        // Parse script to extract properties and methods
        const { properties, methods } = parseScript(script);

        // Generate class code
        const classCode = generateComponentClassCode({
          tagName,
          html,
          style,
          properties,
          methods,
        });

        componentMap.set(tagName, classCode);
        parsedComponents.add(tagName);

        // Accumulate styles
        if (style && style.trim()) {
          accumulatedStyles += `\n/* Styles for component: ${tagName} */\n${style}`;
        }

        console.log(
          `🔍 Parsed and compiled component: <${tagName}> from ${path.relative(
            projectRoot,
            file
          )}`
        );
      } else {
        console.log(
          `ℹ️  Component <${tagName}> from ${path.relative(
            projectRoot,
            file
          )} has already been parsed.`
        );
      }
    } catch (error) {
      console.error(`❌ Failed to parse ${file}: ${error.message}`);
    }
  }

  // Parse and compile each page file as a custom element
  for (const file of pageFiles) {
    try {
      const { tagName, route, html, script, style } = await parsePageComponent(
        file
      );

      // Generate class code for all pages, regardless of usage
      const { properties, methods } = parseScript(script);
      const classCode = generatePageClassCode({
        tagName,
        html,
        style,
        properties,
        methods,
      });

      componentMap.set(tagName, classCode);
      parsedComponents.add(tagName);

      // Accumulate styles
      if (style && style.trim()) {
        accumulatedStyles += `\n/* Styles for page: ${tagName} */\n${style}`;
      }

      // Add to routeTagMap
      routeTagMap.push({ route, tagName });

      console.log(
        `📄 Parsed and compiled page: <${tagName}> with route "${route}" from ${path.relative(
          projectRoot,
          file
        )}`
      );
    } catch (error) {
      console.error(`❌ Failed to parse page ${file}: ${error.message}`);
    }
  }

  if (componentMap.size === 0) {
    console.warn('⚠️  No components or pages found to compile.');
  }

  // -----------------------
  // Step 2: Detect Used Components and Pages
  // -----------------------

  // Find all .html files in the project directory for usage detection
  const htmlFiles = glob.sync('**/*.html', {
    cwd: projectRoot,
    absolute: true,
    ignore: ['node_modules/**', 'cat/**'],
  });

  const htmlContents = [];
  for (const file of htmlFiles) {
    try {
      const content = await fs.readFile(file, 'utf-8');
      htmlContents.push(content);
    } catch (error) {
      console.error(`❌ Failed to read HTML file ${file}: ${error.message}`);
    }
  }

  // Detect which components and pages are used across all HTML files
  const availableComponents = new Set(componentMap.keys());
  const usedComponents = detectUsedComponents(
    htmlContents,
    availableComponents
  );

  // Also detect used routes from <load> tags and <router> tags
  const loadTagRegex = /<load\s+[^>]*route=["']([^"']+)["'][^>]*>/gi;
  let loadRoutes = [];
  htmlContents.forEach((content) => {
    let match;
    while ((match = loadTagRegex.exec(content)) !== null) {
      const route = match[1];
      loadRoutes.push(route);
    }
  });

  // Additionally, handle <router name="..."/> tags
  const routerTagRegex = /<router\s+name=["']([^"']+)["']\s*\/>/gi;
  let routerNames = [];
  htmlContents.forEach((content) => {
    let match;
    while ((match = routerTagRegex.exec(content)) !== null) {
      const routerName = match[1];
      routerNames.push(routerName);
    }
  });

  // Map routes to tagNames
  loadRoutes.forEach((route) => {
    const mapping = routeTagMap.find((r) => r.route === route);
    if (mapping) {
      usedComponents.add(mapping.tagName);
    } else {
      console.error(
        `❌ No page found for route "${route}". Please ensure a .page.html file exists with route="${route}".`
      );
    }
  });

  if (usedComponents.size === 0) {
    console.warn('⚠️  No used components or pages found in HTML files.');
  } else {
    console.log(
      `📦 Used components and pages: ${[...usedComponents].join(', ')}`
    );
  }

  // -----------------------
  // Step 3: Generate Registration and Router Script
  // -----------------------

  // Generate the registration script for all components and pages
  const registrationScript = generateRegistrationScript(componentMap);

  // Generate the router script
  const routerScript = generateRouterScript(routeTagMap);

  // Combine scripts
  const fullScript = `
${registrationScript}
${routerScript}
`;

  // -----------------------
  // Step 4: Inject Styles and Script
  // -----------------------

  // Inject the accumulated styles into the <head> tag
  if (accumulatedStyles.trim()) {
    const styleTag = `<style>
${accumulatedStyles}
</style>
`;

    // Check if <head> exists
    if (indexContent.includes('</head>')) {
      indexContent = indexContent.replace('</head>', `${styleTag}</head>`);
    } else {
      // If no </head>, check for <html> tag to insert after
      if (indexContent.includes('<html')) {
        indexContent = indexContent.replace(
          /<html[^>]*>/,
          `$&\n<head>\n${styleTag}\n</head>`
        );
      } else {
        // If no <html> tag, prepend the style tag
        indexContent = `<head>\n${styleTag}\n</head>\n${indexContent}`;
      }
    }
    console.log('🎨 Injected accumulated styles into <head>');
  }

  // Inject the script before the closing </body> tag
  if (fullScript.trim()) {
    const scriptTag = `<script>
${fullScript}
</script>
`;

    if (indexContent.includes('</body>')) {
      indexContent = indexContent.replace('</body>', `${scriptTag}</body>`);
    } else {
      // If no </body> tag, append the script at the end
      indexContent += `\n${scriptTag}`;
    }
    console.log('📝 Injected component, page registrations, and router script.');
  }

  // -----------------------
  // Step 5: Return Compiled Content
  // -----------------------

  return indexContent;
}

module.exports = { compile };
```

### cat\src\component.js

```javascript
// cat/src/component.js

const fs = require('fs-extra');
const path = require('path');
const {
  parseScript,
  generateDOMCode,
  generateClassBodyCode,
} = require('./scripter');

/**
 * Parse a component file to extract tagName, HTML, script, and style sections.
 * @param {string} filePath - Path to the .comp.html file.
 * @returns {Promise<{ tagName: string, html: string, script: string, style: string }>} - Component details.
 */
async function parseComponent(filePath) {
  const content = await fs.readFile(filePath, 'utf-8');

  // Extract the outermost tag name and inner HTML
  const componentRegex = /<([\w-]+)>([\s\S]*?)<\/\1>/;
  const componentMatch = content.match(componentRegex);

  if (!componentMatch) {
    throw new Error(
      `Invalid component structure in ${path.basename(filePath)}`
    );
  }

  let tagName = componentMatch[1];
  let innerContent = componentMatch[2];

  // Adjust tagName if it doesn't have a hyphen
  if (!tagName.includes('-')) {
    tagName = `${tagName}-comp`;
  }

  // Extract all <script> sections
  const scriptRegex = /<script>([\s\S]*?)<\/script>/g;
  let scriptContent = '';
  let scriptMatch;
  while ((scriptMatch = scriptRegex.exec(content)) !== null) {
    scriptContent += scriptMatch[1].trim() + '\n';
  }

  // Extract all <style> sections
  const styleRegex = /<style>([\s\S]*?)<\/style>/g;
  let styleContent = '';
  let styleMatch;
  while ((styleMatch = styleRegex.exec(content)) !== null) {
    styleContent += styleMatch[1].trim() + '\n';
  }

  // Remove all <script> and <style> tags from innerContent
  innerContent = innerContent
    .replace(scriptRegex, '')
    .replace(styleRegex, '')
    .trim();

  return {
    tagName,
    html: innerContent,
    script: scriptContent,
    style: styleContent,
  };
}

/**
 * Convert a kebab-case or other tag name to PascalCase for class naming.
 * @param {string} tagName - The custom element tag name.
 * @returns {string} - PascalCase string.
 */
function toPascalCase(tagName) {
  return tagName
    .split('-')
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join('');
}

/**
 * Generate the class code for the component.
 * @param {object} component - Component details.
 * @returns {string} - The compiled class code.
 */
function generateComponentClassCode({
  tagName,
  html,
  style,
  properties,
  methods,
}) {
  const className = toPascalCase(tagName);

  // Generate DOM code
  const { code: domCode, cachedNodes, eventListeners } = generateDOMCode(html);

  // Generate class body
  const classBody = generateClassBodyCode({
    properties,
    methods,
    domCode,
    cachedNodes,
    eventListeners,
    isComponent: true, // Components are custom elements
    parentClass: 'HTMLElement', // Components extend HTMLElement
  });

  // Assemble the full class code
  let classCode = `class ${className} extends HTMLElement {
${classBody}
}

customElements.define('${tagName}', ${className});
`;

  return classCode;
}

module.exports = {
  parseComponent,
  generateComponentClassCode,
  toPascalCase,
};
```

### cat\src\page.js

```javascript
// cat/src/page.js

const fs = require('fs-extra');
const path = require('path');
const {
  parseScript,
  generateDOMCode,
  generateClassBodyCode,
} = require('./scripter');
const { toPascalCase } = require('./component');

/**
 * Parse a page component file to extract tagName, route, HTML, script, and style sections.
 * @param {string} filePath - Path to the .page.html file.
 * @returns {Promise<{ tagName: string, route: string, html: string, script: string, style: string }>} - Page details.
 */
async function parsePageComponent(filePath) {
  const content = await fs.readFile(filePath, 'utf-8');

  // Extract the outermost tag name, attributes, and inner HTML
  const pageTagRegex = /<([\w-]+)([^>]*)>([\s\S]*?)<\/\1>/i;
  const match = content.match(pageTagRegex);

  if (!match) {
    throw new Error(
      `Invalid page structure in ${path.basename(filePath)}`
    );
  }

  let tagName = match[1];
  const attributesString = match[2];
  let innerContent = match[3];

  // Extract route attribute
  const routeRegex = /route\s*=\s*['"]([^'"]+)['"]/i;
  const routeMatch = attributesString.match(routeRegex);
  let route = '';
  if (routeMatch) {
    route = routeMatch[1];
  } else {
    throw new Error(
      `No 'route' attribute found in page tag in ${path.basename(filePath)}`
    );
  }

  // Adjust tagName if it doesn't have a hyphen
  if (!tagName.includes('-')) {
    tagName = `${tagName}-page`;
  }

  // Extract all <script> sections from the entire content
  const scriptRegex = /<script>([\s\S]*?)<\/script>/g;
  let scriptContent = '';
  let scriptMatch;
  while ((scriptMatch = scriptRegex.exec(content)) !== null) {
    scriptContent += scriptMatch[1].trim() + '\n';
  }

  // Extract all <style> sections from the entire content
  const styleRegex = /<style>([\s\S]*?)<\/style>/g;
  let styleContent = '';
  let styleMatch;
  while ((styleMatch = styleRegex.exec(content)) !== null) {
    styleContent += styleMatch[1].trim() + '\n';
  }

  // Remove all <script> and <style> tags from innerContent
  innerContent = innerContent
    .replace(scriptRegex, '')
    .replace(styleRegex, '')
    .trim();

  return {
    tagName,
    route,
    html: innerContent,
    script: scriptContent,
    style: styleContent,
  };
}

/**
 * Generate the class code for the page.
 * @param {object} page - Page details.
 * @returns {string} - The compiled class code.
 */
function generatePageClassCode({
  tagName,
  html,
  style,
  properties,
  methods,
}) {
  const className = toPascalCase(tagName);

  // Generate DOM code
  const { code: domCode, cachedNodes, eventListeners } = generateDOMCode(html);

  // Generate class body
  const classBody = generateClassBodyCode({
    properties,
    methods,
    domCode,
    cachedNodes,
    eventListeners,
    isComponent: true, // Pages are custom elements
    parentClass: 'HTMLElement', // Pages extend HTMLElement
  });

  // Assemble the full class code
  let classCode = `class ${className} extends HTMLElement {
${classBody}
}

customElements.define('${tagName}', ${className});
`;

  return classCode;
}

module.exports = {
  parsePageComponent,
  generatePageClassCode,
};
```

### cat\src\scripter.js

```javascript
// cat/src/scripter.js

const acorn = require('acorn'); // Import Acorn for JavaScript parsing
const { parseDocument } = require('htmlparser2');

/**
 * Parse the script content to extract properties and methods.
 * @param {string} script - The script content.
 * @returns {{ properties: Array, methods: Array }} - Parsed properties and methods.
 */
function parseScript(script) {
  const properties = [];
  const methods = [];

  try {
    // Parse the script content into an AST
    const ast = acorn.parse(script, { ecmaVersion: 2020, locations: true });

    ast.body.forEach(node => {
      if (node.type === 'VariableDeclaration') {
        node.declarations.forEach(declarator => {
          if (declarator.id.type === 'Identifier') {
            const varName = declarator.id.name;
            const varValue = script.substring(declarator.init.start, declarator.init.end);
            properties.push({ name: varName, value: varValue });
          }
        });
      } else if (node.type === 'FunctionDeclaration') {
        const funcName = node.id.name;
        const params = node.params.map(param => script.substring(param.start, param.end)).join(', ');
        const body = script.substring(node.body.start, node.body.end);
        methods.push({ name: funcName, params, body });
      }
    });
  } catch (error) {
    console.error(`Error parsing script: ${error.message}`);
  }

  return { properties, methods };
}

/**
 * Transform method body to replace variable references with 'this.' prefix.
 * @param {string} body - The method body.
 * @param {Array<string>} propNames - The property names to replace.
 * @returns {string} - The transformed method body.
 */
function transformMethodBody(body, propNames) {
  let transformedBody = body;

  propNames.forEach(propName => {
    // Replace assignments like 'propName = value;' with 'this.propName = value;'
    const assignRegex = new RegExp(`([^\\.\\w$])${propName}\\s*=`, 'g');
    transformedBody = transformedBody.replace(assignRegex, `$1this.${propName} =`);

    // Replace variable references with 'this.propName'
    const varRegex = new RegExp(`([^\\.\\w$])${propName}([^\\w$])`, 'g');
    transformedBody = transformedBody.replace(varRegex, `$1this.${propName}$2`);
  });

  // Ensure braces are correctly balanced and formatted
  transformedBody = transformedBody.trim();

  // Remove extra outer braces if they exist
  if (transformedBody.startsWith('{') && transformedBody.endsWith('}')) {
    transformedBody = transformedBody.slice(1, -1).trim();
  }

  // Properly indent the method body
  transformedBody = transformedBody
    .split('\n')
    .map(line => '    ' + line.trim())
    .join('\n');

  return transformedBody;
}

/**
 * Sanitize a string to be a valid JavaScript variable name.
 * @param {string} name - The original name.
 * @returns {string} - The sanitized name.
 */
function sanitizeVarName(name) {
  // Replace invalid characters with underscores
  return name.replace(/[^a-zA-Z0-9_$]/g, '_');
}

/**
 * Generate DOM creation code from HTML using htmlparser2.
 * @param {string} html - The inner HTML string of the component or page.
 * @returns {object} - Object containing generated code, cached nodes, and event listeners.
 */
function generateDOMCode(html) {
  const dom = parseDocument(html).children; // Array of DOM nodes

  let code = '';
  let varCounter = 0;
  const cachedNodes = {}; // For properties to nodes
  const eventListeners = [];

  function traverse(node, parentVarName) {
    if (node.type === 'tag') {
      const safeName = sanitizeVarName(node.name);
      const varName = safeName + ++varCounter;

      // Decide whether to assign to 'this.' or 'const'
      let declaration;
      if (needsReference(node)) {
        declaration = `this.${varName}`;
      } else {
        declaration = `const ${varName}`;
      }

      const varReference = declaration.replace(/^const /, '');

      if (node.name === 'router') {
        // Handle router tag
        const nameAttr = node.attribs.name;
        code += `    ${declaration} = document.createElement('div');
    ${varReference}.id = '${nameAttr}';
`;
      } else {
        code += `    ${declaration} = document.createElement('${node.name}');
`;
      }

      // Handle attributes
      const attribs = node.attribs || {};
      for (let [attrName, attrValue] of Object.entries(attribs)) {
        if (attrName === 'class' || attrName === 'style' || attrName.startsWith('data-') || attrName === 'id' || attrName === 'src' || attrName === 'alt') {
          // Handle attributes with embedded expressions
          const { expression, propNames } = generateAttributeExpression(attrValue);
          code += `    ${varReference}.setAttribute('${attrName}', ${expression});
`;

          // Cache nodes for reactive updates
          propNames.forEach(propName => {
            if (!cachedNodes[propName]) cachedNodes[propName] = [];
            cachedNodes[propName].push({
              type: 'attribute',
              elementVarName: varReference.replace(/^this\./, ''),
              attrName: attrName,
              expression: generateAttributeExpression(attrValue).expression,
            });
          });
        } else if (attrName.startsWith('on')) {
          // Event listener
          const event = attrName.substring(2);
          const handlerName = attrValue.replace(/$$$/, '').trim();
          eventListeners.push({ elementVarName: varReference.replace(/^this\./, ''), event, handlerName });
        } else if (node.name !== 'router' || attrName !== 'name') {
          // For other attributes, excluding 'name' attribute of router
          code += `    ${varReference}.setAttribute('${attrName}', '${attrValue}');
`;
        }
      }

      // Append to parent
      const parentRef = parentVarName ? parentVarName : 'fragment';
      code += `    ${parentRef}.appendChild(${varReference});
`;

      // Traverse children
      if (node.children && node.children.length) {
        for (let child of node.children) {
          traverse(child, varReference);
        }
      }
    } else if (node.type === 'text') {
      const textContent = node.data;

      if (textContent.trim()) {
        // Handle text nodes with expressions
        const { expression, propNames } = generateTextExpression(textContent);

        const varName = 'textNode' + ++varCounter;

        // Decide whether to assign to 'this.' or 'const'
        let declaration;
        if (expression.includes('this._')) {
          declaration = `this.${varName}`;
        } else {
          declaration = `const ${varName}`;
        }

        const varReference = declaration.replace(/^const /, '');
        code += `    ${declaration} = document.createTextNode(${expression});
`;
        code += `    ${parentVarName}.appendChild(${varReference});
`;

        // Cache nodes for reactive updates
        propNames.forEach(propName => {
          if (!cachedNodes[propName]) cachedNodes[propName] = [];
          cachedNodes[propName].push({
            type: 'text',
            varName: varReference.replace(/^this\./, ''),
            expression: generateTextExpression(textContent).expression,
          });
        });
      }
    }
  }

  function needsReference(node) {
    // Determines if the element needs to be assigned to 'this.'
    // Elements that are:
    // - Targets of event listeners
    // - Contain reactive expressions
    // Need to be accessible outside of _buildDOM
    if (node.attribs) {
      const hasEventListener = Object.keys(node.attribs).some(attr => attr.startsWith('on'));
      const hasReactiveAttr = Object.values(node.attribs).some(value => /\{([\w$]+)\}/.test(value));
      if (hasEventListener || hasReactiveAttr) {
        return true;
      }
    }

    if (node.children && node.children.some(child => child.type === 'text' && /\{([\w$]+)\}/.test(child.data))) {
      return true;
    }

    return false;
  }

  function generateTextExpression(textContent) {
    const exprRegex = /\{([\w$]+)\}/g;
    let segments = [];
    let propNames = [];
    let lastIndex = 0;
    let match;

    while ((match = exprRegex.exec(textContent)) !== null) {
      if (match.index > lastIndex) {
        segments.push(JSON.stringify(textContent.slice(lastIndex, match.index)));
      }
      segments.push(`this._${match[1]}`);
      propNames.push(match[1]);
      lastIndex = exprRegex.lastIndex;
    }

    if (lastIndex < textContent.length) {
      segments.push(JSON.stringify(textContent.slice(lastIndex)));
    }

    return {
      expression: segments.join(' + '),
      propNames,
    };
  }

  function generateAttributeExpression(attrValue) {
    const exprRegex = /\{([\w$]+)\}/g;
    let segments = [];
    let propNames = [];
    let lastIndex = 0;
    let match;

    while ((match = exprRegex.exec(attrValue)) !== null) {
      if (match.index > lastIndex) {
        segments.push(JSON.stringify(attrValue.slice(lastIndex, match.index)));
      }
      segments.push(`this._${match[1]}`);
      propNames.push(match[1]);
      lastIndex = exprRegex.lastIndex;
    }

    if (lastIndex < attrValue.length) {
      segments.push(JSON.stringify(attrValue.slice(lastIndex)));
    }

    return {
      expression: segments.join(' + '),
      propNames,
    };
  }

  dom.forEach(node => traverse(node, null));

  return { code, cachedNodes, eventListeners };
}

/**
 * Generate the class body code for components and pages.
 * @param {object} options - Options for class body generation.
 * @returns {string} - The class body code.
 */
function generateClassBodyCode({ properties, methods, domCode, cachedNodes, eventListeners, isComponent, parentClass }) {
  let classBody = '';

  // Constructor
  classBody += `  constructor() {
    `;

  // Include super() call if there is a parent class
  if (parentClass) {
    classBody += `super();
    `;
  }

  // Initialize properties
  properties.forEach(prop => {
    classBody += `    this._${prop.name} = ${prop.value};
    `;
  });

  // For components, do not build DOM in constructor
  if (!isComponent) {
    // For pages, build DOM in constructor
    classBody += `
    this._buildDOM();
    `;
  }

  classBody += `  }

  _buildDOM() {
    const fragment = document.createDocumentFragment();
`;

  // Include DOM creation code
  classBody += domCode;

  if (isComponent) {
    classBody += `
    this._fragment = fragment;
  }
  `;
  } else {
    classBody += `
    this.rootElement = fragment;
  }
  `;
  }

  // connectedCallback
  classBody += `
  connectedCallback() {
  `;

  if (isComponent) {
    classBody += `    this._buildDOM();
    this.appendChild(this._fragment);
  `;
  }

  // Attach event listeners
  if (eventListeners && eventListeners.length > 0) {
    eventListeners.forEach(listener => {
      classBody += `    this.${listener.elementVarName}.addEventListener('${listener.event}', this.${listener.handlerName}.bind(this));
  `;
    });
  }
  classBody += `  }

  disconnectedCallback() {
  `;

  // Remove event listeners
  if (eventListeners && eventListeners.length > 0) {
    eventListeners.forEach(listener => {
      classBody += `    this.${listener.elementVarName}.removeEventListener('${listener.event}', this.${listener.handlerName}.bind(this));
  `;
    });
  }
  classBody += `  }
  `;

  // Generate getters and setters
  Object.keys(cachedNodes).forEach(propName => {
    const nodes = cachedNodes[propName];

    classBody += `
  get ${propName}() { return this._${propName}; }
  set ${propName}(value) {
    if (this._${propName} !== value) {
      this._${propName} = value;
`;
    nodes.forEach(node => {
      if (node.type === 'text') {
        classBody += `      this.${node.varName}.textContent = ${node.expression};
  `;
      } else if (node.type === 'attribute') {
        classBody += `      this.${node.elementVarName}.setAttribute('${node.attrName}', ${node.expression});
  `;
      }
    });
    classBody += `    }
  }
  `;
  });

  // Add methods
  methods.forEach(method => {
    const transformedBody = transformMethodBody(method.body, properties.map(p => p.name));
    classBody += `
  ${method.name}(${method.params}) {
${transformedBody}
  }
  `;
  });

  return classBody;
}

module.exports = {
  parseScript,
  transformMethodBody,
  generateDOMCode,
  generateClassBodyCode,
};
```

Integrate a new feature into our compiler for an isolated attribute data binding, leveraging native APIs, where you can set this type of behavior:

### app\pages\app.page.html

```html
<!-- app.page.html -->
<app route="/">
    <h1>{title}</h1>
    <item-comp prop-uid="{index}" prop-name="Beaer"></item-comp>
    <button onclick="increment">Increment</button>
</app>

<script>
    let title = 98;
    let index = 1;

    function increment() {
        index++
    }
</script>
```

### app\comp\tester.comp.html

```html
<!-- tester.comp.html -->
<item-comp>
  <h1>{prop.name}</h1>
  <h2>{prop.uid}</h2>
  <p>{description}</p>
</item-comp>

<script>
  let description = 'This is a product target A';
</script>
```

### Compiled component

```javascript
class ItemComp extends HTMLElement {
  constructor() {
    super();
        this._another = 'type of binding';
        this.prop = {
	        name: //method for getting the value from the attribute,
	        uid: // method for getting the value from the attribute
        }
      }
	//...
```

The idea it's, on build time, when looking at `.comp.html` files, detect the usage of `prop.{key}`, from there create a new `prop` object inside the constructor of the component's class, as we do with local bindings. Inside the `prop` object, we set at build time too the keys, looking at their attributes on the element. Once you finish, output the changed files, fully.

For now, focus on setting up the logic of compiling them into the prop object within the component's class. Once we define this, and that works correctly, then we move with their getter and setters.