5htp 0.3.1 → 0.3.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.3.1",
+	"version": "0.3.2",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp.git",
 	"license": "MIT",
@@ -18,7 +18,6 @@
 	"dependencies": {
 		"@babel/cli": "^7.15.4",
 		"@babel/plugin-proposal-class-properties": "^7.14.5",
-		"@babel/plugin-proposal-decorators": "^7.15.4",
 		"@babel/plugin-proposal-private-methods": "^7.14.5",
 		"@babel/plugin-proposal-private-property-in-object": "^7.15.4",
 		"@babel/plugin-transform-react-constant-elements": "^7.14.5",

package/src/compiler/common/babel/index.ts

@@ -6,12 +6,13 @@
 import path from 'path';
 import type webpack from 'webpack';
 import * as types from '@babel/types'
+import PresetReact from '@babel/preset-react';
 
 // Core
 import PluginIndexage from '../plugins/indexage';
 
 import cli from '@cli';
-import type { TAppSide, default as App } from '@cli/app';
+import type { TAppSide, App } from '@cli/app';
 
 /*----------------------------------
 - REGLES
@@ -85,7 +86,7 @@ module.exports = (app: App, side: TAppSide, dev: boolean): webpack.RuleSetRule[]
                 // NOTE: On résoud les plugins et presets directement ici
                 //      Autrement, babel-loader les cherchera dans projet/node_modules
 
-                [require("@babel/plugin-proposal-decorators"), { "legacy": true }],
+                //[require("@babel/plugin-proposal-decorators"), { "legacy": true }],
 
                 [require('@babel/plugin-proposal-class-properties'), { "loose": true }],
 
@@ -122,8 +123,6 @@ module.exports = (app: App, side: TAppSide, dev: boolean): webpack.RuleSetRule[]
                     }]
                 ]),
 
-                //require("./plugins/pages")({ side }),
-
                 require('./routes/routes')({ side, app, debug: false }),
 
                 ...(side === 'client' ? [] : [

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

@@ -20,6 +20,20 @@ type TOptions = {
     app: App,
     debug?: boolean
 }
+type TRouteDefinition = {
+    definition: types.CallExpression,
+    dataFetchers: types.ObjectProperty[],
+    contextName?: string
+}
+
+type TFileInfos = {
+    path: string,
+    process: boolean,
+    side: 'front'|'back',
+
+    importedServices: {[local: string]: string},
+    routeDefinitions: TRouteDefinition[],
+}
 
 module.exports = (options: TOptions) => (
     [Plugin, options]
@@ -35,69 +49,29 @@ function Plugin(babel, { app, side, debug }: TOptions) {
     /*
         - Wrap route.get(...) with (app: Application) => { }
         - Inject chunk ID into client route options
+        - Transform api.fetch calls
     */
 
     const plugin: PluginObj<{ 
-
         filename: string,
-        part: 'routes',
-        side: 'front' | 'back',
-        processFile: boolean,
-
-        // Identifier => Name
-        importedServices: {[local: string]: string},
-        routeDefinitions: types.Expression[]
+        file: TFileInfos
     }> = {
         pre(state) {
-
             this.filename = state.opts.filename as string;
-            this.processFile = true;
-
-            // Relative path
-            let relativeFileName: string | undefined;
-            if (this.filename.startsWith( cli.paths.appRoot ))
-                relativeFileName = this.filename.substring( cli.paths.appRoot.length );
-            if (this.filename.startsWith( cli.paths.coreRoot ))
-                relativeFileName = this.filename.substring( cli.paths.coreRoot.length );
-            if (this.filename.startsWith('/node_modules/5htp-core/'))
-                relativeFileName = this.filename.substring( '/node_modules/5htp-core/'.length );
-            
-            // The file isn't a route definition
-            if (relativeFileName === undefined) {
-                this.processFile = false;
-                return false;
-            }
-            
-            // Differenciate back / front
-            if (relativeFileName.startsWith('/src/client/pages')) {
-
-                this.side = 'front';
-                this.part = 'routes';
-
-            } else if (relativeFileName.startsWith('/src/server/routes')) {
 
-                this.side = 'back';
-                this.part = 'routes';
-
-             } else 
-                this.processFile = false;
-
-            // Init output
-            this.importedServices = {}
-            this.routeDefinitions = []
+            this.file = getFileInfos(this.filename);
         },
         visitor: {
-
             // Find @app imports
             // Test:            import { Router } from '@app';
             // Replace by:      nothing
             ImportDeclaration(path) {
-
-                if (!this.processFile)
+                
+                if (!this.file.process)
                     return;
                 
                 if (path.node.source.value !== '@app')
-                    return;
+                    return;  
 
                 for (const specifier of path.node.specifiers) {
                     
@@ -107,11 +81,11 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                     if (specifier.imported.type !== 'Identifier')
                         continue;
 
-                    this.importedServices[ specifier.local.name ] = specifier.imported.name;
+                    this.file.importedServices[ specifier.local.name ] = specifier.imported.name;
                 }
 
                 // Remove this import
-                path.replaceWithMultiple([]);
+                path.remove();
 
             },
 
@@ -120,18 +94,10 @@ function Plugin(babel, { app, side, debug }: TOptions) {
             // Replace by:      nothing
             CallExpression(path) {
 
-                if (!this.processFile)
-                    return;
-
-                // Should be at the root of the document
-                if (!(
-                    path.parent.type === 'ExpressionStatement'
-                    &&
-                    path.parentPath.parent.type === 'Program'
-                ))
+                if (!this.file.process)
                     return;
 
-                // service.method()
+                // object.property()
                 const callee = path.node.callee
                 if (!(
                     callee.type === 'MemberExpression'
@@ -140,117 +106,143 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                     &&
                     callee.property.type === 'Identifier'
                     &&
-                    (callee.object.name in this.importedServices)
-                )) 
+                    // Should be at the root of the document
+                    path.parent.type === 'ExpressionStatement'
+                    &&
+                    path.parentPath.parent.type === 'Program'
+                    // And make reference to a service
+                    &&
+                    (callee.object.name in this.file.importedServices)
+                ))
                     return;
 
-                // Client route definition: Add chunk id
-                let [routePath, ...routeArgs] = path.node.arguments;
-                if (this.side === 'front' && callee.object.name === 'Router') {
-
-                    // Inject chunk id in options (2nd arg)
-                    const newRouteArgs = injectChunkId(routeArgs, this.filename);
-                    if (newRouteArgs === 'ALREADY_PROCESSED')
-                        return;
-
-                    routeArgs = newRouteArgs;
+                const routeDef: TRouteDefinition = {
+                    definition: path.node,
+                    dataFetchers: []
                 }
 
-                // Force babel to create new fresh nodes
-                // If we directy use statementParent, it will not be included in the final compiler code
-                const statementParent =
-                    t.callExpression(
-                        t.memberExpression(
-                            t.identifier( callee.object.name ),
-                            callee.property,
-                        ),
-                        [routePath, ...routeArgs]
-                    )
+                // Adjust
+                if (this.file.side === 'front') {
+                    transformDataFetchers(path, this, routeDef);
+                }
                     
-                this.routeDefinitions.push( statementParent );
+                // Add to the list of route definitons to wrap
+                this.file.routeDefinitions.push(routeDef);
 
-                // Delete this node
+                // Delete the route def since it will be replaced by a wrapper
                 path.replaceWithMultiple([]);
+               
             },
+            Program: {
+                exit(path, parent) {
 
-            // Wrap declarations into a exported const app function
-            /*  
-                export const __register = ({ Router }} => {
+                    if (!this.file.process)
+                        return;
+                        
+                    const wrappedrouteDefs = wrapRouteDefs( this.file );
+                    if (wrappedrouteDefs)
+                        path.pushContainer('body', [wrappedrouteDefs])
+                    
+                }
+            }
+        }
+    }
 
-                    Router.page(..)
+    function getFileInfos( filename: string ): TFileInfos {
 
-                }
-            */
-            Program: {
-                exit: function(path, parent) {
+        const file: TFileInfos = {
+            process: true,
+            side: 'back',
+            path: filename,
+            importedServices: {},
+            routeDefinitions: []
+        }
 
-                    if (!this.processFile)
-                        return;
+        // Relative path
+        let relativeFileName: string | undefined;
+        if (filename.startsWith( cli.paths.appRoot ))
+            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 );
+        
+        // The file isn't a route definition
+        if (relativeFileName === undefined) {
+            file.process = false;
+            return file;
+        }
+        
+        // Differenciate back / front
+        if (relativeFileName.startsWith('/src/client/pages')) {
+            file.side = 'front';
+        } else if (relativeFileName.startsWith('/src/server/routes')) {
+            file.side = 'back';
+        } else 
+            file.process = false;
+
+        return file
+    }
 
-                    const importedServices = Object.entries(this.importedServices);
-                    if (importedServices.length === 0)
-                        return;
+    function transformDataFetchers( 
+        path: NodePath<types.CallExpression>, 
+        routerDefContext: PluginObj, 
+        routeDef: TRouteDefinition 
+    ) {
+        path.traverse({
+            CallExpression(path) {
 
-                    let exportValue: types.Expression | types.BlockStatement;
-                    if (this.side === 'front') {
-
-                        const routesDefCount = this.routeDefinitions.length;
-                        if (routesDefCount !== 1)
-                            throw new Error(`Frontend route definition files (/client/pages/**/**.ts) can contain only one route definition. 
-                                ${routesDefCount} were given in ${this.filename}.`);
-
-                        exportValue = this.routeDefinitions[0];
-
-                    } else {
-
-                        exportValue = t.blockStatement([
-                            // Without spread = react jxx need additionnal loader
-                            ...this.routeDefinitions.map( def => 
-                                t.expressionStatement(def)
-                            ),
-                        ])
-                    }
-
-                    const exportDeclaration = t.exportNamedDeclaration( 
-                        t.variableDeclaration('const', [
-                            t.variableDeclarator(
-                                t.identifier('__register'),
-                                t.arrowFunctionExpression(
-                                    [
-                                        t.objectPattern(
-                                            importedServices.map(([ local, imported ]) => 
-                                                t.objectProperty(
-                                                    t.identifier( local ),
-                                                    t.identifier( imported ),
-                                                )
-                                            )
-                                        )
-                                    ], 
-                                    exportValue
-                                )
-                            )
-                        ])
-                    )
+                const callee = path.node.callee
 
-                    // Sans
-                    //  console.log('import app via', this.filename, this.importedServices);
-                    //debug && console.log( generate(exportDeclaration).code )
-                    path.pushContainer('body', [exportDeclaration])
-                }
+                // api.load => move data fetchers to route.options.data
+                // So the router is able to load data before rendering the component
+                if (!(
+                    callee.type === 'MemberExpression'
+                    &&
+                    callee.object.type === 'Identifier'
+                    &&
+                    callee.property.type === 'Identifier'
+                    &&
+                    callee.object.name === 'api' 
+                    && 
+                    callee.property.name === 'fetch'
+                ))
+                    return;
+
+                routeDef.dataFetchers.push(
+                    ...path.node.arguments[0].properties
+                );
+
+                // Delete routerDefContext node
+                path.replaceWith(
+                    t.memberExpression(
+                        t.identifier( routeDef.contextName || 'context' ),
+                        t.identifier('data'),
+                    )
+                );
             }
-        }
+        }, routerDefContext);
     }
 
-    function injectChunkId( 
+    function injectOptions( 
+        routeDef: TRouteDefinition,
         routeArgs: types.CallExpression["arguments"],
         filename: string
     ): types.CallExpression["arguments"] | 'ALREADY_PROCESSED' {
 
-        let [routeOptions, ...otherArgs] = routeArgs;
+        // Extract client route definition arguments
+        let routeOptions: types.ObjectExpression | undefined;
+        let renderer: types.ArrowFunctionExpression;
+        if (routeArgs.length === 1)
+            ([ renderer ] = routeArgs);
+        else
+            ([ routeOptions, renderer ] = routeArgs);
 
+        // Generate page chunk id
         const { filepath, chunkId } = cli.paths.getPageChunk(app, filename);
         debug && console.log(`[routes]`, filename, '=>', chunkId);
 
+        // Create new options to add in route.options
         const newProperties = [
             t.objectProperty(
                 t.identifier('id'),
@@ -259,17 +251,39 @@ function Plugin(babel, { app, side, debug }: TOptions) {
             t.objectProperty(
                 t.identifier('filepath'),
                 t.stringLiteral(filepath)
-            )
+            ),
         ]
 
-        // No options object
-        if (routeOptions.type !== 'ObjectExpression') {
+        // Add data fetchers
+        if (routeDef.dataFetchers.length !== 0) {
+
+            // (contollerParams) => fetchers
+            const dataFetchersFunc = t.arrowFunctionExpression(
+                renderer.params.map( param => t.cloneNode( param )),
+                t.objectExpression(
+                    routeDef.dataFetchers.map( df => t.cloneNode( df ))
+                )
+            )
+
+            // Add the data fetchers to options.data
+            newProperties.push(
+                t.objectProperty(
+                    t.identifier('data'),
+                    dataFetchersFunc
+                )
+            );
+
+            // Expose the context variable in the renderer
+            exposeContextProperty( renderer, routeDef );
+        }
+
+        if (routeOptions?.properties === undefined)
             return [
                 t.objectExpression(newProperties),
-                ...routeArgs
+                renderer
             ]
-        }
 
+        // Test if the route options were not already processed
         const wasAlreadyProcessed = routeOptions.properties.some( o =>
             o.type === 'ObjectProperty'
             &&
@@ -284,14 +298,128 @@ function Plugin(babel, { app, side, debug }: TOptions) {
             return 'ALREADY_PROCESSED';
         }
 
+        // Create the new options object
         return [
             t.objectExpression([
                 ...routeOptions.properties,
                 ...newProperties
             ]),
-            ...otherArgs
+            renderer
         ]
     }
 
+    function exposeContextProperty( 
+        renderer: types.ArrowFunctionExpression, 
+        routeDef: TRouteDefinition 
+    ) {
+        const contextParam = renderer.params[0];
+        if (contextParam?.type === 'ObjectPattern') {
+            
+            for (const property of contextParam.properties) {
+                if (
+                    property.type === 'ObjectProperty' 
+                    && 
+                    property.key.type === 'Identifier' 
+                    && 
+                    property.key.name === 'context'
+                    &&
+                    property.value.type === 'Identifier'
+                ) {
+
+                    routeDef.contextName = property.value.name;
+                    break;
+                }
+            }
+
+            if (!routeDef.contextName) {
+                routeDef.contextName = 'context';
+                contextParam.properties.push(
+                    t.objectProperty( t.identifier('context'), t.identifier( routeDef.contextName ) )
+                );
+            }
+
+        } else if (contextParam?.type === 'Identifier') {
+            console.log("routeDef.contextName", routeDef.contextName);
+            routeDef.contextName = contextParam.name;
+        }
+    }
+
+    function wrapRouteDefs( file: TFileInfos ) {
+
+        const importedServicesList = Object.entries(file.importedServices);
+        if (importedServicesList.length === 0)
+            return;
+
+        let exportValue: types.Expression | types.BlockStatement;
+        if (file.side === 'front') {
+
+            // Limit to one route def per file
+            const routesDefCount = file.routeDefinitions.length;
+            if (routesDefCount !== 1)
+                throw new Error(`Frontend route definition files (/client/pages/**/**.ts) can contain only one route definition. 
+                    ${routesDefCount} were given in ${file.path}.`);
+
+            const routeDef = file.routeDefinitions[0];
+
+            // Client route definition: Add chunk id
+            let [routePath, ...routeArgs] = routeDef.definition.arguments;
+            const callee = routeDef.definition.callee;
+
+            if (callee.object.name === 'Router') {
+
+                // Inject chunk id in options (2nd arg)
+                const newRouteArgs = injectOptions(routeDef, routeArgs, file.path);
+                if (newRouteArgs === 'ALREADY_PROCESSED')
+                    return;
+
+                routeArgs = newRouteArgs;
+            }
+
+            // 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]
+            )
+
+        } else {
+
+            exportValue = t.blockStatement([
+                // 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 ),
+                                    )
+                                )
+                            )
+                        ], 
+                        exportValue
+                    )
+                )
+            ])
+        )
+
+        //file.side === 'front' && console.log( generate(exportDeclaration).code );
+
+        return exportDeclaration;
+    }
+
     return plugin;
 }

package/src/compiler/index.ts

@@ -154,9 +154,9 @@ dependences: ${JSON.stringify(dependences)},
             path.join( app.paths.client.generated, 'services.d.ts'),
 `declare module "@app" {
 
-    import { CrossPathClient } from '@/client/index';
+    import ${appClassIdentifier} from '@/client/index';
 
-    const appClass: CrossPathClient;
+    const appClass: ${appClassIdentifier};
 
     export = appClass
 }`
@@ -200,8 +200,12 @@ declare module '@server/app' {
     import { Application } from "@server/app/index";
     import { ServicesContainer } from "@server/app/service/container";
 
+    abstract class ApplicationWithServices extends Application<
+        ServicesContainer<InstalledServices>
+    > {}
+
     export interface Exported {
-        Application: typeof Application,
+        Application: typeof ApplicationWithServices,
         Services: ServicesContainer<InstalledServices>,
     }