feat: ui default theme (#100)

* Delete unused files and composables

* Delete unused layout and component files

* version(nuxt): release 0.5.0-beta.16

* version(cli): release 0.3.4

* Add branch parameter to defineDownload function

* version(cli): release 0.3.5

* Refactor downloadTemplate function in core.ts

* Add forceClean option to DefineDownloadOptions and DefineDownloadOptions.path

* version(cli): release 0.3.6

* Add existsSync function to prevent unnecessary file copying and add new file to download

* version(cli): release 0.3.7

* version(nuxt): release 0.5.0-beta.17

* Add forceClean option to app.vue template and add pages/index.vue template

* Remove retry delay in defineDownload function

* Update file paths in UI module

* version(cli): release 0.3.8

* version(nuxt): release 0.5.0-beta.18

* Update core.ts and README.yaml, and delete style.css and index.ts

* version(cli): release 0.3.9

* Update pergel version and add pergel.css asset

* version(nuxt): release 0.5.0-beta.19

* version(cli): release 0.3.10

* Refactor folder creation logic in defineDownload function

* fix: lint issues

* Add themes:prepare script to package.json

* Add examples folder to tsconfig.json

* Add "themes" directory to tsconfig.json

* fix: lint issues

Author: productdevbook

package.json

@@ -16,6 +16,7 @@
     "build": "pnpm --filter './packages/**' build",
     "dev:build": "pnpm --filter './packages/**' dev:build",
     "dev:prepare": "pnpm --filter './packages/**' dev:prepare",
+    "themes:prepare": "pnpm --filter './themes/**' dev:prepare",
     "lint": "eslint .",
     "lint:fix": "eslint . --fix",
     "test": "vitest",

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "pergel",
   "type": "module",
-  "version": "0.3.3",
+  "version": "0.3.10",
   "packageManager": "pnpm@8.10.0",
   "description": "Full Stack Nuxt Application. It contains the necessary toolkits for a software developer and a fast, clean, tested toolkit.",
   "author": "Mehmet @productdevbook",

packages/cli/src/commands/download.ts

@@ -73,6 +73,7 @@ export default defineCommand({
       const data = defineDownload({
         file: _template.file,
         folder: _template.folder,
+        branch: _template.branch,
       })
 
       await data({

packages/cli/src/core.ts

@@ -1,4 +1,4 @@
-import { copyFileSync, rmSync } from 'node:fs'
+import { copyFileSync, existsSync, mkdirSync, rmSync } from 'node:fs'
 import { join, resolve } from 'node:path'
 import { downloadTemplate } from 'giget'
 import { defu } from 'defu'
@@ -30,18 +30,47 @@ export function defineDownload(options: DefineDownloadOptions) {
     }) as DefineDownloadOptions
 
     if (options.file?.dir) {
-      const { source, dir } = await downloadTemplate(join(githubRepo, `${options.file.dir}#${options.branch}`), {
+      const { dir } = await downloadTemplate(join(githubRepo, `${options.file.dir}#${options.branch}`), {
         dir: options.file.tempOutput,
         cwd,
         force: true,
       })
 
       for (const file of options.file.path) {
         const output = resolve(join(cwd, file.outputFileName))
-        copyFileSync(
-          join(dir, file.fileName),
-          resolve(output),
-        )
+
+        if (!existsSync(output)) {
+          // remove last .file extends and name for create folder
+          if (output.split('/').pop()?.includes('.')) {
+            const folder = output.split('/').slice(0, -1).join('/')
+            mkdirSync(resolve(folder), {
+              recursive: true,
+            })
+          }
+
+          copyFileSync(
+            join(dir, file.fileName),
+            resolve(output),
+          )
+        }
+        else if (file.forceClean) {
+          rmSync(output, {
+            recursive: true,
+            force: true,
+          })
+
+          if (output.split('/').pop()?.includes('.')) {
+            const folder = output.split('/').slice(0, -1).join('/')
+            mkdirSync(resolve(folder), {
+              recursive: true,
+            })
+          }
+
+          copyFileSync(
+            join(dir, file.fileName),
+            resolve(output),
+          )
+        }
 
         logger.success(`Downloaded template file: ${output}`)
       }
@@ -51,8 +80,6 @@ export function defineDownload(options: DefineDownloadOptions) {
         force: true,
         retryDelay: 100,
       })
-
-      return { source, dir }
     }
 
     if (options.folder && options.folder.length) {
@@ -61,6 +88,7 @@ export function defineDownload(options: DefineDownloadOptions) {
           dir: folder.output,
           cwd,
           force: true,
+          forceClean: folder.forceClean !== false,
         })
 
         logger.success(`Downloaded template folder: ${dir}`)

packages/cli/src/types.ts

@@ -69,6 +69,13 @@ export interface DefineDownloadOptions {
        * `pergel.config.ts`
        */
       outputFileName: string
+
+      /**
+       * Force download
+       * @default
+       * `true`
+       */
+      forceClean: boolean
     }[]
     /**
      * Folder name
@@ -80,6 +87,7 @@ export interface DefineDownloadOptions {
   folder?: {
     dir: string
     output: string
+    forceClean: boolean
   }[]
   branch?: string
 }

packages/nuxt/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pergel/nuxt",
   "type": "module",
-  "version": "0.5.0-beta.15",
+  "version": "0.5.0-beta.19",
   "description": "Nuxt Full Stack modules. Start your next nuxt project fast and strong.",
   "author": "Mehmet @productdevbook",
   "license": "MIT",

packages/nuxt/playground/pergel/README.yaml

@@ -1,8 +1,11 @@
 pergel:
   # This file is generated by pergel. Do not edit it manually.
-  # Version: 0.5.0-beta.14
+  # Version: 0.5.0-beta.18
 test:
   ui:
+    # UI Download Template
+    themes:
+      authDefault: pergel download -t=default-auth-1 -j=templates
     # If pergel cli is installed, you can run `pergel install` automatically to install
     packageJson:
       dependencies: "@pergel/module-ui@^0.0.5"

packages/nuxt/playground/pergel/templates/templates.json

@@ -0,0 +1,49 @@
+{
+  "version": "0.1.0",
+  "templates": {
+    "default-auth-1": {
+      "version": "0.0.1",
+      "branch": "main",
+      "file": {
+        "dir": "themes/pergel-auth",
+        "path": [
+          {
+            "fileName": "app.vue",
+            "outputFileName": "app.vue",
+            "forceClean": true
+          },
+          {
+            "fileName": "pages/index.vue",
+            "outputFileName": "pages/index.vue"
+          },
+          {
+            "fileName": "assets/pergel.css",
+            "outputFileName": "assets/pergel.css"
+          }
+        ]
+      },
+      "folder": [
+        {
+          "dir": "themes/pergel-auth/pages/auth",
+          "output": "pages/auth",
+          "forceClean": true
+        },
+        {
+          "dir": "themes/pergel-auth/components",
+          "output": "components",
+          "forceClean": true
+        },
+        {
+          "dir": "themes/pergel-auth/layouts",
+          "output": "layouts",
+          "forceClean": true
+        },
+        {
+          "dir": "themes/pergel-auth/composables",
+          "output": "composables",
+          "forceClean": true
+        }
+      ]
+    }
+  }
+}

packages/nuxt/src/runtime/core/types/module.ts

@@ -202,6 +202,10 @@ export interface ResolvedPergelOptions {
   esnext: boolean
 
   debug: boolean
+
+  templates?: {
+    [name: string]: DefineDownloadOptions
+  }
 }
 
 export interface NuxtPergel extends Nuxt {
@@ -320,6 +324,8 @@ export type PartinalKey<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>
 export type MaybePromise<T> = T | Promise<T>
 
 export interface DefineDownloadOptions {
+  version?: string
+  branch?: string
   file?: {
     /**
      * Directory of file
@@ -330,7 +336,11 @@ export interface DefineDownloadOptions {
     /**
      * File name
      * @example
-     * `pergel.config.ts`
+     * [{
+     * fileName: 'pergel.config.ts',
+     * outputFileName: 'pergel.config.ts',
+     * forceClean: false
+     * }]
      */
     path: {
       /**
@@ -345,6 +355,13 @@ export interface DefineDownloadOptions {
        * `pergel.config.ts`
        */
       outputFileName: string
+
+      /**
+       * Force download
+       * @default
+       * `true`
+       */
+      forceClean?: boolean
     }[]
     /**
      * Folder name
@@ -354,8 +371,25 @@ export interface DefineDownloadOptions {
     tempOutput?: string
   }
   folder?: {
+    /**
+     * Directory of file
+     * @example
+     * `templates/default`
+     */
     dir: string
+
+    /**
+     * Output file name
+     * @example
+     * `templates/default`
+     */
     output: string
+
+    /**
+     * Force download
+     * @default
+     * `true`
+     */
+    forceClean: boolean
   }[]
-  branch?: string
 }

packages/nuxt/src/runtime/core/utils/createDownloadTemplate.ts

@@ -1,46 +1,89 @@
 import { resolve } from 'node:path'
 import { writeFileSync } from 'node:fs'
+import defu from 'defu'
 import type { DefineDownloadOptions, NuxtPergel } from '../types'
+import { generateProjectReadme } from './generateYaml'
 
-function createDownloadTemplate(data: DefineDownloadOptions) {
-  let { file, branch, folder } = data
+export function writeDownloadTemplate(nuxt: NuxtPergel) {
+  const templates = nuxt._pergel.templates
 
-  branch ??= 'main'
+  const pergel = resolve(nuxt._pergel.templateDir, 'templates.json')
 
-  if (file?.dir) {
-    return /* JS */ `${JSON.stringify({
-      version: '0.1.0',
-      templates: {
-        'pergel-auth': {
-          version: '1.0.0',
-          branch,
-          file,
-        },
-      },
-    }, null, 2)}`
+  const content = /* JS */ `${JSON.stringify({
+    version: '0.1.0',
+    templates,
+  }, null, 2)}`
+
+  writeFileSync(pergel, content, {
+    encoding: 'utf-8',
+  })
+}
+
+export function addDownloadTemplate(
+  input: {
+    nuxt: NuxtPergel
+    name?: string
+    version?: string
+    data?: DefineDownloadOptions
+    write?: boolean
+    readme?: {
+      projectName: string
+      moduleName: string
+    }
+  },
+) {
+  let { nuxt, name, version, data, write } = input
+
+  if (!version)
+    version = '0.0.0'
+
+  if (name && data) {
+    nuxt._pergel.templates ??= {}
+    nuxt._pergel.templates[name] ??= {}
+    nuxt._pergel.templates[name].version = version
+    nuxt._pergel.templates[name].branch = data.branch ?? 'main'
+    nuxt._pergel.templates[name].file = defu(nuxt._pergel.templates[name].file, data.file ?? {})
+    nuxt._pergel.templates[name].folder ??= []
+    nuxt._pergel.templates[name].folder?.push(...data.folder ?? [])
   }
+  const fileName = 'templates'
+  if (write) {
+    const templates = nuxt._pergel.templates ?? {}
+
+    const pergel = resolve(nuxt._pergel.templateDir, `${fileName}.json`)
 
-  if (folder && folder.length > 0) {
-    return /* JS */ `${JSON.stringify({
+    if (Object.keys(templates).length > 0) {
+      const content = /* JS */ `${JSON.stringify({
+        version: '0.1.0',
+        templates,
+      }, null, 2)}`
+
+      writeFileSync(pergel, content, {
+        encoding: 'utf-8',
+      })
+    }
+
+    const content = /* JS */ `${JSON.stringify({
       version: '0.1.0',
-      templates: {
-        'pergel-auth': {
-          version: '1.0.0',
-          branch,
-          folder,
-        },
-      },
+      templates,
     }, null, 2)}`
-  }
-}
 
-export function writeDownloadTemplate(nuxt: NuxtPergel, fileName: string, options: DefineDownloadOptions) {
-  const pergel = resolve(nuxt._pergel.templateDir, `${fileName}.json`)
-  const data = createDownloadTemplate(options)
-  if (!data)
-    return
+    writeFileSync(pergel, content, {
+      encoding: 'utf-8',
+    })
+  }
 
-  writeFileSync(pergel, data, {
-    encoding: 'utf-8',
-  })
+  if (input.readme) {
+    generateProjectReadme({
+      data: ({ addCommentBlock }) => ({
+        ...addCommentBlock('UI Download Template'),
+        themes: {
+          authDefault: `pergel download -t=${name} -j=${fileName}`,
+        },
+      }),
+      nuxt,
+      moduleName: input.readme.moduleName,
+      projectName: input.readme.projectName,
+    })
+  }
 }