add functional components (#265)

Ethosa · Ethosa · commit e976c43c7168 · 2024-05-11T21:56:58.000+07:00
diff --git a/happyx.nimble b/happyx.nimble
@@ -2,7 +2,7 @@
 
 description = "Macro-oriented asynchronous web-framework written with ♥"
 author = "HapticX"
-version = "3.10.2"
+version = "3.11.0"
 license = "MIT"
 srcDir = "src"
 installExt = @["nim"]
diff --git a/src/happyx/core/constants.nim b/src/happyx/core/constants.nim
@@ -94,8 +94,8 @@ const
   nim_2_0_0* = (NimMajor, NimMinor, NimPatch) >= (2, 0, 0)
   # Framework version
   HpxMajor* = 3
-  HpxMinor* = 10
-  HpxPatch* = 2
+  HpxMinor* = 11
+  HpxPatch* = 0
   HpxVersion* = $HpxMajor & "." & $HpxMinor & "." & $HpxPatch
 
 
diff --git a/src/happyx/private/macro_utils.nim b/src/happyx/private/macro_utils.nim
@@ -690,6 +690,20 @@ proc buildHtmlProcedure*(root, body: NimNode, inComponent: bool = false,
               else:
                 newCall("tag", statement[0])
             ),
+            newNimNode(nnkElifBranch).add(
+              newCall(
+                "and",
+                newCall("declared", compName),
+                newCall("is", compName, newNimNode(nnkProcTy)),
+              ), newStmtList(
+                block:
+                  var call = newCall(compName)
+                  for i in statement[1..^2]:
+                    call.add(i)
+                  call.add(newCall("buildHtml", statement[^1]))
+                  call
+              )
+            ),
             newNimNode(nnkElifBranch).add(
               newCall(
                 "and",
@@ -734,7 +748,25 @@ proc buildHtmlProcedure*(root, body: NimNode, inComponent: bool = false,
         whenStmt[0].add(useComponent(compStatement, inCycle, inComponent, cycleTmpVar, compTmpVar, cycleVars, constructor = true))
       # Component default constructor
       else:
-        whenStmt[0].add(useComponent(compStatement, inCycle, inComponent, cycleTmpVar, compTmpVar, cycleVars))
+        whenStmt[0].add(
+          newNimNode(nnkWhenStmt).add(
+            newNimNode(nnkElifBranch).add(
+              newCall(
+                "and",
+                newCall("declared", compName),
+                newCall("is", compName, newNimNode(nnkProcTy)),
+              ), newStmtList(
+                block:
+                  var call = newCall(compName)
+                  for i in statement[1..^1]:
+                    call.add(i)
+                  call
+              )
+            ), newNimNode(nnkElse).add(
+              useComponent(compStatement, inCycle, inComponent, cycleTmpVar, compTmpVar, cycleVars)
+            )
+          )
+        )
       
       result.add(whenStmt)
     
@@ -1129,6 +1161,17 @@ proc buildHtmlProcedure*(root, body: NimNode, inComponent: bool = false,
               newCall("is", statement, ident"TagRef")
             ), newCall("tag", statement)
           ),
+          newNimNode(nnkElifBranch).add(
+            newCall(
+              "and",
+              newCall("declared", compName),
+              newCall("is", compName, newNimNode(nnkProcTy)),
+            ), newStmtList(
+              block:
+                var call = newCall(compName)
+                call
+            )
+          ),
           newNimNode(nnkElifBranch).add(
             newCall("not", newCall("is", compName, ident"typedesc")),
             newStmtList(
diff --git a/tests/index17.html b/tests/index17.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title></title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <div>
+    </div>
+    <script src="testjs17.js"></script>
+  </body>
+</html>
diff --git a/tests/testjs16.nim b/tests/testjs16.nim
@@ -143,6 +143,19 @@ component ShowNum:
 randomize()
 
 
+var someValue = remember 0
+
+proc functionalComp(i: State[int], body: TagRef): TagRef =
+  ## You can pass any amount of arguments.
+  buildHtml:
+    tDiv:
+      "i is "
+      {i}
+      @click:
+        i += 1
+    body
+
+
 appRoutes "app":
   "/":
     for i in 1..5:
@@ -181,3 +194,9 @@ appRoutes "app":
       nim:
         echo inCycle, ", ", inComponent
         echo cycleCounter, ", ", compName, ", ", compCounter
+  
+  "/func-components":
+    tDiv:
+      "Here is functional components"
+      functionalComp(someValue):
+        "This is functional component slot"
diff --git a/tests/testjs17.nim b/tests/testjs17.nim
@@ -0,0 +1,49 @@
+import
+  ../src/happyx,
+  std/macros
+
+
+var someValue = remember 0
+
+proc funcComp1(i: State[int], stmt: TagRef): TagRef =
+  ## You can pass any amount of arguments.
+  buildHtml:
+    tDiv:
+      "i is "
+      {i}
+      @click:
+        i += 1
+    stmt
+
+proc funcComp2(i: State[int]): TagRef =
+  buildHtml:
+    tDiv:
+      "second comp, so `i` is {i}"
+
+proc funcComp3(): TagRef =
+  buildHtml:
+    tDiv:
+      "third comp without arguments"
+
+
+component NormalComp:
+  i: State[int]
+  html:
+    tDiv:
+      "And this is common component. i is {self.i}"
+
+
+# dumpTree:
+#   echo functionalComp is proc
+
+
+appRoutes "app":
+  "/":
+    tDiv:
+      "Here is functional components"
+      funcComp1(someValue):
+        "This is functional component slot"
+      funcComp2(someValue)
+      funcComp3()
+      funcComp3
+      NormalComp(someValue)
