itsumura-h · itsumura-h · Mar 5, 2024 · Mar 5, 2024
diff --git a/documents/en/view.md b/documents/en/view.md
@@ -5,20 +5,20 @@ View
 Table of Contents
 
 <!--ts-->
-* [View](#view)
-   * [Introduction](#introduction)
-   * [Template syntax](#template-syntax)
-      * [if](#if)
-      * [for](#for)
-      * [while](#while)
-   * [Component style design](#component-style-design)
-      * [CSS](#css)
-      * [SCSS](#scss)
-      * [API](#api)
-   * [Helper functions](#helper-functions)
-      * [Csrf Token](#csrf-token)
-      * [old helper](#old-helper)
-   * [Uses SCF as template engine](#uses-scf-as-template-engine)
+- [View](#view)
+  - [Introduction](#introduction)
+  - [Template syntax](#template-syntax)
+    - [if](#if)
+    - [for](#for)
+    - [while](#while)
+  - [Component style design](#component-style-design)
+    - [CSS](#css)
+    - [SCSS](#scss)
+    - [API](#api)
+  - [Helper functions](#helper-functions)
+    - [Csrf Token](#csrf-token)
+    - [old helper](#old-helper)
+  - [Uses SCF as template engine](#uses-scf-as-template-engine)
 
 <!-- Created by https://github.com/ekalinin/github-markdown-toc -->
 <!-- Added by: root, at: Fri Dec 22 21:21:30 UTC 2023 -->
@@ -134,9 +134,9 @@ proc impl():Component =
     <div class="$(style.element("background"))"></div>
   """
 
-proc withStyleView*():string =
+proc withStyleView*():Component =
   let title = "Title"
-  return $applicationView(title, impl())
+  return applicationView(title, impl())
 ```
 
 This is compiled to html like this.
@@ -255,9 +255,9 @@ proc impl(params=newJObject()):Component =
     <input type="text" name="password">
   """
 
-proc signinView*(params=newJObject()):string =
+proc signinView*(params=newJObject()):Component =
   let title = "SignIn"
-  return $applicationView(title, impl(params))
+  return applicationView(title, impl(params))
 ```
 It display value if `params` has key `email`, otherwise display empty string.
 

diff --git a/documents/ja/view.md b/documents/ja/view.md
@@ -4,20 +4,20 @@
 
 目次
 <!--ts-->
-* [ビュー](#ビュー)
-   * [イントロダクション](#イントロダクション)
-   * [文法](#文法)
-      * [if](#if)
-      * [for](#for)
-      * [while](#while)
-   * [コンポーネント指向](#コンポーネント指向)
-      * [CSS](#css)
-      * [SCSS](#scss)
-      * [API](#api)
-   * [ヘルパー関数](#ヘルパー関数)
-      * [Csrfトークン](#csrfトークン)
-      * [old関数](#old関数)
-   * [SCFをテンプレートエンジンとして使う](#scfをテンプレートエンジンとして使う)
+- [ビュー](#ビュー)
+  - [イントロダクション](#イントロダクション)
+  - [文法](#文法)
+    - [if](#if)
+    - [for](#for)
+    - [while](#while)
+  - [コンポーネント指向](#コンポーネント指向)
+    - [CSS](#css)
+    - [SCSS](#scss)
+    - [API](#api)
+  - [ヘルパー関数](#ヘルパー関数)
+    - [Csrfトークン](#csrfトークン)
+    - [old関数](#old関数)
+  - [SCFをテンプレートエンジンとして使う](#scfをテンプレートエンジンとして使う)
 
 <!-- Created by https://github.com/ekalinin/github-markdown-toc -->
 <!-- Added by: root, at: Fri Dec 22 21:22:56 UTC 2023 -->
@@ -131,9 +131,9 @@ proc impl():Component =
     <div class="$(style.element("background"))"></div>
   """
 
-proc withStyleView*():string =
+proc withStyleView*():Component =
   let title = "Title"
-  return $applicationView(title, impl())
+  return applicationView(title, impl())
 ```
 
 これをhtmlにコンパイルすると以下のようになります。
@@ -252,9 +252,9 @@ proc impl(params=newJObject()):Component =
     <input type="text" name="password">
   """
 
-proc signinView*(params=newJObject()):string =
+proc signinView*(params=newJObject()):Component =
   let title = "SignIn"
-  return $applicationView(title, impl(params))
+  return applicationView(title, impl(params))
 ```
 `params` にキー `email` があれば値を表示し、なければ空の文字列を表示します。
 

diff --git a/examples/example/app/http/controllers/page_display_controller.nim b/examples/example/app/http/controllers/page_display_controller.nim
@@ -2,9 +2,6 @@ import json, times, strformat, httpcore
 # framework
 import ../../../../../src/basolato/controller
 import ../../../../../src/basolato/web_socket
-# db
-from ../../../config/database import rdb
-import allographer/query_builder
 # views
 import ../views/pages/welcome_view
 import ../views/pages/welcome_scf_view
@@ -15,7 +12,8 @@ import ../views/pages/sample/api_view
 
 
 proc index*(context:Context, params:Params):Future[Response] {.async.} =
-  return render(asyncHtml("pages/sample/index.html").await)
+  let index = asyncHtml("pages/sample/index.html").await
+  return render(index)
 
 proc welcome*(context:Context, params:Params):Future[Response] {.async.} =
   let name = "Basolato " & BasolatoVersion
@@ -47,11 +45,13 @@ proc fib*(context:Context, params:Params):Future[Response] {.async.} =
 
 
 proc withStylePage*(context:Context, params:Params):Future[Response] {.async.} =
-  return render(withStyleView())
+  let view = withStyleView()
+  return render(view)
 
 
 proc babylonJsPage*(context:Context, params:Params):Future[Response] {.async.} =
-  return render(babylonJsView().await)
+  let view = babylonJsView().await
+  return render(view)
 
 
 proc customHeaders*(context:Context, params:Params):Future[Response] {.async.} =

diff --git a/examples/example/app/http/views/pages/sample/api_view.nim b/examples/example/app/http/views/pages/sample/api_view.nim
@@ -91,6 +91,6 @@ proc impl():Future[Component] {.async.} =
     </main>
   """
 
-proc apiView*():Future[string] {.async.} =
+proc apiView*():Future[Component] {.async.} =
   let title = ""
-  return $applicationView(title, impl().await)
+  return applicationView(title, impl().await)
diff --git a/examples/example/app/http/views/pages/sample/babylon_js/babylon_js_view.nim b/examples/example/app/http/views/pages/sample/babylon_js/babylon_js_view.nim
@@ -31,6 +31,6 @@ proc impl():Future[Component] {.async.} =
   </main>
   """
 
-proc babylonJsView*():Future[string] {.async.} =
+proc babylonJsView*():Future[Component] {.async.} =
   let title = ""
-  return $applicationView(title, impl().await)
+  return applicationView(title, impl().await)
diff --git a/examples/example/app/http/views/pages/sample/cookie_view.nim b/examples/example/app/http/views/pages/sample/cookie_view.nim
@@ -47,6 +47,6 @@ proc impl(cookies:JsonNode):Future[Component] {.async.} =
     </main>
   """
 
-proc cookieView*(cookies:JsonNode):Future[string] {.async.} =
+proc cookieView*(cookies:JsonNode):Future[Component] {.async.} =
   let title = "Cookie"
-  return $applicationView(title, impl(cookies).await)
+  return applicationView(title, impl(cookies).await)
diff --git a/examples/example/app/http/views/pages/sample/file_upload_view.nim b/examples/example/app/http/views/pages/sample/file_upload_view.nim
@@ -25,6 +25,6 @@ proc impl():Future[Component] {.async.} =
     </main>
   """
 
-proc fileUploadView*():Future[string] {.async.} =
+proc fileUploadView*():Future[Component] {.async.} =
   let title = "File upload"
-  return $applicationView(title, await impl())
+  return applicationView(title, await impl())
diff --git a/examples/example/app/http/views/pages/sample/flash_view.nim b/examples/example/app/http/views/pages/sample/flash_view.nim
@@ -24,6 +24,6 @@ proc impl(context:Context):Future[Component]{.async.} =
     </main>
   """
 
-proc flashView*(context:Context):Future[string]{.async.} =
+proc flashView*(context:Context):Future[Component]{.async.} =
   const title = "Flash message"
-  return $applicationView(title, await impl(context))
+  return applicationView(title, await impl(context))
diff --git a/examples/example/app/http/views/pages/sample/login_view.nim b/examples/example/app/http/views/pages/sample/login_view.nim
@@ -38,6 +38,6 @@ proc impl(context:Context):Future[Component]{.async.} =
     </main>
   """
 
-proc loginView*(context:Context):Future[string]{.async.} =
+proc loginView*(context:Context):Future[Component]{.async.} =
   let title = "Login"
-  return $applicationView(title, await impl(context))
+  return applicationView(title, impl(context).await)
diff --git a/examples/example/app/http/views/pages/sample/validation_view.nim b/examples/example/app/http/views/pages/sample/validation_view.nim
@@ -64,6 +64,6 @@ proc impl(params, errors:JsonNode):Future[Component] {.async.} =
     </main>
   """
 
-proc validationView*(params, errors:JsonNode):Future[string] {.async.} =
+proc validationView*(params, errors:JsonNode):Future[Component] {.async.} =
   let title = "Validation view"
-  return $applicationView(title, impl(params, errors).await)
+  return applicationView(title, impl(params, errors).await)
diff --git a/examples/example/app/http/views/pages/sample/web_socket_view.nim b/examples/example/app/http/views/pages/sample/web_socket_view.nim
@@ -45,8 +45,8 @@ proc webSocketComponentImpl():Component =
     $(style)
   """
 
-proc webSocketComponent*():string =
-  return $applicationView("Web Socket", webSocketComponentImpl())
+proc webSocketComponent*():Component =
+  return applicationView("Web Socket", webSocketComponentImpl())
 
 
 proc impl():Component =
@@ -73,5 +73,5 @@ proc impl():Component =
     </main>
   """
 
-proc webSocketView*():string =
-  return $applicationView("Web Socket", impl())
+proc webSocketView*():Component =
+  return applicationView("Web Socket", impl())
diff --git a/examples/example/app/http/views/pages/sample/with_style_view.nim b/examples/example/app/http/views/pages/sample/with_style_view.nim
@@ -72,6 +72,6 @@ proc impl():Component = tmpli html"""
 </main>
 """
 
-proc withStyleView*():string =
+proc withStyleView*():Component =
   let title = ""
-  return $applicationView(title, impl())
+  return applicationView(title, impl())
diff --git a/examples/example/app/http/views/pages/welcome_view.nim b/examples/example/app/http/views/pages/welcome_view.nim
@@ -116,6 +116,5 @@ proc impl(name:string):Component =
     </article>
   """
 
-proc welcomeView*(name:string):string =
-  let title = "Welcome Basolato"
-  return $impl(name)
+proc welcomeView*(name:string):Component =
+  return impl(name)
diff --git a/examples/todo_app/app/http/views/pages/sign/signin_view.nim b/examples/todo_app/app/http/views/pages/sign/signin_view.nim
@@ -72,6 +72,6 @@ proc impl(params, errors:JsonNode):Future[Component] {.async.} =
     </main>
     """
 
-proc signinView*(params, errors:JsonNode):Future[string] {.async.} =
+proc signinView*(params, errors:JsonNode):Future[Component] {.async.} =
   let title = "Sign In"
-  return $applicationView(title, impl(params, errors).await)
+  return applicationView(title, impl(params, errors).await)
diff --git a/examples/todo_app/app/http/views/pages/sign/signup_view.nim b/examples/todo_app/app/http/views/pages/sign/signup_view.nim
@@ -91,6 +91,6 @@ proc impl(params, errors:JsonNode):Future[Component] {.async.} =
     </main>
   """
 
-proc signupView*(params, errors:JsonNode):Future[string] {.async.} =
+proc signupView*(params, errors:JsonNode):Future[Component] {.async.} =
   let title = "Sign Up"
-  return $applicationView(title, impl(params, errors).await)
+  return applicationView(title, impl(params, errors).await)
diff --git a/examples/todo_app/app/http/views/pages/todo/create/create_view.nim b/examples/todo_app/app/http/views/pages/todo/create/create_view.nim
@@ -112,12 +112,12 @@ proc impl(viewModel:CreateViewModel):Component =
     </section>
   """
 
-proc createView*(params, errors, data:JsonNode):string =
+proc createView*(params, errors, data:JsonNode):Component =
   let title = ""
   let viewModel = CreateViewModel.new(
     params,
     errors,
     data["statuses"].getElems,
     data["users"].getElems
   )
-  return $applicationView(title, impl(viewModel))
+  return applicationView(title, impl(viewModel))
diff --git a/examples/todo_app/app/http/views/pages/todo/index/index_view.nim b/examples/todo_app/app/http/views/pages/todo/index/index_view.nim
@@ -37,7 +37,7 @@ proc impl(viewModel:IndexViewModel):Future[Component] {.async.} =
     </main>
   """
 
-proc indexView*(loginUser:JsonNode):Future[string] {.async.} =
+proc indexView*(loginUser:JsonNode):Future[Component] {.async.} =
   let title = ""
   let viewModel = IndexViewModel.new(loginUser).await
-  return $applicationView(title, impl(viewModel).await)
+  return applicationView(title, impl(viewModel).await)
diff --git a/src/basolato/cli/functions/make/page.nim b/src/basolato/cli/functions/make/page.nim
@@ -42,9 +42,9 @@ proc impl():Future[Component] [[.async.]] =
     </div>
   '''
 
-proc {targetCaptalized}View*():Future[string] [[.async.]] =
+proc {targetCaptalized}View*():Future[Component] [[.async.]] =
   let title = ''
-  return $applicationView(title, impl().await)
+  return applicationView(title, impl().await)
 """
 
   VIEW = VIEW.multiReplace(

diff --git a/src/basolato/controller.nim b/src/basolato/controller.nim
@@ -9,26 +9,30 @@ import core/header; export header
 import core/security/cookie; export cookie
 import core/security/session; export session
 import core/security/context; export context
+import ./core/templates
 
 when defined(httpbeast) or defined(httpx):
   import core/libservers/nostd/request; export request
 else:
   import core/libservers/std/request; export request
 
 
-proc asyncHtml*(path:string):Future[string] {.async.} =
+proc asyncHtml*(path:string):Future[Component] {.async.} =
   ## Open html file asynchronous.
   ## arg path is relative path from app/http/views
   ## .. code-block:: nim
-  ##   let indexHtml = await asyncHtml("pages/index.html")
+  ##   let indexHtml = asyncHtml("pages/index.html").await
   ##   return render(indexHtml)
   let path = getCurrentDir() / "app/http/views" / path
   let f = openAsync(path, fmRead)
   defer: f.close()
-  let data = await f.readAll()
-  return $data
+  let data = f.readAll().await
+  let component = Component.new()
+  component.add(data)
+  return component
 
-proc html*(path:string):string =
+
+proc html*(path:string):Component =
   ## Open html file.
   ## arg path is relative path from app/http/views
   ## .. code-block:: nim
@@ -38,4 +42,6 @@ proc html*(path:string):string =
   let f = open(path, fmRead)
   defer: f.close()
   let data = f.readAll()
-  return $data
+  let component = Component.new()
+  component.add(data)
+  return component