@bleedingdev/modern-js-renderer-solid 0.0.0-stage → 3.9.3-ultramodern.2

package/src/router-binding/useLoaderData.tsx

@@ -0,0 +1,50 @@
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseLoaderData,
+  StrictOrFrom,
+  UseLoaderDataResult,
+} from '@tanstack/router-core';
+import type { Accessor } from 'solid-js';
+import { useMatch } from './useMatch';
+
+export interface UseLoaderDataBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> {
+  select?: (match: ResolveUseLoaderData<TRouter, TFrom, TStrict>) => TSelected;
+}
+
+export type UseLoaderDataOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseLoaderDataBaseOptions<TRouter, TFrom, TStrict, TSelected>;
+
+export type UseLoaderDataRoute<out TId> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseLoaderDataBaseOptions<TRouter, TId, true, TSelected>,
+) => Accessor<UseLoaderDataResult<TRouter, TId, true, TSelected>>;
+
+export function useLoaderData<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseLoaderDataOptions<TRouter, TFrom, TStrict, TSelected>,
+): Accessor<UseLoaderDataResult<TRouter, TFrom, TStrict, TSelected>> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    select: match => {
+      return opts.select ? opts.select(match.loaderData) : match.loaderData;
+    },
+  }) as any;
+}

package/src/router-binding/useLoaderDeps.tsx

@@ -0,0 +1,46 @@
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseLoaderDeps,
+  StrictOrFrom,
+  UseLoaderDepsResult,
+} from '@tanstack/router-core';
+import type { Accessor } from 'solid-js';
+import { useMatch } from './useMatch';
+
+export interface UseLoaderDepsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TSelected,
+> {
+  select?: (deps: ResolveUseLoaderDeps<TRouter, TFrom>) => TSelected;
+}
+
+export type UseLoaderDepsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom> &
+  UseLoaderDepsBaseOptions<TRouter, TFrom, TSelected>;
+
+export type UseLoaderDepsRoute<out TId> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseLoaderDepsBaseOptions<TRouter, TId, TSelected>,
+) => Accessor<UseLoaderDepsResult<TRouter, TId, TSelected>>;
+
+export function useLoaderDeps<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TSelected = unknown,
+>(
+  opts: UseLoaderDepsOptions<TRouter, TFrom, TSelected>,
+): Accessor<UseLoaderDepsResult<TRouter, TFrom, TSelected>> {
+  return useMatch({
+    ...opts,
+    select: match => {
+      return opts.select ? opts.select(match.loaderDeps) : match.loaderDeps;
+    },
+  }) as Accessor<UseLoaderDepsResult<TRouter, TFrom, TSelected>>;
+}

package/src/router-binding/useLocation.tsx

@@ -0,0 +1,43 @@
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterState,
+} from '@tanstack/router-core';
+import { replaceEqualDeep } from '@tanstack/router-core';
+import type { Accessor } from 'solid-js';
+import * as Solid from 'solid-js';
+import { useRouter } from './useRouter';
+
+export interface UseLocationBaseOptions<TRouter extends AnyRouter, TSelected> {
+  select?: (state: RouterState<TRouter['routeTree']>['location']) => TSelected;
+}
+
+export type UseLocationResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected
+  ? RouterState<TRouter['routeTree']>['location']
+  : TSelected;
+
+export function useLocation<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseLocationBaseOptions<TRouter, TSelected>,
+): Accessor<UseLocationResult<TRouter, TSelected>> {
+  const router = useRouter<TRouter>();
+
+  if (!opts?.select) {
+    return (() => router.stores.location.get()) as Accessor<
+      UseLocationResult<TRouter, TSelected>
+    >;
+  }
+
+  const select = opts.select;
+
+  return Solid.createMemo((prev: TSelected | undefined) => {
+    const res = select(router.stores.location.get());
+    if (prev === undefined) return res;
+    return replaceEqualDeep(prev, res);
+  }) as Accessor<UseLocationResult<TRouter, TSelected>>;
+}

package/src/router-binding/useMatch.tsx

@@ -0,0 +1,111 @@
+import type {
+  AnyRouter,
+  MakeRouteMatch,
+  MakeRouteMatchUnion,
+  RegisteredRouter,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+} from '@tanstack/router-core';
+import { invariant, replaceEqualDeep } from '@tanstack/router-core';
+import * as Solid from 'solid-js';
+import { nearestMatchContext } from './matchContext';
+import { useRouter } from './useRouter';
+
+export interface UseMatchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (
+    match: MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>,
+  ) => TSelected;
+  shouldThrow?: TThrow;
+}
+
+export type UseMatchRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseMatchBaseOptions<TRouter, TFrom, true, true, TSelected>,
+) => Solid.Accessor<UseMatchResult<TRouter, TFrom, true, TSelected>>;
+
+export type UseMatchOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseMatchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>;
+
+export type UseMatchResult<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TSelected,
+> = unknown extends TSelected
+  ? TStrict extends true
+    ? MakeRouteMatch<TRouter['routeTree'], TFrom, TStrict>
+    : MakeRouteMatchUnion<TRouter>
+  : TSelected;
+
+export function useMatch<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseMatchOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Solid.Accessor<
+  ThrowOrOptional<UseMatchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  const router = useRouter<TRouter>();
+  const contextMatch = Solid.useContext(nearestMatchContext);
+  const nearestMatch = opts.from ? undefined : contextMatch;
+
+  const match = () => {
+    if (opts.from) {
+      return router.stores.getMatchStore(opts.from).get();
+    }
+
+    return nearestMatch?.[1 /* match */]();
+  };
+
+  Solid.createEffect(match, selectedMatch => {
+    if (selectedMatch !== undefined) {
+      return;
+    }
+
+    if (opts.shouldThrow ?? true) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw new Error(
+          `Invariant failed: Could not find ${opts.from ? `an active match from "${opts.from}"` : 'a nearest match!'}`,
+        );
+      }
+
+      invariant();
+    }
+  });
+
+  return Solid.createMemo((prev: TSelected | undefined) => {
+    const selectedMatch = match();
+
+    if (selectedMatch === undefined) {
+      return undefined;
+    }
+
+    const res = opts.select ? opts.select(selectedMatch) : selectedMatch;
+    if (prev === undefined) return res as TSelected;
+    return replaceEqualDeep(prev, res) as TSelected;
+  }) as any;
+}

package/src/router-binding/useNavigate.tsx

@@ -0,0 +1,43 @@
+import type {
+  AnyRouter,
+  FromPathOption,
+  NavigateOptions,
+  RegisteredRouter,
+  UseNavigateResult,
+} from '@tanstack/router-core';
+import * as Solid from 'solid-js';
+import { useRouter } from './useRouter';
+
+export function useNavigate<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TDefaultFrom extends string = string,
+>(_defaultOpts?: {
+  from?: FromPathOption<TRouter, TDefaultFrom>;
+}): UseNavigateResult<TDefaultFrom> {
+  const router = useRouter();
+
+  return ((options: NavigateOptions) => {
+    return router.navigate({
+      ...options,
+      from: options.from ?? _defaultOpts?.from,
+    });
+  }) as UseNavigateResult<TDefaultFrom>;
+}
+
+export function Navigate<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string = string,
+  const TTo extends string | undefined = undefined,
+  const TMaskFrom extends string = TFrom,
+  const TMaskTo extends string = '',
+>(props: NavigateOptions<TRouter, TFrom, TTo, TMaskFrom, TMaskTo>): null {
+  const { navigate } = useRouter();
+
+  Solid.onSettled(() => {
+    navigate({
+      ...props,
+    });
+  });
+
+  return null;
+}

package/src/router-binding/useParams.tsx

@@ -0,0 +1,72 @@
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseParams,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseParamsResult,
+} from '@tanstack/router-core';
+import type { Accessor } from 'solid-js';
+import { useMatch } from './useMatch';
+
+export interface UseParamsBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (params: ResolveUseParams<TRouter, TFrom, TStrict>) => TSelected;
+  shouldThrow?: TThrow;
+}
+
+export type UseParamsOptions<
+  TRouter extends AnyRouter,
+  TFrom extends string | undefined,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseParamsBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>;
+
+export type UseParamsRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseParamsBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected
+  >,
+) => Accessor<UseParamsResult<TRouter, TFrom, true, TSelected>>;
+
+export function useParams<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseParamsOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Accessor<
+  ThrowOrOptional<UseParamsResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    select: match => {
+      const params = opts.strict === false ? match.params : match._strictParams;
+      return opts.select ? opts.select(params) : params;
+    },
+  }) as Accessor<any>;
+}

package/src/router-binding/useRouteContext.ts

@@ -0,0 +1,30 @@
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  UseRouteContextBaseOptions,
+  UseRouteContextOptions,
+  UseRouteContextResult,
+} from '@tanstack/router-core';
+import type { Accessor } from 'solid-js';
+import { useMatch } from './useMatch';
+
+export type UseRouteContextRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseRouteContextBaseOptions<TRouter, TFrom, true, TSelected>,
+) => Accessor<UseRouteContextResult<TRouter, TFrom, true, TSelected>>;
+
+export function useRouteContext<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseRouteContextOptions<TRouter, TFrom, TStrict, TSelected>,
+): Accessor<UseRouteContextResult<TRouter, TFrom, TStrict, TSelected>> {
+  return useMatch({
+    ...opts,
+    select: match => (opts.select ? opts.select(match.context) : match.context),
+  }) as any;
+}

package/src/router-binding/useRouter.tsx

@@ -0,0 +1,17 @@
+import type { AnyRouter, RegisteredRouter } from '@tanstack/router-core';
+import * as Solid from 'solid-js';
+import { routerContext } from './routerContext';
+
+export function useRouter<TRouter extends AnyRouter = RegisteredRouter>(opts?: {
+  warn?: boolean;
+}): TRouter {
+  const value = Solid.useContext(routerContext);
+  if (process.env.NODE_ENV !== 'production') {
+    if ((opts?.warn ?? true) && !value) {
+      console.warn(
+        'Warning: useRouter must be used inside a <RouterProvider> component!',
+      );
+    }
+  }
+  return value as TRouter;
+}

package/src/router-binding/useRouterState.tsx

@@ -0,0 +1,50 @@
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  RouterState,
+} from '@tanstack/router-core';
+import { replaceEqualDeep } from '@tanstack/router-core';
+import type { Accessor } from 'solid-js';
+import * as Solid from 'solid-js';
+import { useRouter } from './useRouter';
+
+export type UseRouterStateOptions<TRouter extends AnyRouter, TSelected> = {
+  router?: TRouter;
+  select?: (state: RouterState<TRouter['routeTree']>) => TSelected;
+};
+
+export type UseRouterStateResult<
+  TRouter extends AnyRouter,
+  TSelected,
+> = unknown extends TSelected ? RouterState<TRouter['routeTree']> : TSelected;
+
+export function useRouterState<
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseRouterStateOptions<TRouter, TSelected>,
+): Accessor<UseRouterStateResult<TRouter, TSelected>> {
+  const contextRouter = useRouter<TRouter>({
+    warn: opts?.router === undefined,
+  });
+  const router = opts?.router || contextRouter;
+
+  if (!opts?.select) {
+    return (() => router.stores.__store.get()) as Accessor<
+      UseRouterStateResult<TRouter, TSelected>
+    >;
+  }
+
+  const select = opts.select;
+
+  return Solid.createMemo(
+    (prev: TSelected | undefined) => {
+      const res = select(router.stores.__store.get());
+      if (prev === undefined) return res;
+      return replaceEqualDeep(prev, res);
+    },
+    { transparent: true } as Solid.MemoOptions<TSelected> & {
+      ssrSource?: 'server' | 'hybrid';
+    },
+  ) as Accessor<UseRouterStateResult<TRouter, TSelected>>;
+}

package/src/router-binding/useSearch.tsx

@@ -0,0 +1,72 @@
+import type {
+  AnyRouter,
+  RegisteredRouter,
+  ResolveUseSearch,
+  StrictOrFrom,
+  ThrowConstraint,
+  ThrowOrOptional,
+  UseSearchResult,
+} from '@tanstack/router-core';
+import type { Accessor } from 'solid-js';
+import { useMatch } from './useMatch';
+
+export interface UseSearchBaseOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> {
+  select?: (state: ResolveUseSearch<TRouter, TFrom, TStrict>) => TSelected;
+  shouldThrow?: TThrow;
+}
+
+export type UseSearchOptions<
+  TRouter extends AnyRouter,
+  TFrom,
+  TStrict extends boolean,
+  TThrow extends boolean,
+  TSelected,
+> = StrictOrFrom<TRouter, TFrom, TStrict> &
+  UseSearchBaseOptions<TRouter, TFrom, TStrict, TThrow, TSelected>;
+
+export type UseSearchRoute<out TFrom> = <
+  TRouter extends AnyRouter = RegisteredRouter,
+  TSelected = unknown,
+>(
+  opts?: UseSearchBaseOptions<
+    TRouter,
+    TFrom,
+    /* TStrict */ true,
+    /* TThrow */ true,
+    TSelected
+  >,
+) => Accessor<UseSearchResult<TRouter, TFrom, true, TSelected>>;
+
+export function useSearch<
+  TRouter extends AnyRouter = RegisteredRouter,
+  const TFrom extends string | undefined = undefined,
+  TStrict extends boolean = true,
+  TThrow extends boolean = true,
+  TSelected = unknown,
+>(
+  opts: UseSearchOptions<
+    TRouter,
+    TFrom,
+    TStrict,
+    ThrowConstraint<TStrict, TThrow>,
+    TSelected
+  >,
+): Accessor<
+  ThrowOrOptional<UseSearchResult<TRouter, TFrom, TStrict, TSelected>, TThrow>
+> {
+  return useMatch({
+    from: opts.from!,
+    strict: opts.strict,
+    shouldThrow: opts.shouldThrow,
+    select: match => {
+      const search = match.search;
+      return opts.select ? opts.select(search) : search;
+    },
+  }) as any;
+}

package/src/router-binding/utils.ts

@@ -0,0 +1,59 @@
+import * as Solid from 'solid-js';
+
+/**
+ * React hook to wrap `IntersectionObserver`.
+ *
+ * This hook will create an `IntersectionObserver` and observe the ref passed to it.
+ *
+ * When the intersection changes, the callback will be called with the `IntersectionObserverEntry`.
+ *
+ * @param ref - The ref to observe
+ * @param callback - The callback to call when the intersection changes
+ * @param disabled - Whether observation is disabled
+ * @returns The IntersectionObserver instance
+ * @example
+ * ```tsx
+ * const MyComponent = () => {
+ * const ref = React.useRef<HTMLDivElement>(null)
+ * useIntersectionObserver(
+ *  ref,
+ *  (entry) => { doSomething(entry) },
+ *  false
+ * )
+ * return <div ref={ref} />
+ * ```
+ */
+export function useIntersectionObserver<T extends Element>(
+  ref: Solid.Accessor<T | null>,
+  callback: (entry?: IntersectionObserverEntry) => void,
+  disabled: Solid.Accessor<boolean>,
+): Solid.Accessor<IntersectionObserver | null> {
+  const isIntersectionObserverAvailable =
+    typeof IntersectionObserver === 'function';
+  let observerRef: IntersectionObserver | null = null;
+
+  Solid.createEffect(
+    () => [ref(), disabled()] as const,
+    ([r, isDisabled]) => {
+      if (isDisabled || !r || !isIntersectionObserverAvailable) {
+        return () => callback();
+      }
+
+      observerRef = new IntersectionObserver(
+        entries => {
+          callback(entries.pop());
+        },
+        { rootMargin: '100px' },
+      );
+
+      observerRef.observe(r);
+
+      return () => {
+        observerRef?.disconnect();
+        callback();
+      };
+    },
+  );
+
+  return () => observerRef;
+}