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)

Rendering Elements:

The basis of rendering is the Shadow, which extends HTMLElement. The Shadow is the equivalent of a React Component.

To create a Shadow, simply:

Create a class which extends Shadow
Include a render() function
Register the shadow as an element

...

class File extends Shadow {
    render = () => {
        p(this.name)
        p("asd")
    }
}

register(File, "file-el")

Needs Support:

Ternaries within render() Other statements within render() Multiple-argument attributes in render()

Limitations:

While rendering is underway, an element's state can only be accessed from within that element

Boilerplate:

*html: Type in an HTML file and select the suggestion to create HTML boilerplate.
*element: Type in a JS file and select the suggestion to create JS Custom Element boilerplate.

Functions:

Clone this repository into the top level of the project you are working on, so the HTML can find the "quill.js" functions. Use backticks with both to get HTML and CSS syntax highlighting.

css() or addStyle(): Adds a style to a Quill style tag in the head.
html(): Creates a parsed HTML element (which is not yet in the DOM)

4.1 KiB Raw Blame History