← Volver al listado de tecnologías

Capítulo 8: Custom Plugins

Por: Siempre Listo
rozenitepluginscustomdesarrollo

Custom Plugins

Aprenderás a crear plugins personalizados para extender Rozenite.

Estructura de un Plugin

import { definePlugin } from '@rozenite/core';

export const MyPlugin = definePlugin({
  name: 'my-plugin',
  displayName: 'Mi Plugin',
  icon: '🔧',

  // Panel de DevTools
  Panel: MyPluginPanel,

  // Inicialización
  setup: (context) => {
    // Configuración inicial
  },

  // Limpieza
  teardown: () => {
    // Cleanup
  },
});

Componente del Panel

import { View, Text, FlatList } from 'react-native';
import { usePluginState } from '@rozenite/core';

function MyPluginPanel() {
  const [data, setData] = usePluginState('my-plugin', []);

  return (
    <View>
      <Text>Mi Plugin</Text>
      <FlatList
        data={data}
        renderItem={({ item }) => <Text>{item}</Text>}
      />
    </View>
  );
}

Ejemplo: Plugin de Redux

import { definePlugin, usePluginState } from '@rozenite/core';

export const ReduxPlugin = definePlugin({
  name: 'redux',
  displayName: 'Redux',
  icon: '🗃️',

  setup: (context) => {
    // Interceptar store
    const originalDispatch = context.store.dispatch;

    context.store.dispatch = (action) => {
      context.emit('action', {
        type: action.type,
        payload: action.payload,
        timestamp: Date.now(),
      });
      return originalDispatch(action);
    };
  },

  Panel: function ReduxPanel() {
    const [actions] = usePluginState('redux', []);

    return (
      <FlatList
        data={actions}
        renderItem={({ item }) => (
          <View>
            <Text>{item.type}</Text>
            <Text>{JSON.stringify(item.payload)}</Text>
          </View>
        )}
      />
    );
  },
});

API del Plugin

interface PluginContext {
  // Emitir eventos
  emit: (event: string, data: any) => void;

  // Escuchar eventos
  on: (event: string, handler: Function) => void;

  // Estado persistente
  getState: () => any;
  setState: (state: any) => void;

  // Configuración
  config: PluginConfig;
}

Ejercicio Práctico

Objetivo

Crear un plugin que muestre el estado de Zustand/Redux.

Pasos

  1. Define el plugin con definePlugin
  2. Crea un panel que liste el estado
  3. Intercepta cambios de estado
  4. Muestra historial de cambios
Ver solución 
import { definePlugin, usePluginState } from '@rozenite/core';
import { useStore } from '../store';

export const ZustandPlugin = definePlugin({
  name: 'zustand',
  displayName: 'Zustand',
  icon: '🐻',

  Panel: function ZustandPanel() {
    const state = useStore();
    const [history, setHistory] = usePluginState('zustand', []);

    useEffect(() => {
      setHistory(prev => [...prev, {
        state: JSON.stringify(state),
        time: new Date().toISOString(),
      }].slice(-20));
    }, [state]);

    return (
      <View>
        <Text>Estado Actual:</Text>
        <Text>{JSON.stringify(state, null, 2)}</Text>
        <Text>Historial:</Text>
        {history.map((h, i) => (
          <Text key={i}>{h.time}</Text>
        ))}
      </View>
    );
  },
});

Criterios de Éxito

← Volver al listado de tecnologías