Using UI components & functions across multiple Magic Features

Imagine you have an e-commerce homepage (in a MagicJS project), and you've already integrated a powerful magic feature called "Product Catalogue". Now, you want to add a comment section for users to share their thoughts on the listed products.

With MagicJS, you can seamlessly nest one Magic Feature inside another. In this case, you can effortlessly integrate the "Comment" feature into the existing "Product Catalogue" feature. It's as simple as copying the Comment Feature folder and pasting it into the Product Catalogue folder.

What makes this process truly remarkable is that you're not just adding a standalone comment feature; you're incorporating it as a complete package. This means all the functionalities, user interface components, and other necessary elements come integrated seamlessly. It's like placing a fully assembled puzzle piece into another puzzle - everything fits perfectly.

In essence, MagicJS allows you to build complex web applications with ease by stacking features within features. The modular nature of Magic Features ensures that you can enhance your Product Catalogue not just with a comment section but with a fully functional and cohesive package that enriches the overall user experience.

importUI()

importUI() plays an important role in importing magic features. The importUI() function simplifies UI component imports using "aliases" from a JSON configuration, promoting a modular and organized project structure for improved code manageability.

Aliases

Configuration

In your project, you would have a JSON configuration file "config.json" that associates aliases with specific "Magic Features". This configuration serves as a mapping between the user-friendly alias and the actual file path or module path of the magic feature.

Here's an example for config.json file.

{
    "aliases": [
        {
            "fileName": "comment.tsx",
            "alias": "@comment"
        }
    ]
}

Using Aliases with importUI

The importUI function is then used to dynamically import UI components based on the aliases defined in the configuration.

Here's an example:

import { importUI } from "@magicjs.dev/frontend"
import React from "react"

const Comment = importUI("@comment")

export default function Component(props: any) {
  return (
    <div>
      <Comment />
    </div>
  )
}