Skip to content

Commit

Permalink
Update README.md
Browse files Browse the repository at this point in the history
  • Loading branch information
chenhunghan authored Jan 12, 2024
1 parent 609a6eb commit e606ea1
Showing 1 changed file with 80 additions and 1 deletion.
81 changes: 80 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -1,2 +1,81 @@
# vite-plugin-trunk
Seamless embedding WASM components (Leptos) in a Vite project via Trunk.

A zero-config vite plugin for seamless integrating WASM components in a React/Vue project.

```ts
import { vitePluginTrunk } from "vite-plugin-trunk"
export default defineConfig({
plugins: [vitePluginTrunk()],
})
```

## Get started

### React + [Leptos](https://leptos.dev/)

Start a new React project
```sh
npm create vite@latest my-react-app -- --template react-ts
cd my-react-app
npm install --save-dev vite-plugin-trunk
```

Import `vitePluginTrunk` plugin in `vite.config.ts`.
```ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { vitePluginTrunk } from "vite-plugin-trunk"

// https://vitejs.dev/config/
export default defineConfig({
plugins: [react(), vitePluginTrunk()],
})
```

#### Create a Rust project

Create `Cargo.toml` (package.json, but for Rust) at the project root with [Leptos](https://leptos.dev/).
```toml
[package]
name = "hello-leptos"
version = "0.1.0"
edition = "2021"

[dependencies]
leptos = { version = "0.5.4", features = ["csr", "nightly"] }
```

Create `main.rs` in `./src` with a basic [Leptos](https://leptos.dev/)
```rust
use leptos::*;

fn main() {
leptos::mount_to_body(|| view! { <span>"Hello Leptos"</span> })
}
```

#### Set up Rust toolchain

Install Rust's nightly toolchain (because we are using Leptos with `nightly` feature.
```sh
rustup toolchain install nightly
rustup override set nightly # set toolchain to nightly for this project
```

Install [Trunk](https://trunkrs.dev/)
```sh
cargo binstall trunk
```

#### Start Development

```
npm run dev
```

You should see both Vite + React logos, and "Hello Leptos" on the screen.

Production build
```
npm run build
```

0 comments on commit e606ea1

Please sign in to comment.