Rename $effect to $e and update references

This commit is contained in:
Natxo
2026-03-14 01:06:13 +01:00
committed by GitHub
parent 84e1dbab24
commit f7950057f5

View File

@@ -101,7 +101,7 @@ export const $ = (initialValue) => {
* @param {Function} effectFn - The effect function to run * @param {Function} effectFn - The effect function to run
* @returns {Function} Cleanup function to stop the effect * @returns {Function} Cleanup function to stop the effect
*/ */
export const $effect = (effectFn) => { export const $e = (effectFn) => {
const effect = { const effect = {
dependencies: new Set(), dependencies: new Set(),
cleanupHandlers: new Set(), cleanupHandlers: new Set(),
@@ -148,7 +148,7 @@ export const $$ = (key, initialValue, storage = localStorage) => {
const signal = $(saved !== null ? JSON.parse(saved) : initialValue); const signal = $(saved !== null ? JSON.parse(saved) : initialValue);
// Auto-save on changes // Auto-save on changes
$effect(() => { $e(() => {
const value = signal(); const value = signal();
if (value === undefined || value === null) { if (value === undefined || value === null) {
storage.removeItem(key); storage.removeItem(key);
@@ -197,7 +197,7 @@ export const html = (strings, ...values) => {
parent.insertBefore(endMarker, node); parent.insertBefore(endMarker, node);
let lastResult; let lastResult;
$effect(() => { $e(() => {
let result = typeof currentValue === "function" ? currentValue() : currentValue; let result = typeof currentValue === "function" ? currentValue() : currentValue;
if (result === lastResult) return; if (result === lastResult) return;
lastResult = result; lastResult = result;
@@ -333,15 +333,15 @@ export const html = (strings, ...values) => {
}); });
// Cleanup // Cleanup
if ($effect.onCleanup) { if ($e.onCleanup) {
$effect.onCleanup(() => node.removeEventListener(eventName, handlerWrapper)); $e.onCleanup(() => node.removeEventListener(eventName, handlerWrapper));
} }
} else if (firstChar === ":") { } else if (firstChar === ":") {
// Two-way binding // Two-way binding
const propertyName = attributeName.slice(1); const propertyName = attributeName.slice(1);
const eventType = node.type === "checkbox" || node.type === "radio" ? "change" : "input"; const eventType = node.type === "checkbox" || node.type === "radio" ? "change" : "input";
$effect(() => { $e(() => {
const value = typeof currentValue === "function" ? currentValue() : currentValue; const value = typeof currentValue === "function" ? currentValue() : currentValue;
if (node[propertyName] !== value) node[propertyName] = value; if (node[propertyName] !== value) node[propertyName] = value;
}); });
@@ -353,14 +353,14 @@ export const html = (strings, ...values) => {
} else if (firstChar === "?") { } else if (firstChar === "?") {
// Boolean attribute // Boolean attribute
const attrName = attributeName.slice(1); const attrName = attributeName.slice(1);
$effect(() => { $e(() => {
const result = typeof currentValue === "function" ? currentValue() : currentValue; const result = typeof currentValue === "function" ? currentValue() : currentValue;
node.toggleAttribute(attrName, !!result); node.toggleAttribute(attrName, !!result);
}); });
} else if (firstChar === ".") { } else if (firstChar === ".") {
// Property binding // Property binding
const propertyName = attributeName.slice(1); const propertyName = attributeName.slice(1);
$effect(() => { $e(() => {
let result = typeof currentValue === "function" ? currentValue() : currentValue; let result = typeof currentValue === "function" ? currentValue() : currentValue;
node[propertyName] = result; node[propertyName] = result;
if (result != null && typeof result !== "object" && typeof result !== "boolean") { if (result != null && typeof result !== "object" && typeof result !== "boolean") {
@@ -370,7 +370,7 @@ export const html = (strings, ...values) => {
} else { } else {
// Regular attribute // Regular attribute
if (typeof currentValue === "function") { if (typeof currentValue === "function") {
$effect(() => node.setAttribute(attributeName, currentValue())); $e(() => node.setAttribute(attributeName, currentValue()));
} else { } else {
node.setAttribute(attributeName, currentValue); node.setAttribute(attributeName, currentValue);
} }
@@ -393,7 +393,7 @@ export const html = (strings, ...values) => {
* @param {Function} setupFunction - Component setup function * @param {Function} setupFunction - Component setup function
* @param {string[]} observedAttributes - Array of observed attributes * @param {string[]} observedAttributes - Array of observed attributes
*/ */
export const $component = (tagName, setupFunction, observedAttributes = []) => { export const $c = (tagName, setupFunction, observedAttributes = []) => {
if (customElements.get(tagName)) return; if (customElements.get(tagName)) return;
customElements.define( customElements.define(
@@ -464,7 +464,7 @@ export const $component = (tagName, setupFunction, observedAttributes = []) => {
* @param {Function} [loading] - Optional signal function to track loading state * @param {Function} [loading] - Optional signal function to track loading state
* @returns {Promise<Object|null>} Parsed JSON response or null on error * @returns {Promise<Object|null>} Parsed JSON response or null on error
*/ */
export const $fetch = async (url, data, loading) => { export const $f = async (url, data, loading) => {
if (loading) loading(true); if (loading) loading(true);
try { try {
@@ -486,7 +486,7 @@ export const $fetch = async (url, data, loading) => {
* @param {Array<{path: string|RegExp, component: Function}>} routes - Route configurations * @param {Array<{path: string|RegExp, component: Function}>} routes - Route configurations
* @returns {HTMLDivElement} Router container element * @returns {HTMLDivElement} Router container element
*/ */
export const $router = (routes) => { export const $r = (routes) => {
/** /**
* Gets current path from hash * Gets current path from hash
* @returns {string} Current path * @returns {string} Current path
@@ -502,7 +502,7 @@ export const $router = (routes) => {
if (currentPath() !== nextPath) currentPath(nextPath); if (currentPath() !== nextPath) currentPath(nextPath);
}); });
$effect(() => { $e(() => {
const path = currentPath(); const path = currentPath();
let matchedRoute = null; let matchedRoute = null;
let routeParams = {}; let routeParams = {};
@@ -544,7 +544,7 @@ export const $router = (routes) => {
* Navigates to a specific route * Navigates to a specific route
* @param {string} path - Target path * @param {string} path - Target path
*/ */
$router.go = (path) => { $r.go = (path) => {
const targetPath = path.startsWith("/") ? path : `/${path}`; const targetPath = path.startsWith("/") ? path : `/${path}`;
if (window.location.hash !== `#${targetPath}`) window.location.hash = targetPath; if (window.location.hash !== `#${targetPath}`) window.location.hash = targetPath;
}; };
@@ -556,13 +556,9 @@ $router.go = (path) => {
* @returns {Object} WebSocket with reactive signals * @returns {Object} WebSocket with reactive signals
*/ */
export const $ws = (url, options = {}) => { export const $ws = (url, options = {}) => {
const { const { reconnect = true, maxReconnect = 5, reconnectInterval = 1000 } = options;
reconnect = true,
maxReconnect = 5,
reconnectInterval = 1000
} = options;
const status = $('disconnected'); const status = $("disconnected");
const messages = $([]); const messages = $([]);
const error = $(null); const error = $(null);
@@ -571,11 +567,11 @@ export const $ws = (url, options = {}) => {
let reconnectTimer = null; let reconnectTimer = null;
const connect = () => { const connect = () => {
status('connecting'); status("connecting");
ws = new WebSocket(url); ws = new WebSocket(url);
ws.onopen = () => { ws.onopen = () => {
status('connected'); status("connected");
reconnectAttempts = 0; reconnectAttempts = 0;
error(null); error(null);
}; };
@@ -586,24 +582,27 @@ export const $ws = (url, options = {}) => {
ws.onerror = (err) => { ws.onerror = (err) => {
error(err); error(err);
status('error'); status("error");
}; };
ws.onclose = () => { ws.onclose = () => {
status('disconnected'); status("disconnected");
if (reconnect && reconnectAttempts < maxReconnect) { if (reconnect && reconnectAttempts < maxReconnect) {
reconnectTimer = setTimeout(() => { reconnectTimer = setTimeout(
reconnectAttempts++; () => {
connect(); reconnectAttempts++;
}, reconnectInterval * Math.pow(2, reconnectAttempts)); connect();
},
reconnectInterval * Math.pow(2, reconnectAttempts),
);
} }
}; };
}; };
const send = (data) => { const send = (data) => {
if (ws?.readyState === WebSocket.OPEN) { if (ws?.readyState === WebSocket.OPEN) {
ws.send(typeof data === 'string' ? data : JSON.stringify(data)); ws.send(typeof data === "string" ? data : JSON.stringify(data));
} }
}; };
@@ -617,7 +616,7 @@ export const $ws = (url, options = {}) => {
connect(); connect();
if ($effect?.onCleanup) $e.onCleanup(close); if ($e?.onCleanup) $e.onCleanup(close);
return { status, messages, error, send, close }; return { status, messages, error, send, close };
}; };