Import Export Optimization

This entry provides guidelines on how to use Platform imports in our projects and how to set up exports for good optimization.

Overview

The platform library has many different modules we can use, so it is vitally important to use best practices when utilizing the library or when developing it.

Importing Modules

When importing a module from the platform, let's say ItemCard from platform/components. The right way to import it is as such:

import ItemCard from 'platform/components/ItemCard';

This is the optimized way to use imports. When building and bundling, this works the best by not including any other dependencies that other modules from platform/components might have.

Adding a New Module

When adding a new module to our platform library, it's important to correctly set up module exports for ensured optimization. Let's say we are going to add a new component module named ChatView. We will add this to a new directory under platform/chat.

Steps:

1. Create the Component:

   • Inside platform/chat/ChatView/index.js:

     export { default } from "./ChatView";

2. Update Directory Index:

   • Inside platform/chat/index.js:

     export { default as ChatView } from "./ChatView";

3. Configure Package Exports:

   • Update platform/package.json:

     {
       "name": "platform",
       "private": false,
       "version": "0.0.11",
       "type": "module",
       "exports": {
         ".": "./index.js",
         "./layouts": "./src/layouts/index.js",
         "./vite": "./vite/vite.js",
         "./components/": "./components/index.js",
         "./chat": "./chat/index.js"
       },
       "scripts": {
          // ...
       }
     }

   • Note: The scripts section is still in progress and could change.

By following these steps, you ensure that the new module can be imported later in an optimized and structured manner.

Conclusion

Adhering to these guidelines helps maintain a scalable and efficient structure within our platform library, ensuring each module is easily accessible and optimally bundled for use in various projects.