5htp 0.5.9 → 0.6.1

package/app/index.ts

@@ -20,6 +20,23 @@ import type { TEnvConfig } from '../../core/server/app/container/config';
 
 export type TAppSide = 'server' | 'client'
 
+type TServiceSetup = {
+    id: string,
+    name: string,
+    config: {},
+    subservices: TServiceSubservices,
+    type: 'service.setup'
+}
+
+type TServiceRef = {
+    refTo: string,
+    type: 'service.ref'
+}
+
+type TServiceSubservices = {
+    [key: string]: TServiceSetup | TServiceRef
+}
+
 /*----------------------------------
 - SERVICE
 ----------------------------------*/
@@ -110,7 +127,7 @@ export class App {
 
     public registered = {}
 
-    public use( referenceName: string ) {
+    public use( referenceName: string ): TServiceRef {
 
         // We don't check because all service are not regstered when we register subservices
         /*if (this.registered[referenceName] === undefined) {
@@ -119,37 +136,38 @@ export class App {
 
         return {
             refTo: referenceName,
+            type: 'service.ref'
         }
     }
 
     public setup(...args: [
         // { user: app.setup('Core/User') }
-        serviceId: string,
-        serviceConfig?: TServiceConfig,
-        serviceSubservices?: TServiceSubservices
+        servicePath: string,
+        serviceConfig?: {},
     ] | [
         // app.setup('User', 'Core/User')
         serviceName: string, 
-        serviceId: string,
-        serviceConfig?: TServiceConfig,
-        serviceSubservices?: TServiceSubservices
-    ]) {
+        servicePath: string,
+        serviceConfig?: {},
+    ]): TServiceSetup {
 
         // Registration to app root
         if (typeof args[1] === 'string') {
             
-            const [name, id, config, subservices] = args;
+            const [name, id, config] = args;
 
-            const service = { id, name, config, subservices }
+            const service = { id, name, config, type: 'service.setup' } as TServiceSetup
 
             this.registered[name] = service;
 
+            return service;
+
         // Scoped to a parent service
         } else {
 
-            const [id, config, subservices] = args;
+            const [id, config] = args;
 
-            const service = { id, config, subservices }
+            const service = { id, config, type: 'service.setup' } as TServiceSetup
 
             return service;
         }
@@ -157,9 +175,6 @@ export class App {
 
     public async warmup() {
 
-        console.log("env", this.env);
-        
-
         // Require all config files in @/server/config
         const configDir = path.resolve(cli.paths.appRoot, 'server', 'config');
         const configFiles = fs.readdirSync(configDir);
@@ -167,27 +182,6 @@ export class App {
             console.log("Loading config file:", configFile);
             require( path.resolve(configDir, configFile) );
         }
-
-        // Wait 2 seconds
-        await new Promise(resolve => setTimeout(resolve, 1000));
-
-        // Load subservices
-        // for (const serviceName in this.registered) {
-        //     const service = this.registered[serviceName];
-
-        //     const subservices = {}
-        //     if (service.subservices) {
-        //         const list = service.subservices( this.registered );
-        //         for (const subservice of list) {
-
-        //             subservices[subservice.name] = list[];
-                    
-        //         }
-        //     }
-        //     service.subservices = subservices;
-        // }
-
-        // console.log("SERVICES", this.registered);
     }
 }
 

package/compiler/client/index.ts

@@ -312,22 +312,16 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
                         new CssMinimizerPlugin()
                     ]),
 
-                    // BUG: Essai de charger les plugins depuis app/node_modules
-                    //      Et la specification via require() ne sembl epas être supportée ...
-                    // https://webpack.js.org/plugins/image-minimizer-webpack-plugin/
                     /*new ImageMinimizerPlugin({
+                        // (optional) add generators; you can also just import &format=webp (see below)
                         generator: [
                             {
-                                // You can apply generator using `?as=webp`, you can use any name and provide more options
                                 preset: "webp",
                                 implementation: ImageMinimizerPlugin.imageminGenerate,
-                                options: {
-                                    // Please specify only one plugin here, multiple plugins will not work
-                                    plugins: ["imagemin-webp"],
-                                },
-                            },
-                        ],
-                    }),*/
+                                options: { plugins: ["imagemin-webp"] }
+                            }
+                        ]
+                    })*/
                 ],
                 nodeEnv: 'production',
                 sideEffects: true,

package/compiler/common/babel/plugins/injection-dependances/index.ts

@@ -23,6 +23,8 @@ module.exports = {
     ]
 }
 
+const routerMethods = ['get', 'post', 'put', 'delete', 'patch'];
+
 /*----------------------------------
 - PLUGIN
 ----------------------------------*/
@@ -133,7 +135,7 @@ function Plugin (babel) {
                         &&
                         i.node.callee.property.type === 'Identifier'
                         &&
-                        ['get', 'post', 'put', 'delete'].includes(i.node.callee.property.name)
+                        routerMethods.includes(i.node.callee.property.name)
                         &&
                         i.node.arguments.length >= 2 // url + au moins 1 middleware
                         &&

package/compiler/common/babel/plugins/services.ts

@@ -4,7 +4,8 @@
 
 // Npm
 import * as types from '@babel/types'
-import type { PluginObj } from '@babel/core';
+import type { NodePath, PluginObj } from '@babel/core';
+import generate from '@babel/generator';
 
 // Core
 import cli from '@cli';
@@ -24,12 +25,19 @@ type TOptions = {
  * Extended source type: now includes "models"
  * so we can differentiate how we rewrite references.
  */
-type TImportSource = 'container' | 'application' | 'models';
+type TImportSource = 'container' | 'services' | 'models' | 'request';
 
 module.exports = (options: TOptions) => (
     [Plugin, options]
 )
 
+type TImportedIndex = {
+    local: string,
+    imported: string,                // The original “imported” name
+    references: NodePath<types.Node>[],                   // reference paths
+    source: TImportSource            // container | application | models
+}
+
 /*----------------------------------
 - PLUGIN
 ----------------------------------*/
@@ -54,8 +62,6 @@ function Plugin(babel, { app, side, debug }: TOptions) {
           this.app.Models.client.MyModel.someCall();
   
         Processed files:
-          @/server/config
-          @/server/routes
           @/server/services
     */
 
@@ -68,42 +74,65 @@ function Plugin(babel, { app, side, debug }: TOptions) {
 
         // Count how many total imports we transform
         importedCount: number,
+        routeMethods: string[],
 
         // For every local identifier, store info about how it should be rewritten
-        importedReferences: {
-            [localName: string]: {
-                imported: string,                // The original “imported” name
-                bindings: any,                   // reference paths
-                source: TImportSource            // container | application | models
-            }
+        imported: {
+            [localName: string]: TImportedIndex
         }
-
-        // Tally how many references per kind
-        bySource: { [s in TImportSource]: number }
     }> = {
 
         pre(state) {
             this.filename = state.opts.filename as string;
-            this.processFile = (
-                this.filename.startsWith(cli.paths.appRoot + '/server/config')
-                ||
-                this.filename.startsWith(cli.paths.appRoot + '/server/routes')
-                ||
-                this.filename.startsWith(cli.paths.appRoot + '/server/services')
-            );
-
-            this.importedReferences = {};
-            this.bySource = {
-                container: 0,
-                application: 0,
-                models: 0
-            };
+            this.processFile = this.filename.startsWith(cli.paths.appRoot + '/server/services');
+
+            this.imported = {};
+            
             this.importedCount = 0;
             this.debug = debug || false;
+
+            this.routeMethods = [];
         },
 
         visitor: {
 
+            // Detect decored methods before other plugins remove decorators
+            Program(path) {
+
+                if (!this.processFile) return;
+
+                // Traverse the AST within the Program node
+                path.traverse({
+                    ClassMethod: (subPath) => {
+                        const { node } = subPath;
+                        if (!node.decorators || node.key.type !== 'Identifier') return;
+
+                        for (const decorator of node.decorators) {
+
+                            const isRoute = (
+                                // Handles the case of @Route without parameters
+                                (
+                                    t.isIdentifier(decorator.expression) && decorator.expression.name === 'Route'
+                                ) 
+                                || 
+                                // Handles the case of @Route() with parameters
+                                (
+                                    t.isCallExpression(decorator.expression) &&
+                                    t.isIdentifier(decorator.expression.callee) &&
+                                    decorator.expression.callee.name === 'Route'
+                                )
+                            );
+
+                            if (!isRoute) continue;
+
+                            const methodName = node.key.name;
+                            this.routeMethods.push( methodName );
+
+                        }
+                    }
+                });
+            },
+
             /**
              * Detect import statements from '@app' or '@models'
              */
@@ -111,7 +140,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                 if (!this.processFile) return;
 
                 const source = path.node.source.value;
-                if (source !== '@app' && source !== '@models') {
+                if (source !== '@app' && source !== '@models' && source !== '@request') {
                     return;
                 }
 
@@ -123,25 +152,32 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                     this.importedCount++;
 
                     let importSource: TImportSource;
-                    if (source === '@app') {
-                        // Distinguish whether it's a container service or an application service
-                        if (app.containerServices.includes(specifier.imported.name)) {
-                            importSource = 'container';
-                        } else {
-                            importSource = 'application';
-                        }
-                    } else {
-                        // source === '@models'
-                        importSource = 'models';
+                    switch (source) {
+                        case '@app':
+                            // Distinguish whether it's a container service or an application service
+                            if (app.containerServices.includes(specifier.imported.name)) {
+                                importSource = 'container';
+                            } else {
+                                importSource = 'services';
+                            }
+                            break;
+                        case '@request':
+                            importSource = 'request';
+                            break;
+                        case '@models':
+                            // source === '@models'
+                            importSource = 'models';
+                            break;
+                        default:
+                            throw new Error(`Unknown import source: ${source}`);
                     }
 
-                    this.importedReferences[specifier.local.name] = {
+                    this.imported[specifier.local.name] = {
+                        local: specifier.local.name,
                         imported: specifier.imported.name,
-                        bindings: path.scope.bindings[specifier.local.name].referencePaths,
+                        references: path.scope.bindings[specifier.local.name].referencePaths,
                         source: importSource
                     };
-
-                    this.bySource[importSource]++;
                 }
 
                 // Remove the original import line(s) and replace with any needed new import
@@ -151,7 +187,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
 
                 // If this line had container references, add a default import for container
                 // Example: import container from '<root>/server/app/container'
-                if (source === '@app' && this.bySource.container > 0) {
+                if (source === '@app') {
                     replaceWith.push(
                         t.importDeclaration(
                             [t.importDefaultSpecifier(t.identifier('container'))],
@@ -167,78 +203,124 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                 path.replaceWithMultiple(replaceWith);
             },
 
-            /**
-             * Rewrite references to the imports
-             */
-            Identifier(path) {
-                if (!this.processFile || this.importedCount === 0) {
-                    return;
-                }
+            // This visitor fires for every class method.
+            ClassMethod(path) {
 
-                const name = path.node.name;
-                const ref = this.importedReferences[name];
-                if (!ref || !ref.bindings) {
-                    return;
-                }
+                // Must be a server service
+                if (!this.processFile || path.replaced) return;
 
-                // Find a specific binding that hasn't been replaced yet
-                let foundBinding = undefined;
-                for (const binding of ref.bindings) {
-                    if (!binding.replaced && path.getPathLocation() === binding.getPathLocation()) {
-                        foundBinding = binding;
-                        break;
+                // Must have a method name
+                if (path.node.key.type !== 'Identifier') return;
+
+                // Init context
+                const methodName = path.node.key.name;
+                let params = path.node.params;
+
+                // Prefix references
+                path.traverse({ Identifier: (subPath) => {
+
+                    const { node } = subPath;
+                    const name = node.name;
+                    const ref = this.imported[name];
+                    if (!ref || !ref.references) {
+                        return;
                     }
-                }
-                if (!foundBinding) {
-                    return;
-                }
 
-                // Mark as replaced to avoid loops
-                foundBinding.replaced = true;
+                    // Find a specific binding that hasn't been replaced yet
+                    const foundBinding = ref.references.find(binding => {
+                        return subPath.getPathLocation() === binding.getPathLocation();
+                    });
 
-                // Based on the source, replace the identifier with the proper MemberExpression
-                if (ref.source === 'container') {
-                    // container.[identifier]
-                    // e.g. container.Environment
-                    path.replaceWith(
-                        t.memberExpression(
-                            t.identifier('container'),
-                            path.node
-                        )
-                    );
-                }
-                else if (ref.source === 'application') {
-                    // this.app.[identifier]
-                    // e.g. this.app.MyService
-                    path.replaceWith(
-                        t.memberExpression(
+                    if (!foundBinding || foundBinding.replaced)
+                        return;
+
+                    // Mark as replaced to avoid loops
+                    foundBinding.replaced = true;
+
+                    // Based on the source, replace the identifier with the proper MemberExpression
+                    if (ref.source === 'container') {
+                        // container.[identifier]
+                        // e.g. container.Environment
+                        subPath.replaceWith(
                             t.memberExpression(
-                                t.thisExpression(),
-                                t.identifier('app')
-                            ),
-                            path.node
-                        )
-                    );
-                }
-                else if (ref.source === 'models') {
-                    // this.app.Models.client.[identifier]
-                    // e.g. this.app.Models.client.MyModel
-                    path.replaceWith(
-                        t.memberExpression(
+                                t.identifier('container'),
+                                subPath.node
+                            )
+                        );
+                    }
+                    else if (ref.source === 'services') {
+                        // this.app.[identifier]
+                        // e.g. this.app.MyService
+                        subPath.replaceWith(
+                            t.memberExpression(
+                                t.memberExpression(
+                                    t.thisExpression(),
+                                    t.identifier('app')
+                                ),
+                                subPath.node
+                            )
+                        );
+                    }
+                    else if (ref.source === 'models') {
+                        // this.app.Models.client.[identifier]
+                        // e.g. this.app.Models.client.MyModel
+                        subPath.replaceWith(
                             t.memberExpression(
                                 t.memberExpression(
                                     t.memberExpression(
-                                        t.thisExpression(),
-                                        t.identifier('app')
+                                        t.memberExpression(
+                                            t.thisExpression(),
+                                            t.identifier('app')
+                                        ),
+                                        t.identifier('Models')
                                     ),
-                                    t.identifier('Models')
+                                    t.identifier('client')
                                 ),
-                                t.identifier('client')
-                            ),
-                            path.node
+                                subPath.node
+                            )
+                        );
+                    }
+                    else if (ref.source === 'request') {
+                        // this.app.Models.client.[identifier]
+                        // e.g. this.app.Models.client.MyModel
+                        subPath.replaceWith(
+                            t.memberExpression(
+                                t.identifier('context'),
+                                subPath.node
+                            )
+                        );
+                    }
+
+                } });
+
+                if (
+                    this.routeMethods.includes(methodName) 
+                    && 
+                    path.node.params.length < 2
+                ) {
+
+                    // Expose router context variable via the second parameter
+                    params = [
+                        path.node.params[0] || t.objectPattern([]),
+                        t.identifier('context'),
+                    ];
+
+                    // Apply changes
+                    path.replaceWith(
+                        t.classMethod(
+                            path.node.kind,
+                            path.node.key,
+                            params,
+                            path.node.body,
+                            false,
+                            false,
+                            false,
+                            path.node.async
                         )
                     );
                 }
+
+                //console.log("ROUTE METHOD", this.filename, methodName, generate(path.node).code);
             }
         }
     };

package/compiler/common/babel/routes/imports.ts

@@ -109,10 +109,10 @@ module.exports = (app: App, side: TAppSide, dev: boolean): ImportTransformer =>
             }
         }
         
-        console.log( generate(t.variableDeclaration("const", [t.variableDeclarator(
+        /*console.log( generate(t.variableDeclaration("const", [t.variableDeclarator(
             t.identifier(request.imported.name),
             t.objectExpression(pageLoaders)
-        )])).code );
+        )])).code );*/
 
         return [
             ...imports,

package/compiler/common/babel/routes/routes.ts

@@ -42,19 +42,21 @@ module.exports = (options: TOptions) => (
 const clientServices = ['Router'];
 // Others will be called via app.<Service> (backend) or api.post(<path>, <params>) (frontend)
 
+const routerMethods = ['get', 'post', 'put', 'delete', 'patch'];
+
 /*----------------------------------
 - PLUGIN
 ----------------------------------*/
 function Plugin(babel, { app, side, debug }: TOptions) {
 
-    debug = true;
+    //debug = true;
 
     const t = babel.types as typeof types;
 
     /*
         - Wrap route.get(...) with (app: Application) => { }
         - Inject chunk ID into client route options
-        - Transform aoi.fetch:
+        - Transform api.fetch:
         
         Input:
         const { stats } = api.fetch({
@@ -83,7 +85,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
             // Replace by:      nothing
             ImportDeclaration(path) {
                 
-                const shouldTransformImports = this.file.process && this.file.side === 'front';
+                const shouldTransformImports = this.file.process;
                 if (!shouldTransformImports)
                     return;
                 
@@ -154,7 +156,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                     && 
                     callee.property.type === 'Identifier' 
                     && 
-                    ['page', 'error', 'get', 'post', 'put', 'delete'].includes(callee.property.name)
+                    ['page', 'error', ...routerMethods].includes(callee.property.name)
                 ) {
 
                     // Should be at the root of the document
@@ -171,6 +173,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                     }
 
                     // Adjust
+                    // /client/pages/*
                     if (this.file.side === 'front') {
                         transformDataFetchers(path, this, routeDef);
                     }
@@ -181,12 +184,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                     // Delete the route def since it will be replaced by a wrapper
                     path.replaceWithMultiple([]);
 
-                /* [client] Backend Service calls: Transform to api.post( <method path>, <params> )
-
-                    Events.Create( form.data ).then(res => toast.success(res.message))
-                    =>
-                    api.post( '/api/events/create', form.data ).then(res => toast.success(res.message))
-                */
+      
                 } else if (this.file.side === 'front') {
                     
                     const isAService = (
@@ -197,14 +195,20 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                     if(!isAService)
                         return;
 
-                    if (side === 'client') {
+                    /* [client] Backend Service calls: Transform to api.post( <method path>, <params> )
+
+                        Events.Create( form.data ).then(res => toast.success(res.message))
+                        =>
+                        api.post( '/api/events/create', form.data ).then(res => toast.success(res.message))
+                    */
+                    if (side === 'client' && !clientServices.includes(serviceName)) {
 
                         // Get complete call path
                         const apiPath = '/api/' + completePath.join('/');
                         
                         // Replace by api.post( <method path>, <params> )
                         const apiPostArgs: types.CallExpression["arguments"] = [t.stringLiteral(apiPath)];
-                        if (path.node.arguments.length === 1)
+                        if (path.node.arguments.length >= 1)
                             apiPostArgs.push( path.node.arguments[0] );
 
                         path.replaceWith(
@@ -214,6 +218,13 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                                 ), apiPostArgs
                             )
                         )
+
+                    /* [server] Backend Service calls
+
+                        Events.Create( form.data ).then(res => toast.success(res.message))
+                        =>
+                        app.Events.Create( form.data, context ).then(res => toast.success(res.message))
+                    */
                     } else {
 
                         // Rebuild member expression from completePath, adding a api prefix
@@ -231,7 +242,8 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                         // Replace by app.<service>.<method>(...)
                         path.replaceWith(
                             t.callExpression(
-                                newCallee, [...path.node.arguments]
+                                newCallee, 
+                                [...path.node.arguments]
                             )
                         )
                     }
@@ -268,8 +280,8 @@ function Plugin(babel, { app, side, debug }: TOptions) {
             relativeFileName = filename.substring( cli.paths.appRoot.length );
         if (filename.startsWith( cli.paths.coreRoot ))
             relativeFileName = filename.substring( cli.paths.coreRoot.length );
-        if (filename.startsWith('/node_modules/5htp-core/'))
-            relativeFileName = filename.substring( '/node_modules/5htp-core/'.length );
+        /*if (filename.startsWith('/node_modules/5htp-core/'))
+            relativeFileName = filename.substring( '/node_modules/5htp-core/'.length );*/
         
         // The file isn't a route definition
         if (relativeFileName === undefined) {
@@ -320,7 +332,39 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                     }
                 */
                 routeDef.dataFetchers.push(
-                    ...path.node.arguments[0].properties
+                    ...path.node.arguments[0].properties.map(p => {
+
+                        // Server side: Pass request context as 2nd argument
+                        // companies: Companies.create( <params>, context )
+                        if (
+                            side === 'server'
+                            &&
+                            p.type === 'ObjectProperty'
+                            &&
+                            p.key.type === 'Identifier'
+                            &&
+                            p.value.type === 'CallExpression'
+                            && 
+                            // TODO: reliable way to know if it's a service
+                            !(
+                                p.value.callee.type === 'MemberExpression'
+                                &&
+                                p.value.callee.object.type === 'Identifier'
+                                &&
+                                p.value.callee.object.name === 'api'
+                            )
+                        ) {
+                            
+                            // Pass request context as 2nd argument
+                            p.value.arguments = p.value.arguments.length === 0
+                                ? [ t.objectExpression([]), t.identifier('context') ]
+                                : [ p.value.arguments[0], t.identifier('context') ];
+
+                        }
+
+                        return p;
+
+                    })
                 );
 
                 /*  Replace the: 
@@ -357,7 +401,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
 
         // Generate page chunk id
         const { filepath, chunkId } = cli.paths.getPageChunk(app, filename);
-        debug && console.log(`[routes]`, filename, '=>', chunkId);
+        debug && console.log(`[routes]`, filename.replace(cli.paths.appRoot + '/client/pages', ''));
 
         // Create new options to add in route.options
         const newProperties = [
@@ -374,9 +418,19 @@ function Plugin(babel, { app, side, debug }: TOptions) {
         // Add data fetchers
         if (routeDef.dataFetchers.length !== 0) {
 
+            const rendererContext = t.cloneNode( renderer.params[0] );
+            // If not already present, add context to the 1st argument (a object spread)
+            if (!rendererContext.properties.some( p => p.key.name === 'context' ))
+                rendererContext.properties.push(
+                    t.objectProperty(
+                        t.identifier('context'),
+                        t.identifier('context')
+                    )
+                )
+
             // (contollerParams) => { stats: api.get(...) }
             const dataFetchersFunc = t.arrowFunctionExpression(
-                renderer.params.map( param => t.cloneNode( param )),
+                [rendererContext],
                 t.objectExpression(
                     routeDef.dataFetchers.map( df => t.cloneNode( df ))
                 )
@@ -467,7 +521,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
         if (importedServicesList.length === 0)
             return;
 
-        let exportValue: types.Expression | types.BlockStatement;
+        const definitions: types.BlockStatement["body"] = [];
         if (file.side === 'front') {
 
             // Limit to one route def per file
@@ -496,48 +550,89 @@ function Plugin(babel, { app, side, debug }: TOptions) {
 
             // Force babel to create new fresh nodes
             // If we directy use statementParent, it will not be included in the final compiler code
-            exportValue = t.callExpression(
-                t.memberExpression(
-                    t.identifier( callee.object.name ),
-                    callee.property,
-                ),
-                [routePath, ...routeArgs]
+            definitions.push( 
+                t.returnStatement(
+                t.callExpression(
+                    t.memberExpression(
+                        t.identifier( callee.object.name ),
+                            callee.property,
+                        ),
+                        [routePath, ...routeArgs]
+                    )
+                )
             )
 
         } else {
 
-            exportValue = t.blockStatement([
+            definitions.push(
                 // Without spread = react jxx need additionnal loader
                 ...file.routeDefinitions.map( def => 
                     t.expressionStatement(def.definition)
                 ),
-            ])
+            )
         }
 
-        const exportDeclaration = t.exportNamedDeclaration( 
-            t.variableDeclaration('const', [
-                t.variableDeclarator(
-                    t.identifier('__register'),
-                    t.arrowFunctionExpression(
-                        [
-                            t.objectPattern(
-                                importedServicesList.map(([ local, imported ]) => 
-                                    t.objectProperty(
-                                        t.identifier( local ),
-                                        t.identifier( imported ),
+        /*
+            ({ Router, app: { Events } }}) => {
+                ...
+            }
+        */
+            const appSpread: types.ObjectProperty[] = []
+            const servicesSpread: types.ObjectProperty[] = [
+                t.objectProperty(
+                    t.identifier('app'),
+                    t.identifier('app'),
+                ),
+                t.objectProperty(
+                    t.identifier('context'),
+                    t.identifier('context'),
+                )
+            ]
+            for (const [local, imported] of importedServicesList) {
+                if (imported === 'app') 
+                    appSpread.push(
+                        t.objectProperty(
+                            t.identifier(local),
+                            t.identifier(local),
+                        )
+                    )
+                else
+                    servicesSpread.push(
+                        t.objectProperty(
+                            t.identifier(local),
+                            t.identifier(imported),
+                        )
+                    )   
+            }
+            
+            // export const __register = ({ Router, app }) => { ... }
+            const exportDeclaration = t.exportNamedDeclaration( 
+                t.variableDeclaration('const', [
+                    t.variableDeclarator(
+                        t.identifier('__register'),
+                        t.arrowFunctionExpression(
+                            [
+                                t.objectPattern(servicesSpread)
+                            ], 
+                            t.blockStatement([
+                                // const { Events } = app;
+                                t.variableDeclaration('const', [
+                                    t.variableDeclarator(
+                                        t.objectPattern(appSpread),
+                                        t.identifier('app')
                                     )
-                                )
-                            )
-                        ], 
-                        exportValue
+                                ]),
+                                // Router.post(....)
+                                ...definitions,
+                            ])
+                        )
                     )
-                )
-            ])
-        );
+                ])
+            );
                     
 
-        (file.side === 'front' && file.path.includes('/server/routes/events.ts')) 
-        && console.log( file.path, generate(exportDeclaration).code );
+        // (file.path.includes('clients/prospect/search') && side === 'client') 
+        // && console.log( file.path, generate(exportDeclaration).code );
 
         return exportDeclaration;
     }

package/compiler/common/files/images.ts

@@ -1,11 +1,10 @@
 import { staticAssetName } from '../../../paths';
 import type webpack from 'webpack';
-import type App from '../../../app';
 
 module.exports = (app: App, dev: boolean, client: boolean): webpack.RuleSetRule[] => {
 
     return [{
-        test: /\.(bmp|gif|jpg|jpeg|png|ico|svg|webp)$/,
+        test: /\.(bmp|gif|png|jpg|jpegico|svg|webp)$/,
         type: 'asset',
         parser: {
             dataUrlCondition: {
@@ -17,6 +16,19 @@ module.exports = (app: App, dev: boolean, client: boolean): webpack.RuleSetRule[
         }
 
     }, {
+        test: /\.(jpg|jpeg|png)$/i,
+        type: "javascript/auto",
+        use: [{
+            loader: "responsive-loader",
+            options: {
+                sizes: [320, 480, 640, 768, 1024, 1300],
+                placeholder: true,
+                placeholderSize: 20,
+                quality: 100,
+                publicPath: '/public'
+            }
+        }]
+      }, {
         test: /\.(webm|mp4|avi|mpk|mov|mkv)$/,
         type: 'asset/resource',
     },]

package/compiler/index.ts

@@ -17,6 +17,7 @@ import cli from '..';
 import createServerConfig from './server';
 import createClientConfig from './client';
 import { TCompileMode } from './common';
+import { routerServices } from './common/babel/plugins/services';
 
 type TCompilerCallback = (compiler: webpack.Compiler) => void
 
@@ -25,7 +26,16 @@ type TServiceMetas = {
     name: string, 
     parent: string, 
     dependences: string, 
-    importationPath: string
+    importationPath: string,
+    priority: number
+}
+
+type TRegisteredService = {
+    id?: string,
+    name: string,
+    className: string,
+    instanciation: (parentRef: string) => string,
+    priority: number,
 }
 
 /*----------------------------------
@@ -140,33 +150,40 @@ export default class Compiler {
         
 
         // Index services
-        const searchDirs = {
+        const searchDirs = [
             // The less priority is the first
-            // The last override the first if there are duplicates
-            '@server/services/': path.join(cli.paths.core.root, 'server', 'services'),
-            '@/server/services/': path.join(app.paths.root, 'server', 'services'),
+            {
+                path: '@server/services/',
+                priority: -1,
+                root: path.join(cli.paths.core.root, 'server', 'services')
+            },
+            {
+                path: '@/server/services/',
+                priority: 0,
+                root: path.join(app.paths.root, 'server', 'services')
+            },
             // Temp disabled because compile issue on vercel
             //'': path.join(app.paths.root, 'node_modules'),
-        }
+        ]
 
         // Generate app class file
         const servicesAvailable: {[id: string]: TServiceMetas} = {};
-        for (const importationPrefix in searchDirs) {
+        for (const searchDir of searchDirs) {
 
-            const searchDir = searchDirs[ importationPrefix ];
-            const services = this.findServices(searchDir);
+            const services = this.findServices(searchDir.root);
 
             for (const serviceDir of services) {
                 const metasFile = path.join( serviceDir, 'service.json');
 
                 // The +1 is to remove the slash
-                const importationPath = importationPrefix + serviceDir.substring( searchDir.length + 1 );
+                const importationPath = searchDir.path + serviceDir.substring( searchDir.root.length + 1 );
 
                 const serviceMetas = require(metasFile);
 
                 servicesAvailable[ serviceMetas.id ] = {
+                    importationPath,
+                    priority: searchDir.priority,
                     ...serviceMetas,
-                    importationPath
                 };
             }
         }
@@ -175,13 +192,13 @@ export default class Compiler {
         const imported: string[] = []
         const referencedNames: {[serviceId: string]: string} = {} // ID to Name
 
-        const refService = (serviceName: string, serviceConfig: any, level: number = 0) => {
+        const refService = (serviceName: string, serviceConfig: any, level: number = 0): TRegisteredService => {
 
             if (serviceConfig.refTo !== undefined) {
                 const refTo = serviceConfig.refTo;
                 return {
                     name: serviceName,
-                    code: `${serviceName}: this.${refTo},`,
+                    instanciation: (parentRef: string) => `this.${refTo}`,
                     priority: 0
                 }
             }
@@ -200,51 +217,51 @@ export default class Compiler {
             if (serviceConfig.name !== undefined)
                 referencedNames[serviceConfig.id] = serviceConfig.name;
 
-            // Subservices
-            let subservices = '';
-            if (serviceConfig.subservices) {
+            const processConfig = (config: any, level: number = 0) => {
 
-                const subservicesList = serviceConfig.subservices;
-                const subservicesCode = Object.entries(subservicesList).map(([name, service]) => 
-                    refService(name, service, level + 1) 
-                );
+                let propsStr = '';
+                for (const key in config) {
+                    const value = config[key];
+
+                    if (!value || typeof value !== 'object')
+                        propsStr += `"${key}":${serialize(value, { space: 4 })},\n`;
+
+                    // Reference to a service
+                    else if (value.type === 'service.setup' || value.type === 'service.ref') // TODO: more reliable way to detect a service reference
+                        propsStr += `${key}:`+ refService(key, value, level + 1).instanciation('instance') + ',\n'
+                    
+                    // Recursion
+                    else if (level <= 4 && !Array.isArray(value))
+                        propsStr += `"${key}":` + processConfig(value, level + 1) + ',\n';
+
+                    else
+                        propsStr += `"${key}":${serialize(value, { space: 4 })},\n`;
 
-                // Sort by priority
-                const sortedSubservices = subservicesCode.sort((a, b) => a.priority - b.priority);
+                }
 
-                // Generate code
-                subservices = sortedSubservices.map(s => s.code).join('\n');
+                return `{ ${propsStr} }`;
             }
+            const config = processConfig(serviceConfig.config || {});
 
             // Generate the service instance
-            const instanciation = `new ${serviceMetas.name}( 
-                this, 
-                ${serialize(serviceConfig.config || {}) || '{}'}, 
-                () => ({
-                    ${subservices}
-                }), 
-                this 
-            )`
-
-            if (level === 0)
-                return {
-                    name: serviceName,
-                    code: `public ${serviceName} = ${instanciation};`,
-                    priority: serviceConfig.config?.priority || 0
-                };
-            else
-                return {
-                    name: serviceName,
-                    code: `${serviceName}: ${instanciation},`,
-                    priority: serviceConfig.config?.priority || 0
-                };
+            const instanciation = (parentRef: string) => 
+                `new ${serviceMetas.name}( 
+                    ${parentRef}, 
+                    (instance: ${serviceMetas.name}) => (${config}),
+                    this 
+                )`
+
+            return {
+                id: serviceConfig.id,
+                name: serviceName,
+                instanciation,
+                className: serviceMetas.name,
+                priority: serviceConfig.config?.priority || serviceMetas.priority || 0,
+            };
         }
 
         const servicesCode = Object.values(app.registered).map( s => refService(s.name, s, 0));
         const sortedServices = servicesCode.sort((a, b) => a.priority - b.priority);
-        
-        const services = sortedServices.map(s => s.code).join('\n');
-        const servicesNames = sortedServices.map(s => s.name);
 
         // Define the app class identifier
         const appClassIdentifier = app.identity.identifier;
@@ -255,43 +272,67 @@ export default class Compiler {
             path.join( app.paths.client.generated, 'services.d.ts'),
 `declare module "@app" {
 
-    import { RouenEvents as RouenEventsClient } from "@/client";
-    import RouenEventsServer from "@/server/.generated/app";
+    import { ${appClassIdentifier} as ${appClassIdentifier}Client } from "@/client";
+    import ${appClassIdentifier}Server from "@/server/.generated/app";
     
     import { ApplicationProperties as ClientApplicationProperties } from "@client/app";
     import { ApplicationProperties as ServerApplicationProperties } from "@server/app";
 
-    type ClientServices = Omit<RouenEventsClient, ClientApplicationProperties>;
-    type ServerServices = Omit<RouenEventsServer, ServerApplicationProperties | keyof ClientServices>;
+    type ClientServices = Omit<${appClassIdentifier}Client, ClientApplicationProperties>;
+    type ServerServices = Omit<${appClassIdentifier}Server, ServerApplicationProperties | keyof ClientServices>;
   
     type CombinedServices = ClientServices & ServerServices;
   
     const appClass: CombinedServices;
     export = appClass;
 }
+    
+declare module '@models/types' {
+    export * from '@/var/prisma/index';
+}
 
+declare module '@request' {
+    
+}
 
-// Temporary
-/*declare module '@models' {
-    export * from '@/var/prisma/index';
-}*/
-  
-declare module '@models' {
-    import { Prisma, PrismaClient } from '@/var/prisma/index';
-  
-    type ModelNames = Prisma.ModelName;
-  
-    type ModelDelegates = {
-        [K in ModelNames]: PrismaClient[Uncapitalize<K>];
-    };
-  
-    const models: ModelDelegates;
-  
-    export = models;
+declare namespace preact.JSX {
+    interface HTMLAttributes {
+        src?: string;
+    }
 }
-  `
+`
         );
 
+        fs.outputFileSync(
+            path.join( app.paths.client.generated, 'context.ts'),
+`// TODO: move it into core (but how to make sure usecontext returns ${appClassIdentifier}'s context ?)
+import React from 'react';
+
+import type ${appClassIdentifier}Server from '@/server/.generated/app';
+import type { TRouterContext as TServerRouterRequestContext } from '@server/services/router/response';
+import type { TRouterContext as TClientRouterRequestContext } from '@client/services/router/response';
+import type ${appClassIdentifier}Client from '.';
+
+// TO Fix: TClientRouterRequestContext is unable to get the right type of ${appClassIdentifier}Client["router"]
+    //    (it gets ClientApplication instead of ${appClassIdentifier}Client)
+type ClientRequestContext = TClientRouterRequestContext<${appClassIdentifier}Client["Router"], ${appClassIdentifier}Client>;
+type ServerRequestContext = TServerRouterRequestContext<${appClassIdentifier}Server["Router"]>
+type UniversalServices = ClientRequestContext | ServerRequestContext
+
+// Non-universla services are flagged as potentially undefined
+export type ClientContext = (
+    UniversalServices 
+    & 
+    Partial<Omit<ClientRequestContext, keyof UniversalServices>>
+    &
+    {
+        Router: ${appClassIdentifier}Client["Router"],
+    }
+)
+
+export const ReactClientContext = React.createContext<ClientContext>({} as ClientContext);
+export default (): ClientContext => React.useContext<ClientContext>(ReactClientContext);`);
+
         fs.outputFileSync(
             path.join( app.paths.server.generated, 'app.ts'),
 `import { Application } from '@server/app/index';
@@ -300,15 +341,19 @@ ${imported.join('\n')}
 
 export default class ${appClassIdentifier} extends Application {
 
-    protected serviceNames = [
-        ${Object.values(servicesNames).map(name => `"${name}"`).join(',\n')}
-    ] as const;
-
-    protected servicesIdToName = {
-        ${Object.entries(referencedNames).map(([id, name]) => `"${id}": "${name}"`).join(',\n')}
+    ${sortedServices.map(service => 
+        `public ${service.name}!: ${service.className};`
+    ).join('\n')}
+
+    protected registered = {
+        ${sortedServices.map(service => 
+            `"${service.id}": {
+                name: "${service.name}",
+                priority: ${service.priority},
+                start: () => ${service.instanciation('this')}
+            }`
+        ).join(',\n')}
     } as const;
-
-    ${services}
 }
 
 
@@ -320,6 +365,29 @@ export default class ${appClassIdentifier} extends Application {
 
 declare type ${appClassIdentifier} = import("@/server/.generated/app").default;
 
+declare module '@cli/app' {
+
+    type App = {
+
+        env: TEnvConfig;
+
+        use: (referenceName: string) => TServiceRef;
+
+        setup: <TServiceName extends keyof ${appClassIdentifier}>(...args: [
+            // { user: app.setup('Core/User') }
+            servicePath: string,
+            serviceConfig?: {}
+        ] | [
+            // app.setup('User', 'Core/User')
+            serviceName: TServiceName, 
+            servicePath: string,
+            serviceConfig?: ${appClassIdentifier}[TServiceName]["config"]
+        ]) => TServiceSetup;
+    }
+    const app: App;
+    export = app;
+}
+
 declare module "@app" {
 
     import { ApplicationContainer } from '@server/app/container';
@@ -355,6 +423,12 @@ declare module '@server/app' {
 
     export = foo;
 }
+
+declare module '@request' {
+    import type { TRouterContext } from '@server/services/router/response';
+    const routerContext: TRouterContext<CrossPath["Router"]>;
+    export = routerContext;
+}
     
 declare module '@models' {
     import { Prisma, PrismaClient } from '@/var/prisma/index';
@@ -368,6 +442,10 @@ declare module '@models' {
     const models: ModelDelegates;
   
     export = models;
+}
+    
+declare module '@models/types' {
+    export * from '@/var/prisma/index';
 }`
         );
     }

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.5.9",
+	"version": "0.6.1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp.git",
 	"license": "MIT",
@@ -54,10 +54,7 @@
 		"dayjs": "^1.11.5",
 		"favicons": "^7.2.0",
 		"filesize": "^8.0.3",
-		"image-minimizer-webpack-plugin": "^2.2.0",
-		"imagemin": "^8.0.1",
 		"imagemin-svgo": "^10.0.0",
-		"imagemin-webp": "^6.0.0",
 		"json5": "^2.2.0",
 		"less-loader": "^10.0.1",
 		"less-vars-to-js": "^1.3.0",
@@ -91,6 +88,11 @@
 		"@types/node": "^16.9.1",
 		"@types/nodemailer": "^6.4.4",
 		"@types/prompts": "^2.0.14",
-		"@types/webpack-env": "^1.16.2"
+		"@types/webpack-env": "^1.16.2",
+		"image-minimizer-webpack-plugin": "^4.1.4",
+		"imagemin": "^9.0.1",
+		"imagemin-webp": "^6.0.0",
+		"responsive-loader": "^3.1.2",
+		"sharp": "^0.34.3"
 	}
 }

package/paths.ts

@@ -148,7 +148,7 @@ export default class Paths {
             rootDir: this.core.cli
         });
 
-        console.log('Applying Aliases ...', aliases.forModuleAlias());
+        //console.log('Applying Aliases ...', aliases.forModuleAlias());
         moduleAlias.addAliases( aliases.forModuleAlias() );
 
     }