Quill

Quill is a SwiftUI-style JavaScript framework. It makes use of components called Shadows, which are HTML Custom Elements.

Getting Started:

Take index.js and put it in your app. Typically as quill.js. Then import it in the head of the HTML.

Basic Overview:

Quill uses components called Shadows. Each Shadow is a Custom HTML Element (https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements)

class Home extends Shadow {
    render() {
    }
}

register(Home)

Once created, it can be imported like

import "Home.js"

(Not how we are NOT importing the actual class object. If that happens, it will fail.)

Here is an example of Hello World:

class Home extends Shadow {
    render() {
        p("Hello World")
            .x(50, vw)
            .y(50, vh)
    }
}

register(Home)

This will render a paragraph tag in the middle of the screen.

Here's what it will look like in HTML:

<body>
    <home->
        <p style="position: absolute; top: 50vh; left: 50vw;">Hello World</p>
    </home->
</body>

Note: .x() and .y() are quill-specific functions that were created simply for nice syntax. However, this would also be valid:

p("Hello World")
    .top(50, vh)
    .left(50, vw)

There are quill functions for every HTML style attribute. If they have units, they will follow the pattern directly above, where the first parameter is the amount and the second parameter is the unit.

Real Home Shadow Example:

When starting, it is typical to make a "Home" shadow. This is a good example.

import "../components/NavBar.js"
import "./HomeContent.js"
import "./Why.js"
import "./Events.js"
import "./Join.js"
import "./SignIn.js"
import "./Success.js"

class Home extends Shadow {
    render() {

        ZStack(() => {

            NavBar()

            img("/_/icons/logo.svg", "2.5em")
                .onClick((done) => {
                    if(!done) return
                    window.navigateTo("/")
                })
                .position("absolute")
                .left(50, vw).top(4, em)
                .center()
                .transform(`translate(${window.isMobile() ? "-50%" : "-2em"}, -50%)`)
    
            switch(window.location.pathname) {
                case "/":
                    HomeContent()
                    break;
                case "/why":
                    Why()
                    break;
                case "/events":
                    Events()
                    break;
                case "/join":
                    Join()
                    break;
                case "/success":
                    Success()
                    break;
            }

        })
        .onNavigate(() => {
            this.rerender()
        })
            
    }
}

register(Home)

2.9 KiB Raw Blame History

Quill

Getting Started:

Basic Overview:

Real Home Shadow Example:

2.9 KiB

Raw Blame History