frontfire 0.3.3 → 0.5.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.3",
+  "version": "0.5.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,21 +50,19 @@ 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`
+    `.${path.sep}src${path.sep}app${path.sep}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`;
 

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();
@@ -63,11 +69,14 @@ export default async function frontFire( isWatch, cfg = {} )
         await ctx.watch();
         let { host, port } = await ctx.serve(
             {
-                servedir : `.${path.sep}${rootBuildDir}${path.sep}debug`
+                servedir : `.${path.sep}${rootBuildDir}${path.sep}debug`,
+                // @todo use param for index.html
+                fallback : `.${path.sep}${rootBuildDir}${path.sep}debug${path.sep}index.html`
+                //onRequest : function (  ) {  console.log( "Hello" ); }
             }
         );
 
-        // Then start a proxy server on port 3000
+        // Then start a proxy server
         http.createServer((req, res) => {
 
             const options = {
@@ -75,7 +84,7 @@ export default async function frontFire( isWatch, cfg = {} )
                 port: port,
                 path: req.url,
                 method: req.method,
-                headers: req.headers,
+                headers: req.headers
             };
 
             if ( 'php' === indexType && req.url === "/" && req.method.toLowerCase() === 'get' )
@@ -107,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,23 @@
 #! /usr/bin/env node
 
 import fs from "node:fs";
+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";
+
 async function performInit()
 {
     // Deep Copy
@@ -27,8 +36,131 @@ async function performInit()
             }
         )
     );
+}
+
+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 + fileName;
+    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.js',
+        ejs.render( wcTemplate, { wcName: wcName } )
+    );
+
+    console.log( chalk.green.bold( `Web component ${wcName} successfully created.` ) );
 }
 
 // Try to load custom config
@@ -61,6 +193,29 @@ 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( '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/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 { BaseState } from "infrontjs";\n' +
+'import template from \'./<%= stateName %>Template.html\';\n' +
+'export class <%= stateName %> extends BaseState\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>';