Shared Static Resources

Overview

While @alias/ui/ handles React components and @alias/lib/ handles logic, @alias/res/ is dedicated to static assets. This system allows a module to provide default assets (like a "standard logo") while allowing other modules to replace them with zero code changes.

In JopiJS, sharing a resource gives you:

• A module-agnostic way to import assets via the @/res/ virtual path.
• The ability to override any asset using the Priority System.
• Support for any file type that your bundler can handle (PNG, SVG, JSON, TXT, etc.).

1. Sharing a Resource

To share a resource, create a folder inside @alias/res/. The folder name becomes the Resource Name. Inside that folder, you must include the asset itself and an index.ts file to export it.

Project Structure:

src/ mod_ui_kit/
└── @alias/
    └── res/
        └── main_logo/         # The "Resource Name"
            ├── logo_v1.svg    # The actual asset
            └── index.ts       # The "Bridge" code

The Bridge Code (index.ts) The index.ts file acts as the entry point. It simply imports the asset and exports it as the default.

import logo from "./logo_v1.svg";
export default logo;

2. Using a Shared Resource

Once a resource is shared, any module can import it using the @/res/ virtual path. You don't need to know which module is actually providing the file.

import logo from "@/res/main_logo";

export default function Navbar() {
    return (
        <nav>
            <img src={logo} alt="Company Logo" />
        </nav>
    );
}

3. Replacing a Resource (Overriding)

The real strength of this system is the ability to replace assets without modifying the module that uses them.

How it works:

1. Identify the Resource Name (e.g., main_logo).
2. Create the same folder path in your own module.
3. Add your new asset and a high.priority file.

Visual Example: Imagine you are using a theme module (mod_theme) with a generic logo, and you want to use your company's real logo.

src/
├── mod_theme/
│   └── @alias/res/main_logo/
│       ├── default.png
│       └── index.ts            # Exporting default.png
└── mod_my_company/
    └── @alias/res/main_logo/   # Same resource name
        ├── company_logo.svg    # Your real asset
        ├── index.ts            # Exporting company_logo.svg
        └── high.priority       # The "Winning" marker

Result: Your Navbar component (from Section 2) will now automatically display the company_logo.svg because it has a higher priority, even though the component code never changed.

4. Why Use This System?

• Branding & White Labeling: Easily swap logos, icons, and JSON static data for different clients by simply enabling/disabling modules.
• Maintenance: Update a global asset in one place, and every module using that asset through the @/res/ path will update instantly.
• Portability: Keep your assets bundled with the logic that needs them (e.g., a "User Profile" module carrying its own default "Avatar" image).