@neveranyart/weaver 1.0.12 → 1.0.14

package/README.md

@@ -6,146 +6,15 @@ An in-house core package by neveranyart for making performant, interactive React
 
 ![neverany branding](https://github.com/user-attachments/assets/8c09234f-d592-4adc-8ab1-284b1fca3f7c)
 
-
 ## Introduction
-This package is published as an in-depth on `neverany` technicals. This package is not intended for broad usage so it has a strict choice of dependencies and a specific way of use.
-
-## Usage
-
-### Routing
-The package wraps around `react-router` as a base for working with routing because it provides us a way to postpone parent components mounting.
-
-There are 2 components for composing delayed routing for animations: `DelayedOutlet`, `Pipeline`.
-
-- `DelayedOutlet`:
-  - Drop-in replacement for `Outlet` component from `react-router`.
-- `Pipeline`:
-  - Declare parent for an endpoint, handle route changes and communicates with `DelayedOutlet`.
-  - As long as it's the ONLY instance on the route endpoint, it should works just fine.
-  - Can be placed anywhere, but please put it as a parent for all of your endpoint's components.
-  - It can't nest itself.
-
-> [!CAUTION]
-> There can only be ONE `DelayedOutlet` per app and ONE `Pipeline` per parent path.
-
-Other than that, just use `react-router` like intended. `weaver/routing` has especially tested against going back and forth rapidly and works flawlessly in strict mode, so you don't have to think about the logic behind it!
-
-While the route is delayed, the previous route is still displayed to ensure a smooth tranition to your likings.
-
-Example usage with 2 endpoints, router delayed for `500ms`:
-
-```tsx
-import { DelayedOutlet, Pipeline } from '@neveranyart/weaver/routing';
-import { StrictMode, Suspense } from 'react';
-import { createRoot } from 'react-dom/client';
-import { createBrowserRouter, Link, RouterProvider } from 'react-router';
-
-function Root() {
-  return (
-    <main>
-      <DelayedOutlet delay={500} />
-    </main>
-  );
-}
-
-function Home() {
-  return (
-    <Pipeline title={'Home'} debugName={'Home'}>
-      <p>Home</p>
-      <Link to="/projects">Navigate</Link>
-    </Pipeline>
-  );
-}
-
-const router = createBrowserRouter([
-  {
-    path: '/',
-    element: <Root />,
-    children: [
-      {
-        index: true,
-        element: (
-          <Suspense>
-            <Home />
-          </Suspense>
-        ),
-      },
-      {
-        path: '/projects/*',
-        element: (
-          <Suspense>
-            <Pipeline title={'Projects'} debugName={'Projects'}>
-              <p>Projects</p>
-              <Link to="/">Navigate</Link>
-            </Pipeline>
-          </Suspense>
-        ),
-      },
-    ],
-  },
-]);
-
-createRoot(document.getElementById('root')!).render(
-  <StrictMode>
-    <RouterProvider router={router} />
-  </StrictMode>
-);
-```
-
-`weaver/routing` also provides a quick way to react to state changes with a cool hook called `useWeaverState`. Containing 4 states for you to play with:
-
-```ts
-const pageRendered = useWeaverState('pageRendered');
-const activePipeline = useWeaverState('activePipeline');
-const activeParent = useWeaverState('activeParent');
-const navigating = useWeaverState('navigating');
-```
-
-When a route change happens, this is how states in `weaver/routing` changes when a route change is successful:
-
-`+`: Other events/information.
-`!`: State changes.
-
-```
-+ Current `Pipeline` path: "/""
-! pageRendered -> false, navigating -> true.
-+ Receives new parent.
-  + Delay route change.
-+ Set new `Pipeline`.
-  + `Pipeline` path "/" start unmounting process.
-  + New `Pipeline` path: "/projects".
-    ! activePipeline -> "/projects".
-! navigating -> false.
-+ New `Pipeline` start mounting process.
-  ! pageRendered -> true, activeParent -> "/projects".
-```
-
-When a route change is cancelled by user going back mid delay:
-
-```
-+ Current `Pipeline` path: "/""
-! pageRendered -> false, navigating -> true.
-+ Receives new parent.
-  + Delay route change.
-+ User cancelled.
-! pageRendered -> true, navigating -> false.
-```
-
-Overall:
-- `pageRendered` covers the whole routing process. It is the recommended way of knowing if the content is ready to be displayed or not.
-- `activePipeline` is for knowing which Pipeline has taken over previous one.
-- `activeParent` tells which Pipeline has delivered its components on screen.
-- `navigating` tells when `DelayedOutlet` handles routing.
-
-### Hooks
-`weaver` provides a reasonable amount of DOM hooks, intensive hooks will only allow callbacks usage to avoid React re-render.
+This package is published as an in-depth on `neverany` technicals. It is not intended for broad usage so it has a strict choice of dependencies and a specific way of use.
 
-### Scene
+But, most components and tools are built with flexibility in mind, providing a balance between abstraction and verbose.
 
+## Documentations
+1. [Routing](/docs/ROUTING.md)
+2. Hooks
+3. Scene
 
-The package comes packed with:
-- `Pipeline`, `DelayedOutlet`: CSR router handler built for transition animation, hiding initialization lags behind a wall while allowing SEO to work.
-- `BakeScene`: Wait and notify when a 3D scene has finished rendering and ready to be shown, usually paired with `Pipeline`.
-- `Orbit`: ResizeObserver & IntersectionObserver simplified.
-- `SceneSync`: Sync `@react-three/fiber` scene with DOM element.
-- And a big directory of DOM hooks.
+## About copyleft license
+This project is relatively new, we'll consider switching to a more permissive license when the project is mature enough.

package/dist/routing.d.mts

@@ -51,6 +51,12 @@ interface PipelineProps {
      * Title for the page.
      */
     title: string;
+    /**
+     * This is crucial for different `Pipeline`s to differentiate each other and avoiding conflict.
+     *
+     * Example for parent path: `/`, `/about`, `/projects`,...
+     */
+    parentPath: string;
     /**
      * If provided, `Pipeline` will log the current phase to console.
      */

package/dist/routing.d.ts

@@ -51,6 +51,12 @@ interface PipelineProps {
      * Title for the page.
      */
     title: string;
+    /**
+     * This is crucial for different `Pipeline`s to differentiate each other and avoiding conflict.
+     *
+     * Example for parent path: `/`, `/about`, `/projects`,...
+     */
+    parentPath: string;
     /**
      * If provided, `Pipeline` will log the current phase to console.
      */

package/dist/routing.js

@@ -169,11 +169,7 @@ var weaverSetup = new WeaverSetup();
 // src/routing/Pipeline.tsx
 function Pipeline(props) {
   const { children, ...restOfProps } = props;
-  const parentPath = (0, import_react5.useMemo)(
-    () => getParentRoute(window.location.pathname),
-    []
-  );
-  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(RouteHandler, { ...restOfProps, parentPath }), children);
+  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, /* @__PURE__ */ import_react5.default.createElement(RouteHandler, { ...restOfProps }), children);
 }
 function RouteHandler(props) {
   const navigating = useWeaverContext((state) => state.navigating);
@@ -184,7 +180,14 @@ function RouteHandler(props) {
   );
   const setPageRendered = useWeaverContext((state) => state.setPageRendered);
   const setActiveParent = useWeaverContext((state) => state.setActiveParent);
-  const loopWatcher = (0, import_react5.useCallback)(() => {
+  (0, import_react5.useLayoutEffect)(() => {
+    document.title = props.title;
+    setActivePipeline(props.parentPath);
+    if (props.contentReady !== void 0 && !props.contentReady) {
+      if (props.debugName)
+        console.log(`[${props.debugName}] Renderer status: Loading scene`);
+      return;
+    }
     if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {
       if (props.lenisUsage === void 0 || props.lenisUsage) {
         weaverSetup._lenisInstance?.start();
@@ -196,33 +199,16 @@ function RouteHandler(props) {
     }
   }, [
     activeParent,
+    setActivePipeline,
     navigating,
     pageRendered,
     props.lenisUsage,
-    props.debugName,
-    props.parentPath,
-    setActiveParent,
-    setPageRendered
-  ]);
-  (0, import_react5.useLayoutEffect)(() => {
-    document.title = props.title;
-    setActivePipeline(props.parentPath);
-    if (props.contentReady !== void 0 && !props.contentReady) {
-      if (props.debugName)
-        console.log(`[${props.debugName}] Renderer status: Loading scene`);
-      return;
-    }
-    const loopWatcherTask = setInterval(loopWatcher, 32);
-    return () => {
-      clearInterval(loopWatcherTask);
-    };
-  }, [
-    setActivePipeline,
     props.contentReady,
     props.debugName,
     props.parentPath,
     props.title,
-    loopWatcher
+    setActiveParent,
+    setPageRendered
   ]);
   useLayoutEffectOnce(() => {
     return () => {

package/dist/routing.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/routing/index.ts","../src/routing/context.ts","../src/routing/DelayedOutlet.tsx","../src/hooks/routeNormalizer.ts","../src/utils/getParentRoute.ts","../src/routing/Pipeline.tsx","../src/hooks/effectOnce.ts","../src/setup.ts"],"sourcesContent":["import { useWeaverContext, WeaverContextGetter } from './context';\nimport DelayedOutlet from './DelayedOutlet';\nimport Pipeline from './Pipeline';\n\n/// A read-only state for reacting with changes reflected by weaver.\nexport const useWeaverState = (givenState: keyof WeaverContextGetter) => {\n  const state = useWeaverContext((state) => state[givenState]);\n  return state;\n};\n\nexport { DelayedOutlet, Pipeline };\n","import { create } from 'zustand/react';\n\nexport interface WeaverContextGetter {\n  /**\n   * Current active parent, **AFTER** Pipeline has finished rendering, so the `activeParent`\n   * will be delayed. Example: \"/\", \"/works\",...\n   */\n  activeParent: string;\n\n  /**\n   * Current active Pipeline. Example: \"/\", \"/works\",...\n   *\n   * This is **not based on URL**, it's based on which `Pipeline` has access to the the site.\n   */\n  activePipeline: string;\n\n  /**\n   * `DelayedOutlet` special variable, indicating if the route is current transitioning to a new route or not.\n   */\n  navigating: boolean;\n\n  /**\n   * When the page is rendered, it will turns this to true,\n   * any parent page navigation will causes this to goes false, set to false in `DelayedOulet`.\n   *\n   * It's set to `false` right after `navigating` is set to `true`. `true` statement will be handled by `Pipeline`.\n   */\n  pageRendered: boolean;\n}\n\ninterface WeaverContextSetter {\n  setActiveParent: (activeParent: string) => void;\n  setActivePipeline: (activePipeline: string) => void;\n  setNavigating: (navigating: boolean) => void;\n  setPageRendered: (pageRendered: boolean) => void;\n}\n\nexport const useWeaverContext = create<\n  WeaverContextSetter & WeaverContextGetter\n>()((set) => ({\n  activeParent: '',\n  setActiveParent: (activeParent) => set({ activeParent }),\n\n  activePipeline: '',\n  setActivePipeline: (activePipeline) => set({ activePipeline }),\n\n  navigating: true,\n  setNavigating: (navigating) => set({ navigating }),\n\n  pageRendered: false,\n  setPageRendered: (pageRendered) => set({ pageRendered }),\n}));\n","import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport { useOutlet } from 'react-router';\nimport { useRouteNormalizer } from '../hooks/routeNormalizer';\nimport { getParentRoute } from '../utils/getParentRoute';\nimport { useWeaverContext } from './context';\n\n/**\n * A core part of an in-house tool called `weaver`.\n *\n * Delaying the routing process from `react-router`, handles gracefully between `Pipeline`s\n * while allowing any loading fallback component to listen and react with event changes.\n */\nexport default function DelayedOutlet(props: { delay: number }) {\n  // Middleware to detect and replace invalid url.\n  useRouteNormalizer({ autoReplace: true });\n\n  const activePipeline = useWeaverContext((state) => state.activePipeline);\n  const setNavigating = useWeaverContext((state) => state.setNavigating);\n  const setPageRendered = useWeaverContext((state) => state.setPageRendered);\n\n  const renderPageTask = useRef(setTimeout(() => {}));\n  const routerOutlet = useOutlet();\n\n  const [renderer, setRenderer] = useState<ReactNode>(null);\n\n  // Handle and update new parent page.\n  useLayoutEffect(() => {\n    /**\n     * `pageRendered` should be outside of `renderPageTask`,\n     * we alrady have `Pipeline` to correct errors.\n     */\n    if ('scrollRestoration' in history) {\n      history.scrollRestoration = 'manual';\n    }\n\n    if (getParentRoute(window.location.pathname) === activePipeline) {\n      // Avoid while changing page, cancelling before new page pushed in\n      // cause `activePipeline` to not change, making `navigating` softlock.\n      setNavigating(false);\n      return;\n    }\n\n    setNavigating(true);\n    setPageRendered(false);\n\n    clearTimeout(renderPageTask.current);\n    renderPageTask.current = setTimeout(() => {\n      setRenderer(routerOutlet!);\n      setNavigating(false);\n    }, props.delay);\n\n    return () => {\n      /**\n       * Clear invalid task that were scheduled last effect.\n       */\n      clearInterval(renderPageTask.current);\n    };\n  }, [\n    activePipeline,\n    props.delay,\n    routerOutlet,\n    setNavigating,\n    setPageRendered,\n  ]);\n\n  return renderer;\n}\n","import { useCallback, useLayoutEffect } from 'react';\nimport { useLocation, useNavigate } from 'react-router';\n\nexport function useRouteNormalizer(options: { autoReplace: boolean }) {\n  const { pathname } = useLocation();\n  const navigate = useNavigate();\n\n  const normalizer = useCallback(\n    (input: string) => input.replace(/\\/+\\//g, () => '/'),\n    []\n  );\n\n  useLayoutEffect(() => {\n    const result = normalizer(pathname);\n    if (options.autoReplace && result !== pathname) {\n      window.location.replace(result);\n    }\n  }, [options.autoReplace, pathname, navigate, normalizer]);\n\n  return {\n    pathname,\n    normalizer,\n  };\n}\n","export function getParentRoute(pathname: string) {\n  let slashes = 0;\n  let sliceAt = 0;\n  for (sliceAt; sliceAt < pathname.length; sliceAt++) {\n    if (pathname[sliceAt] == '/') {\n      slashes++;\n    }\n    if (slashes === 2) {\n      break;\n    }\n  }\n\n  return pathname.slice(0, sliceAt);\n}\n","import React, {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  type ReactNode,\n} from 'react';\nimport { useLayoutEffectOnce } from '../hooks/effectOnce';\nimport { weaverSetup } from '../setup';\nimport { getParentRoute } from '../utils/getParentRoute';\nimport { useWeaverContext } from './context';\n\ninterface PipelineProps {\n  children?: ReactNode;\n\n  /**\n   * A state switch to notifies `Pipeline` that the content and elements of the page is ready to be displayed.\n   *\n   * Usually, you will need to preload some other external sources, or initialize 3D scene, this state\n   * make sure that the loading fallback doesn't mess up and show initializing stuff.\n   *\n   * Using `BakeScene`, you can ensure that the scene is loaded via its callback, you can then pass the state value that\n   * `BakeScene` changes to this variable to hide all the lags behind loading screen.\n   */\n  contentReady?: boolean;\n\n  /**\n   * Title for the page.\n   */\n  title: string;\n\n  /**\n   * If provided, `Pipeline` will log the current phase to console.\n   */\n  debugName?: string;\n\n  /**\n   * This is the only feature where weaver will use lenis to directly manipulate scrolling behaviour.\n   *\n   * By default, this value is `true` when a lenis instance is provided.\n   *\n   * `Pipeline` will stop and start lenis automatically when this variable is `true`.\n   *\n   * Disable this feature to gains complete control over lenis when mounting/unmounting to handle however you want.\n   */\n  lenisUsage?: boolean;\n}\n\n/**\n * A core part of an in-house tool called `weaver`.\n *\n * `Pipeline`: Notifies & reflect changes to/from `LoadingFallback`\n * and `DelayedOutlet` about its page loading status.\n *\n * All parent routes must have `Pipeline` in order to work and sync with `DelayedOutlet`.\n */\nexport default function Pipeline(props: PipelineProps) {\n  const { children, ...restOfProps } = props;\n  const parentPath = useMemo(\n    () => getParentRoute(window.location.pathname),\n    []\n  );\n\n  return (\n    <>\n      <RouteHandler {...restOfProps} parentPath={parentPath} />\n      {children}\n    </>\n  );\n}\n\nfunction RouteHandler(\n  props: Omit<PipelineProps, 'children'> & { parentPath: string }\n) {\n  const navigating = useWeaverContext((state) => state.navigating);\n  const pageRendered = useWeaverContext((state) => state.pageRendered);\n  const activeParent = useWeaverContext((state) => state.activeParent);\n\n  const setActivePipeline = useWeaverContext(\n    (state) => state.setActivePipeline\n  );\n  const setPageRendered = useWeaverContext((state) => state.setPageRendered);\n  const setActiveParent = useWeaverContext((state) => state.setActiveParent);\n\n  const loopWatcher = useCallback(() => {\n    if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {\n      if (props.lenisUsage === undefined || props.lenisUsage) {\n        weaverSetup._lenisInstance?.start();\n      }\n\n      setPageRendered(true);\n      setActiveParent(props.parentPath);\n\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Mounted`);\n    }\n  }, [\n    activeParent,\n    navigating,\n    pageRendered,\n    props.lenisUsage,\n    props.debugName,\n    props.parentPath,\n    setActiveParent,\n    setPageRendered,\n  ]);\n\n  useLayoutEffect(() => {\n    document.title = props.title;\n    setActivePipeline(props.parentPath);\n\n    if (props.contentReady !== undefined && !props.contentReady) {\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Loading scene`);\n      return;\n    }\n\n    const loopWatcherTask = setInterval(loopWatcher, 32);\n\n    return () => {\n      clearInterval(loopWatcherTask);\n    };\n  }, [\n    setActivePipeline,\n    props.contentReady,\n    props.debugName,\n    props.parentPath,\n    props.title,\n    loopWatcher,\n  ]);\n\n  useLayoutEffectOnce(() => {\n    return () => {\n      /**\n       * When unmounted, stop lenis to pass control to another Pipline instance.\n       *\n       * The unmount process only happens when the `<LoadingFallback />` kicks in,\n       * so any visual glitches can happen in here, we can now set the scroll position to 0.\n       */\n      if (props.lenisUsage === undefined || props.lenisUsage) {\n        weaverSetup._lenisInstance?.stop();\n        weaverSetup._lenisInstance?.scrollTo(0, {\n          immediate: true,\n          force: true,\n        });\n      }\n\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Unmounted`);\n    };\n  });\n\n  return null;\n}\n","import { useEffect, useLayoutEffect } from 'react';\n\nexport function useEffectOnce(callback: React.EffectCallback) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(callback, []);\n}\n\nexport function useLayoutEffectOnce(callback: React.EffectCallback) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(callback, []);\n}\n","import Lenis from 'lenis';\nimport { ReactNode } from 'react';\n\nexport type BasicTunnelIn = ({ children }: { children: ReactNode }) => null;\n\nclass WeaverSetup {\n  /**\n   * This variable is handled internally by weaver. **Do not use**.\n   */\n  get _lenisInstance(): Lenis | undefined {\n    return (globalThis as any).__weaverLenis;\n  }\n  set _lenisInstance(val: Lenis | undefined) {\n    (globalThis as any).__weaverLenis = val;\n  }\n\n  /**\n   * This variable is handled internally by weaver. **Do not use**.\n   */\n  get _Default3DTunnelIn(): BasicTunnelIn | undefined {\n    return (globalThis as any).__weaver3DTunnel;\n  }\n  set _Default3DTunnelIn(val: BasicTunnelIn | undefined) {\n    (globalThis as any).__weaver3DTunnel = val;\n  }\n\n  setLenisInstance(instance: Lenis) {\n    this._lenisInstance = instance;\n  }\n  set3DTunnel(tunnelIn: BasicTunnelIn) {\n    this._Default3DTunnelIn = tunnelIn;\n  }\n}\n\nexport const weaverSetup = new WeaverSetup();\n"],"mappings":"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","names":["import_react","import_react_router","import_react","import_react","import_react","React","state"]}
+{"version":3,"sources":["../src/routing/index.ts","../src/routing/context.ts","../src/routing/DelayedOutlet.tsx","../src/hooks/routeNormalizer.ts","../src/utils/getParentRoute.ts","../src/routing/Pipeline.tsx","../src/hooks/effectOnce.ts","../src/setup.ts"],"sourcesContent":["import { useWeaverContext, WeaverContextGetter } from './context';\nimport DelayedOutlet from './DelayedOutlet';\nimport Pipeline from './Pipeline';\n\n/// A read-only state for reacting with changes reflected by weaver.\nexport const useWeaverState = (givenState: keyof WeaverContextGetter) => {\n  const state = useWeaverContext((state) => state[givenState]);\n  return state;\n};\n\nexport { DelayedOutlet, Pipeline };\n","import { create } from 'zustand/react';\n\nexport interface WeaverContextGetter {\n  /**\n   * Current active parent, **AFTER** Pipeline has finished rendering, so the `activeParent`\n   * will be delayed. Example: \"/\", \"/works\",...\n   */\n  activeParent: string;\n\n  /**\n   * Current active Pipeline. Example: \"/\", \"/works\",...\n   *\n   * This is **not based on URL**, it's based on which `Pipeline` has access to the the site.\n   */\n  activePipeline: string;\n\n  /**\n   * `DelayedOutlet` special variable, indicating if the route is current transitioning to a new route or not.\n   */\n  navigating: boolean;\n\n  /**\n   * When the page is rendered, it will turns this to true,\n   * any parent page navigation will causes this to goes false, set to false in `DelayedOulet`.\n   *\n   * It's set to `false` right after `navigating` is set to `true`. `true` statement will be handled by `Pipeline`.\n   */\n  pageRendered: boolean;\n}\n\ninterface WeaverContextSetter {\n  setActiveParent: (activeParent: string) => void;\n  setActivePipeline: (activePipeline: string) => void;\n  setNavigating: (navigating: boolean) => void;\n  setPageRendered: (pageRendered: boolean) => void;\n}\n\nexport const useWeaverContext = create<\n  WeaverContextSetter & WeaverContextGetter\n>()((set) => ({\n  activeParent: '',\n  setActiveParent: (activeParent) => set({ activeParent }),\n\n  activePipeline: '',\n  setActivePipeline: (activePipeline) => set({ activePipeline }),\n\n  navigating: true,\n  setNavigating: (navigating) => set({ navigating }),\n\n  pageRendered: false,\n  setPageRendered: (pageRendered) => set({ pageRendered }),\n}));\n","import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport { useOutlet } from 'react-router';\nimport { useRouteNormalizer } from '../hooks/routeNormalizer';\nimport { getParentRoute } from '../utils/getParentRoute';\nimport { useWeaverContext } from './context';\n\n/**\n * A core part of an in-house tool called `weaver`.\n *\n * Delaying the routing process from `react-router`, handles gracefully between `Pipeline`s\n * while allowing any loading fallback component to listen and react with event changes.\n */\nexport default function DelayedOutlet(props: { delay: number }) {\n  // Middleware to detect and replace invalid url.\n  useRouteNormalizer({ autoReplace: true });\n\n  const activePipeline = useWeaverContext((state) => state.activePipeline);\n  const setNavigating = useWeaverContext((state) => state.setNavigating);\n  const setPageRendered = useWeaverContext((state) => state.setPageRendered);\n\n  const renderPageTask = useRef(setTimeout(() => {}));\n  const routerOutlet = useOutlet();\n\n  const [renderer, setRenderer] = useState<ReactNode>(null);\n\n  // Handle and update new parent page.\n  useLayoutEffect(() => {\n    /**\n     * `pageRendered` should be outside of `renderPageTask`,\n     * we alrady have `Pipeline` to correct errors.\n     */\n    if ('scrollRestoration' in history) {\n      history.scrollRestoration = 'manual';\n    }\n\n    if (getParentRoute(window.location.pathname) === activePipeline) {\n      // Avoid while changing page, cancelling before new page pushed in\n      // cause `activePipeline` to not change, making `navigating` softlock.\n      setNavigating(false);\n      return;\n    }\n\n    setNavigating(true);\n    setPageRendered(false);\n\n    clearTimeout(renderPageTask.current);\n    renderPageTask.current = setTimeout(() => {\n      setRenderer(routerOutlet!);\n      setNavigating(false);\n    }, props.delay);\n\n    return () => {\n      /**\n       * Clear invalid task that were scheduled last effect.\n       */\n      clearInterval(renderPageTask.current);\n    };\n  }, [\n    activePipeline,\n    props.delay,\n    routerOutlet,\n    setNavigating,\n    setPageRendered,\n  ]);\n\n  return renderer;\n}\n","import { useCallback, useLayoutEffect } from 'react';\nimport { useLocation, useNavigate } from 'react-router';\n\nexport function useRouteNormalizer(options: { autoReplace: boolean }) {\n  const { pathname } = useLocation();\n  const navigate = useNavigate();\n\n  const normalizer = useCallback(\n    (input: string) => input.replace(/\\/+\\//g, () => '/'),\n    []\n  );\n\n  useLayoutEffect(() => {\n    const result = normalizer(pathname);\n    if (options.autoReplace && result !== pathname) {\n      window.location.replace(result);\n    }\n  }, [options.autoReplace, pathname, navigate, normalizer]);\n\n  return {\n    pathname,\n    normalizer,\n  };\n}\n","export function getParentRoute(pathname: string) {\n  let slashes = 0;\n  let sliceAt = 0;\n  for (sliceAt; sliceAt < pathname.length; sliceAt++) {\n    if (pathname[sliceAt] == '/') {\n      slashes++;\n    }\n    if (slashes === 2) {\n      break;\n    }\n  }\n\n  return pathname.slice(0, sliceAt);\n}\n","import React, { useLayoutEffect, type ReactNode } from 'react';\nimport { useLayoutEffectOnce } from '../hooks/effectOnce';\nimport { weaverSetup } from '../setup';\nimport { useWeaverContext } from './context';\n\ninterface PipelineProps {\n  children?: ReactNode;\n\n  /**\n   * A state switch to notifies `Pipeline` that the content and elements of the page is ready to be displayed.\n   *\n   * Usually, you will need to preload some other external sources, or initialize 3D scene, this state\n   * make sure that the loading fallback doesn't mess up and show initializing stuff.\n   *\n   * Using `BakeScene`, you can ensure that the scene is loaded via its callback, you can then pass the state value that\n   * `BakeScene` changes to this variable to hide all the lags behind loading screen.\n   */\n  contentReady?: boolean;\n\n  /**\n   * Title for the page.\n   */\n  title: string;\n\n  /**\n   * This is crucial for different `Pipeline`s to differentiate each other and avoiding conflict.\n   *\n   * Example for parent path: `/`, `/about`, `/projects`,...\n   */\n  parentPath: string;\n\n  /**\n   * If provided, `Pipeline` will log the current phase to console.\n   */\n  debugName?: string;\n\n  /**\n   * This is the only feature where weaver will use lenis to directly manipulate scrolling behaviour.\n   *\n   * By default, this value is `true` when a lenis instance is provided.\n   *\n   * `Pipeline` will stop and start lenis automatically when this variable is `true`.\n   *\n   * Disable this feature to gains complete control over lenis when mounting/unmounting to handle however you want.\n   */\n  lenisUsage?: boolean;\n}\n\n/**\n * A core part of an in-house tool called `weaver`.\n *\n * `Pipeline`: Notifies & reflect changes to/from `LoadingFallback`\n * and `DelayedOutlet` about its page loading status.\n *\n * All parent routes must have `Pipeline` in order to work and sync with `DelayedOutlet`.\n */\nexport default function Pipeline(props: PipelineProps) {\n  const { children, ...restOfProps } = props;\n\n  return (\n    <>\n      <RouteHandler {...restOfProps} />\n      {children}\n    </>\n  );\n}\n\nfunction RouteHandler(props: Omit<PipelineProps, 'children'>) {\n  const navigating = useWeaverContext((state) => state.navigating);\n  const pageRendered = useWeaverContext((state) => state.pageRendered);\n  const activeParent = useWeaverContext((state) => state.activeParent);\n\n  const setActivePipeline = useWeaverContext(\n    (state) => state.setActivePipeline\n  );\n  const setPageRendered = useWeaverContext((state) => state.setPageRendered);\n  const setActiveParent = useWeaverContext((state) => state.setActiveParent);\n\n  useLayoutEffect(() => {\n    document.title = props.title;\n    setActivePipeline(props.parentPath);\n\n    if (props.contentReady !== undefined && !props.contentReady) {\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Loading scene`);\n      return;\n    }\n\n    if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {\n      if (props.lenisUsage === undefined || props.lenisUsage) {\n        weaverSetup._lenisInstance?.start();\n      }\n\n      setPageRendered(true);\n      setActiveParent(props.parentPath);\n\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Mounted`);\n    }\n  }, [\n    activeParent,\n    setActivePipeline,\n    navigating,\n    pageRendered,\n    props.lenisUsage,\n    props.contentReady,\n    props.debugName,\n    props.parentPath,\n    props.title,\n    setActiveParent,\n    setPageRendered,\n  ]);\n\n  useLayoutEffectOnce(() => {\n    return () => {\n      /**\n       * When unmounted, stop lenis to pass control to another Pipline instance.\n       *\n       * The unmount process only happens when the `<LoadingFallback />` kicks in,\n       * so any visual glitches can happen in here, we can now set the scroll position to 0.\n       */\n      if (props.lenisUsage === undefined || props.lenisUsage) {\n        weaverSetup._lenisInstance?.stop();\n        weaverSetup._lenisInstance?.scrollTo(0, {\n          immediate: true,\n          force: true,\n        });\n      }\n\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Unmounted`);\n    };\n  });\n\n  return null;\n}\n","import { useEffect, useLayoutEffect } from 'react';\n\nexport function useEffectOnce(callback: React.EffectCallback) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(callback, []);\n}\n\nexport function useLayoutEffectOnce(callback: React.EffectCallback) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(callback, []);\n}\n","import Lenis from 'lenis';\nimport { ReactNode } from 'react';\n\nexport type BasicTunnelIn = ({ children }: { children: ReactNode }) => null;\n\nclass WeaverSetup {\n  /**\n   * This variable is handled internally by weaver. **Do not use**.\n   */\n  get _lenisInstance(): Lenis | undefined {\n    return (globalThis as any).__weaverLenis;\n  }\n  set _lenisInstance(val: Lenis | undefined) {\n    (globalThis as any).__weaverLenis = val;\n  }\n\n  /**\n   * This variable is handled internally by weaver. **Do not use**.\n   */\n  get _Default3DTunnelIn(): BasicTunnelIn | undefined {\n    return (globalThis as any).__weaver3DTunnel;\n  }\n  set _Default3DTunnelIn(val: BasicTunnelIn | undefined) {\n    (globalThis as any).__weaver3DTunnel = val;\n  }\n\n  setLenisInstance(instance: Lenis) {\n    this._lenisInstance = instance;\n  }\n  set3DTunnel(tunnelIn: BasicTunnelIn) {\n    this._Default3DTunnelIn = tunnelIn;\n  }\n}\n\nexport const weaverSetup = new WeaverSetup();\n"],"mappings":"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","names":["import_react","import_react_router","import_react","import_react","import_react","React","state"]}

package/dist/routing.mjs

@@ -91,11 +91,7 @@ function DelayedOutlet(props) {
 }
 
 // src/routing/Pipeline.tsx
-import React, {
-  useCallback as useCallback2,
-  useLayoutEffect as useLayoutEffect4,
-  useMemo
-} from "react";
+import React, { useLayoutEffect as useLayoutEffect4 } from "react";
 
 // src/hooks/effectOnce.ts
 import { useEffect, useLayoutEffect as useLayoutEffect3 } from "react";
@@ -135,11 +131,7 @@ var weaverSetup = new WeaverSetup();
 // src/routing/Pipeline.tsx
 function Pipeline(props) {
   const { children, ...restOfProps } = props;
-  const parentPath = useMemo(
-    () => getParentRoute(window.location.pathname),
-    []
-  );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RouteHandler, { ...restOfProps, parentPath }), children);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RouteHandler, { ...restOfProps }), children);
 }
 function RouteHandler(props) {
   const navigating = useWeaverContext((state) => state.navigating);
@@ -150,7 +142,14 @@ function RouteHandler(props) {
   );
   const setPageRendered = useWeaverContext((state) => state.setPageRendered);
   const setActiveParent = useWeaverContext((state) => state.setActiveParent);
-  const loopWatcher = useCallback2(() => {
+  useLayoutEffect4(() => {
+    document.title = props.title;
+    setActivePipeline(props.parentPath);
+    if (props.contentReady !== void 0 && !props.contentReady) {
+      if (props.debugName)
+        console.log(`[${props.debugName}] Renderer status: Loading scene`);
+      return;
+    }
     if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {
       if (props.lenisUsage === void 0 || props.lenisUsage) {
         weaverSetup._lenisInstance?.start();
@@ -162,33 +161,16 @@ function RouteHandler(props) {
     }
   }, [
     activeParent,
+    setActivePipeline,
     navigating,
     pageRendered,
     props.lenisUsage,
-    props.debugName,
-    props.parentPath,
-    setActiveParent,
-    setPageRendered
-  ]);
-  useLayoutEffect4(() => {
-    document.title = props.title;
-    setActivePipeline(props.parentPath);
-    if (props.contentReady !== void 0 && !props.contentReady) {
-      if (props.debugName)
-        console.log(`[${props.debugName}] Renderer status: Loading scene`);
-      return;
-    }
-    const loopWatcherTask = setInterval(loopWatcher, 32);
-    return () => {
-      clearInterval(loopWatcherTask);
-    };
-  }, [
-    setActivePipeline,
     props.contentReady,
     props.debugName,
     props.parentPath,
     props.title,
-    loopWatcher
+    setActiveParent,
+    setPageRendered
   ]);
   useLayoutEffectOnce(() => {
     return () => {

package/dist/routing.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/routing/context.ts","../src/routing/DelayedOutlet.tsx","../src/hooks/routeNormalizer.ts","../src/utils/getParentRoute.ts","../src/routing/Pipeline.tsx","../src/hooks/effectOnce.ts","../src/setup.ts","../src/routing/index.ts"],"sourcesContent":["import { create } from 'zustand/react';\n\nexport interface WeaverContextGetter {\n  /**\n   * Current active parent, **AFTER** Pipeline has finished rendering, so the `activeParent`\n   * will be delayed. Example: \"/\", \"/works\",...\n   */\n  activeParent: string;\n\n  /**\n   * Current active Pipeline. Example: \"/\", \"/works\",...\n   *\n   * This is **not based on URL**, it's based on which `Pipeline` has access to the the site.\n   */\n  activePipeline: string;\n\n  /**\n   * `DelayedOutlet` special variable, indicating if the route is current transitioning to a new route or not.\n   */\n  navigating: boolean;\n\n  /**\n   * When the page is rendered, it will turns this to true,\n   * any parent page navigation will causes this to goes false, set to false in `DelayedOulet`.\n   *\n   * It's set to `false` right after `navigating` is set to `true`. `true` statement will be handled by `Pipeline`.\n   */\n  pageRendered: boolean;\n}\n\ninterface WeaverContextSetter {\n  setActiveParent: (activeParent: string) => void;\n  setActivePipeline: (activePipeline: string) => void;\n  setNavigating: (navigating: boolean) => void;\n  setPageRendered: (pageRendered: boolean) => void;\n}\n\nexport const useWeaverContext = create<\n  WeaverContextSetter & WeaverContextGetter\n>()((set) => ({\n  activeParent: '',\n  setActiveParent: (activeParent) => set({ activeParent }),\n\n  activePipeline: '',\n  setActivePipeline: (activePipeline) => set({ activePipeline }),\n\n  navigating: true,\n  setNavigating: (navigating) => set({ navigating }),\n\n  pageRendered: false,\n  setPageRendered: (pageRendered) => set({ pageRendered }),\n}));\n","import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport { useOutlet } from 'react-router';\nimport { useRouteNormalizer } from '../hooks/routeNormalizer';\nimport { getParentRoute } from '../utils/getParentRoute';\nimport { useWeaverContext } from './context';\n\n/**\n * A core part of an in-house tool called `weaver`.\n *\n * Delaying the routing process from `react-router`, handles gracefully between `Pipeline`s\n * while allowing any loading fallback component to listen and react with event changes.\n */\nexport default function DelayedOutlet(props: { delay: number }) {\n  // Middleware to detect and replace invalid url.\n  useRouteNormalizer({ autoReplace: true });\n\n  const activePipeline = useWeaverContext((state) => state.activePipeline);\n  const setNavigating = useWeaverContext((state) => state.setNavigating);\n  const setPageRendered = useWeaverContext((state) => state.setPageRendered);\n\n  const renderPageTask = useRef(setTimeout(() => {}));\n  const routerOutlet = useOutlet();\n\n  const [renderer, setRenderer] = useState<ReactNode>(null);\n\n  // Handle and update new parent page.\n  useLayoutEffect(() => {\n    /**\n     * `pageRendered` should be outside of `renderPageTask`,\n     * we alrady have `Pipeline` to correct errors.\n     */\n    if ('scrollRestoration' in history) {\n      history.scrollRestoration = 'manual';\n    }\n\n    if (getParentRoute(window.location.pathname) === activePipeline) {\n      // Avoid while changing page, cancelling before new page pushed in\n      // cause `activePipeline` to not change, making `navigating` softlock.\n      setNavigating(false);\n      return;\n    }\n\n    setNavigating(true);\n    setPageRendered(false);\n\n    clearTimeout(renderPageTask.current);\n    renderPageTask.current = setTimeout(() => {\n      setRenderer(routerOutlet!);\n      setNavigating(false);\n    }, props.delay);\n\n    return () => {\n      /**\n       * Clear invalid task that were scheduled last effect.\n       */\n      clearInterval(renderPageTask.current);\n    };\n  }, [\n    activePipeline,\n    props.delay,\n    routerOutlet,\n    setNavigating,\n    setPageRendered,\n  ]);\n\n  return renderer;\n}\n","import { useCallback, useLayoutEffect } from 'react';\nimport { useLocation, useNavigate } from 'react-router';\n\nexport function useRouteNormalizer(options: { autoReplace: boolean }) {\n  const { pathname } = useLocation();\n  const navigate = useNavigate();\n\n  const normalizer = useCallback(\n    (input: string) => input.replace(/\\/+\\//g, () => '/'),\n    []\n  );\n\n  useLayoutEffect(() => {\n    const result = normalizer(pathname);\n    if (options.autoReplace && result !== pathname) {\n      window.location.replace(result);\n    }\n  }, [options.autoReplace, pathname, navigate, normalizer]);\n\n  return {\n    pathname,\n    normalizer,\n  };\n}\n","export function getParentRoute(pathname: string) {\n  let slashes = 0;\n  let sliceAt = 0;\n  for (sliceAt; sliceAt < pathname.length; sliceAt++) {\n    if (pathname[sliceAt] == '/') {\n      slashes++;\n    }\n    if (slashes === 2) {\n      break;\n    }\n  }\n\n  return pathname.slice(0, sliceAt);\n}\n","import React, {\n  useCallback,\n  useLayoutEffect,\n  useMemo,\n  type ReactNode,\n} from 'react';\nimport { useLayoutEffectOnce } from '../hooks/effectOnce';\nimport { weaverSetup } from '../setup';\nimport { getParentRoute } from '../utils/getParentRoute';\nimport { useWeaverContext } from './context';\n\ninterface PipelineProps {\n  children?: ReactNode;\n\n  /**\n   * A state switch to notifies `Pipeline` that the content and elements of the page is ready to be displayed.\n   *\n   * Usually, you will need to preload some other external sources, or initialize 3D scene, this state\n   * make sure that the loading fallback doesn't mess up and show initializing stuff.\n   *\n   * Using `BakeScene`, you can ensure that the scene is loaded via its callback, you can then pass the state value that\n   * `BakeScene` changes to this variable to hide all the lags behind loading screen.\n   */\n  contentReady?: boolean;\n\n  /**\n   * Title for the page.\n   */\n  title: string;\n\n  /**\n   * If provided, `Pipeline` will log the current phase to console.\n   */\n  debugName?: string;\n\n  /**\n   * This is the only feature where weaver will use lenis to directly manipulate scrolling behaviour.\n   *\n   * By default, this value is `true` when a lenis instance is provided.\n   *\n   * `Pipeline` will stop and start lenis automatically when this variable is `true`.\n   *\n   * Disable this feature to gains complete control over lenis when mounting/unmounting to handle however you want.\n   */\n  lenisUsage?: boolean;\n}\n\n/**\n * A core part of an in-house tool called `weaver`.\n *\n * `Pipeline`: Notifies & reflect changes to/from `LoadingFallback`\n * and `DelayedOutlet` about its page loading status.\n *\n * All parent routes must have `Pipeline` in order to work and sync with `DelayedOutlet`.\n */\nexport default function Pipeline(props: PipelineProps) {\n  const { children, ...restOfProps } = props;\n  const parentPath = useMemo(\n    () => getParentRoute(window.location.pathname),\n    []\n  );\n\n  return (\n    <>\n      <RouteHandler {...restOfProps} parentPath={parentPath} />\n      {children}\n    </>\n  );\n}\n\nfunction RouteHandler(\n  props: Omit<PipelineProps, 'children'> & { parentPath: string }\n) {\n  const navigating = useWeaverContext((state) => state.navigating);\n  const pageRendered = useWeaverContext((state) => state.pageRendered);\n  const activeParent = useWeaverContext((state) => state.activeParent);\n\n  const setActivePipeline = useWeaverContext(\n    (state) => state.setActivePipeline\n  );\n  const setPageRendered = useWeaverContext((state) => state.setPageRendered);\n  const setActiveParent = useWeaverContext((state) => state.setActiveParent);\n\n  const loopWatcher = useCallback(() => {\n    if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {\n      if (props.lenisUsage === undefined || props.lenisUsage) {\n        weaverSetup._lenisInstance?.start();\n      }\n\n      setPageRendered(true);\n      setActiveParent(props.parentPath);\n\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Mounted`);\n    }\n  }, [\n    activeParent,\n    navigating,\n    pageRendered,\n    props.lenisUsage,\n    props.debugName,\n    props.parentPath,\n    setActiveParent,\n    setPageRendered,\n  ]);\n\n  useLayoutEffect(() => {\n    document.title = props.title;\n    setActivePipeline(props.parentPath);\n\n    if (props.contentReady !== undefined && !props.contentReady) {\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Loading scene`);\n      return;\n    }\n\n    const loopWatcherTask = setInterval(loopWatcher, 32);\n\n    return () => {\n      clearInterval(loopWatcherTask);\n    };\n  }, [\n    setActivePipeline,\n    props.contentReady,\n    props.debugName,\n    props.parentPath,\n    props.title,\n    loopWatcher,\n  ]);\n\n  useLayoutEffectOnce(() => {\n    return () => {\n      /**\n       * When unmounted, stop lenis to pass control to another Pipline instance.\n       *\n       * The unmount process only happens when the `<LoadingFallback />` kicks in,\n       * so any visual glitches can happen in here, we can now set the scroll position to 0.\n       */\n      if (props.lenisUsage === undefined || props.lenisUsage) {\n        weaverSetup._lenisInstance?.stop();\n        weaverSetup._lenisInstance?.scrollTo(0, {\n          immediate: true,\n          force: true,\n        });\n      }\n\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Unmounted`);\n    };\n  });\n\n  return null;\n}\n","import { useEffect, useLayoutEffect } from 'react';\n\nexport function useEffectOnce(callback: React.EffectCallback) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(callback, []);\n}\n\nexport function useLayoutEffectOnce(callback: React.EffectCallback) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(callback, []);\n}\n","import Lenis from 'lenis';\nimport { ReactNode } from 'react';\n\nexport type BasicTunnelIn = ({ children }: { children: ReactNode }) => null;\n\nclass WeaverSetup {\n  /**\n   * This variable is handled internally by weaver. **Do not use**.\n   */\n  get _lenisInstance(): Lenis | undefined {\n    return (globalThis as any).__weaverLenis;\n  }\n  set _lenisInstance(val: Lenis | undefined) {\n    (globalThis as any).__weaverLenis = val;\n  }\n\n  /**\n   * This variable is handled internally by weaver. **Do not use**.\n   */\n  get _Default3DTunnelIn(): BasicTunnelIn | undefined {\n    return (globalThis as any).__weaver3DTunnel;\n  }\n  set _Default3DTunnelIn(val: BasicTunnelIn | undefined) {\n    (globalThis as any).__weaver3DTunnel = val;\n  }\n\n  setLenisInstance(instance: Lenis) {\n    this._lenisInstance = instance;\n  }\n  set3DTunnel(tunnelIn: BasicTunnelIn) {\n    this._Default3DTunnelIn = tunnelIn;\n  }\n}\n\nexport const weaverSetup = new WeaverSetup();\n","import { useWeaverContext, WeaverContextGetter } from './context';\nimport DelayedOutlet from './DelayedOutlet';\nimport Pipeline from './Pipeline';\n\n/// A read-only state for reacting with changes reflected by weaver.\nexport const useWeaverState = (givenState: keyof WeaverContextGetter) => {\n  const state = useWeaverContext((state) => state[givenState]);\n  return state;\n};\n\nexport { DelayedOutlet, Pipeline };\n"],"mappings":"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","names":["useLayoutEffect","useLayoutEffect","useCallback","useLayoutEffect","useLayoutEffect","useLayoutEffect","useCallback","useLayoutEffect","state"]}
+{"version":3,"sources":["../src/routing/context.ts","../src/routing/DelayedOutlet.tsx","../src/hooks/routeNormalizer.ts","../src/utils/getParentRoute.ts","../src/routing/Pipeline.tsx","../src/hooks/effectOnce.ts","../src/setup.ts","../src/routing/index.ts"],"sourcesContent":["import { create } from 'zustand/react';\n\nexport interface WeaverContextGetter {\n  /**\n   * Current active parent, **AFTER** Pipeline has finished rendering, so the `activeParent`\n   * will be delayed. Example: \"/\", \"/works\",...\n   */\n  activeParent: string;\n\n  /**\n   * Current active Pipeline. Example: \"/\", \"/works\",...\n   *\n   * This is **not based on URL**, it's based on which `Pipeline` has access to the the site.\n   */\n  activePipeline: string;\n\n  /**\n   * `DelayedOutlet` special variable, indicating if the route is current transitioning to a new route or not.\n   */\n  navigating: boolean;\n\n  /**\n   * When the page is rendered, it will turns this to true,\n   * any parent page navigation will causes this to goes false, set to false in `DelayedOulet`.\n   *\n   * It's set to `false` right after `navigating` is set to `true`. `true` statement will be handled by `Pipeline`.\n   */\n  pageRendered: boolean;\n}\n\ninterface WeaverContextSetter {\n  setActiveParent: (activeParent: string) => void;\n  setActivePipeline: (activePipeline: string) => void;\n  setNavigating: (navigating: boolean) => void;\n  setPageRendered: (pageRendered: boolean) => void;\n}\n\nexport const useWeaverContext = create<\n  WeaverContextSetter & WeaverContextGetter\n>()((set) => ({\n  activeParent: '',\n  setActiveParent: (activeParent) => set({ activeParent }),\n\n  activePipeline: '',\n  setActivePipeline: (activePipeline) => set({ activePipeline }),\n\n  navigating: true,\n  setNavigating: (navigating) => set({ navigating }),\n\n  pageRendered: false,\n  setPageRendered: (pageRendered) => set({ pageRendered }),\n}));\n","import { type ReactNode, useLayoutEffect, useRef, useState } from 'react';\nimport { useOutlet } from 'react-router';\nimport { useRouteNormalizer } from '../hooks/routeNormalizer';\nimport { getParentRoute } from '../utils/getParentRoute';\nimport { useWeaverContext } from './context';\n\n/**\n * A core part of an in-house tool called `weaver`.\n *\n * Delaying the routing process from `react-router`, handles gracefully between `Pipeline`s\n * while allowing any loading fallback component to listen and react with event changes.\n */\nexport default function DelayedOutlet(props: { delay: number }) {\n  // Middleware to detect and replace invalid url.\n  useRouteNormalizer({ autoReplace: true });\n\n  const activePipeline = useWeaverContext((state) => state.activePipeline);\n  const setNavigating = useWeaverContext((state) => state.setNavigating);\n  const setPageRendered = useWeaverContext((state) => state.setPageRendered);\n\n  const renderPageTask = useRef(setTimeout(() => {}));\n  const routerOutlet = useOutlet();\n\n  const [renderer, setRenderer] = useState<ReactNode>(null);\n\n  // Handle and update new parent page.\n  useLayoutEffect(() => {\n    /**\n     * `pageRendered` should be outside of `renderPageTask`,\n     * we alrady have `Pipeline` to correct errors.\n     */\n    if ('scrollRestoration' in history) {\n      history.scrollRestoration = 'manual';\n    }\n\n    if (getParentRoute(window.location.pathname) === activePipeline) {\n      // Avoid while changing page, cancelling before new page pushed in\n      // cause `activePipeline` to not change, making `navigating` softlock.\n      setNavigating(false);\n      return;\n    }\n\n    setNavigating(true);\n    setPageRendered(false);\n\n    clearTimeout(renderPageTask.current);\n    renderPageTask.current = setTimeout(() => {\n      setRenderer(routerOutlet!);\n      setNavigating(false);\n    }, props.delay);\n\n    return () => {\n      /**\n       * Clear invalid task that were scheduled last effect.\n       */\n      clearInterval(renderPageTask.current);\n    };\n  }, [\n    activePipeline,\n    props.delay,\n    routerOutlet,\n    setNavigating,\n    setPageRendered,\n  ]);\n\n  return renderer;\n}\n","import { useCallback, useLayoutEffect } from 'react';\nimport { useLocation, useNavigate } from 'react-router';\n\nexport function useRouteNormalizer(options: { autoReplace: boolean }) {\n  const { pathname } = useLocation();\n  const navigate = useNavigate();\n\n  const normalizer = useCallback(\n    (input: string) => input.replace(/\\/+\\//g, () => '/'),\n    []\n  );\n\n  useLayoutEffect(() => {\n    const result = normalizer(pathname);\n    if (options.autoReplace && result !== pathname) {\n      window.location.replace(result);\n    }\n  }, [options.autoReplace, pathname, navigate, normalizer]);\n\n  return {\n    pathname,\n    normalizer,\n  };\n}\n","export function getParentRoute(pathname: string) {\n  let slashes = 0;\n  let sliceAt = 0;\n  for (sliceAt; sliceAt < pathname.length; sliceAt++) {\n    if (pathname[sliceAt] == '/') {\n      slashes++;\n    }\n    if (slashes === 2) {\n      break;\n    }\n  }\n\n  return pathname.slice(0, sliceAt);\n}\n","import React, { useLayoutEffect, type ReactNode } from 'react';\nimport { useLayoutEffectOnce } from '../hooks/effectOnce';\nimport { weaverSetup } from '../setup';\nimport { useWeaverContext } from './context';\n\ninterface PipelineProps {\n  children?: ReactNode;\n\n  /**\n   * A state switch to notifies `Pipeline` that the content and elements of the page is ready to be displayed.\n   *\n   * Usually, you will need to preload some other external sources, or initialize 3D scene, this state\n   * make sure that the loading fallback doesn't mess up and show initializing stuff.\n   *\n   * Using `BakeScene`, you can ensure that the scene is loaded via its callback, you can then pass the state value that\n   * `BakeScene` changes to this variable to hide all the lags behind loading screen.\n   */\n  contentReady?: boolean;\n\n  /**\n   * Title for the page.\n   */\n  title: string;\n\n  /**\n   * This is crucial for different `Pipeline`s to differentiate each other and avoiding conflict.\n   *\n   * Example for parent path: `/`, `/about`, `/projects`,...\n   */\n  parentPath: string;\n\n  /**\n   * If provided, `Pipeline` will log the current phase to console.\n   */\n  debugName?: string;\n\n  /**\n   * This is the only feature where weaver will use lenis to directly manipulate scrolling behaviour.\n   *\n   * By default, this value is `true` when a lenis instance is provided.\n   *\n   * `Pipeline` will stop and start lenis automatically when this variable is `true`.\n   *\n   * Disable this feature to gains complete control over lenis when mounting/unmounting to handle however you want.\n   */\n  lenisUsage?: boolean;\n}\n\n/**\n * A core part of an in-house tool called `weaver`.\n *\n * `Pipeline`: Notifies & reflect changes to/from `LoadingFallback`\n * and `DelayedOutlet` about its page loading status.\n *\n * All parent routes must have `Pipeline` in order to work and sync with `DelayedOutlet`.\n */\nexport default function Pipeline(props: PipelineProps) {\n  const { children, ...restOfProps } = props;\n\n  return (\n    <>\n      <RouteHandler {...restOfProps} />\n      {children}\n    </>\n  );\n}\n\nfunction RouteHandler(props: Omit<PipelineProps, 'children'>) {\n  const navigating = useWeaverContext((state) => state.navigating);\n  const pageRendered = useWeaverContext((state) => state.pageRendered);\n  const activeParent = useWeaverContext((state) => state.activeParent);\n\n  const setActivePipeline = useWeaverContext(\n    (state) => state.setActivePipeline\n  );\n  const setPageRendered = useWeaverContext((state) => state.setPageRendered);\n  const setActiveParent = useWeaverContext((state) => state.setActiveParent);\n\n  useLayoutEffect(() => {\n    document.title = props.title;\n    setActivePipeline(props.parentPath);\n\n    if (props.contentReady !== undefined && !props.contentReady) {\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Loading scene`);\n      return;\n    }\n\n    if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {\n      if (props.lenisUsage === undefined || props.lenisUsage) {\n        weaverSetup._lenisInstance?.start();\n      }\n\n      setPageRendered(true);\n      setActiveParent(props.parentPath);\n\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Mounted`);\n    }\n  }, [\n    activeParent,\n    setActivePipeline,\n    navigating,\n    pageRendered,\n    props.lenisUsage,\n    props.contentReady,\n    props.debugName,\n    props.parentPath,\n    props.title,\n    setActiveParent,\n    setPageRendered,\n  ]);\n\n  useLayoutEffectOnce(() => {\n    return () => {\n      /**\n       * When unmounted, stop lenis to pass control to another Pipline instance.\n       *\n       * The unmount process only happens when the `<LoadingFallback />` kicks in,\n       * so any visual glitches can happen in here, we can now set the scroll position to 0.\n       */\n      if (props.lenisUsage === undefined || props.lenisUsage) {\n        weaverSetup._lenisInstance?.stop();\n        weaverSetup._lenisInstance?.scrollTo(0, {\n          immediate: true,\n          force: true,\n        });\n      }\n\n      if (props.debugName)\n        console.log(`[${props.debugName}] Renderer status: Unmounted`);\n    };\n  });\n\n  return null;\n}\n","import { useEffect, useLayoutEffect } from 'react';\n\nexport function useEffectOnce(callback: React.EffectCallback) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useEffect(callback, []);\n}\n\nexport function useLayoutEffectOnce(callback: React.EffectCallback) {\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  useLayoutEffect(callback, []);\n}\n","import Lenis from 'lenis';\nimport { ReactNode } from 'react';\n\nexport type BasicTunnelIn = ({ children }: { children: ReactNode }) => null;\n\nclass WeaverSetup {\n  /**\n   * This variable is handled internally by weaver. **Do not use**.\n   */\n  get _lenisInstance(): Lenis | undefined {\n    return (globalThis as any).__weaverLenis;\n  }\n  set _lenisInstance(val: Lenis | undefined) {\n    (globalThis as any).__weaverLenis = val;\n  }\n\n  /**\n   * This variable is handled internally by weaver. **Do not use**.\n   */\n  get _Default3DTunnelIn(): BasicTunnelIn | undefined {\n    return (globalThis as any).__weaver3DTunnel;\n  }\n  set _Default3DTunnelIn(val: BasicTunnelIn | undefined) {\n    (globalThis as any).__weaver3DTunnel = val;\n  }\n\n  setLenisInstance(instance: Lenis) {\n    this._lenisInstance = instance;\n  }\n  set3DTunnel(tunnelIn: BasicTunnelIn) {\n    this._Default3DTunnelIn = tunnelIn;\n  }\n}\n\nexport const weaverSetup = new WeaverSetup();\n","import { useWeaverContext, WeaverContextGetter } from './context';\nimport DelayedOutlet from './DelayedOutlet';\nimport Pipeline from './Pipeline';\n\n/// A read-only state for reacting with changes reflected by weaver.\nexport const useWeaverState = (givenState: keyof WeaverContextGetter) => {\n  const state = useWeaverContext((state) => state[givenState]);\n  return state;\n};\n\nexport { DelayedOutlet, Pipeline };\n"],"mappings":"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","names":["useLayoutEffect","useLayoutEffect","useLayoutEffect","useLayoutEffect","useLayoutEffect","useLayoutEffect","state"]}

package/docs/ROUTING.md

@@ -0,0 +1,128 @@
+# Routing
+The package wraps around `react-router` as a base for working with routing because it provides us a way to postpone parent components mounting.
+
+## `DelayedOutlet`, `Pipeline`
+- `DelayedOutlet`:
+  - Drop-in replacement for `Outlet`.
+- `Pipeline`:
+  - Declares parent for a route, handle route changes and communicates with `DelayedOutlet`.
+  - Recommended place to put the component is the parent for a route's components, see example below.
+  - It can't nest itself.
+
+> [!CAUTION]
+> The only officially supported router is `BrowserRouter`, we don't test with other methods.
+>
+> There can only be ONE `DelayedOutlet` per app and ONE `Pipeline` per parent path.
+
+Other than that, use `react-router` like intended. `weaver/routing` has especially tested against going back and forth rapidly and works flawlessly in strict mode, even with throttle the CPU to a good x20 slowdown, so you don't have to suffer like we did developing the package!
+
+While the route is delayed, the previous route is still displayed to ensure a smooth tranition to your likings.
+
+Example usage with 2 endpoints, router delayed for `500ms`:
+
+```tsx
+import { DelayedOutlet, Pipeline } from '@neveranyart/weaver/routing';
+import { StrictMode, Suspense } from 'react';
+import { createRoot } from 'react-dom/client';
+import { createBrowserRouter, Link, RouterProvider } from 'react-router';
+
+function Root() {
+  return (
+    <main>
+      <DelayedOutlet delay={500} />
+    </main>
+  );
+}
+
+function Home() {
+  return (
+    <Pipeline title='Home' debugName='Home' parentPath='/'>
+      <p>Home</p>
+      <Link to="/projects">Navigate</Link>
+    </Pipeline>
+  );
+}
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <Root />,
+    children: [
+      {
+        index: true,
+        element: (
+          <Suspense>
+            <Home />
+          </Suspense>
+        ),
+      },
+      {
+        path: '/projects/*',
+        element: (
+          <Suspense>
+            <Pipeline title='Projects' debugName='Projects' parentPath='/projects/*'>
+              <p>Projects</p>
+              <Link to="/">Navigate</Link>
+            </Pipeline>
+          </Suspense>
+        ),
+      },
+    ],
+  },
+]);
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>
+);
+```
+
+Routing also provides a quick way to react to state changes with a cool hook called `useWeaverState`. Containing 4 states for you to play with:
+
+```ts
+// Covers the whole routing process. It is the recommended way of knowing if the content is ready to be displayed or not
+const pageRendered = useWeaverState('pageRendered');
+
+// Knowing which Pipeline has taken over previous one.
+const activePipeline = useWeaverState('activePipeline');
+
+// Which Pipeline has delivered its components on screen.
+const activeParent = useWeaverState('activeParent');
+
+// Tells when `DelayedOutlet` handles routing.
+const navigating = useWeaverState('navigating');
+```
+
+When a route change happens, this is how states in `weaver/routing` changes when a route change is successful:
+
+- `+`: Other events/information.
+- `!`: State changes.
+
+```
++ Current `Pipeline` path: "/"
++ User navigates.
+! pageRendered -> false, navigating -> true.
++ Receives new parent.
+  + Delay route change.
++ Set new `Pipeline`.
+  + `Pipeline` path "/" start unmounting process.
+  + New `Pipeline` path: "/projects".
+    ! activePipeline -> "/projects".
+! navigating -> false.
++ New `Pipeline` start mounting process.
+  ! pageRendered -> true, activeParent -> "/projects".
+```
+
+When a route change is cancelled by user:
+
+```
++ Current `Pipeline` path: "/"
++ User navigates.
+! pageRendered -> false, navigating -> true.
++ Receives new parent.
+  + Delay route change.
++ User cancelled.
++ `Pipeline` path "/" detects cancel.
+  ! pageRendered -> true, navigating -> false.
+```

package/package.json

@@ -2,7 +2,7 @@
   "author": "neveranyart",
   "license": "GPL-3.0-or-later",
   "name": "@neveranyart/weaver",
-  "version": "1.0.12",
+  "version": "1.0.14",
   "description": "An in-house package by neverany for making interactive React CSR.",
   "packageManager": "yarn@4.10.3",
   "publishConfig": {