@redneckz/wildless-cms-uni-blocks 0.8.10 → 0.8.12

package/bundle/bundle.umd.js

@@ -81,12 +81,10 @@
             return this._.FOOTER;
         }
         get CDN() {
-            return this._.CDN;
+            return appendSlash(this._.CDN);
         }
         get BASE_PATH() {
-            return this._.BASE_PATH && !this._.BASE_PATH.endsWith('/')
-                ? `${this._.BASE_PATH}/`
-                : this._.BASE_PATH;
+            return appendSlash(this._.BASE_PATH);
         }
         get YANDEX_MAP_API_KEY() {
             return this._.YANDEX_MAP_API_KEY;
@@ -95,6 +93,7 @@
             return this._.YANDEX_METRIKA_ID;
         }
     })();
+    const appendSlash = (url) => (url && !url.endsWith('/') ? `${url}/` : url);
 
     const AUTH_PREFIX = 'guest';
     const STORAGE_KEY = 'likesToken';
@@ -369,8 +368,9 @@
         const [isVisible, setVisible] = useState(true);
         useEffect(() => defaultEventBus.subscribe('tab', (event) => {
             if (event.type === 'group') {
-                const hasSettings = block?.labels?.length || block?.anchor;
-                setVisible(event.label ? !hasSettings || Boolean(block?.labels?.includes(event.label)) : true);
+                setVisible(!block?.labels?.length ||
+                    !event.label ||
+                    Boolean(block?.labels?.includes(event.label)));
             }
             else {
                 setVisible(true);
@@ -419,6 +419,49 @@
         return (jsx("div", { ref: containerRef, className: `transition-max-h duration-300 overflow-hidden ${containerRef.current || !isUnfolded ? 'max-h-0' : ''} ${className}`, children: children }));
     });
 
+    function useRouter() {
+        return useRouter._impl();
+    }
+    useRouter._impl = () => ({
+        href: globalThis.location?.href || '/',
+        pathname: globalThis.location?.pathname || '/',
+        query: {},
+        push: () => {
+            // Do nothing
+        },
+        replace: () => {
+            // Do nothing
+        },
+    });
+    useRouter.setup = (impl) => {
+        useRouter._impl = impl;
+    };
+
+    const dirname = (path) => path?.split('/').slice(0, -1).join('/');
+
+    const isURL = (href) => Boolean(href?.includes(':'));
+    const isLocalURL = (href, target) => Boolean(href && !isURL(href) && (!target || target === '_self'));
+    const isHash = (href) => Boolean(href?.startsWith('#'));
+    const withoutQuery = (href) => (href || '').replace(/\?.*/, '').replace(/\/$/, '');
+    const joinPath = (...path) => path.filter(Boolean).join('/').replace(/\/+/g, '/');
+
+    var url = /*#__PURE__*/Object.freeze({
+        __proto__: null,
+        isURL: isURL,
+        isLocalURL: isLocalURL,
+        isHash: isHash,
+        withoutQuery: withoutQuery,
+        joinPath: joinPath
+    });
+
+    const adjustHref = (router) => (href) => {
+        if (!href || isURL(href) || (projectSettings.CDN && href.startsWith(projectSettings.CDN))) {
+            return href;
+        }
+        const isRelativeToBase = href.startsWith('/');
+        return joinPath(projectSettings.BASE_PATH, isRelativeToBase ? '/' : dirname(router.pathname), href);
+    };
+
     const svgUseStyleMap = {
         normal: '',
         color: 'text-primary-main',
@@ -426,7 +469,8 @@
         white: 'text-black',
     };
     const Icon = JSX(({ className = '', imageClassName = '', name = '', alt = `Иконка ${name}`, title = alt, iconVersion = 'color', asSVG, ...imgProps }) => {
-        const href = `${projectSettings.CDN || ''}icons/${name}.svg`;
+        const router = useRouter();
+        const href = adjustHref(router)(joinPath(projectSettings.CDN, '/icons', `${name}.svg`));
         if (asSVG && iconVersion !== 'normal') {
             return (jsx(Background, { className: className, children: jsxs("svg", { className: style(getSvgSize(imgProps.width), svgUseStyleMap[iconVersion], iconVersion === 'white' ? 'invert' : '', imageClassName), ...imgProps, "aria-hidden": "true", children: [title ? jsx("title", { children: title }) : null, alt ? jsx("desc", { children: alt }) : null, jsx("use", { href: `${href}#icon`, xlinkHref: `${href}#icon` })] }) }));
         }
@@ -435,22 +479,18 @@
     const getSvgSize = (width) => (width ? '' : 'w-full h-full');
     const Background = JSX(({ className, children }) => className ? jsx("div", { className: className, children: children }) : children);
 
-    const sourcesComparator = (a, b) => {
-        if (a.media && b.media) {
-            return a.media - b.media;
-        }
-        return 0;
-    };
+    const sourcesComparator = (a, b) => a?.media && b?.media ? a.media - b.media : 0;
     const ImgAsPicture = JSX(({ className = '', image, imageClassName = '', isMobile = false, pathPrefix }) => {
-        if (!image || (!image?.sources && !image?.src)) {
-            return null;
-        }
+        const router = useRouter();
         const pictureStyles = isMobile ? 'flex' : 'flex-none';
         return (jsxs("picture", { className: `${pictureStyles} ${className}`, children: [image?.sources?.length
                     ? image.sources
+                        .filter((_) => _?.src)
                         .sort(sourcesComparator)
-                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: addPathPrefixToSrcSet(src, pathPrefix), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
-                    : null, renderImg({ ...image, src: addPathPrefixToSrc(image.src, pathPrefix) }, imageClassName, isMobile)] }));
+                        .map(({ src, format, media }, index) => (jsx("source", { srcSet: adjustSrcset(router, pathPrefix)(src), type: formatToMimeType(format), media: media ? `(max-width: ${media}px)` : '', ...image.size }, `${index}_${src}`)))
+                    : null, image?.src
+                    ? renderImg({ ...image, src: adjustSrcset(router, pathPrefix)(image.src) }, imageClassName, isMobile)
+                    : null] }));
     });
     const renderImg = (image, imageClassName = '', isMobile = false) => {
         const style = {
@@ -462,15 +502,14 @@
         const imgStyle = isMobile ? 'm-auto' : 'm-0';
         return (jsx("img", { src: image.src, className: `${imgStyle} ${imageClassName}`, alt: alt, title: title, style: style, ...image.size }));
     };
-    const normalizePathPrefix = (pathPrefix = '') => pathPrefix && !pathPrefix.endsWith('/') ? `${pathPrefix}/` : pathPrefix;
-    const addPathPrefixToSrc = (src, pathPrefix) => !src || src?.startsWith('data:image') ? src : `${normalizePathPrefix(pathPrefix)}${src}`;
-    const addPathPrefixToSrcSet = (srcset, pathPrefix) => srcset
-        ?.split(',')
-        .map((src) => addPathPrefixToSrc(src.trim(), pathPrefix))
+    const adjustSrcset = (router, pathPrefix) => (srcset) => srcset
+        ?.split(/\s*,\s*/)
+        .map((src) => src.trim())
+        .filter(Boolean)
+        .map((src) => (isURL(src) ? src : joinPath(pathPrefix, src)))
+        .map(adjustHref(router))
         .join(', ');
-    function formatToMimeType(format) {
-        return format ? `image/${String(format)}` : undefined;
-    }
+    const formatToMimeType = (format) => format ? `image/${String(format)}` : undefined;
 
     const ImgInner = JSX(({ className = '', image, imageClassName = '', isMobile, pathPrefix, ...iconProps }) => {
         if (!image?.src && !image?.icon) {
@@ -614,31 +653,6 @@
         },
     ];
 
-    const normalizeAnchor = (anchor) => anchor?.replace('#', '') || '';
-    function gotoBlock(router, anchor) {
-        router.replace(`#${normalizeAnchor(anchor)}`);
-    }
-    function trackBlock(router, block) {
-        router.replace(`#${normalizeAnchor(block?.anchor)}`, undefined, {
-            scroll: false,
-        });
-    }
-
-    const isURL = (href) => Boolean(href?.includes('//'));
-    const isLocalURL = (href, target) => Boolean(href && !isURL(href) && (!target || target === '_self'));
-    const isHash = (href) => Boolean(href?.startsWith('#'));
-    const withoutQuery = (href) => (href || '').replace(/\?.*/, '').replace(/\/$/, '');
-    const joinPath = (...path) => path.filter(Boolean).join('/').replace(/\/+/g, '/');
-
-    var url = /*#__PURE__*/Object.freeze({
-        __proto__: null,
-        isURL: isURL,
-        isLocalURL: isLocalURL,
-        isHash: isHash,
-        withoutQuery: withoutQuery,
-        joinPath: joinPath
-    });
-
     /* eslint-disable @typescript-eslint/ban-types */
     const handlerDecorator = (handler, targetContent) => {
         return handlerDecorator._impl(handler, targetContent);
@@ -648,53 +662,24 @@
         handlerDecorator._impl = impl;
     };
 
-    function useRouter() {
-        return useRouter._impl();
-    }
-    useRouter._impl = () => ({
-        href: globalThis.location?.href || '/',
-        pathname: globalThis.location?.pathname || '/',
-        query: {},
-        push: () => {
-            // Do nothing
-        },
-        replace: () => {
-            // Do nothing
-        },
-    });
-    useRouter.setup = (impl) => {
-        useRouter._impl = impl;
-    };
-
     function useLink(isRemote) {
         const router = useRouter();
         return (props) => ({
             ...props,
-            href: adjustHref(props.href),
+            href: isRemote ? props.href : adjustHref(router)(props.href),
             'aria-label': props.text,
             onClick: handlerDecorator(handleHref(props), props),
         });
-        function adjustHref(href) {
-            const isRelativeToBase = !isRemote && href?.startsWith('/');
-            return projectSettings.BASE_PATH && href && isRelativeToBase
-                ? joinPath(projectSettings.BASE_PATH, href)
-                : href;
-        }
         function handleHref({ href, target, onClick }) {
             return (ev) => {
                 onClick && onClick(ev);
-                if (isRemote || !isLocalURL(href, target)) {
+                if (!href || isRemote || !isLocalURL(href, target)) {
                     // Default routing
                     return;
                 }
                 // Client routing
                 ev?.preventDefault();
-                if (isHash(href)) {
-                    gotoBlock(router, href);
-                }
-                else if (href) {
-                    router.push(href);
-                }
+                router.push(href);
             };
         }
     }
@@ -4449,6 +4434,14 @@
         return debouncedCallback;
     };
 
+    const normalizeAnchor = (anchor) => anchor?.replace('#', '') || '';
+    function trackBlock(block) {
+        const hash = `#${normalizeAnchor(block?.anchor)}`;
+        if (globalThis.location?.hash !== hash) {
+            globalThis.history?.replaceState(globalThis.history?.state, '', hash);
+        }
+    }
+
     const SPECIAL_BLOCK_TYPES = ['Header', 'Footer'];
     const EPS = 0.01;
     const topLineDelta = ([, { target }]) => Math.abs(target.getBoundingClientRect().top);
@@ -4462,7 +4455,6 @@
 
     const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
     function useBlockRouterProvider(scrollTarget = globalThis) {
-        const router = useRouter();
         const intersectionsMapRef = useRef(new Map());
         useEffect(() => blockRouterEventBus.subscribe('intersection', ({ block, intersection }) => {
             if (intersectionsMapRef.current) {
@@ -4471,20 +4463,14 @@
         }), []);
         useEffect(() => {
             const handleScroll = debounce(() => {
-                if (isScrolledEnough()) {
-                    const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
-                    trackBlock(router, activeBlock);
-                }
-                else {
-                    trackBlock(router);
-                }
+                trackBlock(isScrolledEnough() ? findActiveBlock([...(intersectionsMapRef.current || [])]) : undefined);
             }, 100);
             scrollTarget.addEventListener('scroll', handleScroll);
             return () => {
                 handleScroll.dispose();
                 scrollTarget.removeEventListener('scroll', handleScroll);
             };
-        }, [router, scrollTarget]);
+        }, [scrollTarget]);
     }
 
     const api = LikeAPI();
@@ -4555,7 +4541,7 @@
         return (jsx("div", { className: "flex items-end absolute bottom-0 right-0 h-full pointer-events-none", children: jsx(LikeControl, { className: "rounded-tl-lg sticky bottom-0 pointer-events-auto" }) }));
     }
 
-    const packageVersion = "0.8.10";
+    const packageVersion = "0.8.12";
 
     exports.Blocks = Blocks;
     exports.ContentPage = ContentPage;