feat: handle file creation extensions

Author: adhamfarrag

src/commands/Component.ts

@@ -1,6 +1,5 @@
 import { window } from 'vscode'
-import { projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, createDir } from '../utils'
-import { generateVueFileBasicTemplate } from '../utils/files'
+import { projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, createDir, generateVueFileBasicTemplate, normalizeFileExtension } from '../utils'
 
 const createComponent = () => {
     window

src/commands/Composable.ts

@@ -1,5 +1,5 @@
 import { window } from 'vscode'
-import { projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, createDir } from '../utils'
+import { projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, createDir, normalizeFileExtension } from '../utils'
 import { composableTemplate } from '../templates'
 
 const createComposable = () => {
@@ -37,7 +37,7 @@ const directCreateComposable = (path: string) => {
         .then((name) => {
             if (!name) { return }
 
-            let filePath = `${path}/${name}.ts`
+            let filePath = `${path}/${normalizeFileExtension(name, '.ts')}.ts`
 
             createFile({
                 fileName: `${name}.ts`,

src/commands/Layout.ts

@@ -1,5 +1,5 @@
 import { window } from 'vscode'
-import { projectSrcDirectory, createFile, createDir } from '../utils'
+import { projectSrcDirectory, createFile, createDir, normalizeFileExtension } from '../utils'
 
 
 import { generateVueFileTemplate } from '../utils/files'
@@ -18,7 +18,7 @@ const createLayout = () => {
 
             createDir('layouts')
 
-            let filePath = `${projectSrcDirectory()}/layouts/${name}.vue`
+            let filePath = `${projectSrcDirectory()}/layouts/${normalizeFileExtension(name, '.vue')}.vue`
 
             createFile({
                 fileName: `${name}.vue`,
@@ -37,7 +37,7 @@ const directCreateLayout = (path: string) => {
         .then((name) => {
             if (!name) { return }
 
-            let filePath = `${path}/${name}.vue`
+            let filePath = `${path}/${normalizeFileExtension(name, '.vue')}.vue`
 
             createFile({
                 fileName: `${name}.vue`,

src/commands/Middleware.ts

@@ -1,5 +1,7 @@
 import { window } from 'vscode'
-import { projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, createDir, hasServerDir } from '../utils'
+import {
+    projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, createDir, hasServerDir,
+    normalizeFileExtension} from '../utils'
 import { nuxtMiddlewareTemplate, nitroDefaultTemplate } from '../templates'
 
 const createMiddleware = () => {
@@ -40,7 +42,7 @@ const directCreateMiddleware = (path: string) => {
         .then((name) => {
             if (!name) { return }
 
-            let filePath = `${path}/${name}.ts`
+            let filePath = `${path}/${normalizeFileExtension(name, '.ts')}.ts`
 
             createFile({
                 fileName: `${name}.ts`,

src/commands/Nitro.ts

@@ -1,5 +1,5 @@
 import { window } from 'vscode'
-import { projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, hasServerDir, createDir } from '../utils'
+import { projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, hasServerDir, createDir, normalizeFileExtension } from '../utils'
 import { nitroDefaultTemplate, nitroPluginTemplate, nitroUtilTemplate } from '../templates'
 
 let serverDir = `${projectSrcDirectory()}/${hasServerDir()}/`
@@ -148,7 +148,7 @@ const directCreateNitroAPI = (path: string) => {
             createDir('server')
             createDir('server/api')
 
-            let filePath = `${path}/${name}.ts`
+            let filePath = `${path}/${normalizeFileExtension(name, '.ts')}.ts`
             createFile({
                 fileName: `${name}.ts`,
                 content: nitroDefaultTemplate,
@@ -169,7 +169,7 @@ const directCreateNitroRoute = (path: string) => {
             createDir('server')
             createDir('server/routes')
 
-            let filePath = `${path}/${name}.ts`
+            let filePath = `${path}/${normalizeFileExtension(name, '.ts')}.ts`
 
             createFile({
                 fileName: `${name}.ts`,

src/commands/Page.ts

@@ -1,5 +1,5 @@
 import { window } from 'vscode'
-import { createSubFolders, showSubFolderQuickPick, createFile, projectSrcDirectory, createDir } from '../utils'
+import { createSubFolders, showSubFolderQuickPick, createFile, projectSrcDirectory, createDir, normalizeFileExtension } from '../utils'
 
 import { generateVueFileTemplate } from '../utils/files'
 
@@ -36,7 +36,7 @@ function directCreatePage(path: string) {
         .then((name) => {
             if (!name) {return}
 
-            let filePath = `${path}/${name}.vue`
+            let filePath = `${path}/${normalizeFileExtension(name, '.vue')}.vue`
 
             createFile({
                 fileName: `${name}.vue`,

src/commands/Plugin.ts

@@ -1,5 +1,5 @@
 import { window } from 'vscode'
-import { projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, createDir, hasServerDir } from '../utils'
+import { projectSrcDirectory, createSubFolders, showSubFolderQuickPick, createFile, createDir, hasServerDir, normalizeFileExtension } from '../utils'
 import { nuxtPluginTemplate, nitroPluginTemplate } from '../templates'
 
 const createPlugin = () => {
@@ -39,7 +39,7 @@ const directCreatePlugin = (path: string) => {
         .then((name) => {
             if (!name) { return }
 
-            let filePath = `${path}/${name}.ts`
+            let filePath = `${path}/${normalizeFileExtension(name, '.ts')}.ts`
 
 
             createFile({

src/commands/Store.ts

@@ -1,5 +1,5 @@
 import { window } from 'vscode'
-import { projectSrcDirectory, isNuxtTwo, createFile, generatePiniaTemplates } from '../utils'
+import { projectSrcDirectory, isNuxtTwo, createFile, generatePiniaTemplates, normalizeFileExtension } from '../utils'
 import { vuexContent } from '../templates'
 
 const createStore = () => {
@@ -37,7 +37,7 @@ const directCreateStore = (path: string) => {
         .then((name) => {
             if (!name) { return }
 
-            let filePath = `${path}/${name}.${isNuxtTwo() ? 'js' : 'ts'}`
+            let filePath = `${path}/${normalizeFileExtension(name, isNuxtTwo() ? '.js' : '.ts' )}.${isNuxtTwo() ? 'js' : 'ts'}`
 
             if (isNuxtTwo()) {
                 createFile({

src/utils/file.ts

@@ -1,5 +1,5 @@
 import { window, workspace, Uri } from 'vscode';
-import { trim, capitalize, replace, split } from 'string-ts';
+import { trim, capitalize, replace, split, endsWith } from 'string-ts';
 import { existsSync, mkdirSync, readdirSync } from 'fs';
 import { join } from 'pathe';
 import { TextEncoder } from 'util';
@@ -36,7 +36,7 @@ export const createDirectoryAndFile = (componentName: any, commandType: string,
                         createFile({
                             fileName: componentName,
                             content,
-                            fullPath: `${projectSrcDirectory()}/${type.path}/${name}/${componentName}${type.extension}`,
+                            fullPath: `${projectSrcDirectory()}/${type.path}/${name}/${normalizeFileExtension(componentName, type.extension)}${type.extension}`,
                         });
                     } else {
                         window.showWarningMessage(
@@ -88,8 +88,10 @@ export const showSubFolderQuickPick = (args: {
     content: any
 }) => {
 
+
     const { type } = getCommandType(args.commandType);
 
+
     window
         .showQuickPick(args.subFolders, { placeHolder: 'Select a subfolder' })
         .then((selection) => {
@@ -98,18 +100,19 @@ export const showSubFolderQuickPick = (args: {
             }
             switch (selection) {
                 case `Main ${type.name.toLocaleLowerCase()} folder`:
-                    const path = `${args.name}${type.extension}`;
+                    const path = `${normalizeFileExtension(args.name, type.extension)}${type.extension}`;
                     createFile({
                         fileName: args.name,
                         content: args.content,
                         fullPath: `${projectSrcDirectory()}/${type.path}/${path}`,
                     });
                     break;
                 case 'Create new folder...':
-                    createDirectoryAndFile(args.name, type.name, args.content);
+                    createDirectoryAndFile(normalizeFileExtension(args.name, type.extension), type.name, args.content);
                     break;
                 default:
-                    const fileNameAndPath = `${selection}/${args.name}${type.extension}`;
+                    const fileNameAndPath = `${selection}/${normalizeFileExtension(args.name, type.extension)}${type.extension}`;
+
                     createFile({
                         fileName: args.name,
                         content: args.content,
@@ -171,4 +174,6 @@ export const createVueTemplate = (content: string, type: string) => {
 
 };
 
-export const normalizeName = (name: string, capital?: boolean) =>  split(trim(name), "-").map(capitalize).join('');
+export const normalizeName = (name: string, capital?: boolean) => split(trim(split(name, '.')[0]), "-").map(capitalize).join('');
+
+export const normalizeFileExtension = (name: string, extension: string) => endsWith(name, extension) ? replace(name, extension, '') : name

src/utils/index.ts

@@ -37,7 +37,7 @@ import {
     updateDependencies
 } from './dependency'
 
-import { createDirectoryAndFile, createFile, createSubFolders, showSubFolderQuickPick, createDir, createVueTemplate, normalizeName } from './file'
+import { createDirectoryAndFile, createFile, createSubFolders, showSubFolderQuickPick, createDir, createVueTemplate, normalizeName, normalizeFileExtension } from './file'
 
 import { getCommandType } from './commands'
 
@@ -102,5 +102,6 @@ export {
     managePackageVersion,
     createConfigWatcher,
     isNuxiInstalled,
-    normalizeName
+    normalizeName,
+    normalizeFileExtension
 }