5htp 0.0.9 → 0.2.0

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

@@ -0,0 +1,279 @@
+/*----------------------------------
+- DEPENDANCES
+----------------------------------*/
+
+// Npm
+import * as types from '@babel/types'
+import type { PluginObj, NodePath } from '@babel/core';
+import generate from '@babel/generator';
+
+// Core
+import cli from '@cli';
+import App, { TAppSide } from '../../../../app';
+
+/*----------------------------------
+- WEBPACK RULE
+----------------------------------*/
+
+type TOptions = {
+    side: TAppSide,
+    app: App
+}
+
+module.exports = (options: TOptions) => (
+    [Plugin, options]
+)
+
+const debug = true;
+
+/*----------------------------------
+- PLUGIN
+----------------------------------*/
+function Plugin(babel, { app, side }: TOptions) {
+
+    const t = babel.types as typeof types;
+
+    /*
+        - Wrap route.get(...) with (app: Application) => { }
+        - Inject chunk ID into client route options
+    */
+
+    const plugin: PluginObj<{ 
+
+        filename: string,
+        fileType: 'front' | 'back',
+        processFile: boolean,
+
+        // Identifier => Name
+        importedServices: {[local: string]: string},
+        routeDefinitions: types.Expression[]
+    }> = {
+        pre(state) {
+
+            this.filename = state.opts.filename as string;
+            this.processFile = true;
+            
+            if (
+                this.filename.startsWith( cli.paths.appRoot + '/src/client/pages' )
+                ||
+                this.filename.startsWith( cli.paths.coreRoot + '/src/client/pages' )
+            ) {
+
+                this.fileType = 'front';
+
+            } else if (this.filename.startsWith( cli.paths.appRoot + '/src/server/routes' )) {
+
+                this.fileType = 'back';
+            
+            } else
+                this.processFile = false;
+
+            this.importedServices = {}
+            this.routeDefinitions = []
+
+        },
+        visitor: {
+
+            // Find @app imports
+            // Test:            import { router } from '@app';
+            // Replace by:      nothing
+            ImportDeclaration(path) {
+
+                if (!this.processFile)
+                    return;
+                
+                if (path.node.source.value !== '@app')
+                    return;
+
+                for (const specifier of path.node.specifiers) {
+                    
+                    if (specifier.type !== 'ImportSpecifier')
+                        continue;
+
+                    if (specifier.imported.type !== 'Identifier')
+                        continue;
+
+                    this.importedServices[ specifier.local.name ] = specifier.imported.name;
+                }
+
+                // Remove this import
+                path.replaceWithMultiple([]);
+            },
+
+            // Find router definitions
+            // Test:            router.xxx()
+            // 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'
+                ))
+                    return;
+
+                // service.method()
+                const callee = path.node.callee
+                if (!(
+                    callee.type === 'MemberExpression'
+                    &&
+                    callee.object.type === 'Identifier'
+                    &&
+                    callee.property.type === 'Identifier'
+                    &&
+                    (callee.object.name in this.importedServices)
+                )) 
+                    return;
+
+                // Client route definition: Add chunk id
+                let [routePath, ...routeArgs] = path.node.arguments;
+                if (this.fileType === '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;
+                }
+
+                // 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]
+                    )
+                    
+                this.routeDefinitions.push( statementParent );
+
+                // Delete this node
+                path.replaceWithMultiple([]);
+            },
+
+            // Wrap declarations into a exported const app function
+            /*  
+                export const __register = ({ router }} => {
+
+                    router.page(..)
+
+                }
+            */
+            Program: {
+                exit: function(path, parent) {
+
+                    const importedServices = Object.entries(this.importedServices);
+                    if (importedServices.length === 0)
+                        return;
+
+                    let exportValue: types.Expression | types.BlockStatement;
+                    if (this.fileType === '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
+                                )
+                            )
+                        ])
+                    )
+
+                    // Sans
+                    //  console.log('import app via', this.filename, this.importedServices);
+                    //debug && console.log( generate(exportDeclaration).code )
+                    path.pushContainer('body', [exportDeclaration])
+                }
+            }
+        }
+    }
+
+    function injectChunkId( 
+        routeArgs: types.CallExpression["arguments"],
+        filename: string
+    ): types.CallExpression["arguments"] | 'ALREADY_PROCESSED' {
+
+        let [routeOptions, ...otherArgs] = routeArgs;
+
+        const { filepath, chunkId } = cli.paths.getPageChunk(app, filename);
+        debug && console.log(`[routes]`, filename, '=>', chunkId);
+
+        const newProperties = [
+            t.objectProperty(
+                t.identifier('id'),
+                t.stringLiteral(chunkId)
+            ),
+            t.objectProperty(
+                t.identifier('filepath'),
+                t.stringLiteral(filepath)
+            )
+        ]
+
+        // No options object
+        if (routeOptions.type !== 'ObjectExpression') {
+            return [
+                t.objectExpression(newProperties),
+                ...routeArgs
+            ]
+        }
+
+        const wasAlreadyProcessed = routeOptions.properties.some( o =>
+            o.type === 'ObjectProperty'
+            &&
+            o.key.type === 'Identifier'
+            &&
+            o.key.name === 'id'
+        )
+
+        if (wasAlreadyProcessed) {
+            // Cancel processing
+            debug && console.log(`[routes]`, filename, 'Already Processed');
+            return 'ALREADY_PROCESSED';
+        }
+
+        return [
+            t.objectExpression([
+                ...routeOptions.properties,
+                ...newProperties
+            ]),
+            ...otherArgs
+        ]
+    }
+
+    return plugin;
+}

package/src/compiler/common/babel/{plugins/pages.ts → routes/routes_old.ts}

@@ -80,57 +80,22 @@ function Plugin(babel, { side }: TOptions) {
                 const replacement = t.callExpression( path.node.callee, [ routePath, ...routeArgs ]);
                 debug && console.log( generate(replacement).code );
 
+                path.replaceWith( replacement );
+
                 // Force export default
-                if (path.parent.type === 'ExportDefaultDeclaration')
+                // NOTE: now done by app-import.ts
+                /*if (path.parent.type === 'ExportDefaultDeclaration')
                     path.replaceWith( replacement );
                 else
                     path.parentPath.replaceWith(
                         t.exportDefaultDeclaration( replacement )
-                    )
+                    )*/
                 
             }
            
         }
     };
 
-    function addChunkId( 
-        routeArgs: types.CallExpression["arguments"],
-        filename: string
-    ): void | 'ALREADY_PROCESSED' {
-
-        if (routeArgs[0].type === 'ObjectExpression') {
-
-            if (routeArgs[0].properties.some(o =>
-                o.type === 'ObjectProperty'
-                &&
-                o.key.type === 'Identifier'
-                &&
-                o.key.name === 'id'
-            )) {
-                debug && console.log(`[routes]`, filename, 'Already Processed');
-                return 'ALREADY_PROCESSED';
-            }
-
-        } else
-            routeArgs.unshift(t.objectExpression([]));
-
-        const { filepath, chunkId } = cli.paths.getPageChunk(app, filename);
-        debug && console.log(`[routes]`, filename, '=>', chunkId);
-
-        // Add object property
-        (routeArgs[0] as types.ObjectExpression).properties.push(
-            t.objectProperty(
-                t.identifier('id'),
-                t.stringLiteral(chunkId)
-            ),
-            t.objectProperty(
-                t.identifier('filepath'),
-                t.stringLiteral(filepath)
-            )
-        );
-
-    }
-
     function addRendererContext( 
         routeArgs: types.CallExpression["arguments"],
         filename: string
@@ -175,7 +140,7 @@ function Plugin(babel, { side }: TOptions) {
                 'body',
                 t.importDeclaration(
                     [t.importDefaultSpecifier(t.identifier('useContext'))],
-                    t.stringLiteral('@client/context')
+                    t.stringLiteral('@/client/context')
                 )
             );
         }

package/src/compiler/common/utils/fixNpmLink.ts

@@ -20,7 +20,7 @@ export const fixNpmLinkIssues = ( app: App ) => {
 
     const corePath = path.join(app.paths.root, '/node_modules/5htp-core');
     if (!fs.lstatSync( corePath ).isSymbolicLink())
-        return;
+        return console.info("Not fixing npm issue because 5htp-core wasn't installed with npm link.");
 
     console.info(`Fix NPM link issues ...`);
 
@@ -42,5 +42,5 @@ export const fixNpmLinkIssues = ( app: App ) => {
     if (!fs.existsSync( preactAppModule ))
         fs.symlinkSync( preactCoreModule, preactAppModule );
     if (!fs.existsSync( reactAppModule ))
-        fs.symlinkSync( preactCoreModule, reactAppModule );
+        fs.symlinkSync( path.join(preactCoreModule, 'compat'), reactAppModule );
 }

package/src/compiler/index.ts

@@ -101,6 +101,12 @@ export default async function createCompilers(
             const time = timeEnd.getTime() - timeStart.getTime();
             if (stats.hasErrors()) {
                 console.error(`############## Failed to compile '${name}' after ${time} ms`);
+
+                // Exit process with code 0, so the CI container can understand building failed
+                // Only in prod, because in dev, we want the compiler watcher continue running
+                if (mode === 'prod')
+                    process.exit(0);
+
             } else {
                 console.info(`############## [${name}] Finished compilation after ${time} ms`);
             }

package/src/compiler/server/index.ts

@@ -43,11 +43,16 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
     const dev = mode === 'dev';
 
     const commonConfig = createCommonConfig(app, 'server', mode);
-    const { aliases } = app.aliases.server.forWebpack(app.paths.root + '/node_modules');
+    const { aliases } = app.aliases.server.forWebpack({
+        modulesPath: app.paths.root + '/node_modules'
+    });
+
+    // We're not supposed in any case to import client services from server
+    delete aliases["@client/services"]; 
+    delete aliases["@/client/services"];
 
     console.log(`[${mode}] node_modules dirs:`, commonConfig.resolveLoader?.modules,
-        '\nModule aliases:', aliases);
-        
+        '\nModule aliases for webpack:', aliases);
     const config: webpack.Configuration = {
 
         ...commonConfig,
@@ -56,7 +61,7 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
         target: 'node',
         entry: {
             server: [
-                app.paths.root + '/src/server/index.ts',
+                cli.paths.coreRoot + '/src/server/index.ts'
             ],
         },
 
@@ -115,10 +120,7 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
 
             ...commonConfig.resolve,
 
-            alias: {
-                ...aliases,
-                "@root": app.paths.root,
-            },
+            alias: aliases,
 
             extensions: ['.ts', '.tsx', ".json", ".sql"],
         },

package/src/index.ts

@@ -19,6 +19,10 @@ type TCliCommand = () => Promise<{
     run: () => Promise<void> 
 }>
 
+type TArgsObject = {
+    [key: string]: string | boolean | string[]
+}
+
 /*----------------------------------
 - CLASSE
 ----------------------------------*/
@@ -28,7 +32,7 @@ type TCliCommand = () => Promise<{
 export class CLI {
 
     // Context
-    public args: TObjetDonnees = {};
+    public args: TArgsObject = {};
 
     public constructor(
         public paths = new Paths( process.cwd() )
@@ -98,7 +102,7 @@ export class CLI {
         this.runCommand(commandName, options);
     }
 
-    public async runCommand(command: string, args: TObjetDonnees) {
+    public async runCommand(command: string, args: TArgsObject) {
 
         this.args = args;
 

package/src/paths.ts

@@ -6,6 +6,7 @@
 import path from 'path';
 import TsAlias from 'ts-alias';
 import moduleAlias from 'module-alias';
+import { filenameToImportName } from 'babel-plugin-glob-import';
 
 // Core
 
@@ -16,6 +17,13 @@ import moduleAlias from 'module-alias';
 import type App from './app';
 import type { TAppSide } from './app';
 
+export type TPathInfosOptions = {
+    basePath?: string,
+    shortenExtensions: string[],
+    // Indexed will be trimed only when the extension can be shorten
+    trimIndex: boolean,
+}
+
 export type TPathInfos = {
 
     original: string,
@@ -28,8 +36,17 @@ export type TPathInfos = {
     isIndex: boolean
 }
 
+/*----------------------------------
+- CONFIG
+----------------------------------*/
+
 export const staticAssetName = /*isDebug ? '[name].[ext].[hash:8]' :*/ '[hash:8][ext]';
 
+const pathInfosDefaultOpts = {
+    shortenExtensions: ['ts', 'js', 'tsx', 'jsx'],
+    trimIndex: true,
+}
+
 /*----------------------------------
 - LIB
 ----------------------------------*/
@@ -57,18 +74,20 @@ export default class Paths {
     - EXTRACTION
     ----------------------------------*/
 
-    public infos(filename: string, basePath?: string, side: TAppSide = 'server'): TPathInfos {
+    public infos(filename: string, givenOpts: Partial<TPathInfosOptions> = {}): TPathInfos {
+
+        const opts: TPathInfosOptions = { ...pathInfosDefaultOpts, ...givenOpts }
 
         // Extraction élements du chemin
         const decomp = filename.split('/')
         let [nomFichier, extension] = (decomp.pop() as string).split('.');
-        const raccourcir = ['ts', 'js', 'tsx', 'jsx'].includes(extension);
+        const shortenExtension = opts.shortenExtensions && opts.shortenExtensions.includes(extension);
 
         // Vire l'index
         const isIndex = nomFichier === 'index'
         let cheminAbsolu: string;
         let nomReel: string;
-        if (isIndex && raccourcir) {
+        if (isIndex && shortenExtension && opts.trimIndex) {
             cheminAbsolu = decomp.join('/');
             nomReel = decomp.pop() as string;
         } else {
@@ -77,12 +96,12 @@ export default class Paths {
         }
 
         // Conserve l'extension si nécessaire
-        if (!raccourcir)
+        if (!shortenExtension)
             cheminAbsolu += '.' + extension;
 
-        const relative = basePath === undefined 
+        const relative = opts.basePath === undefined 
             ? ''
-            : cheminAbsolu.substring( basePath.length + 1 )
+            : cheminAbsolu.substring( opts.basePath.length + 1 )
 
         // Retour
         const retour = {
@@ -104,16 +123,17 @@ export default class Paths {
 
     public getPageChunk( app: App, file: string ) {
 
-        const infos = this.infos( file, file.startsWith( app.paths.pages ) 
-            ? app.paths.pages 
-            : this.core.pages,
-        );
+        const infos = this.infos( file, {
+            basePath: file.startsWith( app.paths.pages ) ? app.paths.pages : this.core.pages,
+            // Avoid potential conflicts between /landing.tsx and /landing/index.tsx
+            trimIndex: false,
+        });
 
         const filepath = infos.relative;
 
         // Before:  /home/.../src/client/pages/landing/index.tsx
         // After:   landing_index
-        let chunkId = filepath.replace(/\//g, '_');
+        let chunkId = filenameToImportName(filepath);
 
         // nsure it's non-empty
         if (chunkId.length === 0) // = /index.tsx