import{_ as i,o as a,c as t,ae as n}from"./chunks/framework.C8AWLET_.js";const g=JSON.parse('{"title":"Getting Started","description":"","frontmatter":{},"headers":[],"relativePath":"guide/getting-started.md","filePath":"guide/getting-started.md"}'),e={name:"guide/getting-started.md"};function l(h,s,p,k,r,d){return a(),t("div",null,[...s[0]||(s[0]=[n(`

Getting Started ​

SigPro is a lightweight, atomic reactive engine designed to build modern web interfaces with zero overhead. It focuses on high performance through fine-grained reactivity.

1. Installation ​

You can install SigPro via your favorite package manager:

bash
npm install SigPro
bash
pnpm add SigPro
bash
yarn add SigPro
bash
bun add SigPro

2. Basic Usage ​

The core of SigPro is the $ function, which creates reactive state (Signals) and computed effects.

Create a main.js file and try this:

javascript
import { $ } from 'SigPro';

// 1. Create a reactive signal
const $name = $("World");

// 2. Define a reactive component
const App = () => div({ class: 'container' }, [
  h1(["Hello, ", $name, "!"]),
  
  input({ 
    type: 'text', 
    $value: $name, // Two-way binding
    placeholder: 'Enter your name...' 
  }),
  
  button({ 
    onclick: () => $name("SigPro") 
  }, "Set to SigPro")
]);

// 3. Mount the application
$.mount(App, '#app');

3. How it Works ​

SigPro doesn't use a Virtual DOM. Instead, it creates real DOM nodes and binds them directly to your data:

  1. Signals: $(value) creates a getter/setter function.
  2. Reactivity: When you pass a signal or a function to a DOM element, SigPro automatically creates a subscription.
  3. Fine-Grained Updates: Only the specific text node or attribute linked to the signal updates when the value changes.

4. Global Tags ​

By default, SigPro exports common HTML tags to the global scope (window) when initialized. This allows you to write clean, declarative UI without importing every single tag:

javascript
// Instead of $.html('div', ...), just use:
div([
  h1("Clean Syntax"),
  p("No more boilerplate.")
]);
`,15)])])}const c=i(e,[["render",l]]);export{g as __pageData,c as default};