5htp-core 0.1.2-3 → 0.2.0

package/changelog.md

@@ -0,0 +1,5 @@
+# 01/01/2023:
+
+* Redesigned systems service. Pass app instance servces list through constructor attribute instead of importing instance
+* Update babel-plugn-glob-import
+* 

package/doc/TODO.md

@@ -0,0 +1,71 @@
+* Fix erreurs type Client / Server context
+    * Server side: ServerContext
+    * Client side: ClientContext | ServerContext
+    * PageResponse extends Response
+* Toast service
+* ClientApplication hooks
+    app.on('bug')
+    app.on('error')
+
+
+# Dependancies injection
+
+# Full stack Pages
+
+```typescript
+import Router from '@server/services/router';
+import { TRouterContext as ServerServices } from '@server/services/router/response';
+import { TRouterContext as ClientServices } from '@client/services/router/response';
+
+abstract class Controller< 
+    TRouter extends Router, 
+    TData extends any = any,
+    TUserAccess extends string = string
+> {
+
+    abstract auth: TUserAccess;
+
+    abstract get( services: ServerServices<TRouter> ): Promise<TData>;
+
+    abstract render( context: TData, services: ClientServices<TRouter> ): ComponentChild;
+
+}
+```
+
+```typescript
+//? /headhunter/missions/suggested'
+class Missions extends Controller<CrossPath["router"]> {
+
+    auth = 'USER';
+
+    async get({ headhunting, response, auth  }) {
+
+        const user = await auth.check('USER');
+
+        const suggested =  await headhunting.missions.Suggest( user );
+    
+        return { suggested }
+    }
+
+    render({ page, api, suggested }) {
+        return (
+            <Page title="App title here" subtitle="SEO description here">{page.loading || <>
+    
+                <section class="col">
+    
+                    <header class="row">
+                        <h2 class="col-1">Suggested Missions</h2>
+                    </header>
+    
+                    <div class="grid xa3">
+                        {suggested.map( mission => (
+                            <MissionCard mission={mission} />
+                        ))}
+                    </div>
+                </section>
+    
+            </>}</Page>
+        )
+    }
+}
+```

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
-	"description": "5-HTP, scientifically called 5-Hydroxytryptophan, is the precursor of happiness neurotransmitter.",
-	"version": "0.1.2-3",
+	"description": "Convenient Full Stack TypeScript framework designed for Performance and Productivity.",
+	"version": "0.2.0",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,11 +13,11 @@
 		"framework"
 	],
 	"dependencies": {
-		"@sendgrid/mail": "^7.4.6",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
 		"array-move": "^3.0.1",
+		"axios": "^1.2.1",
 		"bowser": "^2.11.0",
 		"chart.js": "^3.6.2",
 		"cli-highlight": "^2.1.11",
@@ -83,6 +83,7 @@
 		"@types/nodemailer": "^6.4.4",
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
-		"@types/ws": "^7.4.7"
+		"@types/ws": "^7.4.7",
+		"babel-plugin-glob-import": "^0.0.3"
 	}
 }

package/src/client/{App.tsx → app/component.tsx}

@@ -6,12 +6,13 @@
 import React from 'react';
 
 // Core
-import { ReactClientContext, ClientContext } from '@client/context';
-import DialogManager from '@client/components/Dialog/Manager'
 import type { Layout } from '@common/router';
+import { ReactClientContext } from '@/client/context';
+import DialogManager from '@client/components/Dialog/Manager'
 
 // Core components
-import Router from '@client/router/component';
+import Router from '@client/services/router/components/router';
+import type { TClientOrServerContext } from '@common/router';
 
 // Resources
 import "@client/assets/css/core.less";
@@ -19,20 +20,26 @@ import "@client/assets/css/core.less";
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
-export default function App ({ context }: { context: ClientContext }) {
+export default function App ({ context }: { 
+    context: TClientOrServerContext,
+}) {
 
-    const route = context.page?.route;
+    const route = context.route;
     const curLayout = route.options.layout;
     const [layout, setLayout] = React.useState<Layout | false | undefined>(curLayout);
-    context.setLayout = setLayout;
+
+    // TODO: context.page is always provided in the context on the client side
+    if (context.app.side === "client")
+        context.app.setLayout = setLayout;
 
     return (
         <ReactClientContext.Provider value={context}>
 
-            <DialogManager />
+            <DialogManager context={context} />
             
             {!layout ? <>
-                <Router />
+                {/* TODO: move to app, because here, we're not aware that the router service has been defined */}
+                <Router service={context.router} />
             </> : <>
                 <layout.Component context={context} />
             </>}

package/src/client/app/index.ts

@@ -0,0 +1,128 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+if (typeof window === 'undefined')
+    throw new Error(`This file shouldn't be loaded on server side !!!!`);
+
+window.dev && require('preact/debug');
+
+// Core
+import { Erreur } from '@common/errors';
+import type { Layout } from '@common/router';
+import { createDialog } from '@client/components/Dialog/Manager';
+
+// Local
+import type { AnyService } from './service';
+
+export { default as Service } from './service';
+
+/*----------------------------------
+- TYPES
+----------------------------------*/
+
+declare global {
+    interface Window {
+        dev: boolean,
+        // Defined by loading gtag.js
+        gtag: (action: string, name: string, params?: any) => void,
+        /*context: ClientContext,
+        user: User,*/
+    }
+}
+
+export type TBugReportInfos = {
+    stacktrace?: string,
+    observation?: string,
+    before?: string,
+}
+
+/*----------------------------------
+- CLASS
+----------------------------------*/
+export default abstract class Application {
+
+    public side = 'client' as 'client';
+
+    private servicesList: AnyService[] = []
+
+    // TODO: merge modal and toast in the same instance
+    public modal = createDialog(this, false);
+    public toast = createDialog(this, true);
+
+    public constructor() {
+
+    }
+
+    public registerService( service: AnyService ) {
+        console.log(`[app] Register service`, service.constructor?.name);
+        this.servicesList.push(service);
+    }
+
+    public start() {
+        this.bindErrorHandlers();
+        this.startServices();
+        this.boot();
+    }
+
+    public abstract boot(): void;
+
+    public startServices() {
+
+        console.log(`[app] Starting ${this.servicesList.length} services.`);
+
+        for (const service of this.servicesList) {
+            console.log(`[app] Start service`, service);
+            service.start();
+        }
+
+        console.log(`[app] All ${this.servicesList.length} services were started.`);
+    }
+
+    public bindErrorHandlers() {
+
+        // Impossible de recup le stacktrace ...
+        /*window.addEventListener("unhandledrejection", (e) => {
+            clientBug(JSON.stringify(e))
+            console.log("unhandledrejection", e.stack);
+            
+        });*/
+        
+        window.onerror = (message, file, line, col, stacktrace) =>
+            this.reportBug({
+                stacktrace: stacktrace?.stack || JSON.stringify({ message, file, line, col })
+            }).then(() => {
+
+                // TODO in toas service: app.on('bug', () => toast.warning( ... ))
+                /*context?.toast.warning("Bug detected", 
+                    "A bug report has been sent, because I've detected a bug on the interface. I'm really sorry for the interruption.",
+                    null,
+                { autohide: false });*/
+
+            })
+    }
+
+    public handleError( error: Erreur | Error, httpCode?: number ) {
+    
+        /*console.error(`[api] Network error:`, e);
+        context.toast.error("Please check your internet connection and try again.", undefined, null, { autohide: false });*/
+    }
+
+    public reportBug = (infos: TBugReportInfos) => fetch('/help/bug/gui', {
+        method: 'POST',
+        headers: {
+            'Accept': "application/json",
+            'Content-Type': 'application/json'
+        },
+        body: JSON.stringify({
+            url: window.location.pathname,
+            ssrData: JSON.stringify(window["ssr"]),
+            guiVersion: BUILD_DATE,
+            ...infos
+        })
+    })
+
+    public setLayout(layout: Layout) {
+        throw new Error(`page.setLayout has been called before the function is assigned from the <App /> component.`);
+    };
+}   

package/src/client/app/service.ts

@@ -0,0 +1,34 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+import type Application from ".";
+
+/*----------------------------------
+- TYPES: OPTIONS
+----------------------------------*/
+
+export type AnyService = Service<{}, Application>
+
+/*----------------------------------
+- CLASS
+----------------------------------*/
+export default abstract class Service<
+    TConfig extends {}, 
+    TApplication extends Application
+> {
+    public constructor( 
+        public app: TApplication, 
+        public config: TConfig,
+    ) {
+
+        // No client service should be loaded from server side
+        if (typeof window === 'undefined')
+            throw new Error(`Client services shouldn't be loaded on server side.`);
+
+        // Make the app aware of his services
+        app.registerService(this);
+    }
+
+    public abstract start(): void;
+}

package/src/client/app.tsconfig.json

@@ -11,10 +11,6 @@
             // Only used for typings (ex: ServerResponse)
             // Removed before webpack compilation
             "@server/*": ["../node_modules/5htp-core/src/server/*"],
-            "@validator": ["../node_modules/5htp-core/src/client/data/input"],
-            "@router": ["../node_modules/5htp-core/src/client/router"],
-            "@errors": ["../node_modules/5htp-core/src/common/errors"],
-            "@models": ["../.cache/client/models"],
             "@/*": ["./*"],
 
             // ATTENTION: Les références à preact doivent toujours pointer vers la même instance

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

@@ -8,7 +8,7 @@ import type { ComponentChild } from 'preact';
 
 // Core components
 import Button from '@client/components/button';
-import { Link } from '@client/router';
+import { Link } from '@client/services/router';
 
 // Resources
 import './index.less';

package/src/client/components/Dialog/Manager.tsx

@@ -7,11 +7,10 @@ import React from 'react';
 import { ComponentChild } from 'preact';
 
 // Libs
-import useContext, { ClientContext } from '@client/context';
-import { ClientResponse } from '@client/router';
-import { initStateAsync, execFetchersState } from '@client/hooks/useState/fetchers';
+import useContext from '@/client/context';
 
 // Métier
+import type Application from '../../app';
 import Card, { Props as CardInfos } from './card';
 import Button from '../button';
 
@@ -43,11 +42,34 @@ export type TDialogControls = {
     then: (cb: TOnCloseCallback<any>) => any
 }
 
+type DialogActions = {
+
+    setToasts: ( setter: (old: ComponentChild[]) => ComponentChild[]) => void,
+
+    show: (
+        // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
+        Content: ComposantToast | Promise<{ default: ComposantToast }> | TOptsToast,
+        paramsInit?: TParams
+    ) => TDialogControls,
+
+    confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No') => TDialogControls,
+
+    loading: (title: string) => TDialogControls,
+
+    info: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+
+    success: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+
+    warning: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+
+    error: (...[title, content, boutons, options]: TToastShortcutArgs) => TDialogControls,
+}
+
 /*----------------------------------
 - SERVICE CONTEXTE
 ----------------------------------*/
 let idA: number = 0;
-export const createDialog = (ctx: ClientContext, isToast: boolean) => {
+export const createDialog = (app: Application, isToast: boolean): DialogActions => {
 
     const show = <TReturnType extends any = true>(
         // On utilise une fonction pour pouvoir accéder aux fonctions (close, ...) lors de la déclaration des infos de la toast
@@ -60,7 +82,7 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
 
         const close = (retour: TReturnType) => {
 
-            ctx.bridges.setToasts(q => q.filter(m => m.id !== id))
+            instance.setToasts(q => q.filter(m => m.id !== id))
 
             if (onClose !== undefined)
                 onClose(retour);
@@ -105,7 +127,7 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
             // Chargeur de données
             /*if (('data' in ComposantCharge) && typeof ComposantCharge.data === 'function') {
      
-                propsRendu.data = await ComposantCharge.data(ctx, paramsInit);
+                propsRendu.data = await ComposantCharge.data(app, paramsInit);
      
                 const { fetchersStateA } = initStateAsync(propsRendu.data, {}, false);
      
@@ -125,7 +147,7 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
 
             render["id"] = id;
 
-            ctx.bridges.setToasts(q => [...q, render]);
+            instance.setToasts(q => [...q, render]);
         });
 
         return {
@@ -134,9 +156,12 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
         }
     };
 
-    return {
+    const instance: DialogActions = {
+
         show: show,
 
+        setToasts: undefined as unknown as DialogActions["setToasts"],
+
         confirm: (title: string, content: string | ComponentChild, defaultBtn: 'Yes'|'No' = 'No') => show<boolean>(({ close }) => (
             <div class="col">
                 <header>
@@ -156,7 +181,7 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
             </div>
         )),
 
-        loading: (title: string) => ctx.loadIndicator = show({
+        loading: (title: string) => app.loadIndicator = show({
             title: title,
             type: 'loading'
         }),
@@ -193,6 +218,8 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
             ...options
         }),
     }
+
+    return instance;
 }
 
 /*----------------------------------
@@ -201,12 +228,12 @@ export const createDialog = (ctx: ClientContext, isToast: boolean) => {
 import './index.less';
 export default () => {
 
-    const ctx = useContext();
+    const app = useContext();
 
     const [rendered, setRendered] = React.useState<ComponentChild[]>([]);
 
-    ctx.bridges.setToasts = setRendered;
-    //ctx.register({}, { setToasts: setRendered });
+    if (app.side === 'client')
+        app.modal.setToasts = app.toast.setToasts = setRendered;
 
     React.useEffect(() => {
 

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

@@ -13,7 +13,7 @@ import { propsDefautChampForm, TBasePropsChamp } from '@client/components/input/
 import { TSchema, TRetourValidation, initDonnees, validate as validerSchema, TSchemaChampComplet } from '@common/data/input/validate';
 import { simpleDeepCopy, chemin } from '@common/data/objets';
 import { ContexteOnglets } from '@client/components/containers/tabs';
-import useContext from '@client/context';
+import useContext from '@/client/context';
 
 /*----------------------------------
 - TYPES ENTREE

package/src/client/components/button.tsx

@@ -7,8 +7,8 @@ import React from 'react';
 import { VNode, RefObject,ComponentChild } from 'preact';
 
 // Core
-import { history } from '@client/router/request/history';
-import useContext from '@client/context';
+import { history } from '@client/services/router/request/history';
+import useContext from '@/client/context';
 
 /*----------------------------------
 - TYPES

package/src/client/components/containers/Popover/index.tsx

@@ -15,7 +15,7 @@ import Bouton, { Props as PropsBouton } from '@client/components/button';
 // Libs
 import getPosition, { TSide } from './getPosition';
 import { blurable, deepContains } from '@client/utils/dom';
-import useContexte from '@client/context';
+import useContexte from '@/client/context';
 
 /*----------------------------------
 - TYPES

package/src/client/components/data/spintext/index.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { ComponentChild } from 'preact';
 
 // Core
-import { useState } from '@client/context';
+import { useState } from '@/client/context';
 
 /*----------------------------------
 - TYPES

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

@@ -12,7 +12,7 @@ import { TDialogControls } from '../Dialog/Manager';
 export type { TDialogControls } from '../Dialog/Manager';
 
 // Libs
-import useContexte from '@client/context';
+import useContexte from '@/client/context';
 
 /*----------------------------------
 - TYPES

package/src/client/components/index.ts

@@ -0,0 +1,8 @@
+export { default as Button } from './button';
+export { default as Row } from './row';
+export { default as Card } from './card';
+export { default as Table } from './Table';
+export { default as Select } from './Select';
+export { default as Amount } from './Amount';
+export { default as Logo } from './Logo';
+export { default as Input } from './input';

package/src/client/components/input/BaseV2/index.tsx

@@ -7,7 +7,7 @@ import React from 'react';
 import { ComponentChild } from 'preact';
 
 // Core libs
-import { useState } from '@client/context';
+import { useState } from '@client/hooks';
 
 /*----------------------------------
 - TYPES

package/src/client/components/input/UploadImage/index.tsx

@@ -9,7 +9,7 @@ import { ComponentChild } from 'preact';
 import Bouton from '@client/components/button';
 
 // Libs
-import useContext, { useState } from '@client/context';
+import useContext, { useState } from '@/client/context';
 import NormalisedFile from '@common/data/file';
 
 // Ressources

package/src/client/hooks/index.ts

@@ -0,0 +1,5 @@
+export { default as useState } from './useState';
+export { default as useActivity } from './useActivity';
+export { default as useComponent } from './useComponent';
+export { default as useScript } from './useScript';
+export { default as useVisible } from './useVisible';

package/src/client/hooks/useState/index.tsx

@@ -6,7 +6,7 @@
 import { useState as reactUseState, useEffect as reactUseEffect } from 'preact/hooks';
 
 // Libs
-import useContexte from '@client/context';
+import useContexte from '@/client/context';
 
 // Libs spécifiques
 import { execFetchersState, initStateAsync } from './fetchers';
@@ -18,7 +18,7 @@ import { execFetchersState, initStateAsync } from './fetchers';
 
 import TRequeteApi, { TOptionsRequete } from '@common/api';
 
-import { TDataResolved } from '@client/router';
+import { TDataResolved } from '@client/services/router';
 
 /*----------------------------------
 - TYPES: DEFINITIONS

package/src/client/hooks.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import type { ComponentChild } from 'preact';
+
+// Hooks
+/*export { default as useState } from '@client/hooks/useState';
+export type { TActions as TActionsState } from '@client/hooks/useState';
+export { default as useComponent } from '@client/hooks/useComponent';
+export { default as useScript } from '@client/hooks/useScript';*/
+
+// Utils
+export const Switch = (val: string | number, options: { [cle: string]: ComponentChild }) => {
+    return (val in options) ? options[val] : null;
+}
+
+export const useState = <TData extends TObjetDonnees>(initial: TData): [
+    TData,
+    (data: Partial<TData>) => void
+] => {
+    const [state, setState] = React.useState<TData>(initial);
+    const setPartialState = (data: Partial<TData>) => setState(current => ({ ...current, ...data }));
+    return [state, setPartialState]
+}

package/src/client/index.ts

@@ -0,0 +1,5 @@
+import Application from '@/client';
+
+const app = new Application();
+
+app.start();

package/src/client/pages/_layout/landing/index.tsx

@@ -6,8 +6,6 @@
 import React from 'react';
 
 // Core
-import route from '@router';
-import { useState } from '@client/context';
 
 // Core components
 import Button, { Props as ButtonProps } from '@client/components/button';

package/src/client/pages/_messages/400.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -15,7 +15,7 @@ import useHeader from '@client/pages/useHeader';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error(400, {}, ({ message }, { modal }) => {
+router.error(400, {}, ({ message, modal }) => {
 
     if (!message)
         message = "The request you made is incorrect.";

package/src/client/pages/_messages/401.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import route from '@router';
+import { router } from '@app';
 import Button from '@client/components/button';
 
 // App
@@ -18,7 +18,7 @@ import Button from '@client/components/button';
 /*----------------------------------
 - CONTROLEUR
 ----------------------------------*/
-route.error(401, {  }, ({ }, { api, toast, modal, request, page }) => {
+router.error(401, {  }, ({ api, toast, modal, request, page }) => {
 
     request.response?.redirect('/');