feat: enhance dev init with file detection, VSCode support, and new web template

packages/dev/src/init.ts

@@ -3,7 +3,7 @@ import fetch from 'node-fetch';
 import * as enquirer from 'enquirer';
 import Spin from 'light-spinner';
 import { join } from 'path';
-import { createWriteStream, existsSync } from 'fs';
+import { createWriteStream, existsSync, readdirSync } from 'fs';
 import { exec, exists } from './utils';
 import { tmpdir } from 'os';
 import { ensureDir, copy } from 'fs-extra';
@@ -21,6 +21,25 @@ export class InitPlugin extends BasePlugin {
     'init:do': this.hanldeLocalServer.bind(this),
   };
 
+  private async checkAndConfirmOverwrite(dir: string): Promise<boolean> {
+    try {
+      const files = readdirSync(dir).filter(file => !file.startsWith('.git'));
+      if (files.length > 0) {
+        console.warn('');
+        console.warn(`>> Directory ${dir} contains existing files: ${files.slice(0, 3).join(', ')}${files.length > 3 ? '...' : ''} <<`);
+        console.warn('');
+        const confirm = await (enquirer as any).input({
+          message: 'This may overwrite existing files. Continue? (y/N)',
+        });
+        return ['y', 'yes'].includes(confirm.toLowerCase());
+      }
+      return true;
+    } catch (error) {
+      // Directory doesn't exist or can't be read, it's safe to proceed
+      return true;
+    }
+  }
+
   async hanldeLocalServer() {
     // get template list
     const data = await fetch('https://unpkg.com/make-dev-fast-tpl-list@latest/package.json').then(res => res.json());
@@ -39,6 +58,16 @@ export class InitPlugin extends BasePlugin {
         console.error(`Error: dir ${name} is exists. (${dir})`);
         return;
     }
+
+    // Check for existing files when initializing in current directory
+    if (name === './') {
+      const canProceed = await this.checkAndConfirmOverwrite(dir);
+      if (!canProceed) {
+        console.log('Operation cancelled.');
+        return;
+      }
+    }
+
     console.log(`project will create to ${dir}`);
     await ensureDir(dir);
     const template = await (enquirer as any).autocomplete({

packages/tpl-list/package.json

@@ -1,6 +1,6 @@
 {
     "name": "make-dev-fast-tpl-list",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "list": [
         {
             "name": "TypeScript Node NPM",
@@ -9,6 +9,10 @@
         {
             "name": "TypeScript Node Bin",
             "target": "make-dev-fast-tpl-ts-bin"
+        },
+        {
+            "name": "TypeScript Web Library",
+            "target": "make-dev-fast-tpl-ts-web"
         }
     ]
 }

packages/tpl-ts-bin/package.json

@@ -1,6 +1,6 @@
 {
     "name": "make-dev-fast-tpl-ts-bin",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "files": [
         "template"
     ]

packages/tpl-ts-bin/template/dot.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "ms-vscode.vscode-typescript-next",
+    "bradlc.vscode-tailwindcss",
+    "ms-vscode.vscode-json"
+  ]
+}

packages/tpl-ts-bin/template/dot.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "typescript.suggest.autoImports": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "eslint.enable": true,
+  "eslint.autoFixOnSave": true,
+  "eslint.format.enable": true,
+  "eslint.lintTask.enable": true,
+  "files.eol": "\n",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true
+}

packages/tpl-ts-node/package.json

@@ -1,6 +1,6 @@
 {
     "name": "make-dev-fast-tpl-ts-node",
-    "version": "0.0.3",
+    "version": "0.0.4",
     "files": [
         "template"
     ]

packages/tpl-ts-node/template/dot.vscode/extensions.json

@@ -0,0 +1,8 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "ms-vscode.vscode-typescript-next",
+    "bradlc.vscode-tailwindcss",
+    "ms-vscode.vscode-json"
+  ]
+}

packages/tpl-ts-node/template/dot.vscode/settings.json

@@ -0,0 +1,18 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "typescript.suggest.autoImports": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "eslint.enable": true,
+  "eslint.autoFixOnSave": true,
+  "eslint.format.enable": true,
+  "eslint.lintTask.enable": true,
+  "files.eol": "\n",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true
+}

packages/tpl-ts-web/package.json

@@ -0,0 +1,7 @@
+{
+    "name": "make-dev-fast-tpl-ts-web",
+    "version": "0.0.1",
+    "files": [
+        "template"
+    ]
+}

packages/tpl-ts-web/template/README.md

@@ -0,0 +1,117 @@
+# TypeScript Web Library
+
+A modern TypeScript library template for web development with hot reload and live preview.
+
+## Features
+
+- 🚀 **Development Server**: Live preview with hot reload
+- 🔧 **TypeScript**: Full TypeScript support with strict mode
+- 🧪 **Testing**: Jest testing framework with coverage
+- 📦 **Build**: Webpack for bundling with UMD output
+- 🎨 **Linting**: ESLint with TypeScript support
+- 🔍 **IDE Support**: VSCode settings for auto-lint and formatting
+
+## Getting Started
+
+### Install Dependencies
+
+```bash
+npm install
+```
+
+### Development
+
+Start the development server with hot reload:
+
+```bash
+npm run dev
+```
+
+This will open your browser at `http://localhost:3000` with a live preview of your library.
+
+### Building
+
+Build the library for production:
+
+```bash
+npm run build
+```
+
+This creates:
+- `dist/main.js` - UMD bundle for browsers
+- `dist/index.js` - CommonJS module
+- `dist/index.d.ts` - TypeScript declarations
+
+### Testing
+
+Run tests:
+
+```bash
+npm test
+```
+
+Run tests with coverage:
+
+```bash
+npm run coverage
+```
+
+### Linting
+
+Check code quality:
+
+```bash
+npm run lint
+```
+
+Auto-fix linting issues:
+
+```bash
+npm run lint:fix
+```
+
+## Project Structure
+
+```
+├── src/
+│   └── index.ts          # Main library code
+├── test/
+│   ├── setup.js          # Test setup
+│   └── index.test.ts     # Unit tests
+├── public/
+│   └── index.html        # Demo page
+├── dist/                 # Built files (generated)
+├── webpack.config.js     # Webpack configuration
+├── tsconfig.json         # TypeScript configuration
+├── jest.config.js        # Jest configuration
+└── .eslintrc.json        # ESLint configuration
+```
+
+## Usage
+
+### In Browser (UMD)
+
+```html
+<script src="dist/main.js"></script>
+<script>
+  console.log(MyLibrary.hello('World'));
+</script>
+```
+
+### As NPM Module
+
+```javascript
+import { hello, Calculator } from 'your-library-name';
+
+console.log(hello('World'));
+
+const calc = new Calculator();
+const result = calc.add(5).multiply(2).getResult(); // 10
+```
+
+## Development Tips
+
+- The dev server automatically reloads when you change source files
+- Use the demo page at `http://localhost:3000` to test your library
+- TypeScript declarations are automatically generated during build
+- ESLint is configured for TypeScript and will auto-fix on save in VSCode

packages/tpl-ts-web/template/dot.eslintrc.json

@@ -0,0 +1,27 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "extends": [
+    "@typescript-eslint/recommended"
+  ],
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "parserOptions": {
+    "ecmaVersion": 2020,
+    "sourceType": "module"
+  },
+  "rules": {
+    "@typescript-eslint/no-unused-vars": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "@typescript-eslint/explicit-function-return-type": "off",
+    "@typescript-eslint/explicit-module-boundary-types": "off",
+    "@typescript-eslint/no-inferrable-types": "off",
+    "semi": ["error", "always"],
+    "quotes": ["error", "single"]
+  },
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  }
+}

packages/tpl-ts-web/template/dot.gitignore

@@ -0,0 +1,7 @@
+node_modules
+dist
+coverage
+*.log
+.DS_Store
+.env
+.env.local

packages/tpl-ts-web/template/dot.vscode/extensions.json

@@ -0,0 +1,11 @@
+{
+  "recommendations": [
+    "esbenp.prettier-vscode",
+    "ms-vscode.vscode-typescript-next",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "ms-vscode.vscode-json",
+    "formulahendry.auto-rename-tag",
+    "christian-kohler.path-intellisense"
+  ]
+}

packages/tpl-ts-web/template/dot.vscode/settings.json

@@ -0,0 +1,21 @@
+{
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "explicit",
+    "source.organizeImports": "explicit"
+  },
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "typescript.preferences.importModuleSpecifier": "relative",
+  "typescript.suggest.autoImports": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "eslint.enable": true,
+  "eslint.autoFixOnSave": true,
+  "eslint.format.enable": true,
+  "eslint.lintTask.enable": true,
+  "files.eol": "\n",
+  "files.trimTrailingWhitespace": true,
+  "files.insertFinalNewline": true,
+  "emmet.includeLanguages": {
+    "typescript": "html"
+  }
+}

packages/tpl-ts-web/template/jest.config.js

@@ -0,0 +1,15 @@
+const path = require('path');
+
+module.exports = {
+  preset: 'ts-jest',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: [path.join(__dirname, 'test/setup.js')],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.d.ts',
+  ],
+  testMatch: [
+    '<rootDir>/test/**/*.test.{ts,tsx}'
+  ],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
+}