refactored modules to more generic packages

src/steps/2.addModules/moduleConfigs/auth.ts → src/configs/auth/index.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
-import type { ModuleConfig } from "../moduleConfigs"
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../../generators/generateModuleComponents"
+import type { PackageConfig } from "../index"
 
 const nuxtAuthServerFile = `import CredentialsProvider from 'next-auth/providers/credentials'
 import GithubProvider from 'next-auth/providers/github'
@@ -78,7 +78,7 @@ const { status, data, signIn, signOut } = useAuth()
 </template>
 `
 
-const auth: ModuleConfig = {
+const auth: PackageConfig = {
   humanReadableName: "nuxt-auth",
   description: "Authentication via OAuth, Credentials and magic email flows. Wraps the popular NextAuth.js with 12k stars. See more: https://sidebase.io/nuxt-auth",
   dependencies: [

src/configs/index.ts

@@ -0,0 +1,35 @@
+import type { NuxtConfig } from "@nuxt/schema"
+import type { Dependency } from "../utils/addPackageDependency"
+import prisma from "./prisma"
+import auth from "./auth"
+import trpc from "./trpc"
+import tailwind from "./tailwind"
+import naiveui from "./naiveui"
+
+export declare interface File {
+  path: string;
+  content: string;
+}
+
+export declare interface PackageConfig {
+  humanReadableName: string
+  description: string
+  dependencies: Dependency[]
+  nuxtConfig: NuxtConfig
+  files: File[]
+  tasksPostInstall: string[]
+  indexVue?: {
+    html: string,
+    css?: string
+    js?: string,
+  }
+}
+
+export type Packages = "prisma" | "auth" | "trpc" | "tailwind" | "naiveui"
+export const packageConfigs: Record<Packages, PackageConfig> = {
+  "prisma": prisma,
+  "auth": auth,
+  "trpc": trpc,
+  "tailwind": tailwind,
+  "naiveui": naiveui
+}

src/steps/2.addModules/moduleConfigs/naiveui.ts → src/configs/naiveui/index.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
-import type { ModuleConfig } from "../moduleConfigs"
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../../generators/generateModuleComponents"
+import type { PackageConfig } from "../index"
 
 const naiveDemoComponent = `<script setup lang="ts">
 const showModal = ref(false)
@@ -26,7 +26,7 @@ const showModal = ref(false)
 </template>
 `
 
-const naiveui: ModuleConfig = {
+const naiveui: PackageConfig = {
   humanReadableName: "Naive UI",
   description: "A Vue 3 Component Library. Complete, Customizable, Uses TypeScript, Fast. See more: https://www.naiveui.com/",
   dependencies: [{

src/steps/2.addModules/moduleConfigs/prisma.ts → src/configs/prisma/index.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
-import type { ModuleConfig } from "../moduleConfigs"
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../../generators/generateModuleComponents"
+import type { PackageConfig } from "../index"
 
 const prismaFile = `// This is your Prisma schema file,
 // learn more about it in the docs: https://pris.ly/d/prisma-schema
@@ -100,7 +100,7 @@ const { data: examples } = useFetch('/api/examples')
 </template>
 `
 
-const prisma: ModuleConfig = {
+const prisma: PackageConfig = {
   humanReadableName: "Prisma ORM",
   description: "Next-generation Node.js and TypeScript ORM. See more: https://www.prisma.io/",
   dependencies: [

src/steps/2.addModules/moduleConfigs/tailwind.ts → src/configs/tailwind/index.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
-import type { ModuleConfig } from "../moduleConfigs"
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../../generators/generateModuleComponents"
+import type { PackageConfig } from "../index"
 
 const tailwindDemoComponent = `<template>
   ${generateModuleHTMLComponent(
@@ -14,7 +14,7 @@ const tailwindDemoComponent = `<template>
 </template>
 `
 
-const tailwind: ModuleConfig = {
+const tailwind: PackageConfig = {
   humanReadableName: "Tailwind CSS",
   description: "A utility-first CSS framework packed with classes that can be composed to build any design, directly in your markup. See more: https://tailwindcss.com/",
   dependencies: [{

src/steps/2.addModules/moduleConfigs/trpc.ts → src/configs/trpc/index.ts

@@ -1,5 +1,5 @@
-import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../generateModuleComponents"
-import type { ModuleConfig } from "../moduleConfigs"
+import { generateModuleHTMLComponent, generateModuleHTMLSnippet } from "../../generators/generateModuleComponents"
+import type { PackageConfig } from "../index"
 
 const nuxtTrpcRootConfig = `/**
  * This is your entry point to setup the root configuration for tRPC on the server.
@@ -125,7 +125,7 @@ const hello = await $client.hello.useQuery({ text: 'client' })
 </template>
 `
 
-const trpc: ModuleConfig = {
+const trpc: PackageConfig = {
   humanReadableName: "tRPC 10",
   description: "Build end-to-end typesafe APIs in Nuxt applications. See more: https://trpc.io/",
   dependencies: [{

src/steps/2.addModules/generateIndexVue.ts → src/generators/generateIndexVue.ts

@@ -1,10 +1,10 @@
-import { moduleConfigs, Modules } from "./moduleConfigs"
+import { packageConfigs, Packages } from "../configs/index"
 
-const getModulesSnippet = (selectedModules: Modules[], key: "html" | "css" | "js") => {
-  const moduleIndexSnippets = selectedModules.map((module) => moduleConfigs[module].indexVue?.[key]).filter(snippet => typeof snippet !== "undefined")
+const getModulesSnippet = (selectedModules: Packages[], key: "html" | "css" | "js") => {
+  const moduleIndexSnippets = selectedModules.map((module) => packageConfigs[module].indexVue?.[key]).filter(snippet => typeof snippet !== "undefined")
   return moduleIndexSnippets.length > 0 ? "\n    " + moduleIndexSnippets.join("\n    ") : ""
 }
-export const generateIndexVue = (selectedModules: Modules[]) => {
+export const generateIndexVue = (selectedModules: Packages[]) => {
   const html = getModulesSnippet(selectedModules, "html")
 
   return `<template>

src/steps/2.addModules/index.ts → src/steps/2.addModules.ts

@@ -1,17 +1,17 @@
-import { getResolver } from "../../utils/getResolver"
-import { Preferences  } from "../../prompts"
-import { File, moduleConfigs, Modules } from "./moduleConfigs"
-import { addPackageDependencies, Dependency } from "../../utils/addPackageDependency"
+import { getResolver } from "../utils/getResolver"
+import { Preferences  } from "../prompts"
+import { File, packageConfigs, Packages } from "../configs/index"
+import { addPackageDependencies, Dependency } from "../utils/addPackageDependency"
 import { writeFile, mkdir } from "node:fs/promises"
 import path from "node:path"
 import { NuxtConfig } from "@nuxt/schema"
 import defu from "defu"
 import { inspect } from "node:util"
-import { generateIndexVue } from "./generateIndexVue"
-import { buttonLink } from "./generateModuleComponents"
+import { generateIndexVue } from "../generators/generateIndexVue"
+import { buttonLink } from "../generators/generateModuleComponents"
 
 export default async (preferences: Preferences, templateDir: string) => {
-  const selectedModules: Modules[] = preferences.addModules || []
+  const selectedModules: Packages[] = preferences.addModules || []
   const resolver = getResolver(templateDir)
 
   // 1. Gather module configuration for all selected modules
@@ -20,9 +20,9 @@ export default async (preferences: Preferences, templateDir: string) => {
   let files: File[] = []
 
   for (const selectedModule of selectedModules) {
-    dependencies = [...dependencies, ...moduleConfigs[selectedModule].dependencies]
-    nuxtConfigExtensions = nuxtConfigExtensions.concat(moduleConfigs[selectedModule].nuxtConfig)
-    files = files.concat(moduleConfigs[selectedModule].files)
+    dependencies = [...dependencies, ...packageConfigs[selectedModule].dependencies]
+    nuxtConfigExtensions = nuxtConfigExtensions.concat(packageConfigs[selectedModule].nuxtConfig)
+    files = files.concat(packageConfigs[selectedModule].files)
   }
 
   // 2. Add required dependencies to `package.json`

src/steps/6.addReadme.ts

@@ -2,14 +2,14 @@ import { writeFile } from "node:fs/promises"
 import { getResolver } from "../utils/getResolver"
 import { Preferences } from "../prompts"
 import { getUserPkgManager } from "../utils/getUserPkgManager"
-import { moduleConfigs, Modules } from "./2.addModules/moduleConfigs"
+import { packageConfigs, Packages } from "../configs"
 
 const makeReadme = (preferences: Preferences) =>  {
   const { setProjectName = "sidebase", setStack = undefined, addModules = [], addCi = "none" } = preferences
 
   let selectedFeatures = []
   if (setStack === "merino") {
-    selectedFeatures = addModules.map((module: keyof typeof moduleConfigs) => `- ${moduleConfigs[module].humanReadableName}`)
+    selectedFeatures = addModules.map((module: keyof typeof packageConfigs) => `- ${packageConfigs[module].humanReadableName}`)
     if (addCi === "github") {
       selectedFeatures.push("- GitHub Actions based CI")
     }
@@ -31,7 +31,7 @@ const makeReadme = (preferences: Preferences) =>  {
     ]
   }
 
-  const tasksPostInstall = addModules.map((module: Modules) => moduleConfigs[module].tasksPostInstall).flat()
+  const tasksPostInstall = addModules.map((module: Packages) => packageConfigs[module].tasksPostInstall).flat()
   const packageManager = getUserPkgManager()
 
   return `# ${setProjectName}-app