xmlui 0.11.3 → 0.11.6

package/dist/scripts/src/components-core/InspectorContext.js

@@ -1,248 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.InspectorContext = void 0;
-exports.InspectorProvider = InspectorProvider;
-exports.useDevTools = useDevTools;
-exports.useInspectMode = useInspectMode;
-exports.useInspector = useInspector;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_popper_1 = require("react-popper");
-const react_dom_1 = require("react-dom");
-const ThemeContext_1 = require("./theming/ThemeContext");
-const classnames_1 = __importDefault(require("classnames"));
-const ButtonNative_1 = require("../components/Button/ButtonNative");
-const InspectorButton_module_scss_1 = __importDefault(require("./InspectorButton.module.scss"));
-// --- The context object that is used to store the inspector information.
-exports.InspectorContext = (0, react_1.createContext)(null);
-function InspectorProvider({ children, sources, projectCompilation, mockApi, }) {
-    const [inspectable, setInspectable] = (0, react_1.useState)({});
-    const [inspectedNode, setInspectedNode] = (0, react_1.useState)(null);
-    const [showCode, setShowCode] = (0, react_1.useState)(false);
-    const [inspectMode, setInspectMode] = (0, react_1.useState)(false);
-    const [clickPosition, setClickPosition] = (0, react_1.useState)({
-        x: 0,
-        y: 0,
-    });
-    const contextValue = (0, react_1.useMemo)(() => {
-        return {
-            sources,
-            attach: (node, uid, inspectId) => {
-                setInspectable((prev) => {
-                    return Object.assign(Object.assign({}, prev), { [inspectId]: {
-                            node,
-                            uid,
-                            inspectId,
-                            key: 0,
-                        } });
-                });
-            },
-            refresh: (inspectId) => {
-                setInspectable((prev) => {
-                    return Object.assign(Object.assign({}, prev), { [inspectId]: Object.assign(Object.assign({}, prev[inspectId]), { key: prev[inspectId].key + 1 }) });
-                });
-            },
-            detach: (uid, inspectId) => {
-                setInspectable((prev) => {
-                    const ret = Object.assign({}, prev);
-                    delete ret[inspectId];
-                    return ret;
-                });
-            },
-            inspectedNode,
-            setIsOpen: setShowCode,
-            isOpen: showCode,
-            devToolsEnabled: showCode,
-            projectCompilation: projectCompilation,
-            setInspectMode,
-            inspectMode,
-            mockApi,
-            clickPosition,
-        };
-    }, [
-        sources,
-        inspectedNode,
-        showCode,
-        clickPosition,
-        setShowCode,
-        projectCompilation,
-        inspectMode,
-        mockApi,
-    ]);
-    return ((0, jsx_runtime_1.jsxs)(exports.InspectorContext.Provider, { value: contextValue, children: [children, process.env.VITE_USER_COMPONENTS_Inspect !== "false" &&
-                inspectable &&
-                Object.values(inspectable).map((item) => {
-                    return ((0, jsx_runtime_1.jsx)(InspectButton, { inspectedNode: inspectedNode, setShowCode: setShowCode, setClickPosition: setClickPosition, inspectId: item.inspectId, node: item.node, setInspectedNode: setInspectedNode, inspectMode: inspectMode }, item.inspectId + +"-" + item.key));
-                })] }));
-}
-function InspectButton({ inspectId, node, inspectedNode, setInspectedNode, setShowCode, inspectMode, setClickPosition, }) {
-    const { root } = (0, ThemeContext_1.useTheme)();
-    const [referenceElement, setReferenceElement] = (0, react_1.useState)(null);
-    const [popperElement, setPopperElement] = (0, react_1.useState)(null);
-    const { styles: popperStyles, attributes } = (0, react_popper_1.usePopper)(referenceElement, popperElement, {
-        placement: "top-end",
-        modifiers: [
-            {
-                name: "offset",
-                options: {
-                    offset: [-4, -18],
-                },
-            },
-            {
-                name: "flip",
-                enabled: false,
-                // options: {
-                //   fallbackPlacements: ['top', 'right'],
-                // },
-            },
-        ],
-    });
-    const [visible, setVisible] = (0, react_1.useState)(false);
-    const timeoutRef = (0, react_1.useRef)(null);
-    const hoverRef = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        if (!referenceElement) {
-            return;
-        }
-        if ((inspectedNode === null || inspectedNode === void 0 ? void 0 : inspectedNode.inspectId) === inspectId) {
-            referenceElement.classList.add(InspectorButton_module_scss_1.default.inspectedNode);
-        }
-        else {
-            referenceElement.classList.remove(InspectorButton_module_scss_1.default.inspectedNode);
-        }
-    }, [inspectId, inspectedNode, referenceElement]);
-    (0, react_1.useEffect)(() => {
-        if (inspectedNode) {
-            setShowCode(true);
-        }
-        else {
-            setShowCode(false);
-        }
-    }, [inspectedNode]);
-    (0, react_1.useEffect)(() => {
-        const htmlElement = document.querySelector(`[data-inspectId="${inspectId}"]`);
-        if (!htmlElement) {
-            return;
-        }
-        setReferenceElement(htmlElement);
-        if (inspectMode) {
-            htmlElement.classList.add(InspectorButton_module_scss_1.default.inspectableNode);
-            const overlay = document.createElement("div");
-            overlay.classList.add(InspectorButton_module_scss_1.default.inspectOverlay);
-            htmlElement.appendChild(overlay);
-            overlay.addEventListener("click", () => {
-                setInspectedNode((prev) => {
-                    if ((prev === null || prev === void 0 ? void 0 : prev.inspectId) === inspectId) {
-                        return null;
-                    }
-                    return Object.assign(Object.assign({}, node), { inspectId });
-                });
-            });
-        }
-        if (!inspectMode) {
-            htmlElement.classList.remove(InspectorButton_module_scss_1.default.inspectableNode);
-            setInspectedNode(null);
-            setShowCode(false);
-            const overlay = htmlElement.querySelector(`.${InspectorButton_module_scss_1.default.inspectOverlay}`);
-            if (overlay) {
-                overlay.remove();
-            }
-            htmlElement.classList.remove(InspectorButton_module_scss_1.default.inspectedNode);
-        }
-        function mouseenter() {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            setVisible(true);
-        }
-        function mouseleave() {
-            if (timeoutRef.current) {
-                clearTimeout(timeoutRef.current);
-            }
-            if (hoverRef.current) {
-                return;
-            }
-            timeoutRef.current = window.setTimeout(() => {
-                setVisible(false);
-            }, 100);
-        }
-        htmlElement.addEventListener("mouseenter", mouseenter);
-        htmlElement.addEventListener("mouseleave", mouseleave);
-        return () => {
-            htmlElement.removeEventListener("mouseenter", mouseenter);
-            htmlElement.removeEventListener("mouseleave", mouseleave);
-        };
-    }, [inspectId, node, inspectMode, setShowCode, setInspectedNode]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: inspectMode
-            ? null
-            : visible &&
-                !!root &&
-                (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(ButtonNative_1.Button, Object.assign({ variant: "outlined", className: (0, classnames_1.default)(InspectorButton_module_scss_1.default.wrapper, "_debug-inspect-button"), ref: (el) => setPopperElement(el), style: Object.assign(Object.assign({}, popperStyles.popper), { padding: 0 }) }, attributes.popper, { onMouseEnter: () => {
-                        hoverRef.current = true;
-                        if (timeoutRef.current) {
-                            clearTimeout(timeoutRef.current);
-                            timeoutRef.current = null;
-                        }
-                    }, onMouseLeave: () => {
-                        hoverRef.current = false;
-                        setVisible(false);
-                    }, onClick: () => {
-                        setInspectedNode(node);
-                        setShowCode(true);
-                        setClickPosition({
-                            x: (popperElement === null || popperElement === void 0 ? void 0 : popperElement.getBoundingClientRect().left) || 0,
-                            y: (popperElement === null || popperElement === void 0 ? void 0 : popperElement.getBoundingClientRect().top) || 0,
-                        });
-                    }, children: "Show code" })), root) }));
-}
-function useDevTools() {
-    const context = (0, react_1.useContext)(exports.InspectorContext);
-    if (!context) {
-        throw new Error("useDevTools must be used within an InspectorProvider");
-    }
-    return {
-        projectCompilation: context.projectCompilation,
-        inspectedNode: context.inspectedNode,
-        sources: context.sources,
-        isOpen: context.isOpen,
-        setIsOpen: context.setIsOpen,
-        devToolsEnabled: context.devToolsEnabled,
-        mockApi: context.mockApi,
-        clickPosition: context.clickPosition,
-    };
-}
-function useInspectMode() {
-    const context = (0, react_1.useContext)(exports.InspectorContext);
-    return {
-        setInspectMode: context === null || context === void 0 ? void 0 : context.setInspectMode,
-        inspectMode: context === null || context === void 0 ? void 0 : context.inspectMode,
-    };
-}
-function useInspector(node, uid) {
-    var _a;
-    const context = (0, react_1.useContext)(exports.InspectorContext);
-    const inspectValue = (_a = node.props) === null || _a === void 0 ? void 0 : _a.inspect;
-    const shouldInspect = inspectValue === true || inspectValue === "true";
-    const inspectId = (0, react_1.useId)();
-    const refreshInspection = (0, react_1.useCallback)(() => {
-        context === null || context === void 0 ? void 0 : context.refresh(inspectId);
-    }, [context, inspectId]);
-    (0, react_1.useEffect)(() => {
-        if (shouldInspect) {
-            context === null || context === void 0 ? void 0 : context.attach(node, uid, inspectId);
-        }
-        return () => {
-            context === null || context === void 0 ? void 0 : context.detach(uid, inspectId);
-        };
-    }, [context, inspectId, node, shouldInspect, uid]);
-    if (shouldInspect && context) {
-        return {
-            refreshInspection,
-            inspectId,
-        };
-    }
-    return {};
-}

package/dist/scripts/src/components-core/LoaderComponent.js

@@ -1,109 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.LoaderComponent = LoaderComponent;
-const react_1 = require("react");
-const ComponentRegistryContext_1 = require("../components/ComponentRegistryContext");
-const containers_1 = require("./rendering/containers");
-const valueExtractor_1 = require("./rendering/valueExtractor");
-const hooks_1 = require("./utils/hooks");
-function LoaderComponent({ node, state, dispatch, lookupAction, lookupSyncCallback, registerComponentApi, onUnmount, appContext, memoedVarsRef, }) {
-    const componentRegistry = (0, ComponentRegistryContext_1.useComponentRegistry)();
-    const uid = (0, react_1.useMemo)(() => Symbol(node.uid), [node.uid]);
-    (0, react_1.useEffect)(() => {
-        return () => {
-            onUnmount(uid);
-        };
-    }, [onUnmount, uid]);
-    // --- Memoizes component API registration
-    const memoedRegisterComponentApi = (0, react_1.useCallback)((api) => {
-        registerComponentApi(uid, api);
-    }, [registerComponentApi, uid]);
-    // --- Memoizes the action resolution by action definition value
-    const memoedLookupAction = (0, react_1.useCallback)((action, actionOptions) => {
-        return lookupAction(action, uid, actionOptions);
-    }, [lookupAction, uid]);
-    // --- Get the tracked APIs of the compomnent
-    const referenceTrackedApi = (0, hooks_1.useReferenceTrackedApi)(state);
-    // --- Memoizes the value extractor object
-    const valueExtractor = (0, react_1.useMemo)(() => {
-        return (0, valueExtractor_1.createValueExtractor)(state, appContext, referenceTrackedApi, memoedVarsRef);
-    }, [appContext, memoedVarsRef, referenceTrackedApi, state]);
-    // --- Memoizes the action resolution by action definition value
-    const memoedLookupSyncCallback = (0, react_1.useCallback)((action) => {
-        if (!action) {
-            return undefined;
-        }
-        return lookupSyncCallback(valueExtractor(action), uid);
-    }, [lookupSyncCallback, uid, valueExtractor]);
-    const memoedLoaderInProgressChanged = (0, react_1.useCallback)((isInProgress) => {
-        dispatch(loaderInProgressChanged(uid, isInProgress));
-    }, [dispatch, uid]);
-    const memoedLoaderIsRefetchingChanged = (0, react_1.useCallback)((isRefetching) => {
-        dispatch(loaderIsRefetchingChanged(uid, isRefetching));
-    }, [dispatch, uid]);
-    const memoedLoaderLoaded = (0, react_1.useCallback)((data, pageInfo) => {
-        dispatch(loaderLoaded(uid, data, pageInfo));
-    }, [dispatch, uid]);
-    const memoedLoaderError = (0, react_1.useCallback)((error) => {
-        dispatch(loaderError(uid, error));
-    }, [dispatch, uid]);
-    const renderer = componentRegistry.lookupLoaderRenderer(node.type);
-    if (!renderer) {
-        console.error(`Loader ${node.type} is not available. Did you forget to register it in the loaderRegistry?`);
-        return null;
-    }
-    return renderer({
-        loader: node,
-        state,
-        dispatch,
-        loaderInProgressChanged: memoedLoaderInProgressChanged,
-        loaderIsRefetchingChanged: memoedLoaderIsRefetchingChanged,
-        loaderLoaded: memoedLoaderLoaded,
-        loaderError: memoedLoaderError,
-        extractValue: valueExtractor,
-        registerComponentApi: memoedRegisterComponentApi,
-        lookupAction: memoedLookupAction,
-        lookupSyncCallback: memoedLookupSyncCallback,
-    });
-}
-// Signs that a particular loader (`uid`) has just started fetching its data (or executing its operation).
-function loaderInProgressChanged(uid, isInProgress) {
-    return {
-        type: containers_1.ContainerActionKind.LOADER_IN_PROGRESS_CHANGED,
-        payload: {
-            uid,
-            inProgress: isInProgress,
-        },
-    };
-}
-// Signs that a particular loader (`uid`) has just started refetching its data (or executing its operation).
-function loaderIsRefetchingChanged(uid, isRefetching) {
-    return {
-        type: containers_1.ContainerActionKind.LOADER_IS_REFETCHING_CHANGED,
-        payload: {
-            uid,
-            isRefetching,
-        },
-    };
-}
-// Signs that a particular loader (`uid`) has just fetched its data (`pageInfo`) successfully.
-function loaderLoaded(uid, data, pageInfo) {
-    return {
-        type: containers_1.ContainerActionKind.LOADER_LOADED,
-        payload: {
-            uid,
-            data,
-            pageInfo,
-        },
-    };
-}
-// Signs that a particular loader (`uid`) has has an `error` during its operation.
-function loaderError(uid, error) {
-    return {
-        type: containers_1.ContainerActionKind.LOADER_ERROR,
-        payload: {
-            uid,
-            error,
-        },
-    };
-}