### cat\src\index.js

```javascript
const path = require('path');
const fs = require('fs-extra');

const { collectHTMLFiles } = require('./collector');
const { sliceContent } = require('./slicer');
const { parseContent } = require('./parser');
const { interpretHTML } = require('./body');
const { interpretScript } = require('./script');



async function compile(indexPath) {

    const projectRoot = path.dirname(indexPath);
    const collectedFiles = await collectHTMLFiles(projectRoot);

    // Log the collected files
    console.log('--- START ---');

    collectedFiles.forEach(file => {
        
        console.log('');
        console.log('');
        console.log('');
        console.log('');
        console.log(`====== ${ file.file } ======`);
        console.log('');
        console.log('');
        
        //Slicing
        file = sliced = { ...file, ...sliceContent(file) };

        // Parsing HTML and JS
        file = { ...file, ... parseContent(file) }

        // Interprete Body syntax
        file = { ...file, ... interpretHTML(file.body) }

        // Interprete Script syntax
        //  To implement... file = { ...file, ... interpretScript(file.script) }

        // Interpret Script syntax
        file.script = interpretScript(file.script);
        // Log `file` Object
        console.log(JSON.stringify(file, null, 2));

    });

    console.log('--- ENDS ---');
}

module.exports = { compile };
```

### cat\src\collector.js

```javascript
const fs = require('fs-extra');
const path = require('path');
const glob = require('glob');
const { determineFileType } = require('./typeof');

/**
 * Collect and structure HTML files from the project
 * @param {string} projectRoot - Root directory of the project
 * @returns {Object} - Structured object of HTML files
 */
async function collectHTMLFiles(projectRoot) {
  const htmlFiles = glob.sync('**/*.{comp.html,page.html}', {
    cwd: projectRoot,
    ignore: ['node_modules/**', 'cat/**'],
  });

  const collectedFiles = [];

  for (const file of htmlFiles) {
    const filePath = path.join(projectRoot, file);
    const content = await fs.readFile(filePath, 'utf-8');
    const fileType = determineFileType(file);

    collectedFiles.push({
        file,
        type: fileType,
        name: null,
        body: content,
        script: null,
        style:null,
        bindings: null
      });
  }

  return collectedFiles;
}

module.exports = { collectHTMLFiles };
```

### cat\src\parser.js

```javascript
const { parseDocument } = require('htmlparser2');
const acorn = require('acorn');

/**
 * Parser Module
 * 
 * This module parses HTML and JavaScript content into structured formats.
 */

/**
 * Parse HTML content into a tree-like structure
 * @param {string} htmlContent - Raw HTML content
 * @returns {Array} - Parsed HTML structure
 */
function parseHTML(htmlContent) {
  const rawParsed = parseDocument(htmlContent, { recognizeSelfClosing: true });
  
  function simplifyNode(node) {
    if (node.type === 'tag') {
      return {
        type: 'tag',
        name: node.name,
        attributes: node.attribs,
        children: node.children.map(simplifyNode).filter(Boolean)
      };
    } else if (node.type === 'text') {
      const content = node.data.trim();
      return content ? { type: 'text', content } : null;
    }
    return null;
  }

  return rawParsed.children.map(simplifyNode).filter(Boolean);
}

/**
 * Parse JavaScript content into an AST
 * @param {string} jsContent - Raw JavaScript content
 * @returns {Object} - JavaScript AST
 */
function parseJavaScript(jsContent) {
  return acorn.parse(jsContent, {
    ecmaVersion: 'latest',
    sourceType: 'script'
  });
}

/**
 * Parse both HTML and JavaScript content
 * @param {Object} file - Object containing body and script properties
 * @returns {Object} - Object with parsed body and script
 */
function parseContent(file) {
  const parsedBody = parseHTML(file.body);
  const parsedScript = file.script ? (parseJavaScript(file.script)).body : null;

  return {
    body: parsedBody,
    script: parsedScript
  };
}

module.exports = { parseContent };
```

### cat\src\slicer.js

```javascript
/**
 * Slicer Module
 * 
 * This module extracts content from HTML files, slicing it into main, script, and style sections.
 */

/**
 * Extract wrappers from content using regex
 * @param {string} content - Raw HTML content
 * @returns {Array} - Array of wrapper objects
 */
function extractWrappers(content) {
  const wrapperRegex = /<(\w+(?:-?\w+)*)>([\s\S]*?)<\/\1>/g;
  return Array.from(content.matchAll(wrapperRegex), match => ({
    tag: match[1],
    content: match[2],
  }));
}

/**
 * Identify the main wrapper (not script or style)
 * @param {Array} wrappers - Array of wrapper objects
 * @returns {Object} - The main wrapper object
 */
function identifyMainWrapper(wrappers) {
  const mainWrappers = wrappers.filter(w => !['script', 'style'].includes(w.tag.toLowerCase()));
  if (mainWrappers.length !== 1) {
    throw new Error('Invalid structure. Expected exactly one main wrapper.');
  }
  return mainWrappers[0];
}

/**
 * Slice HTML content into structured parts
 * @param {string} file - Raw HTML content to slice
 * @returns {Object} - Sliced structure with type, tagName, body, script, and style
 */
function sliceContent(file) {

  const wrappers = extractWrappers(file.body);

  if (wrappers.length > 3) 
    throw new Error(`${file.file} :: Invalid structure. Found ${wrappers.length} wrappers, maximum allowed is 3.`);
  
  const mainWrapper = identifyMainWrapper(wrappers);
  const scriptWrapper = wrappers.find(w => w.tag.toLowerCase() === 'script');
  const styleWrapper = wrappers.find(w => w.tag.toLowerCase() === 'style');

  return {
    type: file.type,
    name: mainWrapper.tag,
    body: mainWrapper.content,
    script: scriptWrapper ? scriptWrapper.content : null,
    style: styleWrapper ? styleWrapper.content : null
  };
}

module.exports = { sliceContent };
```

### cat\src\body.js

```javascript
/**
 * Body Interpreter Module
 * 
 * This module interprets the parsed HTML body, converting custom syntax to JavaScript template literals.
 * It also tracks all interpreted variables in a bindings array.
 */

/**
 * Convert custom syntax to JavaScript Template Literals and track bindings
 * @param {string} content - The content to interpret
 * @param {Set} bindingsSet - Set to store unique bindings
 * @returns {string} - The interpreted content
 */
function interpretContent(content, bindingsSet) {
    return content.replace(/\{([^}]+)\}/g, (match, p1) => {
      const trimmed = p1.trim();
      bindingsSet.add(trimmed);
      return `\${this.${trimmed}}`;
    });
  }
  
  /**
   * Recursively interpret the parsed body and collect bindings
   * @param {Array} parsedBody - The parsed HTML body
   * @param {Set} bindingsSet - Set to store unique bindings
   * @returns {Array} - The interpreted body
   */
  function interpretBody(parsedBody, bindingsSet) {
    return parsedBody.map(node => {
      if (node.type === 'tag') {
        return {
          ...node,
          children: interpretBody(node.children, bindingsSet)
        };
      } else if (node.type === 'text') {
        return {
          ...node,
          content: interpretContent(node.content, bindingsSet)
        };
      }
      return node;
    });
  }
  
  /**
   * Main function to interpret the body of a file and collect bindings
   * @param {Object} body - The parsed HTML body
   * @returns {Object} - Object containing the interpreted body and bindings array
   */
  function interpretHTML(body) {
    const bindingsSet = new Set();
    const interpretedBody = interpretBody(body, bindingsSet);
    return {
      body: interpretedBody,
      bindings: Array.from(bindingsSet)
    };
  }
  
  module.exports = { interpretHTML };
```

We need the `interpretetScript(file.script)` module, inside the file `script.js`. The module it's going to reconstruct the JavaScript code from the parsed AST format. But, categorizing the code by types:

- Variables : All the global variables
- Methods: All the methods, written on all the variation for writing a function on JavaScript.
- Events: All the events defined in the global scope.
- Calls: All the function calls declared on the global scope.

Our module it's going to return the `script` object.