Quill

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

Getting Started:

Go to https://github.com/capturedsun/template-quill and clone this repo.

App:

src/app.js is the application entry point. Any Shadows rendered inside will be rendered in the body.

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)