What is requery-js

requery is a JavaScript framework for building interactive user interfaces. It builds on @vue/reactivity and Web Components to provide a component-based programming model that works with standard HTML - no JSX, string literals, or special templating syntax is required.

Here is an example of a simple counter component

Example
index.html
module.js
Copy
<!-- prop:max="5" overrides the default value-->
<rq-counter prop:max="5">
  <button rq="button">Clicked: <span rq="count">0</span> times</button>
</rq-counter>

This example demonstrates several core features of requery-js:

1. HTML-First Components

   • Uses standard HTML with rq attributes to tag interactive and reactive elements

   • No special templating syntax or JSX required

   • Props are passed using the prop: prefix

2. Web Component Definition

   • Components are defined using defineComponent

   • Custom element names follow Web Component standards (contains a hyphen)

   • Structured with props, store, and setup function

3. Reactive State Management

   • Reactivity is powered by @vue/reactivity

   • The store object defines the initial state

   • Changes to reactive data automatically trigger UI updates

4. Query-Based DOM Manipulation

   • Elements are selected using component.query() and the elements rq attribute value

   • Rich set of directives for DOM manipulation (if, for, show, bind, text, html)

   • Event listeners are added using .on()

5. Props System

   • Props are defined with default values

   • Props can be passed via HTML using the prop: prefix

   • Values are automatically converted to their appropriate types (numbers, booleans, objects)

Progressive Enhancements

requery is designed to be incrementally adoptable, recognising that websites and web applications come in many shapes and sizes. Whether you're building a small interactive component or a complex application, requery can be integrated in various ways:

1. Enhancing Website Builders

   • Add dynamic functionality to visual development tools like Webflow

   • Keep your visual design tools while adding powerful interactivity

   • No build steps required - just load from a CDN and start coding

2. Component-Based Development

   • Create reusable Web Components

   • Manage complex state and interactions

   • Build component libraries that are compatible with popular website builders

3. Full Application Architecture

   • Build complete interactive applications

   • Integrate with your favourite backend

   • Use with modern build tools and TypeScript

The core concepts of requery-js - queries, reactivity, and components - remain consistent across all these use cases. If you're just starting with a Webflow site, you can begin by adding simple interactive elements. As your needs grow, the same knowledge will help you build more complex components and applications.

Special Thanks

This project wouldn't exist without the Vue ecosystem. The reactive core is powered by @vue/reactivity, and the API design was inspired by Petite Vue. Thank you to Evan You and the Vue team for these incredible tools. 🙌