@neveranyart/weaver 1.0.0

package/dist/routing.js

@@ -0,0 +1,206 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/routing/index.ts
+var routing_exports = {};
+__export(routing_exports, {
+  DelayedOutlet: () => DelayedOutlet,
+  Pipeline: () => Pipeline,
+  useWeaverState: () => useWeaverState
+});
+module.exports = __toCommonJS(routing_exports);
+
+// src/routing/context.ts
+var import_react = require("zustand/react");
+var useWeaverContext = (0, import_react.create)()((set) => ({
+  activeParent: "",
+  setActiveParent: (activeParent) => set({ activeParent }),
+  activePipeline: "",
+  setActivePipeline: (activePipeline) => set({ activePipeline }),
+  navigating: true,
+  setNavigating: (navigating) => set({ navigating }),
+  pageRendered: false,
+  setPageRendered: (pageRendered) => set({ pageRendered })
+}));
+
+// src/routing/DelayedOutlet.tsx
+var import_react3 = require("react");
+var import_react_router2 = require("react-router");
+
+// src/hooks/routeNormalizer.ts
+var import_react2 = require("react");
+var import_react_router = require("react-router");
+function useRouteNormalizer(options) {
+  const { pathname } = (0, import_react_router.useLocation)();
+  const navigate = (0, import_react_router.useNavigate)();
+  const normalizer = (0, import_react2.useCallback)(
+    (input) => input.replace(/\/+\//g, () => "/"),
+    []
+  );
+  (0, import_react2.useLayoutEffect)(() => {
+    const result = normalizer(pathname);
+    if (options.autoReplace && result !== pathname) {
+      window.location.replace(result);
+    }
+  }, [options.autoReplace, pathname, navigate, normalizer]);
+  return {
+    pathname,
+    normalizer
+  };
+}
+
+// src/utils/getParentRoute.ts
+function getParentRoute(pathname) {
+  let slashes = 0;
+  let sliceAt = 0;
+  for (sliceAt; sliceAt < pathname.length; sliceAt++) {
+    if (pathname[sliceAt] == "/") {
+      slashes++;
+    }
+    if (slashes === 2) {
+      break;
+    }
+  }
+  return pathname.slice(0, sliceAt);
+}
+
+// src/routing/DelayedOutlet.tsx
+function DelayedOutlet(props) {
+  useRouteNormalizer({ autoReplace: true });
+  const activePipeline = useWeaverContext((state) => state.activePipeline);
+  const setNavigating = useWeaverContext((state) => state.setNavigating);
+  const setPageRendered = useWeaverContext((state) => state.setPageRendered);
+  const renderPageTask = (0, import_react3.useRef)(setTimeout(() => {
+  }));
+  const routerOutlet = (0, import_react_router2.useOutlet)();
+  const [renderer, setRenderer] = (0, import_react3.useState)(null);
+  (0, import_react3.useLayoutEffect)(() => {
+    if ("scrollRestoration" in history) {
+      history.scrollRestoration = "manual";
+    }
+    if (getParentRoute(window.location.pathname) === activePipeline) {
+      setNavigating(false);
+      return;
+    }
+    setNavigating(true);
+    setPageRendered(false);
+    clearTimeout(renderPageTask.current);
+    renderPageTask.current = setTimeout(() => {
+      setRenderer(routerOutlet);
+      setNavigating(false);
+    }, props.delay);
+    return () => {
+      clearInterval(renderPageTask.current);
+    };
+  }, [
+    activePipeline,
+    props.delay,
+    routerOutlet,
+    setNavigating,
+    setPageRendered
+  ]);
+  return renderer;
+}
+
+// src/routing/Pipeline.tsx
+var import_react5 = __toESM(require("react"));
+
+// src/index.ts
+var lenisInstance = void 0;
+
+// src/hooks/effectOnce.ts
+var import_react4 = require("react");
+function useLayoutEffectOnce(callback) {
+  (0, import_react4.useLayoutEffect)(callback, []);
+}
+
+// src/routing/Pipeline.tsx
+function Pipeline(props) {
+  const { children, ...restOfProps } = props;
+  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);
+  const pageRendered = useWeaverContext((state) => state.pageRendered);
+  const activeParent = useWeaverContext((state) => state.activeParent);
+  const setActivePipeline = useWeaverContext(
+    (state) => state.setActivePipeline
+  );
+  const setPageRendered = useWeaverContext((state) => state.setPageRendered);
+  const setActiveParent = useWeaverContext((state) => state.setActiveParent);
+  (0, import_react5.useLayoutEffect)(() => {
+    document.title = props.title;
+    setActivePipeline(props.parentPath);
+    if (props.contentReady !== void 0 && !props.contentReady) {
+      console.log(`[${props.debugName}] Renderer status: Loading scene`);
+      return;
+    }
+    if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {
+      if (props.autoStartLenis === void 0 || props.autoStartLenis) {
+        lenisInstance.start();
+      }
+      setPageRendered(true);
+      setActiveParent(props.parentPath);
+      console.log(`[${props.debugName}] Renderer status: Mounted`);
+    }
+  }, [
+    activeParent,
+    setActivePipeline,
+    navigating,
+    pageRendered,
+    props.autoStartLenis,
+    props.contentReady,
+    props.debugName,
+    props.parentPath,
+    props.title,
+    setActiveParent,
+    setPageRendered
+  ]);
+  useLayoutEffectOnce(() => {
+    return () => {
+      lenisInstance.stop();
+      lenisInstance.scrollTo(0, { immediate: true, force: true });
+      console.log(`[${props.debugName}] Renderer status: Unmounted`);
+    };
+  });
+  return null;
+}
+
+// src/routing/index.ts
+var useWeaverState = (givenState) => {
+  const state = useWeaverContext((state2) => state2[givenState]);
+  return state;
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DelayedOutlet,
+  Pipeline,
+  useWeaverState
+});
+//# sourceMappingURL=routing.js.map

package/dist/routing.js.map

@@ -0,0 +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/index.ts","../src/hooks/effectOnce.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 { lenisInstance } from '..';\nimport { useLayoutEffectOnce } from '../hooks/effectOnce';\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   * By default, `Pipeline` will log the current phase to console.\n   */\n  debugName: 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   * By default, this value is `true`\n   *\n   * When navigating off of a previous `Pipeline`. It will stop lenis as a clean up.\n   *\n   * So when a new `Pipeline` takes in, it will enable lenis immediately when `contentReady` is switched to `true`.\n   *\n   * Set to `false` to gain manual control over when lenis will start. This does not affect to stop mechanism,\n   * you don't have to clean up yourself.\n   */\n  autoStartLenis?: 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  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      console.log(`[${props.debugName}] Renderer status: Loading scene`);\n      return;\n    }\n\n    if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {\n      if (props.autoStartLenis === undefined || props.autoStartLenis) {\n        lenisInstance!.start();\n      }\n\n      setPageRendered(true);\n      setActiveParent(props.parentPath);\n\n      console.log(`[${props.debugName}] Renderer status: Mounted`);\n    }\n  }, [\n    activeParent,\n    setActivePipeline,\n    navigating,\n    pageRendered,\n    props.autoStartLenis,\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      lenisInstance!.stop();\n      lenisInstance!.scrollTo(0, { immediate: true, force: true });\n\n      console.log(`[${props.debugName}] Renderer status: Unmounted`);\n    };\n  });\n\n  return null;\n}\n","import Lenis from 'lenis';\nimport { ReactNode } from 'react';\n\nexport let lenisInstance: Lenis | undefined = undefined;\n\nexport type BasicTunnelIn = ({ children }: { children: ReactNode }) => null;\nexport let Default3DTunnelIn: BasicTunnelIn | undefined = undefined;\n\nexport const weaverSetup = {\n  setLenisInstance(instance: Lenis) {\n    lenisInstance = instance;\n  },\n  set3DTunnel(tunnelIn: BasicTunnelIn) {\n    Default3DTunnelIn = tunnelIn;\n  },\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"],"mappings":"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","names":["import_react","import_react_router","import_react","import_react","import_react","React","state"]}

package/dist/routing.mjs

@@ -0,0 +1,167 @@
+// src/routing/context.ts
+import { create } from "zustand/react";
+var useWeaverContext = create()((set) => ({
+  activeParent: "",
+  setActiveParent: (activeParent) => set({ activeParent }),
+  activePipeline: "",
+  setActivePipeline: (activePipeline) => set({ activePipeline }),
+  navigating: true,
+  setNavigating: (navigating) => set({ navigating }),
+  pageRendered: false,
+  setPageRendered: (pageRendered) => set({ pageRendered })
+}));
+
+// src/routing/DelayedOutlet.tsx
+import { useLayoutEffect as useLayoutEffect2, useRef, useState } from "react";
+import { useOutlet } from "react-router";
+
+// src/hooks/routeNormalizer.ts
+import { useCallback, useLayoutEffect } from "react";
+import { useLocation, useNavigate } from "react-router";
+function useRouteNormalizer(options) {
+  const { pathname } = useLocation();
+  const navigate = useNavigate();
+  const normalizer = useCallback(
+    (input) => input.replace(/\/+\//g, () => "/"),
+    []
+  );
+  useLayoutEffect(() => {
+    const result = normalizer(pathname);
+    if (options.autoReplace && result !== pathname) {
+      window.location.replace(result);
+    }
+  }, [options.autoReplace, pathname, navigate, normalizer]);
+  return {
+    pathname,
+    normalizer
+  };
+}
+
+// src/utils/getParentRoute.ts
+function getParentRoute(pathname) {
+  let slashes = 0;
+  let sliceAt = 0;
+  for (sliceAt; sliceAt < pathname.length; sliceAt++) {
+    if (pathname[sliceAt] == "/") {
+      slashes++;
+    }
+    if (slashes === 2) {
+      break;
+    }
+  }
+  return pathname.slice(0, sliceAt);
+}
+
+// src/routing/DelayedOutlet.tsx
+function DelayedOutlet(props) {
+  useRouteNormalizer({ autoReplace: true });
+  const activePipeline = useWeaverContext((state) => state.activePipeline);
+  const setNavigating = useWeaverContext((state) => state.setNavigating);
+  const setPageRendered = useWeaverContext((state) => state.setPageRendered);
+  const renderPageTask = useRef(setTimeout(() => {
+  }));
+  const routerOutlet = useOutlet();
+  const [renderer, setRenderer] = useState(null);
+  useLayoutEffect2(() => {
+    if ("scrollRestoration" in history) {
+      history.scrollRestoration = "manual";
+    }
+    if (getParentRoute(window.location.pathname) === activePipeline) {
+      setNavigating(false);
+      return;
+    }
+    setNavigating(true);
+    setPageRendered(false);
+    clearTimeout(renderPageTask.current);
+    renderPageTask.current = setTimeout(() => {
+      setRenderer(routerOutlet);
+      setNavigating(false);
+    }, props.delay);
+    return () => {
+      clearInterval(renderPageTask.current);
+    };
+  }, [
+    activePipeline,
+    props.delay,
+    routerOutlet,
+    setNavigating,
+    setPageRendered
+  ]);
+  return renderer;
+}
+
+// src/routing/Pipeline.tsx
+import React, { useLayoutEffect as useLayoutEffect4 } from "react";
+
+// src/index.ts
+var lenisInstance = void 0;
+
+// src/hooks/effectOnce.ts
+import { useEffect, useLayoutEffect as useLayoutEffect3 } from "react";
+function useLayoutEffectOnce(callback) {
+  useLayoutEffect3(callback, []);
+}
+
+// src/routing/Pipeline.tsx
+function Pipeline(props) {
+  const { children, ...restOfProps } = props;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(RouteHandler, { ...restOfProps }), children);
+}
+function RouteHandler(props) {
+  const navigating = useWeaverContext((state) => state.navigating);
+  const pageRendered = useWeaverContext((state) => state.pageRendered);
+  const activeParent = useWeaverContext((state) => state.activeParent);
+  const setActivePipeline = useWeaverContext(
+    (state) => state.setActivePipeline
+  );
+  const setPageRendered = useWeaverContext((state) => state.setPageRendered);
+  const setActiveParent = useWeaverContext((state) => state.setActiveParent);
+  useLayoutEffect4(() => {
+    document.title = props.title;
+    setActivePipeline(props.parentPath);
+    if (props.contentReady !== void 0 && !props.contentReady) {
+      console.log(`[${props.debugName}] Renderer status: Loading scene`);
+      return;
+    }
+    if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {
+      if (props.autoStartLenis === void 0 || props.autoStartLenis) {
+        lenisInstance.start();
+      }
+      setPageRendered(true);
+      setActiveParent(props.parentPath);
+      console.log(`[${props.debugName}] Renderer status: Mounted`);
+    }
+  }, [
+    activeParent,
+    setActivePipeline,
+    navigating,
+    pageRendered,
+    props.autoStartLenis,
+    props.contentReady,
+    props.debugName,
+    props.parentPath,
+    props.title,
+    setActiveParent,
+    setPageRendered
+  ]);
+  useLayoutEffectOnce(() => {
+    return () => {
+      lenisInstance.stop();
+      lenisInstance.scrollTo(0, { immediate: true, force: true });
+      console.log(`[${props.debugName}] Renderer status: Unmounted`);
+    };
+  });
+  return null;
+}
+
+// src/routing/index.ts
+var useWeaverState = (givenState) => {
+  const state = useWeaverContext((state2) => state2[givenState]);
+  return state;
+};
+export {
+  DelayedOutlet,
+  Pipeline,
+  useWeaverState
+};
+//# sourceMappingURL=routing.mjs.map

package/dist/routing.mjs.map

@@ -0,0 +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/index.ts","../src/hooks/effectOnce.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 { lenisInstance } from '..';\nimport { useLayoutEffectOnce } from '../hooks/effectOnce';\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   * By default, `Pipeline` will log the current phase to console.\n   */\n  debugName: 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   * By default, this value is `true`\n   *\n   * When navigating off of a previous `Pipeline`. It will stop lenis as a clean up.\n   *\n   * So when a new `Pipeline` takes in, it will enable lenis immediately when `contentReady` is switched to `true`.\n   *\n   * Set to `false` to gain manual control over when lenis will start. This does not affect to stop mechanism,\n   * you don't have to clean up yourself.\n   */\n  autoStartLenis?: 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  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      console.log(`[${props.debugName}] Renderer status: Loading scene`);\n      return;\n    }\n\n    if (!navigating && (!pageRendered || activeParent !== props.parentPath)) {\n      if (props.autoStartLenis === undefined || props.autoStartLenis) {\n        lenisInstance!.start();\n      }\n\n      setPageRendered(true);\n      setActiveParent(props.parentPath);\n\n      console.log(`[${props.debugName}] Renderer status: Mounted`);\n    }\n  }, [\n    activeParent,\n    setActivePipeline,\n    navigating,\n    pageRendered,\n    props.autoStartLenis,\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      lenisInstance!.stop();\n      lenisInstance!.scrollTo(0, { immediate: true, force: true });\n\n      console.log(`[${props.debugName}] Renderer status: Unmounted`);\n    };\n  });\n\n  return null;\n}\n","import Lenis from 'lenis';\nimport { ReactNode } from 'react';\n\nexport let lenisInstance: Lenis | undefined = undefined;\n\nexport type BasicTunnelIn = ({ children }: { children: ReactNode }) => null;\nexport let Default3DTunnelIn: BasicTunnelIn | undefined = undefined;\n\nexport const weaverSetup = {\n  setLenisInstance(instance: Lenis) {\n    lenisInstance = instance;\n  },\n  set3DTunnel(tunnelIn: BasicTunnelIn) {\n    Default3DTunnelIn = tunnelIn;\n  },\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 { 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/dist/scene.d.mts

@@ -0,0 +1,158 @@
+import React, { ReactNode, Dispatch, SetStateAction, RefObject } from 'react';
+import { BasicTunnelIn } from './index.mjs';
+import 'lenis';
+
+/**
+ * A core part of an in-house tool called `weaver`.
+ *
+ * `BakeScene`: This component will notifiy when the global 3D scene is ready.
+ *
+ * It works by tune in the `useFrame` from `@react-three/fiber`. When the scene is loaded, `useFreame` will fire
+ * with ease, the component takes advantage of that, and because `useLoader` is unreliable.
+ *
+ * This component also accepts 3D elements `children` to be rendered directly to the canvas with some camera options.
+ * But you don't have to put every 3D components inside the baker, for example, `SceneSync`s in the page are also
+ * being watched by this component.
+ *
+ * The route renderer **CAN'T** detect if the page has 3D elements or not, so if a page uses any sort of 3D rendering,
+ * this component **MUST** be a children iniside `Pipeline` (`index.tsx`), then pass the state value that bake changes
+ * to `Pipeline`'s `contentReady` in order for the `BakeScene` to work behind loading fallback screen.
+ */
+declare function BakeScene(props: {
+    children?: ReactNode;
+    sceneReady: boolean;
+    tunnelIn: BasicTunnelIn;
+    loadTaskDelay?: number;
+    setSceneReady: Dispatch<SetStateAction<boolean>>;
+    onReady?: () => void;
+}): React.JSX.Element;
+
+type Basic3DTransforms = {
+    scale: {
+        set: (x: number, y: number, z: number) => void;
+    };
+    position: {
+        x: number;
+        y: number;
+    };
+};
+interface SyncProps {
+    /**
+     * HTML element ref that `<SceneSync />` will use to sync with the scene.
+     *
+     * ```tsx
+     * <div ref={container} />
+     * <SceneSync attach={container}>
+     *   <group />
+     * </SceneSync>
+     * ```
+     */
+    attach: RefObject<HTMLElement | null>;
+    /**
+     * This variable allows fine-grain control over your scene when passed to `<SceneSync />`.
+     *
+     * `<SceneSync />` will use its own ref and group when creating your scene to control its scale and position.
+     * Setting this variable will disable the internal ref, and you can decide on which object gets controlled.
+     *
+     * This variable is needed for `hud` if you wanted to add a custom camera.
+     *
+     * For listening to change details, use `onLayoutChange` instead.
+     */
+    control?: RefObject<Basic3DTransforms | null>;
+    /**
+     * When this variable is set, `<SceneSync />` will send updates when the scene update its positions.
+     *
+     * The function return the calculated DOM rect, with dimension and position in 3D measurements.
+     */
+    onLayoutUpdate?: (rect: DOMRect, dimension: {
+        w: number;
+        h: number;
+    }, position: {
+        x: number;
+        y: number;
+    }) => void;
+    /**
+     * Use `Hud` for this scene or not.
+     *
+     * This is useful when you want to apply custom camera for this scene, or renders multiple scenes on each other.
+     *
+     * NOTE: When setting a custom camera, the `control` variable must also be set and mount to your scene, not related to the camera
+     * to avoid unwanted behavior.
+     *
+     * `<SceneSync />` groups children passed to it by default, so the camera is also in the group, when syncer updates the group,
+     * the camera is also change, ruining the effect.
+     */
+    hud?: boolean;
+    /**
+     * Control the scene's scaling when positioning.
+     */
+    scaleFactor?: number;
+    /**
+     * `<SceneSync />` avoid stretching the object by default by using the smallest dimension of the DOM element.
+     *
+     * This variable will tell `<SceneSync />` to stretch it anyways.
+     */
+    stretch?: boolean;
+    /**
+     * Disable automatic scaling on the object.
+     *
+     * This variable will also disable any scaling settings like `stretch` and `scaleFactor`.
+     */
+    disableScaling?: boolean;
+    /**
+     * `<SceneSync />` will depend on this variable to adjust how it should update.
+     *
+     * There are 3 modes: `relaxed`, `balanced` and `aggressive`.
+     *
+     * For each mode, there will be some very distinct trade-offs
+     *
+     * - `relaxed`: Uses IntersectionObserver paired with a scroll hook, together with ResizeObserver.
+     *    - (+): Minimal update calls, best performance.
+     *    - (-): The scene get desynced the moment DOM element moves without changing its sizes.
+     *           When the scene bleeds out of the DOM element too much, if IntersectionObserver reported that the DOM element
+     *           is out of view, the scene that did not fully moved out of view will stay there, as scroll hook will be disabled.
+     * - `balanced`: Uses IntersectionObserver paired with frame-based update, together with ResizeObserver.
+     *    - (+): Just enough update calls to allow the DOM element to move freely while maintain aceptable performance.
+     *    - (-): It will update on every frame when the object gets into view as reported by IntersectionObserver. And the same
+     *           problem with `relaxed` mode when the scene bleeds out too much.
+     * - `aggressive`: Frame-based update only. This mode is like how `<View />` from `@react-three/drei` kepts track of DOM elements.
+     *    - (+): Designed for precise element <-> scene updates. Can't be desynced, if desynced, that's a bug.
+     *    - (-): This is frame-based. It will fire updates as long as the scene is still mounted. Too many scenes with this
+     *           mode enabled is not a good idea. Acceptable amount would be 3 scenes with this mode.
+     *
+     * Best of both worlds is `balanced` mode, for simpler scenes that doesn't change its position, `relaxed` should be used.
+     */
+    trackingMode: 'relaxed' | 'balanced' | 'aggressive';
+    /**
+     * Set a custom tunnel for `<SceneSync />` send the components to for this scene only.
+     *
+     * Which is useful for example, put the objects inside a container in the scene.
+     *
+     * To set a default tunnel, pass it to `setDefaulTunnel` before use.
+     */
+    tunnelIn?: BasicTunnelIn;
+    children: ReactNode;
+}
+interface HudProps extends SyncProps {
+    hud: true;
+    /**
+     * Set the `renderPriority` to render things for `Hud`.
+     *
+     * This variable is ignored when `hud` is not `true`.
+     */
+    hudRenderPriority: number;
+}
+interface NormalProps extends SyncProps {
+    hud?: false;
+}
+/**
+ * A core part of an in-house tool called `weaver`.
+ *
+ * A component to allow three objects to track and sync with DOM element.
+ *
+ * The component uses `<Hud />` under the "hud", so if you want to use more than one `<SceneSync />`,
+ * you must set `renderPriority`. If not, the component will render the last scene pushed through React.
+ */
+declare function SceneSync(props: NormalProps | HudProps): React.JSX.Element;
+
+export { BakeScene, SceneSync };