5htp-core 0.3.3 → 0.3.4

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.3.3",
+	"version": "0.3.4",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/assets/css/core.less

@@ -106,23 +106,4 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 
-}
-
-/*#loading {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    backdrop-filter: blur(10px);
-    background: fade(#fff, 50%);
-    color: #000;
-
-    visibility: hidden;
-}*/
+}

package/src/client/components/Select/index.tsx

@@ -180,7 +180,10 @@ export default ({
                 </div>
 
                 {(enableSearch && choices.length !== 0 && search.keywords.length !== 0) && (
-                    <ul class="row al-left wrap sp-05 pd-1">
+                    <ul class="row al-left wrap sp-05 pd-1" style={{
+                        maxHeight: '30vh',
+                        overflowY: 'auto'
+                    }}>
                         {choices.map( choice => (
                             <ChoiceElement choice={choice} 
                                 currentList={currentList}

package/src/client/services/router/components/router.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import useContext from '@/client/context';
 
 // Specific
-import type Router from '..';
+import type ClientRouter from '..';
 import PageComponent from './Page';
 import ClientRequest from '../request';
 import { history, location, Update } from '../request/history';
@@ -29,35 +29,47 @@ export type PropsPage<TParams extends { [cle: string]: unknown }> = TParams & {
 
 const LogPrefix = `[router][component]`
 
+const PageLoading = ({ clientRouter }: { clientRouter?: ClientRouter }) => {
+
+    const [isLoading, setLoading] = React.useState(false);
+
+    if (clientRouter)
+        clientRouter.setLoading = setLoading;
+
+    return isLoading ? (
+        <div id="loading">
+            <i src="spin" />
+        </div>
+    ) : null
+
+}
+
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export default ({ service: router }: { service: Router }) => {
+export default ({ service: clientRouter }: { service?: ClientRouter }) => {
 
     const context = useContext();
 
     const [pages, setPages] = React.useState<{
-        current: undefined | Page,
-        loading: boolean
+        current: undefined | Page
     }>({
-        current: context.page,
-        loading: false
+        current: context.page
     });
     
     const resolvePage = async (request: ClientRequest, locationUpdate?: Update) => {
 
+        if (!clientRouter) return;
+
         // WARNING: Don"t try to play with pages here, since the object will not be updated
         //  If needed to play with pages, do it in the setPages callback below
         
-        // Set.loading  state
-        setPages( oldState => ({
-            ...oldState,
-            loading: true,
-        }));
+        // Set loading state
+        clientRouter.setLoading(true);
 
         // Load the route chunks
         context.request = request;
-        const newpage = context.page = await router.resolve(request);
+        const newpage = context.page = await clientRouter.resolve(request);
 
         // Page not found: Directly load with the browser
         if (newpage === undefined) {
@@ -69,17 +81,18 @@ export default ({ service: router }: { service: Router }) => {
             return;
         }
 
-        const data = context.data = await newpage.fetchData();
+        // Fetch API data to hydrate the page
+        const newData = context.data = await newpage.fetchData();
 
         // Add page container
         setPages( pages => {
 
-            const currentRoute = pages.current?.route;
-
             // Check if the page changed
-            if (currentRoute?.path === request.path)  {
+            if (pages.current?.chunkId === newpage.chunkId)  {
                 console.warn(LogPrefix, "Canceling navigation to the same page:", {...request});
-                return { ...pages, loading: false }
+                pages.current.setAllData(newData);
+                clientRouter.setLoading(false);
+                return { ...pages }
             }
 
             // If if the layout changed
@@ -93,24 +106,12 @@ export default ({ service: router }: { service: Router }) => {
                 //  Find a way to unload the  previous layout / page resources before to load the new one
                 console.log(LogPrefix, `Changing layout. Before:`, curLayout, 'New layout:', newLayout);
                 window.location.replace(request.url);
-                return { ...pages, loading: false }
+                return { ...pages }
 
                 context.app.setLayout(newLayout);
             }
 
-            // Remove old page after the aff-page css transition
-            const oldPage = pages.current;
-            if (oldPage !== undefined) {
-                setTimeout(() => setPages({ 
-                    current: newpage,
-                    loading: false
-                }), 500);
-            }
-
-            return  {
-                current: newpage,
-                loading: false
-            }
+            return  { current: newpage }
         });
     }
 
@@ -136,13 +137,18 @@ export default ({ service: router }: { service: Router }) => {
             await resolvePage(request);
             
             // Scroll to the selected content via url hash
-            restoreScroll(pages.current);
+            //restoreScroll(pages.current);
         })
     }, []);
 
     // On every page change
     React.useEffect(() => {
 
+        if (!clientRouter) return;
+
+        // Page loaded
+        clientRouter.setLoading(false);
+
         // Reset scroll
         window.scrollTo(0, 0);
         // Should be called AFTER rendering the page (so after the state change)
@@ -151,10 +157,10 @@ export default ({ service: router }: { service: Router }) => {
         restoreScroll(pages.current);
 
         // Hooks
-        router.runHook('page.changed', pages.current)
+        clientRouter.runHook('page.changed', pages.current)
         
     }, [pages.current]);
-    
+
     // Render the page component
     return <>
         {/*pages.previous && (
@@ -169,10 +175,6 @@ export default ({ service: router }: { service: Router }) => {
             />
         )}
 
-        {pages.loading && (
-            <div id="loading">
-                <i src="spin" />
-            </div>
-        )}
+        <PageLoading clientRouter={clientRouter} />
     </>
 }

package/src/server/app/index.ts

@@ -124,19 +124,23 @@ export class Application<
     
     protected async start() {
 
+        console.log("Build date", BUILD_DATE);
+        console.log("Core version", CORE_VERSION);
         console.log(`5HTP Core`, process.env.npm_package_version);
+        const startTime = Date.now();
 
         // Handle errors & crashs
         this.on('error', e => this.Console.createBugReport(e))
 
         console.info(`[boot] Start services`);
         await this.startServices();
+        this.debug && console.info(`[boot] Services are ready`);
 
-        this.debug && console.info(`[boot] App ready`);
         await this.ready();
         await this.runHook('ready');
 
-        this.debug && console.info(`[boot] Application is ready.`);
+        const startedTime = (Date.now() - startTime) / 1000;
+        console.info(`[boot] Application launched in ${startedTime}s`);
         this.launched = true;
     }
 

package/src/server/services/console/index.ts

@@ -137,6 +137,8 @@ export default class Console extends Service<Config, Hooks, Application, Service
 
     protected async start() {
 
+        return;
+
         const origLog = console.log
 
         this.logger = new Logger({
@@ -167,7 +169,7 @@ export default class Console extends Service<Config, Hooks, Application, Service
                     origLog(logMetaMarkup + formatWithOptions(settings.prettyInspectOptions, ...logArgs) + logErrorsStr);
                 },
             }
-        });
+        }); 
 
         if (console["_wrapped"] !== undefined)
             return;
@@ -176,7 +178,7 @@ export default class Console extends Service<Config, Hooks, Application, Service
             console[ logLevel ] = (...args: any[]) => {
 
                 // Dev mode = no care about performance = rich logging
-                if (this.app.env.profile === 'dev')
+                if (this.app.env.profile === 'dev' || ['warn', 'error'].includes( logLevel ))
                     //this.logger[ logLevel ](...args);
                     origLog(...args);
                 // Prod mode = minimal logging  

package/src/server/services/router/http/index.ts

@@ -121,8 +121,15 @@ export default class HttpServer {
                 serveStatic: {
                     setHeaders: function setCustomCacheControl(res, path) {
 
+                        const dontCache = [
+                            '/public/icons',
+                            '/public/client'
+                        ]
+
+                        res.setHeader('Cache-Control', 'public, max-age=0');
+
                         // Set long term cache, except for non-hashed filenames
-                        /*if (__DEV__ || path.includes('/icons.')) {
+                        /*if (dontCache.some( p => path.startsWith( p ))) {
                             res.setHeader('Cache-Control', 'public, max-age=0');
                         } else {
                             res.setHeader('Cache-Control', 'public, max-age=604800000'); // 7 Days

package/src/types/global/modules.d.ts

@@ -36,10 +36,12 @@ declare module "*.svg" {
     export = value;
 }
 
-declare module "*.(png|webp|jpg|jpeg|gif|bmp)" {
-    const value: string;
-    export = value;
-}
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";
+declare module "*.webp";
+declare module "*.gif";
+declare module "*.bmp";
 
 declare module "*.mp3" {
     const value: string;

package/tsconfig.common.json

@@ -40,5 +40,5 @@
             "react/jsx-runtime": ["preact/jsx-runtime"]
         },
     },
-    "include": ["src"]
+    "include": ["src", "types/global"]
 }