frontfire 0.5.0 → 0.8.0

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "frontfire",
-  "version": "0.5.0",
+  "version": "0.8.0",
   "description": "",
   "main": "src/index.js",
   "type": "module",
   "scripts": {
     "start": "node src/index.js",
+    "start -version": "node src/index.js version",
+    "create in test": "node src/index.js create \"Hello World\"",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "repository": {
@@ -23,6 +25,7 @@
     "chalk": "^5.2.0",
     "commander": "^10.0.0",
     "conf": "^11.0.1",
+    "download-git-repo": "^3.0.2",
     "ejs": "^3.1.10",
     "esbuild": "^0.19.5",
     "esbuild-copy-static-files": "^0.1.0",
@@ -31,7 +34,8 @@
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
     "php-server": "^1.0.0",
-    "prettier": "^2.8.4"
+    "prettier": "^2.8.4",
+    "slugify": "^1.6.6"
   },
   "bin": {
     "frontfire": "src/index.js"

package/src/DefaultConfig.js

@@ -56,8 +56,8 @@ const entryPoints = [
     path.resolve( './src/app/main.js' ),
     path.resolve( './src/app/main.css' )
      */
-    `.${path.sep}src${path.sep}app${path.sep}main.js`,
-    `.${path.sep}src${path.sep}app${path.sep}main.css`
+    `./src/app/main.js`,
+    `./src/app/main.css`
 ];
 
 const outDirDebug = `${buildDir}/debug/app/`
@@ -66,16 +66,6 @@ const outDirRelease = `${buildDir}/release/app`;
 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

@@ -127,7 +127,7 @@ export default async function frontFire( isWatch, cfg = {} )
 
         // 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() );
+        const changedContent = indexContent.replace( /INFRONTCACHEBREAK/g, (DateTime.now()).valueOf() );
         fs.writeFileSync( `${rootBuildDir}${path.sep}release${path.sep}index.html`, changedContent );
     }
 };

package/src/index.js

@@ -1,13 +1,19 @@
 #! /usr/bin/env node
 
 import fs from "node:fs";
+import { readdir, readFile, writeFile, unlink } from 'node:fs/promises';
 import ejs from "ejs";
 import chalk from "chalk";
+import download from "download-git-repo";
+import { promisify } from "util";
 
 import _ from "lodash";
 import prettier from "prettier";
 import { program } from "commander";
 import path from "node:path";
+import { createInterface } from "readline";
+import { stdin as input, stdout as output } from "node:process";
+import slugify from "slugify";
 
 import frontFire from "./FrontFire.js";
 import defaultConfig from "./DefaultConfig.js";
@@ -17,6 +23,16 @@ 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 askYesNo(question) {
+  const rl = createInterface({ input, output });
+  const answer = await new Promise((resolve) => {
+    rl.question(question, (ans) => resolve(ans.trim()));
+  });
+  rl.close();
+  return /^(y|yes)$/i.test(answer);
+}
 
 async function performInit()
 {
@@ -36,28 +52,71 @@ async function performInit()
             }
         )
     );
+
+    if ( false === fs.existsSync( './src/assets' ) )
+    {
+        fs.mkdirSync( './src/assets' );
+    }
 }
 
-async function createInfrontJsStarter( appName = null )
+async function createInfrontJsStarter( appName, appPath )
 {
-    // Deep Copy
+    // Callback → Promise
+    const downloadAsync = promisify(download);
+
+    async function downloadRepo(repo, targetDir) {
+        try {
+            await downloadAsync(repo, targetDir, { clone: false });
+            console.log(`✅ Repo erfolgreich geladen nach ${targetDir}`);
+        } catch (err) {
+            console.error("❌ Fehler beim Laden des Repos:", err);
+        }
+    }
+
+    async function updatePackageName(newName, packagePath = "./package.json") {
+      try {
+        const fullPath = path.resolve(packagePath);
+
+        // read package.json
+        const data = await readFile(fullPath, "utf-8");
+        const pkg = JSON.parse(data);
+
+        // replace if it matches the source name
+        if (pkg.name === "infrontjs-starter") {
+          pkg.name = newName;
+
+          await writeFile(fullPath, JSON.stringify(pkg, null, 2) + "\n", "utf-8");
+          console.log(`✅ Updated package.json name to "${newName}"`);
+        } else {
+          console.log(`ℹ️ package.json name is not "infrontjs-starter" (found "${pkg.name}"), no change made.`);
+        }
+      } catch (err) {
+        console.error("❌ Failed to update package.json:", err);
+      }
+    }
+
+
+  // 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';
-    }
+    await downloadRepo("github:infrontjs/starter", appPath );
+    await updatePackageName( appName, `${appPath}/package.json` );
+    await unlink( `${appPath}/LICENSE` );
 
-    const srcFolder = path.resolve( '.' ) + path.separator + 'src-to-test';
+    await writeFile( `${appPath}/frontfire.json`, JSON.stringify(initConfig, null, 2) + "\n", "utf8");
+
+    console.log(chalk.green.bold(`\nInfrontJS project "${appName}" successfully created at ${appPath}\n`));
+
+    console.log(chalk.cyan.bold("Next steps:"));
+    console.log(`  ${chalk.yellow("1.")} Change directory to ${chalk.magenta(path.resolve(appPath))}`);
+    console.log(`  ${chalk.yellow("2.")} Modify ${chalk.magenta(path.join(appPath, "frontfire.config"))} and ${chalk.magenta(path.join(appPath, "package.json"))} to your needs`);
+    console.log(`  ${chalk.yellow("3.")} Run ${chalk.blueBright("npm install")}`);
+    console.log(`  ${chalk.yellow("4.")} Run ${chalk.blueBright("frontfire start-dev")} to start development`);
+    console.log(`  ${chalk.yellow("5.")} Alternatively run ${chalk.blueBright("frontfire build")} to build your minified project before deployment\n`);
 
-    if ( true === fs.existsSync( srcFolder ) )
-    {
-        console.warn( `Sourcefolder ${srcFolder} already exists!` );
-        return;
-    }
 }
 
 async function generatesPathObject( name )
@@ -118,7 +177,7 @@ async function generatesState( name, options )
 
     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} );`) );
+    console.log( chalk.italic.bgWhite( `myApp.states.add( ${stateName}State);`) );
 }
 
 async function generatesWebComponent( name = null )
@@ -143,7 +202,7 @@ async function generatesWebComponent( name = null )
     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 + fileName;
+    const srcFolder = path.resolve( '.' ) + path.sep + wcName;
     if ( true === fs.existsSync( srcFolder ) )
     {
         console.error( `Folder "${srcFolder}" already exists!` );
@@ -156,13 +215,115 @@ async function generatesWebComponent( name = null )
         ejs.render( wcIndex, { wcName: wcName, className: className } )
     );
     fs.writeFileSync(
-        srcFolder + path.sep + 'template.js',
+        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
 let customConfig = null;
 
@@ -194,9 +355,38 @@ program
     .action( function() { performInit(); } );
 
 program
-    .command( 'create' )
-    .description( 'Creates starter InfrontJS application.' )
-    .action( function() { createInfrontJsStarter(); } );
+    .command("create")
+    .description("Create a new InfrontJS project")
+    .argument("[appName]", "Application name", "InfrontJS Starter")
+    .argument("[appPath]", "Target directory")
+    .action(async ( appName, appPath) => {
+      const finalName = appName ?? "InfrontJS Starter";
+      if ( !appPath )
+      {
+          appPath = processY.cwd();
+          appPath = path.join( appPath, slugify( finalName,  { lower: true , strict: true } ) );
+      }
+
+      const resolvedPath = path.resolve(appPath ?? process.cwd());
+
+      console.log(chalk.cyan(`\nAbout to create:`));
+      console.log(`  ${chalk.bold("Name:")} ${finalName}`);
+      console.log(`  ${chalk.bold("Path:")} ${resolvedPath}\n`);
+
+      const confirmed = await askYesNo(
+        chalk.yellow("Do you really want to create the project in this directory? (y/N) ")
+      );
+
+      if (!confirmed) {
+        console.log(chalk.red("Aborted."));
+        process.exitCode = 1;
+        return;
+      }
+
+      console.log(chalk.green("Starting..."));
+      await createInfrontJsStarter( finalName, resolvedPath );
+      console.log(chalk.green("Done."));
+    });
 
 program
     .command( 'gwc' )
@@ -204,6 +394,15 @@ program
     .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.' )
@@ -222,5 +421,10 @@ program
     .description( 'Building for production.' )
     .action( function() { frontFire( false, customConfig ); } );
 
+program
+  .command( 'version' )
+  .description( 'Prints the version number.' )
+  .action( function() { console.log( '0.8.0' ); } );
+
 
 program.parse();

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/state-class.js

@@ -1,6 +1,6 @@
-export default 'import { BaseState } from "infrontjs";\n' +
+export default 'import { State } from "infrontjs";\n' +
 'import template from \'./<%= stateName %>Template.html\';\n' +
-'export class <%= stateName %> extends BaseState\n' +
+'export class <%= stateName %>State extends State\n' +
 '{\n' +
 '    static ROUTE = "/<%= stateId %>";\n' +
 '    static ID = "<%= stateId %>";\n' +

package/src/templates/wc-index.js

@@ -29,4 +29,4 @@ export default '' +
 '    }\n' +
 '}\n' +
 '\n' +
-'customElements.define(<%= wcName %>, <%= className %> );'
+'customElements.define( "<%= wcName %>", <%= className %> );'