jusax23/stear
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

restructure and less wasted time while rendering

Browse source
This commit is contained in:
jusax23 2022-12-07 21:08:53 +01:00
parent 15a4048730
commit bf9908ded1
1 changed files with 149 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

223
main.js
View file

@ -6,19 +6,19 @@ document.head.appendChild(globalStyle);
String.prototype.map = Array.prototype.map; String.prototype.map = Array.prototype.map;
function toCssAttr(txt){ function toCssAttr(txt) {
return txt.map(d => (d.toUpperCase() === d && d !== d.toLowerCase()) ? "-" + d.toLowerCase(): d ).join(""); return txt.map(d => (d.toUpperCase() === d && d !== d.toLowerCase()) ? "-" + d.toLowerCase() : d).join("");
}; };
class callPromise extends Promise{ class callPromise extends Promise {
#opts = {}; #opts = {};
constructor(cb){ constructor(cb) {
super(cb); super(cb);
}; };
set opts(opts){ set opts(opts) {
this.#opts = opts; this.#opts = opts;
} }
get opts(){ get opts() {
return this.#opts; return this.#opts;
} }
} }
@ -30,7 +30,7 @@ const pools = {
const stears = []; const stears = [];
/** Stear class */ /** Stear class */
export class Stear{ export class Stear {
elem; elem;
#childs = {}; #childs = {};
@ -41,15 +41,15 @@ export class Stear{
* *
* @param {HTMLElement} elem * @param {HTMLElement} elem
*/ */
constructor(elem){ constructor(elem) {
this.elem = elem; this.elem = elem;
elem.style.position="relative"; elem.style.position = "relative";
stears.push(this); stears.push(this);
} }
destroy(){ destroy() {
let i = stears.indexOf(this); let i = stears.indexOf(this);
if(i==-1) return; if (i == -1) return;
stears.splice(i,1); stears.splice(i, 1);
delete this; delete this;
} }
@ -58,7 +58,7 @@ export class Stear{
* *
* @param {JSON} css * @param {JSON} css
*/ */
style(css){ style(css) {
Object.entries(css).forEach(([k, d]) => { Object.entries(css).forEach(([k, d]) => {
this.elem.style[k] = d; this.elem.style[k] = d;
}); });
@ -70,8 +70,8 @@ export class Stear{
* @param {string} id * @param {string} id
* @param {SFrame} elem * @param {SFrame} elem
*/ */
addElement (id,elem){ addElement(id, elem) {
if(!(elem instanceof SFrame))throw new TypeError("Cannot add Element not extending from SFrame"); if (!(elem instanceof SFrame)) throw new TypeError("Cannot add Element not extending from SFrame");
this.#childs[id] = elem; this.#childs[id] = elem;
} }
@ -81,11 +81,11 @@ export class Stear{
* @param {string} id * @param {string} id
* @returns {SFrame} * @returns {SFrame}
*/ */
getElement (id) { getElement(id) {
return this.g(id); return this.g(id);
} }
g(id){ g(id) {
return this.#childs[id]; return this.#childs[id];
} }
@ -97,7 +97,7 @@ export class Stear{
* @param {number} layer * @param {number} layer
* @returns {callPromise} * @returns {callPromise}
*/ */
async call (elem, args, layer = 1){ async call(elem, args, layer = 1) {
return await elem.call(this, args, this.#frames, layer); return await elem.call(this, args, this.#frames, layer);
} }
@ -110,7 +110,7 @@ export class Stear{
* @param {number} layer * @param {number} layer
* @returns {callPromise} * @returns {callPromise}
*/ */
include(elem, args, renderParent, layer = 1){ include(elem, args, renderParent, layer = 1) {
return elem.call(this, args, this.#frames, layer, renderParent); return elem.call(this, args, this.#frames, layer, renderParent);
} }
@ -120,16 +120,16 @@ export class Stear{
* @param {*} arg * @param {*} arg
* @returns {Promise} * @returns {Promise}
*/ */
rerenderGlobal(arg){ rerenderGlobal(arg) {
return new Promise((res,rej)=>{ return new Promise((res, rej) => {
if(this.#frames.length == 0)return void res(); if (this.#frames.length == 0) return void res();
let running = this.#frames.length; let running = this.#frames.length;
for (let i = 0; i < this.#frames.length; i++) { for (let i = 0; i < this.#frames.length; i++) {
const element = this.#frames[i]; const element = this.#frames[i];
element.globalRenderRequest(arg) element.globalRenderRequest(arg)
.then(()=>{ .then(() => {
running--; running--;
if(running==0)res(); if (running == 0) res();
}); });
} }
}); });
@ -141,8 +141,8 @@ export class Stear{
* *
* @param {string} text * @param {string} text
*/ */
static addGlobalStyleText(text){ static addGlobalStyleText(text) {
globalStyle.innerHTML+="\n"+text; globalStyle.innerHTML += "\n" + text;
} }
/** /**
@ -152,14 +152,13 @@ export class Stear{
* @param {string} name * @param {string} name
* @returns {string} name * @returns {string} name
*/ */
static addAnimation(steps, name = "stearAnimation_" + counter++){ static addAnimation(steps, name = "stearAnimation_" + counter++) {
Stear.addGlobalStyleText(`@keyframes ${name} { Stear.addGlobalStyleText(`@keyframes ${name} {
${ ${Object.entries(steps).map(([k, d]) =>
Object.entries(steps).map(([k,d])=> ` ${k} {
` ${k} {
${Object.entries(d).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")} ${Object.entries(d).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")}
}`).join("\n") }`).join("\n")
} }
}`); }`);
return name; return name;
@ -171,7 +170,7 @@ ${Object.entries(d).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").joi
* @param {string} name - e.g. .classname * @param {string} name - e.g. .classname
* @returns {string} name * @returns {string} name
*/ */
static addGlobalStyleJSON(json, name = ".stearClass_" + counter++){ static addGlobalStyleJSON(json, name = ".stearClass_" + counter++) {
Stear.addGlobalStyleText(` Stear.addGlobalStyleText(`
${name} { ${name} {
${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")} ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").join("\n")}
@ -186,8 +185,8 @@ ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
* @param {string} name * @param {string} name
* @returns {LanguagePool} * @returns {LanguagePool}
*/ */
static addLanguagePool(name){ static addLanguagePool(name) {
if(typeof pools[name] == "undefined"){ if (typeof pools[name] == "undefined") {
pools[name] = new LanguagePool(); pools[name] = new LanguagePool();
} }
return pools[name]; return pools[name];
@ -199,27 +198,27 @@ ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
* @param {JSON} data * @param {JSON} data
* @param {string} lang * @param {string} lang
*/ */
static addLanguageFile(data,lang){ static addLanguageFile(data, lang) {
Object.entries(data).forEach(([k,d]) => { Object.entries(data).forEach(([k, d]) => {
if (typeof pools[k] == "undefined") pools[k] = new LanguagePool(); if (typeof pools[k] == "undefined") pools[k] = new LanguagePool();
pools[k].addFile(d,lang); pools[k].addFile(d, lang);
}); });
} }
/** /**
* Used Language * Used Language
*/ */
static set lang (lang){ static set lang(lang) {
Object.entries(pools).forEach(([k, d]) => { Object.entries(pools).forEach(([k, d]) => {
d.lang = lang; d.lang = lang;
}); });
stears.forEach(s=>s.rerenderGlobal()); stears.forEach(s => s.rerenderGlobal());
} }
/** /**
* Generate Language File with defaults * Generate Language File with defaults
*/ */
static get getLanguageFile(){ static get getLanguageFile() {
var out = {}; var out = {};
Object.entries(pools).forEach(([k, d]) => { Object.entries(pools).forEach(([k, d]) => {
out[k] = d.getFile; out[k] = d.getFile;
@ -343,7 +342,7 @@ ${Object.entries(json).map(d => " " + toCssAttr(d[0]) + ": " + d[1] + ";").jo
/** /**
* SFrame class * SFrame class
*/ */
export class SFrame{ export class SFrame {
#preRender; #preRender;
#call; #call;
@ -353,26 +352,26 @@ export class SFrame{
* @param {callCallback} args.call * @param {callCallback} args.call
* @param {boolean} [args.preRender] * @param {boolean} [args.preRender]
*/ */
constructor({ call, preRender = true }){ constructor({ call, preRender = true }) {
this.#preRender = preRender; this.#preRender = preRender;
this.#call = call; this.#call = call;
} }
call(stear, args, frames, layer = 1, renderParent = stear.elem){ call(stear, args, frames, layer = 1, renderParent = stear.elem) {
let lastRender; let lastRender;
let renderElem; let renderElem;
let event = { onloaded: () => { }, onclose: ()=>{}, onresolve: () => { }, onBeforRerender: () => { }, onAfterRerender: () => { }, onParentRender:()=>{}, onGlobalRenderRequest:()=>true }; let event = { onloaded: () => { }, onclose: () => { }, onresolve: () => { }, onBeforRerender: () => { }, onAfterRerender: () => { }, onParentRender: () => { }, onGlobalRenderRequest: () => true };
let find = {}; let find = {};
let resolved = false; let resolved = false;
async function render(args){ async function render(args) {
if(!renderElem) return; if (!renderElem) return;
if (lastRender) if ([...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._); if (lastRender) if ([...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
let now = renderElem; let now = renderElem;
if(typeof now == "function")now = await now(); if (typeof now == "function") now = await now();
if(!(now instanceof class_)) throw new Error("The Element to render is not an instance of class_"); if (!(now instanceof class_)) throw new Error("The Element to render is not an instance of class_");
await now.build(args); await now.build(args);
renderParent.appendChild(now.render); renderParent.appendChild(now.render);
@ -385,11 +384,11 @@ export class SFrame{
return lastRender; return lastRender;
} }
const ppp = new callPromise(async (res,rej)=>{ const ppp = new callPromise(async (res, rej) => {
const globalRegister = { const globalRegister = {
globalRenderRequest: async (...args)=>{ globalRenderRequest: async (...args) => {
const arg = await event.onGlobalRenderRequest(...args); const arg = await event.onGlobalRenderRequest(...args);
if(arg===false) return; if (arg === false) return;
await options.render(arg); await options.render(arg);
} }
} }
@ -409,7 +408,7 @@ export class SFrame{
await event.onresolve(); await event.onresolve();
if (close && lastRender && [...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._); if (close && lastRender && [...(renderParent.children)].includes(lastRender._)) renderParent.removeChild(lastRender._);
let i = frames.indexOf(globalRegister); let i = frames.indexOf(globalRegister);
if(i>-1)frames.splice(i,1); if (i > -1) frames.splice(i, 1);
res(r); res(r);
}, },
call: (elem, args = {}) => { call: (elem, args = {}) => {
@ -428,9 +427,9 @@ export class SFrame{
window.queueMicrotask(() => ppp.opts = options); window.queueMicrotask(() => ppp.opts = options);
let firstRender = false; let firstRender = false;
renderElem = await this.#call(stear, options, args); renderElem = await this.#call(stear, options, args);
if(!renderElem) { if (!renderElem) {
}else{ } else {
if (this.#preRender | firstRender) await render([]); if (this.#preRender | firstRender) await render([]);
event.onloaded(); event.onloaded();
} }
@ -441,7 +440,7 @@ export class SFrame{
} }
/** Create a SWindow, a Fullscreen Frame. */ /** Create a SWindow, a Fullscreen Frame. */
export class SWindow extends SFrame{ export class SWindow extends SFrame {
#Frame; #Frame;
@ -451,7 +450,7 @@ export class SWindow extends SFrame{
* @param {callCallback} args.call * @param {callCallback} args.call
* @param {boolean} [args.preRender] * @param {boolean} [args.preRender]
*/ */
constructor({ call, preRender = true, backgroundColor = "transparent"}){ constructor({ call, preRender = true, backgroundColor = "transparent" }) {
/*var Frame = _({ /*var Frame = _({
style: { style: {
top: "0px", top: "0px",
@ -466,7 +465,7 @@ export class SWindow extends SFrame{
find:"main" find:"main"
}, []);*/ }, []);*/
super({ super({
call: async(...args) => _({ call: async (...args) => _({
style: { style: {
top: "0px", top: "0px",
left: "0px", left: "0px",
@ -503,6 +502,8 @@ export class class_ {
#find; #find;
#doBuild; #doBuild;
#dynamicState = 0;
/** /**
* Generate a new Stear render Node. * Generate a new Stear render Node.
* *
@ -510,28 +511,28 @@ export class class_ {
* @param {Array} childs * @param {Array} childs
* @param {boolean} doBuild * @param {boolean} doBuild
*/ */
constructor(settings,childs,doBuild = true){ constructor(settings, childs, doBuild = true) {
this.#elem = document.createElement(settings.type ?? "div"); this.#elem = document.createElement(settings.type ?? "div");
this.#childs = childs; this.#childs = childs;
var keys = Object.keys(settings); var keys = Object.keys(settings);
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
const key = keys[i]; const key = keys[i];
if(key == "type"){} else if (key == "style"){ if (key == "type") { } else if (key == "style") {
Object.entries(settings[key]).forEach(([k,d])=>{ Object.entries(settings[key]).forEach(([k, d]) => {
this.#elem.style[k] = d; this.#elem.style[k] = d;
}); });
} else if (key == "find"){ } else if (key == "find") {
this.#find = settings[key]; this.#find = settings[key];
} else if (key == "event"){ } else if (key == "event") {
Object.entries(settings[key]).forEach(([k, d]) => { Object.entries(settings[key]).forEach(([k, d]) => {
this.#elem.addEventListener(k,d); this.#elem.addEventListener(k, d);
}); });
} else if (key == "attr"){ } else if (key == "attr") {
Object.entries(settings[key]).forEach(([k, d]) => { Object.entries(settings[key]).forEach(([k, d]) => {
this.#elem.setAttribute(k, d); this.#elem.setAttribute(k, d);
}); });
} else { } else {
this.#elem.setAttribute(key,settings[key]); this.#elem.setAttribute(key, settings[key]);
} }
} }
this.#doBuild = doBuild; this.#doBuild = doBuild;
@ -540,15 +541,16 @@ export class class_ {
/** /**
* @param {Array} childs * @param {Array} childs
*/ */
set childs(childs){ set childs(childs) {
if (!this.#doBuild) return; if (!this.#doBuild) return;
this.#childs = Array.isArray(childs) ? childs : [childs]; this.#childs = Array.isArray(childs) ? childs : [childs];
this.#dynamicState = 0;
} }
/** /**
* @param {renderNodeSettings} settings * @param {renderNodeSettings} settings
*/ */
set settings(settings){ set settings(settings) {
var keys = Object.keys(settings); var keys = Object.keys(settings);
for (let i = 0; i < keys.length; i++) { for (let i = 0; i < keys.length; i++) {
const key = keys[i]; const key = keys[i];
@ -564,29 +566,58 @@ export class class_ {
} }
} }
async #syncBuild(args) {
for (let i = 0; i < this.#childs.length; i++) {
let elem = this.#childs[i];
if (Array.isArray(elem)) {
for (let j = 0; j < elem.length; j++) {
if (elem[j] instanceof class_) await elem[j].build(args);
}
} else {
if (elem instanceof class_) await elem.build(args);
}
}
}
/** /**
* Build Stear Structure * Build Stear Structure
* *
* @param {*} args * @param {*} args
*/ */
async build (args) { async build(args) {
if(!this.#doBuild)return; if (!this.#doBuild) return;
if (this.#dynamicState < 0) return void await this.#syncBuild(args);
this.#build = []; this.#build = [];
for (let i = 0; i < this.#childs.length; i++) { for (let i = 0; i < this.#childs.length; i++) {
let elem = this.#childs[i]; let elem = this.#childs[i];
if (typeof elem == "function") elem = (await elem(...args))??[]; if (typeof elem == "function") {
elem = (await elem(...args)) ?? [];
this.#dynamicState = 2;
}
if(Array.isArray(elem)){ if (Array.isArray(elem)) {
for (let j = 0; j < elem.length; j++) { for (let j = 0; j < elem.length; j++) {
if (elem[j] instanceof class_) await elem[j].build(args); if (elem[j] instanceof class_) await elem[j].build(args);
} }
this.#build.push(...elem); this.#build.push(...elem);
}else{ } else {
if(elem instanceof class_)await elem.build(args); if (elem instanceof class_) await elem.build(args);
this.#build.push(elem); this.#build.push(elem);
} }
} }
if (this.#dynamicState <= 0) this.#dynamicState = -1;
}
#syncRender() {
let out = [];
for (let i = 0; i < this.#build.length; i++) {
const elem = this.#build[i];
if (typeof elem != "string" && !(elem instanceof LanguagePoolString)) {
out[i] = elem.render;
}
}
} }
/** /**
@ -594,8 +625,12 @@ export class class_ {
* *
* @return {HTMLElement} * @return {HTMLElement}
*/ */
get render (){ get render() {
if (!this.#doBuild) return this.#elem; if (!this.#doBuild) return this.#elem;
if (this.#dynamicState < -1) {
this.#syncRender();
return this.#elem;
}
let out = []; let out = [];
for (let i = 0; i < this.#build.length; i++) { for (let i = 0; i < this.#build.length; i++) {
const elem = this.#build[i]; const elem = this.#build[i];
@ -606,29 +641,35 @@ export class class_ {
} }
} }
this.#elem.replaceChildren(...out); this.#elem.replaceChildren(...out);
if (this.#dynamicState < 0) this.#dynamicState = -2;
return this.#elem; return this.#elem;
} }
/** /**
* @return {HTMLElement} * @return {HTMLElement}
*/ */
get _ (){ get _() {
return this.#elem; return this.#elem;
} }
async rerender(args = []) {
await this.build(args);
this.render;
}
/** /**
* Returns find Object * Returns find Object
* *
* @return {Object} find * @return {Object} find
*/ */
get find (){ get find() {
var out = {}; var out = {};
if (this.#doBuild){ if (this.#doBuild) {
this.#build.forEach(d=>{ this.#build.forEach(d => {
Object.assign(out,d.find); Object.assign(out, d.find);
}); });
} }
if (this.#find) out[this.#find]=this; if (this.#find) out[this.#find] = this;
return out; return out;
} }
} }
@ -640,14 +681,14 @@ export class class_ {
* @returns {class_} * @returns {class_}
*/ */
export const _ = (settings = {}, childs = []) => new class_(settings, Array.isArray(childs) ? childs : [childs]); export const _ = (settings = {}, childs = []) => new class_(settings, Array.isArray(childs) ? childs : [childs]);
export const s = (type,settings,...childs)=>{ export const s = (type, settings, ...childs) => {
settings = settings ?? {}; settings = settings ?? {};
settings.type = type; settings.type = type;
return new class_(settings,childs); return new class_(settings, childs);
} }
/** includeFrame */ /** includeFrame */
class includeFrame{ class includeFrame {
#elem; #elem;
#call; #call;
/** /**
@ -658,13 +699,13 @@ class includeFrame{
* @param {number} layer * @param {number} layer
* @param {*} args * @param {*} args
*/ */
constructor(stear,frame,layer, args = {}){ constructor(stear, frame, layer, args = {}) {
this.#elem = new class_({},[],false); this.#elem = new class_({}, [], false);
this.#call = stear.include(frame, args, this.#elem._, layer); this.#call = stear.include(frame, args, this.#elem._, layer);
this.#call.then(()=>{ this.#call.then(() => {
}) })
.catch(()=>{ .catch(() => {
}); });
} }
@ -672,15 +713,15 @@ class includeFrame{
/** /**
* @return {callUtils} utils from included Frame * @return {callUtils} utils from included Frame
*/ */
get opts(){ get opts() {
return this.#call.opts; return this.#call.opts;
} }
/** /**
* Close the included Frame. * Close the included Frame.
*/ */
close(){ close() {
if(this.#call){ if (this.#call) {
this.#call.opts.close(); this.#call.opts.close();
} }
} }
@ -691,7 +732,7 @@ class includeFrame{
* @param {*} settings * @param {*} settings
* @returns {HTMLElement} * @returns {HTMLElement}
*/ */
render(settings={}){ render(settings = {}) {
this.#elem.settings = settings; this.#elem.settings = settings;
this.#call.opts.event.onParentRender(); this.#call.opts.event.onParentRender();
return this.#elem; return this.#elem;