create-template-html-css 2.0.4 → 2.2.0

package/src/inserter.js

@@ -1,150 +1,43 @@
-const fs = require("fs").promises;
-const path = require("path");
-
-// Security: Validate component name against whitelist
-const VALID_COMPONENTS = [
-  "button",
-  "card",
-  "form",
-  "navigation",
-  "modal",
-  "footer",
-  "hero",
-  "slider",
-  "table",
-  "spinner",
-  "animated-card",
-  "typing-effect",
-  "fade-gallery",
-  "grid-layout",
-  "masonry-grid",
-  "dashboard-grid",
-  "flex-layout",
-  "flex-cards",
-  "flex-dashboard",
-  "todo-list",
-  "counter",
-  "accordion",
-  "tabs",
-];
-
 /**
- * Extracts indentation from a line
+ * Component insertion utilities
+ * Inserts components into existing HTML files
  */
-function getIndentation(line) {
-  const match = line.match(/^(\s*)/);
-  return match ? match[1] : "";
-}
 
-/**
- * Checks if a component is already inserted in the HTML
- */
-function isComponentAlreadyInserted(htmlContent, component) {
-  const commentPattern = new RegExp(
-    `<!-- ${component.toUpperCase()} Component -->`,
-    "i",
-  );
-  return commentPattern.test(htmlContent);
-}
-
-/**
- * Formats HTML content with prettier (optional - falls back to original if not available)
- */
-async function formatHtml(htmlContent) {
-  try {
-    const prettier = require("prettier");
-    return await prettier.format(htmlContent, { parser: "html" });
-  } catch (error) {
-    // Prettier not installed or error formatting - return original content
-    return htmlContent;
-  }
-}
+import fs from "fs/promises";
+import path from "path";
+import { ensureDir, writeCssFile, writeJsFile, writeHtmlFile } from "./utils/file-utils.js";
+import {
+  VALID_COMPONENTS,
+  isComponentAlreadyInserted,
+  validateHtmlStructure,
+} from "./inserters/validation-utils.js";
+import { getHtmlIndentation } from "./inserters/html-utils.js";
+import { createBackup } from "./inserters/backup-utils.js";
+import {
+  loadComponentHtml,
+  loadComponentCss,
+  loadComponentJs,
+  extractBodyContent,
+} from "./inserters/component-loader.js";
+import {
+  normalizeIndentation,
+  createInlineStyleTag,
+  createInlineScriptTag,
+  createStyleLink,
+  createScriptTag,
+  createComponentInsertion,
+} from "./inserters/indentation-utils.js";
 
 /**
- * Formats CSS content with prettier (optional - falls back to original if not available)
+ * Inserts a component into an existing HTML file
+ * @param {Object} options - Insertion options
+ * @param {string} options.component - Component name to insert
+ * @param {string} options.targetFile - Target HTML file path
+ * @param {string} options.styleMode - Style insertion mode ('inline' or 'separate')
+ * @param {string} options.scriptMode - Script insertion mode ('inline' or 'separate')
+ * @param {boolean} options.createBackup - Whether to create a backup before insertion
+ * @returns {Promise<Object>} Insertion result with success status and paths
  */
-async function formatCss(cssContent) {
-  try {
-    const prettier = require("prettier");
-    return await prettier.format(cssContent, { parser: "css" });
-  } catch (error) {
-    // Prettier not installed or error formatting - return original content
-    return cssContent;
-  }
-}
-
-/**
- * Formats JavaScript content with prettier (optional - falls back to original if not available)
- */
-async function formatJs(jsContent) {
-  try {
-    const prettier = require("prettier");
-    return await prettier.format(jsContent, { parser: "babel" });
-  } catch (error) {
-    // Prettier not installed or error formatting - return original content
-    return jsContent;
-  }
-}
-
-/**
- * Gets the indentation level used in an HTML file
- */
-function getHtmlIndentation(htmlContent) {
-  // Look for any indented line to determine the standard indentation
-  const match = htmlContent.match(/\n(\s+)\S/);
-  return match ? match[1] : "    "; // default to 4 spaces
-}
-
-/**
- * Validates that HTML file has proper structure
- * @param {string} htmlContent - The HTML content to validate
- * @returns {Object} Object with valid property and any errors
- */
-function validateHtmlStructure(htmlContent) {
-  const errors = [];
-
-  if (!htmlContent.includes("<!DOCTYPE")) {
-    errors.push("Missing DOCTYPE declaration");
-  }
-
-  if (!htmlContent.includes("<html")) {
-    errors.push("Missing <html> tag");
-  }
-
-  if (!htmlContent.includes("<head>") && !htmlContent.includes("<head ")) {
-    errors.push("Missing <head> tag");
-  }
-
-  if (!htmlContent.includes("</head>")) {
-    errors.push("Missing closing </head> tag");
-  }
-
-  if (!htmlContent.includes("<body>") && !htmlContent.includes("<body ")) {
-    errors.push("Missing <body> tag");
-  }
-
-  if (!htmlContent.includes("</body>")) {
-    errors.push("Missing closing </body> tag");
-  }
-
-  return {
-    valid: errors.length === 0,
-    errors,
-  };
-}
-
-/**
- * Creates a backup of the original file before insertion
- * @param {string} targetPath - Path to the original file
- * @returns {Promise<string>} Path to the backup file
- */
-async function createBackup(targetPath) {
-  const backupPath = `${targetPath}.backup`;
-  const content = await fs.readFile(targetPath, "utf-8");
-  await fs.writeFile(backupPath, content, "utf-8");
-  return backupPath;
-}
-
 async function insertComponent(options) {
   const {
     component,
@@ -203,150 +96,79 @@ async function insertComponent(options) {
     throw new Error("Target HTML file does not have a </head> tag");
   }
 
-  // Get component templates
-  const templateDir = path.join(__dirname, "..", "templates", component);
-  const componentHtml = await fs.readFile(
-    path.join(templateDir, "index.html"),
-    "utf-8",
-  );
-
-  // Try to read CSS from css/ subfolder, fall back to root
-  let componentCss;
-  try {
-    componentCss = await fs.readFile(
-      path.join(templateDir, "css", "style.css"),
-      "utf-8",
-    );
-  } catch {
-    componentCss = await fs.readFile(
-      path.join(templateDir, "style.css"),
-      "utf-8",
-    );
-  }
-
-  // Extract component body content (only the inner content, not the body tags)
-  const bodyMatch = componentHtml.match(/<body[^>]*>\s*([\s\S]*?)\s*<\/body>/i);
-  if (!bodyMatch) {
-    throw new Error("Invalid component template structure");
-  }
-
-  let componentBody = bodyMatch[1].trim();
+  // Load component templates
+  const componentHtml = await loadComponentHtml(component);
+  const componentCss = await loadComponentCss(component);
 
-  // Remove any script and style tags that might be in the body
-  componentBody = componentBody
-    .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
-    .trim();
+  // Extract component body content
+  let componentBody = extractBodyContent(componentHtml);
 
   // Get indentation used in the HTML file
   const baseIndent = getHtmlIndentation(htmlContent);
 
   // Normalize component body indentation
-  const lines = componentBody
-    .split("\n")
-    .map((line) => {
-      if (line.trim() === "") return "";
-      return baseIndent + line.trim();
-    })
-    .join("\n");
-  componentBody = lines;
+  componentBody = normalizeIndentation(componentBody, baseIndent);
 
   // Insert component HTML before closing </body> tag
   htmlContent = htmlContent.replace(
     "</body>",
-    `${baseIndent}<!-- ${component.toUpperCase()} Component -->\n${componentBody}\n\n</body>`,
+    createComponentInsertion(component, componentBody, baseIndent),
   );
 
   // Handle CSS
   if (styleMode === "inline") {
-    // Normalize CSS indentation
-    const normalizedCss = componentCss
-      .split("\n")
-      .map((line) => {
-        if (line.trim() === "") return "";
-        return baseIndent + "    " + line.trim();
-      })
-      .join("\n");
-
     htmlContent = htmlContent.replace(
       "</head>",
-      `${baseIndent}<style id="${component}-styles">\n${baseIndent}    /* ${component.toUpperCase()} Component Styles */\n${normalizedCss}\n${baseIndent}</style>\n</head>`,
+      createInlineStyleTag(component, componentCss, baseIndent),
     );
   } else if (styleMode === "separate") {
     // Create css directory if needed
     const cssDir = path.join(path.dirname(targetPath), "css");
-    await fs.mkdir(cssDir, { recursive: true });
+    await ensureDir(cssDir);
 
     // Create separate CSS file in css/ folder
     const cssFileName = `${component}-component.css`;
     const cssPath = path.join(cssDir, cssFileName);
-    const formattedCss = await formatCss(
-      `/* ${component.toUpperCase()} Component Styles */\n\n${componentCss}`,
-    );
-    await fs.writeFile(cssPath, formattedCss);
+    const cssWithComment = `/* ${component.toUpperCase()} Component Styles */\n\n${componentCss}`;
+    await writeCssFile(cssPath, cssWithComment);
 
     // Add link to CSS file
     htmlContent = htmlContent.replace(
       "</head>",
-      `${baseIndent}<link rel="stylesheet" href="css/${cssFileName}">\n</head>`,
+      createStyleLink(cssFileName, baseIndent),
     );
   }
 
   // Handle JavaScript
-  try {
-    // Try to read JS from js/ subfolder, fall back to root
-    let componentJs;
-    try {
-      componentJs = await fs.readFile(
-        path.join(templateDir, "js", "script.js"),
-        "utf-8",
-      );
-    } catch {
-      componentJs = await fs.readFile(
-        path.join(templateDir, "script.js"),
-        "utf-8",
-      );
-    }
+  const componentJs = await loadComponentJs(component);
 
+  if (componentJs) {
     if (scriptMode === "inline") {
-      // Normalize JS indentation
-      const normalizedJs = componentJs
-        .split("\n")
-        .map((line) => {
-          if (line.trim() === "") return "";
-          return baseIndent + "    " + line.trim();
-        })
-        .join("\n");
-
       htmlContent = htmlContent.replace(
         "</body>",
-        `${baseIndent}<script id="${component}-script">\n${baseIndent}    // ${component.toUpperCase()} Component Script\n${normalizedJs}\n${baseIndent}</script>\n</body>`,
+        createInlineScriptTag(component, componentJs, baseIndent),
       );
     } else if (scriptMode === "separate") {
       // Create js directory if needed
       const jsDir = path.join(path.dirname(targetPath), "js");
-      await fs.mkdir(jsDir, { recursive: true });
+      await ensureDir(jsDir);
 
       // Create separate JS file in js/ folder
       const jsFileName = `${component}-component.js`;
       const jsPath = path.join(jsDir, jsFileName);
-      const formattedJs = await formatJs(
-        `// ${component.toUpperCase()} Component Script\n\n${componentJs}`,
-      );
-      await fs.writeFile(jsPath, formattedJs);
+      const jsWithComment = `// ${component.toUpperCase()} Component Script\n\n${componentJs}`;
+      await writeJsFile(jsPath, jsWithComment);
 
       // Add script tag
       htmlContent = htmlContent.replace(
         "</body>",
-        `${baseIndent}<script src="js/${jsFileName}" id="${component}-script"></script>\n</body>`,
+        createScriptTag(component, jsFileName, baseIndent),
       );
     }
-  } catch (error) {
-    // No JavaScript file for this component, skip
   }
 
   // Write updated HTML with prettier formatting
-  const formattedHtml = await formatHtml(htmlContent);
-  await fs.writeFile(targetPath, formattedHtml);
+  await writeHtmlFile(targetPath, htmlContent);
 
   return {
     targetFile: targetPath,
@@ -358,4 +180,4 @@ async function insertComponent(options) {
   };
 }
 
-module.exports = { insertComponent, validateHtmlStructure, createBackup };
+export { insertComponent, validateHtmlStructure, createBackup };

package/src/inserters/backup-utils.js

@@ -0,0 +1,20 @@
+/**
+ * Backup utilities for file operations
+ * Handles creating backups before modifying files
+ */
+
+import fs from "fs/promises";
+
+/**
+ * Creates a backup of the original file before insertion
+ * @param {string} targetPath - Path to the original file
+ * @returns {Promise<string>} Path to the backup file
+ */
+async function createBackup(targetPath) {
+  const backupPath = `${targetPath}.backup`;
+  const content = await fs.readFile(targetPath, "utf-8");
+  await fs.writeFile(backupPath, content, "utf-8");
+  return backupPath;
+}
+
+export { createBackup };

package/src/inserters/component-loader.js

@@ -0,0 +1,68 @@
+/**
+ * Component template loader
+ * Loads HTML, CSS, and JavaScript files from template directories
+ */
+
+import {
+  readTemplateHtml,
+  readTemplateCss,
+  readTemplateJs,
+} from "../utils/template-loader.js";
+
+/**
+ * Loads component HTML template
+ * @param {string} component - Component name
+ * @returns {Promise<string>} HTML content
+ */
+async function loadComponentHtml(component) {
+  return await readTemplateHtml(component);
+}
+
+/**
+ * Loads component CSS template
+ * Tries css/ subfolder first, falls back to root
+ * @param {string} component - Component name
+ * @returns {Promise<string>} CSS content
+ */
+async function loadComponentCss(component) {
+  return await readTemplateCss(component);
+}
+
+/**
+ * Loads component JavaScript template
+ * Tries js/ subfolder first, falls back to root
+ * @param {string} component - Component name
+ * @returns {Promise<string|null>} JavaScript content or null if not found
+ */
+async function loadComponentJs(component) {
+  return await readTemplateJs(component);
+}
+
+/**
+ * Extracts body content from component HTML
+ * Removes script and style tags
+ * @param {string} componentHtml - Full component HTML
+ * @returns {string} Extracted body content
+ */
+function extractBodyContent(componentHtml) {
+  const bodyMatch = componentHtml.match(/<body[^>]*>\s*([\s\S]*?)\s*<\/body>/i);
+  if (!bodyMatch) {
+    throw new Error("Invalid component template structure");
+  }
+
+  let componentBody = bodyMatch[1].trim();
+
+  // Remove any script and style tags that might be in the body
+  componentBody = componentBody
+    .replace(/<script[^>]*>[\s\S]*?<\/script>/gi, "")
+    .trim();
+
+  return componentBody;
+}
+
+export {
+  loadComponentHtml,
+  loadComponentCss,
+  loadComponentJs,
+  extractBodyContent,
+};

package/src/inserters/html-utils.js

@@ -0,0 +1,31 @@
+/**
+ * HTML manipulation utilities
+ * Handles indentation and HTML parsing operations
+ */
+
+/**
+ * Extracts the indentation string from a line
+ * @param {string} line - Line to extract indentation from
+ * @returns {string} The indentation string (spaces or tabs)
+ */
+function getIndentation(line) {
+  const match = line.match(/^(\s+)/);
+  return match ? match[1] : "";
+}
+
+/**
+ * Determines the standard indentation used in HTML content
+ * @param {string} htmlContent - HTML content to analyze
+ * @returns {string} The detected indentation string (defaults to 2 spaces)
+ */
+function getHtmlIndentation(htmlContent) {
+  const lines = htmlContent.split("\n");
+  for (const line of lines) {
+    if (line.trim() && line.startsWith("  ")) {
+      return getIndentation(line);
+    }
+  }
+  return "  "; // Default to 2 spaces
+}
+
+export { getIndentation, getHtmlIndentation };

package/src/inserters/indentation-utils.js

@@ -0,0 +1,90 @@
+/**
+ * Content indentation utilities
+ * Handles indentation normalization for HTML, CSS, and JS content
+ */
+
+/**
+ * Normalizes content indentation with base indent
+ * @param {string} content - Content to normalize
+ * @param {string} baseIndent - Base indentation to apply
+ * @param {string} extraIndent - Additional indentation (default: empty)
+ * @returns {string} Normalized content with proper indentation
+ */
+export function normalizeIndentation(content, baseIndent, extraIndent = "") {
+  return content
+    .split("\n")
+    .map((line) => {
+      if (line.trim() === "") return "";
+      return baseIndent + extraIndent + line.trim();
+    })
+    .join("\n");
+}
+
+/**
+ * Creates inline style tag with normalized indentation
+ * @param {string} component - Component name
+ * @param {string} cssContent - CSS content
+ * @param {string} baseIndent - Base indentation
+ * @returns {string} Formatted style tag
+ */
+export function createInlineStyleTag(component, cssContent, baseIndent) {
+  const normalizedCss = normalizeIndentation(cssContent, baseIndent, "    ");
+  return `${baseIndent}<style id="${component}-styles">
+${baseIndent}    /* ${component.toUpperCase()} Component Styles */
+${normalizedCss}
+${baseIndent}</style>
+</head>`;
+}
+
+/**
+ * Creates inline script tag with normalized indentation
+ * @param {string} component - Component name
+ * @param {string} jsContent - JavaScript content
+ * @param {string} baseIndent - Base indentation
+ * @returns {string} Formatted script tag
+ */
+export function createInlineScriptTag(component, jsContent, baseIndent) {
+  const normalizedJs = normalizeIndentation(jsContent, baseIndent, "    ");
+  return `${baseIndent}<script id="${component}-script">
+${baseIndent}    // ${component.toUpperCase()} Component Script
+${normalizedJs}
+${baseIndent}</script>
+</body>`;
+}
+
+/**
+ * Creates external stylesheet link
+ * @param {string} cssFileName - CSS file name
+ * @param {string} baseIndent - Base indentation
+ * @returns {string} Link tag
+ */
+export function createStyleLink(cssFileName, baseIndent) {
+  return `${baseIndent}<link rel="stylesheet" href="css/${cssFileName}">
+</head>`;
+}
+
+/**
+ * Creates external script tag
+ * @param {string} component - Component name
+ * @param {string} jsFileName - JavaScript file name
+ * @param {string} baseIndent - Base indentation
+ * @returns {string} Script tag
+ */
+export function createScriptTag(component, jsFileName, baseIndent) {
+  return `${baseIndent}<script src="js/${jsFileName}" id="${component}-script"></script>
+</body>`;
+}
+
+/**
+ * Creates component HTML insertion with comment
+ * @param {string} component - Component name
+ * @param {string} componentBody - Component HTML body
+ * @param {string} baseIndent - Base indentation
+ * @returns {string} Formatted HTML with component comment
+ */
+export function createComponentInsertion(component, componentBody, baseIndent) {
+  return `${baseIndent}<!-- ${component.toUpperCase()} Component -->
+${componentBody}
+
+</body>`;
+}

package/src/inserters/validation-utils.js

@@ -0,0 +1,49 @@
+/**
+ * Component validation utilities for the insert command
+ * Validates component names and HTML structure
+ */
+
+import { VALID_COMPONENTS } from "../components-registry.js";
+
+/**
+ * Checks if a component has already been inserted in the HTML content
+ * @param {string} htmlContent - HTML content to check
+ * @param {string} component - Component name to look for
+ * @returns {boolean} True if component is already inserted
+ */
+function isComponentAlreadyInserted(htmlContent, component) {
+  const componentComment = `<!-- ${component.toUpperCase()} Component -->`;
+  return htmlContent.includes(componentComment);
+}
+
+/**
+ * Validates HTML file structure for required tags
+ * @param {string} htmlContent - HTML content to validate
+ * @returns {Object} Validation result with valid flag and errors array
+ */
+function validateHtmlStructure(htmlContent) {
+  const errors = [];
+
+  if (!htmlContent.includes("<head>") && !htmlContent.includes("<head ")) {
+    errors.push("Missing <head> tag");
+  }
+
+  if (!htmlContent.includes("</head>")) {
+    errors.push("Missing closing </head> tag");
+  }
+
+  if (!htmlContent.includes("<body>") && !htmlContent.includes("<body ")) {
+    errors.push("Missing <body> tag");
+  }
+
+  if (!htmlContent.includes("</body>")) {
+    errors.push("Missing closing </body> tag");
+  }
+
+  return {
+    valid: errors.length === 0,
+    errors,
+  };
+}
+
+export { VALID_COMPONENTS, isComponentAlreadyInserted, validateHtmlStructure };