Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ozhanefemeral/visual-ts
Generate React & TypeScript code visually.
https://github.com/ozhanefemeral/visual-ts
Last synced: 3 months ago
JSON representation
Generate React & TypeScript code visually.
- Host: GitHub
- URL: https://github.com/ozhanefemeral/visual-ts
- Owner: ozhanefemeral
- Created: 2024-05-16T18:38:03.000Z (6 months ago)
- Default Branch: main
- Last Pushed: 2024-08-12T23:01:12.000Z (3 months ago)
- Last Synced: 2024-08-13T01:38:18.938Z (3 months ago)
- Language: TypeScript
- Homepage: https://visual-ts.vercel.app
- Size: 563 KB
- Stars: 9
- Watchers: 2
- Forks: 1
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```bash
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](https://visual-ts.vercel.app/roadmap) to see what's coming next.