From 501137a67280e80d36dc485f850027216e478386 Mon Sep 17 00:00:00 2001
From: Selemondev <106826371+selemondev@users.noreply.github.com>
Date: Fri, 30 Aug 2024 21:02:24 +0300
Subject: [PATCH] feat: auto install `@nuxtjs/color-mode` module (#737)

* feat(app): #537 auto install the  module

This pull request is intended to install the  module during the installation of the  module

Closes: #537

* docs: update Nuxt dark mode

---------

Co-authored-by: selemondev-triply <selemon@triply.co>
---
 apps/www/src/content/docs/dark-mode/nuxt.md | 16 +++++++++-------
 packages/module/src/module.ts               | 12 ++++++++++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/apps/www/src/content/docs/dark-mode/nuxt.md b/apps/www/src/content/docs/dark-mode/nuxt.md
index 4bf1150c..60859d6b 100644
--- a/apps/www/src/content/docs/dark-mode/nuxt.md
+++ b/apps/www/src/content/docs/dark-mode/nuxt.md
@@ -7,7 +7,7 @@ description: Adding dark mode to your nuxt app.
 
 <Steps>
 
-### Install Dependencies
+<!-- ### Install Dependencies
 
 ```bash
 npm install -D @nuxtjs/color-mode
@@ -25,19 +25,21 @@ export default defineNuxtConfig({
     classSuffix: ''
   }
 })
-```
-
-Optional, to include icons for theme button.
-```bash
-npm install -D @iconify/vue @iconify-json/radix-icons
-```
+``` -->
 
 ### Add a mode toggle
 
 Place a mode toggle on your site to toggle between light and dark mode.
 
+The `@nuxtjs/color-mode` module is automatically installed and configured during the installation of the `shadcn-nuxt` module, so you literally have nothing to do.
+
 We're using [`useColorMode`](https://color-mode.nuxtjs.org/#usage) from [`Nuxt Color Mode`](https://color-mode.nuxtjs.org/).
 
+Optional, to include icons for theme button.
+```bash
+npm install -D @iconify/vue @iconify-json/radix-icons
+```
+
 ```vue
 <script setup lang="ts">
 import { Icon } from '@iconify/vue'
diff --git a/packages/module/src/module.ts b/packages/module/src/module.ts
index fc360ca1..e272c564 100644
--- a/packages/module/src/module.ts
+++ b/packages/module/src/module.ts
@@ -1,7 +1,7 @@
 import { readFileSync, readdirSync } from 'node:fs'
 import { join } from 'node:path'
 import { parseSync } from '@oxc-parser/wasm'
-import { addComponent, addTemplate, createResolver, defineNuxtModule, findPath, useLogger } from '@nuxt/kit'
+import { addComponent, addTemplate, createResolver, defineNuxtModule, findPath, installModule, useLogger } from '@nuxt/kit'
 import { UTILS } from '../../cli/src/utils/templates'
 
 // TODO: add test to make sure all registry is being parse correctly
@@ -59,6 +59,14 @@ export default defineNuxtModule<ModuleOptions>({
       })
     })
 
+    // Installs the `@nuxtjs/color-mode` module.
+
+    await installModule('@nuxtjs/color-mode', {
+      colorMode: {
+        classSuffix: '',
+      },
+    })
+
     // Manually scan `componentsDir` for components and register them for auto imports
     try {
       readdirSync(resolve(COMPONENT_DIR_PATH))
@@ -73,7 +81,7 @@ export default defineNuxtModule<ModuleOptions>({
 
             const exportedKeys: string[] = ast.program.body
               .filter(node => node.type === 'ExportNamedDeclaration')
-            // @ts-expect-error parse return any
+              // @ts-expect-error parse return any
               .flatMap(node => node.specifiers.map(specifier => specifier.exported.name))
               .filter((key: string) => /^[A-Z]/.test(key))