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

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:

bash
npm install sigpro
bash
pnpm add sigpro
bash
yarn add sigpro
bash
bun add sigpro
html
<script type="module">
  import { $ } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';
</script>

2. Quick Start Examples ​

Depending on your installation method, here is how you can get SigPro running in seconds.

javascript
// File: App.js
import { $ } from 'sigpro'; 

export const App = () => {
  // $ is global, but we import it for better IDE intellisense
  const $count = $(0);
  
  // Tags like div, h1, button are available globally
  return div({ class: 'card' }, [
    h1(["Count is: ", $count]),
    button({ onclick: () => $count(c => c + 1) }, "Increment")
  ]);
};

// File: main.js
import { $ } from 'sigpro';
import { App } from './App.js';

$.mount(App, '#app');
html
<!DOCTYPE html>
<html lang="en">
<body>
  <div id="app"></div>

  <script type="module">
    // Import directly from CDN
    import { $ } from 'https://cdn.jsdelivr.net/npm/sigpro@latest/+esm';

    const $name = $("Developer");

    // No need to import div, section, h2, input... they are global!
    const App = () => section([
      h2(["Welcome, ", $name]),
      input({ 
        type: 'text', 
        $value: $name, // Automatic two-way binding
        placeholder: 'Type your name...' 
      })
    ]);

    $.mount(App, '#app');
  </script>
</body>
</html>

3. Global by Design ​

One of SigPro's core strengths is its Global API.

4. 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 loader for JSX.

`,16)])])}const g=i(l,[["render",p]]);export{o as __pageData,g as default};