diff --git a/src/component/Component.js b/src/component/Component.js
index 51357c7..773d35d 100644
--- a/src/component/Component.js
+++ b/src/component/Component.js
@@ -405,7 +405,7 @@ class Component extends StyleAndScriptStoringComponent {
      * @param {ExtStorage} 
      * @returns {WebTrinity} the constructed HTMLElement of this Component.
      */
-    generate(modifier = null, styleStore = null, functionStore = null) {
+    generate(modifier = null, generator, styleStore = null, functionStore = null) {
         if (this._parentComponent) {
             let parent = this._parentComponent;
             this._parentComponent = null;
@@ -469,7 +469,8 @@ class Component extends StyleAndScriptStoringComponent {
         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 
@@ -493,6 +494,11 @@ class Component extends StyleAndScriptStoringComponent {
             return target;
         }
 
+        /**
+         * Executes the given function upon the delegating ExtStoreTypes
+         * @param {*} func 
+         * @returns {Map<ExtStoreType, *}
+         */
         function executeOnExtStoreTypeCollectedTriple(func) {
             return new Map([
                 { [ExtStoreType.COLLECTED_SEGMENT_BEGIN]: func(ExtStoreType.COLLECTED_SEGMENT_BEGIN) },
@@ -501,6 +507,9 @@ class Component extends StyleAndScriptStoringComponent {
             ]);
         }
 
+        /**
+         * Iterates over the collectedWenities (children)
+         */
         for (let i = 0; i < collectedWenities.length; i++) {
             const child = collectedWenities[i];
             if (child.js) {
diff --git a/src/generators/generator.js b/src/generators/generator.js
new file mode 100644
index 0000000..62411e6
--- /dev/null
+++ b/src/generators/generator.js
@@ -0,0 +1,221 @@
+/**
+ * This file is part of the jps-like-websites lib
+ * URL: https://git.labos.goip.de/chris/jpc-like-websites
+ * @copyright by its creator Christian Martin 
+ */
+
+class CompelGenerator {
+    /**
+     * @param {null} [styleStore=null] 
+     * @param {null} [functionStore=null] 
+     */
+    constructor(styleStore = null, functionStore = null) {
+        this._styleStore = styleStore;
+        this._functionStore = functionStore;
+    }
+
+    /**
+     * 
+     * @param {ExtStorage} extStore 
+     * @returns {Array<SStoreDefinition>}
+     */
+    processStyles(component, 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(component, extStore = null) {
+        extStore = (extStore
+            ? extStore
+            : component._functionsExtStore
+        )
+            .setupForFunctions();
+
+        const forCollection = new Map();
+        const collectForBefore = [];
+
+        let counter = 0;
+        for (const ssd of component._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;
+    }
+
+    /**
+     * Generates and appends a child Component.
+     * @param {Component} component the child component to add it.
+     * @returns {WebTrinity}
+     */
+    appendChildComponent(parent, child) {
+        let childWT = new WebTrinity();
+        if (child instanceof Component) {
+            childWT = child.generate();
+        }
+
+        if (child instanceof WebTrinity) {
+            childWT = child;
+        }
+
+        if (child instanceof HTMLElement) {
+            console.log("No wenity set - htmlEl was given");
+            childWT.html = component;
+        }
+
+        parent.append(childWT.html);
+
+        return childWT;
+    }
+
+    /**
+     * 
+     * @param {Comment} component 
+     * @returns {Array<WebTrinity>}
+     */
+    resolveChildren(component) {
+        /**
+         * @type {Array<WebTrinity>}
+         */
+        let wenities = [];
+
+        for (let i = 0; i < component._children.length; i++) {
+            /**
+             * @type {Component}
+             */
+            let child = component._children[i];
+
+            if (child instanceof ChainableModifier) {
+                child = child.toComponent();
+            }
+
+            if (Page._useCssCalc) {
+                child._modifier._updateDimensionsBy(component._modifier._paddingValues);
+            }
+            child = child.generate();
+
+            let wenity = this.appendChildComponent(component, child);
+
+            if (!wenity.isSSEmpty()) {
+                wenities.push(wenity);
+            }
+        }
+
+        return wenities;
+    }
+
+    /**
+     * 
+     * @param {Component} component 
+     */
+    resolveIsCompel(component, styleCollection, funcCollections) {
+        let wenity = new WebTrinity();
+        if (component._isCompel) {
+
+        } else {
+            wenity.css = styleCollection;
+            wenity.js = funcCollections
+        }
+
+    }
+
+    /**
+     * 
+     * @param {Component} component 
+     * @param {ExtStorage} [styleStore=null] 
+     * @param {ExtStorage} [functionStore=null] 
+     * @returns {WebTrinity}
+     */
+    generate(component, styleStore = null, functionStore = null) {
+
+        /* 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);
+        /**
+         * @type {Map<ExtStoreType, Array<SStoreDefinition>>}
+         */
+        let funcCollections = this.processFunctions(functionStore);
+
+        for (let i = 0; i < childrenWenities.length; i++) {
+            const child = childrenWenities[i];
+            if (child.js) {
+                executeOnExtStoreTypeCollectedTriple(
+                    (extstoretype) => transferCollectedFunctions(child.js, funcCollections, extstoretype)
+                );
+            }
+        }
+
+        let wenity = this.resolveIsCompel(component, styleCollection, funcCollections);
+
+        return wenity;
+    }
+
+}