infrontjs - npm Package Compare versions

Comparing version 0.8.1 to 0.8.2

package.json

 {
   "name": "infrontjs",
-  "version": "0.8.1",
-  "description": "A simple frontend framework.",
+  "version": "0.8.2",
+  "description": "The frontend framework.",
   "main": "src/IF.js",
@@ -6,0 +6,0 @@ "scripts": {

README.md

@@ -23,2 +23,9 @@ # InfrontJS
 
+- [ ] JSDoc
+- [ ] TemplateManager diffDomTree
+- [ ] infront-cli
+- [ ] Add tests
+- [ ] Add verbose mode and/or logger
+- [ ] Investigate on Typescript support
+- [ ] Examples, XX - States Transition, XX - States, Routing, Templates, Components, DataBinding, VirtualDom
 - [X] Rename Api to Http (Client)
@@ -30,7 +37,3 @@ - [x] Move Http to Util
 - [x] Add Front.js observables
-- [ ] Think about own wrapper of HTMLElements using custom attributes like if-bind
 - [x] Wrap Functions to static Helper class
 - [x] Remove is_default state because it does not make sense, use route array instead
-- [ ] Examples, XX - States Transition, XX - States, Routing, Templates, Components, DataBinding, VirtualDom
-- [ ] JSDoc
-- [ ] infront-cli

src/base/DefaultState.js

@@ -27,4 +27,4 @@ import { State } from "./State.js";
     vec3 col = vec3(0.0);
-    for(int j=-4;j<=4;j++){
-        for(int k=-4;k<=4;k++){
+    for(int j=-2;j<=2;j++){
+        for(int k=-2;k<=2;k++){
             vec2 uv = (fc)/iResolution.xy;
@@ -34,3 +34,3 @@ uv += sin(uv.x*(2.0+sin(iTime*0.39))+iTime*0.12)*vec2(j,k)*13.0/iResolution.xy;
             //float i = iTime*0.08+float(j)*0.03;
-            float i = iTime*0.08+float(j)*0.03;
+            float i = iTime*0.16+float(j)*0.03;
             uv.x *= 0.8;
@@ -43,5 +43,5 @@
     }
-	col /= 25.0;
+	col /= 15.0;
     // Output to screen
-    fragColor = vec4(col,1.0);
+    fragColor = vec4(col.r / 2.9, col.r / 1.2, col.r/ 1.9,1.0);
 }
@@ -57,3 +57,26 @@
     {
-        this.app.container.innerHTML = '<style>* { margin: 0; padding: 0;overflow: hidden }</style><canvas id="ds"></canvas>';
+        this.app.container.innerHTML = `
+        <style>
+            * { margin: 0; padding: 0;overflow: hidden;}
+        </style>
+        <canvas id="ds" style="position: fixed; top:0; left:0; z-index: 2;"></canvas>;
+
+            <div style="position: fixed;
+                        z-index: 9; 
+                        top: 50%; 
+                        left: 50%; 
+                        transform: translate(-50%, -50%);
+                        text-align: center;;
+                        font-family: Tahoma; 
+                        font-size: 4em;
+                        font-weight: bolder;
+                        padding: .5em; 
+                        background-color: white; 
+                        color: black;
+                        mix-blend-mode: screen;
+                        display: inline-block;">
+                        I<span style="font-size: 0.8em">NFRONT</span>JS
+                        <h2 style="font-family: 'Courier New'; background-color: black; color: white; margin-top: 0px; font-size: 0.3em;padding: 3px">Version ${this.app.getVersion()}</h2>
+            </div>        
+        `
         this.canvas = null;
@@ -65,3 +88,2 @@ this.gl = null;
         this.mousepos = [0,0];
-        console.log( "Hello" );
         this.initScene();
@@ -90,3 +112,3 @@ }
             let status = this.gl.getShaderParameter( shaderObj, this.gl.COMPILE_STATUS );
-            if ( !status ) alert( this.gl.getShaderInfoLog( shaderObj ) );
+            if ( !status ) { console.error( this.gl.getShaderInfoLog( shaderObj ) ); continue; }
             this.gl.attachShader( this.progDraw, shaderObj );
@@ -96,3 +118,4 @@ this.gl.linkProgram( this.progDraw );
         const status = this.gl.getProgramParameter( this.progDraw, this.gl.LINK_STATUS );
-        if ( !status ) alert( this.gl.getProgramInfoLog( this.progDraw ) );
+        //if ( !status ) alert( this.gl.getProgramInfoLog( this.progDraw ) );
+        if ( !status ) { console.error( this.gl.getProgramInfoLog( this.progDraw ) ); return; }
         this.progDraw.inPos = this.gl.getAttribLocation( this.progDraw, "inPos" );
@@ -99,0 +122,0 @@ this.progDraw.iTime = this.gl.getUniformLocation( this.progDraw, "iTime" );

src/core/App.js

@@ -7,4 +7,2 @@ import { Router } from "./Router.js";
 
-import { DefaultState } from "../base/DefaultState.js";
-
 import { Helper } from "../util/Helper.js";
@@ -14,3 +12,3 @@ import { PathObject } from "../util/PathObject.js";
 
-const VERSION = '0.8.1';
+const VERSION = '0.8.2';
 
@@ -78,7 +76,2 @@ const DEFAULT_PROPS = {
 
-        if ( !this.uid )
-        {
-            this.uid = Helper.createUid();
-        }
-
         // If container property is a string, check if it is a querySelector
@@ -136,19 +129,5 @@ if ( Helper.isString( this.container ) )
 
-    /**
-     * Get setting of key
-     * @param {string} key Setting property
-     * @param {*} defVal Default return value. Default is null.
-     * @returns {*|null}
-     */
-    getSetting( key, defVal = null )
+    getVersion()
     {
-        // @todo Fix, add nested tree logic
-        if ( this.settings.hasOwnProperty( key ) )
-        {
-            return this.settings[ key ];
-        }
-        else
-        {
-            return defVal;
-        }
+        return VERSION;
     }
@@ -163,7 +142,2 @@
 
-        // @todo Check if default state is set
-        // @todo Check if DefaultStates are allowed by setting configuration
-
-        //this.stateManager.addState( DefaultState );
-
         this.router.enable();
@@ -170,0 +144,0 @@ if ( route )

src/core/Router.js

@@ -20,2 +20,9 @@ import { RouteParams } from "./RouteParams.js";
         this.basePath = Helper.trim( window.location.pathname, '/' );
+        const lastPathPart = this.basePath.split( "/" ).pop();
+        if ( lastPathPart && lastPathPart.split( "." ).length > 1 )
+        {
+            this.basePath = this.basePath.replace( lastPathPart, '' );
+            this.basePath = Helper.trim( this.basePath, '/' );
+            window.history.replaceState( null, null, `/${this.basePath}/` );
+        }
     }
@@ -31,3 +38,3 @@
         {
-            this.app.stateManager.addState( action );
+            this.app.stateManager.add( action );
             this._routeActions.push(
@@ -141,2 +148,3 @@ {
         this.currentRoute = route;
+        console.log( route );
         this.execute(  this.resolveActionDataByRoute( route ) );
@@ -170,3 +178,2 @@ }
             let route = url.replace( window.location.origin + '/' + Helper.trim( this.basePath, '/' ), '' );
-            console.log( route );
             route = '/' + Helper.trim( route, '/' );
@@ -177,2 +184,4 @@
 
+            console.log( route );
+
             const actionData = this.resolveActionDataByRoute( route );
@@ -228,3 +237,3 @@ if ( actionData )
             {
-                let stateInstance = this.app.stateManager.createState(
+                let stateInstance = this.app.stateManager.create(
                     actionData.routeAction,
@@ -231,0 +240,0 @@ actionData.routeParams

src/core/StateManager.js

@@ -16,3 +16,3 @@ import { Helper } from "../util/Helper.js";
 
-    addState( stateClass )
+    add( stateClass )
     {
@@ -55,3 +55,3 @@ // @todo Fix this, only check for function or class
 
-    createState( stateId, routeParams )
+    create( stateId, routeParams )
     {
@@ -58,0 +58,0 @@ let stateInstance = null;

src/core/TemplateManager.js

@@ -82,3 +82,3 @@ const _extendedFunctions = {};
 
-    getHtml( tmpl, data = {} )
+    compile( tmpl, data = {} )
     {
@@ -88,4 +88,20 @@ return _template( tmpl, data );
 
-    renderHtml( htmlElement, tmpl, data = {} )
+    /*
+//
+//https://www.npmjs.com/package/virtual-dom
+//https://www.npmjs.com/package/preact
+    render( htmlElement, tmpl, date = {} )
     {
+        //render( this.getHtml( tmpl, data ), htmlElement );
+    }
+     */
+
+    // rename to render
+    render( htmlElement, tmpl, data = {} )
+    {
+        this.renderHtml(htmlElement, this.compile( tmpl, data ) );
+    }
+
+    renderHtml( htmlElement, html )
+    {
         if ( !htmlElement || false === ( htmlElement instanceof HTMLElement ) )
@@ -96,3 +112,3 @@ {
 
-        htmlElement.innerHTML = this.getHtml( tmpl, data );
+        htmlElement.innerHTML = html;
     }
@@ -106,2 +122,6 @@
             const response = await fetch( templateUrl );
+            if ( response.status > 399 )
+            {
+                throw new Error( `${response.status}: ${response.statusText}`);
+            }
             tmplHtml = await response.text();
@@ -108,0 +128,0 @@ this._cache.push(

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

370994

increased by1.15%

Lines of code

9410

increased by0.86%

Number of lines in readme file

38

increased by8.57%

Number of medium supply chain risk alerts

9

decreased by-10%

No dependency changes