Use file extensions explicitly

[christian-bromann]

Describe the bug

I am having issues being able to package individual components up due to the following error:

ERROR in ./node_modules/@vscode/webview-ui-toolkit/dist/button/index.js 6:0-57
Module not found: Error: Can't resolve './button.styles' in '/Users/christianbromann/Sites/Stateful/projects/vscode-runme/node_modules/@vscode/webview-ui-toolkit/dist/button'
Did you mean 'button.styles.js'?
BREAKING CHANGE: The request './button.styles' failed to resolve only because it was resolved as fully specified

It seems this project recently migrated to ESM (which I would consider being recognised as major version bump) and files in dist still have no explicit file extension, e.g.

import { buttonStyles as styles } from './button.styles';

Maybe there is just a misunderstanding how these components are supposed to be consumed. I currently just bundle them into my webview code and import them like:

import '@vscode/webview-ui-toolkit/dist/button/index.js'

as I don't need all of the components.

To reproduce

Checkout this branch: stateful/vscode-runme#79 and try to build the project.

Expected behavior

I am able to import individual components.

Current behavior

It throws an error.

Screenshots

Desktop (please complete the following information):

• OS Version: [e.g. macOS 11.3.1]
• Toolkit Version: [e.g. v0.8.0]

Additional context

I will rollback for now so nothing urgent here but would be great if:

• all file imports could have explicit extensions

• every component could be exported through package.json so I could do something like

   import Button from '@vscode/webview-ui-toolkit/button'
  

[hawkticehurst]

Hey @christian-bromann, thanks so much for bringing this up / I'm sorry I missed this big of a detail while converting the toolkit (back) to ESM!

I was able to clone your extension, reproduce the issue, and then fix it this afternoon (i.e. get your extension to build successfully by updating the toolkit imports to use explicit file extensions).

I want to try to avoid any more snafus so I'm not going to publish this fix until next week, and give myself the weekend to make sure I come back to this fresh.

Some other notes:

Major vs minor change

The toolkit was always supposed to be ESM based (with a fallback bundled file for those who needed it), but at some point, there was a regression that I missed where type: module was removed from package.json so that's why I viewed this change as a minor update versus major update. Following this logic, I would expect/plan for this file extension fix to be a patch update on the current minor release as well.

Open to discussing this more, however –– I want to avoid any more issues where we can while getting the toolkit back to ESM.

Proper ESM import syntax

On the note of the toolkit being built as ESM-first, there is actually a proper API for importing and registering the toolkit components already! It's just not properly documented.

I have a open PR right now that fully documents how to do this, but I had paused the work because (in retrospect) I was unknowingly running into issues caused by the above-mentioned regression.

For the record, the formal way of importing and registering toolkit components would look something like this (and is what I used while reproducing/fixing the errors in your extension):

import { provideVSCodeDesignSystem, vsCodeButton, vsCodeCheckbox } from '@vscode/webview-ui-toolkit';

provideVSCodeDesignSystem().register(
  vsCodeButton(),
  vsCodeCheckbox()
);

class SomeWebComponent extends LitElement {
  // ... other code ...

  render() {
    return html`
      <vscode-button>Click me!</vscode-button>
      <vscode-checkbox>Label</vscode-checkbox>
    `;
  }
}

[christian-bromann]

Following this logic, I would expect/plan for this file extension fix to be a patch update on the current minor release as well.

Gotcha, makes sense to me.

the formal way of importing and registering toolkit components would look something like this

Nice, we will update the way we import these components according to the suggested example.

Thanks for quick turnaround! Feel free to close at will.

[hawkticehurst]

Yeah of course! Thanks again for opening the issue

I'll close once a PR is merged into main :)