From 20710fc4617a2b8b5a8b909497182b5f1415ae4b Mon Sep 17 00:00:00 2001 From: chris Date: Tue, 29 Apr 2025 11:09:21 +0200 Subject: [PATCH] MAJOR,IMPL,FEAT,REFA: generator --- src/component/Component.js | 246 +++--------------------------------- src/generators/generator.js | 160 +++++++++++++++-------- 2 files changed, 120 insertions(+), 286 deletions(-) diff --git a/src/component/Component.js b/src/component/Component.js index e4edbee..fb8954b 100644 --- a/src/component/Component.js +++ b/src/component/Component.js @@ -285,113 +285,6 @@ class Component extends StyleAndScriptStoringComponent { } - - /** - * Defines how a child Component is to be appended. - * @param {Component} component the child component to add it. - * @returns {HTMLElement} - */ - _appendChildComponent(component) { - let child = new WebTrinity(); - if (component instanceof Component) { - child = component.generate(); - } - - if (component instanceof WebTrinity) { - child = component; - } - - if (component instanceof HTMLElement) { - console.log("No wenity set - htmlEl was given"); - child.html = component; - } - - this._element.append(child.html); - - return child; - } - - - /** - * - * @param {ExtStorage} extStore - * @returns {Array} - */ - _processStyles(extStore = null) { - extStore = (extStore - ? extStore - : this._stylesExtStore - ) - .setupForGeneralStyling(); - - let forCollection = []; - - let counter = 0; - for (const ssd of this._styles) { - /* Make sure that the type is unified for later processing */ - if (ssd._definition instanceof Modifier) { - ssd._definition = ssd._definition._modifications; - } - - /* Check/Ensure proper ExtStorageType for following comparison */ - /** - * @type {ExtStorage} - */ - let curExtStore = extStore; - - if (Object.hasOwn(ssd, "_extStore") && ssd._extStore) { - curExtStore = ssd._extStore.setupForGeneralStyling(); - } - - if (curExtStore.getStylingDistribution()(ssd, this._element, counter)) { - forCollection.push(ssd); - } - } - - return forCollection; - } - - /** - * - * @param {ExtStorage} extStore - * @returns {Array} - */ - _processFunctions(extStore = null) { - extStore = (extStore - ? extStore - : this._functionsExtStore - ) - .setupForFunctions(); - - const forCollection = new Map(); - const collectForBefore = []; - - let counter = 0; - for (const ssd of this._functions) { - /* Make sure that the type is unified for later processing */ - - let curExtStore = extStore; - if (Object.hasOwn(ssd, "_extStore") && ssd._extStore) { - curExtStore = ssd._extStore.setupForFunctions(); - } - - if (curExtStore.getFunctionDistribution()(ssd, counter)) { - if (curExtStore._position.BEFORE) { - collectForBefore.push(ssd); - } else { - if (!forCollection.has(curExtStore)) { - forCollection.set(curExtStore, []); - } - forCollection.get(curExtStore).push(ssd); - } - } - } - - - - return forCollection; - } - /** * Ends chain. * Applies all modifications on the element. @@ -405,140 +298,31 @@ class Component extends StyleAndScriptStoringComponent { * @param {ExtStorage} * @returns {WebTrinity} the constructed HTMLElement of this Component. */ - generate(generator, modifier = null, styleStore = null, functionStore = null) { + generate(generator = singlepage, modifier = null, styleStore = null, functionStore = null) { + /** + * In the case that this component is a chainChild created one. + * The generation chain needs to be setup in the proper order + * so that the resulting element tree equals the expected/desired result. + * + * Therefore if this is a chainChild, + * it will be added to the parent via the regular childContext + * and the generation of the parent will be returned. + * + * The parent will generate this component on its generate(). + */ if (this._parentComponent) { let parent = this._parentComponent; this._parentComponent = null; return parent.childContext(this) - .generate(modifier, styleStore, functionStore); + .generate(generator, modifier, styleStore, functionStore); } + if (modifier) { this._modifier = modifier .join(this._modifier); } - let _wenity = new WebTrinity(); - - - /* DEAL WITH COMPONENT MODIFICATION FIRST */ - // @todo pay attention to the "overwrite" behaviour - the local modifier styles are the "closest" - // it might be appropriate to use this._styles.unshift(...) instead. - this._styles.push(new SStoreDefinition( - (styleStore._aggregation !== ESAggregation.INTERNALIZED ? "." : "") + this._compName, - this._modifier, - this._stylesExtStore - )); - - /* DEAL WITH CHILDREN */ - let collectedWenities = []; - - for (let i = 0; i < this._children.length; i++) { - /** - * @type {Component} - */ - let child = this._children[i]; - - if (child instanceof ChainableModifier) { - child = child.toComponent(); - } - - if (Page._useCssCalc) { - child._modifier._updateDimensionsBy(this._modifier._paddingValues); - } - child = child.generate(modifier, styleStore, functionStore); - - let wenity = this._appendChildComponent(child); - - if (!wenity.isSSEmpty()) { - collectedWenities.push(wenity); - } - } - - /* DEAL WITH STYLING AND PROCESSING */ - /** - * @type {Array} - */ - let styleCollection = this._processStyles(styleStore); - /** - * @type {Map>} - */ - const funcCollections = this._processFunctions(functionStore); - - /** - * checks if the source has the extStoreType - * fills the target extStoreType-array with the corr. elements of source. - * @param {Map>} source - * @param {Map>} target - * @param {ExtStoreType} extStoreType - * @returns - */ - function transferCollectedFunctions(source, target, extStoreType) { - if (source) { - if (source.has(extStoreType)) { - if (funcCollections.has(extStoreType)) { - target.get(extStoreType) - .push(source.get(extStoreType)) - } else { - target.set( - extStoreType, - source.get(extStoreType) - ); - } - } - } - - return target; - } - - /** - * Iterates over the collectedWenities (children) - */ - for (let i = 0; i < collectedWenities.length; i++) { - const child = collectedWenities[i]; - if (child.js) { - executeOnExtStoreTypeCollectedTriple( - (extstoretype) => transferCollectedFunctions(child.js, funcCollections, extstoretype) - ); - } - } - - if (this._isCompel) { - /** - * - * @param {Map} map - * @param {ExtStorageType} extStoreType - */ - function dealCollected(map, extStoreType) { - if (map.has(extStoreType)) { - let collectionScriptTag = generateAndFillScriptTag(map.get(extStoreType)); - if (extStoreType === ExtStoreType.COLLECTED_SEGMENT_BEGIN) { - this._element.insertAdjacentElement( - "afterbegin", - generateAndFillScriptTag(segment) - ); - } else { - Page.addElementToPage( - collectionScriptTag, - extStoreType - ); - } - } - } - - executeOnExtStoreTypeCollectedTriple((est) => dealCollected(funcCollections, est)); - - } else { - _wenity.js = funcCollections; - _wenity.css = styleCollection; - } - - _wenity.html = this._element; - - for (const group of this._toRegister) { - Page.subscribeComponentToGroup(group, this._compName) - } - - return _wenity; + return generator.generate(this, styleStore, functionStore); } } diff --git a/src/generators/generator.js b/src/generators/generator.js index 919592e..fe133cc 100644 --- a/src/generators/generator.js +++ b/src/generators/generator.js @@ -113,6 +113,58 @@ class CompelGenerator { return forCollection; } + + /** + * checks if the source has the extStoreType + * fills the target extStoreType-array with the corr. elements of source. + * @param {Map>} source + * @param {Map>} target + * @param {ExtStoreType} extStoreType + * @returns + */ + transferCollectedFunctions(source, target, extStoreType) { + if (source) { + if (source.has(extStoreType)) { + if (funcCollections.has(extStoreType)) { + target.get(extStoreType) + .push(source.get(extStoreType)) + } else { + target.set( + extStoreType, + source.get(extStoreType) + ); + } + } + } + + return target; + } + + + /** + * + * + * @param {Map} extFuncMap + * @param {ExtStorageType} extStoreType + */ + dealCollectedFuncs(extFuncMap, extStoreType) { + if (extFuncMap.has(extStoreType)) { + let collectionScriptTag = generateAndFillScriptTag(extFuncMap.get(extStoreType)); + if (extStoreType === ExtStoreType.COLLECTED_SEGMENT_BEGIN) { + this._element.insertAdjacentElement( + "afterbegin", + generateAndFillScriptTag(segment) + ); + } else { + Page.addElementToPage( + collectionScriptTag, + extStoreType + ); + } + } + } + + /** * Generates and appends a child Component. * @param {Component} component the child component to add it. @@ -121,7 +173,7 @@ class CompelGenerator { appendChildComponent(parent, child) { let childWT = new WebTrinity(); if (child instanceof Component) { - childWT = child.generate(); + childWT = child.generate(this); } if (child instanceof WebTrinity) { @@ -150,18 +202,14 @@ class CompelGenerator { * @param {Component} component * @returns {Array} */ - resolveChildren(component) { + resolveChildren(component, styleStore, functionStore) { /** * @type {Array} */ let wenities = []; for (const child of component._children) { - if (child instanceof ChainableModifier) { - child = child.toComponent(); - } - - child = child.generate(); + child = child.generate(this, styleStore, functionStore); let wenity = this.appendChildComponent(component, child); @@ -173,24 +221,6 @@ class CompelGenerator { return wenities; } - /** - * - * @param {Component} component - */ - resolveIsCompel(component, styleCollection, funcCollections) { - let wenity = new WebTrinity(); - if (component._isCompel) { - - } else { - wenity.css = styleCollection; - wenity.js = funcCollections - } - - } - - - - /** * @@ -200,45 +230,49 @@ class CompelGenerator { * @returns {WebTrinity} */ generate(component, styleStore = null, functionStore = null) { + /** - * check if component is chained child, - * if so resolve chaining first. - */ - if (component._parentComponent) { - let parent = component._parentComponent; - component._parentComponent = null; - return parent.childContext(component) - .generate(this) - } + * DEAL WITH COMPONENT MODIFICATION FIRST + * + * @todo pay attention to the "overwrite" behaviour + * the local modifier styles are the "closest" + * it might be appropriate to use this._styles.unshift(...) instead. + */ + component._styles.push(new SStoreDefinition( + (styleStore._aggregation !== ESAggregation.INTERNALIZED + ? "." + : "") + + component._compName, + component._modifier, + component._stylesExtStore + )); + /** + * DEAL WITH CHILDREN + * + * Depending on the setup of the generator/-tion + * The children might return scripts or styles + * that are supposed to be collected + * and dealt with as a collection. + */ + let childrenWenities = this.resolveChildren(component, styleStore, functionStore); + + /** + * DEAL WITH STYLES AND SCRIPTS + */ - /* DEAL WITH COMPONENT MODIFICATION FIRST */ - // @todo pay attention to the "overwrite" behaviour - the local modifier styles are the "closest" - // it might be appropriate to use this._styles.unshift(...) instead. - component._styles.push( - new SStoreDefinition( - ( - styleStore._aggregation !== ESAggregation.INTERNALIZED - ? "." - : "" - ) + component._compName, - component._modifier, - component._stylesExtStore - ) - ); - - let childrenWenities = this.resolveChildren(component); - - /* DEAL WITH STYLING AND PROCESSING */ /** * @type {Array} */ - let styleCollection = this.processStyles(styleStore); + let styleCollection = this.processStyles(component, styleStore); /** * @type {Map>} */ - let funcCollections = this.processFunctions(functionStore); + let funcCollections = this.processFunctions(component, functionStore); + /** + * DEAL WITH CHILDREN WENITY SCRIPTS + */ for (const child of childrenWenities) { if (child.scripts) { executeOnExtStoreTypeCollectedTriple( @@ -247,7 +281,23 @@ class CompelGenerator { } } - let wenity = this.resolveIsCompel(component, styleCollection, funcCollections); + + let wenity = new WebTrinity(); + /** + * DEAL WITH CHILDREN WENITY STYLE + */ + if (component._isCompel) { + executeOnExtStoreTypeCollectedTriple((est) => this.dealCollectedFuncs(funcCollections, est)); + } else { + wenity.scripts = funcCollections; + wenity.stylings = styleCollection; + } + + wenity.compext = component._element + + for (const group of component._toRegister) { + Page.subscribeComponentToGroup(group, component._compName); + } return wenity; }