refactor(Root): Extract bindHooks to hooks file

dist/hooks.d.ts

@@ -2,6 +2,13 @@ type placeholderCallback = ((component: object) => void) | ((component?: object)
 export type DependencyArray = Array<(() => any) | any>;
 export type UseState = <T>(initialValue: T) => [() => T, (newValue: T) => void];
 export type UseEffect = (callback: placeholderCallback, dependencies: DependencyArray, isServerFunction?: () => boolean) => void;
+export interface Hoakable {
+    effectCallback: (component: object) => void;
+    callback: (component: object) => void;
+    useEffect: UseEffect;
+    useState: UseState;
+}
+export declare function bindHooks(component: Hoakable): void;
 export declare function getValues(dependencies: DependencyArray): Array<any>;
 export declare function useState<T>(initialValue: T): [() => T, (newValue: T) => void];
 export declare function useEffect(callback: placeholderCallback, dependencies: DependencyArray, isServerFunction?: () => boolean): void;

dist/hooks.js

@@ -1,4 +1,8 @@
 import { isServer } from './utils.js';
+export function bindHooks(component) {
+    component.useState = useState.bind(component);
+    component.useEffect = useEffect.bind(component);
+}
 export function getValues(dependencies) {
     return dependencies.map((dependency) => {
         if (typeof dependency === 'function') {

dist/index.d.ts

@@ -1,5 +1,5 @@
 export * from './commonExports.js';
-import { UseEffect, UseState } from './hooks.js';
+import { Hoakable, UseEffect, UseState } from './hooks.js';
 import { RouteString, StyleObject } from './utils.js';
 export declare const jsx: any;
 export type MetaProps = {
@@ -37,8 +37,7 @@ export declare class LightComponent extends EmmyComponent {
     connectedCallback(): void;
     querySelector(selector: string): HTMLElement | null;
 }
-export declare function bindHooks(component: FunctionalComponent): void;
-export declare class FunctionalComponent extends LightComponent {
+export declare class FunctionalComponent extends LightComponent implements Hoakable {
     effectCallback: (component: FunctionalComponent) => void;
     useState: UseState;
     useEffect: UseEffect;

dist/index.js

@@ -9,7 +9,7 @@ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, ge
 };
 export * from './commonExports.js';
 import { render as renderJSX } from 'jsx-to-html';
-import { useEffect, useState } from './hooks.js';
+import { bindHooks } from './hooks.js';
 import { createInlineStyle, html, processGenerator, routerClassNames, vanillaElement } from './utils.js';
 export const jsx = renderJSX;
 export class EmmyComponent extends HTMLElement {
@@ -71,10 +71,6 @@ export class LightComponent extends EmmyComponent {
         return HTMLElement.prototype.querySelector.call(this, vanillaElement(selector));
     }
 }
-export function bindHooks(component) {
-    component.useState = useState.bind(component);
-    component.useEffect = useEffect.bind(component);
-}
 export class FunctionalComponent extends LightComponent {
     constructor(func) {
         super();

dist/server.d.ts

@@ -1,6 +1,6 @@
 export * from './commonExports.js';
 import { RouteString, StyleObject } from './utils.js';
-import { UseEffect, UseState } from './hooks.js';
+import { Hoakable, UseEffect, UseState } from './hooks.js';
 export declare const jsx: any;
 export type MetaProps = {
     el: FunctionalComponent;
@@ -47,8 +47,7 @@ export declare class LightComponent extends EmmyComponent {
     connectedCallback(): void;
     querySelector(selector: string): HTMLElement | null;
 }
-export declare function bindHooks(component: FunctionalComponent): void;
-export declare class FunctionalComponent extends LightComponent {
+export declare class FunctionalComponent extends LightComponent implements Hoakable {
     effectCallback: (component: FunctionalComponent) => void;
     useState: UseState;
     useEffect: UseEffect;

dist/server.js

@@ -12,7 +12,7 @@ import { render as renderJSX } from 'jsx-to-html';
 import { Emmy, capitalizeFirstLetter, createInlineStyle, html, javascript, processGenerator, routerClassNames, uncapitalizeFirstLetter, vanillaElement } from './utils.js';
 import { readFileSync, writeFileSync } from 'fs';
 import { createRequire } from 'module';
-import { useEffect, useState } from './hooks.js';
+import { bindHooks } from './hooks.js';
 const require = createRequire(import.meta.url);
 const render = require('./ssr');
 require('./ssr/register');
@@ -76,10 +76,6 @@ export class LightComponent extends EmmyComponent {
         return HTMLElement.prototype.querySelector.call(this, vanillaElement(selector));
     }
 }
-export function bindHooks(component) {
-    component.useState = useState.bind(component);
-    component.useEffect = useEffect.bind(component);
-}
 export class FunctionalComponent extends LightComponent {
     constructor(func) {
         super();

src/hooks.ts

@@ -6,6 +6,18 @@ export type DependencyArray = Array<(() => any) | any>
 export type UseState = <T>(initialValue: T) => [() => T, (newValue: T) => void]
 export type UseEffect = (callback: placeholderCallback, dependencies: DependencyArray, isServerFunction?: () => boolean) => void
 
+export interface Hoakable {
+  effectCallback: (component: object) => void
+  callback: (component: object) => void
+  useEffect: UseEffect
+  useState: UseState
+}
+
+export function bindHooks(component: Hoakable) {
+  component.useState = useState.bind(component)
+  component.useEffect = useEffect.bind(component)
+}
+
 export function getValues(dependencies: DependencyArray): Array<any> {
   return dependencies.map((dependency) => {
     if (typeof dependency === 'function') {

src/index.ts

@@ -1,7 +1,7 @@
 export * from './commonExports.js'
 
 import { render as renderJSX } from 'jsx-to-html'
-import { UseEffect, UseState, useEffect, useState } from './hooks.js'
+import { Hoakable, UseEffect, UseState, bindHooks } from './hooks.js'
 import {
   RouteString,
   StyleObject,
@@ -112,13 +112,7 @@ export class LightComponent extends EmmyComponent {
   }
 }
 
-export function bindHooks(component: FunctionalComponent) {
-  component.useState = useState.bind(component)
-  component.useEffect = useEffect.bind(component)
-}
-
-
-export class FunctionalComponent extends LightComponent {
+export class FunctionalComponent extends LightComponent implements Hoakable {
   effectCallback: (component: FunctionalComponent) => void
   useState: UseState
   useEffect: UseEffect

src/server.ts

@@ -17,7 +17,7 @@ import {
 
 import { readFileSync, writeFileSync } from 'fs'
 import { createRequire } from 'module'
-import { UseEffect, useEffect, UseState, useState } from './hooks.js'
+import { bindHooks, Hoakable, UseEffect, UseState } from './hooks.js'
 const require = createRequire(import.meta.url)
 const render = require('./ssr')
 require('./ssr/register')
@@ -133,13 +133,7 @@ export class LightComponent extends EmmyComponent {
   }
 }
 
-export function bindHooks(component: FunctionalComponent) {
-  component.useState = useState.bind(component)
-  component.useEffect = useEffect.bind(component)
-}
-
-
-export class FunctionalComponent extends LightComponent {
+export class FunctionalComponent extends LightComponent implements Hoakable {
   effectCallback: (component: FunctionalComponent) => void
   useState: UseState
   useEffect: UseEffect

test/hooks.test.ts

@@ -1,6 +1,6 @@
 import { describe, it, expect, vitest } from 'vitest'
-import { Component, FunctionalComponent, HTMLGenerator, MetaProps, bindHooks } from '../src/index.ts'
-import { getValues, useState, useEffect, useRef } from '../src/hooks.ts'
+import { Component, FunctionalComponent, HTMLGenerator, MetaProps } from '../src/index.ts'
+import { getValues, useState, useEffect, useRef, bindHooks, Hoakable } from '../src/hooks.ts'
 import { awaitDidMount } from './utils.ts'
 // Even VSCode doesn't recognize the usage of HTMLElement, it is necessary to test components
 import { HTMLElement } from 'happy-dom'
@@ -139,7 +139,7 @@ describe('bindHooks', () => {
       }
     }
     const componentToBind = new A() as FunctionalComponent
-    bindHooks(componentToBind)
+    bindHooks(componentToBind as Hoakable)
     expect(componentToBind.useState).toBeDefined()
     expect(componentToBind.useEffect).toBeDefined()
   })