Project Structure

For Magos to work effectively, we recommend using a clear directory structure. This make you manage the states easier, and it's more scalable and maintainable.

📂 Suggested folder structure

Here's a common organizational structure in real-world projects:

For Simple Vanilla JS projects

If you're building a project without a framework or complex bundling tools, you can follow the simplified structure below:

⚠️ Key Considerations for Vanilla:

• Extensions: Always use .js for your files.

• Module Type: When linking your JavaScript in index.html, remember to use type="module":

<script type="module" src="./js/app.js"></script>

• Explicit Imports: In a browser-native environment, you must include the file extension in your import statements:

import { store } from "./store/store.js"; // Note the .js extension

📝 Role of each component

• boxes/: Contains the logical definitions for your state. Each file represents a specific domain of state (e.g., auth, counter, or theme) rather than putting everything in one place.

• store.ts: The central configuration file that combines all of your boxes into a unique, global store using createStore.

💡 Why should it be organized this way?

Scalability: Easily add 10 or 100 boxes without messing up the main file.

Teamwork: Minimize code conflicts when multiple team members are working on different features simultaneously.

Readability: By look at the boxes/, anyone can instantly understand which state domains are being managed in your app.