129 lines
3 KiB
Markdown
129 lines
3 KiB
Markdown
## 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
|