v3.10.2 (#262 from HapticX/dev)

fix rendering system, implement JS sugar for SPA

Author: Ethosa

examples/website/src/components/button.nim

@@ -24,10 +24,10 @@ component Button:
           "flex justify-center items-center font-bold text-lg cursor-pointer select-none"
     ):
       if self.flat:
-        tDiv(class = "px-2 text-4xl lg:text-2xl xl:text-base md:px-4 xl:px-8 py-1 text-[{Foreground}] dark:text-[{ForegroundDark}] hover:opacity-80 active:opacity-60 duration-300"):
+        tDiv(class = "px-2 text-4xl lg:text-2xl xl:text-base md:px-4 xl:px-6 py-1 text-[{Foreground}] dark:text-[{ForegroundDark}] hover:opacity-80 active:opacity-60 duration-300"):
           slot
       else:
-        tDiv(class = "px-2 text-4xl lg:text-2xl xl:text-base md:px-4 xl:px-8 py-1 text-[{Background}] dark:text-[{BackgroundDark}] rounded-md bg-[{Orange}] dark:bg-[{Yellow}] hover:opacity-90 active:opacity-75 duration-300"):
+        tDiv(class = "px-2 text-4xl lg:text-2xl xl:text-base md:px-4 xl:px-6 py-1 text-[{Background}] dark:text-[{BackgroundDark}] rounded-md bg-[{Orange}] dark:bg-[{Yellow}] hover:opacity-90 active:opacity-75 duration-300"):
           slot
       @click:
         self.action()

examples/website/src/components/code_block_guide.nim

@@ -113,40 +113,29 @@ component CodeBlockGuide:
                     source = self.CodeBlockGuide.sources.val[i]
                     playButton = document.getElementById(fmt"{source.id}play_button{self.uniqCompId}")
                     playResult = document.getElementById(fmt"{source.id}play_result{self.uniqCompId}")
-                    playStates: seq[tuple[text, html, lang: cstring, waitMs: int]] = source.playResult.states
                   var idx = 0
 
                   playButton.classList.add("hidden")
                   playResult.classList.remove("hidden")
                   playResult.innerHTML = ""
-                
-                  proc hiddenProc(text, html, lang: cstring, waitMs: int) =
-                    if text.len == 0 and html.len == 0:
-                      playButton.classList.remove("hidden")
-                      playResult.classList.add("hidden")
-                    elif html.len != 0:
-                      playResult.innerHTML &= html
-                    else:
-                      playResult.innerHTML &= fmt"""<pre><code id="{self.uniqCompId}{lang}{idx}" language="{lang}" class="language-{lang}" style="padding-top: 0 !important; padding-bottom: 0 !important;">{text}</code></pre>"""
-                      let id: cstring = fmt"{self.uniqCompId}{lang}{idx}"
-                      inc idx
-                      buildJs:
-                        let codeBlock = document.getElementById(~id)
-                        hljs.highlightElement(codeBlock)
 
-                  {.emit: """//js
-                  const playStates = [...`playStates`];
-                  let timeout = 0;
-
-                  playStates.forEach(state => {
-                    timeout += state.Field3;
-                    setTimeout(
-                      () => `hiddenProc`(state.Field0, state.Field1, state.Field2, state.Field3),
-                      timeout
-                    );
-                    console.log(state.Field0, state.Field1, state.Field2, state.Field3);
-                  });
-                  """.}
+                  var timeout = 0
+                  for j in self.CodeBlockGuide.sources.val[i].playResult.states:
+                    timeout += j.waitMs
+                    withVariables j:
+                      withTimeout timeout, t:
+                        if j.text.len == 0 and j.html.len == 0:
+                          playButton.classList.remove("hidden")
+                          playResult.classList.add("hidden")
+                        elif j.html.len != 0:
+                          playResult.innerHTML &= j.html
+                        else:
+                          playResult.innerHTML &= fmt"""<pre><code id="{self.uniqCompId}{j.lang}{idx}" language="{j.lang}" class="language-{j.lang}" style="padding-top: 0 !important; padding-bottom: 0 !important;">{j.text}</code></pre>"""
+                          let id: cstring = fmt"{self.uniqCompId}{j.lang}{idx}"
+                          inc idx
+                          buildJs:
+                            let codeBlock = document.getElementById(~id)
+                            hljs.highlightElement(codeBlock)
               tDiv(id = "{source.id}play_result", class = "w-full pb-4")
       if not haslanguage(self.CodeBlockGuide, currentLanguage.val):
         tCode(

examples/website/src/components/code_block_slider.nim

@@ -83,12 +83,10 @@ component CodeBlockSlider:
           else:
             0
         )
-        {.emit: """//js
-        setTimeout(() => { `upd`() }, 5000);
-        """.}
-      {.emit: """//js
-      setTimeout(() => { `upd`() }, 5000);
-      """.}
+        withTimeout 5000, t:
+          upd()
+      withTimeout 5000, t:
+        upd()
 
     proc updateIndex(idx: int) =
       if self.index.isNil():

examples/website/src/components/drawer.nim

@@ -109,21 +109,11 @@ component Drawer:
 
   [methods]:
     proc toggle*() =
-      enableRouting = false
       let
         drawerBack = document.getElementById("drawerBack" & self.uniqCompId)
         drawer = document.getElementById("drawer" & self.uniqCompId)
-      self.isOpen.set(not self.isOpen)
-      if self.isOpen:
-        drawerBack.classList.remove("opacity-0")
-        drawerBack.classList.add("opacity-100")
-        drawerBack.classList.remove("pointer-events-none")
-        drawer.classList.remove("translate-x-full")
-        drawer.classList.add("translate-x-0")
-      else:
-        drawerBack.classList.remove("opacity-100")
-        drawerBack.classList.add("opacity-0")
-        drawerBack.classList.add("pointer-events-none")
-        drawer.classList.remove("translate-x-0")
-        drawer.classList.add("translate-x-full")
-      enableRouting = true
+      drawerBack.classList.toggle("opacity-0")
+      drawerBack.classList.toggle("opacity-100")
+      drawerBack.classList.toggle("pointer-events-none")
+      drawer.classList.toggle("translate-x-full")
+      drawer.classList.toggle("translate-x-0")

examples/website/src/components/guide_page.nim

@@ -13,7 +13,7 @@ component GuidePage:
 
   `template`:
     tDiv(
-      class = "flex flex-col text-3xl lg:text-xl xl:text-base w-full h-full px-4 lg:px-12 xl:px-24 py-2 bg-[{BackgroundSecondary}] dark:bg-[{BackgroundSecondaryDark}] gap-8"
+      class = "flex flex-col text-3xl lg:text-xl xl:text-base w-full h-full px-4 lg:px-12 xl:px-16 py-2 bg-[{BackgroundSecondary}] dark:bg-[{BackgroundSecondaryDark}] gap-8"
     ):
       tDiv(class = "flex flex-col gap-4"):
         case currentGuidePage.val

examples/website/src/components/header.nim

@@ -33,8 +33,8 @@ component Header:
         ):
           tDiv(class = "flex items-center gap-4"):
             tSvg(
-              width="98", height="96", viewBox = "0 0 98 96", xmlns="http://www.w3.org/2000/svg",
-              class = "h-6 w-6 fill-[{Background}] dark:fill-[{BackgroundDark}]"
+              class = "h-6 w-6 fill-[{Background}] dark:fill-[{BackgroundDark}]",
+              width = "98", height = "96", viewBox = "0 0 98 96", xmlns = "http://www.w3.org/2000/svg"
             ):
               tPath(
                 d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z"

examples/website/src/docs/ssr_basics.nim

@@ -40,7 +40,7 @@ component SsrBasics:
       tH2: {translate"Helpful Routes 🔌"}
       if currentLanguage == "Nim":
         tP:
-          {translate"HappyX has additional helpful routes - setup, middleware, notfound, and staticDir"}
+          {translate"HappyX has additional useful routes - setup, middleware, notfound, onException, and staticDir"}
       else:
         tP:
           {translate"HappyX has additional helpful routes - middleware, notfound and static directories"}

examples/website/src/pages/guide.nim

@@ -19,11 +19,11 @@ mount UserGuide:
       # Header
       tDiv(class = "w-full sticky top-0 z-20"):
         Header(drawer = drawer_comp)
-      tDiv(class = "flex w-full h-full gap-8 px-4"):
+      tDiv(class = "flex w-full h-full gap-8"):
         # SideBar
-        tDiv(class = "fixed top-0 pt-16 w-80"):
+        tDiv(class = "fixed top-0 pt-16 w-96"):
           SideBar
-        tDiv(class = "pl-0 xl:pl-80 w-full"):
+        tDiv(class = "pl-0 xl:pl-96 w-full"):
           GuidePage(link)
       tStyle:
         {fmt"""

examples/website/src/ui/code/nim_ssr.nim

@@ -155,6 +155,12 @@ serve "127.0.0.1", 5000:
   
   notfound:
     return "Oops, seems like this route is not available"
+  
+  onException:
+    echo e.msg
+    echo e.name
+    statusCode = 500
+    return "Oops, seems like some error was raised"
 
   staticDir "/path/to/directory" -> "directory"
 """

examples/website/src/ui/translations.nim

@@ -1154,12 +1154,12 @@ translatable:
     "zh" -> "有用的路由 🔌"
     "fr" -> "Itinéraires utiles 🔌"
     "ko" -> "도움말 라우트 🔌"
-  "HappyX has additional helpful routes - setup, middleware, notfound, and staticDir":
-    "ru" -> "У HappyX есть дополнительные полезные маршруты - setup, middleware, notfound и staticDir"
-    "ja" -> "HappyXには追加の便利なルートがあります - setup、middleware、notfound、およびstaticDir"
-    "zh" -> "HappyX具有额外的有用路由 - setup、middleware、notfound和staticDir"
-    "fr" -> "HappyX dispose de routes supplémentaires utiles - setup, middleware, notfound et staticDir"
-    "ko" -> "HappyX에는 추가로 유용한 라우트가 있습니다 - setup, middleware, notfound 및 staticDir"
+  "HappyX has additional useful routes - setup, middleware, notfound, onException, and staticDir":
+    "ru" -> "У HappyX есть дополнительные полезные маршруты - setup, middleware, notfound, onException и staticDir"
+    "ja" -> "HappyXには追加の便利なルートがあります - setup、middleware、notfound、onException、およびstaticDir"
+    "zh" -> "HappyX还有其他有用的路由 - setup、middleware、notfound、onException和staticDir"
+    "fr" -> "HappyX dispose de routes supplémentaires utiles - setup, middleware, notfound, onException et staticDir"
+    "ko" -> "HappyX에는 추가로 유용한 경로가 있습니다 - setup, middleware, notfound, onException 및 staticDir"
   "HappyX has additional helpful routes - middleware, notfound and static directories":
     "ru" -> "У HappyX есть дополнительные полезные маршруты - middleware, notfound и статические каталоги"
     "ja" -> "HappyXには追加の便利なルートがあります - ミドルウェア、notfound、および静的ディレクトリ"

happyx.nimble

@@ -2,7 +2,7 @@
 
 description = "Macro-oriented asynchronous web-framework written with ♥"
 author = "HapticX"
-version = "3.10.1"
+version = "3.10.2"
 license = "MIT"
 srcDir = "src"
 installExt = @["nim"]

src/happyx.nim

@@ -302,11 +302,15 @@ when not defined(js):
 import
   happyx/core/[exceptions, constants, queries],
   happyx/sugar/[use, sgr, js, style],
-  happyx/spa/[renderer, state, components, translatable, tag, spa_utils],
+  happyx/spa/[renderer, state, components, translatable, tag],
   happyx/tmpl_engine/[engine],
   happyx/routing/[mounting, routing, decorators],
   happyx/ssr/utils
 
+when defined(js):
+  import happyx/spa/spa_utils
+  export spa_utils
+
 
 when enableApiDoc and not defined(js) and not exportPython and not exportJvm:
   import happyx/ssr/docs/open_api
@@ -329,8 +333,7 @@ export
   mounting,
   sgr,
   js,
-  utils,
-  spa_utils
+  utils
 
 
 # Language bindings

src/happyx/core/constants.nim

@@ -95,7 +95,7 @@ const
   # Framework version
   HpxMajor* = 3
   HpxMinor* = 10
-  HpxPatch* = 1
+  HpxPatch* = 2
   HpxVersion* = $HpxMajor & "." & $HpxMinor & "." & $HpxPatch
 
 

src/happyx/private/macro_utils.nim

@@ -908,7 +908,8 @@ proc buildHtmlProcedure*(root, body: NimNode, inComponent: bool = false,
                 )
               ),
               newCall(
-                "eventListener", ident("__el" & $elemEventId), newLit(event), procedure.body
+                "eventListener", ident("__el" & $elemEventId), newLit(event),
+                newNimNode(nnkBlockStmt).add(newEmptyNode(), procedure.body)
               ),
               newNimNode(nnkPragma).add(
                 newNimNode(nnkExprColonExpr).add(
@@ -1008,7 +1009,8 @@ proc buildHtmlProcedure*(root, body: NimNode, inComponent: bool = false,
                 )
               ),
               newCall(
-                "eventListener", ident("__el" & $elemEventId), newLit(event), procedure.body
+                "eventListener", ident("__el" & $elemEventId), newLit(event),
+                newNimNode(nnkBlockStmt).add(newEmptyNode(), procedure.body)
               ),
               newNimNode(nnkPragma).add(
                 newNimNode(nnkExprColonExpr).add(

src/happyx/spa/renderer.nim

@@ -262,6 +262,7 @@ else:
 when defined(js):
   proc renderVdom*(app: App, tag: TagRef, force: bool = false) =
     ## Rerender DOM with VDOM
+    echo 1
     var realDom = document.getElementById(app.appId).Node
     realDom.innerHTML = ""
     realDom.appendChild(tag)