npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

jquire

v1.5.2

Published

<p align="center"><img src="./docs/assets/logo.png" alt="jQuire Logo" width="200"/></p>

Downloads

36

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