Skip to content

Conversation

@Galimede
Copy link
Member

@Galimede Galimede commented Oct 15, 2025

What does this PR do?

  • Refactors the CEM plugin to use TypeScript's resolveModuleName() for import resolution instead of manual path manipulation,
  • Adds support for the modern @import JSDoc syntax alongside the existing @typedef syntax for importing types,
  • Updates tests to match new function signatures and adds comprehensive tests for @import functionality.

The @import syntax provides a cleaner alternative:

  • Before: @typedef {import('./types.js').Foo} Foo
  • After: @import {Foo} from './types.js'

How to review?

  • Check the commits,
  • Run npm run components:docs and verify no warnings appear,
  • Check that types are correctly documented in the generated manifest for components using @import by modifying one of the @typedef in the files (you can use cc-badge as an example),
  • Run npm run test:mocha to verify all tests pass.

…tion

Replace manual path resolution logic with TypeScript's built-in module
resolution API for more accurate and consistent import handling.

Changes:
- Update findTypePath() to use ts.resolveModuleName()
- Update findPathAndTypesFromImports() to use ts.resolveModuleName()
- Remove manual path construction and extension conversion logic
- Remove unused ROOT_DIR constant
- Pass ts instance and module file path to resolution functions

This ensures the plugin follows the same module resolution rules as
TypeScript itself, handling edge cases like .d.ts files and index
files automatically.
Add support for the modern @import JSDoc syntax alongside the existing
@typedef syntax for importing types.

Changes:
- Add extractImportsFromImportTag() helper function to parse @import tags
- Update moduleLinkPhase to process @import tags in addition to @typedef
- Extract module paths and imported types from @import declarations
- Use TypeScript's resolveModuleName() for consistent module resolution
- Add comprehensive tests for @import functionality
- Update existing tests to use new function signatures

The @import syntax provides a cleaner alternative to the verbose
@typedef {import('./path').Type} Type pattern:

Before: @typedef {import('./types.js').Foo} Foo
After:  @import {Foo} from './types.js'

Both syntaxes are now supported and work identically.
@github-actions
Copy link
Contributor

🔎 A preview has been automatically published : https://clever-components-preview.cellar-c2.services.clever-cloud.com/cem/support-import/index.html.

This preview will be deleted once this PR is closed.

Copy link
Contributor

@pdesoyres-cc pdesoyres-cc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM. Thanks for handling that!

Copy link
Contributor

@florian-sanders-cc florian-sanders-cc left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

All good, I really like the fact that you chose to rely on the TypeScript module resolution 🙌

Can't wait before we can use @import everywhere 👀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants