diff --git a/404.html b/404.html index cf7a6b0..2347bc7 100644 --- a/404.html +++ b/404.html @@ -12,7 +12,7 @@
Atomic Router

Appearance

404

PAGE NOT FOUND

But if you don't change your direction, and if you keep looking, you may end up where you are heading.
Take me home
- + diff --git a/api/chain-route.html b/api/chain-route.html index 05a0df6..439b886 100644 --- a/api/chain-route.html +++ b/api/chain-route.html @@ -61,7 +61,7 @@ chainedRoute: postLoadedRoute, }); - + diff --git a/api/create-route.html b/api/create-route.html index c56f8aa..3f64cfe 100644 --- a/api/create-route.html +++ b/api/create-route.html @@ -7,7 +7,7 @@ - + @@ -32,12 +32,20 @@ target: postRoute.navigate, }) // /posts/:postId -> /posts/123?foo=bar -

You can also add replace: true option to do history.replace instead of history.push:

ts
postRoute.navigate({
-  params: { postId: '123' },
-  query: { foo: 'bar' },
-  replace: true,
-});
-

Signature: Effect<RouteParamsAndQuery<RouteParams> & { replace?: boolean }, RouteParamsAndQuery<RouteParams>>

.open

The same as .navigate but with params only

ts
postRoute.open({ postId: '123' });
+

You can also add replace: true option to do history.replace instead of history.push:

ts
sample({
+  clock: someThingHappened,
+  fn: () => ({
+    params: { postId: '123' },
+    query: { foo: 'bar' },
+    replace: true,
+  }),
+  target: postRoute.navigate,
+})
+

Signature: Effect<RouteParamsAndQuery<RouteParams> & { replace?: boolean }, RouteParamsAndQuery<RouteParams>>

.open

The same as .navigate but with params only

ts
sample({
+  clock: somethingHappened,
+  fn: () => ({ postId: '123' }),
+  target: postRoute.open,
+})
 // /posts/:postId -> /posts/123

Signature: Effect<RouteParams, RouteParamsAndQuery<RouteParams>>

Events

.opened

Triggers whenever route is opened

ts
sample({
   clock: postRoute.opened,
@@ -57,7 +65,7 @@

Signature: Store<boolean>

$params

Current route params. These params are used as tokens for URL set in router.

If route is not opened, $params will be {}

ts
postRoute.$params; // { postId: 123 }

Signature: Store<RouteParams>

$query

Current route query. These are used to build Query String

If route is not opened, $query will be {}

ts
postRoute.$query; // { foo: 'bar' }

Signature: Store<RouteQuery>

- + diff --git a/api/create-router-controls.html b/api/create-router-controls.html index 5a5965d..27d2a95 100644 --- a/api/create-router-controls.html +++ b/api/create-router-controls.html @@ -44,7 +44,7 @@ target: controls.back }) - + diff --git a/api/create-router.html b/api/create-router.html index e863d02..0fbed7c 100644 --- a/api/create-router.html +++ b/api/create-router.html @@ -71,7 +71,7 @@ routes, });

This will add /dashboard to all paths of the passed routes.

- + diff --git a/api/query-sync.html b/api/query-sync.html index dd38605..174c1aa 100644 --- a/api/query-sync.html +++ b/api/query-sync.html @@ -74,7 +74,7 @@ controls }) - + diff --git a/api/redirect.html b/api/redirect.html index 4f7815a..477fffa 100644 --- a/api/redirect.html +++ b/api/redirect.html @@ -83,7 +83,7 @@ } })

The following is read as:

Whenever getPostFx.failData is triggered,

If err.code is 401 trigger notAuthorizedRoute.navigate with { params: {}, query: {} }

If err.code is 404 trigger notFoundRoute.navigate with { params: {}, query: {} }

- + diff --git a/assets/api_create-route.md.ca274022.js b/assets/api_create-route.md.8755c2db.js similarity index 82% rename from assets/api_create-route.md.ca274022.js rename to assets/api_create-route.md.8755c2db.js index 0e99c8b..1c4f0c8 100644 --- a/assets/api_create-route.md.ca274022.js +++ b/assets/api_create-route.md.8755c2db.js @@ -1,4 +1,4 @@ -import{_ as s,c as a,o as n,a as o}from"./app.5d82f9ad.js";const C=JSON.parse('{"title":"createRoute","description":"","frontmatter":{},"headers":[{"level":2,"title":"Common stuff","slug":"common-stuff","link":"#common-stuff","children":[]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[]},{"level":2,"title":"Methods","slug":"methods","link":"#methods","children":[{"level":3,"title":".navigate","slug":"navigate","link":"#navigate","children":[]},{"level":3,"title":".open","slug":"open","link":"#open","children":[]}]},{"level":2,"title":"Events","slug":"events","link":"#events","children":[{"level":3,"title":".opened","slug":"opened","link":"#opened","children":[]},{"level":3,"title":".updated","slug":"updated","link":"#updated","children":[]},{"level":3,"title":".closed","slug":"closed","link":"#closed","children":[]}]},{"level":2,"title":"Stores","slug":"stores","link":"#stores","children":[{"level":3,"title":"$isOpened","slug":"isopened","link":"#isopened","children":[]},{"level":3,"title":"$params","slug":"params","link":"#params","children":[]},{"level":3,"title":"$query","slug":"query","link":"#query","children":[]}]}],"relativePath":"api/create-route.md"}'),e={name:"api/create-route.md"},p=o(`

createRoute

Creates a route.
You can .open() it subscribe to its opened/closed events, and watch for $params/$query

ts
import { createRoute } from 'atomic-router';
+import{_ as s,c as a,o as n,a as o}from"./app.5d82f9ad.js";const d=JSON.parse('{"title":"createRoute","description":"","frontmatter":{},"headers":[{"level":2,"title":"Common stuff","slug":"common-stuff","link":"#common-stuff","children":[]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[]},{"level":2,"title":"Methods","slug":"methods","link":"#methods","children":[{"level":3,"title":".navigate","slug":"navigate","link":"#navigate","children":[]},{"level":3,"title":".open","slug":"open","link":"#open","children":[]}]},{"level":2,"title":"Events","slug":"events","link":"#events","children":[{"level":3,"title":".opened","slug":"opened","link":"#opened","children":[]},{"level":3,"title":".updated","slug":"updated","link":"#updated","children":[]},{"level":3,"title":".closed","slug":"closed","link":"#closed","children":[]}]},{"level":2,"title":"Stores","slug":"stores","link":"#stores","children":[{"level":3,"title":"$isOpened","slug":"isopened","link":"#isopened","children":[]},{"level":3,"title":"$params","slug":"params","link":"#params","children":[]},{"level":3,"title":"$query","slug":"query","link":"#query","children":[]}]}],"relativePath":"api/create-route.md"}'),e={name:"api/create-route.md"},p=o(`
createRoute 
Creates a route.
 You can .open() it subscribe to its opened/closed events, and watch for $params/$query
ts
import { createRoute } from 'atomic-router';
 
Common stuff 
  • RouteParams - type for route params. Extends Record<string, any>
  • RouteQuery - type for route query. Extends Record<string, any>
  • RouteParamsAndQuery<Params> - extends { params: Params, query: RouteQuery }
  • "Route opened" - means that we enter the route when it's not opened
  • "Route updated" - means that currently opened route changes its params/query
Usage 
ts
import { createRoute } from 'atomic-router';
 
 export const homeRoute = createRoute();
@@ -18,12 +18,20 @@ import{_ as s,c as a,o as n,a as o}from"./app.5d82f9ad.js";const C=JSON.parse('{
   target: postRoute.navigate,
 })
 // /posts/:postId -> /posts/123?foo=bar
-
You can also add replace: true option to do history.replace instead of history.push:
ts
postRoute.navigate({
-  params: { postId: '123' },
-  query: { foo: 'bar' },
-  replace: true,
-});
-
Signature: Effect<RouteParamsAndQuery<RouteParams> & { replace?: boolean }, RouteParamsAndQuery<RouteParams>>
.open 
The same as .navigate but with params only
ts
postRoute.open({ postId: '123' });
+
You can also add replace: true option to do history.replace instead of history.push:
ts
sample({
+  clock: someThingHappened,
+  fn: () => ({
+    params: { postId: '123' },
+    query: { foo: 'bar' },
+    replace: true,
+  }),
+  target: postRoute.navigate,
+})
+
Signature: Effect<RouteParamsAndQuery<RouteParams> & { replace?: boolean }, RouteParamsAndQuery<RouteParams>>
.open 
The same as .navigate but with params only
ts
sample({
+  clock: somethingHappened,
+  fn: () => ({ postId: '123' }),
+  target: postRoute.open,
+})
 // /posts/:postId -> /posts/123
 
Signature: Effect<RouteParams, RouteParamsAndQuery<RouteParams>>
Events 
.opened 
Triggers whenever route is opened
ts
sample({
   clock: postRoute.opened,
@@ -42,4 +50,4 @@ import{_ as s,c as a,o as n,a as o}from"./app.5d82f9ad.js";const C=JSON.parse('{
 
Signature: Event<void>
Stores 
$isOpened 
Detects whether the route is currently opened or not.
ts
postRoute.$isOpened; // true/false
 
Signature: Store<boolean>
$params 
Current route params. These params are used as tokens for URL set in router.
If route is not opened, $params will be {}
ts
postRoute.$params; // { postId: 123 }
 
Signature: Store<RouteParams>
$query 
Current route query. These are used to build Query String
If route is not opened, $query will be {}
ts
postRoute.$query; // { foo: 'bar' }
-
Signature: Store<RouteQuery>
`,47),l=[p];function t(r,c,D,y,F,d){return n(),a("div",null,l)}const i=s(e,[["render",t]]);export{C as __pageData,i as default};
+

Signature: Store<RouteQuery>

`,47),l=[p];function t(r,c,D,y,F,A){return n(),a("div",null,l)}const i=s(e,[["render",t]]);export{d as __pageData,i as default}; diff --git a/assets/api_create-route.md.ca274022.lean.js b/assets/api_create-route.md.8755c2db.lean.js similarity index 85% rename from assets/api_create-route.md.ca274022.lean.js rename to assets/api_create-route.md.8755c2db.lean.js index dd210ea..a900817 100644 --- a/assets/api_create-route.md.ca274022.lean.js +++ b/assets/api_create-route.md.8755c2db.lean.js @@ -1 +1 @@ -import{_ as s,c as a,o as n,a as o}from"./app.5d82f9ad.js";const C=JSON.parse('{"title":"createRoute","description":"","frontmatter":{},"headers":[{"level":2,"title":"Common stuff","slug":"common-stuff","link":"#common-stuff","children":[]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[]},{"level":2,"title":"Methods","slug":"methods","link":"#methods","children":[{"level":3,"title":".navigate","slug":"navigate","link":"#navigate","children":[]},{"level":3,"title":".open","slug":"open","link":"#open","children":[]}]},{"level":2,"title":"Events","slug":"events","link":"#events","children":[{"level":3,"title":".opened","slug":"opened","link":"#opened","children":[]},{"level":3,"title":".updated","slug":"updated","link":"#updated","children":[]},{"level":3,"title":".closed","slug":"closed","link":"#closed","children":[]}]},{"level":2,"title":"Stores","slug":"stores","link":"#stores","children":[{"level":3,"title":"$isOpened","slug":"isopened","link":"#isopened","children":[]},{"level":3,"title":"$params","slug":"params","link":"#params","children":[]},{"level":3,"title":"$query","slug":"query","link":"#query","children":[]}]}],"relativePath":"api/create-route.md"}'),e={name:"api/create-route.md"},p=o("",47),l=[p];function t(r,c,D,y,F,d){return n(),a("div",null,l)}const i=s(e,[["render",t]]);export{C as __pageData,i as default}; +import{_ as s,c as a,o as n,a as o}from"./app.5d82f9ad.js";const d=JSON.parse('{"title":"createRoute","description":"","frontmatter":{},"headers":[{"level":2,"title":"Common stuff","slug":"common-stuff","link":"#common-stuff","children":[]},{"level":2,"title":"Usage","slug":"usage","link":"#usage","children":[]},{"level":2,"title":"Methods","slug":"methods","link":"#methods","children":[{"level":3,"title":".navigate","slug":"navigate","link":"#navigate","children":[]},{"level":3,"title":".open","slug":"open","link":"#open","children":[]}]},{"level":2,"title":"Events","slug":"events","link":"#events","children":[{"level":3,"title":".opened","slug":"opened","link":"#opened","children":[]},{"level":3,"title":".updated","slug":"updated","link":"#updated","children":[]},{"level":3,"title":".closed","slug":"closed","link":"#closed","children":[]}]},{"level":2,"title":"Stores","slug":"stores","link":"#stores","children":[{"level":3,"title":"$isOpened","slug":"isopened","link":"#isopened","children":[]},{"level":3,"title":"$params","slug":"params","link":"#params","children":[]},{"level":3,"title":"$query","slug":"query","link":"#query","children":[]}]}],"relativePath":"api/create-route.md"}'),e={name:"api/create-route.md"},p=o("",47),l=[p];function t(r,c,D,y,F,A){return n(),a("div",null,l)}const i=s(e,[["render",t]]);export{d as __pageData,i as default}; diff --git a/examples/browser-extension.html b/examples/browser-extension.html index dea41b7..c73f806 100644 --- a/examples/browser-extension.html +++ b/examples/browser-extension.html @@ -89,7 +89,7 @@ } });

Trigger initializeRouter on extension start and you're good!

- + diff --git a/examples/catch-all.html b/examples/catch-all.html index be31f1c..ae3c730 100644 --- a/examples/catch-all.html +++ b/examples/catch-all.html @@ -25,7 +25,7 @@ })

Then, if you'll do:

ts
fooRoute.open({ param: ['bar', 'baz'] })

It will open /foo/bar/baz, and fooRoute.$params will be { param: ['bar', 'baz'] }

- + diff --git a/examples/data-fetching.html b/examples/data-fetching.html index b49b93d..0823854 100644 --- a/examples/data-fetching.html +++ b/examples/data-fetching.html @@ -147,7 +147,7 @@ route: notAllowedRoute, }); - + diff --git a/examples/micro-frontends.html b/examples/micro-frontends.html index 4097f23..5b26363 100644 --- a/examples/micro-frontends.html +++ b/examples/micro-frontends.html @@ -13,7 +13,7 @@
Atomic Router

Appearance

Return to top
- + diff --git a/examples/protected-route.html b/examples/protected-route.html index 3baf2fa..3eafcd5 100644 --- a/examples/protected-route.html +++ b/examples/protected-route.html @@ -61,7 +61,7 @@ beforeOpen: getUsersFx, });

This will trigger getUsersFx only when user is authorized.

- + diff --git a/examples/query-params-sync.html b/examples/query-params-sync.html index 2c7dd44..7e50614 100644 --- a/examples/query-params-sync.html +++ b/examples/query-params-sync.html @@ -100,7 +100,7 @@ controls }) - + diff --git a/examples/redirect.html b/examples/redirect.html index 533b625..f0a7ad3 100644 --- a/examples/redirect.html +++ b/examples/redirect.html @@ -13,7 +13,7 @@
Atomic Router

Appearance

Return to top
- + diff --git a/examples/ssr.html b/examples/ssr.html index a995b65..aa74091 100644 --- a/examples/ssr.html +++ b/examples/ssr.html @@ -13,7 +13,7 @@
Atomic Router

Appearance

Return to top
- + diff --git a/getting-started.html b/getting-started.html index 84fc417..d5336e8 100644 --- a/getting-started.html +++ b/getting-started.html @@ -63,7 +63,7 @@ } } - + diff --git a/hashmap.json b/hashmap.json index c783e37..8836e7b 100644 --- a/hashmap.json +++ b/hashmap.json @@ -1 +1 @@ -{"api_chain-route.md":"9bd86dae","api_create-route.md":"ca274022","api_create-router-controls.md":"9f889ab7","api_create-router.md":"7b3591e7","api_query-sync.md":"ad280f58","api_redirect.md":"7bc98989","examples_browser-extension.md":"70a9c9fb","examples_catch-all.md":"d3a0e7ce","examples_data-fetching.md":"a6bde7bc","examples_micro-frontends.md":"5199cc84","examples_protected-route.md":"430ac688","examples_query-params-sync.md":"4e5bf71d","examples_redirect.md":"4afbb188","examples_ssr.md":"b6f7cf60","getting-started.md":"8769fb6b","index.md":"d87cb45a","react_api_create-route-view.md":"01a6e9cb","react_api_create-routes-view.md":"ae4f3751","react_api_link.md":"460dd1d3","react_api_route.md":"e066789c","react_api_router-provider.md":"88d54564","react_api_use-link.md":"2e6bce9d","react_installation.md":"9459763f","react_scope.md":"cfa8b781","solidjs_api_create-route-view.md":"e20dee73","solidjs_api_create-routes-view.md":"a43901a3","solidjs_api_link.md":"33d7a74a","solidjs_api_route.md":"d267eb07","solidjs_api_router-provider.md":"5f208ef9","solidjs_installation.md":"41ddd9c4"} +{"api_chain-route.md":"9bd86dae","api_create-route.md":"8755c2db","api_create-router-controls.md":"9f889ab7","api_create-router.md":"7b3591e7","api_query-sync.md":"ad280f58","api_redirect.md":"7bc98989","examples_browser-extension.md":"70a9c9fb","examples_catch-all.md":"d3a0e7ce","examples_data-fetching.md":"a6bde7bc","examples_micro-frontends.md":"5199cc84","examples_protected-route.md":"430ac688","examples_query-params-sync.md":"4e5bf71d","examples_redirect.md":"4afbb188","examples_ssr.md":"b6f7cf60","getting-started.md":"8769fb6b","index.md":"d87cb45a","react_api_create-route-view.md":"01a6e9cb","react_api_create-routes-view.md":"ae4f3751","react_api_link.md":"460dd1d3","react_api_route.md":"e066789c","react_api_router-provider.md":"88d54564","react_api_use-link.md":"2e6bce9d","react_installation.md":"9459763f","react_scope.md":"cfa8b781","solidjs_api_create-route-view.md":"e20dee73","solidjs_api_create-routes-view.md":"a43901a3","solidjs_api_link.md":"33d7a74a","solidjs_api_route.md":"d267eb07","solidjs_api_router-provider.md":"5f208ef9","solidjs_installation.md":"41ddd9c4"} diff --git a/index.html b/index.html index 26cc8f3..393e39b 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
Atomic Router

Appearance

Return to top
On this page

Atomic Router

Simple routing implementation that provides abstraction layer instead of inline URL's and does not break your architecture

  • Type-safe
  • No inline URL's
  • Atomic routes
  • Does not break architecture
  • Framework-agnostic
  • Isomorphic (pass your own history instance and it works everywhere)

Why atomic routes?

There are 3 purposes for using atomic routes:

  • To abstract the application from hard-coded paths
  • To provide you a declarative API for a comfortable work
  • To avoid extra responsibility in app features

View-library bindings

- + diff --git a/react/api/create-route-view.html b/react/api/create-route-view.html index d0fa39c..afb84db 100644 --- a/react/api/create-route-view.html +++ b/react/api/create-route-view.html @@ -46,7 +46,7 @@ }, });

Tip: you can pass a React-component to a view and otherwise properties.

- + diff --git a/react/api/create-routes-view.html b/react/api/create-routes-view.html index 4cf0916..03a79df 100644 --- a/react/api/create-routes-view.html +++ b/react/api/create-routes-view.html @@ -60,7 +60,7 @@ }, });

It will wrap HomePage and PostsPage into BaseLayout, and SinglePost into SinglePostLayout.
This is to avoid extra re-renders when switching between pages with the same layout

- + diff --git a/react/api/link.html b/react/api/link.html index 826483f..4794ab9 100644 --- a/react/api/link.html +++ b/react/api/link.html @@ -44,7 +44,7 @@ ); } - + diff --git a/react/api/route.html b/react/api/route.html index 1f2445b..c44ee71 100644 --- a/react/api/route.html +++ b/react/api/route.html @@ -26,7 +26,7 @@ return <Route route={homeRoute} view={HomePage} />; } - + diff --git a/react/api/router-provider.html b/react/api/router-provider.html index 7ff79ca..5661895 100644 --- a/react/api/router-provider.html +++ b/react/api/router-provider.html @@ -28,7 +28,7 @@ ); };

WARNING

Route, Link, and hooks won't work without RouterProvider

- + diff --git a/react/api/use-link.html b/react/api/use-link.html index f92d34f..bdd493c 100644 --- a/react/api/use-link.html +++ b/react/api/use-link.html @@ -24,7 +24,7 @@ // -> /some/route/1 } - + diff --git a/react/installation.html b/react/installation.html index fd54836..abef975 100644 --- a/react/installation.html +++ b/react/installation.html @@ -15,7 +15,7 @@
Atomic Router

Appearance

Return to top

React-bindings installation

Example on StackBlitz

Install core and react bindings:

bash
npm add atomic-router atomic-router-react

Be sure to install peer dependencies, if it isn't already done yet:

bash
npm add effector effector-react react

TIP

you can also use yarn or pnpm on your choice

- + diff --git a/react/scope.html b/react/scope.html index 884b842..30a7010 100644 --- a/react/scope.html +++ b/react/scope.html @@ -18,7 +18,7 @@ // Scoped imports (correct for SSR) import { Route, createRoutesView } from 'atomic-router-react/scope'; - + diff --git a/solidjs/api/create-route-view.html b/solidjs/api/create-route-view.html index 8d95abb..2690f50 100644 --- a/solidjs/api/create-route-view.html +++ b/solidjs/api/create-route-view.html @@ -48,7 +48,7 @@ }, });

Tip: you can pass a Solid-component to a view and otherwise properties.

- + diff --git a/solidjs/api/create-routes-view.html b/solidjs/api/create-routes-view.html index bc5df50..b7625d6 100644 --- a/solidjs/api/create-routes-view.html +++ b/solidjs/api/create-routes-view.html @@ -50,7 +50,7 @@ return <RoutesView routes={routes} />; } - + diff --git a/solidjs/api/link.html b/solidjs/api/link.html index 7595360..fb10b9a 100644 --- a/solidjs/api/link.html +++ b/solidjs/api/link.html @@ -44,7 +44,7 @@ ); } - + diff --git a/solidjs/api/route.html b/solidjs/api/route.html index f70c7a7..b9253cb 100644 --- a/solidjs/api/route.html +++ b/solidjs/api/route.html @@ -26,7 +26,7 @@ return <Route route={homeRoute} view={HomePage} />; } - + diff --git a/solidjs/api/router-provider.html b/solidjs/api/router-provider.html index 36f9ebc..01fdf76 100644 --- a/solidjs/api/router-provider.html +++ b/solidjs/api/router-provider.html @@ -28,7 +28,7 @@ ); }

WARNING

Route, Link, and hooks won't work without RouterProvider

- + diff --git a/solidjs/installation.html b/solidjs/installation.html index 98f92e6..25c8058 100644 --- a/solidjs/installation.html +++ b/solidjs/installation.html @@ -15,7 +15,7 @@
Atomic Router

Appearance

Return to top

SolidJS-bindings installation

SolidJS bindings for atomic-router

Install core and solid bindings:

bash
npm add atomic-router atomic-router-solid

Be sure to install peer dependencies, if it isn't already done yet:

bash
npm add effector effector-solid solid-js

TIP

you can also use yarn or pnpm on your choice

- +