sigpro/PlayGround

SigPro Playground 🚀

An interactive online environment to experiment with SigPro - a minimalist reactive library for building reactive user interfaces directly in the browser.

🌟 Features

• Zero Setup - No installation required, works directly in the browser
• Live Preview - See your code results in real-time
• Built-in SigPro - Full library included with $, $$, html, $component, and $router
• Error Console - Instant feedback on syntax and runtime errors
• Code Sharing - Generate shareable URLs with your code
• Auto-execution - Runs automatically as you type (with debounce)
• Keyboard Shortcuts - Ctrl+Enter to manually execute
• Clean Interface - Modern dark-themed editor inspired by VS Code

🎮 Quick Start

Online Version

Simply open the play.html file in your web browser and start coding!

Write Your First Code

// Create reactive signals
const name = $('World');
const count = $(0);

// Create an effect that reacts to changes
$$(() => {
    document.body.innerHTML = `
        <h1>Hello ${name()}!</h1>
        <p>Count: ${count()}</p>
        <button onclick="count(c => c + 1)">Increment</button>
    `;
});

// Update signals and watch the magic happen
setTimeout(() => name('SigPro'), 2000);

📖 Usage Guide

The Editor Panel

• Write Code - The left panel contains the code editor with syntax highlighting
• Auto-execute - Code runs automatically 1 second after you stop typing
• Manual Run - Click the "Run" button or press Ctrl+Enter
• Format - Click "Format" to beautify your code (coming soon)
• Share - Generate a shareable link with your current code
• Reset - Restore the default example

The Preview Panel

• Live Results - See your code output in real-time
• Error Display - Any errors appear in the console at the bottom
• Clean Slate - Each execution starts with a fresh environment

Keyboard Shortcuts

Shortcut	Action
Ctrl + Enter	Execute code manually
Ctrl + S	Save current code (coming soon)

🎯 Example Code Snippets

Basic Counter

const counter = $(0);

setInterval(() => {
    counter(c => c + 1);
}, 1000);

$$(() => {
    document.body.innerHTML = `<h1>Counter: ${counter()}</h1>`;
});

Two-way Binding with html Tag

const text = $('Edit me');

document.body.appendChild(html`
    <div>
        <input :value="${text}" placeholder="Type something...">
        <p>You typed: ${text}</p>
    </div>
`);

Computed Values

const price = $(10);
const quantity = $(2);
const total = $(() => price() * quantity());

$$(() => {
    document.body.innerHTML = `
        <div>
            <p>Price: $${price()}</p>
            <p>Quantity: ${quantity()}</p>
            <p><strong>Total: $${total()}</strong></p>
            <button onclick="price(p => p + 1)">+ Price</button>
            <button onclick="quantity(q => q + 1)">+ Quantity</button>
        </div>
    `;
});

Custom Component

$component('my-button', (props, { emit }) => {
    return html`
        <button @click="${() => emit('click', props.count())}">
            Count is: ${() => props.count()}
        </button>
    `;
}, ['count']);

document.body.appendChild(html`
    <my-button :count="${$(5)}"></my-button>
`);

🔗 Sharing Code

1. Write your code in the editor
2. Click the Share button
3. Copy the generated URL
4. Share it with anyone - they'll see exactly your code!

The code is encoded in the URL, so no backend storage is needed.

🛠️ Advanced Features

Using the Router

const routes = [
    { path: '/', component: () => html`<h1>Home</h1>` },
    { path: '/about', component: () => html`<h1>About</h1>` },
    { path: /^\/user\/(?<id>.+)/, component: (params) => html`<h1>User: ${params.id}</h1>` }
];

document.body.appendChild($router(routes));
$router.go('/about');

Working with Lists

const items = $(['Apple', 'Banana', 'Orange']);

$$(() => {
    document.body.innerHTML = `
        <ul>
            ${items().map(item => `<li>${item}</li>`).join('')}
        </ul>
        <button onclick="items([...items(), 'New Fruit'])">Add</button>
    `;
});

📦 SigPro API Reference

Function	Description
$(value)	Creates a reactive signal
$$(effect)	Creates a reactive effect
html\...``	Tagged template for reactive HTML
$component(name, setup, attrs)	Creates a web component
$router(routes)	Creates a hash-based router

🤔 Troubleshooting

Error: "Cannot read property..."

• Make sure you're accessing signal values with signal(), not signal

Nothing shows in preview

• Check the error console for syntax errors
• Make sure you're appending to document.body or using html correctly

Changes not updating

• Verify you're using $$() to create effects
• Signals must be called as functions: count() not count

🌐 Browser Support

Works in all modern browsers (Chrome, Firefox, Safari, Edge) that support:

• JavaScript ES6+
• Custom Elements (for $component)
• iframe sandboxing

📝 License

MIT License - feel free to use, modify, and distribute!

🤝 Contributing

Found a bug or want to improve the playground? Feel free to:

• Report issues
• Suggest new features
• Submit improvements

---

Happy Coding with SigPro! ⚡