npm - html-component-engine - Versions diffs - 0.1.0 → 0.1.1 - Mend

html-component-engine 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (4) hide show

package/README.md CHANGED Viewed

@@ -1,247 +1,36 @@
 # HTML Component Engine
-A lightweight Vite plugin that enables reusable HTML components for static site generation. Compiles to pure HTML with inlined CSS/JS - no runtime JavaScript required.
+A lightweight Vite plugin for HTML components.
-## Features
-- ✅ Reusable HTML components with props
-- ✅ **Slot/children support** - Pass content into components
-- ✅ CSS/JS inlining - No external files in production
-- ✅ Variant system for component styles
-- ✅ Nested components
-- ✅ Hot reload during development
-- ✅ Zero runtime JavaScript
-## Installation
+## Quick Start
 ```bash
-npm install html-component-engine
+npx html-component-engine
 ```
-Requires Vite ^7.0.0
+## Commands
-## Folder Structure
+```bash
+npm run dev    # Development server
+npm run build  # Production build
+```
-Your project must follow this structure:
+## Project Structure
 ```
 src/
-  pages/           # HTML pages (compiled to dist/*.html)
-    index.html
-    about.html
-  components/      # Reusable components
+  index.html
+  about.html
+  components/
     Header.html
     Footer.html
     Card.html
-    main/
-      Button.html
-  assets/          # Static assets
-    styles/
-      styles.css
-    images/
-    fonts/
-```
-- `src/pages/`: HTML pages - each becomes an output file
-- `src/components/`: Reusable HTML components (supports nested folders and .js files)
-- `src/assets/`: Static assets - images/fonts copied to `dist/assets/`, CSS/JS inlined
-## Configuration
-```javascript
-// vite.config.js
-import htmlComponentEngine from 'html-component-engine';
-export default {
-  plugins: [
-    htmlComponentEngine({
-      pagesDir: 'src/pages',       // Pages directory (default)
-      componentsDir: 'src/components', // Components directory (default)
-      assetsDir: 'src/assets',     // Assets directory (default)
-      inlineStyles: true,          // Inline CSS into HTML (default: true)
-      inlineScripts: true,         // Inline JS into HTML (default: true)
-    })
-  ],
-  build: {
-    outDir: 'dist',
-    emptyOutDir: true,
-  }
-};
-```
-## Component Syntax
-### Self-Closing Components (Props Only)
-Use `<Component src="...">` for simple components:
-```html
-<!-- src/pages/index.html -->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>My Page</title>
-  <link rel="stylesheet" href="/styles/styles.css">
-</head>
-<body>
-  <Component src="Header" />
-  <h1>Welcome</h1>
-  <Component src="main/Button" text="Click Me" variant="primary" />
-  <Component src="Footer" />
-</body>
-</html>
-```
-### Components with Children (Slots)
-Use `<Component name="...">` for components that accept children:
-```html
-<Component name="Card" title="My Card">
-  <h2>Hello</h2>
-  <p>This content is passed to the component's slot</p>
-</Component>
-```
-Component template with `{{ children }}` slot:
-```html
-<!-- src/components/Card.html -->
-<div class="card">
-  <div class="card-header">
-    <h4>{{ title }}</h4>
-  </div>
-  <div class="card-body">
-    {{ children }}
-  </div>
-</div>
-```
-**Output:**
-```html
-<div class="card">
-  <div class="card-header">
-    <h4>My Card</h4>
-  </div>
-  <div class="card-body">
-    <h2>Hello</h2>
-    <p>This content is passed to the component's slot</p>
-  </div>
-</div>
-```
-### Props and Variants
-In component files, use `{{propName}}` placeholders:
-```html
-<!-- src/components/main/Button.html -->
-<!-- variants: primary=primary-btn, secondary=secondary-btn -->
-<button class="{{variantClasses}}">{{text}}</button>
-```
-Usage:
-```html
-<Component src="main/Button" text="Click Me" variant="primary" />
 ```
-### JavaScript Components
-Components can also be JavaScript files:
-```javascript
-// src/components/Counter.js
-export default function Counter({ initial = 0 }) {
-  return `
-    <div class="counter">
-      <button onclick="this.nextElementSibling.textContent--">-</button>
-      <span>${initial}</span>
-      <button onclick="this.previousElementSibling.textContent++">+</button>
-    </div>
-  `;
-}
-```
-Usage: `<Component src="Counter" initial="5" />`
-## Development
-Run the development server:
-```bash
-npm run dev
-```
-Live reload is enabled - changes to pages, components, or assets automatically refresh the browser.
-## Build
-Build for production:
-```bash
-npm run build
-```
-### Build Output
-The build generates:
+## Build Output
 ```
 dist/
-  index.html      # Compiled HTML with inlined CSS
-  about.html      # All components resolved
-  assets/
-    images/       # Copied from src/assets
-    fonts/        # Only non-CSS/JS assets
-```
-**Key features:**
-- ✅ All `<Component>` tags replaced with actual HTML
-- ✅ CSS inlined as `<style>` tags
-- ✅ JS inlined as `<script>` tags
-- ✅ No standalone `.css` or `.js` files
-- ✅ Assets (images, fonts) copied to `dist/assets/`
-- ✅ Valid, production-ready HTML
-## API
-### Plugin Options
-| Option | Type | Default | Description |
-|--------|------|---------|-------------|
-| `pagesDir` | string | `'src/pages'` | Directory containing HTML pages |
-| `componentsDir` | string | `'src/components'` | Directory containing components |
-| `assetsDir` | string | `'src/assets'` | Directory containing assets |
-| `inlineStyles` | boolean | `true` | Inline CSS into HTML |
-| `inlineScripts` | boolean | `true` | Inline JS into HTML |
-### Component Attributes
-**Self-closing components (`<Component src="..." />`):**
-- `src` (required): Component path relative to `componentsDir`
-- `variant`: Apply variant classes
-- Any other attribute: Passed as props
-**Components with children (`<Component name="...">`):**
-- `name` (required): Component name/path
-- Any other attribute: Passed as props
-### Placeholders
-- `{{ propName }}`: Replaced with prop value
-- `{{ children }}`: Replaced with component's inner content
-- `{{ variantClasses }}`: Replaced with variant classes
-## Example
-See the `example/` directory for a complete working example:
-```bash
-cd example
-npm install
-npm run dev    # Development
-npm run build  # Production build
+  index.html
+  about.html
 ```

package/bin/cli.js CHANGED Viewed

@@ -39,7 +39,7 @@ function question(rl, prompt) {
 const templates = {
   'package.json': (projectName) => `{
   "name": "${projectName}",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -48,7 +48,7 @@ const templates = {
   },
   "devDependencies": {
     "vite": "^7.0.0",
-    "html-component-engine": "^0.1.0"
+    "html-component-engine": "^0.1.1"
   }
 }
 `,
@@ -63,7 +63,7 @@ export default {
       assetsDir: 'assets',
     })
   ],
-  publicDir: 'src/assets',
+  publicDir: 'src',            // Serve src/assets as /assets during dev
   build: {
     outDir: 'dist',
     emptyOutDir: true,
@@ -77,7 +77,7 @@ export default {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Home | My Website</title>
-  <link rel="stylesheet" href="/styles/main.css">
+  <link rel="stylesheet" href="/assets/styles/main.css">
 </head>
 <body>
   <Component src="Header" title="My Website" />
@@ -116,7 +116,7 @@ export default {
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>About | My Website</title>
-  <link rel="stylesheet" href="/styles/main.css">
+  <link rel="stylesheet" href="/assets/styles/main.css">
 </head>
 <body>
   <Component src="Header" title="My Website" />

package/package.json CHANGED Viewed

@@ -1,11 +1,11 @@
 {
   "name": "html-component-engine",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "A Vite plugin for HTML component components with a lightweight static site compiler",
   "type": "module",
   "main": "src/index.js",
   "bin": {
-    "html-component": "./bin/cli.js"
+    "html-component-engine": "./bin/cli.js"
   },
   "files": [
     "src",

package/src/index.js CHANGED Viewed

@@ -21,8 +21,8 @@ export default function htmlComponentEngine(options = {}) {
     srcDir = 'src',
     componentsDir = 'components',
     assetsDir = 'assets',
-    inlineStyles = true,
-    inlineScripts = true,
+    inlineStyles = false,
+    inlineScripts = false,
   } = opts;
   let projectRoot;
@@ -34,6 +34,41 @@ export default function htmlComponentEngine(options = {}) {
   return {
     name: 'html-component-engine',
+    async config(config, { command }) {
+      // Calculate paths early for config setup
+      const root = process.cwd();
+      const src = path.resolve(root, srcDir);
+      const components = componentsDir;
+      if (command === 'build') {
+        // Disable Vite's default HTML handling - we do it ourselves
+        return {
+          // Disable publicDir - we copy assets ourselves
+          publicDir: false,
+          build: {
+            // Use a virtual entry - we'll handle HTML ourselves in generateBundle
+            rollupOptions: {
+              input: { __virtual_entry__: '\0virtual:html-component-engine-entry' },
+            },
+          },
+        };
+      }
+    },
+    // Resolve virtual module
+    resolveId(id) {
+      if (id === '\0virtual:html-component-engine-entry') {
+        return id;
+      }
+    },
+    // Provide empty content for virtual module
+    load(id) {
+      if (id === '\0virtual:html-component-engine-entry') {
+        return 'export default {}';
+      }
+    },
     configResolved(config) {
       resolvedConfig = config;
       // Use process.cwd() as the project root - this is where the vite command is run from
@@ -127,12 +162,15 @@ export default function htmlComponentEngine(options = {}) {
     },
     /**
-     * Generate bundle - compile HTML and copy assets
+     * Generate bundle - compile HTML files and copy assets
      */
     async generateBundle(outputOptions, bundle) {
-      const outDir = outputOptions.dir || path.resolve(projectRoot, 'dist');
-      console.log(`\n📦 Generating output to: ${outDir}`);
+      // Remove virtual entry from bundle
+      for (const fileName in bundle) {
+        if (fileName.includes('__virtual_entry__') || fileName.includes('virtual_html-component-engine')) {
+          delete bundle[fileName];
+        }
+      }
       // Get all HTML files from src directory (excluding components)
       const htmlFiles = await getHtmlFiles(srcRoot, '', componentsDir);
@@ -143,37 +181,24 @@ export default function htmlComponentEngine(options = {}) {
         const filePath = path.join(srcRoot, htmlFile);
         let html = await fs.readFile(filePath, 'utf8');
-        // Compile components
+        // Only compile components - replace <Component> tags
         html = await compileHtml(html, srcRoot, projectRoot);
-        // Inline CSS if enabled
-        if (inlineStyles) {
-          html = await inlineCss(html, srcRoot, projectRoot);
-        }
-        // Inline JS if enabled
-        if (inlineScripts) {
-          html = await inlineJs(html, srcRoot, projectRoot);
-        }
         // Clean unused placeholders
         html = cleanUnusedPlaceholders(html);
-        // Remove Vite-specific scripts
-        html = html.replace(/<script[^>]*@vite[^>]*>[\s\S]*?<\/script>/gi, '');
-        // Add to bundle
-        const outputFileName = htmlFile;
+        // Output HTML to dist root with just filename (no subdirectories)
+        const outputFileName = path.basename(htmlFile);
         this.emitFile({
           type: 'asset',
           fileName: outputFileName,
           source: html,
         });
-        console.log(`   ✓ Compiled: ${htmlFile}`);
+        console.log(`   ✓ Compiled: ${htmlFile} → ${outputFileName}`);
       }
-      // Copy ALL assets to dist/assets (including CSS for reference)
+      // Copy ALL assets to dist/assets
       await copyAllAssets(assetsRoot, this);
     },
@@ -222,7 +247,7 @@ async function getHtmlFiles(dir, base = '', componentsDir = 'components') {
 }
 /**
- * Copy ALL assets to output directory (including CSS/JS)
+ * Copy ALL assets to dist/assets/ directory
  * @param {string} assetsPath - Assets directory path
  * @param {object} context - Rollup plugin context
  */
@@ -236,15 +261,16 @@ async function copyAllAssets(assetsPath, context) {
   const assetFiles = await getAllFiles(assetsPath);
-  console.log(`   Copying ${assetFiles.length} asset file(s)`);
+  console.log(`   Copying ${assetFiles.length} asset file(s) to assets/`);
   for (const file of assetFiles) {
     const relativePath = path.relative(assetsPath, file);
     const content = await fs.readFile(file);
+    // Copy to dist/assets/ subdirectory
     context.emitFile({
       type: 'asset',
-      fileName: path.join('assets', relativePath).replace(/\\/g, '/'),
+      fileName: `assets/${relativePath.replace(/\\/g, '/')}`,
       source: content,
     });
   }