https://github.com/chenhunghan/vite-plugin-trunk

Seamless integrating WASM components in React/Vue project
https://github.com/chenhunghan/vite-plugin-trunk

csr leptos vite vite-plugin wasm webassembly

Last synced: 9 days ago
JSON representation

Seamless integrating WASM components in React/Vue project

• Host: GitHub
• URL: https://github.com/chenhunghan/vite-plugin-trunk
• Owner: chenhunghan
• License: mit
• Created: 2024-01-07T13:35:50.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-01-12T21:30:43.000Z (10 months ago)
• Last Synced: 2024-10-31T18:31:09.791Z (15 days ago)
• Topics: csr, leptos, vite, vite-plugin, wasm, webassembly
• Language: TypeScript
• Homepage:
• Size: 36.1 KB
• Stars: 6
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vite-plugin-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()],

})

```

## Quick start

Using a [Leptos](https://leptos.dev/) starter template [vite-leptos-template](https://github.com/chenhunghan/vite-leptos-template)

```sh

npx degit chenhunghan/vite-leptos-template my-project

```

## Get started by frameworks

### 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! { "Hello Leptos" })

}

```

#### 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

```

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

```ts

import { vitePluginTrunk } from "vite-plugin-trunk"

import vue from "@vitejs/plugin-vue"

export default defineConfig({

  plugins: [vue(), vitePluginTrunk()],

})

```

### With tailwind

Follow  and include `.rs` in your `./tailwind.config.js`

```js

/** @type {import('tailwindcss').Config} */

export default {

  content: [

    "./index.html",

    "./src/**/*.{js,ts,jsx,tsx,rs}", // include rs!

  ],

  theme: {

    extend: {},

  },

  plugins: [],

}

```