function PageViewer(props: PageViewerProps) {
  const router = new MiniRouter({
    paths: {
      ...CreateMiniRouterPath("/settings", SettingsPage),
      ...CreateMiniRouterPath("/install", InstallPage)
    }, invalid: InvalidPage, currentPath: "/settings"});


  return (
    <div>
      <router.router/>
    </div>
  )
}

function PageViewer(props: PageViewerProps) {
  const router = new MiniRouter({
    paths: {
      ...CreateMiniRouterPath("/settings", SettingsPage),
      ...CreateMiniRouterPath("/install", InstallPage)
    }, invalid: InvalidPage, currentPath: "/settings"});


  return (
    <div>
      <router.router/>
    </div>
  )
}

    this.router = <RouterViewer element={currentElement().element} props={currentElement().props}></RouterViewer>;

    this.navigate = (path: string, props?: {}) => {
      console.log("navigate")
      this.history.push(path);
      this.currentPathProps = props;
      this.history.future = [];
    }

    this.backwards = () => {
      if (this.history.past.length > 0) {
        let x : {[p: string] : RouterComponent} = this.history.past.pop()!;
        this.history.future.push({[this.currentPath.get()]: currentElement()});

        this.currentPathProps = x[0]?.props;
        this.currentPath.set(Object.keys(x)[0]);
      }
    }

    this.forwards = () => {
      if (this.history.future.length > 0) {
        let x : {[p: string] : RouterComponent} = this.history.future.pop()!;
        this.history.past.push({[this.currentPath.get()]: currentElement()});

        this.currentPathProps = x[0]?.props;
        this.currentPath.set(Object.keys(x)[0]);
      }
    }
  }
}

function CreateMiniRouterPath(path: string, element: ValidComponent, props?: {}) {
  return {[path]: {element, props}};
}

export {MiniRouter, CreateMiniRouterPath};

    this.router = <RouterViewer element={currentElement().element} props={currentElement().props}></RouterViewer>;

    this.navigate = (path: string, props?: {}) => {
      console.log("navigate")
      this.history.push(path);
      this.currentPathProps = props;
      this.history.future = [];
    }

    this.backwards = () => {
      if (this.history.past.length > 0) {
        let x : {[p: string] : RouterComponent} = this.history.past.pop()!;
        this.history.future.push({[this.currentPath.get()]: currentElement()});

        this.currentPathProps = x[0]?.props;
        this.currentPath.set(Object.keys(x)[0]);
      }
    }

    this.forwards = () => {
      if (this.history.future.length > 0) {
        let x : {[p: string] : RouterComponent} = this.history.future.pop()!;
        this.history.past.push({[this.currentPath.get()]: currentElement()});

        this.currentPathProps = x[0]?.props;
        this.currentPath.set(Object.keys(x)[0]);
      }
    }
  }
}

function CreateMiniRouterPath(path: string, element: ValidComponent, props?: {}) {
  return {[path]: {element, props}};
}

export {MiniRouter, CreateMiniRouterPath};

class MiniRouter {
  router: SolidJSX.JSX.Element;
  paths: Record<string, RouterComponent>;
  currentPath: {set: (value: string) => void, get: Accessor<string>};
  currentPathProps?: Record<string, any>;
  history: {
    past: { [p: string]: RouterComponent }[],
    future: { [p: string]: RouterComponent }[],
    push: (path: string) => void,
  };
  navigate: (path: string) => void;
  forwards: () => void;
  backwards: () => void;

  constructor(props: MiniRouterProps) {
    this.paths = props.paths;

    this.paths["404"] = { element: props.invalid ?? (() => <div></div>)};

    const [getCurrentPath, setCurrentPath] = createSignal<string>(props.currentPath ?? "404");

    this.currentPath = {set: setCurrentPath, get: getCurrentPath};

    const currentElement = createMemo(() => {
      let x = (this.paths[this.currentPath.get()] ?? this.paths["404"]);
      x.props = this.currentPathProps;
      return x;
    });

    this.history = {
      past: [],
      future: [],
      push: (path: string) => {
        this.history.past.push({[this.currentPath.get()]: currentElement()});
        this.currentPath.set(path);
      }
    }

class MiniRouter {
  router: SolidJSX.JSX.Element;
  paths: Record<string, RouterComponent>;
  currentPath: {set: (value: string) => void, get: Accessor<string>};
  currentPathProps?: Record<string, any>;
  history: {
    past: { [p: string]: RouterComponent }[],
    future: { [p: string]: RouterComponent }[],
    push: (path: string) => void,
  };
  navigate: (path: string) => void;
  forwards: () => void;
  backwards: () => void;

  constructor(props: MiniRouterProps) {
    this.paths = props.paths;

    this.paths["404"] = { element: props.invalid ?? (() => <div></div>)};

    const [getCurrentPath, setCurrentPath] = createSignal<string>(props.currentPath ?? "404");

    this.currentPath = {set: setCurrentPath, get: getCurrentPath};

    const currentElement = createMemo(() => {
      let x = (this.paths[this.currentPath.get()] ?? this.paths["404"]);
      x.props = this.currentPathProps;
      return x;
    });

    this.history = {
      past: [],
      future: [],
      push: (path: string) => {
        this.history.past.push({[this.currentPath.get()]: currentElement()});
        this.currentPath.set(path);
      }
    }

import {Accessor, Component, createMemo, createSignal, ValidComponent} from "solid-js";
import SolidJSX from "solid-js/types/jsx";
import {Dynamic} from "solid-js/web";

function RouterViewer(props: { element: ValidComponent, props?: {}}) {
  return (
    <Dynamic component={props.element} {...props}/>
  )
}

interface RouterComponent {
  element: ValidComponent;
  props?: Record<string, any>;
}

interface MiniRouterProps {
  paths: Record<string, RouterComponent>,
  invalid?: ValidComponent,
  currentPath?: string,
}

import {Accessor, Component, createMemo, createSignal, ValidComponent} from "solid-js";
import SolidJSX from "solid-js/types/jsx";
import {Dynamic} from "solid-js/web";

function RouterViewer(props: { element: ValidComponent, props?: {}}) {
  return (
    <Dynamic component={props.element} {...props}/>
  )
}

interface RouterComponent {
  element: ValidComponent;
  props?: Record<string, any>;
}

interface MiniRouterProps {
  paths: Record<string, RouterComponent>,
  invalid?: ValidComponent,
  currentPath?: string,
}