sigpro 1.0.14 → 1.2.39

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/Readme.md +164 -1008
  2. package/dist/sigpro.editor.js +1 -0
  3. package/dist/sigpro.grid.js +78 -0
  4. package/dist/sigpro.js +1 -0
  5. package/dist/sigpro.ui.css +2 -0
  6. package/dist/sigpro.ui.js +1 -0
  7. package/dist/sigpro.utils.js +1 -0
  8. package/dist/sigpro.vite.js +4 -0
  9. package/package.json +64 -14
  10. package/sigpro.d.ts +395 -0
  11. package/.github/workflows/publish.yml +0 -25
  12. package/bun.lock +0 -385
  13. package/docs/404.html +0 -22
  14. package/docs/api/components.html +0 -595
  15. package/docs/api/effects.html +0 -787
  16. package/docs/api/fetch.html +0 -873
  17. package/docs/api/pages.html +0 -405
  18. package/docs/api/quick.html +0 -217
  19. package/docs/api/routing.html +0 -628
  20. package/docs/api/signals.html +0 -683
  21. package/docs/api/storage.html +0 -820
  22. package/docs/assets/api_components.md.BlFwj17l.js +0 -571
  23. package/docs/assets/api_components.md.BlFwj17l.lean.js +0 -1
  24. package/docs/assets/api_effects.md.Br_yStBS.js +0 -763
  25. package/docs/assets/api_effects.md.Br_yStBS.lean.js +0 -1
  26. package/docs/assets/api_fetch.md.DQLBJSoq.js +0 -849
  27. package/docs/assets/api_fetch.md.DQLBJSoq.lean.js +0 -1
  28. package/docs/assets/api_pages.md.BP19nHXw.js +0 -381
  29. package/docs/assets/api_pages.md.BP19nHXw.lean.js +0 -1
  30. package/docs/assets/api_quick.md.BDS3ttnt.js +0 -193
  31. package/docs/assets/api_quick.md.BDS3ttnt.lean.js +0 -1
  32. package/docs/assets/api_routing.md.7SNAZXtp.js +0 -604
  33. package/docs/assets/api_routing.md.7SNAZXtp.lean.js +0 -1
  34. package/docs/assets/api_signals.md.CrW68-BA.js +0 -659
  35. package/docs/assets/api_signals.md.CrW68-BA.lean.js +0 -1
  36. package/docs/assets/api_storage.md.COEWBXHk.js +0 -796
  37. package/docs/assets/api_storage.md.COEWBXHk.lean.js +0 -1
  38. package/docs/assets/app.DtmzNmNl.js +0 -1
  39. package/docs/assets/chunks/framework.C8AWLET_.js +0 -19
  40. package/docs/assets/chunks/theme.yfWKMLQM.js +0 -1
  41. package/docs/assets/guide_getting-started.md.BeQpK3vd.js +0 -172
  42. package/docs/assets/guide_getting-started.md.BeQpK3vd.lean.js +0 -1
  43. package/docs/assets/guide_why.md.DXchYMN-.js +0 -23
  44. package/docs/assets/guide_why.md.DXchYMN-.lean.js +0 -1
  45. package/docs/assets/index.md.uvMJmU4o.js +0 -1
  46. package/docs/assets/index.md.uvMJmU4o.lean.js +0 -1
  47. package/docs/assets/inter-italic-cyrillic-ext.r48I6akx.woff2 +0 -0
  48. package/docs/assets/inter-italic-cyrillic.By2_1cv3.woff2 +0 -0
  49. package/docs/assets/inter-italic-greek-ext.1u6EdAuj.woff2 +0 -0
  50. package/docs/assets/inter-italic-greek.DJ8dCoTZ.woff2 +0 -0
  51. package/docs/assets/inter-italic-latin-ext.CN1xVJS-.woff2 +0 -0
  52. package/docs/assets/inter-italic-latin.C2AdPX0b.woff2 +0 -0
  53. package/docs/assets/inter-italic-vietnamese.BSbpV94h.woff2 +0 -0
  54. package/docs/assets/inter-roman-cyrillic-ext.BBPuwvHQ.woff2 +0 -0
  55. package/docs/assets/inter-roman-cyrillic.C5lxZ8CY.woff2 +0 -0
  56. package/docs/assets/inter-roman-greek-ext.CqjqNYQ-.woff2 +0 -0
  57. package/docs/assets/inter-roman-greek.BBVDIX6e.woff2 +0 -0
  58. package/docs/assets/inter-roman-latin-ext.4ZJIpNVo.woff2 +0 -0
  59. package/docs/assets/inter-roman-latin.Di8DUHzh.woff2 +0 -0
  60. package/docs/assets/inter-roman-vietnamese.BjW4sHH5.woff2 +0 -0
  61. package/docs/assets/style.DJRheFKp.css +0 -1
  62. package/docs/assets/ui_intro.md.gZ21GFqo.js +0 -1
  63. package/docs/assets/ui_intro.md.gZ21GFqo.lean.js +0 -1
  64. package/docs/assets/vite_plugin.md.gDWEi8f0.js +0 -225
  65. package/docs/assets/vite_plugin.md.gDWEi8f0.lean.js +0 -1
  66. package/docs/guide/getting-started.html +0 -196
  67. package/docs/guide/why.html +0 -47
  68. package/docs/hashmap.json +0 -1
  69. package/docs/index.html +0 -25
  70. package/docs/logo.svg +0 -118
  71. package/docs/ui/intro.html +0 -25
  72. package/docs/vite/plugin.html +0 -249
  73. package/docs/vp-icons.css +0 -1
  74. package/index.js +0 -3
  75. package/packages/docs/.vitepress/cache/deps/@theme_index.js +0 -275
  76. package/packages/docs/.vitepress/cache/deps/@theme_index.js.map +0 -7
  77. package/packages/docs/.vitepress/cache/deps/_metadata.json +0 -40
  78. package/packages/docs/.vitepress/cache/deps/chunk-3S55Y3P7.js +0 -12951
  79. package/packages/docs/.vitepress/cache/deps/chunk-3S55Y3P7.js.map +0 -7
  80. package/packages/docs/.vitepress/cache/deps/chunk-RLEUDPPB.js +0 -9719
  81. package/packages/docs/.vitepress/cache/deps/chunk-RLEUDPPB.js.map +0 -7
  82. package/packages/docs/.vitepress/cache/deps/package.json +0 -3
  83. package/packages/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js +0 -4505
  84. package/packages/docs/.vitepress/cache/deps/vitepress___@vue_devtools-api.js.map +0 -7
  85. package/packages/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js +0 -583
  86. package/packages/docs/.vitepress/cache/deps/vitepress___@vueuse_core.js.map +0 -7
  87. package/packages/docs/.vitepress/cache/deps/vue.js +0 -347
  88. package/packages/docs/.vitepress/cache/deps/vue.js.map +0 -7
  89. package/packages/docs/.vitepress/config.js +0 -68
  90. package/packages/docs/api/components.md +0 -760
  91. package/packages/docs/api/effects.md +0 -1039
  92. package/packages/docs/api/fetch.md +0 -998
  93. package/packages/docs/api/pages.md +0 -497
  94. package/packages/docs/api/quick.md +0 -436
  95. package/packages/docs/api/routing.md +0 -784
  96. package/packages/docs/api/signals.md +0 -899
  97. package/packages/docs/api/storage.md +0 -952
  98. package/packages/docs/guide/getting-started.md +0 -308
  99. package/packages/docs/guide/why.md +0 -135
  100. package/packages/docs/index.md +0 -84
  101. package/packages/docs/logo.svg +0 -118
  102. package/packages/docs/public/logo.svg +0 -118
  103. package/packages/docs/ui/intro.md +0 -16
  104. package/packages/docs/vite/plugin.md +0 -423
  105. package/packages/sigpro/plugin.js +0 -91
  106. package/packages/sigpro/plugin.min.js +0 -1
  107. package/packages/sigpro/sigpro.js +0 -631
  108. package/packages/sigpro/sigpro.min.js +0 -1
  109. package/vite.config.js +0 -24
@@ -1,308 +0,0 @@
1
- # Getting Started with SigPro 🚀
2
-
3
- Welcome to SigPro! This guide will help you get up and running with the library in minutes. SigPro is a minimalist reactive library that embraces the web platform - no compilation, no virtual DOM, just pure JavaScript and intelligent reactivity.
4
-
5
- ## 📦 Installation
6
-
7
- Choose your preferred installation method:
8
-
9
- ```bash
10
- # Using npm
11
- npm install sigpro
12
-
13
- # Using bun
14
- bun add sigpro
15
-
16
- # Or simply copy sigpro.js to your project
17
- # (yes, it's that simple!)
18
- ```
19
-
20
- ## 🎯 Core Imports
21
-
22
- ```javascript
23
- import { $, html } from 'sigpro';
24
- ```
25
-
26
- That's it! Just two imports to unlock the entire reactive system:
27
- - **`$`** - Creates reactive signals (the heart of reactivity)
28
- - **`html`** - Template literal tag for reactive DOM rendering
29
-
30
- ## 🧠 Understanding the Basics
31
-
32
- ### Signals - The Reactive Heart
33
-
34
- Signals are reactive values that automatically track dependencies and update when changed:
35
-
36
- ```javascript
37
- // Create a signal with initial value
38
- const count = $(0);
39
-
40
- // Read value (with auto dependency tracking)
41
- console.log(count()); // 0
42
-
43
- // Set new value
44
- count(5);
45
-
46
- // Update using previous value
47
- count(prev => prev + 1); // 6
48
-
49
- // Create computed signals (auto-updating)
50
- const firstName = $('John');
51
- const lastName = $('Doe');
52
- const fullName = $(() => `${firstName()} ${lastName()}`);
53
- console.log(fullName()); // "John Doe"
54
- firstName('Jane'); // fullName() now returns "Jane Doe"
55
- ```
56
-
57
- ### Effects - Automatic Reactions
58
-
59
- Effects automatically run and re-run when their signal dependencies change:
60
-
61
- ```javascript
62
- const count = $(0);
63
-
64
- $.effect(() => {
65
- console.log(`Count is: ${count()}`);
66
- });
67
- // Logs: "Count is: 0"
68
-
69
- count(1);
70
- // Logs: "Count is: 1"
71
-
72
- // Effects can return cleanup functions
73
- $.effect(() => {
74
- const id = count();
75
- const timer = setInterval(() => {
76
- console.log(`Polling with count: ${id}`);
77
- }, 1000);
78
-
79
- // Cleanup runs before next effect execution
80
- return () => clearInterval(timer);
81
- });
82
- ```
83
-
84
- ### Rendering with `html`
85
-
86
- The `html` tag creates reactive DOM fragments:
87
-
88
- ```javascript
89
- const count = $(0);
90
- const isActive = $(true);
91
-
92
- const fragment = html`
93
- <div class="counter">
94
- <h2>Count: ${count}</h2>
95
-
96
- <!-- Event binding -->
97
- <button @click=${() => count(c => c + 1)}>
98
- Increment
99
- </button>
100
-
101
- <!-- Boolean attributes -->
102
- <button ?disabled=${() => !isActive()}>
103
- Submit
104
- </button>
105
- </div>
106
- `;
107
-
108
- document.body.appendChild(fragment);
109
- ```
110
-
111
- ## 🎨 Your First Reactive App
112
-
113
- Let's build a simple todo app to see SigPro in action:
114
-
115
- ```javascript
116
- import { $, html } from 'sigpro';
117
-
118
- // Create a simple todo app
119
- function TodoApp() {
120
- // Reactive state
121
- const todos = $(['Learn SigPro', 'Build something awesome']);
122
- const newTodo = $('');
123
-
124
- // Computed value
125
- const todoCount = $(() => todos().length);
126
-
127
- // Add todo function
128
- const addTodo = () => {
129
- if (newTodo().trim()) {
130
- todos([...todos(), newTodo()]);
131
- newTodo('');
132
- }
133
- };
134
-
135
- // Remove todo function
136
- const removeTodo = (index) => {
137
- todos(todos().filter((_, i) => i !== index));
138
- };
139
-
140
- // Return reactive template
141
- return html`
142
- <div style="max-width: 400px; margin: 2rem auto; font-family: system-ui;">
143
- <h1>📝 Todo App</h1>
144
-
145
- <!-- Input form -->
146
- <div style="display: flex; gap: 8px; margin-bottom: 16px;">
147
- <input
148
- type="text"
149
- :value=${newTodo}
150
- placeholder="Add a new todo..."
151
- style="flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px;"
152
- @keydown.enter=${addTodo}
153
- />
154
- <button
155
- @click=${addTodo}
156
- style="padding: 8px 16px; background: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer;"
157
- >
158
- Add
159
- </button>
160
- </div>
161
-
162
- <!-- Todo count -->
163
- <p>Total todos: ${todoCount}</p>
164
-
165
- <!-- Todo list -->
166
- <ul style="list-style: none; padding: 0;">
167
- ${() => todos().map((todo, index) => html`
168
- <li style="display: flex; justify-content: space-between; align-items: center; padding: 8px; margin: 4px 0; background: #f5f5f5; border-radius: 4px;">
169
- <span>${todo}</span>
170
- <button
171
- @click=${() => removeTodo(index)}
172
- style="padding: 4px 8px; background: #ff4444; color: white; border: none; border-radius: 4px; cursor: pointer;"
173
- >
174
-
175
- </button>
176
- </li>
177
- `)}
178
- </ul>
179
- </div>
180
- `;
181
- }
182
-
183
- // Mount the app
184
- document.body.appendChild(TodoApp());
185
- ```
186
-
187
- ## 🎯 Key Concepts
188
-
189
- ### 1. **Signal Patterns**
190
-
191
- | Pattern | Example | Use Case |
192
- |---------|---------|----------|
193
- | Basic signal | `const count = $(0)` | Simple values |
194
- | Computed | `$( () => first() + last() )` | Derived values |
195
- | Signal update | `count(5)` | Direct set |
196
- | Functional update | `count(prev => prev + 1)` | Based on previous |
197
-
198
- ### 2. **Effect Patterns**
199
-
200
- ```javascript
201
- // Basic effect
202
- $.effect(() => console.log(count()));
203
-
204
- // Effect with cleanup
205
- $.effect(() => {
206
- const timer = setInterval(() => {}, 1000);
207
- return () => clearInterval(timer);
208
- });
209
-
210
- // Stopping an effect
211
- const stop = $.effect(() => {});
212
- stop(); // Effect won't run again
213
- ```
214
-
215
- ### 3. **HTML Directives**
216
-
217
- | Directive | Example | Description |
218
- |-----------|---------|-------------|
219
- | `@event` | `@click=${handler}` | Event listeners |
220
- | `:property` | `:value=${signal}` | Two-way binding |
221
- | `?attribute` | `?disabled=${signal}` | Boolean attributes |
222
- | `.property` | `.scrollTop=${value}` | DOM properties |
223
-
224
- ## 💡 Pro Tips for Beginners
225
-
226
- ### 1. **Start Simple**
227
- ```javascript
228
- // Begin with basic signals
229
- const name = $('World');
230
- html`<h1>Hello, ${name}!</h1>`;
231
- ```
232
-
233
- ### 2. **Use Computed Signals for Derived State**
234
- ```javascript
235
- // ❌ Don't compute in template
236
- html`<p>Total: ${items().length * price()}</p>`;
237
-
238
- // ✅ Compute with signals
239
- const total = $(() => items().length * price());
240
- html`<p>Total: ${total}</p>`;
241
- ```
242
-
243
- ### 3. **Leverage Effects for Side Effects**
244
- ```javascript
245
- // Auto-save to localStorage
246
- $.effect(() => {
247
- localStorage.setItem('draft', JSON.stringify(draft()));
248
- });
249
- ```
250
-
251
- ## 🔧 VS Code Setup
252
-
253
- For the best development experience, install these VS Code extensions:
254
-
255
- - **lit-html** - Adds syntax highlighting for `html` tagged templates
256
- - **Prettier** - Automatically formats your template literals
257
-
258
- ```javascript
259
- // With lit-html extension, you get full syntax highlighting!
260
- html`
261
- <div style="color: #ff4444; background: linear-gradient(45deg, blue, green)">
262
- <h1>Beautiful highlighted template</h1>
263
- </div>
264
- `
265
- ```
266
-
267
- ## 📁 Project Structure
268
-
269
- Here's a recommended structure for larger apps:
270
-
271
- ```
272
- my-sigpro-app/
273
- ├── index.html
274
- ├── main.js
275
- ├── components/
276
- │ ├── Button.js
277
- │ ├── TodoList.js
278
- │ └── TodoItem.js
279
- ├── pages/
280
- │ ├── HomePage.js
281
- │ └── AboutPage.js
282
- └── utils/
283
- └── helpers.js
284
- ```
285
-
286
- Example `main.js`:
287
- ```javascript
288
- import { $, html } from 'sigpro';
289
- import HomePage from './pages/HomePage.js';
290
-
291
- // Mount your app
292
- document.body.appendChild(HomePage());
293
- ```
294
-
295
- ## 🎓 Summary
296
-
297
- You've learned:
298
- - ✅ How to install SigPro
299
- - ✅ Core concepts: signals, effects, and reactive rendering
300
- - ✅ Built a complete todo app
301
- - ✅ Key patterns and best practices
302
- - ✅ How to structure larger applications
303
-
304
- **Remember:** SigPro embraces the web platform. You're writing vanilla JavaScript with superpowers—no compilation, no lock-in, just clean, maintainable code that will work for years to come.
305
-
306
- > "Stop fighting the platform. Start building with it."
307
-
308
- Happy coding! 🎉
@@ -1,135 +0,0 @@
1
- # Why SigPro? ❓
2
-
3
- After years of building applications with React, Vue, and Svelte—investing countless hours mastering their unique mental models, build tools, and update cycles—I kept circling back to the same realization: no matter how sophisticated the framework, it all eventually compiles down to HTML, CSS, and vanilla JavaScript. The web platform has evolved tremendously, yet many libraries continue to reinvent the wheel, creating parallel universes with their own rules, their own syntaxes, and their own steep learning curves.
4
-
5
- **SigPro is my answer to a simple question:** Why fight the platform when we can embrace it?
6
-
7
- ## 🌐 The Web Platform Is Finally Ready
8
-
9
- Modern browsers now offer powerful primitives that make true reactivity possible without virtual DOM diffing, without compilers, and without lock-in:
10
-
11
- | Browser Primitive | What It Enables |
12
- |-------------------|-----------------|
13
- | **Custom Elements** | Create reusable components with native browser APIs |
14
- | **Shadow DOM** | Encapsulate styles and markup without preprocessors |
15
- | **CSS Custom Properties** | Dynamic theming without CSS-in-JS |
16
- | **Microtask Queues** | Efficient update batching without complex scheduling |
17
-
18
- ## 🎯 The SigPro Philosophy
19
-
20
- SigPro strips away the complexity, delivering a reactive programming model that feels familiar but stays remarkably close to vanilla JS:
21
-
22
- - **No JSX transformations** - Just template literals
23
- - **No template compilers** - The browser parses your HTML
24
- - **No proprietary syntax to learn** - Just functions and signals
25
- - **No build step required** - Works directly in the browser
26
-
27
- ```javascript
28
- // Just vanilla JavaScript with signals
29
- import { $, html } from 'sigpro';
30
-
31
- const count = $(0);
32
-
33
- document.body.appendChild(html`
34
- <div>
35
- <p>Count: ${count}</p>
36
- <button @click=${() => count(c => c + 1)}>
37
- Increment
38
- </button>
39
- </div>
40
- `);
41
- ```
42
-
43
- ## 📊 Comparative
44
-
45
- | Metric | SigPro | Solid | Svelte | Vue | React |
46
- |--------|--------|-------|--------|-----|-------|
47
- | **Bundle Size** (gzip) | 🥇 **5.2KB** | 🥈 15KB | 🥉 16.6KB | 20.4KB | 43.9KB |
48
- | **Time to Interactive** | 🥇 **0.8s** | 🥈 1.3s | 🥉 1.4s | 1.6s | 2.3s |
49
- | **Initial Render** (ms) | 🥇 **124ms** | 🥈 198ms | 🥉 287ms | 298ms | 452ms |
50
- | **Update Performance** (ms) | 🥇 **4ms** | 🥈 5ms | 🥈 5ms | 🥉 7ms | 18ms |
51
- | **Dependencies** | 🥇 **0** | 🥇 **0** | 🥇 **0** | 🥈 2 | 🥉 5 |
52
- | **Compilation Required** | 🥇 **No** | 🥇 **No** | 🥈 Yes | 🥇 **No** | 🥇 **No** |
53
- | **Browser Native** | 🥇 **Yes** | 🥈 Partial | 🥉 Partial | 🥉 Partial | No |
54
- | **Framework Lock-in** | 🥇 **None** | 🥈 Medium | 🥉 High | 🥈 Medium | 🥉 High |
55
- | **Longevity** (standards-based) | 🥇 **10+ years** | 🥈 5 years | 🥉 3 years | 🥈 5 years | 🥈 5 years |
56
-
57
- ## 🔑 Core Principles
58
-
59
- SigPro is built on four fundamental principles:
60
-
61
- ### 📡 **True Reactivity**
62
- Automatic dependency tracking with no manual subscriptions. When a signal changes, only the exact DOM nodes that depend on it update—surgically, efficiently, instantly.
63
-
64
- ### ⚡ **Surgical Updates**
65
- No virtual DOM diffing. No tree reconciliation. Just direct DOM updates where and when needed. The result is predictable performance that scales with your content, not your component count.
66
-
67
- ### 🧩 **Web Standards**
68
- Built on Custom Elements, not a custom rendering engine. Your components are real web components that work in any framework—or none at all.
69
-
70
- ### 🔬 **Predictable**
71
- No magic, just signals and effects. What you see is what you get. The debugging experience is straightforward because there's no framework layer between your code and the browser.
72
-
73
- ## 🎨 The Development Experience
74
-
75
- ```javascript
76
- // With VS Code + lit-html extension, you get:
77
- // ✅ Syntax highlighting
78
- // ✅ Color previews
79
- // ✅ Auto-formatting
80
- // ✅ IntelliSense
81
-
82
- html`
83
- <div style="color: #ff4444; background: linear-gradient(45deg, blue, green)">
84
- <h1>Beautiful highlighted template</h1>
85
- </div>
86
- `
87
- ```
88
-
89
- ## ⏱️ Built for the Long Term
90
-
91
- What emerged is a library that proves we've reached a turning point: the web is finally mature enough that we don't need to abstract it anymore. We can build reactive, component-based applications using virtually pure JavaScript, leveraging the platform's latest advances instead of working against them.
92
-
93
- **The result isn't just smaller bundles or faster rendering—it's code that will still run 10 years from now, in any browser, without maintenance.**
94
-
95
- ## 📈 The Verdict
96
-
97
- While other frameworks build parallel universes with proprietary syntax and compilation steps, SigPro embraces the web platform. SigPro isn't just another framework—it's a return to fundamentals, showing that the dream of simple, powerful reactivity is now achievable with the tools browsers give us out of the box.
98
-
99
- > *"Stop fighting the platform. Start building with it."*
100
-
101
- ## 🚀 Ready to Start?
102
-
103
- [Get Started with SigPro](/guide/getting-started) • [View on GitHub](https://github.com/natxocc/sigpro) • [npm Package](https://www.npmjs.com/package/sigpro)
104
-
105
- <style>
106
- table {
107
- width: 100%;
108
- border-collapse: collapse;
109
- margin: 2rem 0;
110
- }
111
-
112
- th {
113
- background-color: var(--vp-c-bg-soft);
114
- padding: 0.75rem;
115
- text-align: left;
116
- }
117
-
118
- td {
119
- padding: 0.75rem;
120
- border-bottom: 1px solid var(--vp-c-divider);
121
- }
122
-
123
- tr:hover {
124
- background-color: var(--vp-c-bg-soft);
125
- }
126
-
127
- blockquote {
128
- margin: 2rem 0;
129
- padding: 1.5rem;
130
- background: linear-gradient(135deg, var(--vp-c-brand-soft) 0%, transparent 100%);
131
- border-radius: 12px;
132
- font-size: 1.2rem;
133
- font-style: italic;
134
- }
135
- </style>
@@ -1,84 +0,0 @@
1
- ---
2
- # https://vitepress.dev/reference/default-theme-home-page
3
- layout: home
4
-
5
- hero:
6
- name: "SigPro"
7
- text: "Reactivity for the Web Platform"
8
- tagline: A minimalist reactive library for building web interfaces with signals, effects, and native web components. No compilation, no virtual DOM, just pure JavaScript and intelligent reactivity.
9
- image:
10
- src: /logo.svg
11
- alt: SigPro
12
- actions:
13
- - theme: brand
14
- text: Get Started
15
- link: /guide/getting-started
16
-
17
- features:
18
- - title: ⚡ 3KB gzipped
19
- details: Minimal footprint with maximum impact. No heavy dependencies, just pure reactivity.
20
- - title: 🎯 Native Web Components
21
- details: Built on Custom Elements and Shadow DOM. Leverage the platform, don't fight it.
22
- - title: 🔄 Signal-based Reactivity
23
- details: Fine-grained updates without virtual DOM diffing. Just intelligent, automatic reactivity.
24
- ---
25
-
26
- <div class="custom-container">
27
- <p class="npm-stats">
28
- <img src="https://badge.fury.io/js/sigpro.svg" alt="npm version">
29
- <img src="https://img.shields.io/bundlephobia/minzip/sigpro" alt="bundle size">
30
- <img src="https://img.shields.io/npm/l/sigpro" alt="license">
31
- </p>
32
- </div>
33
-
34
- <div class="verdict-quote">
35
- <p><strong>"Stop fighting the platform. Start building with it."</strong></p>
36
- </div>
37
-
38
- <style>
39
- .npm-stats {
40
- text-align: center;
41
- margin: 2rem 0;
42
- }
43
-
44
- .npm-stats img {
45
- margin: 0 0.5rem;
46
- display: inline-block;
47
- }
48
-
49
- .custom-container {
50
- max-width: 1152px;
51
- margin: 0 auto;
52
- padding: 0 24px;
53
- }
54
-
55
- .verdict-quote {
56
- text-align: center;
57
- font-size: 1.5rem;
58
- margin: 3rem 0;
59
- padding: 2rem;
60
- background: linear-gradient(135deg, var(--vp-c-brand-soft) 0%, transparent 100%);
61
- border-radius: 12px;
62
- }
63
-
64
- table {
65
- width: 100%;
66
- border-collapse: collapse;
67
- margin: 2rem 0;
68
- }
69
-
70
- th {
71
- background-color: var(--vp-c-bg-soft);
72
- padding: 0.75rem;
73
- text-align: left;
74
- }
75
-
76
- td {
77
- padding: 0.75rem;
78
- border-bottom: 1px solid var(--vp-c-divider);
79
- }
80
-
81
- tr:hover {
82
- background-color: var(--vp-c-bg-soft);
83
- }
84
- </style>
@@ -1,118 +0,0 @@
1
- <?xml version="1.0" standalone="no"?>
2
- <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
3
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
4
- <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
5
- width="600.000000pt" height="591.000000pt" viewBox="0 0 600.000000 591.000000"
6
- preserveAspectRatio="xMidYMid meet">
7
- <g transform="translate(0.000000,591.000000) scale(0.100000,-0.100000)"
8
- fill="#000000" stroke="none">
9
- <path d="M1130 3454 c-44 -9 -84 -27 -123 -57 -97 -76 -91 -242 12 -310 34
10
- -23 60 -32 193 -71 58 -17 78 -36 78 -74 0 -28 -24 -44 -74 -49 -65 -8 -137
11
- 20 -181 68 l-36 40 -27 -33 c-15 -18 -37 -43 -50 -56 -26 -27 -20 -40 35 -86
12
- 65 -55 118 -71 233 -71 89 1 112 4 152 24 94 46 137 146 108 252 -20 71 -81
13
- 112 -224 152 -124 35 -150 64 -101 112 42 43 147 25 203 -35 18 -20 19 -19 70
14
- 30 47 45 51 53 40 69 -22 31 -71 67 -108 80 -39 13 -161 22 -200 15z m193 -36
15
- c56 -23 97 -54 97 -73 0 -7 -17 -27 -37 -44 -36 -30 -37 -31 -57 -13 -12 10
16
- -34 24 -51 31 -34 14 -148 24 -140 11 2 -4 -4 -10 -15 -13 -32 -8 -43 -52 -24
17
- -93 9 -19 19 -32 22 -30 2 3 17 -1 33 -9 15 -8 39 -15 54 -15 14 0 25 -5 25
18
- -11 0 -6 9 -8 20 -4 11 4 20 2 20 -4 0 -6 9 -11 21 -11 37 0 114 -59 133 -103
19
- 24 -55 15 -138 -18 -182 -28 -37 -101 -79 -123 -71 -9 4 -11 1 -7 -5 5 -8 -22
20
- -10 -94 -7 -85 3 -106 7 -131 26 -17 12 -37 22 -46 22 -8 0 -15 3 -15 8 0 4
21
- -10 12 -22 17 -41 19 -44 40 -12 77 17 19 37 32 45 30 27 -9 69 -44 64 -53 -4
22
- -5 2 -6 11 -2 11 4 15 3 11 -4 -5 -7 1 -9 15 -5 12 3 19 1 15 -4 -3 -6 25 -11
23
- 68 -13 69 -2 77 0 100 23 14 14 31 26 38 27 9 0 9 2 0 6 -7 2 -13 16 -13 29 0
24
- 33 -38 66 -91 81 -24 6 -71 18 -104 27 -32 9 -63 23 -68 31 -4 8 -12 13 -17
25
- 10 -4 -3 -23 13 -40 36 -28 34 -33 48 -33 97 0 60 35 138 56 125 5 -3 7 -1 3
26
- 5 -8 13 2 20 69 49 68 30 168 31 238 1z"/>
27
- <path d="M1031 3144 c0 -11 3 -14 6 -6 3 7 2 16 -1 19 -3 4 -6 -2 -5 -13z"/>
28
- <path d="M945 2900 c-6 -9 11 -50 21 -50 2 0 0 9 -6 20 -6 11 -8 25 -5 30 3 6
29
- 4 10 1 10 -3 0 -8 -4 -11 -10z"/>
30
- <path d="M2428 3445 c-154 -39 -259 -173 -261 -333 -2 -111 21 -177 86 -248
31
- 77 -85 134 -108 267 -108 86 -1 113 3 151 20 114 53 169 139 177 276 l5 88
32
- -167 0 -166 0 0 -66 0 -65 85 3 c74 3 85 1 85 -14 0 -27 -48 -76 -87 -89 -49
33
- -16 -133 -6 -176 22 -40 27 -82 89 -91 137 -8 44 10 119 37 159 64 94 220 110
34
- 304 31 l23 -22 56 56 56 56 -43 32 c-44 32 -97 59 -131 65 -65 13 -159 13
35
- -210 0z m202 -16 c8 -2 17 -7 20 -10 3 -3 21 -10 40 -15 19 -5 35 -15 35 -21
36
- 0 -6 4 -15 9 -20 5 -5 6 -3 2 5 -4 6 -3 12 3 12 6 0 15 -9 22 -21 9 -17 7 -24
37
- -10 -40 -11 -10 -24 -27 -30 -36 -9 -17 -13 -16 -59 9 -62 34 -139 53 -157 38
38
- -8 -6 -29 -12 -48 -13 -19 -1 -33 -5 -30 -9 2 -5 -3 -8 -12 -8 -9 0 -14 -4
39
- -10 -9 3 -5 -4 -12 -15 -16 -11 -3 -20 -13 -20 -22 0 -14 -2 -14 -19 1 -13 12
40
- -21 14 -26 6 -3 -6 -1 -9 6 -8 6 2 14 -3 17 -11 2 -8 0 -11 -6 -7 -6 4 -8 -1
41
- -5 -13 3 -10 0 -22 -6 -25 -13 -9 -15 -129 -2 -173 12 -42 76 -107 125 -127
42
- 78 -32 198 -9 226 43 5 11 17 27 26 35 10 11 11 16 3 16 -7 0 -9 3 -6 7 4 3 2
43
- 12 -4 20 -8 8 -35 13 -79 13 l-68 0 -3 44 -4 44 124 1 c69 1 129 5 134 8 6 4
44
- 7 1 2 -7 -6 -9 -4 -12 6 -8 10 4 14 -4 14 -31 0 -20 -4 -42 -9 -50 -6 -10 -6
45
- -12 3 -7 8 6 10 -4 5 -36 -7 -45 -72 -142 -110 -162 -10 -6 -21 -14 -24 -17
46
- -21 -27 -213 -47 -265 -27 -75 28 -115 50 -110 58 3 6 0 7 -8 4 -14 -5 -87 72
47
- -87 92 0 5 5 2 10 -6 7 -12 9 -10 8 7 -1 11 -7 19 -14 16 -12 -4 -27 34 -28
48
- 74 -1 12 -4 25 -8 29 -12 11 -10 64 2 64 6 0 10 5 10 11 0 5 -5 7 -11 3 -8 -5
49
- -8 -1 0 14 6 11 11 34 11 51 0 17 4 31 9 31 8 0 24 35 23 50 0 3 19 28 44 55
50
- 25 29 42 41 38 30 l-6 -20 13 20 c6 11 13 21 15 23 1 2 32 13 68 26 62 20 174
51
- 28 226 15z"/>
52
- <path d="M4670 3451 c-19 -4 -56 -18 -82 -31 -145 -72 -217 -236 -178 -409 14
53
- -64 64 -147 106 -179 16 -12 34 -26 41 -32 6 -5 39 -18 72 -30 114 -38 243
54
- -22 338 44 205 141 184 489 -37 606 -64 33 -178 47 -260 31z m177 -22 c23 -6
55
- 40 -16 37 -21 -4 -6 2 -7 15 -3 14 4 23 2 27 -9 3 -9 12 -12 21 -9 11 4 14 2
56
- 9 -5 -4 -7 -1 -12 8 -12 21 0 85 -89 86 -117 0 -13 4 -23 8 -23 16 0 30 -74
57
- 26 -130 -7 -100 -11 -119 -24 -135 -7 -8 -9 -15 -6 -15 10 0 -52 -85 -78 -107
58
- -20 -16 -50 -32 -116 -61 -31 -14 -161 -10 -219 7 -24 7 -61 23 -81 36 -48 30
59
- -114 110 -104 126 5 8 3 9 -6 4 -10 -6 -12 -3 -8 13 4 12 2 22 -2 22 -4 0 -11
60
- 27 -15 60 -8 71 2 143 18 134 8 -5 7 -2 0 7 -16 16 -17 33 -1 23 6 -4 8 -3 5
61
- 3 -10 16 13 74 26 66 6 -3 7 -1 3 6 -9 14 57 82 106 108 73 40 189 54 265 32z"/>
62
- <path d="M4676 3307 c-22 -10 -47 -28 -57 -40 -10 -12 -18 -18 -19 -14 0 4 -6
63
- 2 -14 -5 -7 -7 -11 -19 -8 -27 3 -8 1 -12 -5 -8 -11 7 -16 -28 -16 -113 0 -74
64
- 6 -109 17 -102 5 3 7 -2 3 -11 -4 -10 -2 -16 6 -14 7 1 11 -4 9 -11 -1 -8 2
65
- -11 8 -7 5 3 10 -1 10 -10 0 -8 16 -23 35 -32 19 -9 33 -19 31 -22 -2 -3 27
66
- -6 64 -6 37 0 66 4 63 8 -3 5 1 7 8 6 23 -4 65 18 87 45 11 14 25 26 32 26 6
67
- 0 10 6 8 12 -3 7 1 18 7 25 15 15 16 195 2 186 -5 -3 -8 0 -5 7 5 15 -62 84
68
- -102 105 -45 23 -118 24 -164 2z m164 -26 c19 -10 49 -37 65 -60 27 -39 30
69
- -50 30 -119 0 -65 -4 -83 -25 -114 -36 -53 -85 -78 -156 -78 -68 0 -107 20
70
- -149 74 -40 52 -46 146 -15 210 49 102 149 137 250 87z"/>
71
- <path d="M1619 3443 c0 -2 0 -33 -1 -70 l0 -68 58 1 59 0 -2 -205 -2 -205 -58
72
- 3 -58 2 0 -70 0 -71 203 0 202 0 0 70 0 70 -77 -1 c-43 -1 -68 -4 -55 -6 12
73
- -2 22 -7 22 -11 0 -4 19 -7 42 -7 l43 0 3 -48 3 -48 -165 3 c-92 2 -166 -1
74
- -166 -5 0 -4 -9 -3 -21 3 -16 9 -19 19 -17 53 l3 41 47 1 c76 2 76 -1 76 223
75
- 1 109 -3 203 -7 211 -5 8 -29 14 -57 15 -32 1 -49 5 -48 14 1 6 2 28 3 47 l1
76
- 35 176 0 176 0 -4 -47 -3 -48 -42 -1 c-73 -1 -73 -2 -72 -220 1 -107 5 -194
77
- 10 -194 5 0 9 90 9 199 l0 199 60 -5 61 -6 -3 72 -3 72 -198 2 c-108 1 -197 1
78
- -198 0z"/>
79
- <path d="M3018 3102 l-3 -342 85 0 85 0 0 112 0 113 105 5 c113 6 145 17 192
80
- 67 57 60 76 188 39 261 -26 51 -77 99 -118 113 -19 6 -112 12 -208 12 l-175 2
81
- -2 -343z m375 307 c20 -5 37 -14 37 -19 0 -6 6 -10 14 -10 8 0 18 -5 22 -12 5
82
- -7 3 -8 -6 -3 -9 5 -11 4 -6 -3 4 -7 13 -12 19 -12 7 0 20 -20 30 -45 23 -54
83
- 19 -135 -8 -197 -4 -10 -11 -15 -16 -12 -5 3 -6 -2 -3 -10 4 -10 -10 -24 -43
84
- -43 -53 -31 -55 -32 -167 -38 -107 -5 -112 -12 -106 -131 4 -83 3 -94 -12 -98
85
- -10 -2 -18 -1 -18 3 0 3 -20 5 -45 3 l-45 -4 0 321 0 321 158 0 c86 0 174 -5
86
- 195 -11z"/>
87
- <path d="M3187 3308 c-27 -20 -34 -173 -9 -183 26 -10 151 -11 144 -1 -3 5 5
88
- 7 16 4 12 -4 20 -3 18 1 -3 4 4 15 15 24 29 25 26 100 -5 134 -20 21 -35 26
89
- -92 30 -50 3 -74 1 -87 -9z m157 -29 c32 -25 36 -84 7 -120 -16 -20 -30 -24
90
- -93 -27 l-74 -4 0 86 1 86 66 0 c52 0 72 -4 93 -21z"/>
91
- <path d="M3710 3103 l0 -343 83 0 82 0 -3 120 -3 120 45 0 c44 0 45 -1 79 -57
92
- 19 -32 49 -86 67 -120 l32 -62 95 -3 c52 -2 97 -1 99 1 7 7 -18 31 -27 25 -5
93
- -3 -7 1 -4 8 3 7 -22 59 -55 116 -60 103 -68 122 -51 122 16 0 86 80 98 112
94
- 39 108 -9 228 -110 277 -37 18 -65 21 -235 23 l-192 3 0 -342z m385 313 c26
95
- -5 74 -37 71 -49 -1 -6 -1 -9 1 -4 18 31 73 -77 73 -143 0 -56 -36 -127 -78
96
- -155 -17 -11 -35 -30 -41 -42 -9 -19 -6 -27 14 -47 14 -14 25 -32 25 -41 0 -8
97
- 5 -15 11 -15 6 0 8 -9 4 -20 -4 -13 -2 -19 4 -18 12 3 68 -88 60 -96 -4 -4
98
- -77 -7 -120 -5 -17 0 -54 64 -52 87 0 7 -1 11 -5 8 -6 -7 -32 41 -32 61 0 8
99
- -4 12 -8 9 -4 -3 -17 11 -27 31 -21 38 -55 58 -67 39 -6 -8 -10 -8 -16 1 -6 9
100
- -13 9 -32 0 -27 -14 -27 -12 -29 -150 l-1 -88 -57 2 -58 2 3 316 c2 235 6 317
101
- 15 323 10 6 301 1 342 -6z"/>
102
- <path d="M3886 3328 c3 -4 -1 -8 -9 -8 -22 0 -37 -128 -21 -187 6 -22 11 -23
103
- 101 -23 91 0 96 1 124 29 41 41 43 113 5 146 -51 44 -67 55 -79 55 -8 0 -7 -4
104
- 3 -10 11 -7 -4 -10 -48 -10 -35 0 -61 4 -58 8 3 5 -1 9 -9 9 -8 0 -12 -4 -9
105
- -9z m180 -49 c43 -43 31 -133 -19 -143 -12 -3 -57 -7 -99 -8 l-78 -3 0 93 0
106
- 94 85 -3 c75 -4 87 -7 111 -30z"/>
107
- <path d="M4167 3099 c7 -7 15 -10 18 -7 3 3 -2 9 -12 12 -14 6 -15 5 -6 -5z"/>
108
- <path d="M3986 3017 c3 -10 9 -15 12 -12 3 3 0 11 -7 18 -10 9 -11 8 -5 -6z"/>
109
- <path d="M1643 2830 c0 -25 2 -35 4 -22 2 12 2 32 0 45 -2 12 -4 2 -4 -23z"/>
110
- <path d="M2923 2373 c13 -4 17 -15 17 -59 0 -60 -16 -77 -51 -55 -11 6 -19 7
111
- -19 2 0 -6 6 -13 13 -18 45 -28 81 10 75 82 -2 33 1 46 12 49 8 2 -3 4 -25 4
112
- -22 0 -32 -2 -22 -5z"/>
113
- <path d="M3072 2368 c-24 -24 -13 -49 28 -65 27 -11 40 -22 38 -32 -4 -20 -44
114
- -27 -64 -10 -8 6 -17 9 -20 6 -3 -3 5 -12 18 -21 37 -24 87 -7 88 30 0 15 -19
115
- 29 -55 41 -34 11 -39 30 -13 47 13 8 23 8 38 -2 27 -16 35 -15 20 3 -15 18
116
- -61 20 -78 3z"/>
117
- </g>
118
- </svg>