lincd-cli 1.2.4 → 1.2.5

package/defaults/app-with-backend/lincd.config.js

@@ -1,5 +1,5 @@
 export default {
-  cssMode: 'mixed',
+  cssMode: 'tailwind',
   cacheWebpack: true,
   analyse: false,
 };

package/defaults/app-with-backend/src/backend.ts

@@ -3,7 +3,7 @@
 import { BackendProvider } from 'lincd-server-utils/utils/BackendProvider';
 
 export class Backend extends BackendProvider {
-  constructor(server) {
-    super(server);
+  constructor(server, lincdServer) {
+    super(server, lincdServer);
   }
 }

package/defaults/app-with-backend/src/index.tsx

@@ -1,9 +1,10 @@
+import { AppContextProvider } from 'lincd-server-utils/components/AppContext';
 import { initFrontend } from 'lincd-server-utils/utils/Frontend';
+import React from 'react';
 import { hydrateRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 import App from './App';
-import React from 'react';
-import { AppContextProvider } from 'lincd-server-utils/components/AppContext';
+import { preloadMatchedRoute } from './utils/preloadRoutes';
 
 //import the storage & file configuration for the frontend
 import './config-frontend';
@@ -12,7 +13,10 @@ import './config-frontend';
 window['$RefreshReg$'] = () => {};
 window['$RefreshSig$'] = () => () => {};
 
-initFrontend().then(() => {
+initFrontend().then(async () => {
+  // Preload matched route before hydration to avoid Suspense mismatch
+  await preloadMatchedRoute();
+
   hydrateRoot(
     document,
     <React.StrictMode>

package/defaults/app-with-backend/src/routes.tsx

@@ -1,37 +1,49 @@
+import { RequireAuth } from 'lincd-auth/components/RequireAuth';
+import type { RoutesConfig } from 'lincd-server/types/RouteConfig';
 import React, { lazy, Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
 import { Spinner } from './components/Spinner';
-import { RequireAuth } from 'lincd-auth/components/RequireAuth';
 import PageNotFound from './pages/PageNotFound';
+import { lazyWithPreload } from './utils/lazyWithPreload';
+
+// Create preloadable lazy components for direct-entry routes
+const HomePage = lazyWithPreload(
+  () => import(/* webpackChunkName: "home" */ './pages/Home')
+);
+
+const SigninPage = lazyWithPreload(
+  () => import(/* webpackChunkName: "signin" */ './pages/Signin')
+);
+
+// Export preloadable components for server-side preloading
+export const PRELOADABLE_ROUTES = {
+  home: HomePage,
+  signin: SigninPage,
+};
 
-//From React 18 you can use 'lazy' to import pages only when you need them.
-//This will cause webpack to create multiple bundles, and the right bundles are automatically loaded
-interface RouteObj {
-  path: string;
-  component?: React.LazyExoticComponent<() => JSX.Element>;
-  render?: () => JSX.Element;
-  requireAuth?: boolean;
-  excludeFromMenu?: boolean;
-  label?: string;
-}
 
-export const ROUTES: { [key: string]: RouteObj } = {
-  index: {
+export const ROUTES: RoutesConfig = {
+  home: {
     path: '/',
-    component: lazy(() => import('./pages/Home' /* webpackPrefetch: true */)),
+    component: HomePage.Component,
     label: 'Home',
+    preloadChunks: ['home'],
   },
   page1: {
     path: '/page1',
-    component: lazy(() => import('./pages/Page1' /* webpackPrefetch: true */)),
+    component: lazy(
+      () => import(/* webpackChunkName: "page1" */ './pages/Page1')
+    ),
     label: 'Protected page',
     requireAuth: true,
+    preloadChunks: ['page1'],
   },
   signin: {
     path: '/signin',
-    component: lazy(() => import('./pages/Signin' /* webpackPrefetch: true */)),
+    component: SigninPage.Component,
     label: 'Sign In',
     excludeFromMenu: true,
+    preloadChunks: ['signin'],
   },
 };
 

package/defaults/app-with-backend/src/utils/lazyWithPreload.tsx

@@ -0,0 +1,42 @@
+import { ComponentType, lazy } from 'react';
+
+export interface PreloadableComponent<T extends ComponentType<any>> {
+  preload: () => Promise<{ default: T }>;
+  Component: React.LazyExoticComponent<T>;
+}
+
+/**
+ * Creates a lazy-loaded component with a preload function
+ * This allows preloading the component before React needs it
+ *
+ * @example
+ * const SigninPage = lazyWithPreload(() => import('./pages/Signin'));
+ * // Later, before navigation or on server:
+ * SigninPage.preload();
+ */
+export function lazyWithPreload<T extends ComponentType<any>>(
+  importFunc: () => Promise<{ default: T }>
+): PreloadableComponent<T> {
+  let modulePromise: Promise<{ default: T }> | null = null;
+
+  const preload = () => {
+    if (!modulePromise) {
+      modulePromise = importFunc();
+    }
+    return modulePromise;
+  };
+
+  const Component = lazy(() => {
+    // If preload was called, reuse the same promise
+    // This ensures React uses the already-loaded module
+    if (!modulePromise) {
+      modulePromise = importFunc();
+    }
+    return modulePromise;
+  });
+
+  return {
+    preload,
+    Component,
+  };
+}

package/defaults/app-with-backend/src/utils/preloadRoutes.ts

@@ -0,0 +1,38 @@
+/**
+ * Client-side script to preload lazy routes before hydration
+ * This should be called BEFORE React's hydrateRoot()
+ */
+
+// This will be populated by the server with the routes that need preloading
+declare global {
+  interface Window {
+    __PRELOAD_ROUTES__?: string[];
+  }
+}
+
+export async function preloadMatchedRoute() {
+  // Get the list of routes to preload from the server
+  const routesToPreload = window.__PRELOAD_ROUTES__ || [];
+
+  if (routesToPreload.length === 0) {
+    return;
+  }
+
+  // Dynamically import the routes module to access PRELOADABLE_ROUTES
+  const routesModule = await import('../routes');
+  const { PRELOADABLE_ROUTES } = routesModule;
+
+  // Preload each route
+  const preloadPromises = routesToPreload
+    .map((routeKey) => {
+      const preloadableRoute = PRELOADABLE_ROUTES[routeKey];
+      if (preloadableRoute && preloadableRoute.preload) {
+        return preloadableRoute.preload();
+      }
+      return null;
+    })
+    .filter(Boolean);
+
+  // Wait for all preloads to complete
+  await Promise.all(preloadPromises);
+}

package/lib/cjs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lincd-cli",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Command line tools for the lincd.js library",
   "typesVersions": {
     "*": {
@@ -110,6 +110,7 @@
     "postcss-reporter": "^7.1.0",
     "postcss-strip-inline-comments": "^0.1.5",
     "postcss-url": "^10.1.3",
+    "react-refresh": "^0.18.0",
     "react-refresh-typescript": "^2.0.10",
     "require-extensions": "^0.0.4",
     "rimraf": "^5.0.7",

package/lib/esm/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lincd-cli",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "description": "Command line tools for the lincd.js library",
   "typesVersions": {
     "*": {
@@ -110,6 +110,7 @@
     "postcss-reporter": "^7.1.0",
     "postcss-strip-inline-comments": "^0.1.5",
     "postcss-url": "^10.1.3",
+    "react-refresh": "^0.18.0",
     "react-refresh-typescript": "^2.0.10",
     "require-extensions": "^0.0.4",
     "rimraf": "^5.0.7",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lincd-cli",
-  "version": "1.2.4",
+  "version": "1.2.5",
   "description": "Command line tools for the lincd.js library",
   "main": "lib/cjs/index.js",
   "module": "lib/esm/index.js",
@@ -130,6 +130,7 @@
     "postcss-reporter": "^7.1.0",
     "postcss-strip-inline-comments": "^0.1.5",
     "postcss-url": "^10.1.3",
+    "react-refresh": "^0.18.0",
     "react-refresh-typescript": "^2.0.10",
     "require-extensions": "^0.0.4",
     "rimraf": "^5.0.7",