@redneckz/wildless-cms-uni-blocks 0.8.8 → 0.8.9

package/src/hooks/useRouter.ts

@@ -1,10 +1,14 @@
+interface RouterOptions {
+  scroll?: boolean;
+}
+
 export interface Router {
   pathname: string;
   query: Record<string, string | string[] | undefined>;
   href?: string;
   basePath?: string;
-  push: (url: string) => void;
-  replace: (url: string) => void;
+  push: (url: string, as?: string, options?: RouterOptions) => void;
+  replace: (url: string, as?: string, options?: RouterOptions) => void;
 }
 
 export function useRouter(): Router {

package/src/services/BlockRouter/BlockRouter.ts

@@ -1,53 +1,14 @@
-import { EventBus } from '../../EventBus/EventBus';
+import type { Router } from '../../hooks/useRouter';
 import type { BlockDef } from '../../model/ContentPageDef';
 
-export interface GotoAnchorEvent {
-  anchor: string;
-}
-
-export interface BlockIntersectionEvent {
-  block: BlockDef;
-  intersection: IntersectionObserverEntry;
-}
+const normalizeAnchor = (anchor?: string) => anchor?.replace('#', '') || '';
 
-interface EventMap {
-  goto: GotoAnchorEvent;
-  intersection: BlockIntersectionEvent;
+export function gotoBlock(router: Router, anchor?: string) {
+  router.replace(`#${normalizeAnchor(anchor)}`);
 }
 
-const normalizeAnchor = (rawAnchor?: string) => rawAnchor?.replace('#', '') || '';
-const getURLWithAnchor = (rawAnchor?: string) =>
-  `${globalThis.location?.pathname}#${normalizeAnchor(rawAnchor)}`;
-
-export class BlockRouter {
-  public static readonly inst = new BlockRouter();
-
-  readonly eventBus = new EventBus<EventMap>();
-
-  constructor() {
-    const anchor = normalizeAnchor(globalThis.location?.hash);
-    if (anchor) {
-      this.eventBus.subject('goto', { anchor });
-    }
-  }
-
-  goto(rawAnchor?: string) {
-    const anchor = normalizeAnchor(rawAnchor);
-    if (anchor) {
-      this.push(anchor);
-      this.eventBus.fire('goto', { anchor });
-    }
-  }
-
-  push(rawAnchor: string) {
-    globalThis.history?.pushState(null, '', getURLWithAnchor(rawAnchor));
-  }
-
-  replace(rawAnchor: string) {
-    globalThis.history?.replaceState(null, '', getURLWithAnchor(rawAnchor));
-  }
-
-  reset() {
-    globalThis.history?.replaceState(null, '', getURLWithAnchor());
-  }
+export function trackBlock(router: Router, block?: BlockDef) {
+  router.replace(`#${normalizeAnchor(block?.anchor)}`, undefined, {
+    scroll: false,
+  });
 }

package/src/services/BlockRouter/blockRouterEventBus.ts

@@ -0,0 +1,13 @@
+import { EventBus } from '../../EventBus/EventBus';
+import type { BlockDef } from '../../model/ContentPageDef';
+
+export interface BlockIntersectionEvent {
+  block: BlockDef;
+  intersection: IntersectionObserverEntry;
+}
+
+interface EventMap {
+  intersection: BlockIntersectionEvent;
+}
+
+export const blockRouterEventBus = new EventBus<EventMap>();

package/src/services/BlockRouter/useBlockIntersectionObserver.ts

@@ -1,12 +1,9 @@
-import { useCallback, useEffect } from '@redneckz/uni-jsx/lib/hooks';
+import { useCallback } from '@redneckz/uni-jsx/lib/hooks';
 import { useIntersectionObserver } from '../../hooks/useIntersectionObserver';
 import type { BlockDef } from '../../model/ContentPageDef';
-import { BlockRouter } from './BlockRouter';
+import { blockRouterEventBus } from './blockRouterEventBus';
 
-export function useBlockIntersectionObserver(
-  block?: BlockDef,
-  router: BlockRouter = BlockRouter.inst,
-) {
+export function useBlockIntersectionObserver(block?: BlockDef) {
   const observerCallback = useCallback(
     (entries: IntersectionObserverEntry[]) => {
       if (!block || !entries?.length) {
@@ -14,24 +11,10 @@ export function useBlockIntersectionObserver(
       }
 
       const intersection = entries[entries.length - 1];
-      router.eventBus.fire('intersection', { block, intersection });
+      blockRouterEventBus.fire('intersection', { block, intersection });
     },
-    [block, router],
+    [block],
   );
 
-  const ref = useIntersectionObserver(observerCallback, { sensitivity: 1 });
-
-  useEffect(() => {
-    if (!ref.current) {
-      return undefined;
-    }
-
-    return router.eventBus.subscribe('goto', ({ anchor }) => {
-      if (ref.current && block?.anchor === anchor) {
-        ref.current.scrollIntoView({ behavior: 'smooth', block: 'start' });
-      }
-    });
-  }, [block, router]);
-
-  return ref;
+  return useIntersectionObserver(observerCallback, { sensitivity: 1 });
 }

package/src/services/BlockRouter/useBlockRouterProvider.ts

@@ -1,41 +1,35 @@
 import { useEffect, useRef } from '@redneckz/uni-jsx/lib/hooks';
+import { useRouter } from '../../hooks/useRouter';
 import type { BlockDef } from '../../model/ContentPageDef';
 import { debounce } from '../../utils/debounce';
-import { BlockRouter } from './BlockRouter';
+import { trackBlock } from './BlockRouter';
+import { blockRouterEventBus } from './blockRouterEventBus';
 import { findActiveBlock } from './findActiveBlock';
 
 const isScrolledEnough = () => globalThis.scrollY > (globalThis.innerHeight * 3) / 4;
 
-export function useBlockRouterProvider(
-  router: BlockRouter = BlockRouter.inst,
-  scrollTarget: EventTarget = globalThis,
-) {
+export function useBlockRouterProvider(scrollTarget: EventTarget = globalThis) {
+  const router = useRouter();
+
   const intersectionsMapRef = useRef<Map<BlockDef, IntersectionObserverEntry>>(new Map());
 
   useEffect(
     () =>
-      router.eventBus.subscribe('intersection', ({ block, intersection }) => {
+      blockRouterEventBus.subscribe('intersection', ({ block, intersection }) => {
         if (intersectionsMapRef.current) {
           intersectionsMapRef.current.set(block, intersection);
         }
       }),
-    [router],
+    [],
   );
 
   useEffect(() => {
     const handleScroll = debounce(() => {
-      if (!isScrolledEnough()) {
-        router.reset();
-
-        return;
-      }
-
-      const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
-
-      if (activeBlock?.anchor) {
-        router.replace(activeBlock.anchor);
-      } else if (!activeBlock) {
-        router.reset();
+      if (isScrolledEnough()) {
+        const activeBlock = findActiveBlock([...(intersectionsMapRef.current || [])]);
+        trackBlock(router, activeBlock);
+      } else {
+        trackBlock(router);
       }
     }, 100);
 

package/src/ui-kit/BlockWrapper.tsx

@@ -1,6 +1,6 @@
 import { JSX } from '@redneckz/uni-jsx';
 import { useEffect, useState } from '@redneckz/uni-jsx/lib/hooks';
-import { EventBus } from '../EventBus/EventBus';
+import { defaultEventBus } from '../EventBus/defaultEventBus';
 import type { BlockVersion } from '../model/BlockVersion';
 import type { UniBlockProps } from '../model/JSXBlock';
 import { useBlockIntersectionObserver } from '../services/BlockRouter/useBlockIntersectionObserver';
@@ -28,7 +28,7 @@ export const BlockWrapper = JSX<BlockWrapperProps>(
     const [isVisible, setVisible] = useState(true);
     useEffect(
       () =>
-        EventBus.inst.subscribe('tab', (event) => {
+        defaultEventBus.subscribe('tab', (event) => {
           if (event.type === 'group') {
             const hasSettings = block?.labels?.length || block?.anchor;
             setVisible(

package/bundle/EventBus/EventMap.d.ts

@@ -1,4 +0,0 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
-export interface EventMap {
-    tab: TabActivationEvent;
-}

package/bundle/services/BlockRouter/useBlockRouter.d.ts

@@ -1,2 +0,0 @@
-import { BlockRouter } from './BlockRouter';
-export declare function useBlockRouter(): BlockRouter;

package/dist/EventBus/EventMap.d.ts

@@ -1,4 +0,0 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
-export interface EventMap {
-    tab: TabActivationEvent;
-}

package/dist/EventBus/EventMap.js

@@ -1,2 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=EventMap.js.map

package/dist/EventBus/EventMap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EventMap.js","sourceRoot":"","sources":["../../src/EventBus/EventMap.ts"],"names":[],"mappings":""}

package/dist/services/BlockRouter/useBlockRouter.d.ts

@@ -1,2 +0,0 @@
-import { BlockRouter } from './BlockRouter';
-export declare function useBlockRouter(): BlockRouter;

package/dist/services/BlockRouter/useBlockRouter.js

@@ -1,8 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBlockRouter = void 0;
-const BlockRouter_1 = require("./BlockRouter");
-function useBlockRouter() {
-    return BlockRouter_1.BlockRouter.inst;
-}
-exports.useBlockRouter = useBlockRouter;
-//# sourceMappingURL=useBlockRouter.js.map

package/dist/services/BlockRouter/useBlockRouter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBlockRouter.js","sourceRoot":"","sources":["../../../src/services/BlockRouter/useBlockRouter.ts"],"names":[],"mappings":";;AAAA,+CAA4C;AAE5C,SAAgB,cAAc;IAC5B,OAAO,yBAAW,CAAC,IAAI,CAAC;AAC1B,CAAC;AAFD,wCAEC"}

package/lib/EventBus/EventMap.d.ts

@@ -1,4 +0,0 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
-export interface EventMap {
-    tab: TabActivationEvent;
-}

package/lib/EventBus/EventMap.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=EventMap.js.map

package/lib/EventBus/EventMap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EventMap.js","sourceRoot":"","sources":["../../src/EventBus/EventMap.ts"],"names":[],"mappings":""}

package/lib/services/BlockRouter/useBlockRouter.d.ts

@@ -1,2 +0,0 @@
-import { BlockRouter } from './BlockRouter';
-export declare function useBlockRouter(): BlockRouter;

package/lib/services/BlockRouter/useBlockRouter.js

@@ -1,5 +0,0 @@
-import { BlockRouter } from './BlockRouter.js';
-export function useBlockRouter() {
-    return BlockRouter.inst;
-}
-//# sourceMappingURL=useBlockRouter.js.map

package/lib/services/BlockRouter/useBlockRouter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBlockRouter.js","sourceRoot":"","sources":["../../../src/services/BlockRouter/useBlockRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,UAAU,cAAc;IAC5B,OAAO,WAAW,CAAC,IAAI,CAAC;AAC1B,CAAC"}

package/mobile/bundle/EventBus/EventMap.d.ts

@@ -1,4 +0,0 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
-export interface EventMap {
-    tab: TabActivationEvent;
-}

package/mobile/bundle/services/BlockRouter/useBlockRouter.d.ts

@@ -1,2 +0,0 @@
-import { BlockRouter } from './BlockRouter';
-export declare function useBlockRouter(): BlockRouter;

package/mobile/dist/EventBus/EventMap.d.ts

@@ -1,4 +0,0 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
-export interface EventMap {
-    tab: TabActivationEvent;
-}

package/mobile/dist/EventBus/EventMap.js

@@ -1,2 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=EventMap.js.map

package/mobile/dist/EventBus/EventMap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EventMap.js","sourceRoot":"","sources":["../../src/EventBus/EventMap.ts"],"names":[],"mappings":""}

package/mobile/dist/services/BlockRouter/useBlockRouter.d.ts

@@ -1,2 +0,0 @@
-import { BlockRouter } from './BlockRouter';
-export declare function useBlockRouter(): BlockRouter;

package/mobile/dist/services/BlockRouter/useBlockRouter.js

@@ -1,8 +0,0 @@
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBlockRouter = void 0;
-const BlockRouter_1 = require("./BlockRouter");
-function useBlockRouter() {
-    return BlockRouter_1.BlockRouter.inst;
-}
-exports.useBlockRouter = useBlockRouter;
-//# sourceMappingURL=useBlockRouter.js.map

package/mobile/dist/services/BlockRouter/useBlockRouter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBlockRouter.js","sourceRoot":"","sources":["../../../src/services/BlockRouter/useBlockRouter.ts"],"names":[],"mappings":";;AAAA,+CAA4C;AAE5C,SAAgB,cAAc;IAC5B,OAAO,yBAAW,CAAC,IAAI,CAAC;AAC1B,CAAC;AAFD,wCAEC"}

package/mobile/lib/EventBus/EventMap.d.ts

@@ -1,4 +0,0 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
-export interface EventMap {
-    tab: TabActivationEvent;
-}

package/mobile/lib/EventBus/EventMap.js

@@ -1,2 +0,0 @@
-export {};
-//# sourceMappingURL=EventMap.js.map

package/mobile/lib/EventBus/EventMap.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"EventMap.js","sourceRoot":"","sources":["../../src/EventBus/EventMap.ts"],"names":[],"mappings":""}

package/mobile/lib/services/BlockRouter/useBlockRouter.d.ts

@@ -1,2 +0,0 @@
-import { BlockRouter } from './BlockRouter';
-export declare function useBlockRouter(): BlockRouter;

package/mobile/lib/services/BlockRouter/useBlockRouter.js

@@ -1,5 +0,0 @@
-import { BlockRouter } from './BlockRouter.js';
-export function useBlockRouter() {
-    return BlockRouter.inst;
-}
-//# sourceMappingURL=useBlockRouter.js.map

package/mobile/lib/services/BlockRouter/useBlockRouter.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useBlockRouter.js","sourceRoot":"","sources":["../../../src/services/BlockRouter/useBlockRouter.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,MAAM,UAAU,cAAc;IAC5B,OAAO,WAAW,CAAC,IAAI,CAAC;AAC1B,CAAC"}

package/mobile/src/EventBus/EventMap.ts

@@ -1,5 +0,0 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
-
-export interface EventMap {
-  tab: TabActivationEvent;
-}

package/mobile/src/services/BlockRouter/useBlockRouter.ts

@@ -1,5 +0,0 @@
-import { BlockRouter } from './BlockRouter';
-
-export function useBlockRouter(): BlockRouter {
-  return BlockRouter.inst;
-}

package/src/EventBus/EventMap.ts

@@ -1,5 +0,0 @@
-import type { TabActivationEvent } from '../components/Tabs/Tabs';
-
-export interface EventMap {
-  tab: TabActivationEvent;
-}

package/src/services/BlockRouter/useBlockRouter.ts

@@ -1,5 +0,0 @@
-import { BlockRouter } from './BlockRouter';
-
-export function useBlockRouter(): BlockRouter {
-  return BlockRouter.inst;
-}