5htp 0.0.9 → 0.2.1-1

package/package.json

@@ -1,9 +1,9 @@
 {
 	"name": "5htp",
-	"description": "5-HTP, scientifically called 5-Hydroxytryptophan, is the precursor of happiness neurotransmitter.",
-	"version": "0.0.9",
+	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
+	"version": "0.2.1-1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
-	"repository": "git://github.com/gaetanlegac/5htp-cli.git",
+	"repository": "git://github.com/gaetanlegac/5htp.git",
 	"license": "MIT",
 	"bin": {
 		"5htp": "src/index.ts"
@@ -23,7 +23,6 @@
 		"@babel/plugin-proposal-private-property-in-object": "^7.15.4",
 		"@babel/plugin-transform-react-constant-elements": "^7.14.5",
 		"@babel/plugin-transform-react-jsx-self": "^7.14.9",
-		"@babel/plugin-transform-react-jsx-source": "^7.14.5",
 		"@babel/preset-env": "^7.15.6",
 		"@babel/preset-react": "^7.14.5",
 		"@babel/preset-typescript": "^7.15.0",
@@ -43,6 +42,7 @@
 		"@types/webpack-env": "^1.16.2",
 		"@types/ws": "^7.4.7",
 		"babel-loader": "^8.2.2",
+		"babel-plugin-glob-import": "^0.0.6-2",
 		"babel-plugin-transform-imports": "^2.0.0",
 		"babel-plugin-transform-react-remove-prop-types": "^0.4.24",
 		"brotli-webpack-plugin": "^1.1.0",
@@ -72,7 +72,7 @@
 		"replace-once": "^1.0.0",
 		"speed-measure-webpack-plugin": "^1.5.0",
 		"terser-webpack-plugin": "^5.2.4",
-		"ts-alias": "^0.0.5-1",
+		"ts-alias": "^0.0.6",
 		"ts-node": "^10.9.1",
 		"tslog": "^3.3.4",
 		"webfont": "^11.2.26",
@@ -85,6 +85,7 @@
 		"webpack-virtual-modules": "^0.4.3"
 	},
 	"devDependencies": {
+		"@babel/plugin-transform-react-jsx-source": "^7.19.6",
 		"@types/favicons": "^6.2.2",
 		"@types/fs-extra": "^9.0.12",
 		"@types/node": "^16.9.1",

package/readme.md

@@ -1,8 +1,17 @@
-# 5-HTP Framework
+# 5HTP Framework
 
 Opinionated, Lightweight & Full Stack Typescript framework, designed for productivity, modularity and performance.
 
-**/!\ This is a side-project. I cannot guarantee the maintenance.**
+## Features
+
+* Fully written in **Typescript**
+* Services management system
+* **Preact** with built-in SSR support
+* Highly convenient **MySQL client**
+* Universal schema / forms **validator**
+* Ful stack router
+* Cache system
+* And more
 
 ## Get Started
 
@@ -24,7 +33,17 @@ Opinionated, Lightweight & Full Stack Typescript framework, designed for product
 
 ## To be done:
 
-- Fix Typescript errors
-- Improve stability
-- Improve modularity
-- Make it less opinionated
+[] Update templates & documentation
+[] Improved debugability & debug tools
+    - Cleaner logs (tweak ts-logs settings)
+    - Cleaner stacktraces
+    - export all default exports as classical functions instead of arrow funcs
+[] Automatically generates types that associate api routes urls to their return types
+[] Fix forms system
+[] Allow to create CLI apps
+[] Debugging / Monitoring UI
+    - Admin dashboard
+[] Fix Typescript errors
+[] Completely replace expressjs
+[] Improve stability
+[] Improve modularity

package/skeleton/src/client/components/LoginModal.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import useContext from '@client/context';
+import useContext from '@/client/context';
 import { Props as ModalProps } from '@client/components/Dialog/card';
 
 // Core components

package/skeleton/src/client/pages/app/_layout/index.tsx

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import { ClientContext } from '@client/context';
+import { ClientContext } from '@/client/context';
 
 // Core components
 import Router from '@client/router/component';

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

@@ -6,7 +6,7 @@
 import React from 'react';
 
 // Core
-import { ClientContext } from '@client/context';
+import { ClientContext } from '@/client/context';
 
 // Core components
 import { Link } from '@client/router';

package/skeleton/src/client/tsconfig.json

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

package/skeleton/src/server/services/auth/index.ts

@@ -21,6 +21,10 @@ declare global {
     interface User extends UserBase { 
         
     }
+
+    interface Services {
+        auth: UserAuthService
+    }
 }
 
 /*----------------------------------
@@ -73,16 +77,4 @@ export default class UserAuthService extends UserAuthBase {
             redirect: '/onboard'
         }
     }
-}
-
-/*----------------------------------
-- REGISTER SERVICE
-----------------------------------*/
-app.register('auth', UserAuthService);
-declare global {
-    namespace Core {
-        interface Services {
-            auth: UserAuthService
-        }
-    }
 }

package/src/app/config.ts

@@ -35,23 +35,13 @@ export default class ConfigParser {
     public env() {
         // We assume that when we run 5htp dev, we're in local
         // Otherwise, we're in production environment (docker)
-        console.log("Using environment:", process.env.NODE_ENV);
+        console.log("[cli] Using environment:", process.env.NODE_ENV);
         return process.env.NODE_ENV === 'development' ? {
             name: 'local',
             profile: 'dev',
-            level: 'silly',
-        
-            localIP: '86.76.176.80',
-            domain: 'localhost:3010',
-            url: 'http://localhost:3010',
         } : {
             name: 'server',
             profile: 'prod',
-            level: 'silly',
-        
-            localIP: '86.76.176.80',
-            domain: 'megacharger.io',
-            url: 'https://megacharger.io',
         }
     }
 

package/src/app/index.ts

@@ -10,6 +10,7 @@ import cli from '..';
 
 // Specific
 import ConfigParser from './config';
+import type {  } from '../../../core/src/server/app/config';
 
 /*----------------------------------
 - TYPES
@@ -25,7 +26,7 @@ export default class App {
     // config
     // WARNING: High level config files (env and services) shouldn't be loaded from the CLI
     //  The CLI will be run on CircleCI, and no env file should be sent to this service
-    public identity!: Core.Config.Identity;
+    public identity!: Config.Identity;
 
     public paths = {
         root: cli.paths.appRoot,

package/src/compiler/client/index.ts

@@ -51,11 +51,15 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
         );*/
 
     // Convert tsconfig cli.paths to webpack aliases
-    const { aliases } = app.aliases.client.forWebpack(app.paths.root + '/node_modules');
-    // Disable access to server-side libs from client side
+    const { aliases } = app.aliases.client.forWebpack({
+        modulesPath: app.paths.root + '/node_modules'
+    });
+
+    // We're not supposed in any case to import server libs from client
     delete aliases["@server"]; 
     delete aliases["@/server"];
 
+    console.log("client aliases", aliases);
     const config: webpack.Configuration = {
 
         ...commonConfig,
@@ -69,7 +73,7 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
                     // https://github.com/webpack-contrib/webpack-hot-middleware#config
                     cli.paths.core.root + '/node_modules' + '/webpack-hot-middleware/client?name=client&reload=true',
                 ] : []),*/
-                cli.paths.core.root + '/src/client/index.tsx'
+                cli.paths.core.root + '/src/client/index.ts'
             ]
         },
 

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

@@ -9,17 +9,10 @@ import * as types from '@babel/types'
 
 // Core
 import PluginIndexage from '../plugins/indexage';
-import BabelGlobImports from './plugins/importations';
 
 import cli from '@cli';
 import type { TAppSide, default as App } from '@cli/app';
 
-// Const
-const alphabet = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
-
-// Resources
-const routesToPreload = require( cli.paths.appRoot + '/src/client/pages/preload.json' );
-
 /*----------------------------------
 - REGLES
 ----------------------------------*/
@@ -91,7 +84,6 @@ 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-class-properties'), { "loose": true }],
@@ -105,6 +97,8 @@ module.exports = (app: App, side: TAppSide, dev: boolean): webpack.RuleSetRule[]
 
                     ...(side === 'client' ? [
 
+                        [require("@babel/plugin-transform-react-jsx-source"), {}],
+
                         // HMR Preact avec support des hooks
                         //['@prefresh/babel-plugin'],
 
@@ -131,138 +125,44 @@ module.exports = (app: App, side: TAppSide, dev: boolean): webpack.RuleSetRule[]
                     }]
                 ]),
 
-                BabelGlobImports({ 
-                    debug: false,
-                    removeAliases: (source: string) => app.paths.withoutAlias(source, side)
-                }, [{
-                    test: (request) => {
-                        if (request.source === '@models') {
-                            request.source = app.paths.src + '/server/models/**/*.ts';
-                            return true;
-                        }
-                        return false;
-                    },
-                    replace: (request, matches, t) => {
-                        // Preserve default behavior
-                    }
-                }, {
-                    test: (request) => (
-                        side === 'client'
-                        &&
-                        (
-                            request.source === '@/client/pages/**/*.tsx' 
-                            || 
-                            request.source === '@client/pages/**/*.tsx'
-                        )
-                        &&
-                        request.type === 'import'
-                    ),
-                    replace: (request, matches, t) => {
-
-                        if (!('default' in request) || request.default === undefined)
-                            return;
-
-                        const imports: types.ImportDeclaration[] = [];
-
-                        // const routes = {
-                        //    <chunkId1>: () => import(/* webpackChunkName: '<chunkId>' */ "<file>"),
-                        //    <chunkId2>: () => require("<file>").default,
-                        // }
-
-                        const pageLoaders: types.ObjectProperty[] = [];
-                        for (const file of matches) {
-
-                            // Exclude layouts
-                            if (file.filename.includes("/_layout/")) {
-                                //console.log("Exclude", file, 'from pages loaders (its a layout)');
-                                continue;
-                            }
-
-                            // Excliude components
-                            const filename = path.basename( file.filename );
-                            if (alphabet.includes(filename[0]) && filename[0] === filename[0].toUpperCase()) {
-                                //console.log("Exclude", file, 'from pages loaders (its a component)');
-                                continue;
-                            }
-                                
-                            // Page config
-                            const { chunkId } = cli.paths.getPageChunk(app, file.filename);
-                            const preloadPage = routesToPreload.includes(chunkId);
-
-                            // Import type according to preloading option
-                            if (preloadPage) {
-
-                                // import <chunkId> from "<file>";
-                                imports.push(
-                                    t.importDeclaration(
-                                        [t.importDefaultSpecifier( t.identifier(chunkId) )],
-                                        t.stringLiteral(file.filename)
-                                    )
-                                );
-
-                                // { <chunkId>: <chunkId> }
-                                pageLoaders.push(
-                                    t.objectProperty( 
-                                        t.stringLiteral(chunkId),
-                                        t.identifier(chunkId)
-                                    )
-                                );
-
-                            } else {
-
-                                // <chunkId>: () => ...
-                                pageLoaders.push( 
-                                    t.objectProperty( 
-                                        
-                                        t.stringLiteral(chunkId),
-                                        // () => import(/* webpackChunkName: '<chunkId>' */ "<file>")
-                                        t.arrowFunctionExpression([], t.callExpression(
-
-                                            t.import(), [t.addComment(
-                                                t.stringLiteral(file.filename),
-                                                "leading",
-                                                "webpackChunkName: '" + chunkId + "'"
-                                            )]
-                                        ))
-                                    )
-                                )
-                            }
-                        }
+                //require("./plugins/pages")({ side }),
+
+                require('./routes/routes')({ side, app }),
 
-                        return [
-                            ...imports,
-                            // const routes = { ... }
-                            t.variableDeclaration("const", [t.variableDeclarator(
-                                t.identifier(request.default),
-                                t.objectExpression(pageLoaders)
-                            )])
-                        ]
+                ...(side === 'client' ? [] : [
 
-                    }
-                }])
+                    // Dependancies injection
+                    //require('./plugins/services')({ side }),
 
+                ]),
+
+                // Allow to import multiple fiels with one import statement thanks to glob patterns
+                require('babel-plugin-glob-import')({ 
+                    debug: false,
+                    removeAliases: (source: string) => app.paths.withoutAlias(source, side)
+                }, [
+                    // Routes imports on frontend side
+                    require('./routes/imports')(app, side, dev)
+                ])
             ],
 
             overrides: [
 
-                require("./plugins/pages")({ side }),
-
-                require("./plugins/models")({ side }),
-                
                 require('./plugins/icones-svg'),
                 
-                require('./plugins/form'),
+                // Universal forms
+                //require('./plugins/form'),
+
+                // Generate typing from sequelize model declaration
+                //require("./plugins/models")({ side }),
 
-                /*
-                
                 ...(side === 'client' ? [
 
                 ] : [
-                    require('./plugins/queries');
-                    require('./plugins/injection-dependances'),
-                ]),
 
-                */
+                    //require('./plugins/queries'),
+                    //require('./plugins/injection-dependances'),
+                ]),
             ]
         }
     }]

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

@@ -0,0 +1,163 @@
+/*----------------------------------
+- 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
+}
+
+const filenamePrefix = cli.paths.appRoot + '/src/server/services';
+const processFile = (filename: string) => (
+    filename.startsWith( cli.paths.appRoot + '/src/server/services' )
+    | 
+    filename.startsWith( cli.paths.appRoot + '/src/server/routes' )
+)
+
+module.exports = (options: TOptions) => (
+    [Plugin, options]
+)
+
+const debug = true;
+
+/*----------------------------------
+- PLUGIN
+----------------------------------*/
+function Plugin(babel, { side }: TOptions) {
+
+    const t = babel.types as typeof types;
+    let program: NodePath<types.Program>;
+
+    const plugin: PluginObj<{ 
+
+        filename: string,
+
+        appImport: string | null,
+
+        // Identifier => Name
+        importedServices: {[identifier: string]: string}
+    }> = {
+        pre(state) {
+
+            this.filename = state.opts.filename as string;
+
+            this.appImport = null
+            this.importedServices = {}
+
+        },
+        visitor: {
+
+            Program(path) {
+                program = path;
+            },
+
+            // Transform imports
+            ImportDeclaration(path) {
+
+                if (!this.filename.startsWith( cli.paths.appRoot + '/src/server' ))
+                    return;
+                
+                if (path.node.source.value !== '@server/app')
+                    return;
+
+                const importedServices: { local: string, imported: string }[] = []
+                let appName: string = 'app';
+
+                for (const specifier of path.node.specifiers) {
+                    /*
+                        import app from '@server/app';
+                    */
+                    if (specifier.type === 'ImportDefaultSpecifier') {
+
+                        appName = specifier.local.name;
+
+                    /*
+                        import { sql } from '@server/app';
+                        => 
+                        import app from '@server/app';
+                        app.use('sql');
+                    */
+                    } else if (specifier.type === 'ImportSpecifier') {
+
+                        if (specifier.imported.type !== 'Identifier')
+                            continue;
+
+                        importedServices.push({
+                            local: specifier.local.name,
+                            imported: specifier.imported.name
+                        });
+
+                    /*
+                        import * as templates from '@server/app';
+                        =>
+
+                    */
+                    } else if (specifier.type === 'ImportNamespaceSpecifier') {
+
+                        //importDefault = specifier.local.name;
+                        //importAll = true;
+
+                    }
+                }
+
+                // No service imported
+                // This verification avoids ininite loop
+                if (importedServices.length === 0)
+                    return;
+
+                const replacements: types.Statement[] = [
+                    t.importDeclaration(
+                        [
+                            t.importDefaultSpecifier( t.identifier( appName )),
+                        ],
+                        t.stringLiteral('@server/app')
+                    )
+                ]
+
+                for (const { imported, local } of importedServices) {
+
+                    replacements.push(
+                        t.expressionStatement(
+                            t.callExpression(
+                                t.memberExpression(
+                                    t.identifier( appName ),
+                                    t.identifier('use')
+                                ),
+                                [
+                                    t.stringLiteral( imported )
+                                ]
+                            )
+                        )
+                    );
+
+                    this.importedServices[ local ] = imported;
+                }
+
+                debug && console.log(`############ [compilation][babel][services] Remplacement: `, 
+                    generate(t.program(replacements)).code 
+                );
+
+                path.replaceWithMultiple(replacements);
+            },
+
+            // transform accesses
+            Identifier() {
+                
+            }
+        }
+    }
+
+    return plugin;
+}