From 5a2494bb22fc3af0a237c8d4b9aaa73ee534ec08 Mon Sep 17 00:00:00 2001 From: Natxo <1172351+natxocc@users.noreply.github.com> Date: Sun, 15 Mar 2026 14:01:44 +0100 Subject: [PATCH] Rename $e to $effect and update references --- sigpro.js | 39 +++++++++++++++++++++++---------------- 1 file changed, 23 insertions(+), 16 deletions(-) diff --git a/sigpro.js b/sigpro.js index 89a0bf1..03fd53d 100644 --- a/sigpro.js +++ b/sigpro.js @@ -101,7 +101,7 @@ export const $ = (initialValue) => { * @param {Function} effectFn - The effect function to run * @returns {Function} Cleanup function to stop the effect */ -export const $e = (effectFn) => { +export const $effect = (effectFn) => { const effect = { dependencies: new Set(), cleanupHandlers: new Set(), @@ -142,13 +142,13 @@ export const $e = (effectFn) => { * @param {Storage} [storage=localStorage] - Storage type (localStorage/sessionStorage) * @returns {Function} Signal that persists to storage */ -export const $$ = (key, initialValue, storage = localStorage) => { +export const $storage = (key, initialValue, storage = localStorage) => { // Load saved value const saved = storage.getItem(key); const signal = $(saved !== null ? JSON.parse(saved) : initialValue); // Auto-save on changes - $e(() => { + $effect(() => { const value = signal(); if (value === undefined || value === null) { storage.removeItem(key); @@ -197,7 +197,7 @@ export const html = (strings, ...values) => { parent.insertBefore(endMarker, node); let lastResult; - $e(() => { + $effect(() => { let result = typeof currentValue === "function" ? currentValue() : currentValue; if (result === lastResult) return; lastResult = result; @@ -333,15 +333,15 @@ export const html = (strings, ...values) => { }); // Cleanup - if ($e.onCleanup) { - $e.onCleanup(() => node.removeEventListener(eventName, handlerWrapper)); + if ($effect.onCleanup) { + $effect.onCleanup(() => node.removeEventListener(eventName, handlerWrapper)); } } else if (firstChar === ":") { // Two-way binding const propertyName = attributeName.slice(1); const eventType = node.type === "checkbox" || node.type === "radio" ? "change" : "input"; - $e(() => { + $effect(() => { const value = typeof currentValue === "function" ? currentValue() : currentValue; if (node[propertyName] !== value) node[propertyName] = value; }); @@ -353,14 +353,14 @@ export const html = (strings, ...values) => { } else if (firstChar === "?") { // Boolean attribute const attrName = attributeName.slice(1); - $e(() => { + $effect(() => { const result = typeof currentValue === "function" ? currentValue() : currentValue; node.toggleAttribute(attrName, !!result); }); } else if (firstChar === ".") { // Property binding const propertyName = attributeName.slice(1); - $e(() => { + $effect(() => { let result = typeof currentValue === "function" ? currentValue() : currentValue; node[propertyName] = result; if (result != null && typeof result !== "object" && typeof result !== "boolean") { @@ -370,7 +370,7 @@ export const html = (strings, ...values) => { } else { // Regular attribute if (typeof currentValue === "function") { - $e(() => node.setAttribute(attributeName, currentValue())); + $effect(() => node.setAttribute(attributeName, currentValue())); } else { node.setAttribute(attributeName, currentValue); } @@ -393,7 +393,7 @@ export const html = (strings, ...values) => { * @param {Function} setupFunction - Component setup function * @param {string[]} observedAttributes - Array of observed attributes */ -export const $c = (tagName, setupFunction, observedAttributes = []) => { +export const $component = (tagName, setupFunction, observedAttributes = []) => { if (customElements.get(tagName)) return; customElements.define( @@ -464,7 +464,7 @@ export const $c = (tagName, setupFunction, observedAttributes = []) => { * @param {Function} [loading] - Optional signal function to track loading state * @returns {Promise} Parsed JSON response or null on error */ -export const $f = async (url, data, loading) => { +export const $fetch = async (url, data, loading) => { if (loading) loading(true); try { @@ -486,7 +486,7 @@ export const $f = async (url, data, loading) => { * @param {Array<{path: string|RegExp, component: Function}>} routes - Route configurations * @returns {HTMLDivElement} Router container element */ -export const $r = (routes) => { +export const $router = (routes) => { /** * Gets current path from hash * @returns {string} Current path @@ -502,7 +502,7 @@ export const $r = (routes) => { if (currentPath() !== nextPath) currentPath(nextPath); }); - $e(() => { + $effect(() => { const path = currentPath(); let matchedRoute = null; let routeParams = {}; @@ -544,7 +544,7 @@ export const $r = (routes) => { * Navigates to a specific route * @param {string} path - Target path */ -$r.go = (path) => { +$router.go = (path) => { const targetPath = path.startsWith("/") ? path : `/${path}`; if (window.location.hash !== `#${targetPath}`) window.location.hash = targetPath; }; @@ -616,7 +616,14 @@ export const $ws = (url, options = {}) => { connect(); - if ($e?.onCleanup) $e.onCleanup(close); + if ($effect?.onCleanup) $effect.onCleanup(close); return { status, messages, error, send, close }; }; + +$.effect = $effect; +$.component = $component; +$.fetch = $fetch; +$.router = $router; +$.ws = $ws; +$.storage = $storage;