npm - tina4js - Versions diffs - 0.0.1 - Mend

tina4js 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/.parcelrc +5 -0
package/index.html +11 -0
package/package.json +27 -0
package/readme.md +14 -0
package/src/routes/example.ts +35 -0
package/src/routes/testing.ts +13 -0
package/src/templates/base.twig +14 -0
package/src/templates/contact.twig +5 -0
package/src/templates/index.twig +4 -0
package/tina4/Api.ts +42 -0
package/tina4/Get.ts +9 -0
package/tina4/Globals.ts +32 -0
package/tina4/History.ts +26 -0
package/tina4/Post.ts +10 -0
package/tina4/Route.ts +3 -0
package/tina4/Router.ts +163 -0
package/tina4/Tina4.ts +95 -0
package/tina4/components/Tina4Api.ts +12 -0
package/tina4/components/Tina4Config.ts +9 -0
package/tina4.ts +4 -0

package/.parcelrc ADDED Viewed

@@ -0,0 +1,5 @@
+{
+    "extends": "@parcel/config-default",
+    "resolvers": ["@parcel/resolver-glob", "..."],
+    "reporters":  ["...", "parcel-reporter-static-files-copy"]
+}

package/index.html ADDED Viewed

@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Tina4 JS</title>
+    </head>
+    <body>
+        <tina4-api url="https://randomuser.me/api/" token=""></tina4-api>
+        <div id="root"></div>
+        <script type="module" src="tina4.ts"></script>
+    </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,27 @@
+{
+  "name": "tina4js",
+  "source": "index.html",
+  "version": "0.0.1",
+  "description" : "This is not another framework!",
+  "dependencies": {
+    "fs": "^0.0.1-security",
+    "twig": "^1.15.4"
+  },
+  "devDependencies": {
+    "@parcel/resolver-glob": "^2.3.2",
+    "@types/node": "^17.0.21",
+    "parcel": "latest",
+    "parcel-reporter-static-files-copy": "^1.3.4",
+    "path-browserify": "^1.0.1",
+    "process": "^0.11.10",
+    "typescript": "^4.2.3"
+  },
+  "scripts": {
+    "start": "parcel",
+    "build": "parcel build"
+  },
+  "staticFiles": {
+    "staticPath": "src/templates",
+    "staticOutPath": "templates"
+  }
+}

package/readme.md ADDED Viewed

@@ -0,0 +1,14 @@
+# Tina4js - This is not another Framework for Javascript #
+Right now there is not much to see, but you can start playing by doing the following
+```
+npm install
+npm run start
+```
+Components
+| Component | Example                                                       |
+|-----------|---------------------------------------------------------------|
+| tina4-api | ```<tina4-api url="https://randomuser.me/api/" token="" />``` |

package/src/routes/example.ts ADDED Viewed

@@ -0,0 +1,35 @@
+import {Tina4} from "../../tina4/Tina4";
+import {Get} from "../../tina4/Get";
+import {Post} from "../../tina4/Post";
+import {Api} from "../../tina4/Api";
+(new Get()).add('/test/hello', function (response, request) {
+    let content = `<h1>Hello World Again!</h1>`;
+    response(content, 200, 'text/html')
+});
+(new Get()).add('/test', function (response, request) {
+    Tina4.renderTemplate(`<h1>Hello {{name}}!</h1><form target="root" method="post"><input type="text" name="firstName" value="{{firstName}}"><button>Send</button></form>`, {
+            name: "Andre",
+            firstName: "Andre"
+        }, function (html) {
+            console.log('OOO');
+            response(html, 200, 'text/html')
+        }
+    );
+});
+(new Get()).add('/test/{id}', function (response, request) {
+    Tina4.renderTemplate(`<h1>Hello parsing params ok {{id}}!</h1>`, request, function(html) {
+        response(html, 200, 'text/html');
+    });
+});
+(new Get()).add('/', function (response, request) {
+    Tina4.renderTemplate(`index.twig`, {test: "Hello World!", title: "Index Page"}, function(html) {
+        response (html, 200, 'text/html');
+    });
+});

package/src/routes/testing.ts ADDED Viewed

@@ -0,0 +1,13 @@
+import {Post} from "../../tina4/Post";
+import {Api} from "../../tina4/Api";
+import {Tina4} from "../../tina4/Tina4";
+(new Post()).add("/test", function (response, request) {
+    //Send and API request
+    console.log('POST WORKING', request);
+    Api.sendRequest('',  request, 'GET', function(result) {
+        Tina4.renderTemplate(`contact.twig`, result, function(html){
+            response(html, 200);
+        });
+    });
+});

package/src/templates/base.twig ADDED Viewed

@@ -0,0 +1,14 @@
+<div>
+    <nav>
+        <h1>Hello World Hello</h1>
+        <a href="#" onclick="navigate('/')">Home</a>
+        <a href="#" onclick="navigate('/test/hello')">Test</a>
+        <a href="#" onclick="navigate('/test/Hello')">Hello</a>
+        <a href="#" onclick="navigate('/test')">Hello</a>
+    </nav>
+</div>
+<div>
+    {% block content %}
+        Here is content
+    {% endblock %}
+</div>

package/src/templates/contact.twig ADDED Viewed

@@ -0,0 +1,5 @@
+<h1>Hello</h1>
+{% for result in results %}
+    {{result.name.first}}
+    <img src="{{result.picture.large}}">
+{% endfor %}

package/src/templates/index.twig ADDED Viewed

@@ -0,0 +1,4 @@
+{% extends "base.twig" %}
+{% block content %}
+    {{ test }}
+{% endblock %}

package/tina4/Api.ts ADDED Viewed

@@ -0,0 +1,42 @@
+import {Globals} from "./Globals";
+export class Api {
+    static sendRequest (endPoint, request, method, callback) {
+        if (endPoint === undefined) {
+            endPoint = "";
+        }
+        if (request === undefined) {
+            request = null;
+        }
+        if (method === undefined) {
+            method = 'GET';
+        }
+        let api = Globals.get('api');
+        if (api !== null) {
+            endPoint = api.url + endPoint;
+        }
+        const xhr = new XMLHttpRequest();
+        xhr.open(method, endPoint, true);
+        xhr.onload = function () {
+            let content = xhr.response;
+            try {
+                content = JSON.parse(content);
+                callback(content);
+            } catch (exception) {
+                callback (content);
+            }
+        };
+        if (method === 'POST') {
+            xhr.send(request);
+        } else {
+            xhr.send(null);
+        }
+    }
+}

package/tina4/Get.ts ADDED Viewed

@@ -0,0 +1,9 @@
+import {Route} from "./Route"
+import {Router} from "./Router";
+export class Get implements Route {
+    private method : string = 'GET';
+    add(path: string, callback): void {
+        Router.add(this.method, path, callback)
+    }
+}

package/tina4/Globals.ts ADDED Viewed

@@ -0,0 +1,32 @@
+export class Globals {
+    static initialize () {
+        window['tina4'] = {};
+    }
+    static defined() {
+        return (window['tina4'] !== undefined);
+    }
+    static set(name, value) {
+        if (!this.defined()) {
+            this.initialize();
+        }
+        window['tina4'][name] = value;
+    }
+    static append (name, value) {
+        if (window['tina4'][name] === undefined) {
+            window['tina4'][name] = [];
+        }
+        window['tina4'][name].push(value);
+    }
+    static get (name) {
+        if (this.defined() && window['tina4'][name]) {
+            return window['tina4'][name];
+        } else {
+            return null;
+        }
+    }
+}

package/tina4/History.ts ADDED Viewed

@@ -0,0 +1,26 @@
+export class History {
+    static addHistory(path, target, method) {
+        let historyInfo = JSON.parse(localStorage.getItem('history'));
+        let pathInfo = {path: null};
+        if (historyInfo.length > 0) {
+            pathInfo = historyInfo[historyInfo.length - 1];
+        }
+        if (method === 'GET' && pathInfo.path !== path || method === 'POST') {
+            historyInfo.push({path: path, target: target});
+            localStorage.setItem('history', JSON.stringify(historyInfo));
+        }
+    }
+    static resolveHistory() {
+        let historyInfo = JSON.parse(localStorage.getItem('history'));
+        historyInfo.pop();
+        let pathInfo = {path: "/", target: null};
+        if (historyInfo.length > 0) {
+            pathInfo = historyInfo[historyInfo.length - 1];
+            localStorage.setItem('history', JSON.stringify(historyInfo));
+        }
+        return pathInfo;
+    }
+}

package/tina4/Post.ts ADDED Viewed

@@ -0,0 +1,10 @@
+import {Route} from "./Route"
+import {Router} from "./Router";
+export class Post implements Route {
+    static;
+    private method : string = 'POST';
+    add(path: string, callback): void {
+        Router.add(this.method, path, callback)
+    }
+}

package/tina4/Route.ts ADDED Viewed

@@ -0,0 +1,3 @@
+export interface Route {
+     add(path: string, callback):void;
+}

package/tina4/Router.ts ADDED Viewed

@@ -0,0 +1,163 @@
+import {Globals} from "./Globals";
+import {Tina4} from "./Tina4";
+export class Router {
+    private readonly url: string;
+    private readonly target:  string;
+    private readonly method:  string;
+    private readonly data;
+    private matchesPath;
+    private matchesUrl;
+    private params;
+    private matched;
+    constructor(url, target, method, data=null)  {
+        //console.log('Constructing', url, target, method, data);
+        if (method === undefined) method = 'GET';
+        this.url = url;
+        this.target = target;
+        this.method = method;
+        this.data = data;
+    }
+    static add(method, path, callback) {
+        Tina4.initialize();
+        //console.log('Adding Route', method, path);
+        if (Globals.defined()) {
+            Globals.append('routes', {method: method, path: path, callback: callback});
+        }
+    }
+    static response(content, httpCode, contentType) {
+        console.log('Response', content, httpCode, contentType);
+        //manipulate content based on the contentType
+        if ( typeof content === 'object' &&
+            !Array.isArray(content) &&
+            content !== null
+        ) {
+            content = JSON.stringify(content);
+        }
+        return content;
+    }
+    //https://stackoverflow.com/questions/831030/how-to-get-get-request-parameters-in-javascript
+    getRequestParams() {
+        let s1 = location.search.substring(1, location.search.length).split('&'),
+            r = {}, s2, i;
+        for (i = 0; i < s1.length; i += 1) {
+            s2 = s1[i].split('=');
+            r[decodeURIComponent(s2[0])] = decodeURIComponent(s2[1]);
+        }
+        if (JSON.stringify(r) == '{"":"undefined"}') return {};
+        return r;
+    };
+    cleanUrl(url) {
+        const regex = /(.*)\/\/(.*)\//g;
+        url = url.replace(regex, '/').replace('#','');
+        return url;
+    }
+    match (url:string, path:string, method:string): boolean {
+        if  (this.method !== method) return false;
+        url = this.cleanUrl(url);
+        //console.log('Matching', url, path, method);
+        const  urlExpression  =  /(.*)\/(.*)|{(.*)}/g;
+        const  pathExpression  =  /(.*)\/(.*)|{(.*)}/g;
+        if (url === path) {
+            return true;
+        } else {
+            this.matchesUrl = urlExpression.exec (url);
+            this.matchesPath = pathExpression.exec (path);
+            if (this.matchesUrl.length === this.matchesPath.length) {
+                this.matched = true;
+                this.matchesUrl.every(function (urlPath, index) {
+                    if (index !== 0 && urlPath !== undefined) {
+                        //console.log('Matching', urlPath, this.matchesPath[index]);
+                        if (urlPath !== this.matchesPath[index] && this.matchesPath[index][0] !== '{') {
+                            //console.log('Not matching', url, path);
+                            this.matched = false;
+                            return false;
+                        } else if (this.matchesPath[index][0] === '{') {
+                            this.params[this.matchesPath[index].replace('{', '').replace('}', '')] = urlPath;
+                            this.matched = true;
+                        }
+                    }
+                    return true;
+                }, this);
+                if (this.matched) return true;
+            } else {
+                return false;
+            }
+        }
+    }
+    parse(url: string, target: string, callback) {
+        //console.log (window['tina4']['routes']);
+        let routes = Globals.get('routes');
+        let rendered = false;
+        routes.every(function(route){
+            if (this.match(url, route.path, route.method )) {
+                if (route.method === 'GET') {
+                    history.pushState({}, '', url);
+                }
+                route.callback( function(content, httpCode, contentType) {
+                     callback ( target, Router.response(content, httpCode, contentType) );
+                }, this.params );
+                rendered = true;
+            }
+            return true;
+        }.bind(this));
+        if (!rendered) {
+            //See if we can find a twig file
+            Tina4.renderTemplate(`${url}.twig`, {}, function (html) {
+                callback(target, Router.response(html, 200, 'text/html'));
+            });
+        }
+    }
+    submitHandler(event) {
+        if (event.preventDefault) event.preventDefault();
+        let form = event.target;
+        //console.log ('Form', form.action, window.location.pathname, form);
+        if (form.action === undefined) form.action = window.location.pathname;
+        // @ts-ignore
+        window.navigate(form.action, form.getAttribute("target") , 'POST', form);
+    }
+    run() {
+        // @ts-ignore
+        window.submitHandler = this.submitHandler;
+        this.params = this.getRequestParams();
+        this.params.data = this.data;
+        this.parse(this.url, this.target, function (target, content) {
+            //console.log ('Target', target, content);
+            if (document.getElementById(target) !== null) {
+                document.getElementById(target).innerHTML = content;
+                //Attach the form submit handler
+                let forms = Array.prototype.slice.call(document.getElementsByTagName('form'));
+                forms.forEach(function (form) {
+                    //console.log('Found form', form.method);
+                    if (form.attachEvent) {
+                        // @ts-ignore
+                        form.attachEvent("submit", window.submitHandler);
+                    } else {
+                        // @ts-ignore
+                        form.addEventListener("submit", window.submitHandler);
+                    }
+                });
+            } else {
+                console.log('Cannot find route')
+            }
+        });
+    }
+}

package/tina4/Tina4.ts ADDED Viewed

@@ -0,0 +1,95 @@
+import {Globals} from "./Globals"
+import {Router} from "./Router";
+import {History} from "./History";
+import Twig from 'twig';
+import {Tina4Config} from "./components/Tina4Config";
+import {Tina4Api} from "./components/Tina4Api";
+export class Tina4 {
+    constructor(config = null) {
+        if (config === undefined || config === null) {
+            if (Globals.defined() && Globals.get('config')) {
+                config = Globals.get('config');
+            } else {
+                config = {defaultTarget: 'root'};
+            }
+        }
+        console.log('Config found', config);
+        Tina4.resolveRoutes(window.location.pathname, config.defaultTarget);
+    }
+    static initialize(config = null) {
+        if (!Globals.defined()) {
+            console.log('Initialize Tina4');
+            Globals.initialize();
+            Globals.set('routes', []);
+            Globals.set('twig', Twig);
+            localStorage.setItem('history', JSON.stringify([]));
+            Tina4.registerComponents();
+        }
+        if (config !== null) {
+            Globals.set('config', config);
+        } else {
+            Globals.set('config', {defaultTarget: 'root'});
+        }
+        //back navigation in the browser
+        window.onpopstate=function(e){
+            if (e.state) {
+                let pathInfo = History.resolveHistory ();
+                Tina4.resolveRoutes(pathInfo.path, pathInfo.target, 'GET', {});
+            }
+        }
+        //add the navigate handler
+        // @ts-ignore
+        window.navigate = function (path, target = 'root', method: string = 'GET', data = null) {
+            if (Globals.get('config').defaultTarget !== null) {
+                target = Globals.get('config').defaultTarget;
+            }
+            Tina4.resolveRoutes(path, target, method, data);
+        };
+    }
+    static registerComponents() {
+        console.log('Register components');
+        customElements.define('tina4-config', Tina4Config);
+        customElements.define('tina4-api', Tina4Api);
+    }
+    static resolveRoutes(path, target, method: string = 'GET', data = null) {
+        History.addHistory (path, target, method);
+        return new Router(path, target, method, data).run();
+    }
+    static getFileExtension(filename) {
+        let split = filename.trim().split('.');
+        return split[split.length - 1];
+    }
+    static renderTemplate(content, params, callback) {
+        if (this.getFileExtension(content) == 'twig') {
+            try {
+                Twig.twig(
+                    {
+                        id: content,
+                        href: `/templates/${content}`,
+                        async:true,
+                        load: (template) => {
+                            console.log(`Template loaded: `, template, params);
+                            callback(template.render(params));
+                        }
+                    });
+            }
+            catch(exception) {
+                callback( Twig.twig({ref: content}).render(params));
+            }
+        } else {
+            let template = Twig.twig({data: content});
+            callback( template.render(params));
+        }
+        return false;
+    }
+}

package/tina4/components/Tina4Api.ts ADDED Viewed

@@ -0,0 +1,12 @@
+import {Globals} from "../Globals";
+export class Tina4Api extends HTMLElement {
+    constructor() {
+        // Always call super first in constructor
+        super();
+        let api = {};
+        api['url'] = this.getAttribute('url');
+        api['token'] = this.getAttribute('token');
+        Globals.set('api', api);
+    }
+}

package/tina4/components/Tina4Config.ts ADDED Viewed

@@ -0,0 +1,9 @@
+export class Tina4Config extends HTMLElement {
+    constructor() {
+        // Always call super first in constructor
+        super();
+        // write element functionality in here
+        console.log ('Here!', this.getAttribute('name'));
+    }
+}

package/tina4.ts ADDED Viewed

@@ -0,0 +1,4 @@
+import {Tina4} from "./tina4/Tina4";
+Tina4.initialize({defaultTarget: 'root'});
+import "./src/routes/**";
+let tina4 = new Tina4();