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.

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

// 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;

// 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.

// 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

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.

// 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.

// Usage
// app(root)

let mySite = app(router((path) => { /* ... */ }))
mySite.render(document.body)

todo

• page titles
• component arrays
• likly other things