Components Update

Changelog

• component methods now support (#77)
• component constructors now support (#79)
• enums in path params (#65)
• fix (#62)
• fix (#84)
• improve docs (#71)

`use` statement, refactor, fix

Changelog ✨

• use statement - keep your component exemplars in variables and work with it like with objects ✌

  var comp = use:
    component MyComponent(myArg = 100):
      "component slot"
      tDiv:
        ...
  echo comp.myArg.val
  buildHtml:
    component comp
    component MyComponent(myArg = 101)

• elem statement (shortcut for document.getElementById) ✨

  <input id="myInput">

  echo elem(myInput).value

• Built-in UI components 🎴 (compile with -d:enableUi)
  Docs
  Example:

  buildHtml:
    component Button:
      "Click me!"
    component Input(placeholder = "Edit text ...", label = "Edit text ...")

• events in event handlers 🛠

  buildHtml:
    tInput:
      @input(ev):  # `ev` is just param name. It may be anything. Works with any built-in web event
        echo ev.data

• Callable states available 🔥
  Before:

  self.state.val()()

  Now:

  self.state()

• Fix CSS into component style 🌿

Raw HTML

Meet: Raw HTML 🎉

Usage 👨‍🔬

var myHtml = buildHtml:
  tDiv:
    "Here is just text"
  rawHtml: """
    <div>
      Here is raw HTML
    </div>
  """

CLI ✨

You can easily translate your HTML code into buildHtml macro with HappyX CLI!

Just run command:

hpx html2tag source.html

source.html

<div>
  <a href="/some">Hello</a><br>
  <hr>
</div>

source.nim

import happyx

var html = buildHtml:
  tDiv:
    a(href = "/some"):
      Hello
    br
    hr

String Formatting

Since v1.7.0 you can use single-quoted strings as autoformatted:

1. Autoformatting

   var myVar = 1
   # Translates to "Hello, 1"
   "Hello, {myVar}"

2. Raw string

   var myVar = 1
   # Translates to "Hello, {myVar}"
   """Hello, {myVar}"""

3. Handle raw strings

   var myVar = 1
   # Translates to "Hello, 1"
   {fmt"""Hello, {myVar}"""}

Auto Translate 👨‍🔬

You can improve your translatable strings since v1.6.0

serve(...):
  "/":
    return "Hello"

With flag -d:translate it converts into

serve(...):
  "/":
    return translate("Hello")

It works for SPA also

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