js-template-engine 1.0.0 → 2.0.0

package/examples/slots.js

@@ -1,103 +0,0 @@
-// Example of using the TemplateEngine class to render a simple HTML template with slots.
-// You can run this example with `npm run example:slots` or `yarn example:slots`.
-
-const { TemplateEngine } = require("../src");
-const verbose = true;
-
-const templateEngine = new TemplateEngine();
-
-// Data
-const stylesheetEntries = [
-  { href: "style.css", rel: "stylesheet" },
-  { href: "theme.css", rel: "stylesheet" },
-];
-
-const scriptEntries = [
-  { src: "app.js", defer: true },
-  { src: "analytics.js", async: true },
-];
-
-// Templates
-const htmlTemplate = [
-  {
-    tag: "html",
-    attributes: {
-      lang: "en",
-    },
-    children: [
-      {
-        tag: "head",
-        children: [
-          {
-            tag: "meta",
-            attributes: {
-              charset: "UTF-8",
-            },
-          },
-          {
-            tag: "title",
-            children: [
-              {
-                type: "text",
-                content: "Hello, World!",
-              },
-            ],
-          },
-          {
-            type: "slot",
-            name: "head-end",
-          },
-        ],
-      },
-      {
-        tag: "body",
-        children: [
-          {
-            type: "slot",
-            name: "body-beginning",
-          },
-          {
-            tag: "h1",
-            attributes: {
-              class: "title",
-            },
-            children: [
-              {
-                type: "text",
-                content: "Hello, World!",
-              },
-            ],
-          },
-          {
-            type: "slot",
-            name: "body-end",
-          },
-        ],
-      },
-    ],
-  },
-];
-
-// Template formatting functions
-const stylesheets = stylesheetEntries.map((stylesheetEntry) => ({
-  tag: "link",
-  attributes: { ...stylesheetEntry },
-}));
-
-const scripts = scriptEntries.map((script) => ({
-  tag: "script",
-  attributes: { ...script },
-}));
-
-// Render
-(async () => {
-  await templateEngine.render(htmlTemplate, {
-    name: "slots",
-    slots: {
-      "head-end": stylesheets,
-      "body-end": scripts,
-    },
-    writeOutputFile: true,
-    verbose,
-  });
-})();

package/src/engine/TemplateEngine.js

@@ -1,249 +0,0 @@
-const path = require("path");
-const prettier = require("prettier");
-const { writeOutputFile } = require("../handlers/FileHandler");
-const createLogger = require("../helpers/createLogger");
-
-const selfClosingTags = [
-  "area",
-  "base",
-  "br",
-  "col",
-  "command",
-  "embed",
-  "hr",
-  "img",
-  "input",
-  "keygen",
-  "link",
-  "meta",
-  "param",
-  "source",
-  "track",
-  "wbr",
-];
-
-class TemplateEngine {
-  constructor() {}
-
-  mergeOptions = (options) => {
-    let defaultOptions = {
-      attributeFormatter: (attribute, value) => ` ${attribute}="${value}"`,
-      fileExtension: ".html",
-      filename: options.name ?? "untitled",
-      outputDir: "dist",
-      preferSelfClosingTags: false,
-      prettierParser: "html",
-      writeOutputFile: false,
-      verbose: false,
-    };
-
-    if (options.extensions) {
-      options.extensions.forEach((extension) => {
-        if (extension.optionsHandler) {
-          defaultOptions = extension.optionsHandler(defaultOptions, options);
-        }
-      });
-    }
-
-    return { ...defaultOptions, ...options };
-  };
-
-  applyExtensionOverrides = (node, currentExtensionKey) => {
-    if (node.extensions && node.extensions[currentExtensionKey]) {
-      const extensionOverrides = node.extensions[currentExtensionKey];
-
-      Object.keys(extensionOverrides).forEach((key) => {
-        if (key === "ignore") {
-          // special handling for 'ignore' or other meta properties if necessary
-        } else {
-          node[key] = extensionOverrides[key];
-        }
-      });
-    }
-
-    return node;
-  };
-
-  render = async (
-    nodes,
-    options = {},
-    isRoot = true,
-    ancestorNodesContext = []
-  ) => {
-    options = isRoot ? this.mergeOptions(options) : options;
-    let template = "";
-
-    const { verbose } = options;
-    const logger = createLogger(verbose, "render");
-
-    if (isRoot) {
-      logger.info("Starting template rendering process...");
-    }
-
-    for (let node of nodes) {
-      const currentNodeContext = [...ancestorNodesContext, node];
-
-      let shouldIgnoreNode = false;
-
-      if (options.extensions && node.extensions) {
-        logger.info(`Processing extensions for node: ${node.tag || "text"}`);
-        for (const extension of options.extensions) {
-          const currentExtensionKey = extension.key;
-
-          if (node.extensions[currentExtensionKey]) {
-            logger.info(
-              `Applying overrides from extension: ${currentExtensionKey}`
-            );
-            node = this.applyExtensionOverrides(node, currentExtensionKey);
-          }
-
-          if (node.extensions[currentExtensionKey]?.ignore) {
-            logger.info(`Node ignored by extension: ${currentExtensionKey}`);
-            shouldIgnoreNode = true;
-            break;
-          }
-
-          if (!shouldIgnoreNode) {
-            logger.info(
-              `Calling nodeHandler from extension: ${currentExtensionKey}`
-            );
-            node = extension.nodeHandler(node, ancestorNodesContext);
-          }
-        }
-      }
-
-      if (shouldIgnoreNode) {
-        logger.info(`Node ignored: ${node.tag || "text"}. Skipping rendering.`);
-        continue; // Skip rendering this node
-      }
-
-      // Constructing the template string for this node
-      logger.info(`Rendering node: ${node.tag || "text"}`);
-
-      if (node.tag) {
-        const isSelfClosing =
-          (node.selfClosing ||
-            options.preferSelfClosingTags ||
-            selfClosingTags.includes(node.tag)) &&
-          !node.children;
-
-        if (isSelfClosing) {
-          template += `<${node.tag}`;
-
-          if (node.attributes || node.expressionAttributes) {
-            logger.info(`Processing attributes for node: ${node.tag}`);
-          }
-
-          if (node.attributes) {
-            for (const attribute in node.attributes) {
-              template += options.attributeFormatter(
-                attribute,
-                node.attributes[attribute],
-                false // indicating this is a standard attribute, not an expression
-              );
-            }
-          }
-          if (node.expressionAttributes) {
-            for (const attribute in node.expressionAttributes) {
-              template += options.attributeFormatter(
-                attribute,
-                node.expressionAttributes[attribute],
-                true // indicating this is an expression attribute
-              );
-            }
-          }
-          template += " />";
-        } else {
-          template += `<${node.tag}`;
-          if (node.attributes) {
-            for (const attribute in node.attributes) {
-              template += options.attributeFormatter(
-                attribute,
-                node.attributes[attribute],
-                false // standard attribute
-              );
-            }
-          }
-          if (node.expressionAttributes) {
-            for (const attribute in node.expressionAttributes) {
-              template += options.attributeFormatter(
-                attribute,
-                node.expressionAttributes[attribute],
-                true // expression attribute
-              );
-            }
-          }
-          template += ">";
-
-          if (node.children) {
-            logger.info(`Rendering children for node: ${node.tag}`);
-            template += await this.render(
-              node.children,
-              options,
-              false,
-              currentNodeContext
-            );
-          }
-
-          template += `</${node.tag}>`;
-        }
-      } else if (node.type === "text") {
-        // Direct text node handling
-        logger.info(`Adding text content: "${node.content}"`);
-        template += node.content;
-      } else if (
-        node.type === "slot" &&
-        node.name &&
-        options.slots &&
-        options.slots[node.name]
-      ) {
-        logger.info(`Processing slot: ${node.name}`);
-        template += await this.render(
-          options.slots[node.name],
-          options,
-          false,
-          currentNodeContext
-        );
-      }
-    }
-
-    if (isRoot) {
-      logger.info("Finalizing template rendering...");
-      if (options.extensions) {
-        for (const extension of options.extensions) {
-          if (extension.rootHandler) {
-            template = extension.rootHandler(template, options);
-            break;
-          }
-        }
-      }
-
-      template = await prettier.format(template, {
-        parser: options.prettierParser,
-      });
-
-      const outputDir = path.join(
-        process.cwd(),
-        options.outputDir ? options.outputDir : "dist"
-      );
-
-      const outputPath = path.join(
-        outputDir,
-        `${options.filename}${options.fileExtension}`
-      );
-
-      if (options.writeOutputFile) {
-        writeOutputFile(template, outputPath, verbose);
-        logger.success(
-          `Template rendering complete. Output saved to: ${outputPath}`
-        );
-      }
-
-      return template;
-    }
-
-    return template;
-  };
-}
-
-module.exports = TemplateEngine;

package/src/extensions/bem.js

@@ -1,108 +0,0 @@
-const createLogger = require("../helpers/createLogger");
-
-class BemExtension {
-  constructor(verbose = false) {
-    this.key = "bem";
-    this.logger = createLogger(verbose, "BemExtension");
-  }
-
-  setNodeExtensionOptionsShortcut = ({
-    block,
-    element,
-    modifiers,
-    modifier,
-  }) =>
-    block || element || modifiers || modifier
-      ? {
-          extensions: {
-            bem: {
-              ...(block ? { block } : {}),
-              ...(element ? { element } : {}),
-              ...(modifiers ? { modifiers } : {}),
-              ...(modifier ? { modifier } : {}),
-            },
-          },
-        }
-      : {};
-
-  nodeHandler = (node, ancestorNodesContext) => {
-    if (node.ignoreBem) {
-      this.logger.info(
-        `Node ignored due to ignoreBem flag: ${JSON.stringify(node)}`
-      );
-      return node;
-    }
-
-    this.logger.info(`Processing node: ${node.tag}`);
-
-    // use ancestorNodesContext to find the closest node where block is defined
-    if (node.tag) {
-      const closestAncestorBlockNode = ancestorNodesContext
-        .slice()
-        .reverse()
-        .find((ancestorNode) => ancestorNode.block);
-
-      const block = node?.block;
-      const element = node?.element;
-      const modifiers = [
-        ...new Set([
-          ...(node.modifiers ? node.modifiers : []),
-          ...(node.modifier ? [node.modifier] : []),
-        ]),
-      ];
-      const inheritedBlock = closestAncestorBlockNode?.block;
-
-      if (inheritedBlock && !block) {
-        this.logger.info(
-          `Inheriting BEM block from ancestor: ${inheritedBlock}`
-        );
-      }
-
-      const bemClasses = this.getBemClasses(
-        block,
-        element,
-        modifiers,
-        inheritedBlock
-      );
-
-      this.logger.info(
-        `Generated BEM classes: ${bemClasses} for node: ${node.tag}`
-      );
-
-      if (node.attributes) {
-        node.attributes.class = node.attributes.class
-          ? `${bemClasses} ${node.attributes.class}` // TODO: maybe add options to append/prepend?
-          : bemClasses;
-      } else {
-        node.attributes = { class: bemClasses };
-      }
-    }
-
-    return node;
-  };
-
-  getBemClasses = (block, element, modifiers, inheritedBlock) => {
-    let bemClasses = [];
-    const blockToUse = block ?? inheritedBlock ?? "untitled-block";
-    let root;
-
-    // determine the root class based on the presence of block and element
-    if (element) {
-      root = `${blockToUse}__${element}`; // element present, use block__element
-    } else if (block) {
-      root = blockToUse; // only block present, use block
-    } else {
-      root = `${blockToUse}__untitled-element`; // neither block nor element defined, fallback
-    }
-
-    bemClasses.push(root);
-
-    modifiers.forEach((modifier) => {
-      bemClasses.push(`${root}--${modifier}`);
-    });
-
-    return bemClasses.join(" ");
-  };
-}
-
-module.exports = BemExtension;

package/src/extensions/react.js

@@ -1,102 +0,0 @@
-const createLogger = require("../helpers/createLogger");
-
-class ReactExtension {
-  constructor(verbose = false) {
-    this.key = "react";
-    this.logger = createLogger(verbose, "ReactExtension");
-  }
-
-  sanitizeComponentName = (componentName) => {
-    return componentName
-      .split("-")
-      .map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase())
-      .join("");
-  };
-
-  optionsHandler = (defaultOptions, options) => {
-    return {
-      ...defaultOptions,
-      attributeFormatter: (attribute, value, isExpression = false) => {
-        if (!isExpression) {
-          return ` ${attribute}="${value}"`;
-        } else {
-          return ` ${attribute}={${value}}`;
-        }
-      },
-      filename: options.componentName ?? options.name ?? "UntitledComponent",
-      fileExtension: ".jsx",
-      outputDir: "dist/react",
-      preferSelfClosingTags: true,
-      prettierParser: "babel",
-    };
-  };
-
-  nodeHandler = (node) => {
-    const reactConfig = node.extensions && node.extensions.react;
-
-    if (reactConfig) {
-      this.logger.info(
-        `Processing React extension for node: ${node.tag || "text"}`
-      );
-
-      if (node.attributes) {
-        if (node.attributes.class) {
-          this.logger.info(
-            `Transforming 'class' to 'className' for React compatibility.`
-          );
-          node.attributes.className = node.attributes.class;
-          delete node.attributes.class;
-        }
-
-        // TODO: handle other attributes that need to be renamed, maybe use a map?
-        if (node.attributes.onclick) {
-          node.attributes.onclick = node.attributes.onClick;
-          delete node.attributes.onclick;
-        }
-      }
-
-      if (reactConfig.attributes) {
-        node.attributes = { ...node.attributes, ...reactConfig.attributes };
-      }
-
-      if (reactConfig.expressionAttributes) {
-        node.expressionAttributes = reactConfig.expressionAttributes;
-      }
-
-      // Log if there are specific overrides from reactConfig
-      if (reactConfig.tag) {
-        this.logger.info(
-          `Overriding node tag with React component: ${reactConfig.tag}`
-        );
-      }
-      if (reactConfig.tag) {
-        node.tag = reactConfig.tag;
-      }
-    }
-
-    return node;
-  };
-
-  rootHandler = (htmlContent, rendererOptions) => {
-    const rawName =
-      rendererOptions.componentName ??
-      rendererOptions.name ??
-      "UntitledComponent";
-    const componentName = this.sanitizeComponentName(rawName);
-    this.logger.info(`Generating React component: ${componentName}`);
-
-    return `
-      import React from 'react';
-
-      function ${componentName}() {
-        return (
-          ${htmlContent}
-        );
-      }
-
-      export default ${componentName};
-    `.trim();
-  };
-}
-
-module.exports = ReactExtension;

package/src/handlers/FileHandler.js

@@ -1,116 +0,0 @@
-const fs = require("fs");
-const path = require("path");
-const createLogger = require("../helpers/createLogger");
-
-function readJsonFile(sourcePath) {
-  try {
-    const fileContent = fs.readFileSync(sourcePath, "utf8");
-
-    return JSON.parse(fileContent);
-  } catch (error) {
-    console.error(`Error reading or parsing JSON file ${sourcePath}:`, error);
-    throw error;
-  }
-}
-
-function writeOutputFile(template, outputPath, verbose = false) {
-  const logger = createLogger(verbose, "writeOutputFile");
-  const outputDir = path.dirname(outputPath);
-
-  if (!fs.existsSync(outputDir)) {
-    logger.info(`Creating output directory: ${outputDir}`);
-    fs.mkdirSync(outputDir, { recursive: true });
-  }
-
-  fs.writeFileSync(outputPath, template, "utf8");
-}
-
-async function getSourcePathType(sourcePath) {
-  const stats = fs.statSync(sourcePath);
-
-  if (stats.isDirectory()) {
-    return "directory";
-  }
-
-  if (stats.isFile()) {
-    return "file";
-  }
-}
-
-async function processFile(
-  sourcePath,
-  outputDir,
-  extensions,
-  templateEngine,
-  name,
-  componentName,
-  verbose
-) {
-  const logger = createLogger(verbose, "processFile");
-  logger.info(`Processing file: ${sourcePath}`);
-
-  const templateData = readJsonFile(sourcePath);
-  const filenameWithoutExtension = path.basename(sourcePath, ".json");
-
-  try {
-    await templateEngine.render(templateData, {
-      name: name ?? filenameWithoutExtension,
-      componentName,
-      outputDir,
-      extensions,
-      writeOutputFile: true,
-      verbose,
-    });
-    logger.success(`Successfully processed file: ${sourcePath}`);
-  } catch (error) {
-    logger.error(`Error processing file ${sourcePath}: ${error.message}`);
-  }
-}
-
-async function processDirectory(
-  sourceDir,
-  outputDir,
-  extensions,
-  templateEngine,
-  verbose
-) {
-  const logger = createLogger(verbose, "processDirectory");
-  logger.info(`Processing directory: ${sourceDir}`);
-  const entries = fs.readdirSync(sourceDir, { withFileTypes: true });
-
-  for (const entry of entries) {
-    const sourceEntryPath = path.join(sourceDir, entry.name);
-    const outputEntryPath = path.join(outputDir ?? "dist", entry.name);
-
-    if (entry.isDirectory()) {
-      logger.info(`Entering directory: ${entry.name}`);
-      await processDirectory(
-        sourceEntryPath,
-        outputEntryPath,
-        extensions,
-        templateEngine,
-        verbose
-      );
-    } else if (entry.isFile() && path.extname(entry.name) === ".json") {
-      logger.info(`Found JSON file: ${entry.name}`);
-      const templateData = readJsonFile(sourceEntryPath);
-      const filenameWithoutExtension = path.basename(entry.name, ".json");
-
-      await templateEngine.render(templateData, {
-        name: filenameWithoutExtension,
-        outputDir,
-        extensions,
-        writeOutputFile: true,
-        verbose,
-      });
-    }
-  }
-}
-
-module.exports = {
-  readJsonFile,
-  writeOutputFile,
-  getSourcePathType,
-  processFile,
-  processDirectory,
-};

package/src/helpers/createLogger.js

@@ -1,19 +0,0 @@
-const signale = require("signale");
-
-const createLogger = (verbose = false, prefix = "") => {
-  const logger = {};
-  const methods = ["info", "warn", "error", "debug", "success"];
-
-  methods.forEach((method) => {
-    logger[method] = (...args) => {
-      if (verbose) {
-        signale[method](prefix ? `[${prefix}]` : "", ...args);
-      }
-      // If not verbose, do nothing
-    };
-  });
-
-  return logger;
-};
-
-module.exports = createLogger;

package/src/helpers/mergeNodeExtensionOptions.js

@@ -1,8 +0,0 @@
-const mergeNodeExtensionOptions = (...extensionOptions) => ({
-  extensions: Object.assign(
-    {},
-    ...extensionOptions.map((option) => option.extensions)
-  ),
-});
-
-module.exports = mergeNodeExtensionOptions;