1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
|
## framework
another js framework
### components
there are 5 major components for this framework
#### element
The most basic component. An `element` represends any HTMLElement.
These can be created with any of the functions named after their html functions, i.e. `a`, `div`, `textarea`, etc. Elements can hold other elements, contents, and routers as children.
To make a component, (most) require 2 paramaters. First, its attributes, and second its children.
```js
# Usage
# element(attrs, ...children)
div({
style: 'background-color: red;'
},
a({ href: 'google.com'})
)
```
#### content
The content type is how you add dynamic strings and insert content into the dom.
You cannot just add text as a child directly to any element, it must be wrapped in a
content tag.
The content tag tags a single callback that returns a string. Its called on every render.
```js
// Usage
// content(callback, ...states)
content(() => 'Hello world!')
```
#### state
State is how you create signals and store variables a reactive way. When a state object is updated,
it causes every content and element its attached to, to update.
It takes one argument, the default value of the state;
```js
// Usage
// state(defaultValue)
let test = state('test')
test.value // get value
test.update('test2') // update value
```
Also you need to attach the state object to any element or content that uses it. Otherwise they wont update when changed. To do this add them to the `signals` attribute on any `element`, or pass them in after the callback in any `content`.
```js
// Usage
content(() => `${test.value}`, test);
// or
div({
signals: [test],
style: `background-color: ${test.value}`
})
```
#### router
The router is what allows you to switch between pages reactivly based on the location.
To change location use the following functions
```js
backLocation() // go back
forwardLocation() // go forward
pushLocation('/newPath') // append location to history, and goto newPath
replaceLocation('/newPath') // replace location in history, and goto newPath
```
To create a router you must pass in a callback that takes in the current location, and returns either a element, content, or another router. Routers will auto update on location change.
```js
// Usage
// router(callback)
const component() => {
return div({}, content(() => 'hello world!'))
}
const notFound() => {
return div({}, content(() => 'not found :('))
}
router((path) => {
switch(path) {
case: '/secret':
return component()
default:
retrun notFound()
}
})
```
#### app
The final type is the App. This is the highest component in the component tree, and requires a signle router, element, or content to manage at the top of the tree.
You are only allowed to make a single app, since they arent gurenteed to work with multiple.
```js
// Usage
// app(root)
let mySite = app(router((path) => { /* ... */ }))
mySite.render(document.body)
```
### todo
- page titles
- component arrays
- likly other things
|
