js-template-engine 1.0.0

package/.eslintrc.js

@@ -0,0 +1,26 @@
+module.exports = {
+  env: {
+    node: true,
+    browser: true,
+    commonjs: true,
+    es2021: true,
+  },
+  extends: "eslint:recommended",
+  overrides: [
+    {
+      env: {
+        node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
+    },
+  ],
+  parserOptions: {
+    ecmaVersion: "latest",
+  },
+  rules: {
+    "no-unused-vars": ["error", { argsIgnorePattern: "^_" }],
+  },
+};

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Björn Djurnamn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,184 @@
+# JS Template Engine
+
+A dynamic templating engine that translates JavaScript or JSON data into structured templates across multiple languages. At its core this tool generates HTML templates, but the concept is modular and can be extended to render templates for any framework or templating language imaginable.
+
+## Features
+
+- Ideal for UI libraries: Maintain one single source of truth and avoid double maintaining different language variations of your components.
+- Customizable: Does it not yet support your templating language of choice? The abstract logic allows you to create and use your own extensions.
+- Native Extensions: There's a growing ecosystem of extensions, i.e. React to generate JSX components and BEM to enforce consistent class naming.
+- CLI Interface: A convenient CLI tool that can both process single JSON files and traverse through nested folder structures from the command line.
+- Flexible Configuration: Customize the output directory, apply framework-specific extensions, and more through CLI options or configuration files.
+
+## Installation
+
+```sh
+npm install js-template-engine
+```
+
+Or if you prefer using Yarn:
+
+```sh
+yarn add js-template-engine
+```
+
+## Usage
+
+### CLI
+
+The JS Template Engine CLI provides a straightforward way to render templates from JSON files:
+
+```sh
+js-template-engine render <sourcePath> [options]
+```
+
+**Arguments:**
+
+- `<sourcePath>`: The path to the JSON file or directory containing JSON templates you wish to render.
+
+**Options:**
+
+- `--outputDir`, `-o`: Specify the output directory for rendered templates.
+- `--extensions`, `-e`: Choose extensions to use for template processing (e.g., react, bem).
+- `--name`, `-n`: Set a base name for output files.
+- `--componentName`, `-c`: Define a component name for framework-specific templates (useful for React).
+- `--verbose`, `-v`: Enable verbose logging for more detailed output.
+
+### Examples
+
+Feel free to check out the [examples folder](examples), to get a better idea of some of the core concepts and extensions. The provided examples can be run using:
+
+```sh
+npm run example:react
+npm run example:bem
+npm run example:slots
+
+```
+
+Or if you prefer using Yarn:
+
+```sh
+yarn example:react
+yarn example:bem
+yarn example:slots
+```
+
+### API
+
+You can also use JS Template Engine programmatically in your Node.js projects. This is how you could define and process your template using the BEM extension:
+
+```javascript
+const { TemplateEngine, BemExtension } = require("js-template-engine");
+
+const templateEngine = new TemplateEngine();
+const bemExtension = new BemExtension();
+
+const breadcrumbsTemplate = [
+  {
+    tag: "nav",
+    extensions: {
+      bem: {
+        block: "breadcrumbs",
+      },
+    },
+    children: [
+      {
+        tag: "ul",
+
+        extensions: {
+          bem: {
+            element: "list",
+          },
+        },
+        children: [
+          {
+            tag: "li",
+
+            extensions: {
+              bem: {
+                element: "item",
+              },
+            },
+            children: [
+              {
+                tag: "a",
+                extensions: {
+                  bem: {
+                    element: "text",
+                  },
+                },
+                attributes: {
+                  href: "/",
+                },
+                children: [
+                  {
+                    type: "text",
+                    content: "Home",
+                  },
+                ],
+              },
+            ],
+          },
+          {
+            tag: "li",
+            extensions: {
+              bem: {
+                element: "item",
+                modifier: "current",
+              },
+            },
+            children: [
+              {
+                tag: "span",
+                extensions: {
+                  bem: {
+                    element: "text",
+                  },
+                },
+                children: [
+                  {
+                    type: "text",
+                    content: "About",
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      },
+    ],
+  },
+];
+
+templateEngine.render(breadcrumbsTemplate, {
+  name: "breadcrumbs",
+  extensions: [bemExtension],
+});
+```
+
+This is what it would result in:
+
+```html
+<nav class="breadcrumbs">
+  <ul class="breadcrumbs__list">
+    <li class="breadcrumbs__item">
+      <a href="/" class="breadcrumbs__text">Home</a>
+    </li>
+    <li class="breadcrumbs__item breadcrumbs__item--current">
+      <span class="breadcrumbs__text">About</span>
+    </li>
+  </ul>
+</nav>
+```
+
+## Contributing
+
+Contributions are welcome! Feel free to open pull requests or issues to suggest features, report bugs, or contribute to the code.
+
+## Reporting Issues
+
+Found a bug or have a suggestion? Please use the GitHub Issues page to report issues or request features.
+
+## License
+
+This project is licensed under the MIT License - see the LICENSE file for details.

package/bin/cli.js

@@ -0,0 +1,129 @@
+#!/usr/bin/env node
+
+const fs = require("fs");
+const path = require("path");
+const process = require("process");
+const yargs = require("yargs/yargs");
+const { hideBin } = require("yargs/helpers");
+const TemplateEngine = require("../src/engine/TemplateEngine");
+const {
+  getSourcePathType,
+  processFile,
+  processDirectory,
+} = require("../src/handlers/FileHandler");
+const createLogger = require("../src/helpers/createLogger");
+
+function loadExtensions() {
+  const extensions = {};
+  const fullPath = path.join(__dirname, "..", "src", "extensions");
+
+  fs.readdirSync(fullPath).forEach((file) => {
+    if (path.extname(file) !== ".js") return;
+
+    const extName = path.basename(file, ".js");
+    const ExtensionClass = require(path.join(fullPath, file));
+    extensions[extName] = ExtensionClass;
+  });
+
+  return extensions;
+}
+
+const availableExtensions = loadExtensions();
+
+// Utility function for error handling and extension validation
+function validateExtensions(requestedExtensions, availableExtensions) {
+  const missingExtensions = requestedExtensions.filter(
+    (ext) => !availableExtensions[ext]
+  );
+  if (missingExtensions.length > 0) {
+    console.error(
+      "One or more specified extensions could not be loaded:",
+      missingExtensions.join(", ")
+    );
+    return false;
+  }
+  return true;
+}
+
+yargs(hideBin(process.argv))
+  .command(
+    "render <sourcePath> [options]",
+    "Render templates from JSON to HTML/JSX",
+    (yargs) => {
+      yargs
+        .positional("sourcePath", {
+          describe: "Source file or directory containing JSON templates",
+          type: "string",
+        })
+        .option("outputDir", {
+          alias: "o",
+          describe: "Output directory for rendered templates",
+          type: "string",
+        })
+        .option("extensions", {
+          alias: "e",
+          describe: "Extensions to use for template processing",
+          type: "array",
+          default: [],
+        })
+        .option("name", {
+          alias: "n",
+          describe: "Base name for output files",
+          type: "string",
+        })
+        .option("componentName", {
+          alias: "c",
+          describe: "Component name for framework-specific templates",
+          type: "string",
+        })
+        .option("verbose", {
+          alias: "v",
+          type: "boolean",
+          description: "Run with verbose logging",
+        });
+    },
+    async (argv) => {
+      const { verbose } = argv;
+      const logger = createLogger(verbose, "cli");
+      logger.info("Starting template rendering process...");
+
+      // Validate requested extensions before attempting to use them
+      if (!validateExtensions(argv.extensions, availableExtensions)) {
+        // Exit if validation fails
+        return;
+      }
+
+      // Instantiate extensions with verbosity
+      const extensions = argv.extensions.map(
+        (extension) => new availableExtensions[extension](verbose)
+      );
+
+      const { name, componentName } = argv;
+      const sourcePath = path.join(process.cwd(), argv.sourcePath);
+      const outputDir = argv.outputDir ?? "";
+      const sourcePathType = await getSourcePathType(sourcePath);
+      const templateEngine = new TemplateEngine();
+
+      if (sourcePathType === "directory") {
+        await processDirectory(
+          sourcePath,
+          outputDir,
+          extensions,
+          templateEngine,
+          verbose
+        );
+      } else if (sourcePathType === "file") {
+        await processFile(
+          sourcePath,
+          outputDir,
+          extensions,
+          templateEngine,
+          name,
+          componentName,
+          verbose
+        );
+      }
+    }
+  )
+  .demandCommand(1, "You need at least one command before moving on")
+  .help().argv;

package/dist/bem.html

@@ -0,0 +1,12 @@
+<nav class="nav">
+  <ul class="nav__list">
+    <li class="nav__item nav__item--active">
+      <a href="/" class="nav__link"><span class="nav__link-text">Home</span></a>
+    </li>
+    <li class="nav__item">
+      <a href="/about" class="nav__link"
+        ><span class="nav__link-text">About</span></a
+      >
+    </li>
+  </ul>
+</nav>

package/examples/bem.js

@@ -0,0 +1,81 @@
+// Example of using the TemplateEngine class to render a simple HTML template with a class naming convention using the BEM extension.
+// You can run this example with `npm run example:slots` or `yarn example:slots`.
+
+const { TemplateEngine, BemExtension } = require("../src");
+const verbose = true;
+
+const templateEngine = new TemplateEngine();
+const bemExtension = new BemExtension(verbose);
+
+const bem = bemExtension.setNodeExtensionOptionsShortcut;
+
+/*
+Using the BEM extension options shortcut allows us to write:
+
+{
+  tag: "nav",
+  ...bem({ block: "nav" }),
+}
+
+instead of:
+
+{
+  tag: "nav",
+  extensions: {
+    bem: {
+      block: "nav",
+    },
+  },
+}
+*/
+
+// Data
+const navigationItems = [
+  { name: "Home", url: "/", iconName: "home" },
+  { name: "About", url: "/about", iconName: "about" },
+];
+
+// Templates
+const navigationTemplate = [
+  {
+    tag: "nav",
+    ...bem({ block: "nav" }),
+    children: [
+      {
+        tag: "ul",
+        ...bem({ element: "list" }),
+        children: navigationItems.map((item, itemIndex) => ({
+          tag: "li",
+          ...bem({
+            element: "item",
+            modifiers: itemIndex === 0 ? ["active"] : [],
+          }),
+          children: [
+            {
+              tag: "a",
+              ...bem({ element: "link" }),
+              attributes: { href: item.url },
+              children: [
+                {
+                  tag: "span",
+                  ...bem({ element: "link-text" }),
+                  children: [{ type: "text", content: item.name }],
+                },
+              ],
+            },
+          ],
+        })),
+      },
+    ],
+  },
+];
+
+// Render
+(async () => {
+  await templateEngine.render(navigationTemplate, {
+    name: "bem",
+    extensions: [bemExtension], // Only BEM extension is needed for this example
+    writeOutputFile: true,
+    verbose,
+  });
+})();

package/examples/react.js

@@ -0,0 +1,109 @@
+// Example of using the TemplateEngine class to render a simple JSX component with using the React extension.
+// You can run this example with `npm run example:react` or `yarn example:react`.
+
+const { TemplateEngine, ReactExtension } = require("../src");
+const verbose = true;
+
+const templateEngine = new TemplateEngine();
+const reactExtension = new ReactExtension(verbose);
+
+const initialTodos = [
+  { id: 1, text: "Learn JavaScript", completed: false },
+  { id: 2, text: "Build a todo app", completed: false },
+];
+
+const todoAppTemplate = [
+  {
+    tag: "div",
+    attributes: { class: "todo-app" },
+    children: [
+      {
+        tag: "input",
+        attributes: {
+          type: "text",
+          id: "todoInput",
+          placeholder: "Add a new todo",
+        },
+      },
+      {
+        tag: "button",
+        attributes: {
+          onclick: "handleAddTodo",
+        },
+        children: [{ type: "text", content: "Add" }],
+        extensions: {
+          react: {
+            tag: "DefaultButton",
+            attributes: {
+              color: "primary",
+              label: "Add",
+            },
+            expressionAttributes: {
+              onClick: "handleAddTodo",
+            },
+          },
+        },
+      },
+      {
+        tag: "ul",
+        attributes: { id: "todoList" },
+        children: initialTodos.map((todo) => ({
+          tag: "li",
+          children: [{ type: "text", content: todo.text }],
+          attributes: {
+            onclick: "this.parentNode.removeChild(this);",
+          },
+          extensions: {
+            react: {
+              tag: "TodoCard",
+              expressionAttributes: {
+                onClick: "() => handleRemoveTodo()",
+              },
+            },
+          },
+        })),
+      },
+      {
+        tag: "script",
+        children: [
+          {
+            type: "text",
+            content: `
+                function handleAddTodo() {
+                    const todoList = document.getElementById('todoList');
+                    const newTodoText = document.getElementById('todoInput').value;
+                    const newTodoItem = document.createElement('li');
+                    
+                    newTodoItem.textContent = newTodoText;
+                    todoList.appendChild(newTodoItem);
+                    
+                    document.getElementById('todoInput').value = ''; // Clear the input field
+                }
+            `,
+          },
+        ],
+        extensions: {
+          react: {
+            ignore: true,
+          },
+        },
+      },
+    ],
+  },
+];
+
+// Render
+(async () => {
+  await templateEngine.render(todoAppTemplate, {
+    name: "html-todo-app",
+    writeOutputFile: true,
+  });
+
+  await templateEngine.render(todoAppTemplate, {
+    name: "react-todo-app",
+    extensions: [reactExtension], // Only React extension is needed for this example
+    outputDir: "dist", // React extension defaults to "dist/react"
+    writeOutputFile: true,
+    verbose,
+  });
+})();

package/examples/slots.js

@@ -0,0 +1,103 @@
+// 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/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "js-template-engine",
+  "version": "1.0.0",
+  "description": "A dynamic templating engine that translates JavaScript or JSON data into structured templates across multiple languages.",
+  "main": "index.js",
+  "bin": {
+    "js-template-engine": "./bin/cli.js"
+  },
+  "scripts": {
+    "example:react": "node examples/react.js",
+    "example:bem": "node examples/bem.js",
+    "example:slots": "node examples/slots.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/djurnamn/js-template-engine.git"
+  },
+  "keywords": [
+    "javascript",
+    "js",
+    "template",
+    "templating",
+    "engine",
+    "json",
+    "react",
+    "bem"
+  ],
+  "author": "Björn Djurnamn <bjorn@djurnamn.co>",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/djurnamn/js-template-engine/issues"
+  },
+  "homepage": "https://github.com/djurnamn/js-template-engine",
+  "dependencies": {
+    "signale": "^1.4.0",
+    "yargs": "^17.7.2"
+  },
+  "devDependencies": {
+    "eslint": "^8.0.1",
+    "prettier": "^3.2.5"
+  }
+}

package/src/engine/TemplateEngine.js

@@ -0,0 +1,249 @@
+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

@@ -0,0 +1,108 @@
+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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,116 @@
+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

@@ -0,0 +1,19 @@
+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

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

package/src/index.js

@@ -0,0 +1,12 @@
+const TemplateEngine = require("./engine/TemplateEngine");
+const BemExtension = require("./extensions/bem");
+const ReactExtension = require("./extensions/react");
+const { processFile, processDirectory } = require("./handlers/FileHandler");
+
+module.exports = {
+  TemplateEngine,
+  BemExtension,
+  ReactExtension,
+  processFile,
+  processDirectory,
+};