56 lines
1.6 KiB
Markdown
56 lines
1.6 KiB
Markdown
|
|
<p align="center">
|
|
<img src="VSCode/docs/Quill.png" alt="drawing" width="100"/>
|
|
<h1 align="center">Quill</h1>
|
|
</p>
|
|
<br>
|
|
|
|
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)
|
|
|
|
|