No commit message

smtdfc · Aug 11, 2023 · 3d17a60 · 3d17a60
1 parent 3d820ba
commit 3d17a60
Show file tree

Hide file tree

Showing 3 changed files with 101 additions and 62 deletions.
diff --git a/src/Component/Component.js b/src/Component/Component.js
@@ -52,8 +52,11 @@ export class TurtleComponent extends HTMLElement {
       }
 
       await this.controller.beforeRender()
+
+
       requestAnimationFrame(() => {
-        updateDOM(this.#refNodes, this)
+
+        updateDOM(this.#refNodes, this.controller)
 
         Promise.all([
 					this.controller.onFirstRender(),
@@ -66,7 +69,7 @@ export class TurtleComponent extends HTMLElement {
       }
       await this.controller.beforeRender()
       requestAnimationFrame(() => {
-        updateDOM(this.#refNodes, this)
+        updateDOM(this.#refNodes, this.controller)
         Promise.all([
 					this.controller.onRerender(),
 					this.controller.onRender()
@@ -105,6 +108,7 @@ export class TurtleStaticComponent extends HTMLElement {
     this.isStaticComponent = true
     this.controller = new ComponentController(this)
   }
+
   ref(name) {
     return new TurtleElement(this.#refNodes.refElementNodes[name])
   }
@@ -116,7 +120,7 @@ export class TurtleStaticComponent extends HTMLElement {
     this.after(this.contents)
     await this.controller.beforeRender()
     requestAnimationFrame(() => {
-      updateDOM(this.#refNodes, this)
+      updateDOM(this.#refNodes, this.controller)
       Promise.all([
     	  this.controller.onFirstRender(),
     		this.controller.onRender()

diff --git a/src/Component/Controller.js b/src/Component/Controller.js
@@ -2,36 +2,63 @@ export class ComponentController {
   constructor(component) {
     this.component = component
   }
+
   setState(name, value) {
     this.component.states[name] = value
-
     this.onStateChange(name, value)
     if (!this.component.isStatic) {
       if (this.component.shouldRerender == true && (this.component.rerenderDependentStates == null || this.component.rerenderDependentStates.includes(name))) {
         this.component.requestRender()
       }
     }
   }
+
+  createReducer(state, callback) {
+    let context = this
+    return function(value) {
+      if (state) {
+        context.setState(state, callback(value,context.states[state]))
+      }
+
+    }
+  }
+
+
+  get states() {
+    return this.component.states
+  }
+
+  get props() {
+    return this.component.props
+  }
+
+  get data() {
+    return this.component.data
+  }
+
   set useShadowDOM(s) {
     if (!this.component.isStatic) {
       if (s) {
-        this.component.attackShadow({
+        this.component.attachShadow({
           mode: "open"
         })
-        this.useShadowDOM = true
+        this.component.usingShadowDOM = true
       } else {
-        this.useShadowDOM = false
+        this.component.usingShadowDOM = false
       }
     }
   }
-  get states() {
-    return this.component.states
+
+  requestRender() {
+    this.component.requestRender()
   }
+
+
+
   ref(name) {
-
-      return this.component.ref(name)
-
+    return this.component.ref(name)
   }
+
   onStateChange(stateName, value) {}
   onCreate() {}
   onRemove() {}

diff --git a/src/Component/DOMProcess.js b/src/Component/DOMProcess.js
@@ -1,54 +1,62 @@
 function matches(content) {
-	return /{{(.*?)}}/g.test(content)
+  return /{{(.*?)}}/g.test(content)
 }
 
-export function processDOM(dom,child=false,freeze=false){
-	let refTextNodes =[]
-	let refElementNodes = {}
-	let refAttrs = []
-	let nodes = Array.from(dom.childNodes)
-	for (let i in nodes) {
-		let node = nodes[i]
-		let parent = node.parentNode
-		if(node.nodeType === Node.TEXT_NODE && !freeze){
-			if(matches(node.textContent)){
-				refTextNodes.push({
-					node:node,
-					parent:parent,
-					content:node.textContent,
-				})
-			}
-		}
-
-		if(node.nodeType == Node.ELEMENT_NODE){
-
-			Array.from(node.attributes).forEach((attr) => {
-				if (!freeze && matches(attr.value)) {
-					refAttrs.push({
-						node: node,
-						name: attr.localName,
-						value: attr.value,
-						attr:attr,
-						parent:parent
-					})
-				}
-				if (attr.localName == "ref") {
-				  node.removeAttribute("ref")
-					refElementNodes[attr.value] = node
-				}
-			})
-			if(node.childNodes.length>0){
-				let refs = processDOM(node,true,freeze)
-				refTextNodes.push(...refs.refTextNodes)
-				refAttrs.push(...refs.refAttrs)
-				let en = refs.refElementNodes
-				refElementNodes={...refElementNodes,...en}
-			}
-		}
-	}
-	return {
-		refTextNodes,
-		refAttrs,
-		refElementNodes
-	}
+export function processDOM(dom, child = false, freeze = false) {
+  let refTextNodes = []
+  let refEvents = []
+  let refElementNodes = {}
+  let refAttrs = []
+  let nodes = Array.from(dom.childNodes)
+  for (let i in nodes) {
+    let node = nodes[i]
+    let parent = node.parentNode
+    if (node.nodeType === Node.TEXT_NODE && !freeze) {
+      if (matches(node.textContent)) {
+        refTextNodes.push({
+          node: node,
+          parent: parent,
+          content: node.textContent,
+        })
+      }
+    }
+
+    if (node.nodeType == Node.ELEMENT_NODE) {
+      Array.from(node.attributes).forEach((attr) => {
+        if (node.childNodes.length > 0) {
+          let refs = processDOM(node, true, freeze)
+          refTextNodes.push(...refs.refTextNodes)
+          refAttrs.push(...refs.refAttrs)
+          refEvents.push(...refs.refEvents)
+          let en = refs.refElementNodes
+          refElementNodes = { ...refElementNodes, ...en }
+        }
+
+
+        if (!freeze && matches(attr.value)) {
+          refAttrs.push({
+            node: node,
+            name: attr.localName,
+            value: attr.value,
+            attr: attr,
+            parent: parent
+          })
+        }
+
+        if (attr.localName == "ref") {
+          node.removeAttribute("ref")
+          refElementNodes[attr.value] = node
+        }
+
+      })
+
+
+    }
+  }
+  return {
+    refTextNodes,
+    refAttrs,
+    refElementNodes,
+    refEvents
+  }
 }