website-toolbox v0.6.0
🧰 Website Toolbox 🛠
A dead-simple framework for dealing with all sorts of "website things". This framework is particularly helpful when you're doing things like:
- Dealing directly with the DOM
- Upgrading old jQuery code to
currentYear
- Spinning up a quick codepen
- Adding functionality to Wordpress, Shopify, HubSpot, and other marketing, brochure & e-commerce sites
- Re
heatingwriting some old spaghetti
Why It's Good
Sometimes, you can't (or shouldn't!) use a full-sized framework like Vue or React. This happens typically when developing something like a Shopify or Wordpress theme, although there are quite a few other cases where you'd need something that provides a little structure to the JavaScript that typically gets written in this environment.
The Website Toolbox provides some structure and opinion about how your classic "website JS" code is written and implemented. Of course, it's possible you may need something that does more. But this framework is for when you don't.
That's not to say this framework is primitive -- it still has cool stuff like:
- Reactive data properties
- Lifecycle hooks
- Reference to the parent scope/context using the
this
keyword (similar to the waythis
is handled in VueJS) - Global reactive state (and
this.setState
!) - Cross-component communication (in development)
- Custom plugin & mixin integration (in development)
- Helpful methods like
resize()
,updated()
andinView()
(in development)
The Website Toolbox doesn't replace React, Vue, or Angular. Those provide helpful and practical tools & opinions about how to handle frontend JS code. But you don't always need all that stuff.
Here's an example of what's currently possible with the Component
class:
import { Component } from 'website-toolbox';
// A simple and familiar API
const carousel = new Component({
name: 'HomepageCarousel',
// nothing gets mounted, this just gets `document.querySelector`'d for you
root: '.carousel',
// these are all queried relative to the root element
nodes: {
headline: '.some-headline', // querySelector
buttons: ['.some-button'], // querySelectorAll
},
data: {
/**
* Must declare initial state, even if null or falsy. Otherwise, you'll
* get barked at. This enforces that all variables must be declared
* before use.
* */
currentSlide: 0,
delay: 1500,
},
// think "lifecycle hooks", not React hooks
hooks() {
// like a `componentDidMount` or `useEffect(() => {}, [])`
setup() {
// the `Component` instance is available as `this`
this.methods.attachEventListeners();
},
// Called immediately after anything in `Component.data` is updated
updated(next, prev, key) {
/**
* `next` & `prev` are the upcoming & previous values of the
* updated data prop, respectively
*
* `key` is the keyname of the property that updated, so you can do
* `this.data[key]` to track a specific data prop for changes.
* */
}
},
methods: {
attachEventListeners() {
const submitButton = this.nodes.buttons[0];
submitButton.addEventListener('click', () => 'Submitted!');
},
},
});
Testing
Testing with Jest in tests/
. To run tests:
npm run test // test: jest
Building
npm run build // build: npm run test && rollup --config