From 93674e12a36b168085a3007c7533cc6be64809f1 Mon Sep 17 00:00:00 2001 From: Valerio Ageno Date: Wed, 11 Dec 2024 08:55:26 +0100 Subject: [PATCH 1/6] docs: add dynamic routes page --- .../src/components/sidebar/config.ts | 10 +++--- .../documentation/routing/dynamic-routes.mdx | 35 +++++++++++++++++-- 2 files changed, 38 insertions(+), 7 deletions(-) diff --git a/apps/documentation/src/components/sidebar/config.ts b/apps/documentation/src/components/sidebar/config.ts index ad8cd663..8dd4f8bb 100644 --- a/apps/documentation/src/components/sidebar/config.ts +++ b/apps/documentation/src/components/sidebar/config.ts @@ -111,6 +111,11 @@ export const sidebarElements: Array = [ label: 'Defining routes', href: '/documentation/routing/defining-routes', }, + { + type: 'element', + label: 'Dynamic routes', + href: '/documentation/routing/dynamic-routes', + }, { type: 'element', label: 'Link and navigation', @@ -126,11 +131,6 @@ export const sidebarElements: Array = [ label: 'Loading state', href: '/documentation/routing/loading-state', }, - { - type: 'element', - label: 'Dynamic routes', - href: '/documentation/routing/dynamic-routes', - }, { type: 'element', label: 'Layouts', diff --git a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx index 0450543d..6fac79f3 100644 --- a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx @@ -9,6 +9,37 @@ import Breadcrumbs, { Element } from '@/components/breadcrumbs' -# Loading state +# Dynamic routes -Todo +> 🚧 Only available for SSR apps. This feature will be soon available also for static generated apps. + +When you don't know the exact segment names ahead of time and +want to create routes from dynamic data, you can use +Dynamic Segments that are filled in at request time. + +## Convention + +A Dynamic Segment can be created by wrapping a +file or folder name in square brackets: `[segmentName]`. For example, `[id]` or `[slug]`. + +## Example + +For example, a blog could include the following route `src/routes/blog/[slug].tsx` +where [slug] is the Dynamic Segment for blog posts. + +```tsx +import { useRouter } from 'tuono' + +export default function Page() { + const router = useRouter() + return

Post: {router.pathname}

+} +``` + +## Catch all segments + +Dynamic Segments can be extended to catch-all subsequent segments by adding +an ellipsis inside the brackets `[...segmentName]`. + +For example, `src/routes/shop/[...slug].tsx` will match `/shop/clothes`, +but also `/shop/clothes/tops`, `/shop`, `/shop/clothes/tops/t-shirts`, and so on. From b689ba53049073f0aa3a48b670db61da092c246c Mon Sep 17 00:00:00 2001 From: Marco Pasqualetti Date: Wed, 11 Dec 2024 13:35:56 +0100 Subject: [PATCH 2/6] docs(dynamic-routes): improve working and format --- .../documentation/routing/dynamic-routes.mdx | 32 +++++++++++++------ 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx index 6fac79f3..72e0de65 100644 --- a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx @@ -13,19 +13,25 @@ import Breadcrumbs, { Element } from '@/components/breadcrumbs' > 🚧 Only available for SSR apps. This feature will be soon available also for static generated apps. -When you don't know the exact segment names ahead of time and -want to create routes from dynamic data, you can use -Dynamic Segments that are filled in at request time. +When the exact segment names are not known in advance and you need to generate routes from dynamic data, +you can use dynamic segments, which are populated at request time. ## Convention -A Dynamic Segment can be created by wrapping a -file or folder name in square brackets: `[segmentName]`. For example, `[id]` or `[slug]`. +A dynamic segment can be created by wrapping a +file or a folder name in square brackets: `[segmentName]`. -## Example +You are going to probably use something like: -For example, a blog could include the following route `src/routes/blog/[slug].tsx` -where [slug] is the Dynamic Segment for blog posts. +- `[id]` +- `[slug]` + +### Example + +Assuming you're working on a blog with multiple posts, +you can use a dynamic segment to define the post page: `src/routes/blog/[slug].tsx`. + +The `[slug]` is the dynamic segment which will be used to identify individual blog posts. ```tsx import { useRouter } from 'tuono' @@ -41,5 +47,11 @@ export default function Page() { Dynamic Segments can be extended to catch-all subsequent segments by adding an ellipsis inside the brackets `[...segmentName]`. -For example, `src/routes/shop/[...slug].tsx` will match `/shop/clothes`, -but also `/shop/clothes/tops`, `/shop`, `/shop/clothes/tops/t-shirts`, and so on. +Given the following `src/routes/shop/[...slug].tsx`, +the following paths will be matched: + +- `/shop/clothes` +- `/shop/clothes/tops` +- `/shop` +- `/shop/clothes/tops/t-shirts` +- and so on. From bb4a430450ef6725f27e73b8c1684ae5442471c9 Mon Sep 17 00:00:00 2001 From: Valerio Ageno Date: Sat, 14 Dec 2024 10:40:41 +0100 Subject: [PATCH 3/6] feat: update doc tuono version to v0.16.2 --- apps/documentation/Cargo.toml | 2 +- apps/documentation/package.json | 2 +- apps/documentation/tuono.config.ts | 3 --- pnpm-lock.yaml | 34 +++++++++++++++--------------- 4 files changed, 19 insertions(+), 22 deletions(-) diff --git a/apps/documentation/Cargo.toml b/apps/documentation/Cargo.toml index 92b94824..3aee1cad 100644 --- a/apps/documentation/Cargo.toml +++ b/apps/documentation/Cargo.toml @@ -8,7 +8,7 @@ name = "tuono" path = ".tuono/main.rs" [dependencies] -tuono_lib = "0.15.0" +tuono_lib = "0.16.2" glob = "0.3.1" time = { version = "0.3", features = ["macros"] } serde = { version = "1.0.202", features = ["derive"] } diff --git a/apps/documentation/package.json b/apps/documentation/package.json index e87a90b9..1cde779c 100644 --- a/apps/documentation/package.json +++ b/apps/documentation/package.json @@ -19,7 +19,7 @@ "clsx": "2.1.1", "react": "18.3.1", "react-dom": "18.3.1", - "tuono": "npm:tuono@0.16.0" + "tuono": "npm:tuono@0.16.2" }, "devDependencies": { "@mdx-js/rollup": "3.1.0", diff --git a/apps/documentation/tuono.config.ts b/apps/documentation/tuono.config.ts index 2c877eb4..1f516213 100644 --- a/apps/documentation/tuono.config.ts +++ b/apps/documentation/tuono.config.ts @@ -7,9 +7,6 @@ const config: TuonoConfig = { '@': 'src', '@tabler/icons-react': '@tabler/icons-react/dist/esm/icons/index.mjs', }, - optimizeDeps: { - exclude: ['@mdx-js/react'], - }, plugins: [ { enforce: 'pre', ...mdx({ providerImportSource: '@mdx-js/react' }) }, ], diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 15d91848..21200f3c 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -84,8 +84,8 @@ importers: specifier: 18.3.1 version: 18.3.1(react@18.3.1) tuono: - specifier: npm:tuono@0.16.0 - version: 0.16.0(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sugarss@4.0.1(postcss@8.4.49)) + specifier: npm:tuono@0.16.2 + version: 0.16.2(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sugarss@4.0.1(postcss@8.4.49)) devDependencies: '@mdx-js/rollup': specifier: 3.1.0 @@ -3111,20 +3111,20 @@ packages: tslib@2.8.1: resolution: {integrity: sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==} - tuono-fs-router-vite-plugin@0.16.0: - resolution: {integrity: sha512-NjMNhCp9vqladhelMI8Whhp6qhwvoyBRUUyeJpqfRVp/W/vwL/+za6iciscWQ1+yVMEDjY5lnMGA0yQuz0cnIg==} + tuono-fs-router-vite-plugin@0.16.2: + resolution: {integrity: sha512-D0SHBX4IT1eQGeNNmXUYpnAtwVPutmnboMGRc0Tsf6tK2PjHY4Q10X2vUwFXm9Ps1mg0DHdAHl/90b4mtvG6Xg==} - tuono-lazy-fn-vite-plugin@0.16.0: - resolution: {integrity: sha512-+ab7pbRrqGqYPePHdPvMGZMWsnEJi2TPTvkHXwV5dcflpRvhhrCppC7QbG5lk24HD+hCFryWpOiZlfzf/j6p+w==} + tuono-lazy-fn-vite-plugin@0.16.2: + resolution: {integrity: sha512-LFIO73qG9ckKdPmtT79vnwjcnFiRm2ntyoJU2Ce3/BNPVgDR1McITjEkeWwSwwRXiMDTX1cb7uDabprZcV8qSg==} - tuono-router@0.16.0: - resolution: {integrity: sha512-JuTXoSjjgKCbFWJQTRQA2NyN9fHqasXrE1+vC3TV1PJ5P66EM2f4zlAzwMkUNbeGWCl/Kihi/gKT1pVqnieUFA==} + tuono-router@0.16.2: + resolution: {integrity: sha512-NhRbICCjF9l/1saRbvFOoso342FBJC6+Cx4rzFdHnY+uPqBd+SrDjydDpw1b+uqoHj1p5Y+QcXNIEqHRK1ajww==} peerDependencies: react: '>=16.3.0' react-dom: '>=16.3.0' - tuono@0.16.0: - resolution: {integrity: sha512-VFuRPsIf3V3UMlTtgVo1/EgKruJRjNMFkahF88a9he1b7TS0FFTlw/AEC8D92NmkB6PFjyH7g9ZNw8bpogPTmQ==} + tuono@0.16.2: + resolution: {integrity: sha512-Cvs5ZMezUIZAU++F9/qMWfU0gN1BSF+o3yBw9YpYuIbWhsLWbIzgTUHs+kKOIGBlpgjARldwXDnWMPMz0m2h7A==} hasBin: true peerDependencies: react: '>=16.3.0' @@ -6846,7 +6846,7 @@ snapshots: tslib@2.8.1: {} - tuono-fs-router-vite-plugin@0.16.0(@types/node@22.10.0)(sugarss@4.0.1(postcss@8.4.49)): + tuono-fs-router-vite-plugin@0.16.2(@types/node@22.10.0)(sugarss@4.0.1(postcss@8.4.49)): dependencies: '@babel/core': 7.26.0 '@babel/types': 7.26.0 @@ -6863,7 +6863,7 @@ snapshots: - supports-color - terser - tuono-lazy-fn-vite-plugin@0.16.0(@types/node@22.10.0)(sugarss@4.0.1(postcss@8.4.49)): + tuono-lazy-fn-vite-plugin@0.16.2(@types/node@22.10.0)(sugarss@4.0.1(postcss@8.4.49)): dependencies: '@babel/core': 7.26.0 '@babel/types': 7.26.0 @@ -6879,7 +6879,7 @@ snapshots: - supports-color - terser - tuono-router@0.16.0(@types/node@22.10.0)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sugarss@4.0.1(postcss@8.4.49)): + tuono-router@0.16.2(@types/node@22.10.0)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sugarss@4.0.1(postcss@8.4.49)): dependencies: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) @@ -6898,7 +6898,7 @@ snapshots: - sugarss - terser - tuono@0.16.0(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sugarss@4.0.1(postcss@8.4.49)): + tuono@0.16.2(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sugarss@4.0.1(postcss@8.4.49)): dependencies: '@babel/core': 7.26.0 '@babel/generator': 7.26.2 @@ -6916,9 +6916,9 @@ snapshots: react: 18.3.1 react-dom: 18.3.1(react@18.3.1) react-helmet-async: 2.0.5(react@18.3.1) - tuono-fs-router-vite-plugin: 0.16.0(@types/node@22.10.0)(sugarss@4.0.1(postcss@8.4.49)) - tuono-lazy-fn-vite-plugin: 0.16.0(@types/node@22.10.0)(sugarss@4.0.1(postcss@8.4.49)) - tuono-router: 0.16.0(@types/node@22.10.0)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sugarss@4.0.1(postcss@8.4.49)) + tuono-fs-router-vite-plugin: 0.16.2(@types/node@22.10.0)(sugarss@4.0.1(postcss@8.4.49)) + tuono-lazy-fn-vite-plugin: 0.16.2(@types/node@22.10.0)(sugarss@4.0.1(postcss@8.4.49)) + tuono-router: 0.16.2(@types/node@22.10.0)(@types/react@18.3.13)(react-dom@18.3.1(react@18.3.1))(react@18.3.1)(sugarss@4.0.1(postcss@8.4.49)) vite: 5.4.11(@types/node@22.10.0)(sugarss@4.0.1(postcss@8.4.49)) transitivePeerDependencies: - '@swc/helpers' From 4ff99b51dc1cebd5cb52b849d9e785f964da1d56 Mon Sep 17 00:00:00 2001 From: Valerio Ageno Date: Sat, 14 Dec 2024 10:41:02 +0100 Subject: [PATCH 4/6] docs: refine dynamic routes documentation --- .../routes/documentation/routing/dynamic-routes.mdx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx index 72e0de65..e53867aa 100644 --- a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx @@ -21,10 +21,14 @@ you can use dynamic segments, which are populated at request time. A dynamic segment can be created by wrapping a file or a folder name in square brackets: `[segmentName]`. -You are going to probably use something like: +The dynamic segment can be used in both folder and file name: -- `[id]` -- `[slug]` +- `src/routes/blog/[slug].tsx` +- `src/routes/blog/[slug]/index.tsx` + +The same path can have multiple dynamic segments: + +- `src/routes/blog/[post]/[comment].tsx` ### Example From 67eb5434b1ced167c8b572d0f68b90768d2c09e7 Mon Sep 17 00:00:00 2001 From: Valerio Ageno <51341197+Valerioageno@users.noreply.github.com> Date: Sat, 14 Dec 2024 11:53:59 +0100 Subject: [PATCH 5/6] Update apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx Co-authored-by: Marco Pasqualetti <24919330+marcalexiei@users.noreply.github.com> --- .../src/routes/documentation/routing/dynamic-routes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx index e53867aa..1f5ed91e 100644 --- a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx @@ -26,7 +26,7 @@ The dynamic segment can be used in both folder and file name: - `src/routes/blog/[slug].tsx` - `src/routes/blog/[slug]/index.tsx` -The same path can have multiple dynamic segments: +A path can contain multiple dynamic segments, allowing for more flexible routing: - `src/routes/blog/[post]/[comment].tsx` From 09c7c33a53b63a85f6618b08ae11143194195fb5 Mon Sep 17 00:00:00 2001 From: Valerio Ageno Date: Sun, 15 Dec 2024 13:26:23 +0100 Subject: [PATCH 6/6] refactor: sentence --- .../src/routes/documentation/routing/dynamic-routes.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx index 1f5ed91e..aa533a8a 100644 --- a/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx +++ b/apps/documentation/src/routes/documentation/routing/dynamic-routes.mdx @@ -21,7 +21,7 @@ you can use dynamic segments, which are populated at request time. A dynamic segment can be created by wrapping a file or a folder name in square brackets: `[segmentName]`. -The dynamic segment can be used in both folder and file name: +The dynamic segment can be used in folders as well as file names: - `src/routes/blog/[slug].tsx` - `src/routes/blog/[slug]/index.tsx`