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
129
130
131
132
133
134
135
136
137
|
## jsframework
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:
return 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
### license
mit
### jsx?
no. go cry in babel
|
