Installation

Installing Obsidian is a straightforward process that involves adding the package to your project, enabling TypeScript decorators, and adding Obsidian's transformer to your build system, either Babel or SWC. Let's go through the steps.

1. Install Obsidian

Install the package using your preferred package manager:

Yarn

yarn add react-obsidian

NPM

npm install react-obsidian

2. Add Obsidian's transformer

Like most Dependency Injection frameworks, Obsidian uses automatic code generation to create the bindings necessary for resolving dependencies. This approach helps reduce the amount of boilerplate code required by developers.

You'll need to add either the Babel or SWC plugins depending on your project's configuration.

• React Native: React Native projects only support Babel, so you'll need to use the Babel plugin.
• Vite: Vite supports both Babel and SWC. Choose the one according to your project's build system.
• NextJS: NextJS supports both Babel and SWC. If your project uses the next/font package you'll have to use the SWC plugin as next/font doesn't support Babel.

Babel

Install the required Babel plugins

You will need to install the plugin-proposal-decorators plugin if it's not installed already:

Yarn

yarn add @babel/plugin-proposal-decorators

NPM

npm install @babel/plugin-proposal-decorators

If this is your first time using Babel, you will also need to install Babel's core packages:

Yarn

yarn add @babel/core @babel/preset-env @babel/preset-typescript

NPM

npm install @babel/core @babel/preset-env @babel/preset-typescript

Update your Babel configuration

Add the transformer and the required plugin to the list of plugins in your babel.config.js file or .babelrc file:

babel.config.js

module.exports = {
  presets: [
      ['@babel/preset-typescript', { 'onlyRemoveTypeImports': true }],
  ],
  plugins: [
    'react-obsidian/dist/transformers/babel-plugin-obsidian',
    ['@babel/plugin-proposal-decorators', {version: 'legacy'}],
  ]
};

SWC

Configure the transformer with the SWC plugin of your choice, either unplugin-swc or @vitejs/plugin-react-swc.

unplugin-swc

Add the transformer to the list of plugins in your vite.config.js file:

vite.config.js

import { defineConfig } from 'vite';
import swc from 'unplugin-swc';
import obsidian from 'swc-plugin-obsidian';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    swc.vite({
      jsc: {
        parser: {
          syntax: 'typescript',
          decorators: true,
        },
        experimental: {
          runPluginFirst: true,
          plugins: [ obsidian() ],
        },
      },
    }),
  ],
});

@vitejs/plugin-react-swc

Add the transformer and the required options to your vite.config.js file:

vite.config.js

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import react from '@vitejs/plugin-react-swc';
import obsidian from 'swc-plugin-obsidian';

export default defineConfig({
  plugins: [
    react({
      tsDecorators: true,
      plugins: [
        obsidian()
      ],
      useAtYourOwnRisk_mutateSwcOptions: (options) => {
        options.jsc.parser.decorators = true;
        options.jsc.experimental.runPluginFirst = true;
      }
    })
  ],
})

3. Add Obsidian's ESLint plugin (Recommended)

Obsidian provides an ESLint plugin that can help you find errors in your code related to dependency injection. See the ESLint plugin documentation for more information.