jquire
v1.5.2
Published
<p align="center"><img src="./docs/assets/logo.png" alt="jQuire Logo" width="200"/></p>
Downloads
55
Maintainers
Readme
jQuire
jQuery UI Reciter
This project began as an experiment, stretching what's possible with JavaScript. After a great deal of trouble, refactoring and a lot of sleepless nights, I think I've come up with something that I can be proud of! I wouldn't advise it to be used in real applications but you're welcome to experiment with it and provide constructive criticism. website
Installation and Imports
npm install jquire
you can also use a cdn if you like
<!-- JQuery goes here if you're want to use it as well -->
<script type="module" src="https://cdn.jsdelivr.net/npm/jquire@latest/src/jquire.min.js"></script>
after installation 👇
import {
natives, nodes, when,
on, state, watch, each, paths,
getNodes, animate, css
} from "./node_modules/jquire/dist/jquire.min.js"
After you specify all the required imports you can either destructure each html element creator function from natives
proxy object.
const {
div, input, button,
form, dialog, img,
main, nav, a, br, h1,
footer, template, span
} = natives
const { attr, text, fragment } = nodes
Or, you can populate all the valid html element creators into the globalThis
object and make them available in the global scope.
natives.globalize()
Create a component
// define your component
const HelloWorld = () => fragment(
h1("Hello, World!")
)
const app = div(
HelloWorld(),
"Again ", HelloWorld()
)
// component with props and children
const Foo = (...props) => {
const { childNodes, attributes } = getNodes(props)
return div(
"====START====",
...attributes,
...childNodes,
"=====END====="
)
}
Rendering Content
app.attachTo(document.body) // attaches `app` to document's body
Specifying Attributes
input(
attr.type("number"), // set a single attribute
attr({ value: 0, max: 100 }), // set multiple attributes
attr.required() // single attributes without value will default to the name of the attribute
)
Styling Elements
All styles on block elements are scoped by default using unique class names. You can even specify css rules in them.
CSS Properties
div(
css.height("50px"),
css({ backgroundColor: "lightblue" })
)
Specifying styles for child elements
div(
css("button.abc")({
backgroundColor: "violet",
borderRadius: "5px",
border: "none",
padding: "5px 15px",
fontVariant: "small-caps"
}),
button(
attr.class("abc"),
"click me!"
)
)
Pseudo Classes, Pseudo Elements and CSS Rules
button(
"click me!",
css(":hover")({
backgroundColor: "teal"
}),
css("::before")({
content: "",
border: "1px solid fuchsia",
display: "inline-block",
width: "25px",
height: "25px"
}),
css("@keyframes", "press")({
"100%": {
transform: "scale(1.15)"
}
}),
css("@media screen and (max-width: 500px)")(
css(":host")({
borderColor: "cyan"
})
)
)
Animating Elements
div(
animate({ height: "500px" })
)
Handling Events
button(
"click me!",
on.click(event => console.log("clicked!")),
// using effect function
(event = on("click")) => console.log("effecive click!")
)
Creating elements from an Iterable
const fruits = ["apple", "orange", "banana"]
const fruitEmojis = ['🍎', '🍊', '🍌']
ul(
fruits.map((fruit, i) => `${fruit} - ${fruitEmojis[i]}`),
// using effect function
([fruit, i] = each(fruits)) => `${fruit} - ${fruitEmojis[i]}`
)
Reactive Data and Element Reference
You can use the state()
function to store reactive objects.
Then using the watch()
effect function, update the elements to be in sync with the state object.
const person = {
name: "John",
age: 26,
profession: "Artist"
}
const personST = state({ person })
div(
([person] = watch(personST)) =>
`John is ${person.age} years old!`, // will be refreshed for every state change
button(
"increment age",
(_ = on("click")) => personST.age++
)
)
Conditional Rendering
You can choose to render or not to render certain elements based on a condition using when()
effect function.
const age = 50
div(
(_ = when(age > 200)) => span("Invalid age: Greater than 200.")
)
Custom Elements
jQuire supports HTML5 Custom Elements out of the box.You can use them like any other component and they are brought into scope using the custom()
function.
const MyButton = (label = '', theme = "normal") => {
const primary = theme == "normal"
? "lightgrey"
: "danger"
? "palevioletred"
: "info"
? "cornflowerblue"
: "coral" // warning
const accent = theme == normal
? "darkgrey"
: "danger"
? "red"
: "info"
? "royalblue"
: "orangered" // warning
const style = {
padding: "3px 5px",
border: `1px solid ${accent}`,
backgroundColor: primary,
borderRadius: "5px"
}
// custom(tagName: a string in kebab-case, _extends: an optional HTMLElement)
return custom("my-btn", HTMLButtonElement)(
css(style),
label
)
}
You can also create custom elements by specifying them as properties of custom()
function.
const { HelloWorld } = custom
HelloWorld("hello world!")
Lifecycle Effects
These are events that let you run code when an element is attached or detached from DOM using attach()
and detach()
effect functions respectively.
const sidebarST = state({ clicked: false })
div(
button("⊞", (_ = on("click")) => sidebarST.clicked = !sidebarST.clicked),
(_ = watch(sidebarST)) => (_ = when(sidebarST.clicked)) =>
aside(
(_ = attach()) => console.log("sidebar visible"),
(_ = detach()) => console.log("sidebar hidden")
),
)
More ideas on the horizon... stay tuned for more