Rename $effect to $e and update references
This commit is contained in:
55
sigpro.js
55
sigpro.js
@@ -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++;
|
reconnectAttempts++;
|
||||||
connect();
|
connect();
|
||||||
}, reconnectInterval * Math.pow(2, reconnectAttempts));
|
},
|
||||||
|
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 };
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user