5htp-core 0.3.3 → 0.3.4-2

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-2",
 	"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/Form.ts

@@ -181,15 +181,16 @@ export default function useForm<TFormData extends {}>(
 
                 // Submit on press enter
                 onKeyDown: e => {
-                    if (e.key === 'Enter') {
+                    if (e.key === 'Enter' || (e.keyCode || e.which) === 13) {
                         submit({ [fieldName]: e.target.value } as Partial<TFormData>);
                     }
                 },
 
                 // Error
                 errors: state.errors[fieldName],
-                required: validator.options?.opt !== true,
-                validator: validator,
+
+                // Component attributes
+                ...validator.componentAttributes
             }
         }
     }

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/common/validation/validator.ts

@@ -10,6 +10,7 @@ import { InputError } from '@common/errors';
 
 // Specific
 import type { TValidateOptions } from './schema';
+import type { InputBaseProps } from '@client/components/inputv3/base';
 
 /*----------------------------------
 - TYPES
@@ -64,14 +65,23 @@ export const EXCLUDE_VALUE = "action:exclure" as const;
 /*----------------------------------
 - CLASS
 ----------------------------------*/
-export default class Validator<TValue, TOptions extends TValidator<TValue> = TValidator<TValue>> {
+export default class Validator<
+    TValue, 
+    TOptions extends TValidator<TValue> = TValidator<TValue>,
+    TComponent = React.FunctionComponent< InputBaseProps< TValue > >
+> {
 
     public constructor( 
         public type: string,
         public validateType: TValidationFunction<TValue>, 
-        public options: TOptions
+        public options: TOptions,
+        public componentAttributes: Partial<InputBaseProps<TValue>> = {}
     ) {
 
+        // Basic component attriutes
+        this.componentAttributes.required = options?.opt !== true;
+        //this.componentAttributes.validator = this;
+
     }
 
     public isEmpty = (val: any) => val === undefined || val === '' || val === null

package/src/common/validation/validators.ts

@@ -111,22 +111,22 @@ export default class SchemaValidators {
         })
     }
 
-    public choice = (values?: any[], opts: TValidator<any> & {} = {}) => 
+    public choice = (choices?: any[], opts: TValidator<any> & {} = {}) => 
         new Validator<any>('choice', (val, input, output) => {
 
             // Choice object
             if (typeof val === 'object' && ('value' in val) && typeof val.value !== 'object')
                 val = val.value;
 
-            if (values !== undefined) {
-                const isValid = values.some(v => v.value === val);
+            if (choices !== undefined) {
+                const isValid = choices.some(v => v.value === val);
                 if (!isValid)
-                    throw new InputError("Invalid value. Must be: " + values.map(v => v.value).join(', '));
+                    throw new InputError("Invalid value. Must be: " + choices.map(v => v.value).join(', '));
             }
 
             return val;
 
-        }, opts)
+        }, opts, { choices })
 
     /*----------------------------------
     - CHAINES

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

@@ -167,7 +167,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 +176,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  
@@ -350,10 +350,10 @@ export default class Console extends Service<Config, Hooks, Application, Service
  
     public printHtml( logs: TJsonLog[], full: boolean = false ): string {
 
-        let html = logs.map( logEntry => logToHTML( logEntry, this )).join('\n');
+        let html = logs.map( logEntry => logToHTML( logEntry, this )).join('<br />');
 
         if (full) {
-            const consoleCss = `background: #000; padding: 20px; font-family: 'Fira Mono', 'monospace', 'Monaco'; font-size: 12px; line-height: 20px;`
+            const consoleCss = `background: #000; padding: 20px; font-family: 'Fira Mono', 'monospace', 'Monaco'; font-size: 12px; line-height: 20px;color: #aaa;`
             html = '<div style="' + consoleCss + '">' + html + '</div>';
         }
 

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"]
 }