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
|
* @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 $e = (effectFn) => {
|
export const $effect = (effectFn) => {
|
||||||
const effect = {
|
const effect = {
|
||||||
dependencies: new Set(),
|
dependencies: new Set(),
|
||||||
cleanupHandlers: new Set(),
|
cleanupHandlers: new Set(),
|
||||||
@@ -142,13 +142,13 @@ export const $e = (effectFn) => {
|
|||||||
* @param {Storage} [storage=localStorage] - Storage type (localStorage/sessionStorage)
|
* @param {Storage} [storage=localStorage] - Storage type (localStorage/sessionStorage)
|
||||||
* @returns {Function} Signal that persists to storage
|
* @returns {Function} Signal that persists to storage
|
||||||
*/
|
*/
|
||||||
export const $$ = (key, initialValue, storage = localStorage) => {
|
export const $storage = (key, initialValue, storage = localStorage) => {
|
||||||
// Load saved value
|
// Load saved value
|
||||||
const saved = storage.getItem(key);
|
const saved = storage.getItem(key);
|
||||||
const signal = $(saved !== null ? JSON.parse(saved) : initialValue);
|
const signal = $(saved !== null ? JSON.parse(saved) : initialValue);
|
||||||
|
|
||||||
// Auto-save on changes
|
// Auto-save on changes
|
||||||
$e(() => {
|
$effect(() => {
|
||||||
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;
|
||||||
$e(() => {
|
$effect(() => {
|
||||||
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 ($e.onCleanup) {
|
if ($effect.onCleanup) {
|
||||||
$e.onCleanup(() => node.removeEventListener(eventName, handlerWrapper));
|
$effect.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";
|
||||||
|
|
||||||
$e(() => {
|
$effect(() => {
|
||||||
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);
|
||||||
$e(() => {
|
$effect(() => {
|
||||||
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);
|
||||||
$e(() => {
|
$effect(() => {
|
||||||
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") {
|
||||||
$e(() => node.setAttribute(attributeName, currentValue()));
|
$effect(() => 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 $c = (tagName, setupFunction, observedAttributes = []) => {
|
export const $component = (tagName, setupFunction, observedAttributes = []) => {
|
||||||
if (customElements.get(tagName)) return;
|
if (customElements.get(tagName)) return;
|
||||||
|
|
||||||
customElements.define(
|
customElements.define(
|
||||||
@@ -464,7 +464,7 @@ export const $c = (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 $f = async (url, data, loading) => {
|
export const $fetch = async (url, data, loading) => {
|
||||||
if (loading) loading(true);
|
if (loading) loading(true);
|
||||||
|
|
||||||
try {
|
try {
|
||||||
@@ -486,7 +486,7 @@ export const $f = 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 $r = (routes) => {
|
export const $router = (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 $r = (routes) => {
|
|||||||
if (currentPath() !== nextPath) currentPath(nextPath);
|
if (currentPath() !== nextPath) currentPath(nextPath);
|
||||||
});
|
});
|
||||||
|
|
||||||
$e(() => {
|
$effect(() => {
|
||||||
const path = currentPath();
|
const path = currentPath();
|
||||||
let matchedRoute = null;
|
let matchedRoute = null;
|
||||||
let routeParams = {};
|
let routeParams = {};
|
||||||
@@ -544,7 +544,7 @@ export const $r = (routes) => {
|
|||||||
* Navigates to a specific route
|
* Navigates to a specific route
|
||||||
* @param {string} path - Target path
|
* @param {string} path - Target path
|
||||||
*/
|
*/
|
||||||
$r.go = (path) => {
|
$router.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;
|
||||||
};
|
};
|
||||||
@@ -616,7 +616,14 @@ export const $ws = (url, options = {}) => {
|
|||||||
|
|
||||||
connect();
|
connect();
|
||||||
|
|
||||||
if ($e?.onCleanup) $e.onCleanup(close);
|
if ($effect?.onCleanup) $effect.onCleanup(close);
|
||||||
|
|
||||||
return { status, messages, error, send, 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