FIX,IMPRO,REFA: Fixed framework after refactoring and -structuring

src/builder.js

@@ -216,7 +216,7 @@ const builder = {
       * @param {*} innerComponents 
       */
      page: function (innerComponents) {
-          let main = document.querySelector('main')
+          let main = document.querySelector('main');
 
           main.parentElement.insertAdjacentElement(
                "afterbegin",
@@ -225,7 +225,7 @@ const builder = {
                     .arrangement(Arrangement.CENTER)
                     .childContext(innerComponents)
                     .generate()
-          )
+          );
           Page.generate();
           main.remove();
      }

src/commonEvents.js

@@ -9,6 +9,12 @@
  */
 const CommonEvents = Object.freeze({
     ONCLICK: "onclick",
-    ONCHANGE: "onchange"
-})
-
+    ONCHANGE: "onchange",
+    SCROLL: "scroll",
+    DRAG_START: "dragstart",
+    DRAG_END: "dragend",
+    DRAG_ENTER: "dragenter",
+    DRAG_LEAVE: "dragleave",
+    DRAG_OVER: "dragover",
+    DROP: "drop",
+});

src/component.js

@@ -10,6 +10,7 @@
 class Component extends ScriptStoringComponent {
 
     constructor(element, attr = {}) {
+        super(element, attr);
         this._modifier = new Modifier().margin(new Sides().all(0));
         var akeys = Object.keys(attr);
         for (let i = 0; i < akeys.length; i++) {
@@ -30,4 +31,17 @@ class Component extends ScriptStoringComponent {
         this._toRegister.push(listName);
         return this;
     }
+    /**
+     * @override
+     * @class Component
+     * @inheritdoc
+     */
+    generate(styleStoreInternal = null, cssStore = null, funcStore = null) {
+        let wenity = super.generate(styleStoreInternal, cssStore, funcStore);
+
+        for (let i = 0; i < this._toRegister.length; i++) {
+            this._toRegister[i].push(wenity.html);
+        }
+        return wenity.html;
+    }
 }

src/componentAncestry/addStyleAndFunctions.js

@@ -117,7 +117,7 @@ class StyleStoringComponent extends ModifiableComponent {
      * @override
      * @param {StyleStoringComponent|Component|ChainableModifier} component 
      */
-    #appendChildComponent(component) {
+    _appendChildComponent(component) {
         if (!(component instanceof Component)) {
             component = component.toComponent();
         }
@@ -134,7 +134,12 @@ class StyleStoringComponent extends ModifiableComponent {
             }
         }
 
-        this._element.append(wenity.html);
+        this._element.append(
+            (wenity instanceof WebTrinity
+                ? wenity.html
+                : wenity
+            )
+        );
     }
 
     /**
@@ -142,6 +147,7 @@ class StyleStoringComponent extends ModifiableComponent {
      * @param {boolean|null} styleStoreInternal 
      * @param {ExtStorageType|null} cssStore 
      * @returns {WebTrinity}
+     * @class StyleStoringComponent
      */
     generate(styleStoreInternal = null, cssStore = null) {
         let wenity = new WebTrinity();
@@ -227,7 +233,7 @@ class ScriptStoringComponent extends StyleStoringComponent {
      * @override
      * @param {ScriptStoringComponent|Component|ChainableModifier} component 
      */
-    #appendChildComponent(component) {
+    _appendChildComponent(component) {
         if (!(component instanceof Component)) {
             component = component.toComponent();
         }
@@ -244,7 +250,16 @@ class ScriptStoringComponent extends StyleStoringComponent {
             }
         }
 
-        this._element.append(wenity.html);
+        if (Object.hasOwn(wenity, "css") & wenity.css) {
+            super._appendChildComponent(wenity);
+        } else {
+            this._element.append(
+                (wenity instanceof WebTrinity
+                    ? wenity.html
+                    : wenity
+                )
+            );
+        }
     }
 
     /**
@@ -257,7 +272,7 @@ class ScriptStoringComponent extends StyleStoringComponent {
     }
 
     /**
-     * 
+     * @todo potential code duplication - and doc
      * @returns {HTMLScriptElement}
      */
     _generateScriptTag() {
@@ -322,6 +337,7 @@ class ScriptStoringComponent extends StyleStoringComponent {
      * @param {boolean} styleStoreInternal 
      * @param {ExtStorageType} cssStore 
      * @param {ExtStore} funcStore 
+     * @class ScriptStoringComponent
      */
     generate(styleStoreInternal = null, cssStore = null, funcStore = null) {
         let wenity = super.generate(styleStoreInternal, cssStore);
@@ -329,9 +345,9 @@ class ScriptStoringComponent extends StyleStoringComponent {
         /* Sort Styling Storage Types */
         this.setFunctionStorage(funcStore);
 
-        let tag = this._generateStyleTag();
-
         if (this._funcStore.type === ExtStorageType.INDIVIDUALLY) {
+            let tag = this._generateScriptTag();
+
             switch (this._funcStore.position) {
                 case ExtStoragePos.WITHIN:
                     wenity.html.insertAdjacentElement(
@@ -365,10 +381,21 @@ class ScriptStoringComponent extends StyleStoringComponent {
                 case ExtStorageType.COLLECTED:
                 case ExtStorageType.CENTRALIZED:
                 default:
-                    wenity.js = tag;
+                    /**
+                     * @todo implement difference between collected and centralized in
+                     * generate, appendChild and childContext function-chain
+                     */
+                    Object.entries(this.#functions)
+                        .forEach(tuple => {
+                            Page.registerPageFunction(
+                                fun = tuple[1].fun,
+                                underTheName = tuple[0],
+                                overwriteBehaviour = tuple[1].overwrite
+                            );
+                        });
+                //wenity.js = tag;
             }
         }
-
         return wenity;
     }
 }

src/componentAncestry/modifiableComponent.js

@@ -56,7 +56,7 @@ class ModifiableComponent extends ChildbearerComponent {
      * @override
      * @param {Component|ChainableModifier|} component 
      */
-    #appendChildComponent(component) {
+    _appendChildComponent(component) {
         this._element.append(
             (component instanceof Component
                 ? component
@@ -70,6 +70,7 @@ class ModifiableComponent extends ChildbearerComponent {
      * @inheritdoc
      * @override 
      * @returns {HTMLElement}
+     * @class ModifiableComponent
      */
     generate() {
         this._modifier._modifications["justify-content"] = this._arrangement;

src/componentAncestry/wrapperComponent.js

@@ -23,6 +23,11 @@ class ElementWrapper {
      * @type {string}
      */
     _compName;
+    /**
+     * The auto-generated name of the component. 
+     * @type {string}
+     */
+    _givenName;
 
     /**
      * Initializes the component
@@ -35,8 +40,15 @@ class ElementWrapper {
             element.setAttribute(akeys[i], attr[akeys[i]]);
         }
         this._element = element;
-        this._compName = Page.registerComponent();
-        this.setAttribute('data-compel', this._compName);
+        this._compName = Page.autoRegisterComponent();
+        this.setAttribute('data-autocompel', this._compName);
+    }
+
+    setComponentName(name){
+        this._givenName = name;
+        this.setAttribute('data-compel', name);
+        Page.registerComponent(name);
+        return this;
     }
 
     /**
@@ -96,7 +108,9 @@ class ElementWrapper {
      * Ends chain. 
      * Applies all modifications on the element.
      * Returns the constructed HTMLElement of this Component.
+     * @class ElementWrapper
      * @returns {HTMLElement}
+     * @class ElementWrapper
      */
     generate() {
         return this._element;
@@ -161,7 +175,7 @@ class ChildbearerComponent extends ElementWrapper {
      * Defines how a child Component is to be appended.
      * @param {Component} component the child component to add it.
      */
-    #appendChildComponent(component) {
+    _appendChildComponent(component) {
         this._element.append(
             component.generate()
         );
@@ -170,6 +184,7 @@ class ChildbearerComponent extends ElementWrapper {
     /**
      * @override
      * @inheritdoc
+     * @class ChildbearerComponent
      */
     generate() {
         this._element.style.justifyContent = this._arrangement;
@@ -196,7 +211,7 @@ class ChildbearerComponent extends ElementWrapper {
                 this.childContext(component[i]);
             }
         } else {
-            this.#appendChildComponent(component);
+            this._appendChildComponent(component);
         }
         return this;
     }

src/context.js

@@ -10,14 +10,22 @@
  * @extends ScriptAndStyleContext
 */
 class PageBuilder extends ScriptAndStyleContext {
+    #autoRegisteredComponents;
     #registeredComponents;
 
     constructor() {
+        super();
+        this.#autoRegisteredComponents = [];
         this.#registeredComponents = [];
     }
 
-    registerComponent() {
-        let compName = 'comp-el-' + this.#registeredComponents.length;
+    autoRegisterComponent() {
+        let compName = 'comp-el-' + this.#autoRegisteredComponents.length;
+        this.#autoRegisteredComponents.push(compName);
+        return compName;
+    }
+
+    registerComponent(compName) {
         this.#registeredComponents.push(compName);
         return compName;
     }

src/context/extStore.js

@@ -94,7 +94,6 @@ class InternalExtStore extends ExtStore{
      */
     constructor(typeName) {
         super(typeName);
-        this.type = typeName;
         this.position = ExtStoragePos.WITHIN;
     }
 }
@@ -105,6 +104,7 @@ class ExtExtStorage extends ExtStore{
      * @param {string} type 
      */
     constructor(typeName) {
+        super(typeName);
         this.type = typeName;
     }
 

src/context/scriptAndStyleContext.js

@@ -211,6 +211,7 @@ class ScriptAndStyleContext {
       * - function tag(s)
       * - sets and registers repeatedly executed functions
       * - sets (timeout and) functions that are supposed to be executed after load
+      * @class ScriptAndStyleContext
       */
     generate() {
         let head = document.querySelector('head');

src/modifier.js

@@ -163,9 +163,9 @@ class Modifier {
      * @returns {Modifier} this modifier object
      */
     border(border) {
-        if (border._shape){
+        if (border._shape) {
             this.clip(border._shape);
-        }else if(this._shape){
+        } else if (this._shape) {
             border._shape = this._shape;
         }
         border.toModifications()
@@ -183,7 +183,7 @@ class Modifier {
         this._modifications["border-radius"] = shape.getOrderedValues().join(' ');
         return this;
     }
-
+   
     /**
      * 
      * @param {number} size of width and height in pixels