Improving Type-Safety and DX for Web Components in Brisa

[aralroca]

Context

Currently, when consuming web components in projects built with Brisa, a type is generated during build-time to let developers know which web components are available.

The names of the web components are defined based on the filename, which was a feasible solution at the time. However, this approach has some limitations:

Current Issues

1. Type-safety dependency on bun dev: If the bun dev command isn't run, the type-safety for consuming web components does not work.
2. Navigation in IDEs: When trying to navigate from a server component's code to a corresponding web component within VSCode, the intermediate type definitions file is displayed instead of the actual web component code.

These issues hinder the developer experience and require improvement.

Task

The goal of this task is to research and propose a better approach to address the current issues mentioned above.

Key Objectives

1. Investigate alternative solutions for type generation that are not dependent on running bun dev for type-safety.
2. Explore ways to enable smooth navigation in IDEs (e.g., VSCode) from server component code to the actual web component code instead of intermediate type definitions.
3. Evaluate how these changes could integrate seamlessly into the existing build system.

Existing Implementation

For reference, the current implementation of injected types during build-time can be found here:
Injected Types Implementation

And implemented here.

The same build-time type works for routes:

Suggestions for Contributions

1. Familiarize yourself with the relevant code in the Brisa source directory.
2. Experiment with Brisa's examples to understand how types are currently used and how they impact the developer experience.
3. Propose ideas or alternative approaches to resolve the identified issues.

Feel free to share any insights, questions, or suggestions for improving the type system.

Outcome

The outcome of this task should be:

• A detailed report or implementation plan for addressing the mentioned issues.
• Recommendations for integrating the solution into the Brisa framework.

Note

If no better way is found after investigation, it is also a valid answer to conclude the ticket.

[aralroca]

CC: @shuraih775