Webxdc React Template

An starter Vite + TypeScript + React template for Webxdc developers.

Features

• ⚡️ Vite 2, pnpm, ESBuild - born with fastness

• 🎨 UnoCSS - The instant on-demand atomic CSS engine.

• 😃 Use icons from any icon sets in Pure CSS

• ✅ Use Vitest for unit and components testing

• 🦾 TypeScript, of course

• 📱 Use the Webxdc simulator to test your Webxdc right on the browser while developing, and use Eruda to debug inside Delta Chat.

• 📦 Automatically minify, build and release your .xdc file

Pre-packed

UI Frameworks

• UnoCSS - The instant on-demand atomic CSS engine.

Icons

• Iconify - use icons from any icon sets 🔍Icônes
• Pure CSS Icons via UnoCSS

Plugins

• unplugin-auto-import - Directly use react/react-router-dom API and others without importing
• usehooks-ts - collection of useful React hooks

Usage

Installing Dependecies

After cloning this repo for the first time, install dependecies:

pnpm i

Testing

To test your work in real time while developing:

pnpm dev

💡 TIP: To debug inside Delta Chat, uncomment the script tag at the end of index.html file and your Webxdc will be packaged with developer tools inside!

Building

To package your webxdc file:

pnpm build

The resulting optimized .xdc file is saved in dist/ folder.

Releasing

To automatically build and create a new GitHub release with your .xdc file:

git tag v1.0.1
git push origin v1.0.1

Try it now!

GitHub Template

Create a repo from this template on GitHub.