Feature: Websmith plugin for Vite ecosystem `@quatico/websmith-vite`

[meck93]

Suggestion

The websmith project currently provides powerful TypeScript transformations through its compiler addons system, with support for webpack integration. Adding Vite integration would significantly enhance the ecosystem reach and allow websmith to be used in modern development workflows that leverage Vite's speed and developer experience benefits.

✅ Viability Checklist

My suggestion meets these guidelines:

• This wouldn't be a breaking change in existing websmith addons
• This wouldn't negatively impact the performance of the websmith build process without opt-in

⭐ Suggestion

Add a new package @quatico/websmith-vite that provides a Vite plugin to integrate websmith's TypeScript transformation capabilities into the Vite build pipeline. This would enable developers to use websmith's addon system to transform TypeScript files during Vite's build and dev processes.

The plugin should:

1. Support the same configuration options as the existing webpack plugin, adapted for Vite's plugin system
2. Seamlessly integrate with Vite's build pipeline to transform TypeScript files
3. Support all existing websmith addons without requiring changes
4. Maintain fast build and HMR capabilities that Vite is known for
5. Allow developers to use the full websmith addon ecosystem in Vite-based projects

📃 Motivating Example

// vite.config.js
import { defineConfig } from 'vite';
import websmith from '@quatico/websmith-vite';

export default defineConfig({
  plugins: [
    websmith({
      // Use the same configuration options as websmith.config.json
      addonsDir: '../../../addons/lib',
      // Magellan targets & addons
      targets: {
        client: {
          addons: ['client-function-transform'],
        },
        server: {
          addons: ['service-function-generate'],
        },
      },
      // Vite-specific options
      include: /\.tsx?$/,
      exclude: /node_modules/,
    }),
  ],
});

With this configuration, developers can leverage websmith's powerful transformation capabilities within their Vite projects. This enables them to use custom addons for generating code (e.g., Magellan client/server transformations), modifying module dependencies, or transforming TypeScript files during Vite's build and dev processes.

💻 Use Cases

1. Modern framework integration: Many developers are moving to Vite for frameworks like React, Vue, and Svelte due to its speed and developer experience. This plugin would allow them to use websmith's capabilities within those ecosystems.

2. Custom code generation: Vite users could benefit from websmith's ability to generate additional code artifacts during the build process, such as Magellan client/server transformations or generating TypeScript type definitions from other file formats or generating React components from schema files.

3. Enhanced TypeScript transformation: Developers could extend Vite's TypeScript handling with custom transformations that are difficult or impossible to do with just Vite's built-in TypeScript support.

4. Migration path: For teams already using websmith with webpack who want to migrate to Vite, this plugin would provide a smoother transition path by allowing them to keep their existing addons and workflows.

5. Performance optimization: Websmith's powerful transformation capabilities could be used to optimize bundle size and runtime performance in Vite projects through specialized addons.

Currently, developers using Vite have to either forego websmith's capabilities or set up a separate build step before Vite, which complicates the workflow and reduces development speed. This plugin would provide a seamless integration that preserves Vite's excellent developer experience while adding websmith's powerful transformation capabilities.

Final Goal: Integration with React Router v7 and Magellan

Another compelling integration scenario would be combining React Router v7 with the Magellan framework using the node-custom-server template. Since React Router v7 introduces its own Vite plugin which currently limits customization options, the @quatico/websmith-vite plugin could provide a critical bridge for seamless integration. Developers could configure the websmith plugin to run before React Router's transform step, applying all necessary Magellan addons to TypeScript files without interfering with React Router's own transformations. This would enable powerful use cases such as generating type-safe API clients - all while maintaining compatibility with React Router's file-based routing system. The plugin would need to carefully coordinate the transformation pipeline to ensure that both websmith's transformations and React Router's plugin can coexist, potentially through a composition pattern that preserves the benefits of both systems while avoiding the current limitations of React Router's Vite plugin architecture.