5htp 0.6.2 → 0.6.3-1

package/app/index.ts

@@ -69,7 +69,10 @@ export class App {
             generated: path.join( cli.paths.appRoot, 'server', '.generated'),
             configs: path.join( cli.paths.appRoot, 'server', 'app')
         },
-
+        common: {
+            generated: path.join( cli.paths.appRoot, 'common', '.generated')
+        },
+        
         withAlias: (filename: string, side: TAppSide) => 
             this.aliases[side].apply(filename),
 

package/compiler/client/index.ts

@@ -126,7 +126,7 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
                 // On ne compile les ressources (css) qu'une seule fois
                 {
                     test: regex.style,
-                    rules: require('../common/files/style')(app, true, dev),
+                    rules: require('../common/files/style')(app, dev, true),
 
                     // Don't consider CSS imports dead code even if the
                     // containing package claims to have no side effects.
@@ -331,4 +331,4 @@ export default function createCompiler( app: App, mode: TCompileMode ): webpack.
     };
 
     return config;
-};
+};

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

@@ -53,6 +53,13 @@ function Plugin(babel, { app, side, debug }: TOptions) {
 
     const t = babel.types as typeof types;
 
+    type TPluginState = {
+        filename: string,
+        file: TFileInfos,
+        apiInjectedRootFunctions: WeakSet<types.Node>,
+        needsUseContextImport: boolean
+    }
+
     /*
         - Wrap route.get(...) with (app: Application) => { }
         - Inject chunk ID into client route options
@@ -70,14 +77,14 @@ function Plugin(babel, { app, side, debug }: TOptions) {
         const stats = page.data.stats;
     */
 
-    const plugin: PluginObj<{ 
-        filename: string,
-        file: TFileInfos
-    }> = {
+    const plugin: PluginObj<TPluginState> = {
         pre(state) {
             this.filename = state.opts.filename as string;
 
             this.file = getFileInfos(this.filename);
+
+            this.apiInjectedRootFunctions = new WeakSet();
+            this.needsUseContextImport = false;
         },
         visitor: {
             // Find @app imports
@@ -203,6 +210,8 @@ function Plugin(babel, { app, side, debug }: TOptions) {
                     */
                     if (side === 'client' && !clientServices.includes(serviceName)) {
 
+                        ensureApiExposedInRootFunction(path, this);
+
                         // Get complete call path
                         const apiPath = '/api/' + completePath.join('/');
                         
@@ -255,6 +264,8 @@ function Plugin(babel, { app, side, debug }: TOptions) {
 
                     if (!this.file.process)
                         return;
+
+                    ensureUseContextImport(path, this);
                         
                     const wrappedrouteDefs = wrapRouteDefs( this.file );
                     if (wrappedrouteDefs)
@@ -264,6 +275,187 @@ function Plugin(babel, { app, side, debug }: TOptions) {
         }
     }
 
+    function ensureApiExposedInRootFunction(
+        path: NodePath<types.CallExpression>,
+        pluginState: TPluginState
+    ) {
+        if (path.scope.hasBinding('api'))
+            return;
+
+        const rootFunctionPath = getRootFunctionPath(path);
+        if (!rootFunctionPath)
+            return;
+
+        // Root function should be at the program body level (not nested in another function / expression)
+        if (rootFunctionPath.getFunctionParent())
+            return;
+        if (!isProgramBodyLevelFunction(rootFunctionPath))
+            return;
+
+        if (pluginState.apiInjectedRootFunctions.has(rootFunctionPath.node))
+            return;
+
+        const exposeApiDeclaration = t.variableDeclaration('const', [
+            t.variableDeclarator(
+                t.objectPattern([
+                    t.objectProperty(t.identifier('api'), t.identifier('api'), false, true),
+                ]),
+                t.callExpression(t.identifier('useContext'), [])
+            )
+        ]);
+
+        const body = rootFunctionPath.node.body;
+        if (body.type === 'BlockStatement') {
+            body.body.unshift(exposeApiDeclaration);
+        } else {
+            rootFunctionPath.node.body = t.blockStatement([
+                exposeApiDeclaration,
+                t.returnStatement(body)
+            ]);
+        }
+
+        pluginState.apiInjectedRootFunctions.add(rootFunctionPath.node);
+        pluginState.needsUseContextImport = true;
+    }
+
+    function getRootFunctionPath(path: NodePath): NodePath<types.Function | types.ArrowFunctionExpression> | undefined {
+
+        let functionPath = path.getFunctionParent();
+        if (!functionPath)
+            return;
+
+        // Only support plain functions / arrow functions (no class/object methods)
+        if (!(
+            functionPath.isFunctionDeclaration()
+            || functionPath.isFunctionExpression()
+            || functionPath.isArrowFunctionExpression()
+        ))
+            return;
+
+        let parentFunction = functionPath.getFunctionParent();
+        while (parentFunction) {
+
+            if (!(
+                parentFunction.isFunctionDeclaration()
+                || parentFunction.isFunctionExpression()
+                || parentFunction.isArrowFunctionExpression()
+            ))
+                break;
+
+            functionPath = parentFunction;
+            parentFunction = functionPath.getFunctionParent();
+        }
+
+        return functionPath;
+    }
+
+    function isProgramBodyLevelFunction(path: NodePath): boolean {
+
+        const parent = path.parentPath;
+        if (!parent)
+            return false;
+
+        // function Foo() {}
+        if (parent.isProgram())
+            return true;
+
+        // export default function Foo() {} / export default () => {}
+        if (
+            parent.isExportDefaultDeclaration()
+            &&
+            parent.parentPath?.isProgram()
+        )
+            return true;
+
+        // export const Foo = () => {}
+        if (
+            parent.isExportNamedDeclaration()
+            &&
+            parent.parentPath?.isProgram()
+        )
+            return true;
+
+        // const Foo = () => {} (top-level) / export const Foo = () => {}
+        if (parent.isVariableDeclarator()) {
+
+            const declaration = parent.parentPath;
+            if (!declaration?.isVariableDeclaration())
+                return false;
+
+            const declarationParent = declaration.parentPath;
+            if (!declarationParent)
+                return false;
+
+            if (declarationParent.isProgram())
+                return true;
+
+            if (
+                declarationParent.isExportNamedDeclaration()
+                &&
+                declarationParent.parentPath?.isProgram()
+            )
+                return true;
+        }
+
+        return false;
+    }
+
+    function ensureUseContextImport(path: NodePath<types.Program>, pluginState: TPluginState) {
+
+        if (!pluginState.needsUseContextImport)
+            return;
+
+        const body = path.node.body;
+
+        // Already imported as a value import
+        for (const stmt of body) {
+            if (
+                stmt.type === 'ImportDeclaration'
+                &&
+                stmt.source.value === '@/client/context'
+                &&
+                stmt.importKind !== 'type'
+                &&
+                stmt.specifiers.some(s =>
+                    s.type === 'ImportDefaultSpecifier' && s.local.name === 'useContext'
+                )
+            )
+                return;
+        }
+
+        // Try to reuse an existing value import from the same module
+        for (const stmt of body) {
+            if (
+                stmt.type !== 'ImportDeclaration'
+                ||
+                stmt.source.value !== '@/client/context'
+                ||
+                stmt.importKind === 'type'
+            )
+                continue;
+
+            const hasDefaultImport = stmt.specifiers.some(s => s.type === 'ImportDefaultSpecifier');
+            if (!hasDefaultImport) {
+                stmt.specifiers.unshift(
+                    t.importDefaultSpecifier(t.identifier('useContext'))
+                );
+                return;
+            }
+        }
+
+        // Otherwise, add a new import (placed after existing imports)
+        const importDeclaration = t.importDeclaration(
+            [t.importDefaultSpecifier(t.identifier('useContext'))],
+            t.stringLiteral('@/client/context')
+        );
+
+        let insertIndex = 0;
+        while (insertIndex < body.length && body[insertIndex].type === 'ImportDeclaration')
+            insertIndex++;
+
+        body.splice(insertIndex, 0, importDeclaration);
+    }
+
     function getFileInfos( filename: string ): TFileInfos {
 
         const file: TFileInfos = {
@@ -290,7 +482,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
         }
         
         // Differenciate back / front
-        if (relativeFileName.startsWith('/client/pages')) {
+        if (relativeFileName.startsWith('/client/pages') || relativeFileName.startsWith('/client/components') || relativeFileName.startsWith('/client/hooks')) {
             file.side = 'front';
         } else if (relativeFileName.startsWith('/server/routes')) {
             file.side = 'back';
@@ -302,7 +494,7 @@ function Plugin(babel, { app, side, debug }: TOptions) {
 
     function transformDataFetchers( 
         path: NodePath<types.CallExpression>, 
-        routerDefContext: PluginObj, 
+        routerDefContext: TPluginState, 
         routeDef: TRouteDefinition 
     ) {
         path.traverse({
@@ -638,4 +830,4 @@ function Plugin(babel, { app, side, debug }: TOptions) {
     }
 
     return plugin;
-}
+}

package/compiler/common/files/autres.ts

@@ -24,7 +24,7 @@ module.exports = (app: App, dev: boolean, client: boolean) => ([
     // Texte brut
     {
         type: 'asset/source',
-        test: /\.(md|hbs|sql|txt|csv)$/,
+        test: /\.(md|hbs|sql|txt|csv|html)$/,
     },
 
     // Polices dans un fichier distinc dans le dossier dédié

package/compiler/common/files/style.ts

@@ -1,11 +1,7 @@
 // Plugons
 import MiniCssExtractPlugin from "mini-css-extract-plugin";
-import lessToJs from 'less-vars-to-js';
 
-import fs from 'fs-extra';
-import cli from '@cli';
-
-import type App from '../../../app';
+import type { App } from '../../../app';
 
 module.exports = (app: App, dev: Boolean, client: boolean) => {
 
@@ -31,11 +27,32 @@ module.exports = (app: App, dev: Boolean, client: boolean) => {
             loader: 'css-loader',
             options: {
                 // CSS Loader https://github.com/webpack/css-loader
-                importLoaders: 1,
+                importLoaders: 1, // let postcss run on @imports
                 sourceMap: dev
             },
         },
 
+        // Postcss
+        {
+            loader: 'postcss-loader',
+            options: {
+                postcssOptions: {
+                    plugins: [
+                        /* Tailwind V4 */require('@tailwindcss/postcss')({
+                            // Ensure Tailwind scans the application sources even if the build
+                            // process is launched from another working directory (e.g. Docker).
+                            base: app.paths.root,
+
+                            // Avoid double-minifying: Webpack already runs CssMinimizerPlugin in prod.
+                            optimize: false,
+                        }),
+                        ///* Tailwind V3 */require('tailwindcss'),
+                        require('autoprefixer'),
+                    ],
+                },
+            },
+        },
+
         {
             test: /\.less$/,
             loader: 'less-loader',
@@ -58,4 +75,4 @@ module.exports = (app: App, dev: Boolean, client: boolean) => {
         }*/
     ]
 
-}
+}

package/compiler/index.ts

@@ -17,7 +17,6 @@ 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
 
@@ -34,7 +33,7 @@ type TRegisteredService = {
     id?: string,
     name: string,
     className: string,
-    instanciation: (parentRef: string) => string,
+    instanciation: (parentRef?: string) => string,
     priority: number,
 }
 
@@ -198,7 +197,7 @@ export default class Compiler {
                 const refTo = serviceConfig.refTo;
                 return {
                     name: serviceName,
-                    instanciation: (parentRef: string) => `this.${refTo}`,
+                    instanciation: () => `this.${refTo}`,
                     priority: 0
                 }
             }
@@ -228,7 +227,7 @@ export default class Compiler {
 
                     // 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'
+                        propsStr += `${key}:`+ refService(key, value, level + 1).instanciation() + ',\n'
                     
                     // Recursion
                     else if (level <= 4 && !Array.isArray(value))
@@ -244,10 +243,10 @@ export default class Compiler {
             const config = processConfig(serviceConfig.config || {});
 
             // Generate the service instance
-            const instanciation = (parentRef: string) => 
+            const instanciation = (parentRef?: string) => 
                 `new ${serviceMetas.name}( 
-                    ${parentRef}, 
-                    (instance: ${serviceMetas.name}) => (${config}),
+                    ${parentRef ? `${parentRef},` : ''}
+                    ${config},
                     this 
                 )`
 
@@ -267,7 +266,7 @@ export default class Compiler {
         const appClassIdentifier = app.identity.identifier;
         const containerServices = app.containerServices.map( s => "'" + s + "'").join('|');
 
-        // Output the services index
+        // @/client/.generated/services.d.ts
         fs.outputFileSync(
             path.join( app.paths.client.generated, 'services.d.ts'),
 `declare module "@app" {
@@ -303,6 +302,7 @@ declare namespace preact.JSX {
 `
         );
 
+        // @/client/.generated/context.ts
         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 ?)
@@ -333,6 +333,15 @@ export type ClientContext = (
 export const ReactClientContext = React.createContext<ClientContext>({} as ClientContext);
 export default (): ClientContext => React.useContext<ClientContext>(ReactClientContext);`);
 
+        // @/common/.generated/services.d.ts
+        fs.outputFileSync(
+            path.join( app.paths.common.generated, 'services.d.ts'),
+`declare module '@models/types' {
+    export * from '@/var/prisma/index';
+}`
+        );
+
+        // @/server/.generated/app.ts
         fs.outputFileSync(
             path.join( app.paths.server.generated, 'app.ts'),
 `import { Application } from '@server/app/index';
@@ -341,8 +350,9 @@ ${imported.join('\n')}
 
 export default class ${appClassIdentifier} extends Application {
 
+    // Makke sure the services typigs are reflecting the config and referring to the app
     ${sortedServices.map(service => 
-        `public ${service.name}!: ${service.className};`
+        `public ${service.name}!: ReturnType<${appClassIdentifier}["registered"]["${service.id}"]["start"]>;`
     ).join('\n')}
 
     protected registered = {
@@ -359,6 +369,7 @@ export default class ${appClassIdentifier} extends Application {
 
 `);
 
+        // @/server/.generated/services.d.ts
         fs.outputFileSync(
             path.join( app.paths.server.generated, 'services.d.ts'),
 `type InstalledServices = import('./services').Services;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.6.2",
+	"version": "0.6.3-1",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp.git",
 	"license": "MIT",
@@ -27,6 +27,7 @@
 		"@babel/preset-typescript": "^7.15.0",
 		"@prefresh/webpack": "^3.3.2",
 		"@squoosh/lib": "^0.4.0",
+		"@tailwindcss/postcss": "^4.1.17",
 		"@types/babel__core": "^7.1.16",
 		"@types/cookie": "^0.4.1",
 		"@types/express": "^4.17.13",
@@ -40,6 +41,7 @@
 		"@types/universal-analytics": "^0.4.5",
 		"@types/webpack-env": "^1.16.2",
 		"@types/ws": "^7.4.7",
+		"autoprefixer": "^10.4.21",
 		"babel-loader": "^10.0.0",
 		"babel-plugin-glob-import": "^0.0.9-1",
 		"babel-plugin-transform-imports": "^2.0.0",
@@ -50,7 +52,7 @@
 		"compression-webpack-plugin": "^8.0.1",
 		"console-table-printer": "^2.10.0",
 		"css-loader": "^6.2.0",
-		"css-minimizer-webpack-plugin": "^4.1.0",
+		"css-minimizer-webpack-plugin": "^7.0.4",
 		"dayjs": "^1.11.5",
 		"favicons": "^7.2.0",
 		"filesize": "^8.0.3",
@@ -67,6 +69,7 @@
 		"node-cmd": "^5.0.0",
 		"node-notifier": "^10.0.0",
 		"null-loader": "^4.0.1",
+		"postcss-loader": "^8.2.0",
 		"prompts": "^2.4.2",
 		"react-dev-utils": "^11.0.4",
 		"replace-once": "^1.0.0",
@@ -74,6 +77,7 @@
 		"serialize-javascript": "^6.0.2",
 		"sharp": "^0.34.3",
 		"speed-measure-webpack-plugin": "^1.5.0",
+		"tailwindcss": "^4.1.17",
 		"terser-webpack-plugin": "^5.2.4",
 		"ts-alias": "^0.0.7",
 		"ts-node": "^10.9.1",
@@ -84,7 +88,8 @@
 		"webpack-dev-middleware": "^5.1.0",
 		"webpack-hot-middleware": "^2.25.0",
 		"webpack-node-externals": "^3.0.0",
-		"webpack-virtual-modules": "^0.4.3"
+		"webpack-virtual-modules": "^0.4.3",
+		"yaml": "^2.8.2"
 	},
 	"devDependencies": {
 		"@types/babel__preset-env": "^7.9.6",