3

Modules

Kevin FEDYNA edited this page 2025-01-28 23:43:58 +01:00

Table of Contents

• PolyMPR Modules 🧩
• Create Modules 🏗️
• Module Structure 🧱
• Folder Structure:
• Module Folders Explained 🧱
• Creating a New Module 🛠️
• Example: User Management Module 👤
• Next Steps 🚀

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

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! 💻✨

PolyMPR is open-source and released under the MIT License 📜