@t1ep1l0t/create-fsd 2.0.1 → 3.0.0

package/README.md

@@ -14,9 +14,9 @@
 
 ## 📖 About
 
-**@t1ep1l0t/create-fsd** is a powerful CLI tool that helps you quickly bootstrap production-ready React applications following the [Feature-Sliced Design (FSD)](https://feature-sliced.design/) architectural methodology. Not only can you create fully configured projects in seconds, but you can also generate FSD-compliant structures for features, entities, widgets, and pages on-demand!
+**@t1ep1l0t/create-fsd** is a powerful CLI tool that helps you quickly bootstrap production-ready frontend applications following the [Feature-Sliced Design (FSD)](https://feature-sliced.design/) architectural methodology. Create fully configured projects with **JavaScript** or **TypeScript** in seconds, and generate FSD-compliant structures for features, entities, widgets, and pages on-demand!
 
-> 🎯 Currently supports **React** template. More frameworks (Vue, Next, Nuxt, Svelte) coming soon!
+> 🎯 **Supports both JavaScript and TypeScript** with automatic project type detection
 
 ---
 
@@ -25,15 +25,20 @@
 ### 🏗️ **Architecture**
 - **Feature-Sliced Design (FSD)** - Scalable and maintainable project structure
 - **FSD Structure Generator** - Quickly generate features, entities, widgets, and pages
+- **Auto-detection** - Automatically detects TypeScript/JavaScript and creates appropriate files
 - Clear separation of concerns across layers
 - Ready-to-use folder structure with automated scaffolding
 
-### ⚡ **Modern Stack**
+### ⚡ **Language Support**
+- **JavaScript & TypeScript** - Full support for both languages
+- **Smart Detection** - Automatically detects project type when generating structures
+- **Type Safety** - TypeScript templates with proper typing for all libraries
+- **Zero Config** - Works out of the box with optimal settings
+
+### 📦 **Modern Stack** (React Template)
 - **React 18** - Latest React with concurrent features
 - **Vite** - Lightning-fast build tool and dev server
 - **TailwindCSS v4** - Utility-first CSS framework
-
-### 📦 **Pre-configured Libraries**
 - **React Router DOM** - Declarative routing
 - **Zustand** - Lightweight state management
 - **Axios** - HTTP client with interceptors configured
@@ -44,44 +49,47 @@
 ### 🎨 **Developer Experience**
 - Path aliases configured (`@app`, `@pages`, `@widgets`, `@features`, `@entities`, `@shared`)
 - Example code demonstrating best practices
+- Full TypeScript support with type definitions
 - Zero configuration needed - start coding immediately
 
 ---
 
 ## 🚀 Quick Start
 
-### Using npm
+### Create a JavaScript Project
 
 ```bash
-npm create @t1ep1l0t/fsd my-app
+npx @t1ep1l0t/create-fsd app my-app
 cd my-app
 npm run dev
 ```
 
-### Using npx
+### Create a TypeScript Project
 
 ```bash
-npx @t1ep1l0t/create-fsd my-app
+npx @t1ep1l0t/create-fsd app my-app --typescript
 cd my-app
 npm run dev
 ```
 
-### With template option
+### With npm create
 
 ```bash
-npx @t1ep1l0t/create-fsd my-app --template react
+npm create @t1ep1l0t/fsd app my-app
+cd my-app
+npm run dev
 ```
 
 ---
 
-## 🏗️ FSD Structure Generator
+## 🏗️ FSD Architecture Generator
 
-After creating your project, you can use the `fsd` command to quickly generate FSD-compliant directory structures for features, entities, widgets, and pages.
+After creating your project, you can use the `arch` command to quickly generate FSD-compliant directory structures for features, entities, widgets, and pages. The command **automatically detects** whether your project uses TypeScript or JavaScript and creates the appropriate files.
 
 ### Usage
 
 ```bash
-create-fsd fsd [options]
+create-fsd arch [options]
 ```
 
 ### Options
@@ -97,30 +105,47 @@ create-fsd fsd [options]
 
 ### Examples
 
+#### TypeScript Project
 ```bash
-# Create a feature with UI and model segments
-create-fsd fsd -f user -s ui model -i
+# The CLI detects tsconfig.json and creates .ts files automatically
+create-fsd arch -f user-auth -s ui model api -i
 
-# Result:
-# src/features/user/
+# Result in TypeScript project:
+# src/features/user-auth/
 # ├── ui/
-# │   └── index.js
+# │   └── index.ts
+# ├── model/
+# │   └── index.ts
+# ├── api/
+# │   └── index.ts
+# └── index.ts (exports all segments)
+```
+
+#### JavaScript Project
+```bash
+# The CLI detects no tsconfig.json and creates .js files automatically
+create-fsd arch -e product -s model ui -i
+
+# Result in JavaScript project:
+# src/entities/product/
 # ├── model/
 # │   └── index.js
+# ├── ui/
+# │   └── index.js
 # └── index.js (exports all segments)
+```
 
-# Create an entity with API and lib segments
-create-fsd fsd -e product -s api lib -i
-
+#### More Examples
+```bash
 # Create a widget without index files (uses .gitkeep)
-create-fsd fsd -w header -s ui model
+create-fsd arch -w header -s ui model
 
 # Create a page
-create-fsd fsd -p home -s ui api -i
+create-fsd arch -p home -s ui api -i
 
 # Add more segments to existing structure
-create-fsd fsd -f user -s api config -i
-# This will add api/ and config/ folders and update the root index.js
+create-fsd arch -f user-auth -s config types -i
+# This will add new folders and update the root index file
 ```
 
 ### Common Segment Names
@@ -145,7 +170,7 @@ src/
 ├── 📱 app/              # Application initialization layer
 │   ├── providers/       # App providers (Router, i18n, Query Client)
 │   ├── styles/          # Global styles
-│   └── App.jsx          # Root component
+│   └── App.tsx/jsx      # Root component
 │
 ├── 📄 pages/            # Pages layer - route components
 │   ├── home/            # Home page
@@ -163,10 +188,12 @@ src/
 │
 └── 🔧 shared/           # Shared layer - reusable code
     ├── api/             # API client configuration
-    ├── store/           # Zustand stores
+    ├── store/           # State management stores
     └── ui/              # UI kit components
 ```
 
+> **Note:** TypeScript projects include `.tsx`/`.ts` files, while JavaScript projects use `.jsx`/`.js`
+
 ### Layer Responsibilities
 
 | Layer | Purpose | Examples |
@@ -198,22 +225,32 @@ The generated project includes working examples for all included libraries:
 
 ## 🛠️ Available Templates
 
-| Template | Status | Description |
-|----------|--------|-------------|
-| **React** | ✅ Available | React 18 + Vite + FSD architecture |
-| **Vue** | 🔜 Coming Soon | Vue 3 + Vite + FSD architecture |
-| **Next.js** | 🔜 Coming Soon | Next.js + FSD architecture |
-| **Nuxt** | 🔜 Coming Soon | Nuxt 3 + FSD architecture |
-| **Svelte** | 🔜 Coming Soon | Svelte + Vite + FSD architecture |
+| Template | Language | Status | Description |
+|----------|----------|--------|-------------|
+| **React** | JS / TS | ✅ Available | React 18 + Vite + FSD architecture |
+| **Vue** | JS / TS | 🔜 Coming Soon | Vue 3 + Vite + FSD architecture |
+| **Next.js** | JS / TS | 🔜 Coming Soon | Next.js + FSD architecture |
+| **Nuxt** | JS / TS | 🔜 Coming Soon | Nuxt 3 + FSD architecture |
+| **Svelte** | JS / TS | 🔜 Coming Soon | Svelte + Vite + FSD architecture |
 
 ---
 
 ## 📋 CLI Commands
 
-### Create Project
+### Main Commands
+
+```bash
+create-fsd                    # Show help
+create-fsd app <name> [opts]  # Create new project
+create-fsd arch [opts]        # Generate FSD structure
+```
+
+### `create-fsd app` - Create Project
+
+Create a new project from template
 
 ```bash
-create-fsd <project-name> [options]
+create-fsd app <project-name> [options]
 ```
 
 #### Options
@@ -221,24 +258,28 @@ create-fsd <project-name> [options]
 | Option | Alias | Description | Default |
 |--------|-------|-------------|---------|
 | `--template <name>` | `-t` | Template to use | `react` |
+| `--typescript` | `-ts` | Use TypeScript instead of JavaScript | `false` |
 
 #### Examples
 
 ```bash
-# Create project with React template (default)
-npx @t1ep1l0t/create-fsd my-app
+# Create JavaScript project (default)
+npx @t1ep1l0t/create-fsd app my-app
 
-# Explicitly specify template
-npx @t1ep1l0t/create-fsd my-app --template react
+# Create TypeScript project
+npx @t1ep1l0t/create-fsd app my-app --typescript
+npx @t1ep1l0t/create-fsd app my-app -ts
 
-# Short form
-npx @t1ep1l0t/create-fsd my-app -t react
+# Specify template explicitly
+npx @t1ep1l0t/create-fsd app my-app -t react -ts
 ```
 
-### Generate FSD Structure
+### `create-fsd arch` - Generate FSD Structure
+
+Generate FSD-compliant architecture structures. Automatically detects project type (TS/JS) and creates appropriate files.
 
 ```bash
-create-fsd fsd [options]
+create-fsd arch [options]
 ```
 
 #### Options
@@ -256,24 +297,39 @@ create-fsd fsd [options]
 
 ```bash
 # Create feature with index files
-create-fsd fsd -f authentication -s ui model api -i
+create-fsd arch -f authentication -s ui model api -i
 
 # Create entity without index files
-create-fsd fsd -e user -s model api
+create-fsd arch -e user -s model api
 
 # Create widget
-create-fsd fsd -w sidebar -s ui lib -i
+create-fsd arch -w sidebar -s ui lib -i
 
 # Create page
-create-fsd fsd -p dashboard -s ui model -i
+create-fsd arch -p dashboard -s ui model -i
+
+# Add more segments to existing structure
+create-fsd arch -f authentication -s config types -i
 ```
 
+#### Auto-Detection
+
+The `arch` command automatically detects your project type:
+
+- **TypeScript projects** (with `tsconfig.json`) → creates `.ts`/`.tsx` files
+- **JavaScript projects** (without `tsconfig.json`) → creates `.js`/`.jsx` files
+
 ---
 
 ## 🎓 Learn More
 
+### Core Concepts
 - [Feature-Sliced Design Documentation](https://feature-sliced.design/)
+- [FSD Best Practices](https://feature-sliced.design/docs/guides)
+
+### Technologies (React Template)
 - [React Documentation](https://react.dev/)
+- [TypeScript Documentation](https://www.typescriptlang.org/docs/)
 - [Vite Documentation](https://vitejs.dev/)
 - [TailwindCSS Documentation](https://tailwindcss.com/)
 

package/bin/cli.js

@@ -13,16 +13,35 @@ const __dirname = path.dirname(__filename);
 
 const program = new Command();
 
+// Helper function to detect if project uses TypeScript
+function isTypeScriptProject() {
+  const tsconfigPath = path.join(process.cwd(), 'tsconfig.json');
+  return fs.existsSync(tsconfigPath);
+}
+
 program
   .name('create-fsd')
-  .description('CLI to create React projects with FSD architecture')
-  .version('2.0.0')
+  .description('CLI for Feature-Sliced Design architecture')
+  .version('3.0.0');
+
+// App creation command
+program
+  .command('app')
+  .description('Create a new project from template')
   .argument('<project-name>', 'name of the project')
   .option('-t, --template <template>', 'template to use', 'react')
+  .option('-ts, --typescript', 'use TypeScript instead of JavaScript', false)
   .action(async (projectName, options) => {
-    const { template } = options;
+    const { template, typescript } = options;
 
-    console.log(chalk.blue.bold(`\n🚀 Creating ${projectName} with ${template} template...\n`));
+    // Determine the actual template to use
+    let actualTemplate = template;
+    if (typescript && template === 'react') {
+      actualTemplate = 'react-ts';
+    }
+
+    const languageLabel = typescript ? 'TypeScript' : 'JavaScript';
+    console.log(chalk.blue.bold(`\n🚀 Creating ${projectName} with ${template} template (${languageLabel})...\n`));
 
     const targetDir = path.join(process.cwd(), projectName);
 
@@ -35,10 +54,10 @@ program
     // Create project directory
     fs.mkdirSync(targetDir, { recursive: true });
 
-    const templateDir = path.join(__dirname, '..', 'templates', template);
+    const templateDir = path.join(__dirname, '..', 'templates', actualTemplate);
 
     if (!fs.existsSync(templateDir)) {
-      console.log(chalk.red(`❌ Template ${template} not found!`));
+      console.log(chalk.red(`❌ Template ${actualTemplate} not found!`));
       process.exit(1);
     }
 
@@ -81,9 +100,9 @@ program
     console.log();
   });
 
-// FSD structure generation command
+// FSD architecture generation command
 program
-  .command('fsd')
+  .command('arch')
   .description('Generate FSD (Feature-Sliced Design) structure')
   .option('-f, --feature <name>', 'create feature in features/')
   .option('-e, --entity <name>', 'create entity in entities/')
@@ -94,6 +113,10 @@ program
   .action(async (options) => {
     const { feature, entity, widget, page, segments, index } = options;
 
+    // Detect project type
+    const isTS = isTypeScriptProject();
+    const fileExtension = isTS ? 'ts' : 'js';
+
     // Determine layer and name based on which flag was used
     let layer, name, layerType;
 
@@ -125,6 +148,7 @@ program
     }
 
     console.log(chalk.blue.bold(`\n🏗️  Generating FSD structure...\n`));
+    console.log(chalk.cyan(`Project type: ${isTS ? 'TypeScript' : 'JavaScript'}`));
     console.log(chalk.cyan(`Layer: ${layer}`));
     console.log(chalk.cyan(`${layerType}: ${name}`));
     console.log(chalk.cyan(`Segments: ${segments.join(', ')}`));
@@ -150,7 +174,7 @@ program
 
         // Create index file in segment if requested
         if (index) {
-          const segmentIndexPath = path.join(segmentDir, 'index.js');
+          const segmentIndexPath = path.join(segmentDir, `index.${fileExtension}`);
           fs.writeFileSync(segmentIndexPath, '');
         } else {
           // Create a .gitkeep file to ensure empty directories are tracked
@@ -169,7 +193,7 @@ program
     if (index) {
       const indexSpinner = ora('Creating root index file...').start();
       try {
-        const indexPath = path.join(baseDir, 'index.js');
+        const indexPath = path.join(baseDir, `index.${fileExtension}`);
 
         // If index file exists, read existing exports and merge with new ones
         let existingExports = new Set();
@@ -216,11 +240,11 @@ program
       const prefix = index ? '├──' : (isLast ? '└──' : '├──');
       console.log(chalk.white(`    ${prefix} ${segment}/`));
       if (index) {
-        console.log(chalk.white(`    │   └── index.js`));
+        console.log(chalk.white(`    │   └── index.${fileExtension}`));
       }
     });
     if (index) {
-      console.log(chalk.white(`    └── index.js`));
+      console.log(chalk.white(`    └── index.${fileExtension}`));
     }
     console.log();
   });

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@t1ep1l0t/create-fsd",
-  "version": "2.0.1",
-  "description": "CLI tool to create React projects with FSD architecture",
+  "version": "3.0.0",
+  "description": "CLI for Feature-Sliced Design architecture. Create production-ready projects from framework templates and generate FSD structures with single commands.",
   "type": "module",
   "bin": {
     "create-fsd": "./bin/cli.js"
@@ -12,7 +12,7 @@
     "README.md"
   ],
   "scripts": {
-    "test": "node bin/cli.js test-project --template react"
+    "test": "node bin/cli.js app test-project --template react"
   },
   "keywords": [
     "cli",
@@ -20,7 +20,11 @@
     "feature-sliced-design",
     "react",
     "vite",
-    "template"
+    "template",
+    "typescript",
+    "javascript",
+    "scaffold",
+    "generator"
   ],
   "author": "t1ep1l0t",
   "license": "MIT",

package/templates/react-ts/.editorconfig

@@ -0,0 +1,12 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

package/templates/react-ts/.env.example

@@ -0,0 +1 @@
+VITE_API_URL=https://api.example.com

package/templates/react-ts/.prettierignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+build
+.vite
+coverage
+*.min.js
+package-lock.json

package/templates/react-ts/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "semi": false,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "es5",
+  "printWidth": 80,
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/templates/react-ts/.vscode/extensions.json

@@ -0,0 +1,7 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ]
+}

package/templates/react-ts/README.md

@@ -0,0 +1,70 @@
+# FSD React Application
+
+A modern React application built with Feature-Sliced Design architecture.
+
+## Technologies
+
+- **React 18** - UI library
+- **Vite** - Build tool and dev server
+- **React Router DOM** - Client-side routing
+- **Zustand** - State management
+- **Axios** - HTTP client
+- **React Query** - Server state management
+- **i18next** - Internationalization
+- **TailwindCSS v4** - Styling
+
+## Project Structure
+
+```
+src/
+├── app/              # Application initialization
+│   ├── providers/    # Context providers (router, i18n)
+│   └── styles/       # Global styles
+├── pages/            # Page components
+├── widgets/          # Composite UI components
+├── features/         # Business features
+├── entities/         # Business entities
+└── shared/           # Shared code
+    ├── api/          # API client configuration
+    ├── store/        # Global stores
+    └── ui/           # Reusable UI components
+```
+
+## Getting Started
+
+### Install dependencies
+
+```bash
+npm install
+```
+
+### Development
+
+```bash
+npm run dev
+```
+
+### Build for production
+
+```bash
+npm run build
+```
+
+### Preview production build
+
+```bash
+npm run preview
+```
+
+## Configuration
+
+- **API URL**: Set `VITE_API_URL` in `.env` file
+- **Languages**: Configure in `src/app/providers/i18n/index.js`
+- **Routes**: Define in `src/app/providers/router/index.jsx`
+- **Tailwind**: Customize in `src/app/styles/index.css`
+
+## Learn More
+
+- [Feature-Sliced Design](https://feature-sliced.design/)
+- [React Documentation](https://react.dev/)
+- [Vite Guide](https://vitejs.dev/guide/)