Skip to main content

Prerequisites​

  • Node.js version 18 or above
  • TypeScript version 5.0 – 5.7

Installation​

npm install @clawject/di
tip

Remember to install language service plugin to get support for Clawject features right in your code editor!

Clawject provides unplugins for various bundlers (all bundlers that are supported by unplugin):

You can import unplugin in the following ways:

import ClawjectUnplugin from '@clawject/di/unplugin';

export default defineConfig({
  plugins: [ClawjectUnplugin.vite()]
})

Or

import ClawjectUnplugin from '@clawject/di/unplugin/${bundler_name}';

export default defineConfig({
  plugins: [ClawjectUnplugin.bundler_name()]
})

If you are using a bundler with a typescript loader, e.g. webpack and ts-loader you can use the following configuration:

webpack.config.js
import { ClawjectTransformer } from '@clawject/di/transformer';
import { ClawjectMetadataTransformer } from '@clawject/di/transformer/metadata';
import ClawjectUnplugin from '@clawject/di/unplugin/webpack';

export default {
  module: {
    rules: [{
      test: /\.ts$/,
      loader: 'ts-loader',
      options: {
        compiler: 'ts-patch/compiler',
        // or if you're not using ts-patch
        getCustomTransformers: (program, getProgram) => ({
          before: [ClawjectTransformer(getProgram)],
          afterDeclarations: [ClawjectMetadataTransformer(getProgram)]
        })
      }
    }]
  },
  plugins: [
    // skipCompilation tells clawject to do not process
    // files additionally to the typescript compilation
    ClawjectUnplugin({ skipCompilation: true })
  ]
};

tsc and ts-patch​

It's possible to use clawject as a typescript compiler plugin. To do so, you need to add transformers in your tsconfig.json.

tip

ts-patch patches typescript to allow custom transformers (plugins) during build.

It allows you to use Clawject with any build tool that uses typescript compiler.

For detailed ts-patch configuration guide - please refer to ts-patch documentation.

tsconfig.json
{
  "compilerOptions": {
    "plugins": [
      { "transform": "@clawject/di/transformer" },
      {
        "transform": "@clawject/di/transformer/metadata",
        "afterDeclarations": true
      }
    ]
  }
}
note

@clawject/di/transformer/metadata is optional, it's used to generate metadata for your configuration classes which allows you to share configuration via npm packages. Visit sharing configurations section to learn more about it.