Proyecto Final: Dashboard de DevTools

Aplicarás todo lo aprendido configurando DevTools completos para una app.

Estructura del Proyecto

src/
├── plugins/
│   ├── index.ts
│   └── custom-state.plugin.ts
├── providers/
│   └── DevToolsProvider.tsx
├── screens/
│   ├── HomeScreen.tsx
│   ├── ProductsScreen.tsx
│   └── CartScreen.tsx
├── store/
│   └── useStore.ts
└── App.tsx

Configuración Central

// providers/DevToolsProvider.tsx
import { RozeniteProvider } from '@rozenite/core';
import { NetworkPlugin } from '@rozenite/network';
import { StoragePlugin } from '@rozenite/storage';
import { PerformancePlugin } from '@rozenite/performance';
import { StatePlugin } from '../plugins/custom-state.plugin';

const plugins = [
  NetworkPlugin.configure({
    ignoreUrls: [/analytics/],
    maxRequests: 50,
  }),
  StoragePlugin,
  PerformancePlugin.configure({
    trackRenders: true,
    fpsWarningThreshold: 50,
  }),
  StatePlugin,
];

export function DevToolsProvider({ children }) {
  return (
    <RozeniteProvider
      plugins={plugins}
      config={{
        enabled: __DEV__,
        defaultPanel: 'network',
      }}
    >
      {children}
    </RozeniteProvider>
  );
}

Plugin de Estado Personalizado

// plugins/custom-state.plugin.ts
import { definePlugin, usePluginState } from '@rozenite/core';
import { useStore } from '../store/useStore';

export const StatePlugin = definePlugin({
  name: 'app-state',
  displayName: 'App State',
  icon: '🗃️',

  Panel: function StatePanel() {
    const store = useStore();

    return (
      <ScrollView>
        <Text style={styles.title}>Estado Global</Text>
        <Text style={styles.code}>
          {JSON.stringify(store, null, 2)}
        </Text>
      </ScrollView>
    );
  },
});

Ejercicio Final

Objetivo

Crear una app de e-commerce con DevTools completos.

Requisitos

1. Plugins configurados: Network, Storage, Performance, Custom
2. Funcionalidades:
   • Lista de productos (fetch API)
   • Carrito (AsyncStorage)
   • Estado global (Zustand)
3. DevTools:
   • Ver todas las peticiones HTTP
   • Inspeccionar/editar carrito en Storage
   • Monitorear FPS durante scroll
   • Ver estado de Zustand en plugin custom

Criterios de Evaluación

• 4 plugins funcionando
• Network captura todas las peticiones
• Storage muestra carrito
• Performance muestra métricas
• Plugin custom muestra estado

---

Siguientes Pasos

Recursos Adicionales

• Documentación de Rozenite
• Directorio de Plugins
• Discord de la Comunidad

Temas Avanzados

1. Crear plugins para librerías específicas (TanStack Query, SWR)
2. Integración con CI para métricas de performance
3. Plugins de testing automatizado

Proyectos Sugeridos

• Plugin de Analytics: Visualizar eventos enviados
• Plugin de Navigation: Historial de navegación
• Plugin de Forms: Estado de formularios en tiempo real

---

Navegación

• ← Anterior: Integración Re.Pack
• Índice del Tutorial