update

Signed-off-by: George Lemon <[email protected]>
openpeeps · Feb 15, 2024 · 84cd929 · 84cd929
1 parent 18f1a72
commit 84cd929
Show file tree

Hide file tree

Showing 8 changed files with 173 additions and 32 deletions.
diff --git a/example/app.nim b/example/app.nim
@@ -0,0 +1,16 @@
+import ../src/tim
+import std/os
+
+var
+  engine = newTim(
+    src = "templates",
+    output = "storage",
+    basepath = currentSourcePath(),
+    minify = true,
+    indent = 2
+  )
+
+engine.precompile()
+sleep(40)
+let x = engine.render("index")
+writeFile(getCurrentDir() / "example" / "preview.html", x)
diff --git a/example/preview.html b/example/preview.html
@@ -0,0 +1,49 @@
+<!DOCKTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta content="width=device-width, initial-scale=1" name="viewport">
+    <title>Tim Engine is Awesome</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
+    <style> body{background-color:#212121;color:whitesmoke}</style>
+  </head>
+  <body>    
+    <section>
+      <div class="container">
+        <div class="row vh-100 align-items-center">
+          <div id="content-zone" class="col-lg-7 mx-auto">
+            <div class="text-center">
+              <img src="https://raw.githubusercontent.com/openpeeps/tim/main/.github/timengine.png" width="200px" alt="Tim Engine">
+            </div>
+            <h1 class="display-4 fw-bold">This is Tim Engine 👋 A super fast template engine for cool kids!</h1>
+            <p style="line-height: 1.8em" class="mb-4 h4 fw-normal px-4">Build sleek, dynamic websites and apps in a breeze with Tim Engine's intuitive    syntax and powerful features. It's the template engine that keeps up with your creativity.</p>
+            <div class="text-center">
+              <div class="mb-3">
+                <a target="_blank" class="btn btn-light btn-lg rounded-pill px-4 py-2" href="https://github.com/openpeeps/tim">
+                  <svg viewBox="0 0 24 24" width="24" stroke-width="2" class="css-i6dzq1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" height="24">
+                    <path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22">
+                    </path>
+                  </svg>
+                  <span class="fw-bold">Check it on GitHub</span>
+                </a>
+              </div>
+              <div>
+                <p class="mb-0">Made by Humans from OpenPeeps</p>
+                <p>Open Source | LGPLv3 License</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <script type="text/javascript">document.addEventListener('DOMContentLoaded', function(){{}});
+    // some JS code that runs after DOMContentLoaded
+    document.addEventListener('DOMContentLoaded', function() {
+      document.querySelector('#submitMessage').addEventListener('click', function(e){
+        e.preventDefault()
+        console.log(e)
+      })
+    })
+    </script>
+  </body>
+</html>
diff --git a/example/templates/layouts/base.timl b/example/templates/layouts/base.timl
@@ -0,0 +1,30 @@
+html
+  head
+    meta charset="UTF-8"
+    meta name="viewport" content="width=device-width, initial-scale=1"
+    title: "Tim Engine is Awesome"
+    link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
+    style: "
+  body {
+    background-color: #212121;
+    color: whitesmoke
+  }
+  .btn-primary {
+    --bs-btn-color: #fff;
+    --bs-btn-bg: #ea4444;
+    --bs-btn-border-color: #ea4444;
+    --bs-btn-hover-color: #fff;
+    --bs-btn-hover-bg: #c73434;
+    --bs-btn-hover-border-color: #c73434;
+    --bs-btn-focus-shadow-rgb: 49,132,253;
+    --bs-btn-active-color: #fff;
+    --bs-btn-active-bg: #b62929;
+    --bs-btn-active-border-color: #b62929;
+    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+    --bs-btn-disabled-color: #fff;
+    --bs-btn-disabled-bg: #0d6efd;
+    --bs-btn-disabled-border-color: #0d6efd;
+  }
+  "
+  body
+    @view
diff --git a/example/templates/partials/btn.timl b/example/templates/partials/btn.timl
@@ -0,0 +1,4 @@
+a.btn.btn-primary.btn-lg.rounded-pill.px-4.py-2 href="https://github.com/openpeeps/tim" target="_blank":
+  svg viewBox="0 0 24 24" width="24" height="24" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1"
+    path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"
+  span.fw-bold: "Check it on GitHub"
diff --git a/example/templates/views/index.timl b/example/templates/views/index.timl
@@ -0,0 +1,23 @@
+section > div.container > div.row.vh-100.align-items-center > div#content-zone.col-lg-7.mx-auto
+  div.text-center > img src="https://raw.githubusercontent.com/openpeeps/tim/main/.github/timengine.png" alt="Tim Engine" width="200px"
+  h1.display-4.fw-bold:
+    "This is Tim 👋 A super fast template engine for cool kids!"
+  p.mb-4.h4.fw-normal.px-4 style="line-height: 1.8em":
+    "Build sleek, dynamic websites and apps in a breeze with Tim Engine's intuitive
+    syntax and powerful features. It's the template engine that keeps up with your creativity."
+  div.text-center
+    div.mb-3
+      @include "btn"
+    div 
+      p.mb-0: "Made by Humans from OpenPeeps"
+      p: "Open Source | LGPLv3 License"
+
+@client target="#content-zone"
+  // transpile to JavaScript for client-side rendering
+@end
+
+@js
+  document.addEventListener('DOMContentLoaded', function() {
+    console.log(e)
+  })
+@end
diff --git a/src/tim.nim b/src/tim.nim
@@ -6,15 +6,15 @@
 import std/json except `%*`
 import std/times
 
-import pkg/[watchout, kapsis/cli]
+import pkg/[watchout]
+import pkg/kapsis/cli
 
 import tim/engine/[meta, parser, logging]
 import tim/engine/compilers/html
 
 from std/strutils import `%`, indent
 from std/os import `/`
 
-
 const
   DOCKTYPE = "<!DOCKTYPE html>"
   defaultLayout = "base"
@@ -127,6 +127,28 @@ proc precompile*(engine: TimEngine, callback: TimCallback = nil,
     for tpl in engine.getLayouts():
       engine.compileCode(tpl)
 
+template layoutWrapper(getViewBlock) {.dirty.} =
+  result = DOCKTYPE
+  var layoutTail: string
+  if not layout.jitEnabled:
+    # when requested layout is pre-rendered
+    # will use the static HTML version from disk
+    add result, layout.getHtml()
+    getViewBlock
+    layoutTail = layout.getTail()
+  else:
+    var data = newJObject()
+    data["global"] = global
+    data["local"] = local
+    var jitLayout = engine.jitCompiler(layout, data)
+    if likely(not jitLayout.hasError):
+      add result, jitLayout.getHead()
+      getViewBlock
+      layoutTail = jitLayout.getTail()
+    else:
+      jitLayout.logger.displayErrors()
+  add result, layoutTail
+
 proc render*(engine: TimEngine, viewName: string,
     layoutName = defaultLayout, global, local = newJObject()): string =
   ## Renders a view based on `viewName` and `layoutName`.
@@ -139,35 +161,16 @@ proc render*(engine: TimEngine, viewName: string,
       var layout: TimTemplate = engine.getLayout(layoutName)
       if not view.jitEnabled:
         # render a pre-compiled HTML
-        result = DOCKTYPE
-        add result, layout.getHtml()
-        add result, indent(view.getHtml(), layout.getViewIndent)
-        add result, layout.getTail()
+        layoutWrapper:
+          add result, indent(view.getHtml(), layout.getViewIndent)
       else:
         # compile and render template at runtime
-        var data = newJObject()
-        data["global"] = global
-        data["local"] = local
-        result = DOCKTYPE
-        var layoutTail: string
-        if not layout.jitEnabled:
-          # when requested layout is pre-rendered
-          # will use the static HTML version from disk
-          add result, layout.getHtml()
-          layoutTail = layout.getTail()
-        else:
-          var clayout = engine.jitCompiler(layout, data)
-          if likely(not clayout.hasError):
-            add result, clayout.getHtml()
-            layoutTail = clayout.getTail()
+        layoutWrapper:
+          var jitView = engine.jitCompiler(view, data)
+          if likely(not jitView.hasError):
+            add result, indent(jitView.getHtml(), layout.getViewIndent)
           else:
-            clayout.logger.displayErrors()
-        var cview = engine.jitCompiler(view, data)
-        if likely(not cview.hasError):
-          add result, indent(cview.getHtml(), layout.getViewIndent)
-        else:
-          cview.logger.displayErrors()
-        add result, layoutTail
+            jitView.logger.displayErrors()
     else:
       raise newException(TimError, "No layouts available")
   else:
@@ -201,5 +204,17 @@ when defined napibuild:
       return %*(x)
 
 elif not isMainModule:
+  # Expose Tim Engine API for Nim development (as a Nimble librayr)
   export parser, html, json
-  export meta except TimEngine
+  export meta except TimEngine
+else:
+  # Build Tim Engine as a standalone CLI application
+  import pkg/kapsis
+  import ./tim/app/[runCommand]
+
+  App:
+    about:
+      "Tim Engine CLI application"
+    commands:
+      --- "Main Commands"
+      $ run
diff --git a/src/tim/engine/compilers/html.nim b/src/tim/engine/compilers/html.nim
@@ -905,7 +905,6 @@ proc evaluateNodes(c: var HtmlCompiler, nodes: seq[Node],
         c.evalConcat(nodes[i], scopetables)
       else: discard # todo
     of ntViewLoader:
-      # add c.output, c.getIndent(nodes[i].meta)
       c.head = c.output
       reset(c.output)
     of ntCall:
@@ -925,7 +924,7 @@ proc evaluateNodes(c: var HtmlCompiler, nodes: seq[Node],
       # add c.jsComp, jsCompiler
       add c.jsOutput, "document.addEventListener('DOMContentLoaded', function(){"
       add c.jsOutput, jsCompiler.getOutput()
-      add c.jsOutput, "})"
+      add c.jsOutput, "});"
     else: discard
 
 #

diff --git a/src/tim/engine/compilers/js.nim b/src/tim/engine/compilers/js.nim
@@ -60,7 +60,6 @@ proc getAttrs(c: var JSCompiler, attrs: HtmlAttributes, elx: string): string =
 
 proc createHtmlElement(c: var JSCompiler, x: Node, elp: string) =
   ## Create a new HtmlElement
-  # c.jsClientSideOutput
   let elx = "el" & $(c.jsCountEl)
   add c.jsOutputCode, domCreateElement % [elx, x.getTag()]
   if x.attrs != nil:
@@ -73,6 +72,12 @@ proc createHtmlElement(c: var JSCompiler, x: Node, elp: string) =
   else:
     add c.jsOutputCode, domInsertAdjacentElement % ["document.querySelector('" & c.targetElement & "')", elx]
 
+# proc evaluatePartials(c: var HtmlCompiler, includes: seq[string], scopetables: var seq[ScopeTable]) =
+#   # Evaluate included partials
+#   for x in includes:
+#     if likely(c.ast.partials.hasKey(x)):
+#       c.evaluateNodes(c.ast.partials[x][0].nodes, scopetables)
+
 proc evaluateNodes(c: var JSCompiler, nodes: seq[Node], elp: string = "") =
   for i in 0..nodes.high:
     case nodes[i].nt