API reference

Hywer API reference

Index

Constants

• Fragment: FragmentType

Variables

• gcCycleInMs: number

Functions

• ref<T>(value: T) => Reactive<T>
• derive<T, Y>(fn: (refs: T[]) => Y, refs: T[]) => Reactive<Y>
• effect<T, Y>(fn: (refs: T[]) => void, refs: T[]) => void
• makeElement<T>(tag: T, attributes: Record<string, unknown> | null, ...children?: any[]) => HywerElements<T>;

Types

• ReactiveSubscriber<T, Y>
• Reactive<T>
• FragmentType
• HywerElement
• HywerElements<T>
• HywerComponent
• HywerTag

---

Constants

Fragment

const Fragment: FragmentType = {}

Variables

gcCycleInMs

let gcCycleInMs: number = 5000

• Specifies the minimum time interval (in milliseconds) between garbage collection (GC) executions. Recommended values 1000-10000

Functions

ref

function ref<T>(value: T): Reactive<T>

• Creates a new reactive value initialized with a given value, allowing the value to be updated reactively.

• // create new reactive value
  const count = ref(0)
  
  // subscribe to changes
  count.sub = (val, oldVal) => {
    console.log(`count.val = ${val}; count.oldVal = ${oldVal}`)
  }
  
  // derive new value
  const countStr = count.derive(
    (val) => val.toFixed(2) + "times"
  )
  
  // connect to element
  <pre>
    {countStr}
  </pre>

derive

function derive<T extends Reactive<any>[], Y>(
  fn: (refs: T) => Y,
  refs: [...T],
): Reactive<Y>

• Derive new reactive value from array of parents. And update it when one of parents changed

• const first = ref(2)
  const second = ref(4)
  
  const doubled = derive((refs) => {
    return refs[0].val * refs[1].val;
  }, [first, second]);
  
  // or with destructuring
  const doubled = derive(([first, second]) => {
    return first.val * second.val;
  }, [first, second]);
  
  // or with capturing
  const doubled = derive(() => {
    return first.val * second.val;
  }, [first, second]);

effect

function effect: <T extends Reactive<any>[]>(
  fn: (refs: T) => void,
  refs: [...T],
): void

• Make subscription to multiple reactive elements. Uses .sub setter under the hood

• effect((refs) => {
    console.log(refs[0], refs[1])
  }, [val1, val2])
  
  // or with destructuring
  effect(([val1, val2]) => {
    console.log(val1, val2)
  }, [val1, val2])
  
  // or with capturing
  effect(() => {
    console.log(val1, val2)
  }, [val1, val2])

makeElement

function makeElement<T extends HywerTag | HywerComponent>(
  tag: T,
  attributes: Record<string, unknown> | null,
  ...children?: any[]
) => HywerElements<T>

• makeElement lets you create a Hywer element. It serves as an alternative to writing JSX.

• function Greeting({ name }) {
    return makeElement(
      "h1", { class: "greeting" },
      "Hello", name, "!"
    );
  }

Types

ReactiveSubscriber

type ReactiveSubscriber<T, Y> = (val: T, oldVal: T) => Y

Reactive

interface Reactive<T> {
  readonly subs: Set<ReactiveSubscriber<T, void>>;
  oldVal: T;
  val: T;
  sub: ReactiveSubscriber<T, void>;
  derive: <Y>(fn: ReactiveSubscriber<T, Y>) => Reactive<Y>;
  react: () => void;
}

FragmentType

type FragmentType = {
  __UniqueFragmentIdentifierDontTouchPlz__: true
}

HywerElement

type HywerElement = HTMLElement | Text;

HywerElements

type HywerElements<T> = T extends FragmentType
  ? HywerElement[]
  : HywerElement

HywerComponent

type HywerComponent = (props: object) => HywerElement | HywerElement[]

HywerTag

type HywerTag = string | FragmentType;