This is a WASM plugin for Vite with the help of vite-react-swc plugin that adds plume-ts-di needed decorators for dependency injection.
Class files are transformed to add the class name and the dependencies for the dependency injection to work. With this, you don't need to add the typescript transformers to your project.
This plugin is fully compatible with plume-ts-di and totally invalidates the need of Typescript transformers.
export default class SampleService {
constructor(private readonly sampleApi: SampleApi) {
}
sayHello(name: string) {
return this.sampleApi.sample(name);
}
}
Will be transformed to:
export default class SampleService {
constructor(private readonly sampleApi: SampleApi) {
}
sayHello(name: string) {
return this.sampleApi.sample(name);
}
static get [Symbol.for("___CTOR_ARGS___")]() {
return [
"SampleApi"
];
}
static get [Symbol.for("___CTOR_NAME___")]() {
return "SampleService";
}
}
Minimum requirements: @vitejs/[email protected]
yarn add -D swc-class-decorator-plugin
Then in the vite.config.ts
file add the plugin to the plugin-react-swc
plugin.
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
react({
plugins: [['swc-class-decorator-plugin', {}]],
useAtYourOwnRisk_mutateSwcOptions: (options) => {
options.jsc!.experimental!.runPluginFirst = true;
}
}),
],
})
You can add config options for logging and debugging.
plugins: [['swc-class-decorator-plugin', { log: "Info" | "Debug" }]]
That's it, your classes will be transformed to add the needed information for dependency injection.
To work on this plugin, a sample project must be used. Referencing the plugin in the sample project can be done with Yarn in the sample project using:
yarn link /local/path/to/swc-class-decorator-plugin
yarn add -D swc-class-decorator-plugin@*
yarn build
yarn test
Entry point: src/lib.rs
It uses the plugin_transform
from swc_core
to transform the class, and then redirect to transform/src/lib.rs
to
process the file.