dothtml 4.8.5 → 5.0.1

package/lib/node-polyfill.d.ts

@@ -0,0 +1,2 @@
+declare const _default: Node;
+export default _default;

package/lib/observable-array.d.ts

@@ -0,0 +1,49 @@
+export default function ObservableArray(items: any): void;
+/**
+
+(function testing() {
+
+  var x = new ObservableArray(["a", "b", "c", "d"]);
+
+  console.log("original array: %o", x.slice());
+
+  x.addEventListener("itemadded", function(e) {
+    console.log("Added %o at index %d.", e.item, e.index);
+  });
+
+  x.addEventListener("itemset", function(e) {
+    console.log("Set index %d to %o.", e.index, e.item);
+  });
+
+  x.addEventListener("itemremoved", function(e) {
+    console.log("Removed %o at index %d.", e.item, e.index);
+  });
+ 
+  console.log("popping and unshifting...");
+  x.unshift(x.pop());
+
+  console.log("updated array: %o", x.slice());
+
+  console.log("reversing array...");
+  console.log("updated array: %o", x.reverse().slice());
+
+  console.log("splicing...");
+  x.splice(1, 2, "x");
+  console.log("setting index 2...");
+  x[2] = "foo";
+
+  console.log("setting length to 10...");
+  x.length = 10;
+  console.log("updated array: %o", x.slice());
+
+  console.log("setting length to 2...");
+  x.length = 2;
+
+  console.log("extracting first element via shift()");
+  x.shift();
+
+  console.log("updated array: %o", x.slice());
+
+})();
+
+ */ 

package/lib/style-builder.d.ts

@@ -0,0 +1,3 @@
+import IDotCss from "./i-dotcss";
+declare const dotcss: IDotCss;
+export default dotcss;

package/package.json

@@ -1,19 +1,22 @@
 {
   "name": "dothtml",
-  "version": "4.8.5",
+  "version": "5.0.1",
   "description": "DOThtml is a client-side framework for building single-page applications.",
-  "main": "lib/dothtml.min.js",
-  "dependencies": {},
+  "main": "lib/dothtml.js",
   "devDependencies": {
     "@babel/preset-env": "^7.14.5",
     "@testing-library/jest-dom": "^5.13.0",
+    "copyfiles": "^2.4.1",
     "esm": "^3.2.25",
     "jest": "^27.0.6",
+    "ts-jest": "^27.1.4",
+    "ts-loader": "^9.2.8",
+    "typescript": "^4.6.3",
     "webpack": "^5.49.0",
-    "webpack-cli": "^4.7.2"
+    "webpack-cli": "^4.9.2"
   },
   "scripts": {
-    "test": "webpack & jest",
+    "test": "npm run build & jest",
     "build": "webpack"
   },
   "repository": {
@@ -23,6 +26,9 @@
   "keywords": [
     "html",
     "page",
+    "dynamic",
+    "javascript",
+    "typescript",
     "web",
     "builder",
     "generation",

package/readme.md

@@ -5,7 +5,8 @@ This project is a work in progress with several phases:
 1. Basic web building framework in JavaScript. ✅
 2. Provide some JQuery-like syntax and functionality. ✅
 3. Add routing and components. ✅
-4. Bridge the gap between DOThtml and modern frameworks, like Vue. 🔲
-5. Take over the world. 🔲
+4. Bridge the gap between DOThtml and modern frameworks, like Vue. ✅
+5. Lots of testing, tweaking, documentation. 🔲
+6. Take over the world. 🔲
 
 Special thanks to [dosy](https://www.npmjs.com/~dosy) for giving me the module on NPM. Please check out ViewFinderJs - [a remote isolated browser with co-browsing](https://github.com/i5ik/ViewFinderJS).

package/src/{arg-callback-obj.js → arg-callback-obj.ts}

@@ -1,13 +1,20 @@
+import { IDotDocument } from "./i-dot";
 
-export class ArgCallback{
-    constructor(element, value){
+export abstract class ArgCallback{
+    el: Element;
+    f: (content?: any, index?: number)=>string;
+
+    constructor(element: Element, value: (content?: any, index?: number)=>string){
         this.el = element;
         this.f = value;
     }
+
+    abstract updateContent(dot: IDotDocument, propVal?: any);
 }
 
 export class AttrArgCallback extends ArgCallback{
-    constructor(element, attributeName, value){
+    attr: string;
+    constructor(element: Element, attributeName: string, value: (content?: any)=>string){
         super(element, value);
         this.attr = attributeName;
     }
@@ -18,16 +25,17 @@ export class AttrArgCallback extends ArgCallback{
 }
 
 export class ContentArgCallback extends ArgCallback{
-    constructor(element, content){
+    constructor(element: Element, content: ()=>string){
         super(element, content);
     }
 
-    updateContent(dot, propVal){
+    updateContent(dot, propVal: string){
         dot(this.el).empty().h(this.f(propVal));
     }
 }
 
 export class ArrayArgCallback extends ArgCallback{
+    dotTarget: IDotDocument;
     constructor(dotTarget, content){
         super(null, content);
         this.dotTarget = dotTarget;
@@ -37,6 +45,10 @@ export class ArrayArgCallback extends ArgCallback{
 }
 
 export class ConditionalArgCallback extends ArgCallback{
+    startNode: Node;
+    endNode: Node;
+    condition: ()=>boolean | boolean;
+    lastValue: boolean;
     constructor(startNode, endNode, content, condition){
         super(null, content);
         this.startNode = startNode;
@@ -61,4 +73,4 @@ export class ConditionalArgCallback extends ArgCallback{
             }
         }
     }
-}
+}

package/src/built-in-components/nav-link.ts

@@ -0,0 +1,21 @@
+import Component from "../component";
+import dot from "../dot";
+import { DotContent } from "../i-dot";
+
+// TODO: make text and links mutable by making them properties.
+export class NavLink extends Component{
+	content: DotContent;
+	hRef: string;
+	constructor(content: DotContent, href: string){
+		super();
+		this.content = content;
+		this.hRef = href;
+	}
+
+	builder() {
+		return dot.a(this.content).hRef(this.hRef).onClick(e => {
+			e.preventDefault();
+			dot.navigate(this.hRef);
+		});
+	}
+}

package/src/built-in-components/router.ts

@@ -0,0 +1,315 @@
+// ROUTING:
+// TODO: Put this in the register hook for router.
+
+import Component from "../component";
+import dot from "../dot";
+import ERR from "../err";
+
+
+
+
+interface RouterParams{
+	autoNavigate: boolean;
+	onNavigateInit: Function;
+	onError: Function;
+	onResponse: Function;
+	onComplete: Function;
+	routes: Array<{
+		path: string
+	}>;
+}
+
+export default class DotRouter extends Component{
+
+	// TODO: Test to make sure allRouters get cleared when a nested router gets deleted.
+	static allRouters: {[key: string]: DotRouter} = {}; 
+	static routerId = 1;
+	static mayRedirect = false;
+
+	static _get(url, success, fail){
+		var xhttp = new XMLHttpRequest();
+		xhttp.onreadystatechange = function() {
+			if(this.readyState == 4){
+				if (this.status == 200) {
+					success && success(this);
+				}
+				else{
+					fail && fail(this);
+				}
+			}
+		};
+		xhttp.open("GET", url, true);
+		xhttp.send();
+	}
+
+	static routerEventSet = false;
+	static setupPopupFunction(){
+		!DotRouter.routerEventSet && (DotRouter.routerEventSet = true) ? window.onpopstate = function(e){
+			if(e.state){
+				dot.navigate(e.state.path, true);
+				document.title = e.state.pageTitle;
+			}
+		} : 0;
+	}
+
+	id: number = 0;
+	outlet: Element = null;
+	navId: number = 0;
+	currentRoute: string = null;
+	currentParams: RouterParams = null;
+	params: RouterParams;
+	routesAndSegments: Array<{
+		path: string,
+		segments: string[]
+	}> = [];
+
+	constructor(params: RouterParams){
+		super();
+		this.params = params;
+	}
+
+	/**
+	 * TODO: convert to interface.
+	 * @param {Object} params - Parameters.
+	 * @param {Array.<{path: string, title: string, component: Object}>} params.routes - Array of routes.
+	 * @param {boolean} params.autoNavigate - Router will automatically navigate when outlet is created.
+	 * @param {Function} params.onNavigateInit - Occurs before any request is sent, and before the router outlet is emptied.
+	 * @param {Function} params.onError - Occurs in the event of an HTTP error.
+	 * @param {Function} params.onResponse - Occurs after a successful HTTP response, but before rendering.
+	 * @param {Function} params.onComplete - Occurs after an uncancelled route completes without an error.
+	 */
+	builder() {
+		let t = this;
+
+		if(!t.params || !t.params.routes) ERR("R");;
+		t.routesAndSegments = t.params.routes.map(r => {
+			if(r.path === null || r.path === undefined) ERR("R");
+			return { path: r.path, segments: r.path.split("/") };
+		});
+		
+		//t.navigate = function(p, nh, f){return routerNavigate.call(t, p, nh, f)};
+		
+		
+		if(t.params.autoNavigate === undefined) t.params.autoNavigate = true;
+		var o = dot.el("dothtml-router");
+		t.outlet = o.getLast();
+		t.id = DotRouter.routerId++;
+		DotRouter.allRouters[t.id] = t;
+		// This use to be here, but not sure what the point of it is anymore. It's not used anywhere.
+		// t.outlet.dothtmlRouterId = t.id;
+		return o;
+	}
+
+	registered(): void {
+		
+	}
+
+	ready(): void {
+		// If there is a route left inside the route queue
+		DotRouter.setupPopupFunction();
+		
+		// TODO: this method is messed up. Params might not be set when replaceState is called.
+		if(this.params.autoNavigate){
+			DotRouter.mayRedirect = true;
+			var params = this.navigate(window.location.pathname + (window.location.hash || ""), true);
+			DotRouter.mayRedirect = false;
+		}
+
+		if(history.pushState) history.replaceState({"pageTitle":params.title || document.title, "path": params.path}, "", params.path);
+		else window.location.hash = params.path;
+	}
+
+	deleting(): void {
+		delete DotRouter.allRouters[this.id];
+	}
+
+	navigate(path: string, noHistory: boolean = false, force: boolean = false){
+		let t = this;
+		//console.log("NAVIGATING", path);
+		// Step 1: parse the path into a route queue:
+		path = path || "";
+		if(typeof path != "string") path = path + "";
+		var hashPath = path;
+		if(path.indexOf("#") != -1) hashPath = path.split("#")[1];
+		
+		var hashParts = path.split("#");
+		var allQueues = [];
+		
+		// Route navigating.
+		var routeQueue = hashParts[0].split("?")[0].split("/");
+		routeQueue[0] === "" ? routeQueue.shift() : 0;
+		allQueues.push(routeQueue);
+
+		// Hash navigating.
+		var tryHashQueue = hashParts.length > 1 ? hashParts[1].split("/") : null;
+		tryHashQueue ? ((tryHashQueue[0] === "" ? tryHashQueue.shift() : 0)) : 0;
+		tryHashQueue ? ((routeQueue.length > 1 ? allQueues.push(tryHashQueue) : allQueues.unshift(tryHashQueue))) : 0;
+
+		var cancel = false;
+		var navParams = {
+			cancel: function(){
+				cancel = true; 
+				navParams.wasCancelled = true;
+			},
+			element: t.outlet,
+			httpResponse: null,
+			isNew: true,
+			params: null,
+			path: path,
+			title: null,
+			wasCancelled: false
+		};
+
+		// Step 2: determine the last router that is correctly loaded.
+
+		// var deepestRouter = null;
+		var bestRoute = null;
+		// Loop through the router stack from start to finish to find the deepest router and the best route to take.
+		// for(var i = 0; i < routerOutletStack.length; i++){
+
+		// var candidate = routerOutletStack[i];
+		// Find the an available route that matches.
+		// bestRoute = null;
+		for(var q in allQueues){
+			var Q = allQueues[q];
+			var rFound = false;
+			for(var r in t.routesAndSegments){
+				rFound = true;
+				var nextRoute = t.routesAndSegments[r];
+				var prms = {};
+				var rs = 0;
+				var ps = 0;
+				var lastRn = null;
+				while(1){
+					var rSn = nextRoute.segments[rs] || null;
+					var pSn = Q[ps] || null;
+					if(rSn === null && pSn === null) break;
+					if(rSn === null && pSn !== null || rSn !== null && pSn === null) {
+						rFound = false;
+						break;
+					}
+					if(rSn === null && lastRn == "*") rSn = "*";
+
+					if(rSn == pSn || rSn == "+" || rSn == "*"){ // It's the route, or it's a wildcard.
+						rs++;
+					}
+					else if(rSn.length > 2 && rSn.charAt(0) == "{" && rSn.charAt(rSn.length - 1) == "}"){ // It's a parameterized route.
+						rs++;
+						prms[rSn.substring(1, rSn.length - 1)] = pSn;
+					}
+					else if(lastRn != "*"){ // If the route doesn't match but the previous term was a super-wildcard, do nothing. Else, break.
+						rFound = false;
+						break;
+					}
+					ps++;
+					lastRn = rSn;
+				}
+				if(rFound){
+					bestRoute = nextRoute;
+					navParams.params = prms;
+					break;
+				}
+			}
+			if(rFound){
+				if(Q == routeQueue) {
+					if(!history.pushState && DotRouter.mayRedirect) {
+						window.location.hash = path;
+						window.location.pathname = "/";
+						return;
+					}
+					break;
+				};
+				if(Q == tryHashQueue) {
+					path = hashPath;
+					navParams.path = path;
+					if(history.pushState) {
+						window.location.hash = "";
+						history.replaceState({"pageTitle":document.title, "path": path}, document.title, path);
+					}
+					break;
+				};
+			}
+		}
+
+		navParams.isNew = !(!force && t.currentRoute == bestRoute && (!t.currentParams || t.currentParams == navParams.params || JSON.stringify(t.currentParams) === JSON.stringify(navParams.params)));
+		
+		t.params.onNavigateInit && t.params.onNavigateInit(navParams);
+
+		if(!navParams.isNew || cancel) return navParams;
+		t.currentRoute = bestRoute;
+		t.currentParams = navParams.params;
+
+		
+		var ro = t.outlet;
+		dot(ro).empty();
+		var navId = ++t.navId;
+
+
+		//if(deepestRouter == null) return this;
+		if(routeQueue.length == 0) return navParams;
+		if(bestRoute == null) return navParams;
+
+		navParams.title = bestRoute.title;
+
+		if(typeof bestRoute.component == "string"){
+			DotRouter._get(bestRoute.component, function(result){
+				var text = result.responseText;
+				navParams.httpResponse = result;
+				if(navId != t.navId) return navParams;
+				t.params.onResponse && t.params.onResponse(navParams);
+				if(cancel) return navParams;
+				if(bestRoute.component.split("?")[0].split("#")[0].toLowerCase().indexOf(".js") == bestRoute.component.length - 3){
+					try{
+						text = Function("var exports=null,module={},route=arguments[0];" + text + "\r\nreturn module.exports || exports;")(navParams);
+					}
+					catch(e){
+						//e.fileName = bestRoute.component;
+						console.error(e);
+					}
+				}
+				dot(ro).h(text);
+				t.params.onComplete && t.params.onComplete(navParams);
+			}, function(result){
+				navParams.httpResponse = result;
+				t.params.onError && t.params.onError(navParams);
+			});
+		}
+		else{
+			dot(ro).h(bestRoute.component.call(dot, navParams));
+			t.params.onComplete && t.params.onComplete(navParams);
+		}
+
+		return navParams;
+	}
+}
+
+// Extend dot.
+dot.navigate = function(path: string, noHistory: boolean = false, force: boolean = false){
+
+	DotRouter.setupPopupFunction();
+
+	var K = Object.keys(DotRouter.allRouters);
+	var lastNavParams: {[key: string]: unknown} = {};
+	var bestTitle = document.title;
+	for(var k = 0; k < K.length; k++){
+		var kk = K[k];
+		var r = DotRouter.allRouters[kk];
+		if(r) {
+			var currentNavParams = r.navigate(path, noHistory, force);
+			if(currentNavParams.isNew && !currentNavParams.wasCancelled){
+				lastNavParams = currentNavParams;
+				bestTitle = (lastNavParams.title as string) || bestTitle;
+			}
+		}
+	}
+
+	try{
+		if(lastNavParams && !noHistory){
+			//if(history.replaceState) history.replaceState({"pageTitle":title, "path": path}, title, path);
+			if(history.pushState) history.pushState({"pageTitle":bestTitle, "path": lastNavParams.path}, bestTitle, (lastNavParams.path as string));
+			else window.location.hash = (lastNavParams.path as string);
+		}
+	}catch(e){}
+
+	return this;
+}