Rename $e to $effect and update references
This commit is contained in:
39
sigpro.js
39
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<Object|null>} 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;
|
||||
|
||||
Reference in New Issue
Block a user