MAJOR,IMPL,FEAT,REFA: generator

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<SStoreDefinition>}
-     */
-    _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<SStoreDefinition>}
-     */
-    _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();
+        return generator.generate(this, styleStore, functionStore);
-
-
-        /* 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<SStoreDefinition>}
-         */
-        let styleCollection = this._processStyles(styleStore);
-        /**
-         * @type {Map<ExtStoreType, Array<SStoreDefinition>>}
-         */
-        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<ExtStoreType, Array<SStoreDefinition>>} source 
-         * @param {Map<ExtStoreType, Array<SStoreDefinition>>} 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<ExtStoreType, *>} 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;
     }
 }

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<ExtStoreType, Array<SStoreDefinition>>} source 
+     * @param {Map<ExtStoreType, Array<SStoreDefinition>>} 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<ExtStoreType, *>} 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<WebTrinity>}
      */
-    resolveChildren(component) {
+    resolveChildren(component, styleStore, functionStore) {
         /**
          * @type {Array<WebTrinity>}
          */
         let wenities = [];
 
         for (const child of component._children) {
-            if (child instanceof ChainableModifier) {
+            child = child.generate(this, styleStore, functionStore);
-                child = child.toComponent();
-            }
-
-            child = child.generate();
 
             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, 
+         * DEAL WITH COMPONENT MODIFICATION FIRST 
-         * if so resolve chaining first.
+         * 
-        */
+         * @todo pay attention to the "overwrite" behaviour 
-        if (component._parentComponent) {
+         *          the local modifier styles are the "closest"
-            let parent = component._parentComponent;
+         *          it might be appropriate to use this._styles.unshift(...) instead. 
-            component._parentComponent = null;
+         */
-            return parent.childContext(component)
+        component._styles.push(new SStoreDefinition(
-                .generate(this)
+            (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<SStoreDefinition>}
          */
-        let styleCollection = this.processStyles(styleStore);
+        let styleCollection = this.processStyles(component, styleStore);
         /**
          * @type {Map<ExtStoreType, Array<SStoreDefinition>>}
          */
-        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;
     }