HttpBeast, Translatables And More Other 🔥

Changelog 📕

• New alternative HTTP server - httpbeast. You can enable it with -d:hpxBeast flag 🔥
• while statement for HTML DSL ⚡

  appRoutes(...):
    "/":
      tDiv:
        nim:
          var x = 0
        while x < 10:
          "x is {x}"

• Translatables for all project types ✨

  translatable:
    "Hello, world!":
      "ru" -> "Привет, мир!"
      "fr" -> "Bonjour, monde!"
  serve(...):  # or appRoutes
    "/":
      return translate("Hello, world!")

Static Directory In SSR 🐾

Since HappyX v1.1.0 You can declare static directories with two ways ✌

URL Path Is Static Dir 🎈

serve(...):
  # /myDir/subdir/file.txt returns /myDir/subdir/file.txt
  staticDir "myDir"

Custom URL Path ✨

serve(...):
  # /myPath/subdir/file.txt returns /myDir/subdir/file.txt
  staticDir "/myPath" -> "myDir"

First Major Release ✨

Changelog

• as statement in components ✌

  component MyComponent:
    `script` as js:
      console.log("Hi")
    `style` as css:
      tag tDiv:
        background-color: rgb(100, 200, 255)
        padding: 0 1.px 2.rem 3.em

• Updated SPA renderer (but legacy still) 🐾
  To enable old renderer compile with -d:oldRenderer
• Prefixed defines (#46) 🔨
• -> macro for states 🍍

  type MyObj = object
    field: string
  var myObj = remember MyObj(field: "Hello")
  echo myObj->field

• Updated buildJs macro ✌
  • nim statement that keeps true Nim code

    buildJs:
      nim:
        echo "Hello, world!"

  • block statement now is available
  • enums checking (only JS enums)

    buildJs:
      type
        A = enum
          One, Two, Three,
          Four = 100
      
      var enumA = A.One
      
      case enumA:
      of A.One:
        echo "Hi!"
      else:
        echo "Bye!"

  • discard statement
  • while statement
• Updated buildHtml statement ✨
  • nim statement that keeps true Nim code

    buildHtml:
      tDiv:
        "Hello, world!"
        nim:
          echo "Hello, world!"

• Update docs 📕

PURE Js In Nim 🛠

New buildJs macro is available. With it you can use PURE Js.

buildJs:
  var one = 123  # let one = 123
  let two = 234  # const two = 234
  const three = 345  # const three = 345
  
  if one === 123:  # Js ===
    echo one  # console.log(one)
  elif ...  # else if (...) { ... }
    ,,,
  else:
    ...

  case two  # switch (two) {
  of 1, 2, 3, 4:  # case 1: case 2: case 3: case 4:
    echo "1 <= one <= 4"
  else:  # default:
    echo "one is 123"

  var arr = [1, 2, 3]  # let arr = [1, 2, 3]
  function fn(array):  # function fn(array) { ... }
    for (val, index) in array:
      echo val, index
  fn(arr)

  class Animal:
    say():
      discard
  class Dog extends Animal:
    say():
      echo "Woof!"
  class Cat extends Animal:
    say():
      echo "Meow"

CSS In Pure Nim 🎴

You can use CSS in pure Nim now 🍍

Here is example

var myCss = buildStyle:
  # Translates into @import url(...)
  import url("path/to/font")
  # Translates into .myClass
  class myClass:
    color: {{nimVariable}}
    background-color: {{otherNimVariable}}
  # Translates into #myId
  id myId:
    color: red
  # Translates into body
  tag body:
    color: white
    background: rgb(33, 33, 33)
  # Translates into @keyframes
  @keyframes animation:
    0:  # translates into 0%
      opacity: 0
      tranform: translateX(-150.px)
    100:  # translates into 100%
      opacity: 1
      transform: translateX(0.px)
  # Translates into @media ...
  @media screen and (min-width: 900.px):
    tag article:
      padding: 1.rem 3.rem
  # Translates into button:hover
  button@hover:
    color: red
  @supports (display: flex):
    @media screen and (min-width: 900.px):
      tag article:
        display: flex

Routing Syntax Sugar 🍍

Routing syntax sugar are here 🎈

SSG

"/route/with<arg>" -> any:
  ...
"/route" -> get:
  ...

serve(...):
  ...

SPA

"/route" -> page:
  ...

appRoutes(...):
  ...

Powerful Mounts Are Here 🔥

Since v0.22.0 you can use powerful mounting with powerful routing 🥳

Mount declaration 🎈

mount Settings:
  "/":
    ....

mount Profile:
  "/":
    ...
  
  mount "/settings" -> Settings

Mount usage 🔥

serve(...):  # You can use appRoutes for SPA also 🙂
  mount "/profile" -> Profile
  
  "/":
    ...

Mounts is REALLY powerful ⚡

You can use path params in mounting:

serve(...):  # or appRoutes
  mount "/<arg>/$id" -> SomeMount

Changelog

• Add mounting 🔥
• Add return statement for SSG apps ✨

  serve(...):
    "/json":
      return {"response": "..."}
    "/html":
      return buildHtml:
        ....
    "/text":
      return "Hello, world!"

Models Are Here ⚡

Now you can use request models ✨

Model declaring 🛠

model MyModel:
  param1: string
  param2: int = 100  # you can use default values 🍍

Model usage 🎈

"/[m:MyModel]":  # you can not use model as arg name because model is macro
  echo m.param1
  echo m.param2
  req.answer { "response": {
    "one": m.param1,
    "two": m.param2
  }}

Component Slots 🎈

Now you can use component slots! ✨

component:

component Comp:
  `template`:
    tDiv:
      slot

Usage:

"/":
  component Comp:
    "you can use HTML here"
    tDiv:
      "hi!"

Assignment Path Params

Now you can use path params assignment! (#28)

Just use

pathParams:
  myArg:
    type int
    mutable
    optional
    default = 10

And use it in any route:

"/user<myArg>"
"/page<myArg>"