DEV Community

Fatih Mert Doğancan
Fatih Mert Doğancan

Posted on

Load JavaScript when a feature needs it: introducing CycleWire

#resumability #webdev #javascript #performance

Load JavaScript when a feature needs it: introducing CycleWire

A server-rendered page can already contain everything a visitor needs to read. Its interactive features may only become relevant later: opening a dialog, focusing a date picker, or using a filter.

CycleWire lets you connect those features to JavaScript modules that load on demand.

I’m the author of the project. Its interactive website is built entirely with CycleWire, so you can explore a working example before installing anything:

https://cyclechain.github.io/CycleWire/

Start with HTML

An interactive element names the action it needs:

<button cw-action="counter#increment">0</button>
Enter fullscreen mode Exit fullscreen mode

The action is a regular JavaScript module:

// actions/counter.js
export function increment({ element }) {
  element.textContent = String(Number(element.textContent) + 1);
}
Enter fullscreen mode Exit fullscreen mode

Register the module and start CycleWire in your application’s JavaScript entry point:

import { start } from 'cyclewire';

start({
  actions: {
    counter: () => import('./actions/counter.js'),
  },
});
Enter fullscreen mode Exit fullscreen mode

Install it with:

npm install cyclewire
Enter fullscreen mode Exit fullscreen mode

This small example demonstrates the binding model. The same pattern can load a larger dependency, such as a date picker or dialog library, inside the action that needs it.

Loading before the click

Loading a module only after a click can delay the first response.

CycleWire can preload modules on hover, focus, or touch. It also supports visibility and idle triggers, so you can choose a loading strategy appropriate to each feature.

That choice matters: delaying work reduces startup work, but it does not make the work disappear.

Working with existing pages

CycleWire works with HTML produced by stacks such as Laravel/Blade, Rails, Django, and plain PHP. It can also load React, Vue, or Svelte islands when needed.

The core supplies event delegation, action loading, cancellation, and concurrency controls. Optional modules add capabilities such as DOM morphing and reactive state.

There is a small core script at startup. Individual feature modules load separately.

Try it

Interactive website, built with CycleWire:
https://cyclechain.github.io/CycleWire/

Additional examples:
https://cyclechain.github.io/CycleWire/examples/

Source, documentation, and installation:
https://github.com/CycleChain/CycleWire

CycleWire is MIT-licensed and has no runtime dependencies in its core.

If you try it, I’d especially like to hear which interaction you connected first, where the documentation was unclear, and whether the loading behavior matched your expectations.

Top comments (0)