Having direct importing of single Component instead of destruct import

[amerllica]

We are making our UI-kit by using tsdx and it contains some components and we just want to import one instead of all (lazy by loadable-component):

Current Behavior

We should import everything like this:

import { Button } from 'TSDX-Package';

Desired Behavior

I wanted to import my components like this:

import Button from 'TSDX-Package/Button';

Sample of use case

import loadable from '@loadable/component';

const Button = loadable(
  () =>
    import('TSDX-Package/Button'), // here we must have direct import 
  {
    ssr: false,
  }
);

⚠️ It's not our solution:

The below solution works but tree-shake won't happen, we will have whole the package in the bundle.

import loadable from '@loadable/component';

const Button = loadable(
  () =>
    import('TSDX-Package').then(({ Button }) => ({
      default: Button,
    })),
  {
    ssr: false,
  }
);

[oxodesign]

@amerllica did you find a better solution for this (besides loadable)?

[amerllica]

@oxodesign, Not yet buddy, but @SaeedPadyab nominate another way:

import loadable from '@loadable/component';

const Button = loadable(
  () =>
    import('TSDX-Package/src/Button'),
  {
    ssr: false,
  }
);

I test it, it works and tree-shake happens but I'm not sure it is a good way or not. reading from src. I'm now sure about it, but it works properly.