BoolSignalValue = bool

CleanUpCallback = proc ()

Component = JsObject

ComponentProps = JsObject

FloatSignalValue = float

ObjSignalValue = JsObject

RefObject = object
  current*: Element

States = cstring | int | float | bool | JsObject

StrSignalValue = cstring

proc children(self: ComponentProps): cstring {.importjs: "#.children",
    ...raises: [], tags: [].}

proc fmt(arg: cstring): cstring {.importjs: "#", ...raises: [], tags: [].}

proc html(arg: cstring): Component {.importjs: "eval(\'html`\' + # + \'`\')",
                                     ...raises: [], tags: [].}

proc len(arg: JsObject): int {.importjs: "Object.keys(#).length", ...raises: [],
                               tags: [].}

proc renderApp(component: proc (): Component; dom: Element) {.
    importjs: "renderApp(#, #)", ...raises: [], tags: [].}

proc signal(arg: bool): BoolSignal {.importjs: "signal(#)", ...raises: [], tags: [].}

proc signal(arg: cstring): StrSignal {.importjs: "signal(#)", ...raises: [],
                                       tags: [].}

proc signal(arg: float): FloatSignal {.importjs: "signal(#)", ...raises: [],
                                       tags: [].}

proc signal(arg: int): IntSignal {.importjs: "signal(#)", ...raises: [], tags: [].}

proc signal(arg: JsObject): ObjSignal {.importjs: "signal(#)", ...raises: [],
                                        tags: [].}

proc useCallback(cb: proc ()): (proc ()) {.importjs: "useCallback(#)",
    discardable, ...raises: [], tags: [].}

proc useCallback(cb: proc (); dependency: array): (proc ()) {.
    importjs: "useCallback(#, [])", discardable, ...raises: [], tags: [].}

proc useCallback(cb: proc (); dependency: seq[States]): (proc ()) {.
    importjs: "useCallback(#, #)", discardable, ...raises: [], tags: [].}

proc useEffect(cb: proc ()) {.importjs: "useEffect(#)", ...raises: [], tags: [].}

proc useEffect(cb: proc (): CleanUpCallback) {.importjs: "useEffect(#)",
    ...raises: [], tags: [].}

proc useEffect(cb: proc (): CleanUpCallback; dependency: array) {.
    importjs: "useEffect(#, [])", ...raises: [], tags: [].}

proc useEffect(cb: proc (): CleanUpCallback; dependency: seq[States]) {.
    importjs: "useEffect(#, #)", ...raises: [], tags: [].}

proc useEffect(cb: proc (): Future[void]) {.importjs: "useEffect(#)",
    ...raises: [], tags: [].}

proc useEffect(cb: proc (): Future[void]; dependency: array) {.
    importjs: "useEffect(#, [])", ...raises: [], tags: [].}

proc useEffect(cb: proc (): Future[void]; dependency: seq[States]) {.
    importjs: "useEffect(#, #)", ...raises: [], tags: [].}

proc useEffect(cb: proc (); dependency: array) {.importjs: "useEffect(#, [])",
    ...raises: [], tags: [].}

proc useEffect(cb: proc (); dependency: seq[States]) {.
    importjs: "useEffect(#, #)", ...raises: [], tags: [].}

proc useLayoutEffect(cb: proc ()) {.importjs: "useLayoutEffect(#)", ...raises: [],
                                    tags: [].}

proc useLayoutEffect(cb: proc (): CleanUpCallback) {.
    importjs: "useLayoutEffect(#)", ...raises: [], tags: [].}

proc useLayoutEffect(cb: proc (): CleanUpCallback; dependency: array) {.
    importjs: "useLayoutEffect(#, [])", ...raises: [], tags: [].}

proc useLayoutEffect(cb: proc (): CleanUpCallback; dependency: seq[States]) {.
    importjs: "useLayoutEffect(#, #)", ...raises: [], tags: [].}

proc useLayoutEffect(cb: proc (): Future[void]) {.
    importjs: "useLayoutEffect(#)", ...raises: [], tags: [].}

proc useLayoutEffect(cb: proc (): Future[void]; dependency: array) {.
    importjs: "useLayoutEffect(#, [])", ...raises: [], tags: [].}

proc useLayoutEffect(cb: proc (): Future[void]; dependency: seq[States]) {.
    importjs: "useLayoutEffect(#, #)", ...raises: [], tags: [].}

proc useLayoutEffect(cb: proc (); dependency: array) {.
    importjs: "useLayoutEffect(#, [])", ...raises: [], tags: [].}

proc useLayoutEffect(cb: proc (); dependency: seq[States]) {.
    importjs: "useLayoutEffect(#, #)", ...raises: [], tags: [].}

proc useMemo(cb: proc (): bool): bool {.importjs: "useMemo(#)", ...raises: [],
                                        tags: [].}

proc useMemo(cb: proc (): bool; dependency: array): bool {.
    importjs: "useMemo(#, [])", ...raises: [], tags: [].}

proc useMemo(cb: proc (): bool; dependency: seq[States]): bool {.
    importjs: "useMemo(#, #)", ...raises: [], tags: [].}

proc useMemo(cb: proc (): cstring): cstring {.importjs: "useMemo(#)",
    ...raises: [], tags: [].}

proc useMemo(cb: proc (): cstring; dependency: array): cstring {.
    importjs: "useMemo(#, [])", ...raises: [], tags: [].}

proc useMemo(cb: proc (): cstring; dependency: seq[States]): cstring {.
    importjs: "useMemo(#, #)", ...raises: [], tags: [].}

proc useMemo(cb: proc (): float): float {.importjs: "useMemo(#)", ...raises: [],
    tags: [].}

proc useMemo(cb: proc (): float; dependency: array): float {.
    importjs: "useMemo(#, [])", ...raises: [], tags: [].}

proc useMemo(cb: proc (): float; dependency: seq[States]): float {.
    importjs: "useMemo(#, #)", ...raises: [], tags: [].}

proc useMemo(cb: proc (): int): int {.importjs: "useMemo(#)", ...raises: [],
                                      tags: [].}

proc useMemo(cb: proc (): int; dependency: array): int {.
    importjs: "useMemo(#, [])", ...raises: [], tags: [].}

proc useMemo(cb: proc (): int; dependency: seq[States]): int {.
    importjs: "useMemo(#, #)", ...raises: [], tags: [].}

proc useMemo(cb: proc (): JsObject): JsObject {.importjs: "useMemo(#)",
    ...raises: [], tags: [].}

proc useMemo(cb: proc (): JsObject; dependency: array): JsObject {.
    importjs: "useMemo(#, [])", ...raises: [], tags: [].}

proc useMemo(cb: proc (): JsObject; dependency: seq[States]): JsObject {.
    importjs: "useMemo(#, #)", ...raises: [], tags: [].}

proc useRef(): RefObject {.importjs: "useRef(null)", ...raises: [], tags: [].}

proc useState(arg: bool): (bool, BoolStateSetter) {....raises: [], tags: [].}

proc useState(arg: cstring): (cstring, StrStateSetter) {....raises: [], tags: [].}

proc useState(arg: float): (float, FloatStateSetter) {....raises: [], tags: [].}

proc useState(arg: int): (int, IntStateSetter) {....raises: [], tags: [].}

proc useState(arg: JsObject): (JsObject, ObjectStateSetter) {....raises: [],
    tags: [].}

proc value(self: BoolSignal): BoolSignalValue {.importjs: "#.value", ...raises: [],
    tags: [].}

proc value(self: FloatSignal): FloatSignalValue {.importjs: "#.value",
    ...raises: [], tags: [].}

proc value(self: IntSignal): int {.importjs: "#.value", ...raises: [], tags: [].}

proc value(self: ObjSignal): ObjSignalValue {.importjs: "#.value", ...raises: [],
    tags: [].}

proc value(self: StrSignal): StrSignalValue {.importjs: "#.value", ...raises: [],
    tags: [].}

proc value=(self: BoolSignal; val: bool) {.importjs: "#.value = #", ...raises: [],
    tags: [].}

proc value=(self: FloatSignal; val: float) {.importjs: "#.value = #",
    ...raises: [], tags: [].}

proc value=(self: IntSignal; val: int) {.importjs: "#.value = #", ...raises: [],
    tags: [].}

proc value=(self: ObjSignal; val: JsObject) {.importjs: "#.value = #",
    ...raises: [], tags: [].}

proc value=(self: StrSignal; val: cstring) {.importjs: "#.value = #",
    ...raises: [], tags: [].}

macro useState(arg: typedesc): untyped

template fmt(arg: string): cstring

template html(arg: string): Component