frontity/dist/src/utils/slot-and-fill/use-fills.js

Frontity cli and entry point to other packages

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
const get_value_1 = __importDefault(require("get-value"));
const __1 = require("../..");
/**
 * The React component that is used in all the Slots when
 * `state.frontity.debug` is true.
 *
 * @param props - The props defined in {@link DebugFillProps}.
 *
 * @returns A blue div with the name of the slot.
 */
const DebugFill = ({ name }) => (jsx_runtime_1.jsxs(Debug, Object.assign({ "data-slot-name": name }, { children: ["Slot: \"", name, "\""] }), void 0));
/**
 * Styles for the Debug Fill components.
 */
const Debug = __1.styled.div `
  font-size: 20px;
  background: blue;
  color: yellow;
  padding: 10px;
`;
/**
 * A React hook to ease the creation of `Slot` components.
 *
 * @param name - The name of the Slot that you want to fill.
 *
 * @returns Array of fill objects that you can use to inject in the slot for this name.
 */
const useFills = (name) => {
    var _a;
    const { state, libraries } = __1.useConnect();
    if (!name) {
        __1.warn("You should pass the name of the slot that you would like to fill!");
        return [];
    }
    if ((_a = state.frontity) === null || _a === void 0 ? void 0 : _a.debug) {
        return [
            {
                key: "debug-fill",
                priority: 10,
                slot: name,
                library: "",
                Fill: DebugFill,
                props: {
                    name,
                },
            },
        ];
    }
    return (
    // Flat all the fills and turn them into entries.
    Object.entries(state.fills || {})
        .reduce((allFills, [namespace, fills]) => [
        ...allFills,
        ...Object.entries(fills).map(
        // 1. Nest the `key` of the fill adding names.
        // 2. Add default priority of 10 if not present
        // 3. Add the Fill component.
        ([key, fill]) => (Object.assign(Object.assign({ key: `${namespace} - ${key}`, priority: fill.priority || 10 }, (fill.library && {
            Fill: get_value_1.default(libraries.fills, fill.library),
        })), fill))),
    ], [])
        // Match only the fills for this name.
        .filter(({ slot }) => slot === name)
        // Filter out fills without a Fill component.
        .filter(({ Fill, key, library }) => {
        if (!Fill)
            __1.warn(`The Fill component for "${key}" cannot be found in "libraries.fills.${library}"`);
        return !!Fill;
    })
        // Sort by priority
        .sort((a, b) => a.priority - b.priority));
};
exports.default = useFills;