newhelper-js 2.1.1 → 2.1.4

package/newHelper.js

@@ -1,327 +1,720 @@
-_={};
-_.ver='2.1';
-_.link={
-	basePage:()=>{},
-	defTitle:'',
-	actions:{},
-	commands:{},
-	_cmd:[],
-
-	_i: true,
-	compile:()=>location.search.replace('?','').split('&'),
-	set(page,title=_.link.defTitle){
-		if (title) _.$.D.title=title;
-		if (!this._i){
-			let link=this.compile();
-			link[0]=page;
+/*
+ * Перед вами код newHelper.js версии 2.1.4, он построен на базе фабрики
+ * Которая начинается с Intl.newHelper=function(){...};
+ * Причина использоватся Intl.newHelper банально проста
+ * Если я сейчас засираю глобалскоуп одной полу гибкой переменной
+ * То почему бы не начать отказываться от засирания глобал скоупа как такового
+ * И да, для инициализации ньюхелпера реально нужно писать
+ * yourVariable = Intl.newHelper()
+ * 
+ * Стиль комментариев
+ * FIXME - странное поведение функции, которое желательно бы переделать
+ * ??? - требует уточнения
+ * !!! - обратите внимание
+ * 
+ * ???: рассмотреть переход на es6 экспорт вместо вкладывания фабрики в Intl
+ * 
+ * ???: Последний глобальный эвент лисенер можно вынести внутрь _.link.get()
+ * 
+ * Новые модули, готовятсяк релизу в 2.2
+ * их апи может быть чуть чуть нестабильно:
+ * form
+ * tables
+ * drag (портирован из окон)
+ * pipe/pipeAsync
+ */
+
+Intl.newHelper=function() {let _ = {
+link: {
+	/*
+	 * МОДУЛЬ ССЫЛОК
+	 * 
+	 * Работает по принципу [ссылка, команды...]
+	 * Пример: ?page=home&debug&lang=ru
+	 *          ^^^^^^^^  ^^^^^  ^^^^^^
+	 *          страница  команды
+	 * 
+	 * В процессе разработки ядра 2.0 в Object hub я понял
+	 * Что команды могут быть очень полезными для отладки
+	 * Но в теории на них можно повешать все модальные и прочие действия
+	 * 
+	 * !!!: в функции get() работает весь роутинг, в т.ч. вложенный для страниц
+	 */
+	basePage: ()=>{},
+	defTitle: '',
+	actions: {},
+	commands: {},
+
+	_i: true, // _i - блокировщик pushState в set()
+	_cmd: [],
+	compile: ()=>location.search.replace('?','').split('&'),
+	set(page, title = this.defTitle) {
+		if (title) document.title = title;
+		if (!this._i) {
+			let link = this.compile();
+			link[0] = page;
 			history.pushState(null,null,'?'+link.join('&'));
 		}
-		this._i=false;
+		this._i = false;
 	},
-	add(cmd){
-		let link=this.compile();
-		if (!link.includes(cmd)){
+	add(cmd) {
+		let link = this.compile();
+		if (!link.includes(cmd)) {
 			link.push(cmd);
 			this._cmd.push(cmd);
 			history.replaceState(null,null,'?'+link.join('&'));
 		}
 	},
-	remove(cmd){
-		let link=this.compile();
+	remove(cmd) {
+		let link = this.compile();
 		if (link.includes(cmd)){
-			let c=this._cmd;
+			let c = this._cmd;
 			link.splice(link.indexOf(cmd),1);
 			c.splice(c.indexOf(cmd),1);
 			history.replaceState(null,null,'?'+link.join('&'));
 		}
 	},
-	get(){
-		let cfg=_.link,
-			links=this.compile(),
-			[fKey,fVal]=links[0].split('='),
-			cmds=links.slice(1);
+	get() {
+		/*
+		 * Страницы бросают ошибку чтобы вызвать базовую страницу
+		 * Команды тем временем так не делают
+		 * Потому что сломанная команда не так страшна как сломанная страница
+		 * 
+		 * При popstate команды берутся из хранилища _cmd, вместо самой ссылки
+		 * Сделано это для переноса команд при прыжках по истории
+		 */
+		let links = this.compile(),
+			[ firstKey, fisrtValue ] = links[0].split('='),
+			cmds = links.slice(1);
 		try {
-			let dirs=fKey.split('/'),
-				dir=cfg.actions,
-				main=dir[fKey];
-			if (!fKey.includes('/')){
-				main(fVal);
+			let dirs = firstKey.split('/'),
+				dir = this.actions,
+				main = dir[firstKey];
+			if (!firstKey.includes('/')) {
+				main(fisrtValue);
 			} else {
 				for (let p of dirs){
-					let kDir=dir[p+'/'];
+					let kDir = dir[p+'/'];
 					if (kDir)
-						dir=kDir;
+						dir = kDir;
 					else{
-						dir[p](fVal);
+						dir[p](fisrtValue);
 						break;
 					}
 				}
 			}
-		}catch(e){
-			_.link.basePage();
+		} catch (e) {
+			this.basePage();
 			throw e;
 		}
-		_.link._cmd=cmds;
-		cmds.forEach(kPre=>{
-			let [key,val]=kPre.split('=');
-			let cmd=cfg.commands[key];
+		this._cmd = cmds;
+		cmds.forEach(cmdPre => {
+			let [ key, value ] = cmdPre.split('=');
+			let cmd = this.commands[key];
 			if (cmd)
-				cmd(val);
+				cmd(value);
+			else 
+				console.error(new Error(`command '${cmd}' doesn't exist!`))
 		});
 	},
-};
-_.lazy={
-	loaded:{},
-	load(url,...args){
-		let key=url.split('?')[0],
-			state=this.loaded,
-			c=state[key];
-
-		if (c=== true) return Promise.resolve(args);
-		if (c instanceof Promise) return c.then(()=>args);
-
-		let pr=new Promise((resolve,reject)=>{
-			let scr=_.$.D.createElement('script');
-			scr.src=url;
-			scr.onload=()=>{
-				state[key]=true;
+},
+lazy: {
+	/*
+	 * МОДУЛЬ ЛЕНИ
+	 * 
+	 * Создаёт в глобальной области видимости прокси функции
+	 * Вызывающие загрузку скрипта с внещним модулем
+	 * Был сделан через глобальную область, так намного проще создавать лень
+	 * 
+	 * !!!: Функции обёртки в register() должны быть повешаны на window
+	 *      Иначе lazy._ провалится в рекурсию ошибок, не наступайте на мои грабли
+	 * 
+	 * ???: будет ли легче создавать лень в легаси проектах через es6 импорты
+	 */
+	loaded: {},
+	load(url, ...args) {
+		/*
+		 * ...args передаются в Promise.resolve(args)
+		 * Это позволяет делать _.lazy.load('script.js', 'данные', 'для', 'колбека')
+		 * И потом в .then((a,b,c)=>...) получать эти аргументы
+		 * 
+		 * Тройное состояние скрипта в lazy.loaded:
+		 * - true: уже загружен => сразу резолвим
+		 * - Promise: грузится сейчас => ждём тот же промис
+		 * - undefined: ещё не грузили => создаём новый промис
+		 * 
+		 * Это защита от двойной загрузки одного скрипта
+		 */
+		let key = url.split('?')[0], // отсекаем параметры, чтобы не дублировать
+			state = this.loaded;
+		if (state[key] === true)
+			return Promise.resolve(args);
+		if (state[key] instanceof Promise)
+			return state[key].then(()=>args);
+
+		let promise = new Promise((resolve,reject)=>{
+			let scr = document.createElement('script');
+			scr.src = url;
+			scr.onload = ()=>{
+				state[key] = true;
 				resolve(args);
 			};
-			scr.onerror=()=>{
+			scr.onerror = ()=>{
 				delete state[key];
 				reject(new Error('Failed to load '+url));
 			};
-			_.$.D.head.append(scr);
+			document.head.append(scr);
 		});
-		state[key]=pr;
-		return pr;
+		state[key] = promise;
+		return promise;
 	},
-	register(scr,funcs){
-		if (!Array.isArray(funcs)) return new Error('Array required for register');
-
-		for (let fn of funcs)
-			window[fn]=(...a)=>_.lazy._(scr,fn).then(f=>f(...a));
+	register(script, funcs) {
+		if (!Array.isArray(funcs))
+			return new Error('Array required for register');
 
-		console.info('_.lazy> Applied lazy '+scr+' with this functions:',funcs);
+		for (let fn of funcs) {
+			let fns = fn.split('.'),
+				method = fns.pop(),
+				path = fns.slice(0,-1);
+			console.log(path)
+			window[fn] = (...a)=>
+				this.lazy(script,fn).then(f=>f(...a));
+		}
 	},
-	async _(scr,fn){
-		let w=window,
-			wrpr=w[fn];
-		try{await _.lazy.load(scr)}
-		catch(e){throw e}
-		if (wrpr!== w[fn]) return w[fn];
+	async lazy(scr, fn) {
+		let w = window,
+			wrapper = w[fn];
+
+		await this.load(scr); // await короче Promise.then
+
+		if (wrapper !== w[fn])
+			return w[fn];
 		throw new Error(`Function ${fn} not loaded from ${scr}`);
 	},
-};
-_.lang={
-	addr:'',
-	vars:{},
-	main:{},
-
-	_:(i)=>` data-trans="${i}"`,
-	load(name){
-		return new Promise((resolve,reject)=>{
-			_.http.req('GET',_.lang.addr+name+'.json',false,{'Cache-Control':'no-cache,no-store,max-age=0'})
-				.then(data=>resolve(data));
-		})
-	},
-	parse:(packet,vars=_.lang.vars)=>
-		packet.replace(/\+([^+]+)\+/g,(match,key)=>{
-			let v=vars[key];
-			return v!== undefined ? v : match;
+},
+lang: {
+	/*
+	 * МОДУЛЬ ПЕРЕВОДОВ
+	 * 
+	 * По слухам этот модуль лучше чем многие i18n реализации
+	 * Всё потому что он из коробки умеет переводить страницу без перезагрузки
+	 * 
+	 * !!!: parse() обрабатывает ключи из vars и подставляет их значения
+	 * ваш +ключ+ становится значением, и это значение динамичное
+	 * Так удобнее отображать динамичные данные на сайтах
+	 * Например никнейм пользователя
+	 */
+	addr: '',
+	vars: {},
+	main: {},
+
+	load: name => fetch(_.lang.addr + name + '.json'),
+	parse: (packet, vars = _.lang.vars)=>
+		// ???: переделать под общий синтаксис типа {var}
+		packet.replace(/\+([^+]+)\+/g, (match, key)=>{
+			let v = vars[key];
+			return v !== undefined ? v : match;
 		}),
 	async replace(name){
-		const p=await this.load(name);
-		_.lang.main=JSON.parse(this.parse(p));
-		for (let e of _.$.qa('[data-trans]')){
-			let key=e.dataset.trans,
-				text=_.lang.main[key] || `<code>_.lang.get('${key}')</code>`,
-				tag=e.tagName;
-
-			if (tag=== 'IMG') e.src=text;
+		const packet = await this.load(name);
+		this.main = JSON.parse(this.parse(packet)); // без замены языка нельзя начинать перевод
+
+		for (let el of document.querySelectorAll('[data-trans]')) {
+			let key = el.dataset.trans,
+				text = this.main[key] || key,
+				tag = el.tagName;
+
+			if (tag === 'IMG')
+				el.src = text;
 			else if (['INPUT','TEXTAREA'].includes(tag))
-				e[e.type=== 'submit' ? 'value' :'placeholder']=text;
-			else e.innerHTML=text;
+				el[ el.type === 'submit' ? 'value' : 'placeholder' ] = text;
+			else
+				el.innerHTML = text;
 		}
-		return p;
-	},
-	from:i=>_.lang.main[i] || console.warn(`_.lang> ${i} is undefined`) || i,
-
-	text:		i=>_.lang._(i)+`>${_.lang.from(i)}<`,
-	submit:		i=>_.lang._(i)+`value="${_.lang.from(i)}">`,
-	input:		i=>_.lang._(i)+`placeholder="${_.lang.from(i)}">`,
-	textarea:	i=>_.lang._(i)+`placeholder="${_.lang.from(i)}"><`,
-	img:		i=>_.lang._(i)+`src="${_.lang.from(i)}"`,
-	win(i){
-		let text=_.lang.from(i),
-			dT=_.lang._(i);
-		if (text== null || text== ''){
-			text=i;
-			dT='';
+		// возвращаем для последующей обработки пакета, например для сохранения в _.storage
+		return packet;
+	},
+
+	/*
+	 * Получатели строки из пакета автоматически формируют HTML
+	 * Это позволяет заметно упростить работу с кодом
+	 * Вместо отдельного указания data-trans и lang.from
+	 * вы можете написать   `<h1${_.lang.text('yourKey')}/h1>`
+	 * А пришлось бы писать `<h1 data-trans="yourKey">${_.lang.from('yourKey')}</h1>`
+	 * Согласитесь, и короче и удобнее ведь?
+	 * Не повторяйте моих ошибок и примите это как победу в лотерее
+	 * 
+	 * !!!: если ключа в пакете нету, будет выброшен warning
+	 */
+	attr:		i=>` data-trans="${i}"`,
+	from:		i=>_.lang.main[i] || console.warn(`_.lang> ${i} is undefined`) || i,
+
+	text:		i=>_.lang.attr(i)+`>${_.lang.from(i)}<`,
+	submit:		i=>_.lang.attr(i)+`value="${_.lang.from(i)}">`, // <input type=submit>
+	input:		i=>_.lang.attr(i)+`placeholder="${_.lang.from(i)}">`,
+	textarea:	i=>_.lang.attr(i)+`placeholder="${_.lang.from(i)}"><`,
+	img:		i=>_.lang.attr(i)+`src="${_.lang.from(i)}"`,
+	winTitle(i) {
+		let text = this.from(i),
+			dataTrans = this.attr(i);
+		if (text == null || text == '') {
+			text = i;
+			dataTrans = '';
 		}
-		return `${dT}>${text}<`;
+		return `${dataTrans}>${text}<`;
 	},
-};
-_.http={
-	defaultHeaders:{},
-	req(method,url,data='',headers={},fileProgressElement=false){
-		return new Promise((resolve,reject)=>{
-			let xhr=new XMLHttpRequest();
+},
+http: {
+	/*
+	 * HTTP-КЛИЕНТ
+	 * 
+	 * Обычная обёртка нав XHR для быстрых запросов
+	 * Использую XHR вместо fetch
+	 * Мне нужен прогресс загрузки (fetch его не даёт)
+	 * Да и вам тоже не помешает прогресс загрузки
+	 * 
+	 * В defaultHeaders вы можете установить хедеры по умолчанию
+	 * Как пример Authorization: 'your token'
+	 * ???: добавить возможность игнорировать дефолтные хедеры
+	 */
+	defaultHeaders: {},
+	req(method, url, data = '', headers = {}, fileProgressElement = false) {
+		return new Promise((resolve, reject)=>{
+			let xhr = new XMLHttpRequest();
 
-			xhr.open(method,url);
+			xhr.open(method, url);
 
-			let allHeaders={..._.http.defaultHeaders,...headers};
+			let allHeaders = { ...this.defaultHeaders, ...headers };
 			for (let header in allHeaders)
-				xhr.setRequestHeader(header,allHeaders[header]);
+				xhr.setRequestHeader(header, allHeaders[header]);
 
+			// !!!: fileProgressElement ожидает <progress> элемент без min/max
+			// Потому что value от 0 до 1
 			if (fileProgressElement)
-				xhr.upload.onprogress=(e)=>{
-					if (e.lengthComputable){
-						let percentage=(e.loaded / e.total);
-						fileProgressElement.setAttribute('value',percentage);
+				xhr.upload.onprogress= e=>{
+					if (e.lengthComputable) {
+						let percentage = (e.loaded / e.total);
+						fileProgressElement.setAttribute('value', percentage);
 					}
 				};
 
-			xhr.onreadystatechange=()=>{
+			xhr.onreadystatechange= ()=>{
 				if (xhr.readyState=== 4)
-					if (xhr.status >= 200 && xhr.status < 300) resolve(xhr.response);
-					else reject(new Error(`${xhr.status} - ${xhr.statusText}`),xhr);
+					if (xhr.status >= 200 && xhr.status < 300)
+						resolve(xhr.response);
+					else 
+						reject(new Error(`${xhr.status} - ${xhr.statusText}`),xhr);
 			};
-			xhr.onerror=()=>reject(new Error('Network error'),xhr);
+			xhr.onerror = ()=>
+				reject(new Error('Network error'), xhr);
 
 			xhr.send(data);
 		});
 	},
-};
-_.$={
-	D: document,
+	get: (url, headers={})=>
+		_.http.req('GET', url, false, headers),
+	post: (url, data = '', headers = {}, fileProgressElement = false)=>
+		_.http.req('POST', url, data, headers, fileProgressElement)
+},
+html(strs, ...args) {
+	/*
+	 * Шаблонные строки в DOM
+	 * 
+	 * Позволяет писать _.html`<div>${content}</div>`
+	 * И получать настоящий DOM-элемент, а не строку
+	 * 
+	 * Почему через template?
+	 * - Скрипты не выполняются (никаких xss!)
+	 * - Можно создать несколько элементов разом
+	 * - Быстрее чем createElement для сложных структур
+	 * - Банально удобнее createElement для сложных древ
+	 */
+	let fullStr = '',
+		DOMs = [];
+	for (let i=0; i < args.length; i++) {
+		fullStr += strs[i];
+		let arg = args[i];
+		if (arg && arg.nodeType) {
+            fullStr += `<!--${DOMs.length}-->`;
+            DOMs.push(arg);
+		} else {
+            fullStr += arg;
+		}
+	}
+    fullStr += strs[strs.length - 1];
 
-	id:(i)=>_.$.D.getElementById(i),
-	q:(i,p=_.$.D)=>p.querySelector(i),
-	qa:(i,p=_.$.D)=>p.querySelectorAll(i),
+	const template = document.createElement('template');
+	template.innerHTML = fullStr;
+	const content = template.content;
 
-	on:(el,ev,fn,opts)=>el.addEventListener(ev,fn,opts),
-	off:(el,ev,fn,opts)=>el.removeEventListener(ev,fn,opts),
-};
-_.html=(strs,...args)=>{
-	let strF=[];
-	for (let i=0; i < args.length; i++)
-		strF.push(strs[i],args[i]);
-	strF.push(strs[strs.length - 1]);
-	strF=strF.join('').trim().replace(/\s+/g,' ');
-
-	const template=_.$.D.createElement('template');
-	template.innerHTML=strF;
-
-	const content=template.content;
-	if (content.children.length=== 1)
+	// для создания вложенности html элементов заменяем плейсхолдеры <!--${DOMs.length}-->
+	const it = document.createTreeWalker(
+		content,
+		NodeFilter.SHOW_COMMENT
+	);
+	let node, i = 0;
+	for (; node = it.nextNode(); )
+		node.replaceWith(DOMs[i++]);
+
+	if (content.children.length === 1)
 		return content.firstChild;
 	return content;
-};
-_.storage=class{
-	constructor(strg,name){
-		this._=strg;
-		this.n=name;
+},
+pipe(data, ...fns) {
+	/*
+	 * КАСТОМНЫЙ PIPE ОПЕРАТОР
+	 * 
+	 * Никакой магии, обычный синхронный |>
+	 * для мутации таблиц будет самое то
+	 */
+	for (const fn of fns)
+		data = fn(data);
+	return data;
+},
+async pipeAsync(data, ...fns) {
+	/*
+	 * КАСТОМНЫЙ PIPE ОПЕРАТОР 2
+	 * 
+	 * Никакой магии, обычный асинхронный |>
+	 * для получения и мутации данных сойдёт
+	 */
+	for (const fn of fns) {
+		let waiter = await data;
+		data = await fn(waiter);
 	}
-	get=(key)=>this._.getItem(this.n+key);
-	set=(key,value)=>this._.setItem(this.n+key,value);
-	remove=(key)=>this._.removeItem(this.n+key);
-	clear=()=>Object.keys(this._)
-		.filter(k=>k.startsWith(this.n))
-		.forEach(k=>this._.removeItem(k));
-};
-_.err={
-	print:()=>{},
+	return data;
+},
+form: {
+	/*
+	 * АВТОСОХРАНЕНИЕ ФОРМ
+	 * 
+	 * Позволяет сохранять состояние формы на случай
+	 * Если в офисе внезапно выключат свет
+	 * 
+	 * ???: может сделать более полноценный модуль форм
+	 *      с встроенной валидацией, или чем нибуть ещё
+	 */
+	read(form) {
+		let data = {};
+		new FormData(form).forEach((value, key)=>{
+			if (data[key] !== undefined) {
+				if (!Array.isArray(data[key]))
+					data[key] = [data[key]];
+				else 
+					data[key].push(value);
+			} else
+				data[key] = value;
+		});
+		return data;
+	},
+	write(form, data) {
+		Object.entries(data).forEach(([key,value])=>{
+			let el = form.elements[key];
+			if (!el)
+				return;
+			if (el.length)
+				[...el].forEach((opt,i)=>{
+					let isCheckBox = 'selected';
+					if (['checkbox','radio'].includes(opt.type))
+						isCheckBox = 'checked';
+
+					let select = false;
+					if (Array.isArray(value)) {
+						if (value.includes(opt.value))
+							select = true;
+					} else if (opt.value == value)
+						select = true;
+
+					opt[isCheckBox] = select;
+				});
+			else
+				el.value = value;
+		});
+		return data;
+	},
+},
+tables(name, columns, raw, rowKey = 'ID', selection = false) {
+	/*
+	 * МОДУЛЬ АВТОТАБЛИЦ
+	 * 
+	 * Позволяет быстро генерировать таблицы с особыми свойствами
+	 * 
+	 * !!!: в columns параметр mutate работает как парсер значения
+	 * !!!: сортируйте сами путём мутации data, javascript как никак умеет
+	 *      или вообще сортируйте на сервере
+	 * 
+	 * ???: рассмотреть переделку апи т.к. в текущей реализации гибкость слишком низкая
+	 */
+	if (!Array.isArray(raw))
+		raw = Object.values(raw);
+	let state = {
+		name: name,
+		columns: columns,
+		raw: raw,
+		rowKey: rowKey,
+		data: raw,
+		selected: new Set(),
+		elem: null,
+
+		build(elem) {
+			this.elem = elem;
+			this.render();
+			return this;
+		},
+
+		getSelected() {
+			return [ ...this.selected ];
+		},
+
+		render() {
+			if (!this.elem) return;
+			let html = '';
+			html += `<thead><tr>`;
+			if (selection)
+				html += `<th></th>`;
+			for (let c of this.columns)
+				html += `<th>${c.title || c.key}</th>`;
+			html += `</tr></thead>`;
 
-	errors:{},
+			html += `<tbody>`;
+			for (let row of this.data) {
+				let id = row[this.rowKey];
+				let sel = this.selected.has(id) ? `selected` : ``;
+
+				html += `<tr data-id="${id}" class="${sel}">`;
+				if (selection)
+					html +=
+					`<td><input type=checkbox name="${this.name}" value="${id}" /></td>`;
+				for (let c of this.columns) {
+					let v = row[c.key];
+					if (c.mutate)
+						v = c.mutate(row);
+					html += `<td>${v ?? ``}</td>`;
+				}
+				html += `</tr>`;
+			}
+			html += `</tbody>`;
+
+			this.elem.innerHTML = `<table>${html}</table>`;
+			this.elem.firstChild.addEventListener('change', e => {
+				let targ = e.target;
+				if (targ.type !== 'checkbox' || targ.name !== this.name)
+					return;
+
+				let id = targ.value;
+
+				if (targ.checked)
+					this.selected.add(id);
+				else
+					this.selected.delete(id);
+			})
+		}
+	};
+	return state;
+},
+storage: class {
+	constructor(storage, name) {
+		this._ = storage;
+		this.n = name;
+	}
+	get = key=>			this._.getItem(this.n + key);
+	set = (key, value)=>this._.setItem(this.n + key, value);
+	remove = key=>		this._.removeItem(this.n + key);
+	clear = ()=>Object.keys(this._)
+		.filter(k => k.startsWith(this.n))
+			.forEach(k => this._.removeItem(k));
+},
+err: {
+	init() {
+		window.addEventListener('error',_.err.handleGlobal);
+		window.addEventListener('unhandledrejection',_.err.handleRejection);
+	},
+	print: ()=>{},
+
+	errors: {},
 	_c: 0,
-	log(err){
+	log(err) {
 		_.err.print(_.err._c,err);
 		_.err._c++;
 		_.err.errors[_.err._c]=err;
 	},
 	handleGlobal(message,source,line,column,error){
 		console.error(message,source+':'+line+':'+column,error)
-		_.err.log(message+`\n IN ${source} ON LINE ${line} IN COLUMN ${column}`);
+		_.err.log(message + `\n IN ${source} ON LINE ${line} IN COLUMN ${column}`);
 	},
 	handleRejection(e){
-		const err=e.reason || e;
+		const err = e.reason || e;
 		console.error(err);
 		_.err.log(
 			`PROMISE ERROR\n`+
 			`${e.stack || e}`
 		);
 	},
-};
-_.hotkeys={
-	keys:{},
-	_holds:new Set(),
-	_:false,
+},
+hotkeys: {
+	/*
+	 * ГОРЯЧИЕ КЛАВИШЫ
+	 * 
+	 * Реализует самый настоящий press/release интерфейс
+	 * Если верить минификатору, после сжатия весит всего 790 байт
+	 * 
+	 * В Object Hub уже есть текстовый редактор горячих клавиш
+	 * На базе этого движка, конечно давать textarea с js кодом...
+	 * Не самая безопасная затея, но как факт кастомизация широчайшая
+	 * 
+	 * _holds работает не на массивах а на new Set()
+	 * Сеты работают намного быстрее при большом объёме данных
+	 * Вы же не хотите чтобы у вас тормозил поток с 100+ хоткеями
+	 * Из-за простого печатанья?
+	 */
+	keys: new Map(),
+	_holds: new Set(),
+	_: false,
 
-	_parse:combo=>combo.split('+').map(k=>k.trim()),
+	_parse: combo => combo.split('+').map(k=>k.trim()),
 	_match(keys) {
+		// Нужно сверять все клавишы, это же КОМБИНАЦИЯ а не отдельные куски
 		for (let k of keys) if (!this._holds.has(k)) return false;
 		return true;
 	},
 	_init() {
-		if (this._) return;
-		_.$.on(_.$.D,'keydown',e=>{
-			this._holds.add(e.code);
+		if (this._)
+			return;
+		document.addEventListener('keydown', e=>{
+			this._holds.add(e.code);// key зависит от раскладки (на Qwerty 'KeyZ' — это 'z', на Йцукен — 'я')
+			// code даёт физическое положение клавиши, что важно для игр и хоткеев, и в целом универсальнее
 
-			for (let combo in this.keys) {
-				let h=this.keys[combo];
-				if (!this._match(h.keys)) continue;
-
-				if (h.press && !h.active) {
-					h.active=true;
-					h.press(e);
+			for (let hotkey of this.keys.values()) {
+				if (!this._match(hotkey.keys))
+					continue;
+				if (hotkey.press && !hotkey.active) {
+					hotkey.active = true; // active защищает от множественных срабатываний
+					hotkey.press(e);
 				}
 			}
 		});
-		_.$.on(_.$.D,'keyup',e=>{
+		document.addEventListener('keyup', e=>{
 			this._holds.delete(e.code);
 
-			for (let combo in this.keys) {
-				let h=this.keys[combo];
-				if (h.active && !this._match(h.keys)) {
-					h.active=false;
-					h.release(e);
+			for (let hotkey of this.keys.values()) {
+				if (hotkey.active && !this._match(hotkey.keys)) {
+					hotkey.active=false;
+					hotkey.release(e);
 				}
 			}
 		});
-		_.$.on(window,'blur',()=>{
-			for (let combo in this.keys) {
-				let h=this.keys[combo];
-				if (h.active) {
-					h.active=false;
-					h.release();
+		window.addEventListener('blur', e=>{
+			/*
+			 * При переключении в другое окно автоматического keyup не будет
+			 * Поэтому сбрасываем всё принудительно, мало ли
+			 */
+			for (let hotkey of this.keys.values()) {
+				if (hotkey.active) {
+					hotkey.active = false;
+					hotkey.release();
 				}
 			}
 			this._holds.clear();
 		});
 		this._=true;
 	},
-	on(combo,press,release) {
+	on(combo, press, release) {
 		this._init();
-		let keys=this._parse(combo);
+		let keys = this._parse(combo);
 
-		this.keys[combo]={
+		this.keys.set(combo, {
 			keys,
+			// press/releace по умолчанию пустышки для сокращения синаксиса
 			press: press || (()=>{}),
 			release: release || (()=>{}),
 			active: false
-		};
+		});
 
 		return this;
 	},
 	off(combo) {
-		delete this.keys[combo];
+		this.keys.delete(combo);
 		return this;
-	}
-};
-_.win={
+	},
+},
+drag: {
+	_i: false,
+	active: new Map(),
+	prevent: e=>e.preventDefault(),
+	init(dragger, mover, onStart, onStop) {
+		let start=e=>{
+			// Проверяем куда нажали, если бы мы не проверяли,
+			// То драггер не дал бы нам нажать на кнопки или изменить имя окна
+			if (e.target.closest('button,input')) return;
+
+			this.prevent(e);
+
+			this.active.set(e.pointerId,{
+				x:e.clientX,
+				y:e.clientY,
+				mover:mover,
+				onStop:onStop
+			});
+
+			onStart?.(e);
+		};
+		if (!this._i) {
+			document.addEventListener("pointermove", (e) => this.move(e));
+			document.addEventListener("pointerup", (e) => this.stop(e));
+			document.addEventListener("pointercancel", (e) => this.stop(e));
+			this._i = true;
+		}
+		dragger.onpointerdown=start;
+		dragger.ontouchmove=this.prevent;
+	},
+	move(e) {
+		let p=this.active.get(e.pointerId);
+		if(!p) return;
+		this.prevent(e);
+
+		let dx=p.x - e.clientX,
+			dy=p.y - e.clientY;
+
+		p.x=e.clientX;
+		p.y=e.clientY;
+
+		let mov = p.mover;
+		mov.style.top=(mov.offsetTop - dy)+"px";
+		mov.style.left=(mov.offsetLeft - dx)+"px";
+	},
+	stop(e) {
+		this.active.get(e.pointerId)?.onStop?.(e);
+		this.active.delete(e.pointerId);
+	},
+},
+win:{
+	/* 
+	 * МОДУЛЬ ОКОН
+	 * если вы спросите почему ньюхелпер я отвечу
+	 * winBox.js это 35 килобайт, здесь же вы получаете в 25 килобайт
+	 * И более широкий движок окон и документацию уровня...
+	 * А у кого нибуть вообще есть такие подробные документации в вебе?
+	 * 
+	 * Реализует ограниченно-гибкий движок окон, функционал:
+	 * - открытие, разворот на весь экран, закрытие
+	 * - сворачивание в таскбар и разворчаивание
+	 * - нативный css-ресайз (resize:both)
+	 * - возможность двигать окна (работает на телефонах, я проверял)
+	 * - сохранение и загрузка окон по вашему выбору
+	 * 
+	 * !!!: _opn() и toggleFull() могут сломать ваши окна!
+	 * Эти функции высчитывают координаты окна, и размер окна с учётом padding'а
+	 * Ни за что не вешайте на ваши окна transform:translate()!
+	 * 
+	 * !!!: _opn() по умолчанию открывает окно по центру экрана
+	 *      Если не идёт восстановление через write()
+	 * ???: стоит ли открывать окно в центре, или лучше дать "дефолтную функцию" позиционирования
+	 * 
+	 * теперь мне надо вспомнить я рефакторил этот код 4 раза или 7 раз
+	 */
 	manager:false,
 	hider:false,
+	text:'',
 
 	winAttrs:'',
 	dragAttrs:'',
@@ -331,9 +724,9 @@ _.win={
 	hiderAttrs:'',
 	
 	defBtns:[
-		['–',w=>_.win.hide(w)],
-		['=',w=>_.win.toggleFull(w)],
-		['X',w=>_.win.close(w)],
+		['–',w=>w.hide()],
+		['=',w=>w.toggleFull()],
+		['X',w=>w.close()],
 	],
 
 	animOpen:'',
@@ -342,138 +735,125 @@ _.win={
 	animShow:'',
 	animFullOn:'',
 	animFullOff:'',
+	_ae:{once:true},
 
 	_ID(){
 		let id;
+		// Создаём случайный 6 символьный айди, чтобы каждый раз не совпадало
+		// !!!: в теории можно задать любой айди
+		// ???: проверить при скольки окнах генератор начинает тормозить
 		do id=Math.random().toString(36).substring(2,8);
-		while (_.wins[id]);
+		while (_.wins.has(id));
 		return id;
 	},
 	_winBtn(win,text,func){
-		let b=_.html`<button ${_.win.btnAttrs}>${text}</button>`;
-		_.$.on(b,'click',()=>func(win));
+		let b=_.html`<button ${this.btnAttrs}>${text}</button>`;
+		b.addEventListener('click',()=>func(win));
 		return b;
 	},
 	_hiderBtn(win){
-		let title=win.langs!== false ? _.lang.win('WINDOW-'+win.langs) : `>${win.name}<`,
-			b=_.html`<button id=hider${win.id} ${_.win.hiderAttrs}${title}/button>`;
-		_.$.on(b,'click',()=>_.win.show(win));
+		let title=win.langs!== false ? _.lang.winTitle(_.win.text+win.langs) : `>${win.name}<`,
+			b=_.html`<button id=hider${win.id} ${this.hiderAttrs}${title}/button>`;
+		b.addEventListener('click',()=>this.show(win));
 		return b;
 	},
-	_initWin(win){
-		let wEl=win.elem,
-			x1=0,y1=0,x2=0,y2=0,
-		startW=e=>{
-			let targ=e.target;
-			if (['BUTTON','INPUT'].includes(targ.tagName) || targ.closest('button,input')){
-				return;
-			}
-			_.win.manager.appendChild(wEl);
-
-			e.preventDefault();
-			x2=e.clientX || e.touches[0].clientX;
-			y2=e.clientY || e.touches[0].clientY;
-
-			_.$.D.onmouseup=_.$.D.ontouchend=stopW;
-
-			_.$.D.onmousemove=_.$.D.ontouchmove=moveW;
-		},
-		moveW=e=>{
-			e.preventDefault();
-			let cX=e.clientX || e.touches[0].clientX,
-				cY=e.clientY || e.touches[0].clientY;
-
-			x1=x2 - cX;
-			y1=y2 - cY;
-			x2=cX;
-			y2=cY;
-
-			wEl.style.top=(wEl.offsetTop - y1) + "px";
-			wEl.style.left=(wEl.offsetLeft - x1) + "px";
-		},
-		stopW=()=>{
-			['mouseup','touchend','mousemove','touchmove']
-			.forEach(e=>_.$.D['on'+e]=null)
-		},
-		drag=win.drag;
-		drag.onmousedown=drag.ontouchstart=startW;
-	},
+	_initWin: winState=>
+		_.drag.init(winState.drag, winState.elem, ()=>_.win.manager.appendChild(winState.elem)),
 	open(name,content='',customAttrs=''){
-		if (!_.win.manager || !_.win.hider)
-			throw new Error('Window managers not inited');
-		let winId=_.win._ID();
-		_.wins[winId]={};
-		let s=_.wins[winId];
-		s.id=winId;
-		s.name=name;
-		s.langs=name;
-		s.state='opened';
-		s.full=false;
-		s.inRename=false;
-		s.onUnfull={top:0,left:0,width:0,height:0,};
-		
-		s.setTitle = newTitle=>_.win.setTitle(s,newTitle);
-		s.toggleFull = e=>_.win.toggleFull(s);
-		s.close = e=>_.win.close(s);
-		s.hide = e=>_.win.hide(s);
-		s.show = e=>_.win.show(s);
-
-		let html =
-			_.html`<div id=${winId} ${_.win.winAttrs} ${customAttrs}>
+		let winId=this._ID(),
+		winState={
+			id:winId,
+			name:name,
+			langs:name,
+			state:'opened',
+			full:false,
+			inRename:false,
+			// Если окно новое, координаты полностью нулевые, 
+			// Нужно чтобы проверять создаётся ли окно и если да то задавать координаты
+			onUnfull:{top:0,left:0,width:0,height:0},
+			attrs:customAttrs,
+			elem:false,
+			drag:false,
+			content:false,
+		};
+		return this._opn(winState,content);
+	},
+	_opn(winState,content=''){
+		if (!this.manager || !this.hider) throw new Error('Window managers not inited');
+
+		let wId=winState.id,
+			html=
+			_.html`<div id=${wId} ${this.winAttrs} ${winState.attrs}>
 				<div style="display:flex;justify-content:space-between;align-items:center"
-				${_.win.dragAttrs} id=DRAGGER${winId}>
-					<span ${_.win.titleAttrs} id=title${winId}${_.lang.win('WINDOW-'+name)}/span>
-					<div id=btns${winId}></div>
+				${this.dragAttrs} id=DRAGGER${wId}>
+					<span ${this.titleAttrs} id=title${wId}${_.lang.winTitle(_.win.text+winState.name)}/span>
+					<div id=btns${wId}></div>
 				</div>
-				<div id=content${winId} style=overflow:auto;width:100%;height:100%>
-					${content.replace(/\{winId\}/g,winId)}
+				<div id=content${wId} style=overflow:auto;width:100%;height:100%>
+					${content.replace(/\{winId\}/g,wId)}
 				</div>
 			</div>`,
-			btns=_.$.q(`#btns${winId}`,html);
-		for(let b of _.win.defBtns) btns.append(_.win._winBtn(s,...b));
-
+			btns=html.querySelector(`#btns${wId}`);
+		for(let b of this.defBtns) btns.append(this._winBtn(winState,...b));
 		html.style.overflow='hidden';
 		html.style.resize='both';
 
-		let anim=_.win.animOpen;
+		let anim=this.animOpen;
 		if (anim)
-			_.$.on(html,'animationend',()=>html.classList.remove(anim),{ once: true })
-		_.win.manager.append(html);
-
-		let win=s.elem=_.$.id(winId),
-			c=_.$.id('content'+winId).getBoundingClientRect(), r=win.getBoundingClientRect(),
-			padX=r.width - c.width, padY=r.height - c.height;
-		s.drag=_.$.id('DRAGGER'+winId);
-		s.content=_.$.id('content'+winId);
-
-		if (!customAttrs.includes('top')) {
-			win.style.top=win.offsetTop - (win.offsetHeight / 2) + 'px';
-			win.style.left=win.offsetLeft - (win.offsetWidth / 2) + 'px';
-		}
-		if (!customAttrs.includes('width')) win.style.height=(win.offsetHeight - padX) + 'px';
-		if (!customAttrs.includes('height')) win.style.width=(win.offsetWidth - padY) + 'px';
+			html.addEventListener('animationend',()=>html.classList.remove(anim),this._ae);
+		winState.setTitle=nT=>_.win.setTitle(winState,nT);
+		winState.toggleFull=e=>_.win.toggleFull(winState);
+		winState.close=e=>_.win.close(winState);
+		winState.hide=e=>_.win.hide(winState);
+		winState.show=e=>_.win.show(winState);
+		this.manager.append(html);
 
-		_.$.on(s.drag,'dblclick',(e)=>{
+		let win=winState.elem=document.getElementById(wId),
+			contentRect=document.getElementById('content'+wId).getBoundingClientRect(),
+			windowRect=win.getBoundingClientRect(),
+			padX=windowRect.width - contentRect.width,padY=windowRect.height - contentRect.height;
+		winState.drag=document.getElementById('DRAGGER'+wId);
+		winState.content=document.getElementById('content'+wId);
+
+		if (winState.onUnfull.width === 0) {
+			// Здесь и задаются координаты...
+			// Мастера клин кода не выносите мне мозги прошу
+			// Оно же работает!!!
+			if (!winState.attrs.includes('top')) {
+				win.style.top=win.offsetTop - (win.offsetHeight / 2) + 'px';
+				win.style.left=win.offsetLeft - (win.offsetWidth / 2) + 'px';
+			}
+			if (!winState.attrs.includes('width')) win.style.height=(win.offsetHeight - padX) + 'px';
+			if (!winState.attrs.includes('height')) win.style.width=(win.offsetWidth - padY) + 'px';
+		} else
+			for (let pos in winState.onUnfull)
+				win.style[pos] = winState.onUnfull[pos] + 'px'
+
+		//this._initWin(winState);
+		this._initWin(winState);
+		winState.drag.addEventListener('contextmenu',(e)=>{
+			e.preventDefault();
 			if(e.target.closest('button')) return;
-			let wT=_.$.id('title'+winId);
-			if (!s.inRename){
-				wT.innerHTML=`<input ${_.win.renameAttrs} id=rename${winId} value="${wT.textContent}">`;
-				s.inRename=true;
+			let wT=document.getElementById('title'+wId);
+			if (!winState.inRename){
+				wT.innerHTML=`<input ${this.renameAttrs} id=rename${wId} value="${wT.textContent}">`;
+				winState.inRename=true;
 			}else{
-				_.win.setTitle(s,_.$.id('rename'+winId).value);
-				s.inRename=false;
+				this.setTitle(winState,document.getElementById('rename'+wId).value);
+				winState.inRename=false;
 			}
 		});
 
-		_.win._initWin(s);
+		if (winState.state === 'hidened') winState.hide();
 
-		return s;
+		_.wins.set(winState.id, winState);
+		return winState;
 	},
-	setTitle(win,newT){
-		win.langs=false;
-		win.name=newT;
-		let t=_.$.id('title'+win.id),
-			h=_.$.id('hider'+win.id);
+	setTitle(winState,newT){
+		winState.langs=false;
+		winState.name=newT;
+		let t=document.getElementById('title'+winState.id),
+			h=document.getElementById('hider'+winState.id);
 		t.innerHTML=newT;
 		t.removeAttribute('data-trans');
 		if (h){
@@ -481,19 +861,19 @@ _.win={
 			h.removeAttribute('data-trans');
 		}
 	},
-	toggleFull(win){
-		let wEl=win.elem,
+	toggleFull(winState){
+		let wEl=winState.elem,
 			ws=wEl.style,
 			wc=wEl.classList,
-			cont=_.$.id('content'+win.id).getBoundingClientRect(),
-			rect=wEl.getBoundingClientRect(),
-			padX=rect.width - cont.width,
-			padY=rect.height - cont.height,
-			aOn=_.win.animFullOn,
-			aOff=_.win.animFullOff,
+			contentRect=document.getElementById('content'+winState.id).getBoundingClientRect(),
+			windowRect=wEl.getBoundingClientRect(),
+			padX=windowRect.width - contentRect.width,
+			padY=windowRect.height - contentRect.height,
+			aOn=this.animFullOn,
+			aOff=this.animFullOff,
 			fd={
-				top: rect.top,	left: rect.left,
-				width: cont.width,	height: cont.height,
+				top: windowRect.top,	left: windowRect.left,
+				width: contentRect.width,	height: contentRect.height,
 			},
 			unful=()=>{
 				ws.top=old.top + 'px';
@@ -503,101 +883,160 @@ _.win={
 			},
 			doFul=()=>{
 				if (aOn) wc.remove(aOn);
-				win.full=true;
-				win.onUnfull=fd;
+				winState.full=true;
+				winState.onUnfull=fd;
 				ws.top=0;
 				ws.left=0;
 				ws.width=`calc(100% - ${padX}px)`;
 				ws.height=`calc(100% - ${padY}px)`;
-				win.drag.onmousedown=null;
-				win.drag.ontouchstart=null;
+				winState.drag.onpointerdown=null;
 			},
 			doUnful=()=>{
 				if (aOff) wc.remove(aOff);
 				unful();
-				win.full=false;
-				_.win._initWin(win);
+				winState.full=false;
+				this._initWin(winState);
 			},
-			old=win.onUnfull;
-		if (!win.full) {
+			old=winState.onUnfull;
+		if (!winState.full) {
 			if (aOn) {
 				wc.add(aOn);
-				_.$.on(wEl,'animationend',doFul,{ once: true });
+				wEl.addEventListener('animationend',doFul,this._ae);
 			}else doFul();
 		} else {
 			if (aOff) {
 				wc.add(aOff);
 				unful();
-				_.$.on(wEl,'animationend',doUnful,{ once: true });
+				wEl.addEventListener('animationend',doUnful,this._ae);
 			}else doUnful();
 		}
 	},
-	close(win){
-		let w=win.elem,
+	close(winState){
+		let w=winState.elem,
 			remover=()=>{
-				let drag=win.drag;
-				drag.onmousedown=null;
-				drag.ontouchstart=null;
+				let dr=winState.drag,D=document;
+				dr.onpointerdown=dr.ontouchmove=null;
+				// Удаляем обработчики висящие на документе
+				// Если их не удалять рано или поздно случится утечка памяти
+				// Я не знаю как я жил во времена 2.0 когда движок только появился
+				['move','up','cancel'].map(e=>D['onpointer'+e]=null);
 				w.remove();
-				delete _.wins[win.id];
+				_.wins.delete(winState.id);
 			};
 		if (w.style.display== 'none'){
-			_.$.id('hider'+win.id).remove();
+			document.getElementById('hider'+winState.id).remove();
 			remover();
 		}else{
-			let anim=_.win.animClose;
+			let anim=this.animClose;
 			if(anim){
 				w.classList.add(anim);
-				_.$.on(w,'animationend',remover,{ once: true });
+				w.addEventListener('animationend',remover,this._ae);
 			}else
 				remover();
 		}
 	},
-	hide(win){
-		let wEl = win.elem,
+	hide(winState){
+		let wEl=winState.elem,
 			wc=wEl.classList,
-			anim=_.win.animHide,
+			anim=this.animHide,
 			hider=()=>{
 				wEl.style.display='none';
 				if(anim)wc.remove(anim);
-				win.state='hidened';
-				_.win.hider.append(_.win._hiderBtn(win));
+				winState.state='hidened';
+				this.hider.append(this._hiderBtn(winState));
 			}
 		if(anim){
 			wc.add(anim);
-			_.$.on(wEl,'animationend',hider,{ once: true });
+			wEl.addEventListener('animationend',hider,this._ae);
 		}else
 			hider();
 	},
-	show(win){
-		let wEl = win.elem,
+	show(winState){
+		let wEl=winState.elem,
 			wc=wEl.classList,
-			anim=_.win.animShow,
-			hider=_.$.id('hider'+win.id),
+			anim=this.animShow,
+			hider=document.getElementById('hider'+winState.id),
 			shower=()=>{
 				if(anim)wc.remove(anim);
-				win.state='opened';
+				winState.state='opened';
 			}
 		wEl.style.display='';
 		hider.remove();
 		if(anim){
 			wc.add(anim);
-			_.$.on(wEl,'animationend',shower,{ once: true });
+			wEl.addEventListener('animationend',shower,this._ae);
 		}else
 			shower()
 	},
+	/*
+	 * о да, ниже идёт самая крутая фишка которую я готовлю к 2.2
+	 * 
+	 * СОХРАНЕНИЕ-ВОССТАНОВКА ОКОН
+	 * Помните автоформы? Здесь я поступил лучше
+	 * Вы можете полностью сохранить окна, как - решаете вы, но лучше
+	 * Вместо колбека я теперь просто делаю разовый читатель, так намного гибче
+	 * Плюсом я делаю разовый восстановитель который возвращает все окна
+	 * Так тоже в разы гибче, авось у вас в окнах были вебсокеты и их нужно восстановить
+	 * Проще записать результат а потом прогнать проверку по data-ws атрибутам
+	 * Или как вы ещё придумаете
+	 * 
+	 * !!!: Оно работает настолько гибко что в теории можно сделать виртуальные рабочие столы
+	 */
+	read(){
+		let store = {};
+		for (let [winId, winPre] of _.wins) {
+			let win = { ...winPre },
+				size=win.onUnfull,
+				wEl = win.elem,
+				contentRect=win.content.getBoundingClientRect(),
+				windowRect=wEl.getBoundingClientRect();
+			win.realContent=win.content.innerHTML;
+			size.top=windowRect.top;
+			size.left=windowRect.left;
+			size.height=wEl.offsetHeight - (windowRect.height - contentRect.height);
+			size.width=wEl.offsetWidth - (windowRect.width - contentRect.width);
+			delete win.elem;
+			delete win.drag;
+			delete win.content;
+			store[winId] = win;
+		}
+		return store;
+	},
+	write(state){
+		for (let winId in state) {
+			let win=state[winId],
+			content=win.realContent;
+			delete win.realContent;
+			_.wins.set(winId, win);
+			this._opn(win,content);
+		}
+		return _.wins;
+	},
+},
+wins: new Map(),
 };
-_.wins={};
 
-_.$.on(window,'error',_.err.handleGlobal);
-_.$.on(window,'unhandledrejection',_.err.handleRejection);
-_.$.on(window,'popstate',()=>{
+window.addEventListener('popstate',()=>{
 	let l=_.link
+	/*
+	 * popstate срабатывает когда:
+	 * - пользователь прыгает по истории назад/вперёд
+	 * - мы вызываем history.pushState (не replaceState)
+	 * 
+	 * _i различает эти случаи:
+	 * true = пользователь прыгнул назад
+	 * false = страница пишет свой адрес в ссылку
+	 */
+	// ???: некоторые браузеры могут вызывать popstate и при реплейсе
 	if (!l._i) {
+		// здесь происходит перенос команд при popstate
+		// читайте _.lang.get() если хотите узнать почему
 		let nUrl='?' + [l.compile()[0],...l._cmd].join('&');
-		history.replaceState(null,null,nUrl);
 		l._i=true;
+		history.replaceState(null,null,nUrl);
 		l.get();
 	} else
 		l._i=false;
 });
+
+return _};