code_examples

To get started, install Hywer + Vite template

git clone https://github.com/ssleert/hywer-vite-template.git ./hywer-test
cd ./hywer-test
npm i
npm run dev

First code example

import { ref } from "hywer"

const App = () => {
  const count = ref(0)
  const doubleCount = count.derive(val => val * 2)

  return <>
    <div class="swag"></div>
    🧡 {doubleCount}
    <button onClick={() => count.val++}>👍</button>
    <button onClick={() => count.val--}>👎</button>
  </>
}

document.getElementById("app").append(...<><App /></>)

Code description

// here we import ref(value) function from hywer
// hywer also exports jsx, jsxs, jsxDEV for react 17+ jsx runtime compatibility
import { ref } from "hywer"

const App = () => {
  const count = ref(0) // ref(value) produce reactive value with number
  const doubleCount = count.derive(val => val * 2)
  // count.derive(fn) produces new reactive value with conversion through lambda
  // derived values updates when parent value updates

  // hywer support jsx out of the box
  return <>
    // class is a native html attribute
    // i dont really know should hywer support react-like className
    <div class="swag"></div>
    🧡 {doubleCount} // reactive values updates in ui when .val changes
    <button 
      // we use .val setter to update reactive value
      // .val is also a getter
      onClick={() => count.val++}
    >👍</button>
    <button onClick={() => count.val--}>👎</button>
  </>
}

// coz hywer produces native HTMLElements
// and we can use native .append func
document.getElementById("app").append(...<><App /></>)
// we use <></> fragment coz its procudes array of HTMLElements

Stopwatch

import { ref } from "hywer"

const App = () => {
  const elapsed = ref(0)
  let id = null

  const start = () => {
    id = (id == null)
      ? setInterval(() => elapsed.val += 0.01, 10)
      : null
  }

  return <>
    <pre style="display: inline;">
      {elapsed.derive(val => val.toFixed(2) + "s ")}  
    </pre>
    
    <button onClick={start}>Start</button>
    <button onClick={() => {clearInterval(id), id = null}}>
      Stop
    </button>
    <button onClick={() => elapsed.val = 0}>Reset</button>
  </>
}

Code description

import { ref } from "hywer"

const App = () => {
  const elapsed = ref(0) // reactive value for elapsed time
  let id = null // id for clearInterval(id)

  const start = () => {
    // if id == null timer already stopped
    id = (id == null)
      ? setInterval(() => elapsed.val += 0.01, 10)
      : null
  }

  return <>
    {/* we can use any html attributes */}
    <pre style="display: inline;">
      {/* create new derived value that 
          convert value to string and append seconds to it */}
      {elapsed.derive(val => val.toFixed(2) + "s ")}  
    </pre>
    
    {/* onClick produces new event listener with 'start' lambda */}
    <button onClick={start}>Start</button>
    <button onClick={() => {clearInterval(id), id = null}}>
      Stop
    </button>
    <button onClick={() => elapsed.val = 0}>Reset</button>
  </>
}

Todo List

import { ref } from "hywer"

const TodoItem = ({ text }) => {
  const checked = ref(false)
  const lineThrough = checked.derive(
    val => val ? "text-decoration: line-through;" : null
  )

  return <div>
    <input
      type="checkbox"
      onChange={e => checked.val = e.target.checked}
    />
    <span style={lineThrough}>
      {text}
    </span>
    <a onClick={e => e.target.parentElement.remove()}>
      ❌
    </a>
  </div>
}

const App = () => {
  const todos = <div></div>
  let text = ""

  const addTodo = () => {
    todos.append(<TodoItem text={text} />)
  }

  return <>
    <input onInput={e => text = e.target.value} />
    <button onClick={addTodo}>Add</button>
    {todos}
  </>
}

Code description

import { ref } from "hywer"

const TodoItem = ({ text }) => {
  // is element checked or not
  const checked = ref(false)

  // derived style for checked
  // if true make text style line-through
  // else remove attribute
  const lineThrough = checked.derive(
    val => val ? "text-decoration: line-through;" : null
  )

  return <div>
    {/* set checkbox value to reactive value */}
    <input
      type="checkbox"
      onChange={e => checked.val = e.target.checked}
    />
    <span style={lineThrough}> {/* set reactive element property */}
      {text}
    </span>

    {/* remove parent element on click */}
    <a onClick={e => e.target.parentElement.remove()}>
      ❌
    </a>
  </div>
}

const App = () => {
  // create todos element
  const todos = <div></div>

  // make current text var
  let text = ""

  const addTodo = () => {
    // append new todo item to todos element
    todos.append(<TodoItem text={text} />)
  }

  return <>
    {/* set text value with input value */}
    <input onInput={e => text = e.target.value} />

    {/* add new todo on click */}
    <button onClick={addTodo}>Add</button>

    {todos} {/* insert todos element */}
  </>
}

🚧 Working on more examples...