Modularjs Basics

Modularjs is a powerful system designed for Nexo Maker that lets you build modular, reactive components inspired by React.js. It enables you to write dynamic UI modules with hooks like useState and useEffect inside your expansions, making your content interactive and maintainable.

---

🚀 Getting Started with Modularjs

A Modularjs component must export a function using:

module.exports = ({ useState }) => {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>Hello</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};

Key points:

• The function must return JSX-like HTML to render.

• The argument object contains utilities provided by Nexo Maker, such as React-inspired hooks like useState and useEffect.

• More hooks and utilities will be added in the future, so expect this API to expand.

---

📂 Organizing Your Modular Components

To keep your project clean and maintainable, we recomend:

• Create a pages folder inside your expansion directory to hold all Modularjs components.

• If a component has multiple files (JSX, CSS, assets), create a dedicated folder for that component inside pages.

Example structure:

your-expansion/
  └── pages/
       ├── dashboard/
       │    ├── dashboard.jsx
       │    └── dashboard.css
       └── spinningSquare/
            ├── spinningSquare.jsx
            └── spinningSquare.css

This organization makes components easier to locate, update, and reuse.

---

🔧 Registering Modular Pages

Your expansion’s main.js (or equivalent entry file) must register your modular pages to make them available in Nexo Maker:

module.exports.init = async () => {
  const nm = api.nexomaker;

  nm.registerModularPage('dashboard', __dirname + '/pages/dashboard/dashboard.jsx');
  nm.registerModularPage('spinning-square', __dirname + '/pages/spinningSquare/spinningSquare.jsx');
};

module.exports.metadata = {
  id: "your-expansion",
  version: "0.1"
};

• registerModularPage(id, filePath) links an ID with the component’s file.

• You can then dynamically load these modules by their IDs inside Nexo Maker or other Modularjs components.

---

✅ Benefits of This Approach

• Modularity: Clear separation of UI structure and logic into small, manageable components.

• Maintainability: Update UI components independently without affecting unrelated parts.

• Flexibility: Reuse components and styles across your expansion or even other expansions.

---

💡 Tips for Best Practices

• Always register your modular pages correctly with unique IDs.

• Use Modularjs components inside other Modularjs components to build complex UIs with nested modules.

• Keep stylesheets and assets organized alongside their components within the pages folder.

• Follow semantic naming conventions for easier navigation and understanding.