jsframework/readme.md

## 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:
            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