pejay-ui 1.2.1 → 1.3.0

package/templates/scaffolds/tanstack-router/page/one/index.tsx

@@ -0,0 +1,3 @@
+export default function One() {
+  return <>This is One page</>;
+}

package/templates/scaffolds/tanstack-router/page/one/one-id.tsx

@@ -0,0 +1,128 @@
+import { Route } from "../../routes/one/$id";
+
+export default function OneId() {
+  const { id } = Route.useParams();
+
+  /* 
+  when using query 
+  const { data } = useSuspenseQuery(
+  apiQueries.module.fetch_query_by_id_example(id)
+);
+
+if you are mot using loader 
+  loader: async ({ context, params }) => {
+    await context.queryClient.ensureQueryData(
+      apiQueries.module.fetch_query_by_id_example({id:params.id})
+    );
+  },
+
+  like this then use 
+  useQuery insted of useSuspenseQuery
+
+  also for small crud you should use useQuery insted of loader and useSuspenseQuery
+
+  For important pages where you want data loaded before render (details page, edit page, dashboard, etc.), add a loader with ensureQueryData.
+
+
+  --------------------------------------------------------------------------------
+
+
+  const searchParams = Route.useSearch();
+
+const { data } = useSuspenseQuery(
+  apiQueries.module.fetch_query_by_id_example({
+    id,
+    search: searchParams.search,
+    type: searchParams.type,
+  })
+);
+
+
+
+Input Change
+     ↓
+Local State
+     ↓
+Click Filter
+     ↓
+navigate({ search })
+     ↓
+URL Updates
+     ↓
+Route.useSearch() Updates
+     ↓
+Query Key Changes
+     ↓
+Backend Call
+
+
+and on final filter tn we just 
+navigate({
+  search: {
+    search: "john",
+    type: "active",
+  },
+});
+
+use navigate 
+-----------------------------
+
+and this wont
+❌ Browser Refresh
+❌ Full Page Reload
+❌ Re-download JS Bundle
+
+but insted 
+
+---------------------
+URL changes
+    ↓
+Router state changes
+    ↓
+Affected components re-render
+
+---------------------
+What Actually Re-renders?
+Suppose:
+AppLayout
+│
+├── Header
+├── Sidebar
+└── Outlet
+     └── OnePage
+          └── DataTable
+
+When search params change:
+AppLayout      ❌ stays mounted
+Header         ❌ stays mounted
+Sidebar        ❌ stays mounted
+
+OnePage        🔄 re-render
+DataTable      🔄 re-render
+
+
+because:
+const search = Route.useSearch();
+
+-------------------------------
+TanStack Router Flow
+
+Input Change
+     ↓
+Local State
+     ↓
+Click Filter
+     ↓
+navigate({ search })
+     ↓
+URL Updates
+     ↓
+Route.useSearch() Updates
+     ↓
+Query Key Changes
+     ↓
+Backend Call
+
+*/
+  return <>This is One ID page {id}</>;
+}

package/templates/scaffolds/tanstack-router/router.ts

@@ -0,0 +1,90 @@
+import { createRouter } from "@tanstack/react-router";
+/* import { routeTree } from "./routeTree.gen"; */
+// routeTree file was automatically generated by TanStack Router.
+
+export function getRouter() {
+  const router = createRouter({
+    /*routeTree,*/
+    scrollRestoration: true,
+    defaultPreload: "intent",
+    /*  defaultPreloadStaleTime: 0, */
+
+    /* 
+     context: {
+    queryClient: undefined!,
+  },
+   */
+  });
+
+  return router;
+}
+
+/* 
+
+in app
+
+<RouterProvider
+  router={router}
+  context={{
+    queryClient,
+  }}
+/>
+
+This queryClient in router context is the piece that connects TanStack Router loaders to your existing apiQueries setup.
+
+
+| Option                       | What it does                                                                             |
+| ---------------------------- | ---------------------------------------------------------------------------------------- |
+| `scrollRestoration: true`    | Restores previous scroll position when navigating back/forward                           |
+| `defaultPreload: "intent"`   | Preloads route when user hovers or focuses a link                                        |
+| `defaultPreloadStaleTime: 0` | Preloaded data becomes stale immediately; often used when TanStack Query manages caching |
+
+
+
+
+# What You Should Learn First
+
+## Must know
+
+✅ `context`
+
+✅ `scrollRestoration`
+
+✅ `defaultPreload`
+
+✅ `defaultPreloadStaleTime`
+
+✅ `defaultNotFoundComponent`
+
+---
+
+## Learn later
+
+✅ `defaultPendingComponent`
+
+✅ `defaultErrorComponent`
+
+---
+
+## Advanced
+
+✅ `basepath`
+
+✅ `defaultViewTransition`
+
+✅ `routeMasks`
+
+✅ `defaultStructuralSharing`
+
+---
+
+If you're building a React + TanStack Query app, the most valuable next topic after routing basics is actually **router context + `beforeLoad` guards**. That's where authentication, permissions, and route protection become really powerful.
+
+
+*/
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

package/templates/scaffolds/tanstack-router/routes/__root.tsx

@@ -0,0 +1,9 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import ErrorLayout from "../layout/error.layout";
+import PageNotFound from "../layout/404.layout";
+
+export const Route = createFileRoute("__root")({
+  component: Outlet,
+  errorComponent: ErrorLayout,
+  notFoundComponent: PageNotFound,
+});

package/templates/scaffolds/tanstack-router/routes/_app.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import AppLayout from "../layout/app.layout";
+
+export const Route = createFileRoute("/_app")({
+  component: AppLayout,
+});

package/templates/scaffolds/tanstack-router/routes/_auth.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute, Outlet } from "@tanstack/react-router";
+import AuthLayout from "../layout/auth.layout";
+
+export const Route = createFileRoute("/_auth")({
+  component: AuthLayout,
+});

package/templates/scaffolds/tanstack-router/routes/auth/login.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import Login from "../../page/auth/login";
+
+export const Route = createFileRoute("/_auth/login")({
+  component: Login,
+});

package/templates/scaffolds/tanstack-router/routes/one/$id.tsx

@@ -0,0 +1,191 @@
+import { createFileRoute } from "@tanstack/react-router";
+import OneId from "../../page/one/one-id";
+
+export const Route = createFileRoute("/_app/one/$id")({
+  loader: async ({ params }:{params:any}) => {
+    console.log("Fetching id");
+    return { id: params.id };
+  },
+  validateSearch: (search) => ({
+    search: typeof search.search === "string" ? search.search : "",
+    type: typeof search.type === "string" ? search.type : "",
+  }),
+  pendingComponent: () => <div>Loading...</div>,
+  component: OneId,
+});
+
+/* 
+
+pendingComponent: () => <div>Loading...</div>,
+  component: OneId,
+  show keleton here for useSuspense
+
+when using with tanstack Q
+
+  loader: async ({ context, params }) => {
+    await context.queryClient.ensureQueryData(
+      apiQueries.module.fetch_query_by_id_example({id:params.id})
+    );
+  },
+
+  why ?
+
+  Route Match
+    ↓
+params.id = "123"
+    ↓
+loader
+    ↓
+ensureQueryData(query)
+    ↓
+API Call
+    ↓
+Query Cache Filled
+    ↓
+Component Mounts
+    ↓
+useQuery(query)
+    ↓
+Gets data from cache
+
+
+
+
+---------------------------------------------------------------------------
+
+code splitting vs auto code splitting 
+
+
+this code below is manual splitting 
+
+import { lazy, Suspense } from "react";
+
+const HistoryDrawer = lazy(
+  () => import("./HistoryDrawer")
+);
+
+export default function OnePage() {
+  return (
+    <Suspense fallback={<DrawerSkeleton />}>
+      <HistoryDrawer />
+    </Suspense>
+  );
+}
+
+
+
+in router file i can do same by using laxy in mu component key 
+like i have done in react router 
+thats called manual code splitting 
+in react router we have to do it that way because no auto code splitting in react router (but comp level code splitting is same for both)
+
+now in tanstack router we have auto code splitting so we can do like this 
+
+ in file vite.config.ts
+import { defineConfig } from 'vite'
+import { tanstackRouter } from '@tanstack/router-plugin/vite'
+
+export default defineConfig({
+  plugins: [
+    tanstackRouter({
+      autoCodeSplitting: true, // Enable automatic code splitting
+    }),
+  ],
+})
+
+just do this and all the existing file route defined in routes folder will be auto code split 
+and for component level we need manual 
+
+iy works with any component
+
+what the benifit of code splitting 
+when i hits the end point it will not download all the code and comp 
+it will download only the code and comp for that route 
+so it will be fast 
+
+in build process it create diff files for each route 
+
+like chunk-0a1b2c.js
+chunk-3d4e5f.js
+chunk-6g7h8i.js
+chunk-9j0k1l.js
+
+
+Without code splitting, the bundler (Vite/Webpack/Rollup) might produce something like:
+
+dist/
+├── main.js (2 MB)
+├── styles.css
+└── index.html
+
+Download main.js
+      ↓
+Contains:
+- Dashboard
+- Users
+- Patients
+- Reports
+- Settings
+- Modals
+- Drawers
+- Charts
+- Editors
+
+With code splitting:
+
+dist/
+├── main.js
+├── dashboard.chunk.js
+├── patients.chunk.js
+├── reports.chunk.js
+├── settings.chunk.js
+├── history-drawer.chunk.js
+└── editor.chunk.js
+
+Open App
+    ↓
+Download main.js
+
+Navigate to /users/123
+      ↓
+Download users.chunk.js
+    ↓
+Download dashboard.chunk.js
+
+
+Navigate to /patients/456
+      ↓
+Download patients.chunk.js
+
+
+Without Splitting
+
+1 Big Truck
+┌──────────────────┐
+│ Everything       │
+│ Dashboard        │
+│ Patients         │
+│ Reports          │
+│ Modals           │
+│ Drawers          │
+│ Charts           │
+└──────────────────┘
+
+Truck 1 -> Core App
+Truck 2 -> Patients
+Truck 3 -> Reports
+Truck 4 -> Drawer
+Truck 5 -> Editor
+
+what improves
+Initial load speed
+Time to interactive
+Mobile performance
+Bundle size
+
+*/
+
+
+
+
+

package/templates/scaffolds/tanstack-router/routes/one/index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import One from "../../page/one";
+
+export const Route = createFileRoute("/_app/one")({
+  component: One,
+});