Modules

PolyMPR Modules 🧩

PolyMPR is designed with a modulith architecture to ensure flexibility, scalability, and ease of maintenance. Each module is a self-contained unit that can be added, removed, or updated independently. 📦

Create Modules 🏗️

Creating modules in PolyMPR is straightforward, thanks to its well-defined structure and conventions. Below, you'll find everything you need to know to build and integrate your own modules into the platform.

Module Structure 🧱

Each module must be placed inside the routes/(apps)/ folder and follow the structure outlined below. This ensures consistency and makes it easier to maintain and extend the platform.

Folder Structure:

.
├── api/                     # API endpoints for the module
├── (_components)/           # Shared components used within the module
├── (_islands)/              # Interactive islands (client-side components)
├── partials/                # Reusable partial templates
│   └── index.tsx            # Entry point for partials
├── (_props)/
│   └── props.ts             # Module-specific props
├── index.tsx                # Main entry point for the module
└── types.d.ts               # TypeScript type definitions for the module

Module Folders Explained 🧱

Here’s a breakdown of each folder and its purpose:

1. api/:

   • Contains API endpoints specific to the module.
   • Each file in this folder represents a route handler for the module.
   • Example: api/users.ts for handling user-related API requests.

2. (_components)/:

   • Houses shared React components used within the module.
   • These components are reusable and can be imported into other parts of the module.
   • Example: A UserCard.tsx component for displaying user information.

3. (_islands)/:

   • Contains interactive client-side components (islands) for the module.
   • Islands are hydrated on the client side and enable interactivity.
   • Example: A SearchBar.tsx component with dynamic search functionality.

4. partials/:

   • Stores reusable partial templates for rendering specific parts of the UI.
   • The index.tsx file serves as the entry point for partials.
   • Example: A Header.tsx partial for rendering the module's header.

5. (_props)/:

   • Defines the properties of the module.
   • The CLI creates this file.

6. index.tsx:

   • The main entry point for the module.
   • The CLI creates this file.

7. types.d.ts:

   • Contains TypeScript type definitions specific to the module.
   • This file ensures type safety and consistency across the module.
   • Example: Defining types for API responses or component props.

Creating a New Module 🛠️

To create a new module, you can use the CLI:

pmpr module create <module-name-kebab-case>

It will create all the required files for a module.

Example: User Management Module 👤

Here’s an example of how a users/ module might look:

users/
├── api/
│   └── users.ts             # API endpoints for user management
├── (_components)/
│   └── UserCard.tsx         # Component for displaying user info
├── (_islands)/
│   └── SearchBar.tsx        # Interactive search bar component
├── partials/
│   └── index.tsx            # Entry point for partials
├── (_props)/
│   └── props.ts             # Module-specific props
├── index.tsx                # Main entry point for the module
└── types.d.ts               # TypeScript type definitions

Next Steps 🚀

Now that you know how to create modules, you can start building and customizing PolyMPR to meet your organization's needs. Check out the following resources to continue your journey:

• Tutorials: Step-by-step guides to help you get the most out of PolyMPR. 🎓
• CLI Documentation: Dive into the technical details of PolyMPR's CLI. 📄
• FAQs: Find answers to common questions about PolyMPR. ❓
• Release Notes: Stay up-to-date with the latest features and improvements. 📰

Thank you for installing PolyMPR! If you have any questions or need further assistance, feel free to reach out to the community or consult the FAQs. Happy coding! 💻✨