import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
import { memo, useEffect } from 'react';
import { useUpdate } from 'react-use';
export const Renderer = memo(({ storage }) => {
    const update = useUpdate();
    useEffect(() => {
        storage.on('update', update);
        return () => {
            storage.off('update', update);
        };
    }, [storage, update]);
    return (_jsx(_Fragment, { children: storage.getItems().map((item) => (_jsx(ItemRenderer, { item: item }, item.id))) }));
});
Renderer.displayName = 'ReactRenderer';
const ItemRenderer = memo(({ item }) => {
    const update = useUpdate();
    useEffect(() => {
        item.on('rerender', update);
        return () => {
            item.off('rerender', update);
        };
    }, [item, update]);
    return _jsx(_Fragment, { children: item.render() });
});
ItemRenderer.displayName = 'ReactItemRenderer';
//# sourceMappingURL=react.js.map
