Svelte TypeScript Compiler

A React application that allows you to write Svelte code in a textarea and see it compiled and rendered in real-time.

Features

• Write Svelte code in a textarea
• Compile and render Svelte components in real-time
• Support for Svelte 4 and Svelte 5 components
• Error handling and display
• Responsive design

Getting Started

Prerequisites

• Node.js (v14 or later)
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/yourusername/svelte-ts-compiler.git
cd svelte-ts-compiler

2. Install dependencies:

npm install
# or
yarn

3. Start the development server:

npm run dev
# or
yarn dev

4. Open your browser and navigate to http://localhost:3000

Usage

1. Write your Svelte code in the editor textarea
2. Click the "Compile & Render" button
3. See the compiled component in the preview pane
4. If there are any errors, they will be displayed in the preview section

Example Svelte Code

<script>
  let count = 0;
  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Count: {count}
</button>

Project Structure

• src/ - Source code
  • utils/ - Utility functions
    • svelteCompiler.ts - Functions for compiling and rendering Svelte components
  • App.tsx - Main React component
  • App.css - Styles for the main component
  • main.tsx - Entry point
  • index.css - Global styles

Development

Available Scripts

• npm run dev - Start the development server
• npm run build - Build the application for production
• npm run preview - Preview the production build
• npm run lint - Run ESLint
• npm run format - Format the code with Prettier

License

This project is licensed under the MIT License - see the LICENSE file for details.

Acknowledgments

• Svelte - The JavaScript framework used for components
• React - The JavaScript library used for the UI
• Vite - The build tool used for development