A.*'s Div is the fastest, simplest, most powerful way to add readability to JSX. One-shot comparision.

Typical JSX

<div class="...">
    <div class="...">
        <img class="..." />
    </div>
    <div class="...">
        <div class="..." />
        <div class="..." />
        <div class="..." />
    </div>
    <div class="...">
        <img class="..." />
    </div>
</div>

Div A.* JSX

<A.GroupIcon class="...">
    <A.ItemTop class="...">
        <img class="..." />
    </A.ItemTop>
    <A.DividerVertFull class="...">
        <A.BorderT class="..." />
        <A.BorderMiddle class="..." />
        <A.BorderB class="..." />
    </A.DividerVertFull>
    <A.ItemLowerPart>
        <img class="..." />
    </A.ItemLowerPart>
</A.GroupIcon>

Explain Div A.* Quickly

The A.* component always returns a <div>. There's no setup. It's the fastest way to make your JSX readable requiring no extra work from you. There is no extracting components here, extra files, or hidden codegen.

1. Import A.*
2. Rename a Div to whatever you need.

In "Div A.* Example," each <div> was simply renamed inline, no hidden components defined elsewhere. This means A is an object (called a Proxy in JS) that always returns a <div> no matter what you type after the <A.. When run, the code takes everything you pass to it, then passes it to the real Div.

How Is A.* Best Used?

1. Make a large component of JSX easier to read.

2. Reduce props passing (or Context).

3. Notice repeated HTML patterns.

4. Make code more focused on your domain.

Declarative Repetition

<A.Sidebar>
    <A.Group class="flex">
        <A.BorderL class="border-l border-amber-500" />
        <h3>Explorer</h3>
    </A.Group>
    <A.BorderT class="border-t border-neutral-500" />
    <A.Group class="flex">
        <A.BorderL class="border-l border-emerald-500" />
        <h3>Outline</h3>
    </A.Group>
    <A.BorderT class="border-t border-neutral-500" />
    <A.Group>
        <A.BorderL class="border-l border-sky-500" />
        <h3>Timeline</h3>
    </A.Group>
</A.Sidebar>

Domain Focused Code

<A.TopBar class="flex">
    <A.LeftSide class="flex gap-1 items-center justify-center">
        <TopBarLeftButtons />
    </A.LeftSide>
    <A.GapWide class="flex-1" />
    <A.LeftSide class="flex gap-1 items-center justify-center">
        <TopBarRightButtons />
    </A.RightSide>
</A.TopBar>

Example in TypeScript

<>
    <div ... />
    <A.Example ... />
</>

Since A.* has TS in mind, its seen by TypeScript the same as a <div>. The familiar properties you expect are automatically known to TypeScript as soon as <A. is typed.

                                      ┌───────────┐         ┌───────┐
                             ┌───────►│ A.TabItem │────────►| <div> |
                             |        └───────────┘         └───────┘
                             |                                        
          ┌─────────┐        |        ┌───────────┐         ┌───────┐
          │   A.*   │────────┼───────►│ A.HelpBox │────────►| <div> |
          └─────────┘        |        └───────────┘         └───────┘
                             |                                        
                             |        ┌─────────────┐       ┌───────┐
                             └───────►│ A.TriColumn │──────►| <div> |
                                      └─────────────┘       └───────┘

How To Use A.*'s Div
ArkSouthern