frontfire 0.3.4 → 0.7.0

package/README.md

@@ -6,11 +6,11 @@ It is entirely built upon the great esbuild ecosystem.
 
 ## Logic
 
-Structure
+Required structure of an InfrontJS project is as follows
 
 - src/assets/**/*
 - src/app/main.js
-- src/app/app.css
+- src/app/main.css
 - src/index.html
 
-Entrypoint for building is main.js and app.css
+Entrypoint for building is main.js and main.css

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frontfire",
-  "version": "0.3.4",
+  "version": "0.7.0",
   "description": "",
   "main": "src/index.js",
   "type": "module",
@@ -23,11 +23,13 @@
     "chalk": "^5.2.0",
     "commander": "^10.0.0",
     "conf": "^11.0.1",
+    "ejs": "^3.1.10",
     "esbuild": "^0.19.5",
     "esbuild-copy-static-files": "^0.1.0",
     "esbuild-plugin-copy": "^2.0.2",
     "fs-extra": "^11.1.1",
     "lodash": "^4.17.21",
+    "luxon": "^3.5.0",
     "php-server": "^1.0.0",
     "prettier": "^2.8.4"
   },

package/src/DefaultConfig.js

@@ -6,8 +6,33 @@ import path from "node:path";
 import { copy } from "esbuild-plugin-copy";
 import copyStaticFiles from "esbuild-copy-static-files";
 
+let currentDir = path.dirname( '.' );
+let rootDir = null;
+const maxCount = 10;
+let currentCount = 0;
+while ( null === rootDir )
+{
+    if ( fs.existsSync( currentDir + path.sep + 'package.json' ) )
+    {
+        rootDir = currentDir;
+    }
+    else
+    {
+        currentDir += '/..';
+        currentCount++;
+        if ( currentCount > maxCount ) {
+            break;
+        }
+    }
+}
 
-const rootFiles = fs.readdirSync( `src${path.sep}`, { withFileTypes : true } );
+if ( rootDir === null )
+{
+    console.error( 'Too many recursions. Root directory not found.' );
+    exit;
+}
+
+const rootFiles = fs.readdirSync( `${rootDir}${path.sep}src${path.sep}`, { withFileTypes : true } );
 const rootFilesToCopy = [];
 for ( let ri = 0; ri < rootFiles.length; ri++ )
 {
@@ -25,34 +50,22 @@ const buildDir = `build`;
 const entryPoints = [
     /*
     "src/app/main.js",
-    "src/app/app.css"
+    "src/app/main.css"
      */
     /*
     path.resolve( './src/app/main.js' ),
-    path.resolve( './src/app/app.css' )
+    path.resolve( './src/app/main.css' )
      */
-    `.${path.sep}src${path.sep}app${path.sep}main.js`,
-    `.${path.sep}src${path.sep}app${path.sep}app.css`
+    `./src/app/main.js`,
+    `./src/app/main.css`
 ];
 
 const outDirDebug = `${buildDir}/debug/app/`
 const outDirRelease = `${buildDir}/release/app`;
 
-console.log( outDirRelease );
-
 const staticAssetsDestDebug = `${buildDir}/debug/assets`;
 const staticAssetsDestRelease = `${buildDir}/release/assets`;
 
-/*
-console.log( "Build folder:" );
-console.log( buildDir );
-
-
-console.log( "Release folder:" );
-console.log( outDirRelease );
-
-console.log( "First entry point", entryPoints[ 0 ] );
-*/
 export default {
   "buildDir" : buildDir,
   "debug" : {

package/src/FrontFire.js

@@ -6,6 +6,8 @@ import fse from "fs-extra";
 import path from "node:path";
 import * as child from "child_process";
 
+import { DateTime } from "luxon";
+
 import DEFAULT_CONFIG from "./DefaultConfig.js";
 
 export default async function frontFire( isWatch, cfg = {} )
@@ -42,10 +44,12 @@ export default async function frontFire( isWatch, cfg = {} )
     }
 
     let esbuildOpts = null;
+    let serverOpts = null;
 
     if ( true === isWatch )
     {
         esbuildOpts = _.get( config, 'debug.esbuild' );
+        serverOpts = _.get( config, 'debug.server' );
     }
     else
     {
@@ -56,6 +60,8 @@ export default async function frontFire( isWatch, cfg = {} )
 
     if ( true === isWatch )
     {
+        const outerPort = serverOpts && serverOpts.hasOwnProperty( 'port' ) ? +serverOpts.port : 3000;
+
         fs.watchFile( `src${path.sep}index.html`, async ( curr, prev ) =>
         {
             const result = await ctx.rebuild();
@@ -110,13 +116,18 @@ export default async function frontFire( isWatch, cfg = {} )
             // Forward the body of the request to esbuild
             req.pipe(proxyReq, { end: true })
 
-        }).listen(3000);
+        }).listen( outerPort );
 
-        console.log( `> InfrontJS:http://localhost:${port}` );
+        console.log( `> InfrontJS:http://localhost:${outerPort}` );
     }
     else
     {
         await ctx.rebuild();
         ctx.dispose();
+
+        // CACHEBREAK
+        let indexContent = fs.readFileSync( `${rootBuildDir}${path.sep}release${path.sep}index.html`,  { encoding: 'utf8', flag: 'r' } );
+        const changedContent = indexContent.replace( /IFJSCACHEBREAK/g, (DateTime.now()).valueOf() );
+        fs.writeFileSync( `${rootBuildDir}${path.sep}release${path.sep}index.html`, changedContent );
     }
 };

package/src/index.js

@@ -1,14 +1,25 @@
 #! /usr/bin/env node
 
 import fs from "node:fs";
+import { readdir, readFile } from 'node:fs/promises';
+import ejs from "ejs";
+import chalk from "chalk";
 
 import _ from "lodash";
 import prettier from "prettier";
 import { program } from "commander";
+import path from "node:path";
 
 import frontFire from "./FrontFire.js";
 import defaultConfig from "./DefaultConfig.js";
 
+import wcIndex from "./templates/wc-index.js";
+import wcTemplate from "./templates/wc-template.html.js";
+import stateClass from "./templates/state-class.js";
+import stateTemplate from "./templates/state-template.html.js";
+import poIndex from "./templates/po-index.js";
+import dictTemplate from "./templates/dictionary.js";
+
 async function performInit()
 {
     // Deep Copy
@@ -28,7 +39,237 @@ async function performInit()
         )
     );
 
+    if ( false === fs.existsSync( './src/assets' ) )
+    {
+        fs.mkdirSync( './src/assets' );
+    }
+}
+
+async function createInfrontJsStarter( appName = null )
+{
+    // Deep Copy
+    const initConfig = JSON.parse( JSON.stringify( defaultConfig ) );
+
+    _.unset( initConfig, 'debug.esbuild.plugins' );
+    _.unset( initConfig, 'release.esbuild.plugins' );
+
+    if ( null === appName || appName.length === 0 )
+    {
+        appName = 'InfrontJS Starter';
+    }
+
+    const srcFolder = path.resolve( '.' ) + path.separator + 'src-to-test';
+
+    if ( true === fs.existsSync( srcFolder ) )
+    {
+        console.warn( `Sourcefolder ${srcFolder} already exists!` );
+        return;
+    }
+}
+
+async function generatesPathObject( name )
+{
+    let fileName = null;
+    let poName = null;
+
+    fileName = name.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+    poName = fileName.charAt( 0 ).toUpperCase() + fileName.slice( 1 );
+
+    const poFilename = path.resolve( '.' ) + path.sep + poName + '.js';
+    if ( true === fs.existsSync( poFilename ) )
+    {
+        console.error( `File "${poFilename}" already exists!` );
+        return false;
+    }
+
+    fs.writeFileSync(
+        poFilename,
+        ejs.render( poIndex, { poName: poName } )
+    );
+
+    console.log( chalk.green.bold( `PathObject ${poName} successfully generated.`) );
+}
+
+async function generatesState( name, options )
+{
+    let fileName = null;
+    let stateName = null;
+    let stateId = null;
+
+    fileName = name.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+    stateName = fileName.charAt( 0 ).toUpperCase() + fileName.slice( 1 );
+    stateId = stateName.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase());
+
+    const stateFilename = path.resolve( '.' ) + path.sep + stateName + 'State.js';
+    if ( true === fs.existsSync( stateFilename ) )
+    {
+        console.error( `File "${stateFilename}" already exists!` );
+        return false;
+    }
+
+    const stateTemplatename = path.resolve( '.' ) + path.sep + stateName + 'Template.html';
+    if ( true === options.template && true === fs.existsSync( stateTemplatename ) )
+    {
+        console.error( `File "${stateTemplatename}" already exists!` );
+        return false;
+    }
+
+    fs.writeFileSync(
+        stateFilename,
+        ejs.render( stateClass, { stateName: stateName, stateId : stateId } )
+    );
+    fs.writeFileSync(
+        stateTemplatename,
+        ejs.render( stateTemplate, { stateName: stateName } )
+    );
+
+    console.log( chalk.green.bold( `State ${stateName} successfully generated.`) );
+    console.log( chalk.italic( 'Dont forget to add the state to your states instance, e.g.' ) );
+    console.log( chalk.italic.bgWhite( `myApp.states.add( ${stateName} );`) );
+}
+
+async function generatesWebComponent( name = null )
+{
+    let fileName = null;
+    let className = null;
+    let wcName = null;
+
+    // Deep Copy
+    const initConfig = JSON.parse( JSON.stringify( defaultConfig ) );
+
+    _.unset( initConfig, 'debug.esbuild.plugins' );
+    _.unset( initConfig, 'release.esbuild.plugins' );
+
+    if ( null === name || name.length === 0 )
+    {
+        console.error( 'V')
+    }
+
+    fileName = name.replace(/-([a-z])/g, function (g) { return g[1].toUpperCase(); });
+    className = fileName.charAt( 0 ).toUpperCase() + fileName.slice( 1 );
+    wcName = name.replace(/[A-Z]/g, (match, offset) => (offset > 0 ? '-' : '') + match.toLowerCase());
+    fileName = fileName.charAt(0).toLowerCase() + fileName.slice(1);
+
+    const srcFolder = path.resolve( '.' ) + path.sep + wcName;
+    if ( true === fs.existsSync( srcFolder ) )
+    {
+        console.error( `Folder "${srcFolder}" already exists!` );
+        return false;
+    }
+
+    fs.mkdirSync ( srcFolder ) ;
+    fs.writeFileSync(
+        srcFolder + path.sep + 'index.js',
+        ejs.render( wcIndex, { wcName: wcName, className: className } )
+    );
+    fs.writeFileSync(
+        srcFolder + path.sep + 'template.html',
+        ejs.render( wcTemplate, { wcName: wcName } )
+    );
+
+    console.log( chalk.green.bold( `Web component ${wcName} successfully created.` ) );
+}
+
+async function generateDictionary( pathToDictionary, options )
+{
+    const defaultLang = 'en';
+    const countryCodes = options.countrycodes.split( "," );
+    const defaultCountryCode = options.defaulcountrycode;
+    const rootFolder = path.resolve( options.rootpath );
+    const newDict = [];
+    const lKeys = [];
+    let currentDict = {};
+
+    const indexOfDefaultLang = countryCodes.indexOf( defaultLang );
+    if ( -1 < indexOfDefaultLang )
+    {
+        countryCodes.splice( indexOfDefaultLang, 1 );
+    }
+
+    try
+    {
+        if ( fs.existsSync( pathToDictionary ) )
+        {
+            let dictContent = fs.readFileSync( pathToDictionary, { encoding: 'utf8' } );
+            dictContent = dictContent.replace( "export default", "" );
+            dictContent = dictContent.trim();
+            dictContent = dictContent.replace( new RegExp(';$', 'gm'), "" );
+            try {
+                currentDict = JSON.parse( dictContent );
+            } catch( e ) {
+                console.error( `Cannot parse current dictionary.`, e );
+                currentDict = {};
+            }
+        }
+
+        const files = await readdir( rootFolder, { recursive : true } );
+        for ( let fi = 0; fi < files.length; fi++ )
+        {
+            const file = files[ fi ];
+            if ( false === fs.lstatSync( file ).isFile() )
+            {
+                continue;
+            }
+
+            const regex = /_lcs\(\s*?[\'|\"|\`](.+)[\'|\"|`]\s*?\)/gm;
+            if ( -1 < [ '.html', '.js' ].indexOf( ( '.' +  file.split( '.' ).pop() ) ) )
+            {
+                const str = await readFile( file, 'utf8' );
+
+                let m;
+                while ((m = regex.exec(str)) !== null) {
+
+                    // This is necessary to avoid infinite loops with zero-width matches
+                    if (m.index === regex.lastIndex) {
+                        regex.lastIndex++;
+                    }
+
+                    // The result can be accessed through the `m`-variable.
+                    m.forEach((match, groupIndex) => {
+
+                        if ( false === match.includes( '_lcs' ) )
+                        {
+                            if ( -1 === lKeys.indexOf( match ) )
+                            {
+                                lKeys.push( match );
+                                let newEntry = { "key" : match, trans : [] };
+                                if ( currentDict.hasOwnProperty( match ) && currentDict[ match ].hasOwnProperty( defaultCountryCode ) && currentDict[ match ][ defaultCountryCode ] !== null )
+                                {
+                                    newEntry.trans.push( { "cc" : defaultCountryCode, "val" : currentDict[ match ][ defaultCountryCode ] } );
+                                }
+                                else
+                                {
+                                    newEntry.trans.push( { "cc" : defaultCountryCode, "val" : match } );
+                                }
+
+                                for ( let ci = 0; ci < countryCodes.length; ci++ )
+                                {
+                                    if ( currentDict.hasOwnProperty( match ) && currentDict[ match ].hasOwnProperty( countryCodes[ ci ] ) && currentDict[ match ][ countryCodes[ ci ] ] !== null )
+                                    {
+                                        newEntry.trans.push( { "cc" : countryCodes[ ci ], "val" : currentDict[ match ][ countryCodes[ ci ] ] } );
+                                    }
+                                    else
+                                    {
+                                        newEntry.trans.push( { "cc" : countryCodes[ ci ], "val" : null } );
+                                    }
+                                }
+                                newDict.push( newEntry );
+                            }
+                        }
+                    });
+                }
+            }
+        }
+
+        const newDictFileContent = ejs.render( dictTemplate, { newDict: newDict } );
+        fs.writeFileSync( pathToDictionary, newDictFileContent, { encoding: 'utf8' } );
 
+        console.log( chalk.green.bold( `Dictionary successfully created under ${pathToDictionary}. Total keys: ${newDict.length}.` ) );
+    }
+    catch( e )
+    {
+        console.error( e );
+    }
 }
 
 // Try to load custom config
@@ -61,6 +302,38 @@ program
     .description( 'Creates frontfire default configuration file in current directory.' )
     .action( function() { performInit(); } );
 
+program
+    .command( 'create' )
+    .description( 'Creates starter InfrontJS application.' )
+    .action( function() { createInfrontJsStarter(); } );
+
+program
+    .command( 'gwc' )
+    .argument( '<name>', 'Name of web component.' )
+    .description( 'Generates a webcomponent with specific name.' )
+    .action( function( name ) { generatesWebComponent( name ); } );
+
+program
+    .command( 'gd' )
+    .argument( '<pathToDictionary>', 'Path to dictionary file. If it exists, it gets overwritten.' )
+    .option( '-cc, --countrycodes <ccodes>', 'Comma seperated list of country codes.', 'en,de' )
+    .option( '-dcc, --defaulcountrycode <ccode>', 'Default country code', 'en' )
+    .option( '-rp, --rootpath <rootpath>', 'Root path to parse files for translations.', './' )
+    .description( 'Generates a dictionary file.' )
+    .action( function( pathToDictionary, options ) { generateDictionary( pathToDictionary, options ); } );
+
+program
+    .command( 'gs' )
+    .argument( '<name>', 'Name of state.' )
+    .option( '-nt, --no-template', 'No template is generated. By default, an empty template for the State is autogenerated.' )
+    .description( 'Generates a new state.' )
+    .action( function( name, options ) { generatesState( name, options ); } );
+
+program
+    .command( 'gpo' )
+    .argument( '<name>', 'Name of path object.' )
+    .description( 'Generates a new path object.' )
+    .action( function( name ) { generatesPathObject( name ); } );
 
 program
     .command( 'build' )

package/src/templates/dictionary.js

@@ -0,0 +1,16 @@
+export default 'export default {\n'+
+'<% for ( let ki = 0; ki < newDict.length; ki++ ) {   %>\n' +
+'   "<%= newDict[ ki ].key %>" : {\n' +
+'<% for( let ti = 0; ti < newDict[ ki ].trans.length; ti++ ) { %>' +
+'<% if ( newDict[ ki ].trans[ ti ].val === null ) { %>' +
+'       "<%= newDict[ ki ].trans[ ti ].cc; %>" : null<%= ((ti+1) < newDict[ ki ].trans.length) ? "," : "" %>' +
+'<% } else { %>' +
+'       "<%= newDict[ ki ].trans[ ti ].cc; %>" : "<%= newDict[ ki ].trans[ ti ].val; %>"<%= ((ti+1) < newDict[ ki ].trans.length) ? "," : "" %>' +
+'<% } %>' +
+'<% if ((ti+1) < newDict[ ki ].trans.length) { %> ' +
+'\n' +
+'<% } %>' +
+'<% } %>\n' +
+'   }<%= ((ki+1) < newDict.length) ? "," : "" %>\n' +
+'<% }    %>\n' +
+'};';

package/src/templates/po-index.js

@@ -0,0 +1,4 @@
+export default 'import { PathObject } from "infrontjs";\n' +
+'export class <%= poName %> extends PathObject\n' +
+'{\n' +
+'}';

package/src/templates/state-class.js

@@ -0,0 +1,12 @@
+export default 'import { State } from "infrontjs";\n' +
+'import template from \'./<%= stateName %>Template.html\';\n' +
+'export class <%= stateName %>State extends State\n' +
+'{\n' +
+'    static ROUTE = "/<%= stateId %>";\n' +
+'    static ID = "<%= stateId %>";\n' +
+'\n' +
+'    async enter()\n' +
+'    {\n' +
+'        console.log( "Hello from state <%= stateName %>" );\n' +
+'    }\n' +
+'}';

package/src/templates/state-template.html.js

@@ -0,0 +1 @@
+export default '<h1>Hello from State <%= stateName %>!</h1>';

package/src/templates/wc-index.js

@@ -0,0 +1,32 @@
+export default '' +
+'// import * as IF from "infrontjs";\n' +
+'import template from "./template.html";\n' +
+'class <%= className %> extends HTMLElement\n' +
+'{\n' +
+'    constructor()\n' +
+'    {\n' +
+'        super();\n' +
+'        this._isConnected = false;\n' +
+'    }\n' +
+'\n' +
+'    connectedCallback()\n' +
+'    {\n' +
+'        if ( false === this._isConnected )\n' +
+'        {\n' +
+'            // Resolve default InfrontJS instance\n' +
+'            // this.app = IF.App.get();\n' +
+'            this.render();\n' +
+'\n' +
+'            this._isConnected = true;\n' +
+'        }\n' +
+'    }\n' +
+'\n' +
+'    render()\n' +
+'    {\n' +
+'        // Eg. Render template\n' +
+'        // this.innerHTML = this.app.view.getHtml( template, { user : this.app.user } );\n' +
+'        this.innerHTML = template;\n' +
+'    }\n' +
+'}\n' +
+'\n' +
+'customElements.define( "<%= wcName %>", <%= className %> );'

package/src/templates/wc-template.html.js

@@ -0,0 +1,2 @@
+export default '' +
+'<strong>Content of web component named:<br /><%= wcName %></strong>';