"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Renderer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_use_1 = require("react-use");
exports.Renderer = (0, react_1.memo)(({ storage }) => {
    const update = (0, react_use_1.useUpdate)();
    (0, react_1.useEffect)(() => {
        storage.on('update', update);
        return () => {
            storage.off('update', update);
        };
    }, [storage, update]);
    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: storage.getItems().map((item) => ((0, jsx_runtime_1.jsx)(ItemRenderer, { item: item }, item.id))) }));
});
exports.Renderer.displayName = 'ReactRenderer';
const ItemRenderer = (0, react_1.memo)(({ item }) => {
    const update = (0, react_use_1.useUpdate)();
    (0, react_1.useEffect)(() => {
        item.on('rerender', update);
        return () => {
            item.off('rerender', update);
        };
    }, [item, update]);
    return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: item.render() });
});
ItemRenderer.displayName = 'ReactItemRenderer';
//# sourceMappingURL=react.js.map
