sigwork

v0.1.0

Published

15 days ago

A 1.7kb (gzipped) VDOM-less signal-based reactive framework.

Downloads

168

0High
0Medium
0Low

murillobrand

signals reactive framework frontend lightweight vdom-less

Sigwork.

The Story

Sigwork was created to be the core of That Just Works — an ecosystem of instant, zero-friction productivity tools.

We needed an engine that could load in milliseconds, had absolutely no Virtual DOM memory overhead, worked natively in the browser or bundled, and provided an API compatible with native JSX. Sigwork is the result of that engineering.

The 2kb Pact: Our strict architectural limit is 2kb gzipped. Currently at 1.7kb, the framework already solves 99% of modern UI problems without the bloatware.

Architectural Highlights

🪶 Minuscule: Smaller than most CSS resets or icon libraries.
🧠 Signal based: A solid reactivity system with a smart scope-effect tree that destroys effects from unmounted components without leaving memory leaks.
🎯 Zero Virtual DOM: Signals directly and surgically update the affected text node or attribute. The component never re-renders.
💨 Buildless: Can be used via CDN directly in the browser, no Node.js or bundlers required.
🔷 TypeScript-first: Full type definitions included, with JSX namespace support out of the box.

Installation

npm install sigwork

Official Documentation

Explore the full API, component references, and interactive examples at:
👉 framework.thatjust.works/docs

Quick Start (JSX / Vite / ESBuild)

Configure your JSX Pragma in tsconfig.json or vite.config.js:

{
  "jsx": "react",
  "jsxFactory": "h",
  "jsxFragmentFactory": "null"
}

import Sigwork, { h, signal, computed } from 'sigwork';

const App = () => {
  const stress = signal(0);
  const status = computed(() => stress.value > 5 ? 'Overload' : 'Stable');

  return (
    <div class="card">
      <h1>RPM: {() => stress.value}</h1>
      <p>Status: {() => status.value}</p>
      <button onClick={() => stress.value++}>Accelerate</button>
    </div>
  );
};

Sigwork(document.getElementById('app'), App);

Buildless (Directly in the Browser)

Use Sigwork natively in the browser by pairing it with the htm library for a better experience:

<!DOCTYPE html>
<html>
<body>
  <div id="app"></div>

  <script type="module">
    import Sigwork, { h, signal } from 'https://unpkg.com/sigwork?module';
    import htm from 'https://unpkg.com/htm?module';
    
    const html = htm.bind(h);

    const App = () => {
      const count = signal(0);
      return html`
        <div>
          <h2>Clicks: ${() => count.value}</h2>
          <button onClick=${() => count.value++}>Add</button>
        </div>
      `;
    };

    Sigwork(document.getElementById('app'), App);
  </script>
</body>
</html>

Or you can use it without any additional library by using the h(tag, {props}, ...children) function:

//...
      return h('div', {},
        h('h2', {}, () => count.value),
        h('button', { onClick: () => count.value++ }, "Add")
      );
//...

Known Limitations

Single root per component: Components must return a single root node. Using a fragment (<>...</>) as the root of a top-level component (passed directly to Sigwork(target, root)) is not supported — wrap it in an element instead. Fragments work normally as children inside other components.
Transition is not reversible mid-exit: Once a Transition leave animation begins, the element is no longer managed by the reactive system. If the condition is reversed during the exit, a new element will appear rather than the outgoing one being recaptured.
Shared HTML/SVG tag names in SVG context: Tags that exist in both HTML and SVG namespaces (<a>, <style>, <script>, etc.) are not supported inside SVG. Sigwork detects SVG by checking for HTMLUnknownElement, so these shared tags — which are valid HTML — will be created in the HTML namespace and silently fail inside an SVG tree.

Contributing & License

Sigwork was designed to be audited in a single coffee reading. Contributions (that respect the 2kb limit, size is the priority) are extremely welcome.

Author: Murillo Brandão (@murillobrand)
License: MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme