Merge pull request #30 from sectsect/feature/migrate-solid-router

chore: add missing package 'postcss-nesting'

Author: sectsect

apps/solidjs-boilerplate/package.json

@@ -67,6 +67,7 @@
     "postcss-flexbugs-fixes": "^5.0.2",
     "postcss-hexrgba": "^2.1.0",
     "postcss-import": "^16.0.0",
+    "postcss-nesting": "^12.1.4",
     "postcss-preset-env": "^9.3.0",
     "postcss-pseudo-is": "^0.3.0",
     "postcss-pxtorem": "^6.1.0",
@@ -88,7 +89,7 @@
   "dependencies": {
     "@sect/solid-hiding-header": "workspace:*",
     "@solidjs/meta": "^0.29.3",
-    "@solidjs/router": "^0.9.1",
+    "@solidjs/router": "^0.13.3",
     "@tanstack/solid-query": "^5.17.19",
     "escape-goat": "^4.0.0",
     "isomorphic-dompurify": "^2.2.0",

apps/solidjs-boilerplate/src/App.tsx

@@ -1,8 +1,7 @@
 import type { Component } from 'solid-js';
-import { lazy } from 'solid-js';
 
 import { Meta } from '@solidjs/meta';
-import { Routes, Route } from '@solidjs/router';
+import type { RouteSectionProps } from '@solidjs/router';
 import { Toaster } from 'solid-toast';
 
 import Footer from '@/components/modules/Footer/Footer';
@@ -11,15 +10,8 @@ import { AppConfig } from '@/constants/AppConfig';
 
 const { siteName, locale } = AppConfig;
 
-const HomeContent = lazy(
-  () => import('@/components/modules/HomeContent/HomeContent'),
-);
-const PostList = lazy(() => import('@/components/modules/PostList/PostList'));
-const PostContent = lazy(
-  () => import('@/components/modules/PostContent/PostContent'),
-);
-
-const App: Component = () => {
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const App: Component<RouteSectionProps<unknown>> = props => {
   return (
     <>
       <Meta name="twitter:card" content="summary_large_image" />
@@ -30,13 +22,7 @@ const App: Component = () => {
 
       <Header />
       <main class="flex-1 text-xl">
-        <article>
-          <Routes>
-            <Route path="/" component={HomeContent} />
-            <Route path="/post" component={PostList} />
-            <Route path="/post/:id" component={PostContent} />
-          </Routes>
-        </article>
+        <article>{props.children}</article>
       </main>
       <Footer />
       <Toaster position="bottom-center" />

apps/solidjs-boilerplate/src/components/modules/Counter/Counter.test.tsx

@@ -1,4 +1,4 @@
-import { Router } from '@solidjs/router';
+import { Route, Router } from '@solidjs/router';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { render, screen } from '@solidjs/testing-library';
 import userEvent from '@testing-library/user-event';
@@ -10,7 +10,14 @@ describe('Counter component', () => {
   test('should be updated the count on click Increment button', async () => {
     // const result = render(() => <Counter />);
     render(() => <Counter />, {
-      wrapper: props => <Router>{props.children}</Router>,
+      wrapper: props => (
+        <Router
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+          root={props => <>{props.children}</>}
+        >
+          <Route path="/" component={() => <>{props.children}</>} />
+        </Router>
+      ),
     });
     // screen.getByRole('button', {name: '' });
 

apps/solidjs-boilerplate/src/components/modules/Footer/Footer.test.tsx

@@ -1,4 +1,4 @@
-import { Router } from '@solidjs/router';
+import { Route, Router } from '@solidjs/router';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { render, screen } from '@solidjs/testing-library';
 import { expect, describe, test } from 'vitest';
@@ -9,15 +9,29 @@ describe('Footer component', () => {
   test('should has copyright text', () => {
     // const result = render(() => <Footer />);
     render(() => <Footer />, {
-      wrapper: props => <Router>{props.children}</Router>,
+      wrapper: props => (
+        <Router
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+          root={props => <>{props.children}</>}
+        >
+          <Route path="/" component={() => <>{props.children}</>} />
+        </Router>
+      ),
     });
     const copyElm = screen.getByText(/^© Copyright$/i); // full string match, ignore case
     expect(copyElm).toBeInTheDocument();
   });
 
   test('should has classes', async () => {
     render(() => <Footer />, {
-      wrapper: props => <Router>{props.children}</Router>,
+      wrapper: props => (
+        <Router
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+          root={props => <>{props.children}</>}
+        >
+          <Route path="/" component={() => <>{props.children}</>} />
+        </Router>
+      ),
     });
     const footerElm = screen.getByRole('contentinfo', { name: '' });
     await expect(footerElm).toHaveClass(

apps/solidjs-boilerplate/src/components/modules/HomeContent/HomeContent.test.tsx

@@ -1,22 +1,27 @@
 import { MetaProvider } from '@solidjs/meta';
-import { Router } from '@solidjs/router';
+import { Route, Router } from '@solidjs/router';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { render, screen } from '@solidjs/testing-library';
 import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';
 import { expect, describe, test } from 'vitest';
 
 import HomeContent from '@/components/modules/HomeContent/HomeContent';
 
-describe('Footer component', () => {
-  test('should has copyright text', () => {
+describe('HomeContent component', () => {
+  test('should has heading text', () => {
     const queryClient = new QueryClient();
 
     // const result = render(() => <HomeContent />);
     render(() => <HomeContent />, {
       wrapper: props => (
         <MetaProvider>
           <QueryClientProvider client={queryClient}>
-            <Router>{props.children}</Router>
+            <Router
+              // eslint-disable-next-line @typescript-eslint/no-shadow
+              root={props => <>{props.children}</>}
+            >
+              <Route path="/" component={() => <>{props.children}</>} />
+            </Router>
           </QueryClientProvider>
         </MetaProvider>
       ),

apps/solidjs-boilerplate/src/components/modules/PostList/PostList.test.tsx

@@ -1,7 +1,7 @@
 import type { JSX } from 'solid-js';
 
 import { MetaProvider } from '@solidjs/meta';
-import { Router } from '@solidjs/router';
+import { Route, Router } from '@solidjs/router';
 import { render, renderHook, screen, waitFor } from '@solidjs/testing-library';
 import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';
 import { describe, test, beforeEach } from 'vitest';
@@ -17,7 +17,12 @@ describe('PostList component', () => {
       wrapper: props => (
         <MetaProvider>
           <QueryClientProvider client={queryClient}>
-            <Router>{props.children}</Router>
+            <Router
+              // eslint-disable-next-line @typescript-eslint/no-shadow
+              root={props => <>{props.children}</>}
+            >
+              <Route path="/" component={() => <>{props.children}</>} />
+            </Router>
           </QueryClientProvider>
         </MetaProvider>
       ),
@@ -40,7 +45,12 @@ describe('PostList component', () => {
     // @ https://github.com/testing-library/react-hooks-testing-library/issues/23#issuecomment-477542354
     const wrapper = (props: { children: JSX.Element }) => (
       <QueryClientProvider client={queryClient}>
-        <Router>{props.children}</Router>
+        <Router
+          // eslint-disable-next-line @typescript-eslint/no-shadow
+          root={props => <>{props.children}</>}
+        >
+          <Route path="/" component={() => <>{props.children}</>} />
+        </Router>
       </QueryClientProvider>
     );
 

apps/solidjs-boilerplate/src/index.tsx

@@ -1,21 +1,33 @@
 /* @refresh reload */
 import '@/styles/globals.css';
 import 'solid-devtools';
+import { lazy } from 'solid-js';
+
 import { MetaProvider } from '@solidjs/meta';
-import { Router } from '@solidjs/router';
+import { Router, Route } from '@solidjs/router';
 import { QueryClient, QueryClientProvider } from '@tanstack/solid-query';
 import { render } from 'solid-js/web';
 
 import App from '@/App';
 
+const HomeContent = lazy(
+  () => import('@/components/modules/HomeContent/HomeContent'),
+);
+const PostList = lazy(() => import('@/components/modules/PostList/PostList'));
+const PostContent = lazy(
+  () => import('@/components/modules/PostContent/PostContent'),
+);
+
 const queryClient = new QueryClient();
 
 render(
   () => (
     <MetaProvider>
       <QueryClientProvider client={queryClient}>
-        <Router>
-          <App />
+        <Router root={App}>
+          <Route path="/" component={HomeContent} />
+          <Route path="/post" component={PostList} />
+          <Route path="/post/:id" component={PostContent} />
         </Router>
       </QueryClientProvider>
     </MetaProvider>