https://github.com/aminnairi/solid-web-history
Web API History implementation in Solid
https://github.com/aminnairi/solid-web-history
api history router solidjs web
Last synced: 2 months ago
JSON representation
Web API History implementation in Solid
- Host: GitHub
- URL: https://github.com/aminnairi/solid-web-history
- Owner: aminnairi
- License: mit
- Created: 2024-04-11T08:19:50.000Z (about 2 years ago)
- Default Branch: development
- Last Pushed: 2024-04-12T21:06:55.000Z (about 2 years ago)
- Last Synced: 2025-10-23T11:41:59.574Z (8 months ago)
- Topics: api, history, router, solidjs, web
- Language: TypeScript
- Homepage:
- Size: 57.6 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Security: SECURITY.md
Awesome Lists containing this project
README
# solid-web-history
Web API History implementation in Solid
## Features
- Written in TypeScript for maximum safety
- Type safety when pushing a new route so that you don't push a removed or unknown route
- Type safety when defining a page so that you don't use an unknown route parameter
- Simple and expressive API
- Easier times testing parameterized page
- Functional and declarative style of programming
## Requirements
- Node
- NPM
## Installation
Coming soon...
## Usage
### Create a page definition
```bash
mkdir --parent src/history/pages/users
touch src/history/users/user.tsx
```
```typescript
import { Suspense, lazy } from "solid-js";
import { createWebHistoryRoute } from "../../../library/history";
import { PageLoader } from "../../../components/loader";
const UserPage = lazy(() => import("../../../pages/users/user"));
export const { goToPage: goToUserPage, page: userPage } = createWebHistoryRoute("/users/:user", ({ user }) => (
}>
))
```
### Create a page view
```bash
mkdir --parent src/pages/users
touch src/pages/users/user.tsx
```
```typescript
import { createMemo } from "solid-js";
import { InferPageProps } from "../../library/history";
import { webHistorySearchParameters } from "../../history";
import { userPage } from "../../history/pages/users/user";
export default function UserPage({ user }: InferPageProps) {
const theme = createMemo(() => webHistorySearchParameters().get("theme"));
return (
User#{user} page with theme {theme()}
);
}
```
### Create a web history
```bash
touch src/history/index.ts
```
```typescript
import { createWebHistory } from "../library/history";
import NotFoundPage from "../pages/not-found";
import { homePage } from "./pages/home";
import { aboutPage } from "./pages/about";
import { userPage } from "./pages/users/user";
export const { WebHistoryView, webHistorySearchParameters } = createWebHistory({
fallback: NotFoundPage,
pages: [
homePage,
aboutPage,
userPage
]
});
```
### Use the WebHistoryView
```typescript
import { WebHistoryView } from "./history";
import { goToAboutPage } from "./history/pages/about";
import { goToHomePage } from "./history/pages/home";
import { goToUserPage } from "./history/pages/users/user";
export function App() {
return (
<>
- goToHomePage({})}>
Home
- goToAboutPage({})}>
About
- goToUserPage({ user: "123" })}>
User#123
>
);
}
```
### Use the search parameters
```typescript
import { createMemo } from "solid-js";
import { InferPageProps } from "../../library/history";
import { webHistorySearchParameters } from "../../history";
import { userPage } from "../../history/pages/users/user";
export default function UserPage({ user }: InferPageProps) {
const theme = createMemo(() => webHistorySearchParameters().get("theme"));
return (
User#{user} page with theme {theme()}
);
}
```
## Code of conduct
See [`CODE_OF_CONDUCT.md`](./CODE_OF_CONDUCT.md).
## Contributing
See [`CONTRIBUTING.md`](./CONTRIBUTING.md).
## Security
See [`SECURITY.md`](./SECURITY.md).