Skip to content

CycleWire v1.0.0

Choose a tag to compare

@github-actions github-actions released this 25 Sep 15:27
· 109 commits to main since this release

First public release: a zero-dependency engine that makes server-rendered HTML
interactive without hydration.

Added

  • Core (cyclewire):
    • one delegated listener per event type;
    • a strict action registry: loader functions, URLs or import-map specifiers;
    • data-cw-action and data-cw-on-<event> bindings, and module#export names;
    • triggers: load, idle, visible, media:;
    • intent, visible, idle and load preloading with modulepreload;
    • concurrency modes: drop, restart, latest, parallel;
    • data-cw-once, data-cw-debounce, data-cw-props and data-cw-ignore;
    • a cancelable cw:run event, plus cw:done and cw:error;
    • run(), observe() for shadow roots, fromGlob() for Vite, and a configurable
      attribute prefix;
    • plugins with setup, context, scan, preload and load hooks, and object
      registry entries ({ module, … }) that carry options for them.
  • cyclewire/css: stylesheets that arrive with the actions that need them. With the
    styles() plugin, a registry entry lists the CSS its UI needs ({ module, css }); the
    CSS is preloaded with the module on intent and applied before the handler runs, inside
    shadow roots too. css() loads stylesheets from code.
  • cyclewire/auto and classic-script builds that read
    <script type="application/json" data-cyclewire> and expose window.CycleWire.
  • cyclewire/dom: context-aware html tagged templates, inert fragment()
    parsing, swap() and transition() (View Transitions), Trusted Types support.
  • cyclewire/morph: DOM morphing that keeps elements by id or data-cw-key,
    uses moveBefore() where available, and preserves focus and user input.
  • cyclewire/signals: signals, computed values, effects, deep reactive stores,
    and data-cw-state / data-cw-store / data-cw-bind activated lazily from
    server-serialized state.
  • cyclewire/bootstrap: the Bootstrap 5 data API (collapse, dropdown, modal,
    offcanvas, tab, alert) without Bootstrap's JavaScript.
  • TypeScript declarations, a development build with warnings, and size budgets in CI.
  • Guides and runnable examples for React, Vue and Svelte islands, and for Flatpickr,
    SweetAlert2, DataTables and jQuery, tested in Chromium, Firefox and WebKit and live
    on GitHub Pages.

Install

npm install cyclewire@1.0.0
<script src="https://cdn.jsdelivr.net/npm/cyclewire@1.0.0/dist/cyclewire.global.min.js"
        integrity="sha384-/P0Nv08w6uODr1GidxFoywMsI2lyyontoN2RsmmOqEZrsRr+9vj3J3a9o02QDAVZ"
        crossorigin="anonymous" defer></script>

Subresource Integrity

File SRI
cyclewire.global.min.js sha384-/P0Nv08w6uODr1GidxFoywMsI2lyyontoN2RsmmOqEZrsRr+9vj3J3a9o02QDAVZ
cyclewire.full.global.min.js sha384-8kFK9hZruNLQpxVFSwGZBRPcBK+pe4N0JSdmBM+QVc8Wa5ommci0GOce7qGZ2I9E
cyclewire.min.js sha384-X31qtsuoaxJVYY5k2GD4lk19XFk0O5Nu8fXQm56TeheEonStoYnsZT5b//Z5MG/H
css.min.js sha384-vTnod85S0efe61Uvs3XsB0gAfXKMT/HYfBFo6s6GHyxj1U4EPQPL0nwhrPU9Bneg
dom.min.js sha384-ICTUMQQ7LaqK6iPfy2Es/s8phOlVarr/LsaRq0h7KxCXSYXk5ABFk+T6Do54Z4if
morph.min.js sha384-PyzvtzFAPzYgq7PseIkCw5Tq2KjolEqzqfJDGy2V6dOZF4AopytdHriT1rmvYrTP
signals.min.js sha384-dOtCDZzlvzjz8b3/Ys7eet0krjIJKGWv6bw1JKyBU4rMEWly3ZCXQgvQ4mZ8J3Zt
bootstrap.min.js sha384-qPsSltLcezWka0mc/QWCZIsmV9DHOp/gVZiB3W5tVH3ZSqGPZPt4lQ19QCurlx1P

Full changelog: CHANGELOG.md