1. 1
2. 2
3. 3
4. 4
5. 5
6. 6
7. 7
8. 8
9. 9
10. 10
11. 11
12. 12
13. 13
14. 14
15. 15
16. 16
17. 17
18. 18
19. 19
20. 20
21. 21
22. 22
23. 23
24. 24
25. 25
26. 26
27. 27
28. 28
29. 29
30. 30
31. 31
32. 32
33. 33
34. 34
35. 35
36. 36
37. 37
38. 38
39. 39
40. 40
41. 41
42. 42
43. 43
44. 44
45. 45
46. 46
47. 47
48. 48
49. 49
50. 50
51. 51
52. 52
53. 53
54. 54
55. 55
56. 56
57. 57
58. 58
59. 59
60. 60
61. 61
62. 62
63. 63
64. 64
65. 65
66. 66
67. 67
68. 68
69. 69
70. 70
71. 71
72. 72
73. 73
74. 74

# Introduction

ef.js is a JavaScript library that provides state management functionality and declarative DOM functions based on that.
This library is designed and built only for my personal needs.

Unlike the majority of UI library, ef.js does not abstract DOM.
It is designed to be simple and thin so it can be applied to anywhere standard DOM is expected and can cooperate with other code and libraries.
Therefore, this is not for whom just trying to build a web app without understanding the web platform.

## State management

The state management feature is designed based on Signals, a design approach for reactivity, popularised by [S.js](https://github.com/adamhaile/S) and [Solid.js](https://www.solidjs.com/).
The API surface is kept bare minimum, so it is recommended to define helper function for each project if needed.

```ts
import { derived, effect, signal } from "@pocka/ef";

// Create a reactive value
const $number = signal(1);

// Define a derived value
const $isEven = derived(() => {
  return $number.get() % 2 === 0;
});

// Run a function and re-run when `$isEven` was changed
effect(() => {
  console.log($isEven.get());
});

// [LOG]: false

// Update a reactive value
$number.set(2);

// [LOG]: true
```

## Declarative DOM

The DOM part is quite simple ― it just creates DOM Nodes.
"Declarative" kicks in only when it takes Signals value, as it subscribes to value changes then update necessary part on changes.
This is very similar to what Solid.js or similar libraries do, but without a special compiler or Virtual DOM.
Of course, lack of those also means inferior DX and/or missing optimisation opportunities.
Be advised to choose with consideration.

```ts
import { el, prop, signal } from "@pocka/ef";

const $sent = signal(false);

// `myButton` is HTMLButtonElement
const myButton = el("button", [prop("disabled", $sent)], ["Send data"]);

document.appendChild(myButton);

$sent.set(true);

// myButton is now disabled

// ...internal of `prop` is something like this
function prop(name, value) {
  return (element) => {
    if (isReactive(value)) {
      effect(() => {
        element[name] = value.get();
      });
      return;
    }

    element[name] = value;
  };
}
```