Skip to content

Commit 09bea0f

Browse files
birkskyumbirkskyum
committed
Update to router 0.13.0
1 parent 408138b commit 09bea0f

24 files changed

Lines changed: 116 additions & 119 deletions

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"@solid-primitives/storage": "^2.1.4",
3333
"@solid-primitives/utils": "^6.2.3",
3434
"@solid.js/docs": "^1.0.56",
35-
"@solidjs/router": "^0.8.3",
35+
"@solidjs/router": "^0.13.1",
3636
"@types/shopify-buy": "npm:@brandboostinggmbh/shopify-buy-types@^2.14.6",
3737
"babel-preset-solid": "1.8.16",
3838
"fuse.js": "^7.0.0",

‎pnpm-lock.yaml‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/App.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
11
import { Suspense } from 'solid-js';
2-
import { useRoutes, Router } from '@solidjs/router';
2+
import { Router } from '@solidjs/router';
33
import { routes } from './routes';
44
import Header from './components/Header';
55
import { AppContextProvider } from './AppContext';
66
import { preventSmoothScrollOnTabbing } from './utils';
77

88
export const App = () => {
9-
const Routes = useRoutes(routes);
109

1110
preventSmoothScrollOnTabbing();
1211

1312
return (
1413
<main class="min-h-screen">
15-
<Router>
14+
<Router root={(props)=>(
1615
<AppContextProvider>
1716
<Header />
1817
{/* two div wrappers to make page animation work and performant */}
1918
<div id="main-content">
2019
<div>
2120
{/* <TransitionRoutes> */}
2221
<Suspense>
23-
<Routes />
22+
{props.children}
2423
</Suspense>
2524
{/* </TransitionRoutes> */}
2625
</div>
2726
</div>
2827
</AppContextProvider>
28+
)}>
29+
{routes}
2930
</Router>
3031
</main>
3132
);

‎src/components/Header.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
createMemo,
1010
} from 'solid-js';
1111
import { Transition } from 'solid-transition-group';
12-
import { useLocation, Link } from '@solidjs/router';
12+
import { useLocation, A } from '@solidjs/router';
1313
import Nav from './Nav';
1414
import { useAppState } from '../AppContext';
1515
import logo from '../assets/logo.svg';
@@ -104,31 +104,31 @@ const Header: ParentComponent<{ title?: string }> = () => {
104104
</h2>
105105
<div class="space-y-2 md:flex md:space-y-0 md:space-x-2">
106106
<div>
107-
<Link
107+
<A
108108
href="/guides/getting-started"
109109
class="bg-solid-medium flex justify-center items-center px-5 py-3 text-md rounded-lg hover:bg-solid-gray transition"
110110
>
111111
{t('home.get_started')}
112112
<Icon stroke-width="3" class="w-5" path={chevronRight} />
113-
</Link>
113+
</A>
114114
</div>
115115
<div class="flex flex-col space-y-1">
116-
<Link
116+
<A
117117
target="_blank"
118118
href="https://www.youtube.com/watch?v=hw3Bx5vxKl0"
119119
class="bg-solid-light flex items-center px-5 py-3 text-md rounded-lg hover:bg-solid-gray transition"
120120
>
121121
<Icon stroke-width="2" class="w-6 mr-2" path={play} />
122122
{t('home.intro_video')}
123-
</Link>
124-
<Link
123+
</A>
124+
<A
125125
target="_blank"
126126
href="https://www.youtube.com/watch?v=cELFZQAMdhQ"
127127
class="bg-solid-light bg-opacity-50 flex items-center px-5 py-3 text-md rounded-lg hover:bg-solid-gray transition"
128128
>
129129
<Icon stroke-width="2" class="w-6 mr-2" path={play} />
130130
{t('home.intro_video_advanced')}
131-
</Link>
131+
</A>
132132
</div>
133133
</div>
134134
</section>

‎src/components/Nav/MenuLink.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createEventListener } from '@solid-primitives/event-listener';
2-
import { NavLink } from '@solidjs/router';
2+
import { A } from '@solidjs/router';
33
import { batch, createSignal, JSX, onMount, ParentComponent, Show } from 'solid-js';
44
import { setRouteReadyState, page, reflow } from '../../utils';
55

@@ -86,7 +86,7 @@ export const MenuLink: ParentComponent<MenuLinkProps> = (props) => {
8686

8787
return (
8888
<li ref={wrapperEl}>
89-
<NavLink
89+
<A
9090
href={props.path}
9191
target={props.external ? '_blank' : undefined}
9292
class="inline-flex items-center transition text-[15px] dark:hover:bg-solid-darkLighterBg sm:text-base m-0 sm:m-1 px-3 sm:px-4 py-3 rounded pointer-fine:hover:text-white pointer-fine:hover:bg-solid-medium whitespace-nowrap"
@@ -111,7 +111,7 @@ export const MenuLink: ParentComponent<MenuLinkProps> = (props) => {
111111
/>
112112
</svg>
113113
</Show>
114-
</NavLink>
114+
</A>
115115
</li>
116116
);
117117
};

‎src/components/Nav/index.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
createEffect,
1111
} from 'solid-js';
1212
import { computePosition, autoUpdate, shift, size, flip, offset } from '@floating-ui/dom';
13-
import { Link, NavLink } from '@solidjs/router';
13+
import { A } from '@solidjs/router';
1414
import { makeIntersectionObserver } from '@solid-primitives/intersection-observer';
1515
import { debounce } from '@solid-primitives/scheduled';
1616
import Dismiss from 'solid-dismiss';
@@ -186,7 +186,7 @@ const Nav: ParentComponent<{ showLogo?: boolean; filled?: boolean }> = (props) =
186186
}`}
187187
ref={logoEl}
188188
>
189-
<Link
189+
<A
190190
href="/"
191191
onClick={onClickLogo}
192192
noScroll
@@ -199,7 +199,7 @@ const Nav: ParentComponent<{ showLogo?: boolean; filled?: boolean }> = (props) =
199199
src={ukraine}
200200
alt=""
201201
/>
202-
</Link>
202+
</A>
203203
<span id="ukraine-support" hidden>
204204
{t('home.ukraine.support')}
205205
</span>
@@ -294,7 +294,7 @@ const Nav: ParentComponent<{ showLogo?: boolean; filled?: boolean }> = (props) =
294294
}
295295
}
296296
>
297-
<NavLink
297+
<A
298298
onClick={() => setSubnav(null)}
299299
class="px-6 py-5 w-full block"
300300
href={link.path}
@@ -303,7 +303,7 @@ const Nav: ParentComponent<{ showLogo?: boolean; filled?: boolean }> = (props) =
303303
<Show when={link.description}>
304304
<span class="block text-sm text-gray-400">{link.description}</span>
305305
</Show>
306-
</NavLink>
306+
</A>
307307
</li>
308308
)}
309309
</For>

‎src/pages/Blog.data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { RouteDataFunc } from '@solidjs/router';
1+
import { RouteLoadFunc } from '@solidjs/router';
22
import type { Component } from 'solid-js';
33
import { SpotifyProps, TweetProps, TwitchProps, YouTubeProps } from 'solid-social';
44

@@ -96,7 +96,7 @@ export interface BlogData {
9696
articles: { [key: string]: BlogInfo };
9797
}
9898

99-
export const BlogData: RouteDataFunc<BlogData> = () => {
99+
export const BlogData: RouteLoadFunc<BlogData> = () => {
100100
return {
101101
get articles() {
102102
return list;

‎src/pages/Blog.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import { Component, For } from 'solid-js';
22
import Footer from '../components/Footer';
3-
import { useRouteData, NavLink } from '@solidjs/router';
3+
import { A } from '@solidjs/router';
44
import { useRouteReadyState } from '../utils/routeReadyState';
55
import type { BlogData } from './Blog.data';
66

7-
const Blog: Component = () => {
8-
const data = useRouteData<BlogData>();
7+
const Blog: Component<{data:BlogData}> = (props) => {
8+
9+
const data = props.data;
10+
911
useRouteReadyState();
1012

1113
const sortedArticles = Object.entries(data.articles).sort(
@@ -19,7 +21,7 @@ const Blog: Component = () => {
1921
<div class="space-y-10">
2022
<For each={sortedArticles}>
2123
{([id, article]) => (
22-
<NavLink
24+
<A
2325
href={`/blog/${id}`}
2426
class="block px-3 lg:px-0 text-md mx-auto mb-10 pb-10 text-center"
2527
>
@@ -31,7 +33,7 @@ const Blog: Component = () => {
3133
<div class="text-xs mt-3">
3234
By {article.author} on {new Date(article.date).toDateString()}
3335
</div>
34-
</NavLink>
36+
</A>
3537
)}
3638
</For>
3739
</div>

‎src/pages/BlogArticle.data.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createResource } from 'solid-js';
2-
import { RouteDataFunc } from '@solidjs/router';
2+
import { RouteLoadFunc } from '@solidjs/router';
33
import { BlogInfo, list, MDXComponent } from './Blog.data';
44

55
export interface BlogArticleData {
@@ -9,7 +9,7 @@ export interface BlogArticleData {
99
article?: MDXComponent;
1010
}
1111

12-
export const BlogArticleData: RouteDataFunc<BlogArticleData> = (props) => {
12+
export const BlogArticleData: RouteLoadFunc<BlogArticleData> = (props) => {
1313
const [article] = createResource(async () => (await list[props.params.slug].body()).default);
1414
return {
1515
get slug() {

‎src/pages/BlogArticle.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { Component, Show, createMemo } from 'solid-js';
2-
import { useRouteData, NavLink } from '@solidjs/router';
2+
import { A } from '@solidjs/router';
33
import { useRouteReadyState } from '../utils/routeReadyState';
44
import Footer from '../components/Footer';
55
import { useAppState } from '../AppContext';
66
import { YouTube, Tweet, Twitch, Spotify } from 'solid-social';
77
import type { BlogArticleData } from './BlogArticle.data';
88

9-
export const BlogArticle: Component = () => {
9+
export const BlogArticle: Component<{data:BlogArticleData}> = (props) => {
10+
const data = props.data;
1011
const ctx = useAppState();
1112

12-
const data = useRouteData<BlogArticleData>();
1313
useRouteReadyState();
1414
const chevron = createMemo(() => (ctx.dir == 'rtl' ? 'chevron-right' : 'chevron-left'));
1515

@@ -55,9 +55,9 @@ export const BlogArticle: Component = () => {
5555
</article>
5656
<hr class="mt-10 w-3/6 mx-auto" />
5757
<div class="flex flex-row justify-center mt-10">
58-
<NavLink href="/blog">
58+
<A href="/blog">
5959
<figure class={`inline-block chevron ${chevron()}`} /> Back to the SolidJS Blog
60-
</NavLink>
60+
</A>
6161
</div>
6262
</div>
6363
</Show>

0 commit comments

Comments
 (0)