lincd-cli 1.2.3 → 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/defaults/package/src/types.ts

@@ -2,8 +2,3 @@ declare module '*.module.css' {
   const classes: {[key: string]: string};
   export default classes;
 }
-
-declare module '*.module.scss' {
-  const classes: {[key: string]: string};
-  export default classes;
-}

package/lib/cjs/cli-methods.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cli-methods.d.ts","sourceRoot":"","sources":["../../src/cli-methods.ts"],"names":[],"mappings":"AAuBA,OAAO,EAAC,cAAc,EAAC,MAAM,YAAY,CAAC;AAkB1C,eAAO,MAAM,SAAS,iDAoDrB,CAAC;AAmBF,wBAAgB,IAAI,CAAC,GAAG,QAAQ,OAAA,QAK/B;AACD,wBAAgB,QAAQ,CAAC,GAAG,QAAQ,OAAA,QAInC;AACD,wBAAgB,cAAc,CAAC,MAAM,KAAA,EAAE,IAAI,KAAA,QAyB1C;AA2CD,wBAAgB,kCAAkC,CAChD,aAAa,KAAA,EACb,YAAY,EAAE,CACZ,YAAY,KAAA,EACZ,YAAY,KAAA,KACT,CAAC,GAAG,EAAE,cAAc,KAAK,OAAO,CAAC,GAAG,CAAC,EAC1C,UAAU,KAAA,EACV,IAAI,UAAQ,QAoMb;AA+ID,wBAAgB,QAAQ,CAAC,OAAO,KAAA,QA6T/B;AAkCD,wBAAgB,gBAAgB,CAAC,QAAQ,SAAgB,GAAG,cAAc,EAAE,CA4B3E;AAyCD,eAAO,MAAM,cAAc,kEAgG1B,CAAC;AAwGF,eAAO,MAAM,gBAAgB;;;;;CAc5B,CAAC;AAgBF;;GAEG;AACH,eAAO,MAAM,YAAY,cAaxB,CAAC;AACF,eAAO,MAAM,WAAW,iDA2BvB,CAAC;AAEF,eAAO,MAAM,kBAAkB,iDAmC9B,CAAC;AACF,eAAO,MAAM,eAAe,iDAuC3B,CAAC;AAKF,eAAO,MAAM,YAAY,kBACT,MAAM,UACb,MAAM,mBACG,IAAI,MAAM,EAAE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,UAAU,EAAE,MAAM,CAAA;CAAC,EAAE,CAAC,qBAuFlE,CAAC;AAEF,eAAO,MAAM,cAAc,qBAuB1B,CAAC;AACF,eAAO,MAAM,QAAQ,iBAAuB,MAAM,qBAuDjD,CAAC;AACF,eAAO,MAAM,uBAAuB,qBA8CnC,CAAC;AACF,eAAO,MAAM,SAAS,gBACP,MAAM,UACX,MAAM,WACL;IAAC,KAAK,EAAE,OAAO,CAAA;CAAC,kBA2G1B,CAAC;AACF,eAAO,MAAM,WAAW,cACZ,OAAO,oCA+DlB,CAAC;AACF,eAAO,MAAM,QAAQ,sBAKpB,CAAC;AACF,eAAO,MAAM,aAAa,qBAmHzB,CAAC;AACF,eAAO,MAAM,YAAY,wBAiExB,CAAC;AAEF,eAAO,MAAM,eAAe,qBAoK3B,CAAC;AAEF,eAAO,MAAM,aAAa,gEA+GzB,CAAC;AAqBF,eAAO,MAAM,QAAQ,qCAuDpB,CAAC;AAEF,eAAO,MAAM,YAAY,iEAIX,OAAO,8BA4JpB,CAAC;AACF,eAAO,MAAM,cAAc,yCAyB1B,CAAC;AACF,eAAO,MAAM,iBAAiB,4CAQ7B,CAAC;AACF,eAAO,MAAM,iBAAiB;;EAW7B,CAAC;AAEF,eAAO,IAAI,cAAc,UAAmB,OAAO,kBA0KlD,CAAC;AAsBF,eAAO,IAAI,cAAc,8EAiExB,CAAC;AAEF,eAAO,IAAI,YAAY,iEAIE,OAAO,SACxB,OAAO,kBAiHd,CAAC;AAeF,eAAO,IAAI,4BAA4B,wFAgDtC,CAAC;AAOF,eAAO,IAAI,cAAc,uCAMxB,CAAC;AACF,eAAO,IAAI,YAAY,sCA8FtB,CAAC;AAEF,eAAO,IAAI,wBAAwB,0CA6BlC,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc,wCA8B1B,CAAC"}

package/lib/cjs/cli-methods.js

@@ -1181,14 +1181,22 @@ const runMethod = async (packageName, method, options) => {
     await (0, exports.ensureEnvironmentLoaded)();
     if (options.spawn) {
         let lincdConfig = (await Promise.resolve(`${path_1.default.join(process.cwd(), 'lincd.config.js')}`).then(s => __importStar(require(s)))).default;
+        // Set default loadAppComponent if not provided
+        if (!lincdConfig.server) {
+            lincdConfig.server = {};
+        }
+        if (!lincdConfig.server.loadAppComponent) {
+            lincdConfig.server.loadAppComponent = async () => (await Promise.resolve(`${path_1.default.join(process.cwd(), 'src', 'App')}`).then(s => __importStar(require(s)))).default;
+        }
+        // Set default loadRoutes if not provided
+        if (!lincdConfig.server.loadRoutes) {
+            lincdConfig.server.loadRoutes = async () => await Promise.resolve(`${path_1.default.join(process.cwd(), 'src', 'routes.tsx')}`).then(s => __importStar(require(s)));
+        }
         //@ts-ignore
         const ServerClass = (await Promise.resolve().then(() => __importStar(require('lincd-server/shapes/LincdServer'))))
             .LincdServer;
         await Promise.resolve(`${path_1.default.join(process.cwd(), 'scripts', 'storage-config.js')}`).then(s => __importStar(require(s)));
-        let server = new ServerClass({
-            loadAppComponent: async () => (await Promise.resolve(`${path_1.default.join(process.cwd(), 'src', 'App')}`).then(s => __importStar(require(s)))).default,
-            ...lincdConfig,
-        });
+        let server = new ServerClass(lincdConfig);
         //init the server
         console.log('Initializing server...');
         server.initOnly().then(() => {
@@ -1278,21 +1286,36 @@ const startServer = async (initOnly = false, ServerClass = null) => {
         ServerClass = (await Promise.resolve().then(() => __importStar(require('lincd-server/shapes/LincdServer')))).LincdServer;
     }
     await Promise.resolve(`${path_1.default.join(process.cwd(), 'scripts', 'storage-config.js')}`).then(s => __importStar(require(s)));
-    let appPromise;
-    if (process.env.NODE_ENV !== 'development') {
-        appPromise = (await Promise.resolve(`${path_1.default.join(process.cwd(), 'lib', 'App.js')}`).then(s => __importStar(require(s))))
-            .default;
+    // Set default loadAppComponent if not provided
+    if (!lincdConfig.server) {
+        lincdConfig.server = {};
+    }
+    if (!lincdConfig.server.loadAppComponent) {
+        let appPromise;
+        if (process.env.NODE_ENV !== 'development') {
+            appPromise = (await Promise.resolve(`${path_1.default.join(process.cwd(), 'lib', 'App.js')}`).then(s => __importStar(require(s))))
+                .default;
+        }
+        else {
+            appPromise = (await Promise.resolve(`${path_1.default.join(process.cwd(), 'src', 'App.tsx')}`).then(s => __importStar(require(s))))
+                .default;
+        }
+        lincdConfig.server.loadAppComponent = async () => {
+            return appPromise;
+        };
     }
-    else {
-        appPromise = (await Promise.resolve(`${path_1.default.join(process.cwd(), 'src', 'App.tsx')}`).then(s => __importStar(require(s))))
-            .default;
+    // Set default loadRoutes if not provided
+    if (!lincdConfig.server.loadRoutes) {
+        lincdConfig.server.loadRoutes = async () => {
+            if (process.env.NODE_ENV !== 'development') {
+                return await Promise.resolve(`${path_1.default.join(process.cwd(), 'lib', 'routes.js')}`).then(s => __importStar(require(s)));
+            }
+            else {
+                return await Promise.resolve(`${path_1.default.join(process.cwd(), 'src', 'routes.tsx')}`).then(s => __importStar(require(s)));
+            }
+        };
     }
-    let server = new ServerClass({
-        loadAppComponent: async () => {
-            return appPromise;
-        },
-        ...lincdConfig,
-    });
+    let server = new ServerClass(lincdConfig);
     //Important to use slice, because when using clusers, child processes need to be able to read the same arguments
     let args = process.argv.slice(2);
     //if --initOnly is passed, only initialize the server and don't start it
@@ -1308,6 +1331,7 @@ const buildApp = async () => {
     await (0, exports.buildFrontend)();
     await (0, exports.buildBackend)();
     console.log(chalk_1.default.magenta(`✅ ${process.env.NODE_ENV} app build finished`));
+    process.exit(0);
 };
 exports.buildApp = buildApp;
 const buildFrontend = async () => {