JSFiddle - React, Tailwind, and code Playground

by velo_ninja

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>SUPER App with Dynamic Addons</title>
  <style>
    .addon-container {
      border: 1px solid #ccc;
      padding: 10px;
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>SUPER App</h1>
  <div id="app-host"></div>

  <script>
    // Simulated "Addon Modules"
    const addonA = {
      name: "AddonA",
      init(container, options) {
        container.innerHTML = `
          <h2>Addon A</h2>
          <button id="btn-a">Click A</button>
        `;
        document.getElementById("btn-a").addEventListener("click", () => {
          alert("Button A clicked!");
        });
      }
    };

    const addonB = {
      name: "AddonB",
      init(container, options) {
        container.innerHTML = `
          <h2>Addon B</h2>
          <button id="btn-b">Click B</button>
        `;
        document.getElementById("btn-b").addEventListener("click", () => {
          alert("Button B clicked!");
        });
      }
    };

    // Simulated dynamic import (just a lookup in this case)
    const moduleRegistry = {
      "/addons/addonA.js": addonA,
      "/addons/addonB.js": addonB
    };

    // Apps to load (in real app, this could come from Flask API or config)
    const addonsToLoad = [
      { name: "AddonA", modulePath: "/addons/addonA.js" },
      { name: "AddonB", modulePath: "/addons/addonB.js" }
    ];

    const appHost = document.getElementById("app-host");

    // Load addons dynamically
    addonsToLoad.forEach(addon => {
      const module = moduleRegistry[addon.modulePath];
      const container = document.createElement("div");
      container.className = "addon-container";
      container.dataset.name = addon.name;

      appHost.appendChild(container);
      module.init(container);
    });
  </script>
</body>
</html>