solid-router/dist/server/index.cjs.js

A declarative router for solid-js

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var dom = require('solid-js/dom');
var history = require('history');
var solidJs = require('solid-js');
var pathToRegexp = require('path-to-regexp');

const _ck$ = ["children"];
const HistoryContext = solidJs.createContext();
function ContextProvider(props) {
  const history = props.history;
  const [locationSignal, setLocationSignal] = solidJs.createSignal(history.location);
  const locationHandler = history.listen(location => {
    setLocationSignal(location);
  });
  solidJs.onCleanup(() => {
    locationHandler();
  });
  return dom.createComponent(HistoryContext.Provider, {
    value: {
      history,
      locationSignal
    },
    children: () => props.children
  }, _ck$);
}

const _ck$$1 = ["children", "history"];
function ServerContextProvider(props) {
  return dom.createComponent(ContextProvider, {
    history: () => history.createMemoryHistory(props.options),
    children: () => props.children
  }, _ck$$1);
}

function getArrayOf(array) {
  if (Array.isArray(array)) {
    return array;
  }

  if (!!array) {
    return [array];
  }

  return [];
}

const RouteContext = solidJs.createContext();

function useLocationSignal() {
  const {
    locationSignal
  } = solidJs.useContext(HistoryContext);
  return locationSignal;
}

function useRouteMatchSignal(routeOrPath) {
  const locationSignal = useLocationSignal();
  let route;

  if (typeof routeOrPath === 'string') {
    route = {
      path: routeOrPath,
      options: {}
    };
  } else {
    route = routeOrPath;
  }

  if (!route.path) {
    route.path = '*';
  }

  const matcher = pathToRegexp.match(route.path, route.options);
  return () => {
    const pathname = locationSignal().pathname;
    return matcher(pathname);
  };
}

const _ck$$2 = ["children"];
function Router(props) {
  const routes = getArrayOf(props.children);
  const routeMatchSignals = routes.map(useRouteMatchSignal);
  const useFallback = ('fallback' in props);
  const evalConditions = solidJs.createMemo(() => {
    return routeMatchSignals.reduce((result, matcher, index) => {
      if (result.index === -1) {
        const match = matcher();

        if (match) {
          return {
            index,
            params: match.params
          };
        }
      }

      return result;
    }, {
      index: -1,
      params: {}
    });
  });
  return solidJs.suspend(solidJs.createMemo(() => {
    const {
      index,
      params
    } = evalConditions();
    return solidJs.sample(() => dom.createComponent(RouteContext.Provider, {
      value: params,
      children: () => index < 0 ? useFallback && props.fallback : routes[index].children
    }, _ck$$2));
  }));
}

function Route(props) {
  return props;
}

function useHistory() {
  const {
    history
  } = solidJs.useContext(HistoryContext);
  return history;
}

function Link(props) {
  const history = useHistory();

  return dom.ssr`<a _hk="${dom.getHydrationKey()}" ${dom.ssrSpread(props, false, false)}></a>`;
}

function Redirect(props) {
  const history = useHistory();
  solidJs.createEffect(() => {
    history.push(props.href);
  });
  return props.children;
}

function NavLink({
  href,
  activeClass = '',
  className = '',
  children,
  options,
  ...props
}) {
  const history = useHistory();
  const routeMatchSignal = useRouteMatchSignal({
    path: href,
    options
  });

  return solidJs.createMemo(() => {
    const isMatched = !!routeMatchSignal();
    return solidJs.sample(() => dom.ssr`<a _hk="${dom.getHydrationKey()}" class="${isMatched ? `${className} ${activeClass}` : className}" href="${href}" ${dom.ssrSpread(props, false, true)}>${dom.escape(children)}</a>`);
  });
}

function useParams() {
  return solidJs.useContext(RouteContext);
}

exports.ContextProvider = ServerContextProvider;
exports.Link = Link;
exports.NavLink = NavLink;
exports.Redirect = Redirect;
exports.Route = Route;
exports.Router = Router;
exports.useHistory = useHistory;
exports.useLocationSignal = useLocationSignal;
exports.useParams = useParams;
exports.useRouteMatchSignalCreator = useRouteMatchSignal;