Merge pull request #10 from atomic-router/feat/update-0.8

feat: version 0.8 sync

demo/app/index.tsx

@@ -4,13 +4,14 @@ import { HomePage } from '../pages/home';
 import { NotFound } from '../pages/not-found';
 import { PostsList } from '../pages/posts-list';
 import { PostsSingle } from '../pages/posts-single';
+import { Layout } from '../shared/ui/layout';
 
 import { router } from './routing';
 
 const RoutesView = createRoutesView({
   routes: [
-    { route: HomePage.route, view: HomePage.Page },
-    { route: PostsList.route, view: PostsList.Page },
+    { route: HomePage.route, view: HomePage.Page, layout: Layout },
+    { route: PostsList.route, view: PostsList.Page, layout: Layout },
     { route: PostsSingle.route, view: PostsSingle.Page },
   ],
   otherwise: NotFound.Page,

demo/shared/ui/layout.tsx

@@ -0,0 +1,10 @@
+import type { ParentProps } from 'solid-js';
+
+export function Layout(props: ParentProps) {
+  return (
+    <div>
+      Layout!
+      {props.children}
+    </div>
+  );
+}

src/create-routes-view.tsx

@@ -1,12 +1,20 @@
 import type { RouteInstance, RouteParams } from 'atomic-router';
-import { Component, createMemo, Match, mergeProps, Switch } from 'solid-js';
-import { Dynamic, For } from 'solid-js/web';
+import {
+  Component,
+  createMemo,
+  JSXElement,
+  Match,
+  mergeProps,
+  Switch,
+} from 'solid-js';
+import { Dynamic, For, Show } from 'solid-js/web';
 
 import { createIsOpened } from './create-is-opened';
 
 interface RouteRecord<Props, Params extends RouteParams> {
   route: RouteInstance<Params> | RouteInstance<Params>[];
   view: Component<Props>;
+  layout?: Component<{ children: JSXElement }>;
 }
 
 export interface RoutesViewConfig {
@@ -36,7 +44,16 @@ export function createRoutesView<Config extends RoutesViewConfig>(
         <For each={routes()}>
           {(route) => (
             <Match when={route.isOpened} keyed={false}>
-              <Dynamic component={route.view} />
+              <Show
+                when={route.layout}
+                keyed
+                fallback={<Dynamic component={route.view} />}>
+                {(Layout) => (
+                  <Dynamic component={Layout}>
+                    <Dynamic component={route.view} />
+                  </Dynamic>
+                )}
+              </Show>
             </Match>
           )}
         </For>

src/link.tsx

@@ -10,15 +10,15 @@ import { createMemo, JSX, mergeProps, Show, splitProps } from 'solid-js';
 
 import { useRouter } from './router-provider';
 
-type Props<Params extends RouteParams> = {
+export type LinkProps<Params extends RouteParams> = {
   to: RouteInstance<Params> | string;
   params?: Params;
   query?: RouteQuery;
   activeClass?: string;
   inactiveClass?: string;
 } & Exclude<JSX.AnchorHTMLAttributes<HTMLAnchorElement>, 'href'>;
 
-export function Link<Params extends RouteParams>(props: Props<Params>) {
+export function Link<Params extends RouteParams>(props: LinkProps<Params>) {
   props = mergeProps({ activeClass: 'active' }, props);
 
   const toIsString = createMemo(() => typeof props.to === 'string');