Skip to content

Commit

Permalink
start tanstack router experimentation
Browse files Browse the repository at this point in the history
  • Loading branch information
n3dst4 committed Jun 2, 2024
1 parent e4ae3d6 commit 47b0467
Show file tree
Hide file tree
Showing 5 changed files with 245 additions and 5 deletions.
2 changes: 2 additions & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,8 @@
"dependencies": {
"@lumphammer/shared-fvtt-bits": "workspace:^",
"@monaco-editor/react": "^4.6.0",
"@tanstack/react-router": "^1.34.9",
"@tanstack/router-devtools": "^1.34.9",
"case": "^1.6.3",
"d3-ease": "^3.0.1",
"html-escaper": "^3.0.3",
Expand Down
102 changes: 102 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

133 changes: 133 additions & 0 deletions src/components/settings/Cards/RouterExperiment.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,133 @@
import {
createMemoryHistory,
createRootRoute,
createRoute,
createRouter,
Link as RouterLink,
Outlet,
RouterProvider,
useLocation,
} from "@tanstack/react-router";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import React, { ComponentPropsWithRef } from "react";

// import { systemLogger } from "../../../functions/utilities";

function stopPropagation(e: React.MouseEvent<"a", MouseEvent>) {
e.stopPropagation();
}

function preventDefault(e: React.MouseEvent<HTMLElement>) {
e.preventDefault();
}

/**
* Custom version of Link component that stops propagation so
* that whatever weird link handler Foundry has doesn't get triggered.
*/
function Link(props: ComponentPropsWithRef<typeof RouterLink>) {
return <RouterLink {...props} onClick={stopPropagation} />;
}

const history = createMemoryHistory({
initialEntries: ["/"],
});

const RootComponent = () => {
const loc = useLocation();
return (
<>
<div>
<Link to="/" className="[&.active]:font-bold">
Home
</Link>{" "}
<Link to="/about" className="[&.active]:font-bold">
About
</Link>{" "}
<Link to="/people" className="[&.active]:font-bold">
People
</Link>{" "}
{loc.href}
</div>
<hr />
<Outlet />
<TanStackRouterDevtools />
</>
);
};

const rootRoute = createRootRoute({
component: RootComponent,
});

const indexRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/",
component: function Index() {
return (
<div className="p-2">
<h3>Welcome Home!</h3>
</div>
);
},
});

const aboutRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/about",
component: function About() {
return (
<div className="p-2">
Hello from About!
<Link to="/">I wanna go home!</Link>
<Link to="people">People</Link>
</div>
);
},
});

const peopleRoute = createRoute({
getParentRoute: () => rootRoute,
path: "/about/people",
component: function About() {
return (
<div className="p-2">
Our team!
<ul>
<li>
<Link to="ndc">Neil de Carteret</Link>
</li>
<li>
<Link to="people/fred">Fred</Link>
</li>
</ul>
</div>
);
},
});

const routeTree = rootRoute.addChildren([indexRoute, aboutRoute, peopleRoute]);

const router = createRouter({ routeTree, history });

declare module "@tanstack/react-router" {
interface Register {
router: typeof router;
}
}

// my component

interface RouterExperimentProps {}

export const RouterExperiment: React.FC<RouterExperimentProps> = () => {
return (
// preventDefault here blocks clicks on router dev tools from tgriggering
// foundry's own click handlers.
<div onClick={preventDefault}>
<RouterProvider router={router} basepath="/" />
</div>
);
};

RouterExperiment.displayName = "RouterExperiment";
7 changes: 7 additions & 0 deletions src/components/settings/Settings.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { TabContainer } from "../TabContainer";
import { Translate } from "../Translate";
import { AbilitySettings } from "./AbilitySettings";
import { CardsSettings } from "./Cards/CardsSettings";
import { RouterExperiment } from "./Cards/RouterExperiment";
import { DirtyContext, DispatchContext, StateContext } from "./contexts";
import { CoreSettings } from "./CoreSettings";
import { EquipmentSettings } from "./Equipment/EquipmentSettings";
Expand Down Expand Up @@ -110,6 +111,12 @@ export const Settings: React.FC<SettingsProps> = ({ foundryApplication }) => {
label: "Misc",
content: <MiscSettings setters={setters} />,
},
{
id: "router",
label: "Router",

content: <RouterExperiment />,
},
]}
/>
</div>
Expand Down
6 changes: 1 addition & 5 deletions src/components/settings/Stats/StatsSettings.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import React from "react";

import { absoluteCover } from "../../absoluteCover";
import { InputGrid } from "../../inputs/InputGrid";
// import { InputGrid } from "../../inputs/InputGrid";
import { TabContainer } from "../../TabContainer";
import { StatsSettingsEditor } from "./StatsSettingsEditor";

export const StatsSettings: React.FC = () => {
const idx = 0;

return (
<div
css={{
...absoluteCover,
margin: "1em",
// backgroundColor: "rgba(0, 0, 0, 0.5)",
col,
}}
>
<TabContainer
Expand Down

0 comments on commit 47b0467

Please sign in to comment.