@real-router/solid 0.0.1

package/dist/cjs/index.js

@@ -0,0 +1,351 @@
+'use strict';
+
+var web = require('solid-js/web');
+var sources = require('@real-router/sources');
+var solidJs = require('solid-js');
+var api = require('@real-router/core/api');
+var routeUtils = require('@real-router/route-utils');
+var store = require('solid-js/store');
+var core = require('@real-router/core');
+
+const MATCH_MARKER = Symbol.for("RouteView.Match");
+const NOT_FOUND_MARKER = Symbol.for("RouteView.NotFound");
+function Match(props) {
+  const result = {
+    $$type: MATCH_MARKER,
+    segment: props.segment,
+    exact: props.exact ?? false,
+    fallback: props.fallback,
+    get children() {
+      return props.children;
+    }
+  };
+  return result;
+}
+Match.displayName = "RouteView.Match";
+function NotFound(props) {
+  const result = {
+    $$type: NOT_FOUND_MARKER,
+    get children() {
+      return props.children;
+    }
+  };
+  return result;
+}
+NotFound.displayName = "RouteView.NotFound";
+
+function isSegmentMatch(routeName, fullSegmentName, exact) {
+  if (exact) {
+    return routeName === fullSegmentName;
+  }
+  return routeUtils.startsWithSegment(routeName, fullSegmentName);
+}
+function isMatchMarker(value) {
+  return value != null && typeof value === "object" && "$$type" in value && value.$$type === MATCH_MARKER;
+}
+function isNotFoundMarker(value) {
+  return value != null && typeof value === "object" && "$$type" in value && value.$$type === NOT_FOUND_MARKER;
+}
+function collectElements(children, result) {
+  if (children == null) {
+    return;
+  }
+  if (Array.isArray(children)) {
+    for (const child of children) {
+      collectElements(child, result);
+    }
+    return;
+  }
+  if (isMatchMarker(children) || isNotFoundMarker(children)) {
+    result.push(children);
+  }
+}
+function buildRenderList(elements, routeName, nodeName) {
+  let notFoundChildren = null;
+  let activeMatchFound = false;
+  const rendered = [];
+  for (const child of elements) {
+    if (isNotFoundMarker(child)) {
+      notFoundChildren = child.children;
+      continue;
+    }
+    const {
+      segment,
+      exact,
+      fallback
+    } = child;
+    const fullSegmentName = nodeName ? `${nodeName}.${segment}` : segment;
+    const isActive = !activeMatchFound && isSegmentMatch(routeName, fullSegmentName, exact);
+    if (isActive) {
+      activeMatchFound = true;
+      const matchContent = child.children;
+      const content = fallback === undefined ? matchContent : web.createComponent(solidJs.Suspense, {
+        fallback: fallback,
+        children: matchContent
+      });
+      rendered.push(content);
+    }
+  }
+  if (!activeMatchFound && routeName === core.UNKNOWN_ROUTE && notFoundChildren !== null) {
+    rendered.push(notFoundChildren);
+  }
+  return {
+    rendered,
+    activeMatchFound
+  };
+}
+
+function createSignalFromSource(source) {
+  const [value, setValue] = solidJs.createSignal(source.getSnapshot());
+  const unsubscribe = source.subscribe(() => {
+    setValue(() => source.getSnapshot());
+  });
+  solidJs.onCleanup(() => {
+    unsubscribe();
+  });
+  return value;
+}
+
+const RouterContext = solidJs.createContext(null);
+const RouteContext = solidJs.createContext(null);
+
+const useRouter = () => {
+  const ctx = solidJs.useContext(RouterContext);
+  if (!ctx) {
+    throw new Error("useRouter must be used within a RouterProvider");
+  }
+  return ctx.router;
+};
+
+function useRouteNode(nodeName) {
+  const router = useRouter();
+  const store = sources.createRouteNodeSource(router, nodeName);
+  return createSignalFromSource(store);
+}
+
+function RouteViewRoot(props) {
+  const routeState = useRouteNode(props.nodeName);
+  const resolved = solidJs.children(() => props.children);
+  return web.memo(() => {
+    const state = routeState();
+    if (!state.route) {
+      return null;
+    }
+    const elements = [];
+    collectElements(resolved(), elements);
+    const {
+      rendered
+    } = buildRenderList(elements, state.route.name, props.nodeName);
+    if (rendered.length > 0) {
+      return rendered;
+    }
+    return null;
+  });
+}
+RouteViewRoot.displayName = "RouteView";
+const RouteView = Object.assign(RouteViewRoot, {
+  Match,
+  NotFound
+});
+
+var t="data-real-router-announcer";function e(e,n){const r="Navigated to ";let o,u=true,c=false,a=false,s="";const l=function(){const e=document.querySelector(`[${t}]`);if(e)return e;const n=document.createElement("div");return n.setAttribute("style","position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap;border:0"),n.setAttribute("aria-live","assertive"),n.setAttribute("aria-atomic","true"),n.setAttribute(t,""),document.body.prepend(n),n}(),m=setTimeout(()=>{c=true;},100),d=e.subscribe(({route:t})=>{u?u=false:requestAnimationFrame(()=>{requestAnimationFrame(()=>{if(a)return;const e=function(t,e,n){const r=document.querySelector("h1"),i=r?.textContent.trim()??"",o=t.name.startsWith("@@")?"":t.name;return `${e}${i||document.title||o||globalThis.location.pathname}`}(t,r);e&&e!==s&&c&&(s=e,clearTimeout(o),l.textContent=e,o=setTimeout(()=>{l.textContent="",s="";},7e3),function(){const t=document.querySelector("h1");t&&(t.hasAttribute("tabindex")||t.setAttribute("tabindex","-1"),t.focus({preventScroll:true}));}());});});});return {destroy(){a=true,d(),clearTimeout(o),clearTimeout(m),document.querySelector(`[${t}]`)?.remove();}}}function n(t){return !(0!==t.button||t.metaKey||t.altKey||t.ctrlKey||t.shiftKey)}function r(t,e,n){const r=t.buildUrl;return r?r(e,n):t.buildPath(e,n)}function i(t,e,n){return t&&e?n?`${n} ${e}`.trim():e:n??void 0}function o(t){t instanceof HTMLAnchorElement||t instanceof HTMLButtonElement||(t.getAttribute("role")||t.setAttribute("role","link"),t.getAttribute("tabindex")||t.setAttribute("tabindex","0"));}
+
+/**
+ * Stable empty object for default params
+ */
+const EMPTY_PARAMS = Object.freeze({});
+
+/**
+ * Stable empty options object
+ */
+const EMPTY_OPTIONS = Object.freeze({});
+
+var _tmpl$ = /*#__PURE__*/web.template(`<a>`);
+function Link(props) {
+  const merged = solidJs.mergeProps({
+    routeParams: EMPTY_PARAMS,
+    routeOptions: EMPTY_OPTIONS,
+    activeClassName: "active",
+    activeStrict: false,
+    ignoreQueryParams: true
+  }, props);
+  const [local, rest] = solidJs.splitProps(merged, ["routeName", "routeParams", "routeOptions", "activeClassName", "activeStrict", "ignoreQueryParams", "onClick", "target", "class", "children"]);
+  const router = useRouter();
+  const ctx = solidJs.useContext(RouterContext);
+  const useFastPath = ctx?.routeSelector && !local.activeStrict && local.ignoreQueryParams && local.routeParams === EMPTY_PARAMS;
+  const isActive = useFastPath ? () => ctx.routeSelector(local.routeName) : createSignalFromSource(sources.createActiveRouteSource(router, local.routeName, local.routeParams, {
+    strict: local.activeStrict,
+    ignoreQueryParams: local.ignoreQueryParams
+  }));
+  const href = solidJs.createMemo(() => r(router, local.routeName, local.routeParams));
+  const handleClick = evt => {
+    if (local.onClick) {
+      local.onClick(evt);
+      if (evt.defaultPrevented) {
+        return;
+      }
+    }
+    if (!n(evt) || local.target === "_blank") {
+      return;
+    }
+    evt.preventDefault();
+    router.navigate(local.routeName, local.routeParams, local.routeOptions).catch(() => {});
+  };
+  const finalClassName = solidJs.createMemo(() => i(isActive(), local.activeClassName, local.class));
+  return (() => {
+    var _el$ = _tmpl$();
+    web.spread(_el$, web.mergeProps(rest, {
+      get href() {
+        return href();
+      },
+      get ["class"]() {
+        return finalClassName();
+      },
+      "onClick": handleClick
+    }), false, true);
+    web.insert(_el$, () => local.children);
+    return _el$;
+  })();
+}
+
+function link(element, accessor) {
+  const router = useRouter();
+  const options = accessor();
+
+  // Set href on <a> elements
+  if (element instanceof HTMLAnchorElement) {
+    element.href = router.buildPath(options.routeName, options.routeParams ?? EMPTY_PARAMS);
+  }
+  o(element);
+
+  // Active class tracking (reactive)
+  if (options.activeClassName) {
+    const activeClassName = options.activeClassName;
+    const activeSource = sources.createActiveRouteSource(router, options.routeName, options.routeParams ?? EMPTY_PARAMS, {
+      strict: options.activeStrict ?? false,
+      ignoreQueryParams: options.ignoreQueryParams ?? true
+    });
+    const isActive = createSignalFromSource(activeSource);
+    solidJs.createEffect(() => {
+      element.classList.toggle(activeClassName, isActive());
+    });
+  }
+
+  // Click handler
+  function handleClick(evt) {
+    if (!n(evt)) {
+      return;
+    }
+    if (element instanceof HTMLAnchorElement) {
+      evt.preventDefault();
+    }
+    router.navigate(options.routeName, options.routeParams ?? EMPTY_PARAMS, options.routeOptions ?? EMPTY_OPTIONS).catch(() => {});
+  }
+  element.addEventListener("click", handleClick);
+  solidJs.onCleanup(() => {
+    element.removeEventListener("click", handleClick);
+  });
+}
+
+const useNavigator = () => {
+  const ctx = solidJs.useContext(RouterContext);
+  if (!ctx) {
+    throw new Error("useNavigator must be used within a RouterProvider");
+  }
+  return ctx.navigator;
+};
+
+const useRouteUtils = () => {
+  const router = useRouter();
+  return routeUtils.getRouteUtils(api.getPluginApi(router).getTree());
+};
+
+const useRoute = () => {
+  const routeSignal = solidJs.useContext(RouteContext);
+  if (!routeSignal) {
+    throw new Error("useRoute must be used within a RouterProvider");
+  }
+  return routeSignal;
+};
+
+function createStoreFromSource(source) {
+  const [state, setState] = store.createStore(structuredClone(source.getSnapshot()));
+  const unsubscribe = source.subscribe(() => {
+    setState(store.reconcile(source.getSnapshot()));
+  });
+  solidJs.onCleanup(unsubscribe);
+  return state;
+}
+
+function useRouteStore() {
+  const ctx = solidJs.useContext(RouteContext);
+  if (!ctx) {
+    throw new Error("useRouteStore must be used within a RouterProvider");
+  }
+  const router = useRouter();
+  return createStoreFromSource(sources.createRouteSource(router));
+}
+
+function useRouteNodeStore(nodeName) {
+  const router = useRouter();
+  return createStoreFromSource(sources.createRouteNodeSource(router, nodeName));
+}
+
+function useRouterTransition() {
+  const router = useRouter();
+  const store = sources.createTransitionSource(router);
+  return createSignalFromSource(store);
+}
+
+function isRouteActive(linkRouteName, currentRouteName) {
+  return currentRouteName === linkRouteName || currentRouteName.startsWith(`${linkRouteName}.`);
+}
+function RouterProvider(props) {
+  solidJs.onMount(() => {
+    if (!props.announceNavigation) {
+      return;
+    }
+    const announcer = e(props.router);
+    solidJs.onCleanup(() => {
+      announcer.destroy();
+    });
+  });
+  const navigator = core.getNavigator(props.router);
+  const routeSource = sources.createRouteSource(props.router);
+  const routeSignal = createSignalFromSource(routeSource);
+  const routeSelector = solidJs.createSelector(() => routeSignal().route?.name ?? "", isRouteActive);
+  return web.createComponent(RouterContext.Provider, {
+    get value() {
+      return {
+        router: props.router,
+        navigator,
+        routeSelector
+      };
+    },
+    get children() {
+      return web.createComponent(RouteContext.Provider, {
+        value: routeSignal,
+        get children() {
+          return props.children;
+        }
+      });
+    }
+  });
+}
+
+exports.Link = Link;
+exports.RouteContext = RouteContext;
+exports.RouteView = RouteView;
+exports.RouterContext = RouterContext;
+exports.RouterProvider = RouterProvider;
+exports.createSignalFromSource = createSignalFromSource;
+exports.createStoreFromSource = createStoreFromSource;
+exports.link = link;
+exports.useNavigator = useNavigator;
+exports.useRoute = useRoute;
+exports.useRouteNode = useRouteNode;
+exports.useRouteNodeStore = useRouteNodeStore;
+exports.useRouteStore = useRouteStore;
+exports.useRouteUtils = useRouteUtils;
+exports.useRouter = useRouter;
+exports.useRouterTransition = useRouterTransition;

package/dist/esm/index.d.mts

@@ -0,0 +1,103 @@
+import * as solid_js from 'solid-js';
+import { JSX, Accessor, ParentProps } from 'solid-js';
+import * as _real_router_core from '@real-router/core';
+import { Params, NavigationOptions, State, Router, Navigator } from '@real-router/core';
+export { Navigator } from '@real-router/core';
+import { RouteUtils } from '@real-router/route-utils';
+import { RouterTransitionSnapshot, RouterSource } from '@real-router/sources';
+export { RouterTransitionSnapshot } from '@real-router/sources';
+
+interface RouteViewProps {
+    readonly nodeName: string;
+    readonly children: JSX.Element;
+}
+interface MatchProps {
+    readonly segment: string;
+    readonly exact?: boolean;
+    readonly fallback?: JSX.Element;
+    readonly children: JSX.Element;
+}
+interface NotFoundProps {
+    readonly children: JSX.Element;
+}
+
+declare function Match(props: MatchProps): JSX.Element;
+declare namespace Match {
+    var displayName: string;
+}
+declare function NotFound(props: NotFoundProps): JSX.Element;
+declare namespace NotFound {
+    var displayName: string;
+}
+
+declare function RouteViewRoot(props: Readonly<RouteViewProps>): JSX.Element;
+declare namespace RouteViewRoot {
+    var displayName: string;
+}
+declare const RouteView: typeof RouteViewRoot & {
+    Match: typeof Match;
+    NotFound: typeof NotFound;
+};
+
+interface RouteState<P extends Params = Params, MP extends Params = Params> {
+    route: State<P, MP> | undefined;
+    previousRoute?: State | undefined;
+}
+interface LinkProps<P extends Params = Params> extends Omit<JSX.HTMLAttributes<HTMLAnchorElement>, "onClick"> {
+    routeName: string;
+    routeParams?: P;
+    routeOptions?: NavigationOptions;
+    activeClassName?: string;
+    activeStrict?: boolean;
+    ignoreQueryParams?: boolean;
+    target?: string;
+    onClick?: (evt: MouseEvent) => void;
+}
+
+declare function Link<P extends Params = Params>(props: Readonly<LinkProps<P>>): JSX.Element;
+
+interface LinkDirectiveOptions<P extends Params = Params> {
+    routeName: string;
+    routeParams?: P;
+    routeOptions?: Record<string, unknown>;
+    activeClassName?: string;
+    activeStrict?: boolean;
+    ignoreQueryParams?: boolean;
+}
+declare function link<P extends Params = Params>(element: HTMLElement, accessor: () => LinkDirectiveOptions<P>): void;
+
+declare const useRouter: () => Router;
+
+declare const useNavigator: () => Navigator;
+
+declare const useRouteUtils: () => RouteUtils;
+
+declare const useRoute: () => Accessor<RouteState>;
+
+declare function useRouteNode(nodeName: string): Accessor<RouteState>;
+
+declare function useRouteStore(): RouteState;
+
+declare function useRouteNodeStore(nodeName: string): RouteState;
+
+declare function useRouterTransition(): Accessor<RouterTransitionSnapshot>;
+
+interface RouteProviderProps {
+    router: Router;
+    announceNavigation?: boolean;
+}
+declare function RouterProvider(props: ParentProps<RouteProviderProps>): JSX.Element;
+
+interface RouterContextValue {
+    router: Router;
+    navigator: Navigator;
+    routeSelector: (routeName: string) => boolean;
+}
+declare const RouterContext: solid_js.Context<RouterContextValue | null>;
+declare const RouteContext: solid_js.Context<Accessor<RouteState<_real_router_core.Params, _real_router_core.Params>> | null>;
+
+declare function createSignalFromSource<T>(source: RouterSource<T>): Accessor<T>;
+
+declare function createStoreFromSource<T extends object>(source: RouterSource<T>): T;
+
+export { Link, type LinkDirectiveOptions, type LinkProps, RouteContext, type RouteState, RouteView, type MatchProps as RouteViewMatchProps, type NotFoundProps as RouteViewNotFoundProps, type RouteViewProps, RouterContext, RouterProvider, createSignalFromSource, createStoreFromSource, link, useNavigator, useRoute, useRouteNode, useRouteNodeStore, useRouteStore, useRouteUtils, useRouter, useRouterTransition };