diff --git a/fileOrder.json b/fileOrder.json
new file mode 100644
index 0000000..026ae03
--- /dev/null
+++ b/fileOrder.json
@@ -0,0 +1,170 @@
+{
+    "orderedGroups": {
+        "pure_stylings": [
+            "color.js",
+            "alignment.js",
+            "arrangement.js"
+        ],
+        "size_sidings": [
+            "siding.js",
+            "shapes.js",
+            "border.js",
+            "dimensions.js"
+        ],
+        "behaviour_modifications": [
+            "commonEvents.js",
+            "contextMenu.js",
+            "dragAndDrop.js"
+        ],
+        "pre_context": [
+            "webTrinity.js",
+            "extStore.js",
+            "generalHelpers.js"
+        ],
+        "modifier": [
+            "modifier.js"
+        ],
+        "component": [
+            "wrapperComponent.js",
+            "modifiableComponent.js",
+            "addStyleAndFunctions.js",
+            "component.js"
+        ],
+        "builder": [
+            "baseComponents.js",
+            "builder.js"
+        ],
+        "extensions": [
+            "extension.js"
+        ],
+        "app_context": [
+            "scriptAndStyleContext.js",
+            "framework-controls.js",
+            "context.js"
+        ]
+    },
+    "keys": [
+        "color.js",
+        "alignment.js",
+        "arrangement.js",
+        "siding.js",
+        "shapes.js",
+        "border.js",
+        "dimensions.js",
+        "commonEvents.js",
+        "contextMenu.js",
+        "dragAndDrop.js",
+        "webTrinity.js",
+        "extStore.js",
+        "generalHelpers.js",
+        "modifier.js",
+        "wrapperComponent.js",
+        "modifiableComponent.js",
+        "addStyleAndFunctions.js",
+        "component.js",
+        "baseComponents.js",
+        "builder.js",
+        "extension.js",
+        "scriptAndStyleContext.js",
+        "framework-controls.js",
+        "context.js"
+    ],
+    "objects": {
+        "color.js": {
+            "name": "color.js",
+            "folder": "src"
+        },
+        "alignment.js": {
+            "name": "alignment.js",
+            "folder": "src"
+        },
+        "arrangement.js": {
+            "name": "arrangement.js",
+            "folder": "src"
+        },
+        "siding.js": {
+            "name": "siding.js",
+            "folder": "src/sizeSide"
+        },
+        "shapes.js": {
+            "name": "shapes.js",
+            "folder": "src/sizeSide"
+        },
+        "border.js": {
+            "name": "border.js",
+            "folder": "src/sizeSide"
+        },
+        "dimensions.js": {
+            "name": "dimensions.js",
+            "folder": "src/sizeSide"
+        },
+        "commonEvents.js": {
+            "name": "commonEvents.js",
+            "folder": "src"
+        },
+        "contextMenu.js": {
+            "name": "contextMenu.js",
+            "folder": "src/modifications"
+        },
+        "dragAndDrop.js": {
+            "name": "dragAndDrop.js",
+            "folder": "src/modifications"
+        },
+        "webTrinity.js": {
+            "name": "webTrinity.js",
+            "folder": "src/context"
+        },
+        "extStore.js": {
+            "name": "extStore.js",
+            "folder": "src/context"
+        },
+        "generalHelpers.js": {
+            "name": "generalHelpers.js",
+            "folder": "src/context"
+        },
+        "modifier.js": {
+            "name": "modifier.js",
+            "folder": "src"
+        },
+        "wrapperComponent.js": {
+            "name": "wrapperComponent.js",
+            "folder": "src/componentAncestry"
+        },
+        "modifiableComponent.js": {
+            "name": "modifiableComponent.js",
+            "folder": "src/componentAncestry"
+        },
+        "addStyleAndFunctions.js": {
+            "name": "addStyleAndFunctions.js",
+            "folder": "src/componentAncestry"
+        },
+        "component.js": {
+            "name": "component.js",
+            "folder": "src"
+        },
+        "baseComponents.js": {
+            "name": "baseComponents.js",
+            "folder": "src"
+        },
+        "builder.js": {
+            "name": "builder.js",
+            "folder": "src"
+        },
+        "extension.js": {
+            "name": "extension.js",
+            "folder": "src/extensions"
+        },
+        "scriptAndStyleContext.js": {
+            "name": "scriptAndStyleContext.js",
+            "folder": "src/context"
+        },
+        "framework-controls.js": {
+            "name": "framework-controls.js",
+            "folder": "src/context"
+        },
+        "context.js": {
+            "name": "context.js",
+            "folder": "src"
+        }
+    }
+}
\ No newline at end of file
diff --git a/generate_single_file.js b/generate_single_file.js
new file mode 100644
index 0000000..12c42f3
--- /dev/null
+++ b/generate_single_file.js
@@ -0,0 +1,156 @@
+const fs = require('fs/promises');
+const path = require('path');
+
+/**
+ * purely convienience 
+ */
+class FileDependecy {
+    name;
+    folder;
+    path() {
+        return this.folder + '/' + this.name;
+    }
+}
+
+/**
+ * Ordered Access Object
+ * purely convienience 
+ */
+class OAO {
+    constructor() {
+        /**
+         * @type {boolean|Map<string,FileDependecy>}
+         */
+        this.orderedGroups
+        /**
+         * @type {Array<string>}
+         */
+        this.keys = [];
+        /**
+         * @type {map<string, FileDependecy>}
+         */
+        this.objects = {};
+        /**
+         * @type {boolean}
+         */
+        this.isOrdered = false;
+    }
+}
+
+let fileOrder = Object.assign(new OAO(), require('./fileOrder.json'));
+
+fileOrder.objects = fileOrder.keys
+    .reduce((a, fileName) => Object.assign(
+        a,
+        { [fileName]: Object.assign(new FileDependecy(), fileOrder.objects[fileName]) }
+    ), {});
+
+/**
+ * Kept for future reference, might be that we will return to the dependency resolvement approach.
+ * @param {OAO} oao 
+ * @returns {OAO}
+ */
+function resolveDependencyOrder(oao) {
+    let roots = oao.keys.filter(k => oao.objects[k].dependencies.length === 0);
+
+    let folderList = [...new Set(oao.keys.map(k => oao.objects[k].folder))];
+
+    console.log("Folders", folderList);
+
+    /**
+     * 
+     * @param {OAO} oao 
+     * @param {Array<Array<string>>} dealt 
+     */
+    function recursiveResolvement(oao, dealtLvls, dealt) {
+        const arrsEqualSize = (arr1, arr2) => arr1.length === arr2.length;
+        const arrHasAll = (arr1, arr2) => arr2.every(k => arr1.includes(k))
+
+        if (oao.keys.length === dealt.length) {
+            return [...dealt, ...current];
+        } else {
+            console.log(`Received ${dealt.length} dealt of ${oao.keys.length}`);
+        }
+
+        let remaining = oao.keys
+            .filter(k => !dealt.includes(k));
+
+        if (remaining.length < 2) {
+            return [...dealt, ...remaining];
+        }
+
+        let current = remaining
+            .filter(k => oao.objects[k].dependencies.every(sk => dealt.includes(sk)));
+
+        if (current.length === 0) {
+            console.log("Couldn't resolve", remaining);
+            return remaining;
+        }
+
+        dealtLvls.push(current);
+
+        if (arrsEqualSize(remaining, current)) {
+            return [...dealt, ...current];
+        }
+
+        return recursiveResolvement(oao, dealtLvls, [...dealt, ...current]);
+    }
+
+    let recursiveResolved = recursiveResolvement(oao, [roots], roots);
+
+    recursiveResolved
+        .forEach((k, i) => {
+            oao.objects[k].orderNr = i;
+        });
+
+    oao.isOrdered = recursiveResolved.slice(-1).length <= 2;
+    if (oao.isOrdered) {
+        oao.keys = recursiveResolved;
+    }
+    return oao;
+}
+
+
+function appendContent(srcFile, targetFile) {
+    return fs.readFile(srcFile, 'utf8')
+        .then(content => {
+            console.log(`Processing '${srcFile}'`);
+            console.log(`           READ: successfully!`)
+            console.log(`           Attepting to append`);
+            return fs.appendFile(targetFile, content);
+        })
+        .then(() => {
+            console.log(`           Append/Write: successfully!`);
+        })
+        .catch(error => {
+            console.error(`Error reading/writing files: ${error.message}`);
+        })
+}
+
+
+let orderedJoinList = Object.keys(fileOrder.orderedGroups)
+    .flatMap(groupName => fileOrder.orderedGroups[groupName])
+    .map(fileName => fileOrder.objects[fileName].path());
+
+/*
+// Kept for future reference, might be that we will return to the dependency resolvement approach.
+fileOrder = resolveDependencyOrder(fileOrder);
+
+let orderedJoinList = fileOrder.keys
+    .map(fileName => fileOrder.objects[k].path());
+*/
+
+
+
+const targetFile = "./jpc-like-websites.js";
+console.log("(Re-) Creating target file: '" + targetFile + "'");
+
+
+/* EMPTY (create?) TARGET FILE */
+fs.writeFile(targetFile, "", err => { })
+
+orderedJoinList
+    .reduce((prevPromise, filePath) => prevPromise
+    .then(
+        ()=>appendContent(filePath, targetFile)
+    ), Promise.resolve())
diff --git a/join_js_files.sh b/join_js_files.sh
index e4229db..9a3128f 100644
--- a/join_js_files.sh
+++ b/join_js_files.sh
@@ -7,56 +7,5 @@ SRC="src"
 # Third "HIGHER_LIST" come several of the commons, the context as well as component 
 # and thoose that use component.
 
-SIZE_SIDE="siding.js shapes.js border.js dimensions.js"
-CONTEXT="generalHelpers.js webTrinity.js extStore.js scriptAndStyleContext.js"
-PRE_ANCESTRY="commonEvents.js context.js"
-MODIFIERS_LIST="alignment.js arrangement.js modifier.js" 
-MODIFICATIONS_LIST="dragAndDrop.js"
-COMPONENT_ANCESTRY="wrapperComponent.js modifiableComponent.js addStyleAndFunctions.js"
-HIGHER_LIST="component.js baseComponents.js builder.js"
-
 echo "" > $TARGET
-echo "/* ## color.js ## */" >> $TARGET
-cat $SRC/color.js >> $TARGET
-
-echo "/* # SIZE_SIDE # */" >> $TARGET
-for i in $SIZE_SIDE; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/sizeSide/$i >> $TARGET
-done
-
-echo "/* # CONTEXT # */" >> $TARGET
-for i in $CONTEXT; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/context/$i >> $TARGET
-done
-
-echo "/* # PRE_ANCESTRY # */" >> $TARGET
-for i in $PRE_ANCESTRY; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/$i >> $TARGET
-done
-
-echo "/* # MODIFIERS_LIST # */" >> $TARGET
-for i in $MODIFIERS_LIST; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/$i >> $TARGET
-done
-
-echo "/* # MODIFICATIONS_LIST # */" >> $TARGET
-for i in $MODIFICATIONS_LIST; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/modifications/$i >> $TARGET
-done
-
-echo "/* # COMPONENT_ANCESTRY # */" >> $TARGET
-for i in $COMPONENT_ANCESTRY; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/componentAncestry/$i >> $TARGET
-done
-
-echo "/* # HIGHER_LIST # */" >> $TARGET
-for i in $HIGHER_LIST; do
-    echo "/* ## $i ## */" >> $TARGET
-    cat $SRC/$i >> $TARGET
-done
+node generate_single_file.js