From a43a6e0103ad19c5153742e9924725da82409759 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 10:11:54 +0100
Subject: [PATCH 01/17] chore: change invalidLoaderLocation message

---
 packages/eslint-plugin-qwik/src/loaderLocation.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/eslint-plugin-qwik/src/loaderLocation.ts b/packages/eslint-plugin-qwik/src/loaderLocation.ts
index 4f36e981d60..6c4fcd222fb 100644
--- a/packages/eslint-plugin-qwik/src/loaderLocation.ts
+++ b/packages/eslint-plugin-qwik/src/loaderLocation.ts
@@ -36,8 +36,15 @@ export const loaderLocation: Rule.RuleModule = {
       },
     ],
     messages: {
-      invalidLoaderLocation:
-        '`{{fnName}}()` can only be declared in `layout.tsx`, `index.tsx` and `plugin.tsx` inside the {{routesDir}} directory, instead it was declared in "{{path}}".\nPlease check the docs: https://qwik.builder.io/docs/route-loader/',
+      invalidLoaderLocation: `'{{fnName}}() are typically declared in route boundary files such as layout.tsx, index.tsx and plugin.tsx inside the {{routesDir}} directory
+(docs: https://qwik.builder.io/docs/route-loader/).
+
+This {{fnName}}() is declared outside of the route boundaries. This may be useful when you want to create reusable logic or a library. In such a case it is important that this function is re-exported from within the router boundary otherwise it will not run.
+(docs: https://qwik.builder.io/docs/route-loader/#re-export-loader).
+
+If you understand this, you can disable this warning with:
+// eslint-disable-next-line qwik/loader-location
+`,
       missingExport:
         'The return of `{{fnName}}()` needs to be exported in the same module, like this\n```\nexport const {{id}} = {{fnName}}(() => { ... });\n```',
       wrongName:

From f9c3633d72171aa8a81826f2d7ad8a65e152bbcf Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 13:48:14 +0100
Subject: [PATCH 02/17] docs: add cookbook

---
 .../docs/src/routes/docs/cookbook/index.mdx   |  7 ++-
 .../cookbook/re-exporting-loaders/index.mdx   | 63 +++++++++++++++++++
 packages/docs/src/routes/docs/menu.md         |  2 +
 .../eslint-plugin-qwik/src/loaderLocation.ts  |  2 +-
 4 files changed, 71 insertions(+), 3 deletions(-)
 create mode 100644 packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx

diff --git a/packages/docs/src/routes/docs/cookbook/index.mdx b/packages/docs/src/routes/docs/cookbook/index.mdx
index 492cd54b2e6..79ca1e6aab7 100644
--- a/packages/docs/src/routes/docs/cookbook/index.mdx
+++ b/packages/docs/src/routes/docs/cookbook/index.mdx
@@ -7,6 +7,7 @@ contributors:
   - Craiqser
   - Inaam-Ur-Rehman
   - maiieul
+  - gioboa
 updated_at: '2023-10-10T19:26:56Z'
 created_at: '2023-08-14T18:24:46Z'
 ---
@@ -16,7 +17,9 @@ created_at: '2023-08-14T18:24:46Z'
 A cookbook contains a collection of useful patterns for solving common problems in front-end development.
 
 Examples:
-- [Modal Dialog Pop-Up](./portal/)
+- [Glob Import with import.meta.glob](./glob-import/)
 - [Media Controller with iOS Support](./mediaController/)
-- [Glob Import with `import.meta.glob`](./glob-import/)
+- [Portal (Modal Dialog Pop-Up)](./portal/)
+- [Re-exporting loaders](./re-exporting-loaders/)
 - [Theme Managment](./theme-management/)
+
diff --git a/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
new file mode 100644
index 00000000000..54417e5d953
--- /dev/null
+++ b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
@@ -0,0 +1,63 @@
+---
+title: Cookbook | Re-exporting loaders
+contributors:
+  - gioboa
+updated_at: '2023-12-15T11:00:00Z'
+created_at: '2023-12-15T11:00:00Z'
+---
+
+# Re-exporting loaders
+
+`routeAction$` and `routeLoader$` are typically declared in route boundary files such as layout.tsx, index.tsx and plugin.tsx inside the routesDir directory
+[here is docs](https://qwik.builder.io/docs/route-loader/).
+
+Somethimes you would like to declared them outside of the route boundaries.
+This may be useful when you want to create reusable logic or a library.
+In such a case it is important that this function is re-exported from within the router boundary otherwise it will not run or throw exceptions.
+
+## Solution
+
+You can define `routeAction$` and `routeLoader$` in your custom path and re-export them in your layout.tsx, index.tsx and plugin.tsx files.
+
+Example with this path `./src/shared/loaders.ts`
+
+```tsx
+import { routeAction$, routeLoader$ } from '@builder.io/qwik-city';
+
+// eslint-disable-next-line qwik/loader-location
+export const useCommonRouteAction = routeAction$(async () => {
+  // ...
+});
+
+// eslint-disable-next-line qwik/loader-location
+export const useCommonRouteLoader = routeLoader$(async () => {
+  // ...
+});
+```
+---
+Now you can use your common `routeAction$` and `routeLoader$` in paths like this one `./src/routes/index.tsx`.
+
+```tsx
+import { component$ } from '@builder.io/qwik';
+import { Form } from '@builder.io/qwik-city';
+import { useCommonRouteAction, useCommonRouteLoader } from '../shared/loaders';
+
+// As mentioned, here we are re-exporting them
+export { useCommonRouteAction, useCommonRouteLoader } from '../shared/loaders';
+
+export default component$(() => {
+  const commonRouteAction = useCommonRouteAction();
+  const commonRouteLoader = useCommonRouteLoader();
+  
+  return (
+    <div>
+      <Form action={commonRouteAction}>
+        <button type='submit'>Submit</button>
+      </Form>
+      {commonRouteLoader.value}
+    </div>
+  );
+});
+```
+
+
diff --git a/packages/docs/src/routes/docs/menu.md b/packages/docs/src/routes/docs/menu.md
index 477d873287c..270957cca06 100644
--- a/packages/docs/src/routes/docs/menu.md
+++ b/packages/docs/src/routes/docs/menu.md
@@ -41,6 +41,8 @@
 - [Glob Import](/docs/cookbook/glob-import/index.mdx)
 - [Media Controller](/docs/cookbook/mediaController/index.mdx)
 - [Portal](/docs/cookbook/portal/index.mdx)
+- [Re-exporting loaders](/docs/cookbook/re-exporting-loaders/index.mdx)
+- [Theme Managment](/docs/cookbook/theme-management/index.mdx)
 
 ## Integrations
 
diff --git a/packages/eslint-plugin-qwik/src/loaderLocation.ts b/packages/eslint-plugin-qwik/src/loaderLocation.ts
index 6c4fcd222fb..06b1da6e8f6 100644
--- a/packages/eslint-plugin-qwik/src/loaderLocation.ts
+++ b/packages/eslint-plugin-qwik/src/loaderLocation.ts
@@ -40,7 +40,7 @@ export const loaderLocation: Rule.RuleModule = {
 (docs: https://qwik.builder.io/docs/route-loader/).
 
 This {{fnName}}() is declared outside of the route boundaries. This may be useful when you want to create reusable logic or a library. In such a case it is important that this function is re-exported from within the router boundary otherwise it will not run.
-(docs: https://qwik.builder.io/docs/route-loader/#re-export-loader).
+(docs: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/).
 
 If you understand this, you can disable this warning with:
 // eslint-disable-next-line qwik/loader-location

From ef34baab26311002dcb9cfa37597b8069753b7e1 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 15:04:58 +0100
Subject: [PATCH 03/17] docs: add cookbook references

---
 .../docs/src/routes/docs/(qwikcity)/action/index.mdx   |  2 ++
 .../src/routes/docs/(qwikcity)/route-loader/index.mdx  |  2 ++
 .../docs/cookbook/re-exporting-loaders/index.mdx       |  2 +-
 packages/qwik-city/runtime/src/server-functions.ts     |  5 ++++-
 .../src/optimizer/core/src/fixtures/index.qwik.mjs     |  5 ++++-
 .../qwik_core__test__example_qwik_sdk_inline.snap      | 10 ++++++++--
 6 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
index 6d6b70b4252..ea0caf3722a 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
@@ -394,6 +394,8 @@ We recommend starting with `routeAction$()` and only use `globalAction$()` when
 
 `routeAction$()` can only be declared inside the `src/routes` folder, in a `layout.tsx` or `index.tsx` file, and they MUST be exported, just like a `routeLoader$()`. Since `routeAction$()`s are only accessible within the route it's declared, they are recommended when the action needs to access some user data, or it's a protected route. Think about it like a "private" action.
 
+> If you want to manage common reusable routeAction$() it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](https://qwik.builder.io/docs/cookbook/re-exporting-loaders/).
+
 ```tsx title="src/routes/form/index.tsx"
 import { routeAction$ } from '@builder.io/qwik-city';
 
diff --git a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
index 69899f80142..b3fdb25b659 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
@@ -23,6 +23,8 @@ Route Loaders load data in the server so it becomes available to use inside Qwik
 
 Route Loaders can only be declared inside the `src/routes` folder, in a `layout.tsx` or `index.tsx` file, and they MUST be exported.
 
+> If you want to manage common reusable routeLoaders$ it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](https://qwik.builder.io/docs/cookbook/re-exporting-loaders/).
+
 ```tsx /routeLoader$/ /useProductData/#a title="src/routes/product/[productId]/index.tsx"
 import { component$ } from '@builder.io/qwik';
 import { routeLoader$ } from '@builder.io/qwik-city';
diff --git a/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
index 54417e5d953..c19bab7c73e 100644
--- a/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
+++ b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
@@ -13,7 +13,7 @@ created_at: '2023-12-15T11:00:00Z'
 
 Somethimes you would like to declared them outside of the route boundaries.
 This may be useful when you want to create reusable logic or a library.
-In such a case it is important that this function is re-exported from within the router boundary otherwise it will not run or throw exceptions.
+In such a case it is important that this function is re-exported from within the router boundary otherwise it will not run or throw exception.
 
 ## Solution
 
diff --git a/packages/qwik-city/runtime/src/server-functions.ts b/packages/qwik-city/runtime/src/server-functions.ts
index ed94b487cf2..4a1de9d07d8 100644
--- a/packages/qwik-city/runtime/src/server-functions.ts
+++ b/packages/qwik-city/runtime/src/server-functions.ts
@@ -189,7 +189,10 @@ export const routeLoaderQrl = ((
       if (!(id in state)) {
         throw new Error(`routeLoader$ "${loaderQrl.getSymbol()}" was invoked in a route where it was not declared.
     This is because the routeLoader$ was not exported in a 'layout.tsx' or 'index.tsx' file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/`);
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/
+
+    If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
+    For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
       }
       return _wrapSignal(state, id);
     });
diff --git a/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs b/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs
index 6a15c27c18a..6017ff5fde2 100644
--- a/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs
+++ b/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs
@@ -784,7 +784,10 @@ const routeLoaderQrl = (loaderQrl, ...rest) => {
       if (!(id in state))
         throw new Error(`Loader (${id}) was used in a path where the 'loader$' was not declared.
     This is likely because the used loader was not exported in a layout.tsx or index.tsx file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/`);
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/
+
+    If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
+    For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
       return _wrapSignal(state, id);
     });
   }
diff --git a/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap b/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap
index 34b05436328..dedaa72b877 100644
--- a/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap
+++ b/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap
@@ -790,7 +790,10 @@ const routeLoaderQrl = (loaderQrl, ...rest) => {
       if (!(id in state))
         throw new Error(`Loader (${id}) was used in a path where the 'loader$' was not declared.
     This is likely because the used loader was not exported in a layout.tsx or index.tsx file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/`);
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/
+
+    If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
+    For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
       return _wrapSignal(state, id);
     });
   }
@@ -2248,7 +2251,10 @@ const routeLoaderQrl = (loaderQrl, ...rest)=>{
         return useContext(RouteStateContext, (state)=>{
             if (!(id in state)) throw new Error(`Loader (${id}) was used in a path where the 'loader$' was not declared.
     This is likely because the used loader was not exported in a layout.tsx or index.tsx file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/`);
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/
+
+    If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
+    For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
             return _wrapSignal(state, id);
         });
     }

From 40c8d8f27e1e2f5b116ca538e6f11f272e66a04c Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 15:08:22 +0100
Subject: [PATCH 04/17] =?UTF-8?q?chore:=20linter=20=F0=9F=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/eslint-plugin-qwik/package.json | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/eslint-plugin-qwik/package.json b/packages/eslint-plugin-qwik/package.json
index db1ff50dd19..631c25ac183 100644
--- a/packages/eslint-plugin-qwik/package.json
+++ b/packages/eslint-plugin-qwik/package.json
@@ -29,12 +29,12 @@
   "peerDependencies": {
     "eslint": "^8.45.0"
   },
-  "scripts": {
-    "test": "cd ../..; ./node_modules/.bin/vitest packages/eslint-plugin-qwik/qwik.unit.ts"
-  },
   "repository": {
     "type": "git",
     "url": "https://github.com/BuilderIO/qwik.git",
     "directory": "packages/eslint-rules"
+  },
+  "scripts": {
+    "test": "cd ../..; ./node_modules/.bin/vitest packages/eslint-plugin-qwik/qwik.unit.ts"
   }
 }

From b2f35e201bb83b336b6494e794538303b70146d9 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 15:15:44 +0100
Subject: [PATCH 05/17] fix: change links

---
 packages/docs/src/routes/docs/(qwikcity)/action/index.mdx       | 2 +-
 packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
index ea0caf3722a..8f1b5aac386 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
@@ -394,7 +394,7 @@ We recommend starting with `routeAction$()` and only use `globalAction$()` when
 
 `routeAction$()` can only be declared inside the `src/routes` folder, in a `layout.tsx` or `index.tsx` file, and they MUST be exported, just like a `routeLoader$()`. Since `routeAction$()`s are only accessible within the route it's declared, they are recommended when the action needs to access some user data, or it's a protected route. Think about it like a "private" action.
 
-> If you want to manage common reusable routeAction$() it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](https://qwik.builder.io/docs/cookbook/re-exporting-loaders/).
+> If you want to manage common reusable routeAction$() it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](/docs/cookbook/re-exporting-loaders/index.mdx).
 
 ```tsx title="src/routes/form/index.tsx"
 import { routeAction$ } from '@builder.io/qwik-city';
diff --git a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
index b3fdb25b659..e33c515d343 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
@@ -23,7 +23,7 @@ Route Loaders load data in the server so it becomes available to use inside Qwik
 
 Route Loaders can only be declared inside the `src/routes` folder, in a `layout.tsx` or `index.tsx` file, and they MUST be exported.
 
-> If you want to manage common reusable routeLoaders$ it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](https://qwik.builder.io/docs/cookbook/re-exporting-loaders/).
+> If you want to manage common reusable routeLoaders$ it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](/docs/cookbook/re-exporting-loaders/index.mdx).
 
 ```tsx /routeLoader$/ /useProductData/#a title="src/routes/product/[productId]/index.tsx"
 import { component$ } from '@builder.io/qwik';

From 883b072967bbed17e23da376fa9be2c183a18183 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 15:24:41 +0100
Subject: [PATCH 06/17] chore: update contributors list

---
 packages/docs/src/routes/docs/(qwikcity)/action/index.mdx      | 3 ++-
 .../docs/src/routes/docs/(qwikcity)/route-loader/index.mdx     | 3 ++-
 packages/docs/src/routes/docs/cookbook/index.mdx               | 2 +-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
index 8f1b5aac386..e2ecdcc9404 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
@@ -22,7 +22,8 @@ contributors:
   - aivarsliepa
   - wtlin1228
   - adamdbradley
-updated_at: '2023-10-03T18:53:23Z'
+  - gioboa
+updated_at: '2023-12-15T11:00:00Z'
 created_at: '2023-03-20T23:45:13Z'
 ---
 
diff --git a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
index e33c515d343..e5387011eb3 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
@@ -13,7 +13,8 @@ contributors:
   - mrhoodz
   - mjschwanitz
   - adamdbradley
-updated_at: '2023-09-15T11:23:15Z'
+  - gioboa
+updated_at: '2023-12-15T11:00:00Z'
 created_at: '2023-03-20T23:45:13Z'
 ---
 
diff --git a/packages/docs/src/routes/docs/cookbook/index.mdx b/packages/docs/src/routes/docs/cookbook/index.mdx
index 79ca1e6aab7..0b918e5eafe 100644
--- a/packages/docs/src/routes/docs/cookbook/index.mdx
+++ b/packages/docs/src/routes/docs/cookbook/index.mdx
@@ -8,7 +8,7 @@ contributors:
   - Inaam-Ur-Rehman
   - maiieul
   - gioboa
-updated_at: '2023-10-10T19:26:56Z'
+updated_at: '2023-12-15T11:00:00Z'
 created_at: '2023-08-14T18:24:46Z'
 ---
 

From 3a66baddaecc51368a17945e872635a252e2f14a Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 15:26:25 +0100
Subject: [PATCH 07/17] =?UTF-8?q?chore:=20linter=20=F0=9F=A7=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/routes/docs/cookbook/re-exporting-loaders/index.mdx     | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
index c19bab7c73e..95fbbc9686b 100644
--- a/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
+++ b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
@@ -59,5 +59,3 @@ export default component$(() => {
   );
 });
 ```
-
-

From 28f6e1f7071138fd601148102fd56648a96ec1d6 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 16:47:27 +0100
Subject: [PATCH 08/17] chore: change error message

---
 .../qwik/src/optimizer/core/src/fixtures/index.qwik.mjs   | 4 +---
 .../qwik_core__test__example_qwik_sdk_inline.snap         | 8 ++------
 2 files changed, 3 insertions(+), 9 deletions(-)

diff --git a/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs b/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs
index 6017ff5fde2..23467ae5284 100644
--- a/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs
+++ b/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs
@@ -784,9 +784,7 @@ const routeLoaderQrl = (loaderQrl, ...rest) => {
       if (!(id in state))
         throw new Error(`Loader (${id}) was used in a path where the 'loader$' was not declared.
     This is likely because the used loader was not exported in a layout.tsx or index.tsx file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/
-
-    If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/. If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
     For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
       return _wrapSignal(state, id);
     });
diff --git a/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap b/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap
index dedaa72b877..dc590dbf833 100644
--- a/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap
+++ b/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap
@@ -790,9 +790,7 @@ const routeLoaderQrl = (loaderQrl, ...rest) => {
       if (!(id in state))
         throw new Error(`Loader (${id}) was used in a path where the 'loader$' was not declared.
     This is likely because the used loader was not exported in a layout.tsx or index.tsx file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/
-
-    If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/. If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
     For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
       return _wrapSignal(state, id);
     });
@@ -2251,9 +2249,7 @@ const routeLoaderQrl = (loaderQrl, ...rest)=>{
         return useContext(RouteStateContext, (state)=>{
             if (!(id in state)) throw new Error(`Loader (${id}) was used in a path where the 'loader$' was not declared.
     This is likely because the used loader was not exported in a layout.tsx or index.tsx file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/
-
-    If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/. If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
     For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
             return _wrapSignal(state, id);
         });

From 51cc94fef03794c332fad531a303aa4609112949 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 16:53:09 +0100
Subject: [PATCH 09/17] test: revert snapshots changes

---
 .../qwik/src/optimizer/core/src/fixtures/index.qwik.mjs     | 3 +--
 .../snapshots/qwik_core__test__example_qwik_sdk_inline.snap | 6 ++----
 2 files changed, 3 insertions(+), 6 deletions(-)

diff --git a/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs b/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs
index 23467ae5284..6a15c27c18a 100644
--- a/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs
+++ b/packages/qwik/src/optimizer/core/src/fixtures/index.qwik.mjs
@@ -784,8 +784,7 @@ const routeLoaderQrl = (loaderQrl, ...rest) => {
       if (!(id in state))
         throw new Error(`Loader (${id}) was used in a path where the 'loader$' was not declared.
     This is likely because the used loader was not exported in a layout.tsx or index.tsx file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/. If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
-    For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/`);
       return _wrapSignal(state, id);
     });
   }
diff --git a/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap b/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap
index dc590dbf833..34b05436328 100644
--- a/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap
+++ b/packages/qwik/src/optimizer/core/src/snapshots/qwik_core__test__example_qwik_sdk_inline.snap
@@ -790,8 +790,7 @@ const routeLoaderQrl = (loaderQrl, ...rest) => {
       if (!(id in state))
         throw new Error(`Loader (${id}) was used in a path where the 'loader$' was not declared.
     This is likely because the used loader was not exported in a layout.tsx or index.tsx file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/. If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
-    For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/`);
       return _wrapSignal(state, id);
     });
   }
@@ -2249,8 +2248,7 @@ const routeLoaderQrl = (loaderQrl, ...rest)=>{
         return useContext(RouteStateContext, (state)=>{
             if (!(id in state)) throw new Error(`Loader (${id}) was used in a path where the 'loader$' was not declared.
     This is likely because the used loader was not exported in a layout.tsx or index.tsx file of the existing route.
-    For more information check: https://qwik.builder.io/qwikcity/route-loader/. If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
-    For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
+    For more information check: https://qwik.builder.io/qwikcity/route-loader/`);
             return _wrapSignal(state, id);
         });
     }

From 5d6e29751458cc48ee7db6101722b75740acd1df Mon Sep 17 00:00:00 2001
From: Giorgio Boa <35845425+gioboa@users.noreply.github.com>
Date: Fri, 15 Dec 2023 20:36:21 +0100
Subject: [PATCH 10/17] chore: fix typos
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Miško Hevery <misko@hevery.com>
---
 packages/qwik-city/runtime/src/server-functions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/qwik-city/runtime/src/server-functions.ts b/packages/qwik-city/runtime/src/server-functions.ts
index 4a1de9d07d8..fd4e7289e43 100644
--- a/packages/qwik-city/runtime/src/server-functions.ts
+++ b/packages/qwik-city/runtime/src/server-functions.ts
@@ -191,7 +191,7 @@ export const routeLoaderQrl = ((
     This is because the routeLoader$ was not exported in a 'layout.tsx' or 'index.tsx' file of the existing route.
     For more information check: https://qwik.builder.io/qwikcity/route-loader/
 
-    If your are managing reusable logic or a library it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
+    If you are managing reusable logic or a library, it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx` file of the existing route; otherwise, it will not run and throw an exception.
     For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
       }
       return _wrapSignal(state, id);

From 578ff62166a605aeb55daca0cc9333d45b27dba3 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 22:46:06 +0100
Subject: [PATCH 11/17] fix: improve cookbook explanation

---
 .../cookbook/re-exporting-loaders/index.tsx   |  31 +++++
 .../re-exporting-loaders/shared/loaders.ts    |  11 ++
 .../third-party/index.tsx                     |  13 ++
 .../third-party/third-party-library.tsx       |  48 +++++++
 .../cookbook/re-exporting-loaders/index.mdx   | 130 ++++++++++++++++--
 5 files changed, 222 insertions(+), 11 deletions(-)
 create mode 100644 packages/docs/src/routes/demo/cookbook/re-exporting-loaders/index.tsx
 create mode 100644 packages/docs/src/routes/demo/cookbook/re-exporting-loaders/shared/loaders.ts
 create mode 100644 packages/docs/src/routes/demo/cookbook/re-exporting-loaders/third-party/index.tsx
 create mode 100644 packages/docs/src/routes/demo/cookbook/re-exporting-loaders/third-party/third-party-library.tsx

diff --git a/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/index.tsx b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/index.tsx
new file mode 100644
index 00000000000..079298d7247
--- /dev/null
+++ b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/index.tsx
@@ -0,0 +1,31 @@
+import { component$ } from '@builder.io/qwik';
+import { Form } from '@builder.io/qwik-city';
+import { useCommonRouteAction, useCommonRouteLoader } from './shared/loaders';
+
+// As mentioned, here we are re-exporting them
+export { useCommonRouteAction, useCommonRouteLoader } from './shared/loaders';
+
+export default component$(() => {
+  const commonRouteAction = useCommonRouteAction();
+  const commonRouteLoader = useCommonRouteLoader();
+
+  return (
+    <div class="flex justify-around text-xl dark:text-white">
+      <Form action={commonRouteAction}>
+        <div class="mb-2">CommonRouteAction</div>
+        <div class="mb-4">response:</div>
+        <div class="text-lg font-bold mb-4">
+          {commonRouteAction.value?.data.join(' ') || ''}
+        </div>
+        <button type="submit">Submit</button>
+      </Form>
+      <div>
+        <div class="mb-2">CommonRouteLoader</div>
+        <div class="mb-4">response:</div>
+        <div class="text-lg font-bold mb-4">
+          {commonRouteLoader.value.join(' ')}
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/shared/loaders.ts b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/shared/loaders.ts
new file mode 100644
index 00000000000..8c0f1e17bf8
--- /dev/null
+++ b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/shared/loaders.ts
@@ -0,0 +1,11 @@
+import { routeAction$, routeLoader$ } from '@builder.io/qwik-city';
+
+export const useCommonRouteAction = routeAction$(async () => {
+  // ...
+  return { success: true, data: ['Qwik', 'Partytown'] };
+});
+
+export const useCommonRouteLoader = routeLoader$(async () => {
+  // ...
+  return ['Mitosis', 'Builder.io'];
+});
diff --git a/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/third-party/index.tsx b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/third-party/index.tsx
new file mode 100644
index 00000000000..ebd7e7a5556
--- /dev/null
+++ b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/third-party/index.tsx
@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+import { ThirdPartyPaymentComponent } from './third-party-library';
+
+// As mentioned, here we are re-exporting the third-party loader
+export { useThirdPartyPaymentLoader } from './third-party-library';
+
+export default component$(() => {
+  return (
+    <section>
+      <ThirdPartyPaymentComponent />
+    </section>
+  );
+});
diff --git a/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/third-party/third-party-library.tsx b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/third-party/third-party-library.tsx
new file mode 100644
index 00000000000..c9b03718c3b
--- /dev/null
+++ b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/third-party/third-party-library.tsx
@@ -0,0 +1,48 @@
+import { component$ } from '@builder.io/qwik';
+import { routeLoader$ } from '@builder.io/qwik-city';
+
+export const useThirdPartyPaymentLoader = routeLoader$(() => {
+  return { name: 'John Doe' };
+});
+
+export const ThirdPartyPaymentComponent = component$(() => {
+  const thirdPartyPaymentLoader = useThirdPartyPaymentLoader();
+  return (
+    <div
+      class={[
+        'w-96 h-56 m-auto rounded-xl relative text-white font-bold shadow-2xl',
+        'transition-transform transform hover:scale-110 bg-gray-600',
+      ]}
+    >
+      <div class="w-full px-8 absolute top-8">
+        <div class="flex justify-between">
+          <div class="">
+            <p>Name</p>
+            <p class="tracking-widest">{thirdPartyPaymentLoader.value.name}</p>
+          </div>
+          <img class="w-12 h-12" src="/logos/qwik-logo.svg" />
+        </div>
+        <div class="pt-1">
+          <p class="font-medium">Card Number</p>
+          <p class="tracking-wider">4642 3489 9867 7632</p>
+        </div>
+        <div class="pt-6 pr-6">
+          <div class="flex justify-between text-xs">
+            <div>
+              <p class="font-medium">Valid</p>
+              <p class="tracking-wider">11/15</p>
+            </div>
+            <div>
+              <p class="font-medium">Expiry</p>
+              <p class="tracking-wider">03/25</p>
+            </div>
+            <div>
+              <p class="font-medium">CVV</p>
+              <p class="tracking-wider">···</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+});
diff --git a/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
index 95fbbc9686b..06659313a6b 100644
--- a/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
+++ b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
@@ -6,6 +6,8 @@ updated_at: '2023-12-15T11:00:00Z'
 created_at: '2023-12-15T11:00:00Z'
 ---
 
+import CodeSandbox, {CodeFile} from '../../../../components/code-sandbox/index.tsx';  
+
 # Re-exporting loaders
 
 `routeAction$` and `routeLoader$` are typically declared in route boundary files such as layout.tsx, index.tsx and plugin.tsx inside the routesDir directory
@@ -13,49 +15,155 @@ created_at: '2023-12-15T11:00:00Z'
 
 Somethimes you would like to declared them outside of the route boundaries.
 This may be useful when you want to create reusable logic or a library.
-In such a case it is important that this function is re-exported from within the router boundary otherwise it will not run or throw exception.
+In such a case, it is essential that this function is re-exported from within the router boundary otherwise it will not run or throw exception.
 
 ## Solution
 
 You can define `routeAction$` and `routeLoader$` in your custom path and re-export them in your layout.tsx, index.tsx and plugin.tsx files.
 
-Example with this path `./src/shared/loaders.ts`
+### Reusable logic example
+
+Let's imagine we have a `routeLoader$` that checks whether our user is logged in or not. 
+It wouldn't make sense to copy and paste the same code into many parts of our code to make it work.
+As per good practices, the ideal method is to centralize the logic.
+Here in this example we declare `routeAction$` and `routeLoader$` in a centralized file so we can then reuse it in our files.
+
 
+Example with `./shared/loaders.ts`
+<CodeFile url="/demo/cookbook/re-exporting-loaders/shared/loaders.ts" >
 ```tsx
 import { routeAction$, routeLoader$ } from '@builder.io/qwik-city';
 
-// eslint-disable-next-line qwik/loader-location
 export const useCommonRouteAction = routeAction$(async () => {
   // ...
+  return { success: true, data: ['Qwik', 'Partytown'] };
 });
 
-// eslint-disable-next-line qwik/loader-location
 export const useCommonRouteLoader = routeLoader$(async () => {
   // ...
+  return ['Mitosis', 'Builder.io'];
 });
 ```
----
+</CodeFile>
+
 Now you can use your common `routeAction$` and `routeLoader$` in paths like this one `./src/routes/index.tsx`.
 
+<CodeFile url="/demo/cookbook/re-exporting-loaders/" >
 ```tsx
 import { component$ } from '@builder.io/qwik';
 import { Form } from '@builder.io/qwik-city';
-import { useCommonRouteAction, useCommonRouteLoader } from '../shared/loaders';
+import { useCommonRouteAction, useCommonRouteLoader } from './shared/loaders';
 
 // As mentioned, here we are re-exporting them
-export { useCommonRouteAction, useCommonRouteLoader } from '../shared/loaders';
+export { useCommonRouteAction, useCommonRouteLoader } from './shared/loaders';
 
 export default component$(() => {
   const commonRouteAction = useCommonRouteAction();
   const commonRouteLoader = useCommonRouteLoader();
-  
+
   return (
-    <div>
+    <div class="flex justify-around text-xl">
       <Form action={commonRouteAction}>
-        <button type='submit'>Submit</button>
+        <div class="mb-2">CommonRouteAction</div>
+        <div class="mb-4">response:</div>
+        <div class="text-lg font-bold mb-4">
+          {commonRouteAction.value?.data.join(' ') || ''}
+        </div>
+        <button type="submit">Submit</button>
       </Form>
-      {commonRouteLoader.value}
+      <div>
+        <div class="mb-2">CommonRouteLoader</div>
+        <div class="mb-4">response:</div>
+        <div class="text-lg font-bold mb-4">{commonRouteLoader.value.join(' ')}</div>
+      </div>
+    </div>
+  );
+});
+```
+</CodeFile>
+
+<CodeSandbox url="/demo/cookbook/re-exporting-loaders/"  style={{ height: '15em' }} />
+
+### Third-party libraries
+
+It may happen that we need to integrate third-party libraries over which we have no control over how it works.
+Let's think for example about integrating a payment method into our application.
+We are provided with a component to integrate into the page, but we have no control over what happens under the hood of this component.
+Here, if this library needs `routeAction$` or `routeLoader$` we must re-export them to allow the correct functioning of our library.
+
+Here is out code:
+
+<CodeFile url="/demo/cookbook/re-exporting-loaders/third-party/index.tsx" >
+```tsx
+import { component$ } from '@builder.io/qwik';
+import { ThirdPartyPaymentComponent } from './third-party-library';
+
+// As mentioned, here we are re-exporting them
+export { useThirdPartyPaymentLoader } from './third-party-library';
+
+export default component$(() => {
+  return (
+    <section>
+      <ThirdPartyPaymentComponent />
+    </section>
+  );
+});
+```
+</CodeFile>
+
+<CodeSandbox url="/demo/cookbook/re-exporting-loaders/third-party/index.tsx"  style={{ height: '20em' }} />
+
+Here is the library code:
+
+<CodeFile url="/demo/cookbook/re-exporting-loaders/third-party/third-party-library.tsx" >
+```tsx
+import { component$ } from '@builder.io/qwik';
+import { routeLoader$ } from '@builder.io/qwik-city';
+
+export const useThirdPartyPaymentLoader = routeLoader$(() => {
+  return { name: 'John Doe' };
+});
+
+export const ThirdPartyPaymentComponent = component$(() => {
+  const thirdPartyPaymentLoader = useThirdPartyPaymentLoader();
+  return (
+    <div
+      class={[
+        'w-96 h-56 m-auto rounded-xl relative text-white font-bold shadow-2xl',
+        'transition-transform transform hover:scale-110 bg-gray-600',
+      ]}
+    >
+      <div class="w-full px-8 absolute top-8">
+        <div class="flex justify-between">
+          <div class="">
+            <p>Name</p>
+            <p class="tracking-widest">{thirdPartyPaymentLoader.value.name}</p>
+          </div>
+          <img class="w-12 h-12" src="/logos/qwik-logo.svg" />
+        </div>
+        <div class="pt-1">
+          <p class="font-medium">Card Number</p>
+          <p class="tracking-wider">4642 3489 9867 7632</p>
+        </div>
+        <div class="pt-6 pr-6">
+          <div class="flex justify-between text-xs">
+            <div>
+              <p class="font-medium">Valid</p>
+              <p class="tracking-wider">11/15</p>
+            </div>
+            <div>
+              <p class="font-medium">Expiry</p>
+              <p class="tracking-wider">03/25</p>
+            </div>
+            <div>
+              <p class="font-medium">CVV</p>
+              <p class="tracking-wider">···</p>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   );
 });
 ```
+</CodeFile>
\ No newline at end of file

From 8e77e2c38389f8649803b64f8f74bb1815e95cd6 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 22:52:42 +0100
Subject: [PATCH 12/17] chore: change examplanation

---
 packages/docs/src/routes/docs/(qwikcity)/action/index.mdx      | 2 +-
 .../docs/src/routes/docs/(qwikcity)/route-loader/index.mdx     | 3 ++-
 packages/eslint-plugin-qwik/src/loaderLocation.ts              | 2 +-
 3 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
index e2ecdcc9404..df215c7eee7 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/action/index.mdx
@@ -395,7 +395,7 @@ We recommend starting with `routeAction$()` and only use `globalAction$()` when
 
 `routeAction$()` can only be declared inside the `src/routes` folder, in a `layout.tsx` or `index.tsx` file, and they MUST be exported, just like a `routeLoader$()`. Since `routeAction$()`s are only accessible within the route it's declared, they are recommended when the action needs to access some user data, or it's a protected route. Think about it like a "private" action.
 
-> If you want to manage common reusable routeAction$() it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](/docs/cookbook/re-exporting-loaders/index.mdx).
+> If you want to manage common reusable routeAction$() it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](/docs/cookbook/re-exporting-loaders/index.mdx).
 
 ```tsx title="src/routes/form/index.tsx"
 import { routeAction$ } from '@builder.io/qwik-city';
diff --git a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
index e5387011eb3..875c4d5edc2 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
@@ -24,7 +24,8 @@ Route Loaders load data in the server so it becomes available to use inside Qwik
 
 Route Loaders can only be declared inside the `src/routes` folder, in a `layout.tsx` or `index.tsx` file, and they MUST be exported.
 
-> If you want to manage common reusable routeLoaders$ it is important that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](/docs/cookbook/re-exporting-loaders/index.mdx).
+> If you want to manage common reusable routeLoaders$ it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
+For more information [check the cookbook](/docs/cookbook/re-exporting-loaders/index.mdx).
 
 ```tsx /routeLoader$/ /useProductData/#a title="src/routes/product/[productId]/index.tsx"
 import { component$ } from '@builder.io/qwik';
diff --git a/packages/eslint-plugin-qwik/src/loaderLocation.ts b/packages/eslint-plugin-qwik/src/loaderLocation.ts
index 06b1da6e8f6..801d26c8104 100644
--- a/packages/eslint-plugin-qwik/src/loaderLocation.ts
+++ b/packages/eslint-plugin-qwik/src/loaderLocation.ts
@@ -39,7 +39,7 @@ export const loaderLocation: Rule.RuleModule = {
       invalidLoaderLocation: `'{{fnName}}() are typically declared in route boundary files such as layout.tsx, index.tsx and plugin.tsx inside the {{routesDir}} directory
 (docs: https://qwik.builder.io/docs/route-loader/).
 
-This {{fnName}}() is declared outside of the route boundaries. This may be useful when you want to create reusable logic or a library. In such a case it is important that this function is re-exported from within the router boundary otherwise it will not run.
+This {{fnName}}() is declared outside of the route boundaries. This may be useful when you want to create reusable logic or a library. In such a case, it is essential that this function is re-exported from within the router boundary otherwise it will not run.
 (docs: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/).
 
 If you understand this, you can disable this warning with:

From efdd5fe3f2336f83465ad59028675cbf0941ad87 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 23:03:35 +0100
Subject: [PATCH 13/17] fix: remove class

---
 .../src/routes/demo/cookbook/re-exporting-loaders/index.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/index.tsx b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/index.tsx
index 079298d7247..35a40a0e9a4 100644
--- a/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/index.tsx
+++ b/packages/docs/src/routes/demo/cookbook/re-exporting-loaders/index.tsx
@@ -10,7 +10,7 @@ export default component$(() => {
   const commonRouteLoader = useCommonRouteLoader();
 
   return (
-    <div class="flex justify-around text-xl dark:text-white">
+    <div class="flex justify-around text-xl">
       <Form action={commonRouteAction}>
         <div class="mb-2">CommonRouteAction</div>
         <div class="mb-4">response:</div>

From 527652b1642288782f30f0e58dd7941026c57dd9 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Fri, 15 Dec 2023 23:14:38 +0100
Subject: [PATCH 14/17] fix: solve error

---
 packages/qwik-city/runtime/src/server-functions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/qwik-city/runtime/src/server-functions.ts b/packages/qwik-city/runtime/src/server-functions.ts
index fd4e7289e43..57beb2227aa 100644
--- a/packages/qwik-city/runtime/src/server-functions.ts
+++ b/packages/qwik-city/runtime/src/server-functions.ts
@@ -191,7 +191,7 @@ export const routeLoaderQrl = ((
     This is because the routeLoader$ was not exported in a 'layout.tsx' or 'index.tsx' file of the existing route.
     For more information check: https://qwik.builder.io/qwikcity/route-loader/
 
-    If you are managing reusable logic or a library, it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx` file of the existing route; otherwise, it will not run and throw an exception.
+    If your are managing reusable logic or a library it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
     For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
       }
       return _wrapSignal(state, id);

From bba1e186721165bc99ec8d18e42e9201ce1f765a Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Tue, 26 Dec 2023 17:35:53 +0100
Subject: [PATCH 15/17] chore: minor change

---
 .../docs/src/routes/docs/(qwikcity)/route-loader/index.mdx     | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
index 875c4d5edc2..272c8577960 100644
--- a/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
+++ b/packages/docs/src/routes/docs/(qwikcity)/route-loader/index.mdx
@@ -24,8 +24,7 @@ Route Loaders load data in the server so it becomes available to use inside Qwik
 
 Route Loaders can only be declared inside the `src/routes` folder, in a `layout.tsx` or `index.tsx` file, and they MUST be exported.
 
-> If you want to manage common reusable routeLoaders$ it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
-For more information [check the cookbook](/docs/cookbook/re-exporting-loaders/index.mdx).
+> If you want to manage common reusable routeLoaders$ it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception. For more information [check the cookbook](/docs/cookbook/re-exporting-loaders/index.mdx).
 
 ```tsx /routeLoader$/ /useProductData/#a title="src/routes/product/[productId]/index.tsx"
 import { component$ } from '@builder.io/qwik';

From 7796c8949f4bd68f1582b538086f0fc0a80fd2cf Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Tue, 26 Dec 2023 17:46:53 +0100
Subject: [PATCH 16/17] chore: minor change

---
 .../docs/cookbook/re-exporting-loaders/index.mdx  | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
index 06659313a6b..bfbe056c04a 100644
--- a/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
+++ b/packages/docs/src/routes/docs/cookbook/re-exporting-loaders/index.mdx
@@ -28,7 +28,6 @@ It wouldn't make sense to copy and paste the same code into many parts of our co
 As per good practices, the ideal method is to centralize the logic.
 Here in this example we declare `routeAction$` and `routeLoader$` in a centralized file so we can then reuse it in our files.
 
-
 Example with `./shared/loaders.ts`
 <CodeFile url="/demo/cookbook/re-exporting-loaders/shared/loaders.ts" >
 ```tsx
@@ -84,21 +83,21 @@ export default component$(() => {
 
 <CodeSandbox url="/demo/cookbook/re-exporting-loaders/"  style={{ height: '15em' }} />
 
-### Third-party libraries
+### Third-party libraries example
 
 It may happen that we need to integrate third-party libraries over which we have no control over how it works.
 Let's think for example about integrating a payment method into our application.
 We are provided with a component to integrate into the page, but we have no control over what happens under the hood of this component.
 Here, if this library needs `routeAction$` or `routeLoader$` we must re-export them to allow the correct functioning of our library.
 
-Here is out code:
+#### Here is our code:
 
-<CodeFile url="/demo/cookbook/re-exporting-loaders/third-party/index.tsx" >
+<CodeSandbox url="/demo/cookbook/re-exporting-loaders/third-party/index.tsx"  style={{ height: '20em' }}>
 ```tsx
 import { component$ } from '@builder.io/qwik';
 import { ThirdPartyPaymentComponent } from './third-party-library';
 
-// As mentioned, here we are re-exporting them
+// As mentioned, here we are re-exporting the third-party loader
 export { useThirdPartyPaymentLoader } from './third-party-library';
 
 export default component$(() => {
@@ -109,11 +108,9 @@ export default component$(() => {
   );
 });
 ```
-</CodeFile>
-
-<CodeSandbox url="/demo/cookbook/re-exporting-loaders/third-party/index.tsx"  style={{ height: '20em' }} />
+</CodeSandbox>
 
-Here is the library code:
+#### Here is the library code:
 
 <CodeFile url="/demo/cookbook/re-exporting-loaders/third-party/third-party-library.tsx" >
 ```tsx

From 0daaa42177142d67a1487fb86b9d84c5b91c4d63 Mon Sep 17 00:00:00 2001
From: gioboa <giorgiob.boa@gmail.com>
Date: Tue, 26 Dec 2023 17:51:26 +0100
Subject: [PATCH 17/17] chore: minor change

---
 packages/qwik-city/runtime/src/server-functions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/qwik-city/runtime/src/server-functions.ts b/packages/qwik-city/runtime/src/server-functions.ts
index 57beb2227aa..b038c72c32d 100644
--- a/packages/qwik-city/runtime/src/server-functions.ts
+++ b/packages/qwik-city/runtime/src/server-functions.ts
@@ -192,7 +192,7 @@ export const routeLoaderQrl = ((
     For more information check: https://qwik.builder.io/qwikcity/route-loader/
 
     If your are managing reusable logic or a library it is essential that this function is re-exported from within 'layout.tsx' or 'index.tsx file of the existing route otherwise it will not run or throw exception.
-    For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/.`);
+    For more information check: https://qwik.builder.io/docs/cookbook/re-exporting-loaders/`);
       }
       return _wrapSignal(state, id);
     });