chore: add dynamic type support & configuration file

.gitignore

@@ -14,7 +14,7 @@ dist
 live-demo
 *.local
 theme-manager.config.ts
-
+theme-config.ts
 # Editor directories and files
 .vscode/*
 !.vscode/extensions.json

README.md

@@ -4,14 +4,28 @@ This plugin allows you to change the theme of your application at runtime. It al
 
 [live-demo](https://kaandesu.github.io/vue-daisyui-theme-manager/)
 
+Install:
+
+```bash
+npm i vue-daisyui-theme-manager
+```
+
+## Setup
+
+As you install `theme-manager.config.ts` will be automatically created and added to the root folder of your project. <br> You can set up the available themes in this file. It will be also used as type definition. But don't forget to specify the list of themes in `tailwind.config.js` as well. More information about setting up the themes at [DaisyUI Themes Setup](https://daisyui.com/docs/themes/).
+
 # API
 
+## Initial Setup
+
+As you insts
+
 ## Plugin Setup: `createThemeManager`
 
 Initiate the plugin with the default theme and the dark theme. Theme options are from Daisiy UI themes as well as some custom added themes. Check all the built-in [DaisyUI Themes](https://daisyui.com/docs/themes/). <br> Create your own custom daisy ui theme [here](https://daisyui.com/theme-generator/) and add it to the `tailwind.config.js` file! <br>
 
 ```ts
-type DaisyThemes = "light" | "default" | "storm" | "breeze" | "dark" | "cupcake" |
+type DaisyThemes = "light" | "default" | "dark" | "cupcake" |
  "bumblebee" | "emerald" | "corporate" | "synthwave" | "retro" | "cyberpunk" |
   "valentine" | "halloween" | "garden" |  'forest' | 'aqua' | 'lofi' | 'pastel' |
   'fantasy' | 'wireframe' | 'black' | 'luxury' | 'dracula' | 'cmyk' | 'autumn' |
@@ -43,8 +57,8 @@ import { createThemeManager } from '@/plugins/themeManager'
 const app = createApp(App)
 app.use(
   createThemeManager({
-    light: 'breeze',
-    dark: 'storm',
+    light: 'aqua',
+    dark: 'coffee',
     watchSystemTheme: true,
   })
 )

create-config.js

@@ -1,5 +1,6 @@
 import fs from 'fs';
-
+import path from 'path';
+console.log('Current working directory:', process.cwd());
 const configContent = `// add the names of the themes you want to use here
 // warning: you need to specify them in tailwind.config.js as well
 // DO NOT REMOVE: 'default', 'light', 'dark'
@@ -39,5 +40,13 @@ export default[
 ] as const;
 `
 
-fs.mkdirSync('./src', { recursive: true })
-fs.writeFileSync('./theme-manager.config.ts', configContent)
+
+const projectDir = process.env.INIT_CWD;
+process.chdir(projectDir);
+console.log('Changed working directory:', projectDir);
+const filePath = path.join(projectDir, 'theme-manager.config.ts');
+
+fs.mkdirSync('./src', { recursive: true });
+fs.writeFileSync(filePath, configContent);
+
+console.log(`Created ${filePath}`);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-daisyui-theme-manager",
   "author": "I Kaan Yilmaz <kaandesu00@gmail.com> (https://github.com/kaandesu)",
-  "version": "0.0.1",
+  "version": "0.0.22",
   "license": "MIT",
   "description": "A plugin that allows you to change DaisyUI themes during runtime. As well as, setting default light and dark themes, and matching the system theme.",
   "contributors": [
@@ -26,7 +26,9 @@
     "url": "https://github.com/kaandesu/vue-daisyui-theme-manager/issues"
   },
   "files": [
-    "dist"
+    "dist",
+    "create-config.js", 
+    "set-config-path.js" 
   ],
   "main": "./dist/vue-daisyui-theme-manager.umd.cjs",
   "module": "./dist/vue-daisyui-theme-manager.js",
@@ -43,7 +45,8 @@
     "build": "vite build && cp ./create-config.js ./dist && npm run generate:types && npm run build:live-demo",
     "build:live-demo": "vite build --mode live-demo --outDir ./live-demo",
     "generate:types": "vue-tsc -p tsconfig-build.json",
-    "postinstall": "node create-config.js"
+    "set-conf": "node set-config-path.js",
+    "postinstall": "node create-config.js && npm run set-conf" 
   },
   "dependencies": {
     "daisyui": "^2.51.6",    

set-config-path.js

@@ -0,0 +1,19 @@
+import fs from 'fs'
+import path from 'path'
+
+const projectDir = process.env.INIT_CWD;
+process.chdir(projectDir);
+const configFile = `${projectDir}/../../theme-manager.config`;
+
+const content = `
+import config from ${JSON.stringify(configFile)};
+export default config;
+`;
+
+const packageDir = process.cwd();
+const filePath = path.join(packageDir, 'dist', 'theme-config.ts');
+
+fs.mkdirSync(path.join(packageDir, 'dist'), { recursive: true });
+fs.writeFileSync(filePath, content);
+
+console.log(`Created ${filePath}`);

src/themeManager/index.ts

@@ -1,7 +1,7 @@
 import type { App } from 'vue'
 import { defaults, pluginInitiated, currentTheme, isDark } from './reactives'
 // @ts-ignore
-import config from 'theme-manager.config'
+import config from './theme-config'
 export type DaisyThemes = (typeof config)[number]
 export type ThemeOptions = {
   light: DaisyThemes