Feat: Add Individual Component Imports

[tkottke90]

Description

Related to #35. I started importing Kobalte into my Solid project and noticed that there was a significant (8-10 second based on a Google Lighthouse score) delay before my page had loaded.

Looking at the developer tools (specifically the network tab in Firefox) I could see that there was about 3.54 MB of files loaded into the browser. Based on the file names I could see that every Kobalte module was being loaded regardless of how many were being used:

Naturally I was curious about bundle sizes as some were in the related issue. I was happy to see this package was tree-shakeable

This drew me to the conclusion that it was simply a developer experience issue. The cost of having to re-load the entirety of Kobalte on any non-cached reload meant seeing a white screen while all of the resources downloaded to the browser.

Solution

Seeing the open issue and the conservation that was going on it appeared to me that this could be resolved by adding sub-folder exports to the core module:

import Dialog from "../../kobalte/dialog";

export function App() {

  return (
    <Dialog.Root>
      ...
    </Dialog.Root>
  );
}

To achieve this a sub-folder export was added to the package.json file which allowed each of the component directories to be targeted directly:

// package.json
{
  ...,
  exports: {
    ...,
    "./*": {
      "types": "./dist/types/*/index.d.ts",
      "solid": "./dist/source/*/index.jsx"
    }
  }
}

One of the goals I had when working on this project was to ensure backwards compatibility. To this effort a default export was added to each component module could be a "drop-in replacement" for the current version of Kobalte. This way consumers of this library could transition when they were ready or the Kobalte team can decide on if/when deprecation of the previous pattern would occur.

[netlify]

❌ Deploy Preview for kobalte failed.

Name	Link
🔨 Latest commit	c08d32d
🔍 Latest deploy log	https://app.netlify.com/sites/kobalte/deploys/6578efe19d9dac0008559e5d

[Murzbul]

What would be the problem with this feature? The issue of downloading and improving performance seems quite important to me.

[fabien-ml]

Hi, sorry for the late response. I've no problem with the PR, I just didn't had time to review it yet.

[seogrady]

@fabien-ml Any movement on this PR? It'd be great to get this in.

[tkottke90]

Resolved the merge conflicts that were being reported so those don't block the merge

[fabien-ml]

PaginationList aka List is now PaginationItems aka Items

[thomas-evans]

@tkottke90 @fabien-ml Bumping:
Thank you all for the work on this, if I can help please message me.

[aminya]

Exposing default exports is not necessary for this PR. The package.json change should be enough.
I made a simpler change needed for this capability in #390

[jer3m01]

Integrated this in #391 and changed the API.
Thanks for your PR!