create-polygon-kit 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Sanket Saagar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,79 @@
+# create-polygon-kit
+
+CLI tool to quickly scaffold PolygonKit projects with your choice of framework.
+
+## Usage
+
+Create a new PolygonKit project interactively:
+
+```bash
+npx create-polygon-kit my-app
+```
+
+Or specify the project name when prompted:
+
+```bash
+npx create-polygon-kit
+```
+
+## Features
+
+- **Interactive CLI** - Guided setup with prompts for framework and options
+- **Multiple Frameworks** - Choose between Next.js and Vite
+- **TypeScript Support** - Option for TypeScript or JavaScript
+- **Pre-configured** - PolygonKit, Wagmi, Viem, and TailwindCSS already set up
+- **Automatic Installation** - Optional automatic dependency installation
+
+## Frameworks Supported
+
+- **Next.js** - React framework with App Router and SSR
+- **Vite** - Fast build tool with Hot Module Replacement
+
+## What's Included
+
+Each generated project includes:
+
+- ✅ PolygonKit components and hooks
+- ✅ Wallet connection with WalletConnect
+- ✅ Pre-built dashboard with Identity component
+- ✅ TailwindCSS v4 for styling
+- ✅ TypeScript configuration
+- ✅ ESLint and development tools
+
+## Example
+
+```bash
+# Create a new project
+npx create-polygon-kit my-polygon-app
+
+# Answer the prompts:
+# ? Which framework would you like to use? › Next.js
+# ? Would you like to use TypeScript? › Yes
+# ? Install dependencies now? › Yes
+
+# Start developing
+cd my-polygon-app
+npm run dev
+```
+
+## Requirements
+
+- Node.js 18.0.0 or higher
+- npm, yarn, or pnpm
+
+## Documentation
+
+- [PolygonKit Documentation](https://docs.polygonkit.com) - Complete guides and API reference
+- [GitHub Repository](https://github.com/sanketsaagar/polygonKit) - PolygonKit source code
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.
+
+---
+
+Built with ❤️ for the Polygon ecosystem

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":""}

package/dist/index.js

@@ -0,0 +1,140 @@
+#!/usr/bin/env node
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import prompts from 'prompts';
+import chalk from 'chalk';
+import ora from 'ora';
+import { execSync } from 'child_process';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+async function main() {
+    // Display ASCII art banner
+    console.log(chalk.bold.magenta(`
+  ╔═══════════════════════════════════════════════════════════════════════════════════════╗
+  ║                                                                                       ║
+  ║   ██████╗  ██████╗ ██╗  ██╗   ██╗ ██████╗  ██████╗ ███╗  ██╗   ██╗  ██╗██╗████████╗   ║
+  ║   ██╔══██╗██╔═══██╗██║  ╚██╗ ██╔╝██╔════╝ ██╔═══██╗████╗ ██║   ██║ ██╔╝██║╚══██╔══╝   ║
+  ║   ██████╔╝██║   ██║██║   ╚████╔╝ ██║  ███╗██║   ██║██╔██╗██║   █████╔╝ ██║   ██║      ║
+  ║   ██╔═══╝ ██║   ██║██║    ╚██╔╝  ██║   ██║██║   ██║██║╚████║   ██╔═██╗ ██║   ██║      ║
+  ║   ██║     ╚██████╔╝███████╗██║   ╚██████╔╝╚██████╔╝██║ ╚███║   ██║  ██╗██║   ██║      ║
+  ║   ╚═╝      ╚═════╝ ╚══════╝╚═╝    ╚═════╝  ╚═════╝ ╚═╝  ╚══╝   ╚═╝  ╚═╝╚═╝   ╚═╝      ║
+  ║                                                                                       ║
+  ╚═══════════════════════════════════════════════════════════════════════════════════════╝
+`));
+    console.log(chalk.bold.cyan('              🚀 Create your next Polygon app in seconds!\n'));
+    // Get project name from command line args or prompt
+    let projectName = process.argv[2];
+    if (!projectName) {
+        const response = await prompts({
+            type: 'text',
+            name: 'projectName',
+            message: 'What is your project named?',
+            initial: 'my-polygon-app',
+            validate: (value) => value.length > 0 ? true : 'Project name is required',
+        });
+        if (!response.projectName) {
+            console.log(chalk.red('\n❌ Project creation cancelled'));
+            process.exit(1);
+        }
+        projectName = response.projectName;
+    }
+    // Check if directory already exists
+    const targetDir = path.resolve(process.cwd(), projectName);
+    if (fs.existsSync(targetDir)) {
+        console.log(chalk.red(`\n❌ Directory ${projectName} already exists!`));
+        process.exit(1);
+    }
+    // Prompt for framework and options
+    const options = await prompts([
+        {
+            type: 'select',
+            name: 'framework',
+            message: 'Which framework would you like to use?',
+            choices: [
+                { title: 'Next.js', value: 'nextjs', description: 'React framework with SSR' },
+                { title: 'Vite', value: 'vite', description: 'Fast build tool with HMR' },
+            ],
+            initial: 0,
+        },
+        {
+            type: 'confirm',
+            name: 'typescript',
+            message: 'Would you like to use TypeScript?',
+            initial: true,
+        },
+        {
+            type: 'confirm',
+            name: 'installDeps',
+            message: 'Install dependencies now?',
+            initial: true,
+        },
+    ]);
+    if (!options.framework) {
+        console.log(chalk.red('\n❌ Project creation cancelled'));
+        process.exit(1);
+    }
+    const projectOptions = {
+        projectName,
+        ...options,
+    };
+    // Create project
+    await createProject(projectOptions);
+}
+async function createProject(options) {
+    const { projectName, framework, typescript, installDeps } = options;
+    const spinner = ora('Creating project...').start();
+    try {
+        const targetDir = path.resolve(process.cwd(), projectName);
+        const templateDir = path.resolve(__dirname, '..', 'templates', framework, typescript ? 'typescript' : 'javascript');
+        // Check if template exists
+        if (!fs.existsSync(templateDir)) {
+            spinner.fail('Template not found');
+            console.log(chalk.red(`\n❌ Template for ${framework} not found`));
+            process.exit(1);
+        }
+        // Copy template
+        await fs.copy(templateDir, targetDir);
+        // Update package.json with project name
+        const packageJsonPath = path.join(targetDir, 'package.json');
+        const packageJson = await fs.readJSON(packageJsonPath);
+        packageJson.name = projectName;
+        await fs.writeJSON(packageJsonPath, packageJson, { spaces: 2 });
+        spinner.succeed(chalk.green('Project created successfully!'));
+        // Install dependencies
+        if (installDeps) {
+            const installSpinner = ora('Installing dependencies...').start();
+            try {
+                process.chdir(targetDir);
+                execSync('npm install', { stdio: 'ignore' });
+                installSpinner.succeed(chalk.green('Dependencies installed!'));
+            }
+            catch (error) {
+                installSpinner.fail('Failed to install dependencies');
+                console.log(chalk.yellow('\n⚠️  You can install them manually by running:'));
+                console.log(chalk.cyan(`  cd ${projectName}`));
+                console.log(chalk.cyan('  npm install'));
+            }
+        }
+        // Show success message
+        console.log(chalk.bold.green('\n✨ Your PolygonKit project is ready!\n'));
+        console.log('Next steps:');
+        console.log(chalk.cyan(`  cd ${projectName}`));
+        if (!installDeps) {
+            console.log(chalk.cyan('  npm install'));
+        }
+        console.log(chalk.cyan('  npm run dev'));
+        console.log(chalk.dim('\n📚 Documentation: https://docs.polygonkit.com'));
+        console.log(chalk.dim('🐛 Issues: https://github.com/sanketsaagar/polygonKit/issues\n'));
+    }
+    catch (error) {
+        spinner.fail('Failed to create project');
+        console.error(chalk.red('\n❌ Error:'), error);
+        process.exit(1);
+    }
+}
+main().catch((error) => {
+    console.error(chalk.red('An error occurred:'), error);
+    process.exit(1);
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "create-polygon-kit",
+  "version": "0.1.0",
+  "description": "CLI tool to create PolygonKit projects",
+  "type": "module",
+  "bin": {
+    "create-polygon-kit": "./dist/index.js"
+  },
+  "files": [
+    "dist",
+    "templates"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "polygon",
+    "polygonkit",
+    "web3",
+    "blockchain",
+    "cli",
+    "create",
+    "scaffold"
+  ],
+  "author": "Sanket Saagar",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/sanketsaagar/create-polygon-kit.git"
+  },
+  "dependencies": {
+    "prompts": "^2.4.2",
+    "chalk": "^5.3.0",
+    "ora": "^8.0.1",
+    "fs-extra": "^11.2.0"
+  },
+  "devDependencies": {
+    "@types/node": "^20.10.0",
+    "@types/prompts": "^2.4.9",
+    "@types/fs-extra": "^11.0.4",
+    "typescript": "^5.3.3"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}

package/templates/nextjs/typescript/README.md

@@ -0,0 +1,36 @@
+# PolygonKit Next.js App
+
+This project was created with [create-polygon-kit](https://github.com/sanketsaagar/create-polygon-kit).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about PolygonKit and Next.js, check out the following resources:
+
+- [PolygonKit Documentation](https://docs.polygonkit.com) - learn about PolygonKit features and API
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API
+- [GitHub Repository](https://github.com/sanketsaagar/polygonKit) - source code and issues
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new).
+
+Check out the [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+
+## Built With
+
+- [Next.js](https://nextjs.org/) - The React Framework for the Web
+- [React](https://react.dev/) - The library for web and native user interfaces
+- [PolygonKit](https://docs.polygonkit.com) - React components for Polygon apps
+- [TailwindCSS](https://tailwindcss.com/) - A utility-first CSS framework

package/templates/nextjs/typescript/app/globals.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/nextjs/typescript/app/layout.tsx

@@ -0,0 +1,22 @@
+import type { Metadata } from 'next';
+import { Providers } from './providers';
+import './globals.css';
+
+export const metadata: Metadata = {
+  title: 'PolygonKit App',
+  description: 'Built with PolygonKit',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}

package/templates/nextjs/typescript/app/page.tsx

@@ -0,0 +1,78 @@
+'use client';
+
+import {
+  Wallet,
+  ConnectWallet,
+  WalletDropdown,
+  Identity,
+  usePolygonKit,
+} from '@sanketsaagar/polygon-kit';
+
+export default function Home() {
+  const { address, isConnected } = usePolygonKit();
+
+  if (!isConnected) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-8 text-gray-900 dark:text-white">
+            Welcome to PolygonKit
+          </h1>
+          <ConnectWallet />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 py-8">
+        <header className="flex justify-between items-center mb-12">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            My Polygon App
+          </h1>
+          <Wallet>
+            <WalletDropdown />
+          </Wallet>
+        </header>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+            <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
+              Your Profile
+            </h2>
+            <Identity
+              address={address!}
+              showAvatar
+              showAddress
+              showBalance
+            />
+          </div>
+
+          <div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+            <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
+              Quick Actions
+            </h2>
+            <p className="text-gray-600 dark:text-gray-300">
+              Add your custom components here!
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-12 text-center text-gray-600 dark:text-gray-400">
+          <p>
+            Built with{' '}
+            <a
+              href="https://docs.polygonkit.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-purple-600 dark:text-purple-400 hover:underline"
+            >
+              PolygonKit
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/typescript/app/providers.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { PolygonKitProvider } from '@sanketsaagar/polygon-kit';
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  return <PolygonKitProvider>{children}</PolygonKitProvider>;
+}

package/templates/nextjs/typescript/next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package/templates/nextjs/typescript/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "my-polygon-app",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "next": "^15.0.3",
+    "@sanketsaagar/polygon-kit": "^0.1.5",
+    "wagmi": "^2.12.29",
+    "viem": "^2.21.45",
+    "@tanstack/react-query": "^5.59.20"
+  },
+  "devDependencies": {
+    "typescript": "^5",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/postcss": "^4.0.0",
+    "postcss": "^8",
+    "eslint": "^8",
+    "eslint-config-next": "15.0.3"
+  }
+}

package/templates/nextjs/typescript/postcss.config.js

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/templates/nextjs/typescript/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}

package/templates/vite/typescript/README.md

@@ -0,0 +1,27 @@
+# PolygonKit Vite App
+
+This project was created with [create-polygon-kit](https://github.com/sanketsaagar/create-polygon-kit).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+```
+
+Open [http://localhost:5173](http://localhost:5173) with your browser to see the result.
+
+## Learn More
+
+To learn more about PolygonKit, check out the following resources:
+
+- [PolygonKit Documentation](https://docs.polygonkit.com) - learn about PolygonKit features and API
+- [GitHub Repository](https://github.com/sanketsaagar/polygonKit) - source code and issues
+
+## Built With
+
+- [Vite](https://vitejs.dev/) - Next Generation Frontend Tooling
+- [React](https://react.dev/) - The library for web and native user interfaces
+- [PolygonKit](https://docs.polygonkit.com) - React components for Polygon apps
+- [TailwindCSS](https://tailwindcss.com/) - A utility-first CSS framework

package/templates/vite/typescript/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>PolygonKit App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/vite/typescript/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "my-polygon-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "@sanketsaagar/polygon-kit": "^0.1.5",
+    "wagmi": "^2.12.29",
+    "viem": "^2.21.45",
+    "@tanstack/react-query": "^5.59.20"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "@vitejs/plugin-react": "^4.3.3",
+    "typescript": "~5.6.2",
+    "vite": "^5.4.10",
+    "tailwindcss": "^4.0.0",
+    "@tailwindcss/vite": "^4.0.0"
+  }
+}

package/templates/vite/typescript/src/App.css

@@ -0,0 +1 @@
+/* Add your custom styles here */

package/templates/vite/typescript/src/App.tsx

@@ -0,0 +1,88 @@
+import {
+  PolygonKitProvider,
+  Wallet,
+  ConnectWallet,
+  WalletDropdown,
+  Identity,
+  usePolygonKit,
+} from '@sanketsaagar/polygon-kit';
+import './App.css';
+
+function Dashboard() {
+  const { address, isConnected } = usePolygonKit();
+
+  if (!isConnected) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+        <div className="text-center">
+          <h1 className="text-4xl font-bold mb-8 text-gray-900 dark:text-white">
+            Welcome to PolygonKit
+          </h1>
+          <ConnectWallet />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-purple-50 to-indigo-100 dark:from-gray-900 dark:to-gray-800">
+      <div className="container mx-auto px-4 py-8">
+        <header className="flex justify-between items-center mb-12">
+          <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
+            My Polygon App
+          </h1>
+          <Wallet>
+            <WalletDropdown />
+          </Wallet>
+        </header>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          <div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+            <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
+              Your Profile
+            </h2>
+            <Identity
+              address={address!}
+              showAvatar
+              showAddress
+              showBalance
+            />
+          </div>
+
+          <div className="bg-white dark:bg-gray-800 p-8 rounded-xl shadow-lg">
+            <h2 className="text-xl font-semibold mb-4 text-gray-900 dark:text-white">
+              Quick Actions
+            </h2>
+            <p className="text-gray-600 dark:text-gray-300">
+              Add your custom components here!
+            </p>
+          </div>
+        </div>
+
+        <div className="mt-12 text-center text-gray-600 dark:text-gray-400">
+          <p>
+            Built with{' '}
+            <a
+              href="https://docs.polygonkit.com"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-purple-600 dark:text-purple-400 hover:underline"
+            >
+              PolygonKit
+            </a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function App() {
+  return (
+    <PolygonKitProvider>
+      <Dashboard />
+    </PolygonKitProvider>
+  );
+}
+
+export default App;

package/templates/vite/typescript/src/index.css

@@ -0,0 +1 @@
+@import "tailwindcss";

package/templates/vite/typescript/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import './index.css'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

package/templates/vite/typescript/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/templates/vite/typescript/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/templates/vite/typescript/vite.config.ts

@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+})