fix type exports for cherry-picked imports

[jamesarosen]

Previously, the type exports worked for imports that rely on tree-shaking:

import { SlOption } from '@shoelace-style/shoelace/dist/react';

but not for cherry-picked imports:

import SlOption from '@shoelace-style/shoelace/dist/react/option';

This fixes that by declaring the type type exports for all paths.

See #2111

NOTE the build is set up in such a way that there are some inconsistencies:

• For themes/, utilities/, and translations/, the import is of the form @shoelace-style/shoelace/translations/ar
• For components/, the import is of the form @shoelace-style/shoelace/components/alert/alert
• For react/, the import is of the form @shoelace-style/shoelace/react/select and references ./dist/react/select/index.js

There aren't any tests for the React wrappers. I think if there were and if they imported from the public paths, not relative ones, they would have caught this.

Some alternate approaches we could use instead:

• move all the React component files out of the subdirectories so they compile to dist/react/COMPONENT.{js,d.ts}
• change the docs to say to import from '@shoelace-style/shoelace/dist/react/COMPONENT/index'

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
shoelace	✅ Ready (Inspect)	Visit Preview	Feb 10, 2025 0:19am

[jamesarosen]

I don't know that this fixes anything yet. I'm working on fixing the type-checking in the project so we can test it.

"Tests" added in the form of an additional tsc call.

[jamesarosen]

What I'm struggling with right now:

If I run npm run build before npm run typecheck, I get errors like

Subsequent property declarations must have the same type.  Property ''sl-button'' must be of type 'SlButton', but here has type 'SlButton'.ts(2717)

I think it's because TypeScript is finding both the src/ and dist/ versions and confusing them, but I'm not sure.

If I run npm run typecheck first, then dist/ doesn't exist, so the React components aren't defined for the test.

[jamesarosen]

npm run verify now successfully checks that the exports in package.json match the actual compiled output, at least for the React exports.

[jamesarosen]

This is a bug. It makes it impossible to

import '@shoelace-style/shoelace/dist/themes/light.css';

[jamesarosen]

I started integrating with a NextJS application, following this guide. It has examples like

import { setBasePath } from "@shoelace-style/shoelace/dist/utilities/base-path.js"

and

const SlButton = dynamic(
  // Notice how we use the full path to the component. If you only do `import("@shoelace-style/shoelace/dist/react")` you will load the entire component library and not get tree shaking.
  () => import("@shoelace-style/shoelace/dist/react/button/index.js"),
  {
    loading: () => <p>Loading...</p>,
    ssr: false,
  },
);

That agrees with the existing package.json exports. It's possible that the real fix is to fix the React docs. They currently suggest

import SlButton from '@shoelace-style/shoelace/dist/react/button';

To agree with the NextJS guide, that should be

import SlButton from '@shoelace-style/shoelace/dist/react/button/index.js';