HTML Import Compiler

HTML Import Compiler This project provides a powerful compiler that allows developers to import HTML files into other HTML files, similar to how JavaScript modules work. The compiler processes these imported files and generates a structured output containing a single index.html, styles.css, and index.js. This approach makes HTML development more modular and maintainable. Features Import HTML files inside another HTML file just like JavaScript modules. Automatic Compilation: All HTML files are merged into a single index.html. CSS Aggregation: All styles from different HTML files are combined into a single styles.css. JavaScript Consolidation: All JavaScript files are gathered and merged into index.js. Simple and easy-to-use setup. Installation Step 1: Clone the Repository Run the following command in your terminal to clone the repository: git clone https://github.com/seraprogrammer/htmlplusplus.git cd htmlplusplus Step 2: Install Dependencies Before using the compiler, you need to install the required dependencies: npm install How It Works Project Structure Your project should be structured like this: /project-root │── /pages │ ├── app.html │ ├── about.html │ ├── counter.html │── main.html │── package.json Creating Modular HTML Files Inside the /pages folder, create individual HTML components. For example: Welcome to My App Importing HTML Files in main.html Instead of manually copying content, you can import HTML files inside main.html just like JavaScript: Document import Main from "./pages/app.html"; import About from "./pages/about.html"; import Counter from "./pages/counter.html"; Compiling the Project Run the following command in the terminal: npm run dev This triggers the compiler, which processes the imported HTML files and generates a structured output in the dist/ folder. Output Files After running npm run dev, the compiler generates the following files: /dist │── index.html (Merged HTML output) │── styles.css (All CSS combined into one file) │── index.js (All JavaScript compiled together) Example Output Your final index.html will look something like this: Compiled Document Welcome to My App About Page Counter Benefits Modular HTML Development: No more messy copy-pasting of HTML content. Automatic Styling Aggregation: Keeps styles in one place for better maintainability. JavaScript File Consolidation: Ensures all scripts are properly merged into one file. Easy Maintenance: Editing a single file automatically updates the compiled output. Scalability: Ideal for large projects requiring multiple HTML components. Contribution We welcome contributions! Feel free to submit issues or pull requests to improve the project. License This project is licensed under the MIT License. You are free to use and modify it as needed. Now, anyone can import HTML files into another like JavaScript!

Mar 4, 2025 - 00:57

HTML Import Compiler

This project provides a powerful compiler that allows developers to import HTML files into other HTML files, similar to how JavaScript modules work. The compiler processes these imported files and generates a structured output containing a single index.html, styles.css, and index.js. This approach makes HTML development more modular and maintainable.

Features

Import HTML files inside another HTML file just like JavaScript modules.
Automatic Compilation: All HTML files are merged into a single index.html.
CSS Aggregation: All styles from different HTML files are combined into a single styles.css.
JavaScript Consolidation: All JavaScript files are gathered and merged into index.js.
Simple and easy-to-use setup.

Installation

Step 1: Clone the Repository

Run the following command in your terminal to clone the repository:

   git clone https://github.com/seraprogrammer/htmlplusplus.git
   cd htmlplusplus

Step 2: Install Dependencies

Before using the compiler, you need to install the required dependencies:

   npm install

How It Works

Project Structure

Your project should be structured like this:

/project-root
│── /pages
│   ├── app.html
│   ├── about.html
│   ├── counter.html
│── main.html
│── package.json

Creating Modular HTML Files

Inside the /pages folder, create individual HTML components. For example:



    Welcome to My App

Importing HTML Files in `main.html`

Instead of manually copying content, you can import HTML files inside main.html just like JavaScript:


 lang="en">


     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Document<span class="nt">



    

     />
     />
     />

Compiling the Project

Run the following command in the terminal:

   npm run dev

This triggers the compiler, which processes the imported HTML files and generates a structured output in the dist/ folder.

Output Files

After running npm run dev, the compiler generates the following files:

/dist
│── index.html     (Merged HTML output)
│── styles.css     (All CSS combined into one file)
│── index.js       (All JavaScript compiled together)

Example Output

Your final index.html will look something like this:


 lang="en">

     charset="UTF-8">
     name="viewport" content="width=device-width, initial-scale=1.0">
    </span>Compiled Document<span class="nt">
     rel="stylesheet" href="styles.css">


    
        Welcome to My App
    
    
        About Page

Benefits

Modular HTML Development: No more messy copy-pasting of HTML content.
Automatic Styling Aggregation: Keeps styles in one place for better maintainability.
JavaScript File Consolidation: Ensures all scripts are properly merged into one file.
Easy Maintenance: Editing a single file automatically updates the compiled output.
Scalability: Ideal for large projects requiring multiple HTML components.

Contribution

We welcome contributions! Feel free to submit issues or pull requests to improve the project.

License

This project is licensed under the MIT License. You are free to use and modify it as needed.

Now, anyone can import HTML files into another like JavaScript!