svelte-microfront

Microfrontend Svelte 5 — flujo de pago con 4 pantallas. Se compila como app web estática y se sirve por HTTP para ser embebido en un WebView desde el host RN.

Forma parte de la POC de microfrontends junto con:

• react-native-microfronts — Host RN
• repack-microfront — Microfront RN con Repack

Stack

• Svelte 5 (sintaxis runes: $state, $derived)
• Vite 8 + TypeScript
• Sin libs externas — todo el design system de Deuna está replicado en CSS

Cómo levantarlo

Pre-requisitos

• Node 18+
• adb en PATH (solo si vas a probar desde el emulador Android del host)

Pasos

# 1. Clonar (si aún no lo tienes)
git clone https://github.com/dev-ccazares/svelte-microfront.git
cd svelte-microfront

# 2. Instalar dependencias
npm install

# 3. Compilar el bundle de producción
npm run build

# 4. Servirlo por HTTP (puerto 4173 por defecto)
npm run preview -- --host 0.0.0.0 --port 4173

Verás algo así:

  ➜  Local:   http://localhost:4173/
  ➜  Network: http://192.168.x.x:4173/

Déjalo corriendo — el host RN lo consume mientras esté arriba.

Modo desarrollo (hot reload en browser)

npm run dev
# Abre http://localhost:5173 en Chrome

Útil para iterar la UI sin tocar nada del RN.

Conexión con el host RN

El host RN tiene una constante SVELTE_URL que apunta a este servicio. Si lo corres en emulador Android:

// react-native-microfronts/App.tsx
const SVELTE_URL = 'http://10.0.2.2:4173/';

10.0.2.2 es el alias del host (tu Mac) desde el emulador. Si pruebas en device físico, usá la IP de tu red local o un devtunnel.

Estructura

src/
├── App.svelte             Root con router interno (state-based)
├── main.ts                Entry point
├── screens/               4 pantallas del flujo de pago
│   ├── SelectContact.svelte
│   ├── EnterAmount.svelte
│   ├── ConfirmPayment.svelte
│   └── Voucher.svelte
├── components/            Componentes reutilizables (Avatar, Button, Item, Keyboard)
├── stores/                Stores con runes ($state)
├── theme/                 Colores extraídos del DS Deuna
├── mocks/                 Datos mock (contactos)
└── types/                 Tipos TS

vite.config.ts             Config básica de Vite + Svelte plugin

Métricas

Para detalles sobre tamaño vs un equivalente RN, ver el repo del host.