Documentation

packages/documentation/docs/documentation/installation.mdx

@@ -6,26 +6,51 @@ import Tabs from '@theme/Tabs';
 import TabItem from '@theme/TabItem';
 
 # 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.
 
-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. Obsidian relies on Babel for code generation, so you'll need to have Babel configured in your project.
+## 1. Install Obsidian
+Install the package using your preferred package manager:
 
-:::important
-If your project uses either **Vite** or **Create React App**, please refer to the [Integration with third-party front-end environments](#integration-with-third-party-front-end-environments) section before following the steps below.
-:::
+<Tabs>
+  <TabItem value="yarn" label="Yarn" default>
 
-## 1. Install Obsidian
+  ```shell
+  yarn add react-obsidian
+  ```
 
-```bash
-npm install react-obsidian
-```
+  </TabItem>
+  <TabItem value="npm" label="NPM" default>
+
+  ```shell
+  npm install react-obsidian
+  ```
+
+  </TabItem>
+
+</Tabs>
 
 ## 2. Install Reflect-metadata
-First, install and enable the reflect-metadata polyfill.
-```bash
-npm install reflect-metadata
-```
+First, install the `reflect-metadata` package:
+
+<Tabs>
+  <TabItem value="yarn" label="Yarn" default>
+
+  ```shell
+  yarn add reflect-metadata
+  ```
+
+  </TabItem>
+  <TabItem value="npm" label="NPM" default>
+
+  ```shell
+  npm install reflect-metadata
+  ```
+  </TabItem>
+
+</Tabs>
+
+Then, enable the `reflect-metadata` polyfill by adding the following line to the top of your application's entry point (usually index.js or index.ts):
 
-Then, add the following line to the top of your application's entry point (usually index.js or index.ts):
 ```js
 import 'reflect-metadata';
 ```
@@ -44,55 +69,50 @@ Add the following options to your tsconfig.json file.
 }
 ```
 
-## 4. Add the required Babel plugins
-[BabelJS](https://babeljs.io/) is a JavaScript compiler that is used to transpile modern JavaScript code into code that is compatible with older browsers. Obsidian uses a Babel transformer to generate code that is used to resolve dependencies.
+## 4. 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.
+
+<Tabs>
+  <TabItem value="babel" label="Babel (React Native or Vite + Babel)" default>
 
-### 4.1. Install the required Babel plugins
+### Install the required Babel plugins
 
 You will need to install these plugins if you don't have them already:
 <Tabs>
   <TabItem value="yarn" label="Yarn" default>
 
-
   ```shell
   yarn add @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties babel-plugin-parameter-decorator @babel/core @babel/preset-env @babel/preset-typescript
   ```
 
-
   </TabItem>
   <TabItem value="npm" label="NPM" default>
 
-
   ```shell
   npm install @babel/plugin-proposal-decorators @babel/plugin-transform-class-properties babel-plugin-parameter-decorator @babel/core @babel/preset-env
   ```
 
-
   </TabItem>
-
 </Tabs>
 
 If this is your first time using Babel, you will also need to install Babel's core packages:
 
 <Tabs>
   <TabItem value="yarn" label="Yarn" default>
 
-
   ```shell
   yarn add @babel/core @babel/preset-env @babel/preset-typescript
   ```
   </TabItem>
   <TabItem value="npm" label="NPM" default>
 
-
   ```shell
   npm install @babel/core @babel/preset-env @babel/preset-typescript
   ```
   </TabItem>
-
 </Tabs>
 
-### 4.2. Update your Babel configuration
+### Update your Babel configuration
 
 Add the transformer and the required plugins to the list of plugins in your `babel.config.js` file or `.babelrc` file:
 
@@ -111,64 +131,55 @@ module.exports = {
 };
 ```
 
-## 5. Optional - Add Obsidian's ESLint plugin
-Obsidian provides an ESLint plugin that can help you find errors in your code related to dependency injection. See the [ESLint plugin](/docs/documentation/meta/eslint) documentation for more information.
+  </TabItem>
+  <TabItem value="swc" label="SWC (Vite + SWC)">
+
+### Install the required dependencies
+<Tabs>
+  <TabItem value="yarn" label="Yarn" default>
 
+  ```shell
+  yarn add -D unplugin-swc @swc/core
+  ```
+  </TabItem>
+  <TabItem value="npm" label="NPM" default>
 
-## Integration with third-party front-end environments
-### Vite
-[Vite](https://vitejs.dev/) provides a modern development environment for React application. It boasts an extremely fast development server that uses Hot Module Replacement (HMR) to enable near-instant startup time.
+  ```shell
+  npm install -D unplugin-swc @swc/core
+  ```
+  </TabItem>
+</Tabs>
 
-When integrating Obsidian in a Vite application, follow steps **1-3 and step 4.1 that are listed above**. Instead of step 4.2, we'll configure Obsidian't Babel transformer in Vite's `vite.config.js` file:
+### Update your Vite configuration
+Add the transformer to the list of plugins in your `vite.config.js` file:
 
 ```js title="vite.config.js"
 import { defineConfig } from 'vite';
-import react from '@vitejs/plugin-react';
+import swc from 'unplugin-swc';
+import obsidian from 'swc-plugin-obsidian';
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
-    react({
-      babel: {
-        plugins: [
-          'react-obsidian/dist/transformers/babel-plugin-obsidian',
-          ['@babel/plugin-proposal-decorators', { legacy: true }],
-        ],
+    swc.vite({
+      jsc: {
+        parser: {
+          syntax: "typescript",
+          decorators: true,
+        },
+        experimental: {
+          runPluginFirst: true,
+          plugins: [obsidian()],
+        },
       },
     }),
   ],
 });
 ```
 
-### Create React App
-Create React App (CRA) is a popular tool for getting started with React. It provides a pre-configured development environment that is ready to use out of the box.
-
-When integrating Obsidian in a CRA application, follow steps **1-4 that are listed above**. Since CRA doesn't allow you to configure Babel directly, we'll need to install two additional packages:
-1. [react-app-rewired](https://github.com/timarney/react-app-rewired). This package allows you to customize CRA scripts without ejecting.
-2. [customize-cra](https://github.com/arackaf/customize-cra). This package provides a set of utilities that can be used to customize CRA configurations. It has to be used instead of the default `react-scripts` package.
-
-#### Install the required packages and modify the default scripts
-```diff title="package.json"
-{
-  "devDependencies": {
-+    "customize-cra": "1.0.0",
-+    "react-app-rewired": "2.2.1"
-  },
-  "scripts": {
-+    "start": "react-app-rewired start",
-+    "build": "react-app-rewired build",
-+    "test": "npx jest",
--    "start": "react-scripts start",
--    "build": "react-scripts build",
--    "test": "react-scripts test --env=jsdom",
-  }
-}
-```
+  </TabItem>
+</Tabs>
 
-#### Configure Babel
-Create a `config-overrides.js` file in the root of your project and add the following code to it:
+## 5. Optional - Add Obsidian's ESLint plugin
+Obsidian provides an ESLint plugin that can help you find errors in your code related to dependency injection. See the [ESLint plugin](/docs/documentation/meta/eslint) documentation for more information.
 
-```js title="config-overrides.js"
-const { useBabelRc, override } = require('customize-cra');
-module.exports = override(useBabelRc());
-```

packages/swc-plugin-obsidian/demo/vite.config.ts

@@ -1,5 +1,4 @@
 import { defineConfig } from 'vite';
-// import react from '@vitejs/plugin-react-swc';
 import Inspect from 'vite-plugin-inspect'
 import swc from 'unplugin-swc'
 import obsidian from '../src';