Register a new component.

Component can have fields

Basic Usage 🔨

component Component:
  requiredField: int
  optionalField: int = 100
  
  `template`:
    tDiv:
      "requiredField is {self.requiredField}"
    tDiv:
      "optionalField is {self.optionalField}
  
  `script`:
    echo self.requiredField
    echo self.optionalField
  
  `style`:
    """
    div {
      width: {self.requiredField}px;
      height: {self.optionalField}px;
    }
    """

Pure Css 🎈

You can use buildStyle macro syntax inside `` style ``

component MyComponent:
  ...
  `style` as css:
    tag tDiv:
      background-color: rgb(100, 200, 255)
    tDiv@hover:
      padding: 0 8.px 2.rem 1.em

Pure JavaScript ✌

You also can use buildJs macro syntax inside `` script ``

...
`script` as js:
  function myFunc(a, b, c):
    echo a, b, c
  
  class MyClass:
    constructor():
      echo "Hi"
  
  var myCls = new MyClass()
  myFunc(1, 2, 3)

Slots 👨‍🔬

Slots is extends your component

Declaration:

component Component:
  `template`:
    tDiv:
      slot

Usage:

buildHtml:
  component Component(...):
    tDiv(...):
      "This div tag with this text will shown in component slot"

Inheritance 📦

Components may be inherited from other component.

Here is minimal example:

component A:
  a: int = 0
  `template`:
    tDiv:
      "Hello, world!"
component B of A:
  `template`:
    tDiv:
      super()
      {self.a}

Imports .hpx file as component.

Note: You can easily create these files with HappyX VS Code extension

Example

component.hpx

<template>
  <div>
    Hello, world!
  </div>
</template>
<script>
# Here is Nim code
echo "Hello, world!"
</script>
<style>
/* Here is scoped style */
div {
  background: #feefee;
}
</style>

main.nim

importComponent "./component.hpx" as MyComponent