VisualTS

A powerful React/Next.js visual code generator for TypeScript projects. Built on top of the ts-generator package.

Key Features

• Module Parsing: Extract information about functions, variables, and types from TypeScript files.
• Code Generation: Generate new TypeScript code based on parsed information.
• Function Call Generation: Create TypeScript AST nodes for function calls, including async functions and Promises.
• Variable Declaration Generation: Generate variable declarations with associated function calls.
• Unique Variable Naming: Automatically generate unique variable names to avoid conflicts.
• Type Extraction: Extract and process return types from functions, including Promise types.
• Drag-and-drop Code Generation: Build custom functions by dragging and dropping functions from your codebase.
• TypeScript and React Visualization: Visualize the structure and dependencies of TypeScript modules and React components.

Project Structure

• apps/next: Next.js app showcasing ts-generator features
• packages/ui: Shared component library
• packages/eslint-config: ESLint configurations
• packages/typescript-config: Shared TypeScript configurations

Installation

To use ts-generator in your project:

npm install @ozhanefe/ts-generator
# or
yarn add @ozhanefe/ts-generator
# or
pnpm add @ozhanefe/ts-generator
# or
bun add @ozhanefe/ts-generator

Development

To set up the project for development:

1. Clone the repository: git clone https://github.com/ozhanefemeral/ts-generator
2. Install dependencies: bun install
3. Build all packages: bun run build
4. Start the development server: bun dev
5. Open the Next.js app in your browser at http://localhost:3000

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Roadmap

Check out our roadmap to see what's coming next.