From 22ec847fdf916c60b8024cc25b935b85f8fd6778 Mon Sep 17 00:00:00 2001
From: natxocc <natxocc@gmail.com>
Date: Sat, 4 Apr 2026 16:38:03 +0200
Subject: [PATCH] Custom APi

---
 docs/api/quick.md | 97 +++++++++++++++++++++++++++++++++++++++++++++++
 index.js          |  2 +-
 package.json      |  4 +-
 3 files changed, 100 insertions(+), 3 deletions(-)

diff --git a/docs/api/quick.md b/docs/api/quick.md
index 4200d75..a4a56f1 100644
--- a/docs/api/quick.md
+++ b/docs/api/quick.md
@@ -115,6 +115,103 @@ SigPro provides **PascalCase** wrappers for all standard HTML5 tags (e.g., `Div`
 
 ---
 
+## Custom API BYOS (Bring Your Own Syntax)
+
+SigPro's core functions are intentionally simple and can be easily renamed in **one line** to match your preferred coding style.
+
+### One-Line Renaming
+
+```javascript
+import { $ as signal, $mount as render, $html as tag, $if as when, $for as each, $watch as effect } from 'sigpro';
+
+// Now use your custom names
+const count = signal(0);
+effect(() => console.log(count()));
+
+render(() => 
+  tag('div', {}, [
+    when(count, 
+      () => tag('span', {}, 'Positive'),
+      () => tag('span', {}, 'Zero or negative')
+    )
+  ]), 
+  '#app'
+);
+```
+
+### Create React-like Hooks
+
+```javascript
+import * as SigPro from 'sigpro';
+
+const useState = (initial) => {
+  const signal = SigPro.$(initial);
+  return [signal, (value) => signal(value)];
+};
+
+const useEffect = (fn, deps) => {
+  deps ? SigPro.$watch(deps, fn) : SigPro.$watch(fn);
+};
+
+// Usage
+const Counter = () => {
+  const [count, setCount] = useState(0);
+  useEffect(() => console.log(count()), [count]);
+  return SigPro.$html('button', { onClick: () => setCount(count() + 1) }, count);
+};
+```
+
+### Create Vue-like API
+
+```javascript
+import { $ as ref, $watch as watch, $mount as mount } from 'sigpro';
+
+const computed = (fn) => ref(fn);
+const createApp = (component) => ({ mount: (selector) => mount(component, selector) });
+
+// Usage
+const count = ref(0);
+const double = computed(() => count() * 2);
+watch([count], () => console.log(count()));
+```
+
+### Global Custom API with sigpro.config.js
+
+Create a central configuration file to reuse your custom naming across the entire project:
+
+```javascript
+// config/sigpro.config.js
+import { $ as signal, $mount as render, $html as tag, $if as when, $for as each, $watch as effect } from 'sigpro';
+
+// Re-export everything with your custom names
+export { signal, render, tag, when, each, effect };
+
+// Also re-export the original functions if needed
+export * from 'sigpro';
+```
+
+```javascript
+// app.js - Import your custom API globally
+import { signal, render, tag, when, each, effect } from './config/sigpro.config.js';
+
+// Use your preferred syntax everywhere
+const count = signal(0);
+const double = signal(() => count() * 2);
+
+effect(() => console.log(`Count: ${count()}, Double: ${double()}`));
+
+const App = () =>
+  tag('div', { class: 'p-4' }, [
+    tag('h1', {}, () => `Count: ${count()}`),
+    tag('button', { onclick: () => count(count() + 1) }, 'Increment')
+  ]);
+
+render(App, '#app');
+```
+
+> [!TIP]
+> **Why rename?** Team preferences, framework migration, or just personal taste. SigPro adapts to you, not the other way around.
+
 > [!IMPORTANT]
 > **Performance Hint:** For lists (`$for`), always provide a unique key function `(item) => item.id` to prevent unnecessary node creation and enable reordering.
 
diff --git a/index.js b/index.js
index 380e450..57a0649 100644
--- a/index.js
+++ b/index.js
@@ -1,2 +1,2 @@
 // index.js
-export * from './sigpro/index.js';
+export * from './dist/sigpro.esm.js'; 
\ No newline at end of file
diff --git a/package.json b/package.json
index 72ab650..746030c 100644
--- a/package.json
+++ b/package.json
@@ -3,14 +3,14 @@
   "version": "1.1.20",
   "type": "module",
   "license": "MIT",
-  "main": "./index.js",
+  "main": "./dist/sigpro.esm.min.js",
   "module": "./dist/sigpro.esm.min.js",
   "unpkg": "./dist/sigpro.min.js",
   "jsdelivr": "./dist/sigpro.min.js",
   "exports": {
     ".": {
+      "development": "./index.js",
       "import": "./dist/sigpro.esm.min.js",
-      "require": "./index.js",
       "script": "./dist/sigpro.js",
       "types": "./sigpro/sigpro.d.ts"
     },