Installation & Setup

SigPro is designed to be drop-in ready. Whether you are building a complex application with a bundler or a simple reactive widget in a single HTML file, SigPro scales with your needs.

1. Installation

Choose the method that best fits your workflow:

npm install sigpro

or

bun add sigpro

<script type="module">

  import { $, h, mount } from "https://cdn.jsdelivr.net/npm/sigpro@latest/dist/sigpro.esm.min.js";

  const count = $(0);
  mount(() => h("h1", {}, () => `Count: ${count()}`), "#app");

</script>

2. Quick Start Examples

SigPro uses lowercase Tag Helpers (e.g., div, button) to keep the syntax close to raw HTML, while still being pure JavaScript functions.

// App.js – Use named imports for the core, activate helpers if needed
import { $, mount } from "sigpro";

const App = () => {
  const count = $(0);
  return div({ class: "card p-4" }, [
    h1(() => `Count is: ${count()}`),
    button(
      { class: "btn btn-primary", onclick: () => count(count() + 1) },
      "Increment",
    ),
  ]);
};

mount(App, "#app");

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

    <script type="module">
      // Import the core
      import { $, h, mount } from "https://cdn.jsdelivr.net/npm/sigpro@latest/dist/sigpro.esm.min.js";
      const name = $("Developer");
      const App = () =>
        section({ class: "container" }, [
          h2(() => `Welcome, ${name()}`),
          input({
            type: "text",
            class: "input input-bordered",
            value: name,
            placeholder: "Type your name...",
          }),
        ]);
      mount(App, "#app");
    </script>
  </body>
</html>

3. Why no build step?

Because SigPro uses native ES Modules and standard JavaScript functions to generate the DOM, you don't actually need a compiler like Babel or a transformer for JSX.

Development: Just save and refresh. Pure JS, no "transpilation" required.
Performance: Extremely lightweight. Use any modern bundler (Vite, esbuild) only when you are ready to minify and tree-shake for production.

4. Key Advantages

Extreme Performance: No Virtual DOM reconciliation. SigPro updates the specific node or attribute instantly when a signal changes.
Fine-Grained Reactivity: State changes only trigger updates where the data is actually used, not on the entire component.
Native Web Standards: Everything is a standard JS function. No custom template syntax to learn.
Zero Magic: No hidden compilers. What you write is what runs in the browser.
Global by Design (with control): Tag helpers and core functions can be globally available (IIFE) or imported on demand (ESM) – you choose.

5. Summary

SigPro isn't just another framework; it's a bridge to the native web. By using standard ES Modules and functional DOM generation, you get the benefits of a modern reactive library with the weight of a utility script.

Because, in the end... why fight the web when we can embrace it?

3.9 KiB Raw Blame History Unescape Escape