Merge pull request #115 from vikejs/phonzammi/dev

chore: minor update docs
vikejs · Sep 5, 2024 · 3ba7dad · 3ba7dad
2 parents 832abb8 + 7745f85
commit 3ba7dad
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -8,17 +8,16 @@ Build `vike-solid`:
 git clone https://github.com/vikejs/vike-solid.git
 cd vike-solid/ && pnpm install
 pnpm build
-cd ../
 ```
 
 ## Validating
 
 ### Running the examples
 
-You can then test your modifications against an example, e.g. `examples/basic/`:
+You can then test your modifications against an example, e.g. `examples/full/`:
 
 ```bash
-cd examples/basic/
+cd examples/full/
 pnpm dev
 cd ../../
 ```
diff --git a/README.md b/README.md
@@ -4,6 +4,9 @@
   - Docs: [vike.dev/vike-solid](https://vike.dev/vike-solid)
   - Version history: [CHANGELOG.md](packages/vike-solid/CHANGELOG.md)
   - Source code: [packages/vike-solid/](packages/vike-solid)
-
+- `vike-solid-query` ([TanStack Query](https://tanstack.com/query) integration)
+  - Docs: [README.md](packages/vike-solid-query/README.md)
+  - Version history: [CHANGELOG.md](packages/vike-solid-query/CHANGELOG.md)
+  - Source code: [packages/vike-solid-query/](packages/vike-solid-query)
 > [!NOTE]
 > The source code is [small, simple, and highly polished](https://vike.dev/vike-solid#under-the-hood). Contributing is easy and welcome, see [CONTRIBUTING.md](CONTRIBUTING.md) to get started.
diff --git a/packages/vike-solid-query/README.md b/packages/vike-solid-query/README.md
@@ -20,6 +20,7 @@ Enables your Solid components to fetch data using [TanStack Query](https://tanst
 
 1. `npm install @tanstack/solid-query vike-solid-query`
 2. Extend `+config.js`:
+
    ```js
    // pages/+config.js
 
@@ -36,7 +37,7 @@ Enables your Solid components to fetch data using [TanStack Query](https://tanst
 
 ## Basic usage
 
-```jsx
+```tsx
 import { createQuery } from "@tanstack/solid-query";
 import { Suspense } from "solid-js";
 
@@ -58,29 +59,33 @@ const Movie = (props: { id }) => {
 
 ## `QueryBoundary`
 
-```jsx
-// Define loading fallback
+```tsx
+// Define the loading fallback
 <QueryBoundary query={query} loadingFallback={Loading}>
     {(data) => <div>{data.something}</div>}
 </QueryBoundary>
-// Define loading and error fallback 
+// Define the loading and error fallback 
 <QueryBoundary query={query} loadingFallback={Loading} errorFallback={Error}>
     {(data) => <div>{data.something}</div>}
 </QueryBoundary>
-// Define loading, error and not found fallback 
+// Define the loading, error and not found fallback 
 <QueryBoundary query={query} loadingFallback={Loading} errorFallback={Error} notFoundFallback={NotFound}>
     {(data) => <div>{data.something}</div>}
 </QueryBoundary>
 ```
 
-> [!NOTE] Types
-> `query: CreateQueryResult<T, Error>;`  
-> `loadingFallback?: JSX.Element;`  
-> `notFoundFallback?: JSX.Element;`  
-> `errorFallback?: JSX.Element | ((err: any, reset: () => void) => JSX.Element);`  
-> `children: (data: Exclude<T, null | false | undefined>) => JSX.Element;`
+**Types :**
+```js
+query: CreateQueryResult<T, Error>;  
+loadingFallback?: JSX.Element;  
+notFoundFallback?: JSX.Element;  
+errorFallback?: JSX.Element | ((err: any, reset: () => void) => JSX.Element);  
+children: (data: Exclude<T, null | false | undefined>) => JSX.Element;
+```
 
 ```tsx
+// Movie.tsx
+
 import { createQuery } from "@tanstack/solid-query";
 import { QueryBoundary } from "vike-solid-query";
 
@@ -124,7 +129,7 @@ function Movie(props: { id: string }) {
 
 To set tags such as `<title>` and `<meta name="description">` based on fetched data, you can use [`<Config>`, `<Head>`, and `useConfig()`](https://vike.dev/useConfig).
 
-```js
+```tsx
 import { createQuery } from "@tanstack/solid-query";
 import { Config } from 'vike-solid/Config'
 import { Head } from 'vike-solid/Head'