Refactor logic components

Author: electrikmilk

src/components/Logic.js

@@ -5,38 +5,17 @@
 import {Element} from '../element.js';
 import {onWindowResize} from '../window.js';
 
-export const If = {
-    True(condition, elements) {
-        return new ConditionalElement(condition, elements, true);
-    },
-    False(condition, elements) {
-        return new ConditionalElement(condition, elements, false);
-    },
-    DeviceMobile: (elements) => {
-        return new MobileElement(elements);
-    },
-    DeviceNotMobile: (elements) => {
-        return new NonMobileElement(elements);
-    },
-    DeviceSmall: (elements) => {
-        return new SmallDeviceFilter(elements);
-    },
-    DeviceMedium: (elements) => {
-        return new MediumDeviceFilter(elements);
-    },
-    DeviceLarge: (elements) => {
-        return new LargeDeviceFilter(elements);
-    }
-};
+export function If(condition, elements) {
+    return new ConditionalElement(condition, elements, true);
+}
 
 class ConditionalElement extends Element {
-    constructor(condition, elements, evalTo) {
+    constructor(condition, elements) {
         const element = document.createElement('span');
         super(element);
         this.element = element;
-        this.evalTo = evalTo;
         this.condition = condition;
-        if ((this.condition) === this.evalTo) {
+        if ((this.condition) === true) {
             this.elements = elements;
         }
     }
@@ -49,7 +28,7 @@ class ConditionalElement extends Element {
     }
 
     ElseIf(condition, elements) {
-        if ((condition) === this.evalTo) {
+        if ((condition) === true) {
             this.elements = elements;
         }
         return this;
@@ -75,7 +54,7 @@ class SwitchElement extends Element {
     Case(conditional, elements) {
         this.cases[`${conditional}`] = {
             conditional: conditional,
-            elements: elements
+            elements: elements,
         };
         return this;
     }
@@ -102,6 +81,24 @@ class SwitchElement extends Element {
     }
 }
 
+export const Device = {
+    Mobile: (elements) => {
+        return new MobileElement(elements);
+    },
+    NotMobile: (elements) => {
+        return new NonMobileElement(elements);
+    },
+    Small: (elements) => {
+        return new SmallDeviceFilter(elements);
+    },
+    Medium: (elements) => {
+        return new MediumDeviceFilter(elements);
+    },
+    Large: (elements) => {
+        return new LargeDeviceFilter(elements);
+    },
+};
+
 class MobileElement extends Element {
     constructor(elements) {
         const element = document.createElement('span');
@@ -185,4 +182,4 @@ class LargeDeviceFilter extends DeviceFilter {
             this.element.style.display = 'none';
         }
     }
-}
+}

src/components/Repeat.js

@@ -2,38 +2,21 @@
  * Copyright (c) 2023 Brandon Jordan
  */
 
-import {Element} from "../element.js";
+import {Element} from '../element.js';
 
-export const Repeat = {
-    For(items, callback) {
-        return new ForElement(items, callback);
-    },
-    Each(items, callback) {
-        return new ForEachElement(items, callback);
-    }
+export function ForEach(items, callback) {
+    return new ForEachElement(items, callback);
 }
 
-class ForElement extends Element {
+class ForEachElement extends Element {
     constructor(items, callback) {
         const element = document.createElement('span');
         super(element);
         this.element = element;
         this.elements = [];
         for (let key in items) {
             const value = items[key];
-            this.elements.push(...callback(key, value));
+            this.elements.push(...callback(value, key));
         }
     }
 }
-
-class ForEachElement extends Element {
-    constructor(items, callback) {
-        const element = document.createElement('span');
-        super(element);
-        this.element = element;
-        this.elements = [];
-        items.forEach((item, index) => {
-            this.elements.push(...callback(item, index));
-        });
-    }
-}