wickedstate
Version:
A plug-n-play reactive library for building web applications.
894 lines (806 loc) • 38.7 kB
JavaScript
function $546ebb2e2c60327a$export$3b322fec175388c4({ state: state, effect: effect, cleanup: cleanup }) {
return function watchMagicHandler(selector, fn) {
let currentValue = state.$get(selector);
let stopWatch = effect(()=>{
let newValue = state.$get(selector);
if (currentValue !== newValue) {
fn.call(state, newValue, currentValue);
currentValue = newValue;
}
});
cleanup(stopWatch);
};
}
function $f07516389d4964f1$export$a6cdc56e425d0d0a(value) {
return Object.prototype.toString.call(value) === '[object Object]';
}
function $f07516389d4964f1$export$f6e2535fb5126e54(value) {
return typeof value === 'function';
}
function $f07516389d4964f1$export$844ec244b1367d54(value) {
return typeof value === 'string';
}
function $f07516389d4964f1$export$7e4aa119212bc614(value) {
return typeof value === 'number' && !isNaN(value);
}
function $f07516389d4964f1$export$a244864fd9645c7f(value) {
return typeof value === 'symbol';
}
function $f07516389d4964f1$export$43bee75e5e14138e(value) {
if (typeof Array.isArray === 'function') return Array.isArray(value);
return Object.prototype.toString.call(value) === '[object Array]';
}
function $f07516389d4964f1$export$85b9a36db797e02b(value) {
if ($f07516389d4964f1$export$43bee75e5e14138e(value) || $f07516389d4964f1$export$844ec244b1367d54(value) || value instanceof HTMLCollection || value instanceof NodeList || value instanceof NamedNodeMap || value instanceof FileList) return value.length;
if ($f07516389d4964f1$export$a6cdc56e425d0d0a(value)) return Object.keys(value).length;
if (value instanceof Set || value instanceof Map) return value.size;
return 0;
}
function $4bb32b9ff9c1129f$export$8e78002e2948965c({ root: root }) {
return root;
}
function $cd5ac18230bc0604$export$c575453149668527({ root: root }) {
return root.__wickedStateObject ?? {};
}
function $fec279f90328ba1d$export$fd0cee5587ed87d9({ root: root }) {
let parent = root.parentElement;
while(parent){
if ('__wickedStateObject' in parent) return parent.__wickedStateObject;
parent = parent.parentElement;
}
return null;
}
function $b206d53110d20b4d$export$ce7f43b75b87816c({ state: state, effect: effect, cleanup: cleanup }) {
return function effectMagicHandler(fn) {
const effectFn = fn.bind(state);
const stopEffect = effect(effectFn);
cleanup(stopEffect);
};
}
function $caabd91a80a9b368$export$3c7a7e3b1576c97b({ root: root }) {
return root.__wickedStateRefs ?? {};
}
function $320e07d4255a73e5$export$403ccbc48c3ff6de({ state: state }) {
return function setMagicHandler(path, value) {
const paths = path.replace(/\[(\w+)]/g, '.$1').replace(/^\./, '').split('.');
const firstPath = paths.shift();
if (!firstPath) return null;
let target = state[firstPath];
if (!(0, $f07516389d4964f1$export$a6cdc56e425d0d0a)(target)) return state[firstPath] = value;
state[firstPath] = paths.reduce((acc, path, index)=>{
if (index === paths.length - 1) {
acc[path] = value;
return acc;
}
if (!acc[path]) acc[path] = {};
return acc[path];
}, target);
};
}
function $4dd725e74d70e33e$export$6472803473c1f8e1({ state: state }) {
return function getMagicHandler(path, defaultValue = null) {
return path.replace(/\[(\w+)]/g, '.$1').replace(/^\./, '').split('.').reduce((acc, currentKey)=>(acc && acc[currentKey]) ?? defaultValue, state);
};
}
function $7aedb4bd89901208$export$6e198ec1ba4ad2ea({ root: root }) {
return root.__wickedStateCurrentElement;
}
let $a28778f2705822f0$var$activeEffect = null;
let $a28778f2705822f0$var$disposables = new Set();
let $a28778f2705822f0$var$targetMap = new WeakMap();
function $a28778f2705822f0$var$track(target, key) {
if ($a28778f2705822f0$var$activeEffect) {
let depsMap = $a28778f2705822f0$var$targetMap.get(target);
if (!depsMap) $a28778f2705822f0$var$targetMap.set(target, depsMap = new Map());
let deps = depsMap.get(key);
if (!deps) depsMap.set(key, deps = new Set());
deps.add($a28778f2705822f0$var$activeEffect);
}
}
function $a28778f2705822f0$var$trigger(target, key) {
const depsMap = $a28778f2705822f0$var$targetMap.get(target);
if (!depsMap) return;
const deps = depsMap.get(key);
if (!deps) return;
$a28778f2705822f0$var$disposables.forEach(function(fx) {
if (deps.has(fx)) {
deps.delete(fx);
$a28778f2705822f0$var$disposables.delete(fx);
}
});
deps.forEach((fx)=>fx());
}
function $a28778f2705822f0$var$effect(fn) {
let previousEffect = $a28778f2705822f0$var$activeEffect;
$a28778f2705822f0$var$activeEffect = fn;
fn();
$a28778f2705822f0$var$activeEffect = previousEffect;
return ()=>$a28778f2705822f0$var$disposables.add(fn);
}
function $a28778f2705822f0$var$reactive(obj) {
const state = new Proxy(obj, {
get (target, key, receiver) {
const value = Reflect.get(target, key, receiver);
if (typeof value === 'function') return value.bind(state);
$a28778f2705822f0$var$track(target, key);
return value;
},
set (target, key, value, receiver) {
const returnValue = Reflect.set(target, key, value, receiver);
$a28778f2705822f0$var$trigger(target, key);
return returnValue;
}
});
return state;
}
const $a28778f2705822f0$export$aa88f37b1a14cc2c = {
effect: $a28778f2705822f0$var$effect,
reactive: $a28778f2705822f0$var$reactive
};
let $7840aca22a25b751$export$ed681408ec9d9148 = (0, $a28778f2705822f0$export$aa88f37b1a14cc2c);
function $7840aca22a25b751$export$225fc30ede027ded(newReactivity) {
const previousReactivity = $7840aca22a25b751$export$ed681408ec9d9148;
$7840aca22a25b751$export$ed681408ec9d9148 = newReactivity;
return previousReactivity;
}
const $345e325304eeef8e$export$29a76d0424d062c = {
watch: (0, $546ebb2e2c60327a$export$3b322fec175388c4),
root: (0, $4bb32b9ff9c1129f$export$8e78002e2948965c),
data: (0, $cd5ac18230bc0604$export$c575453149668527),
parent: (0, $fec279f90328ba1d$export$fd0cee5587ed87d9),
effect: (0, $b206d53110d20b4d$export$ce7f43b75b87816c),
refs: (0, $caabd91a80a9b368$export$3c7a7e3b1576c97b),
el: (0, $7aedb4bd89901208$export$6e198ec1ba4ad2ea),
set: (0, $320e07d4255a73e5$export$403ccbc48c3ff6de),
get: (0, $4dd725e74d70e33e$export$6472803473c1f8e1)
};
function $345e325304eeef8e$export$c77f809ba2bf306d(state, root) {
Object.keys($345e325304eeef8e$export$29a76d0424d062c).forEach((magicName)=>{
Object.defineProperty(state, `$${magicName}`, {
enumerable: false,
get: ()=>$345e325304eeef8e$export$29a76d0424d062c[magicName]({
state: state,
root: root,
effect: (0, $7840aca22a25b751$export$ed681408ec9d9148).effect,
cleanup (fn) {
if (!root.__wickedStateCleanups) root.__wickedStateCleanups = [];
root.__wickedStateCleanups.push(fn);
}
})
});
});
return state;
}
function $345e325304eeef8e$export$13db3bb8db75f394(name, fn) {
if ((0, $f07516389d4964f1$export$f6e2535fb5126e54)($345e325304eeef8e$export$29a76d0424d062c[name])) throw new Error(`[WickedState] Overriding magics is not allowed, this error occurred while trying to set an existing magic for ${name}.`);
$345e325304eeef8e$export$29a76d0424d062c[name] = fn;
}
/**
* Data providers.
*/ let $2b2581aeb0085b11$var$datas = {};
function $2b2581aeb0085b11$export$4051a07651545597(name, callback) {
$2b2581aeb0085b11$var$datas[name] = callback;
}
function $2b2581aeb0085b11$export$fcc5e19a704f867d(obj, context) {
Object.entries($2b2581aeb0085b11$var$datas).forEach(([name, callback])=>{
Object.defineProperty(obj, name, {
get: ()=>(...args)=>callback.bind(context)(...args),
enumerable: false
});
});
return obj;
}
const $bbade9eff3ebc441$export$e77854cf7e3bc41a = (expr, state, locals = {})=>{
const accessor = new Function('locals', `
return (function() {
with (this) {
with (locals) {
return ${expr};
}
}
}).call(this);
`);
return accessor.call(state, locals);
};
let $072a3abd9f7689d0$export$32ed8bd093d896ae = (0, $bbade9eff3ebc441$export$e77854cf7e3bc41a);
function $072a3abd9f7689d0$export$ed772cd96ac76723(newEvaluator) {
const previousEvaluator = $072a3abd9f7689d0$export$32ed8bd093d896ae;
$072a3abd9f7689d0$export$32ed8bd093d896ae = newEvaluator;
return previousEvaluator;
}
function $52e1234fed1bde15$var$wrap(callback, wrapper) {
return function(e) {
return wrapper(callback, e);
};
}
function $52e1234fed1bde15$var$parseDuration(duration) {
const units = {
ms: 1,
s: 1000,
m: 60000
};
const match = duration.match(/^(\d+)(ms|s|m)$/);
if (!match) throw new Error('[WickedState]: Invalid duration format. Use a number followed by a valid unit (ms, s, or m).');
const value = parseInt(match[1], 10);
const unit = match[2];
return value * units[unit];
}
function $52e1234fed1bde15$var$debounce(func, wait) {
let timeout;
return function(...args) {
const context = this;
const later = function() {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
};
}
function $52e1234fed1bde15$var$throttle(func, limit) {
let inThrottle = false;
return function(...args) {
if (!inThrottle) {
func.apply(this, args);
inThrottle = true;
setTimeout(()=>inThrottle = false, limit);
}
};
}
const $52e1234fed1bde15$export$22847faf1d65df28 = {
name: 'on',
priority: 2,
handler ({ root: root, node: node, value: value, state: state, modifiers: modifiers, type: type, cleanup: cleanup }) {
let target = node;
let options = {};
let eventHandler = function(e) {
const execute = ()=>{
const previousElement = root.__wickedStateCurrentElement;
root.__wickedStateCurrentElement = node;
try {
const evaluatedValue = (0, $072a3abd9f7689d0$export$32ed8bd093d896ae)(value, state, {
$event: e
});
return evaluatedValue instanceof Function ? evaluatedValue.call(state, e) : evaluatedValue;
} finally{
root.__wickedStateCurrentElement = previousElement;
}
};
if (node.__wickedStateConfirm) return node.__wickedStateConfirm(()=>execute(), ()=>e.stopImmediatePropagation());
else return execute();
};
if (modifiers.once) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
try {
return callback(e);
} finally{
target.removeEventListener(type, eventHandler, options);
}
});
if (modifiers.prevent) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
e.preventDefault();
return callback(e);
});
if (modifiers.stop) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
e.stopPropagation();
return callback(e);
});
if (modifiers.window) target = window;
if (modifiers.document) target = document;
if (modifiers.self) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e.target === node) return callback(e);
});
if (modifiers.debounce) eventHandler = $52e1234fed1bde15$var$debounce(eventHandler, $52e1234fed1bde15$var$parseDuration(modifiers.debounce));
if (modifiers.throttle) eventHandler = $52e1234fed1bde15$var$throttle(eventHandler, $52e1234fed1bde15$var$parseDuration(modifiers.throttle));
if (modifiers.passive) options.passive = true;
if (modifiers.capture) options.capture = true;
if (modifiers.away) {
target = document;
eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
const eventTarget = e.target;
if (node.contains(eventTarget)) return;
if (!eventTarget.isConnected) return;
if (node.style.display === 'none') return;
return callback(e);
});
}
if (modifiers.esc) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'Escape') return callback(e);
});
if (modifiers.enter) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'Enter') return callback(e);
});
if (modifiers.space) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === ' ') return callback(e);
});
if (modifiers.tab) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'Tab') return callback(e);
});
if (modifiers.meta || modifiers.cmd || modifiers.super) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.metaKey) return callback(e);
});
if (modifiers.ctrl) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.ctrlKey) return callback(e);
});
if (modifiers.alt) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.altKey) return callback(e);
});
if (modifiers.shift) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.shiftKey) return callback(e);
});
if (modifiers.backspace) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'Backspace') return callback(e);
});
if (modifiers.delete) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'Delete') return callback(e);
});
if (modifiers.caps) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'CapsLock') return callback(e);
});
if (modifiers.slash) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === '/') return callback(e);
});
if (modifiers.period) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === '.') return callback(e);
});
if (modifiers.equal) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === '=') return callback(e);
});
if (modifiers.comma) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === ',') return callback(e);
});
if (modifiers.up) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'ArrowUp') return callback(e);
});
if (modifiers.down) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'ArrowDown') return callback(e);
});
if (modifiers.left) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'ArrowLeft') return callback(e);
});
if (modifiers.right) eventHandler = $52e1234fed1bde15$var$wrap(eventHandler, (callback, e)=>{
if (e instanceof KeyboardEvent && e.key === 'ArrowRight') return callback(e);
});
target.addEventListener(type, eventHandler, options);
cleanup(()=>{
target.removeEventListener(type, eventHandler, options);
});
}
};
const $80e7a8bea19f0ad4$export$43ce500bf4a8d767 = {
name: 'if',
priority: 1,
handler ({ value: value, node: node, bindings: bindings, state: state, effect: effect, cleanup: cleanup }) {
if (!(node instanceof HTMLTemplateElement)) throw new Error('[WickedState] If directive can only be used on <template> elements.');
if ((0, $f07516389d4964f1$export$85b9a36db797e02b)(bindings) > 1) throw new Error('[WickedState] You cannot use other directives with the if directive.');
const template = node;
const stopEffect = effect(()=>{
const evaluatedValue = (0, $072a3abd9f7689d0$export$32ed8bd093d896ae)(value, state);
if (!evaluatedValue) {
const whenElement = template.__wickedStateWhenElement;
if (whenElement) {
whenElement.remove();
delete template.__wickedStateWhenElement;
}
return;
}
if (!template.__wickedStateWhenElement) {
const clone = template.content.cloneNode(true);
const firstElementChild = clone.firstElementChild;
if (!firstElementChild) throw new Error('[WickedState] When directive requires a child element.');
template.after(firstElementChild);
template.__wickedStateWhenElement = firstElementChild;
}
});
cleanup(()=>{
stopEffect();
if (template.__wickedStateWhenElement) template.__wickedStateWhenElement.remove();
delete template.__wickedStateWhenElement;
});
}
};
const $fd0ef0d1e78f780a$export$3c610999f89db804 = {
name: 'ref',
priority: 1,
handler ({ value: value, node: node, root: root, cleanup: cleanup }) {
if (!root.__wickedStateRefs) root.__wickedStateRefs = {};
root.__wickedStateRefs[value] = node;
cleanup(()=>{
delete root.__wickedStateRefs[value];
});
}
};
const $a080ae0302c18bcc$var$DIRECTIVE_VALUE_REGEX = /(?<expression>\([^)]+\)|\w+)\s+in\s+(?<iterableKey>\w+)(?:\s*:\s*(?<itemKey>[\w.]+))?/;
const $a080ae0302c18bcc$var$EXPRESSION_REGEX = /\((?<value>[^,]+),\s*(?<index>[^)]+)\)|(?<valueOnly>\w+)/;
const $a080ae0302c18bcc$export$d03945daad90acec = {
name: 'for',
priority: 1,
handler ({ node: node, state: state, value: value, bindings: bindings, effect: effect, cleanup: cleanup }) {
if (!(node instanceof HTMLTemplateElement)) throw new Error('[WickedState] For directive can only be used on <template> elements.');
if ((0, $f07516389d4964f1$export$85b9a36db797e02b)(bindings) > 1) throw new Error('[WickedState] You cannot use other directives with the for directive.');
const template = node;
const match = value.match($a080ae0302c18bcc$var$DIRECTIVE_VALUE_REGEX);
if (!match) throw new Error('[WickedState] Invalid `for` directive value.');
const { expression: expression, iterableKey: iterableKey, itemKey: itemKey } = match.groups;
const expressionMatch = expression.match($a080ae0302c18bcc$var$EXPRESSION_REGEX);
if (!expressionMatch) throw new Error('[WickedState] Invalid `for` directive expression.');
const valueKey = expressionMatch.groups.value || expressionMatch.groups.valueOnly;
const indexKey = expressionMatch.groups.index || null;
const stopEffect = effect(()=>{
const iterable = (0, $072a3abd9f7689d0$export$32ed8bd093d896ae)(iterableKey, state);
if (!(0, $f07516389d4964f1$export$43bee75e5e14138e)(iterable) && !(0, $f07516389d4964f1$export$a6cdc56e425d0d0a)(iterable)) throw new Error('[WickedState] `for` directive iterable must be an array or an object.');
if (!template.__wickedStateLoopItems) template.__wickedStateLoopItems = [];
const newLoopItems = [];
const existingLoopItems = template.__wickedStateLoopItems.reduce((acc, item)=>{
acc[item.key] = item;
return acc;
}, {});
template.__wickedStateLoopAnchor = template;
Object.keys(iterable).forEach((key)=>{
const value = iterable[key];
const itemState = {
[valueKey]: value
};
if (indexKey) itemState[indexKey] = key;
const uniqueKey = itemKey ? (0, $072a3abd9f7689d0$export$32ed8bd093d896ae)(itemKey, state, itemState) : key;
if (!(0, $f07516389d4964f1$export$844ec244b1367d54)(uniqueKey) && !(0, $f07516389d4964f1$export$7e4aa119212bc614)(uniqueKey) && !(0, $f07516389d4964f1$export$a244864fd9645c7f)(uniqueKey)) throw new Error('[WickedState] `for` directive item key must be a string or number or symbol.');
const existingItem = existingLoopItems[uniqueKey] ?? null;
if (existingItem) {
newLoopItems.push(existingItem);
delete existingLoopItems[uniqueKey];
// Reposition the element if it's not in the correct position.
if (existingItem.el.previousSibling !== template.__wickedStateLoopAnchor) template.__wickedStateLoopAnchor.after(existingItem.el);
template.__wickedStateLoopAnchor = existingItem.el;
return;
}
const clone = template.content.cloneNode(true);
const el = clone.firstElementChild;
if (!el) throw new Error('[WickedState] `for` directive template must have a single root element.');
el.__wickedStateObject = new Proxy({
...state,
...itemState
}, {
get (_, prop, receiver) {
if (prop === valueKey || prop === indexKey) return itemState[prop];
return Reflect.get(state, prop, receiver);
},
set (_, prop, value, receiver) {
if (prop === valueKey || prop === indexKey) return false;
return Reflect.set(state, prop, value, receiver);
}
});
newLoopItems.push({
el: el,
key: uniqueKey,
value: value
});
template.__wickedStateLoopAnchor.after(el);
template.__wickedStateLoopAnchor = el;
});
// Remove the elements that are no longer in the loop.
Object.values(existingLoopItems).forEach((item)=>{
item.el.remove();
});
template.__wickedStateLoopItems = newLoopItems;
template.__wickedStateLoopAnchor = null;
});
cleanup(()=>{
stopEffect();
if ((0, $f07516389d4964f1$export$43bee75e5e14138e)(template.__wickedStateLoopItems)) template.__wickedStateLoopItems.forEach((item)=>{
item.el.remove();
});
delete template.__wickedStateLoopItems;
delete template.__wickedStateLoopAnchor;
});
}
};
const $c61a97069827832e$export$9ec0abe690dab1c4 = {
name: 'html',
priority: 2,
handler ({ node: node, value: value, state: state, effect: effect, cleanup: cleanup }) {
const originalValue = node.innerHTML;
const stopEffect = effect(()=>{
node.innerHTML = (0, $072a3abd9f7689d0$export$32ed8bd093d896ae)(value, state);
});
cleanup(()=>{
stopEffect();
node.innerHTML = originalValue;
});
}
};
const $5f74496bf6598340$export$930d069ed4ef143b = {
name: 'show',
priority: 2,
handler ({ value: value, node: node, state: state, effect: effect, cleanup: cleanup }) {
const originalDisplay = node.style.display;
const stopEffect = effect(()=>{
const evaluatedValue = (0, $072a3abd9f7689d0$export$32ed8bd093d896ae)(value, state);
if (evaluatedValue) node.style.display = originalDisplay;
else node.style.display = 'none';
if (node.style.length === 0) node.removeAttribute('style');
});
cleanup(()=>{
stopEffect();
node.style.display = originalDisplay;
});
}
};
const $9754a8586dbe3d28$export$e6147e795ef92312 = {
name: 'text',
priority: 2,
handler ({ node: node, value: value, state: state, effect: effect, cleanup: cleanup }) {
const originalValue = node.textContent;
const stopEffect = effect(()=>{
node.textContent = (0, $072a3abd9f7689d0$export$32ed8bd093d896ae)(value, state);
});
cleanup(()=>{
stopEffect();
node.textContent = originalValue;
});
}
};
/**
* Get the nearest state root element.
*/ function $172664e3731b89fd$var$getStateRoot(element) {
if (element.__wickedStateObject) return element;
if (element.parentElement) return $172664e3731b89fd$var$getStateRoot(element.parentElement);
return null;
}
/**
* Check to should ignore the element.
*/ function $172664e3731b89fd$var$shouldIgnoreElement(element) {
if (element.__wickedStateIgnore || element.__wickedStateIgnoreSelf) return true;
let parent = element.parentElement;
while(parent){
if (parent.__wickedStateIgnore) return true;
parent = parent.parentElement;
}
return !!element.__wickedStateProcessed;
}
async function $172664e3731b89fd$export$6743d8801cad6964(root) {
const directivePrefix = (0, $63191ebc3ca43801$export$82e9f45cca5ba907)();
const directiveRegex = /(?<name>[\w-]+)(?:\[(?<type>[^\]]*)])?.?(?<modifiers>(?:[\w-]+(?:\[[^\]]*])?(?:\.[\w-]+(?:\[[^\]]*])?)*)?)?/;
const modifiersRegex = /(?<name>[\w-]+)(?:\[(?<args>[^\]]*)])?/;
const walkingNodes = [
root
];
while(walkingNodes.length){
const node = walkingNodes.shift();
if (node?.childNodes?.length > 0) walkingNodes.unshift.apply(walkingNodes, [].slice.call(node.childNodes));
if (!(node instanceof HTMLElement)) continue;
const castedNode = node;
if ($172664e3731b89fd$var$shouldIgnoreElement(castedNode)) continue;
const bindings = [];
const attributes = castedNode.attributes;
const attributesLength = attributes.length;
for(let i = 0; i < attributesLength; i++){
const attribute = attributes[i];
if (!attribute.name.startsWith(directivePrefix)) continue;
const attributeName = attribute.name.slice(directivePrefix.length);
const directive = directiveRegex.exec(attributeName);
if (!directive) continue;
const name = directive.groups.name ?? null;
if (!name) continue;
const registeredDirective = (0, $36e42b9e09ae49ee$export$90a684c00f3df6ed).find((directive)=>directive.name === name);
if (!registeredDirective) {
console.warn(`Directive "${name}" is not registered.`);
continue;
}
const type = directive.groups.type ?? name;
const modifiers = (directive.groups.modifiers ?? '').split('.').reduce((acc, modifier)=>{
const match = modifiersRegex.exec(modifier);
if (!match) return acc;
const name = match.groups.name ?? null;
if (!name) return acc;
acc[name] = match.groups.args ?? true;
return acc;
}, {});
bindings.push({
name: name,
type: type,
modifiers: modifiers,
value: attribute.value,
priority: registeredDirective.priority,
handler: registeredDirective.handler
});
}
bindings.sort((a, b)=>a.priority - b.priority);
const bindingsLength = bindings.length;
for(let i = 0; i < bindingsLength; i++){
const binding = bindings[i];
const stateRoot = $172664e3731b89fd$var$getStateRoot(castedNode);
const state = stateRoot?.__wickedStateObject;
if (stateRoot) stateRoot.__wickedStateCurrentElement = castedNode;
binding.handler({
bindings: bindings,
state: state,
node: castedNode,
root: stateRoot,
type: binding.type,
value: binding.value,
modifiers: binding.modifiers,
effect: (0, $7840aca22a25b751$export$ed681408ec9d9148).effect,
cleanup: (fn)=>{
if (!castedNode.__wickedStateCleanups) castedNode.__wickedStateCleanups = [];
castedNode.__wickedStateCleanups.push(fn);
}
});
}
castedNode.__wickedStateProcessed = true;
}
if (!root.__wickedObserved) {
const observer = new MutationObserver((mutations)=>{
const nodes = mutations.reduce((acc, mutation)=>{
acc.removed.push.apply(acc.removed, [].slice.call(mutation.removedNodes));
acc.added.push.apply(acc.added, [].slice.call(mutation.addedNodes));
return acc;
}, {
added: [],
removed: []
});
nodes.removed.forEach((node)=>{
const element = node;
const cleanups = element.__wickedStateCleanups ?? [];
while(cleanups.length)cleanups.shift()();
delete element.__wickedStateCleanups;
delete element.__wickedStateProcessed;
});
if (nodes.added.length) $172664e3731b89fd$export$6743d8801cad6964(root);
});
observer.observe(root, {
childList: true,
subtree: true
});
root.__wickedObserved = true;
}
}
/**
* The prefix used to identify the directives.
*/ let $63191ebc3ca43801$var$prefixAsString = '*';
let $63191ebc3ca43801$export$b3890eb0ae9dca99 = (0, $172664e3731b89fd$export$6743d8801cad6964);
function $63191ebc3ca43801$export$9ee9b73b7e17308b(renderer) {
const previousRenderer = $63191ebc3ca43801$export$b3890eb0ae9dca99;
$63191ebc3ca43801$export$b3890eb0ae9dca99 = renderer;
return previousRenderer;
}
function $63191ebc3ca43801$export$996f12a91725edd8(newPrefix) {
const previousPrefix = $63191ebc3ca43801$var$prefixAsString;
$63191ebc3ca43801$var$prefixAsString = newPrefix;
return previousPrefix;
}
function $63191ebc3ca43801$export$82e9f45cca5ba907(append = '') {
return $63191ebc3ca43801$var$prefixAsString + append;
}
const $bc03e0dcf06d7303$export$fcc0e524c4aadbc3 = {
name: 'cloak',
priority: -1,
handler ({ node: node }) {
node.removeAttribute((0, $63191ebc3ca43801$export$82e9f45cca5ba907)('cloak'));
}
};
const $6db6084ca7d8b287$export$1263dba676a8d779 = {
name: 'state',
priority: 0,
handler ({ node: node, value: value, cleanup: cleanup }) {
const expression = value === '' ? '{}' : value;
const magicContext = (0, $345e325304eeef8e$export$c77f809ba2bf306d)({}, node.__wickedStateCurrentElement = node);
const dataContext = (0, $2b2581aeb0085b11$export$fcc5e19a704f867d)({}, magicContext);
const state = (0, $072a3abd9f7689d0$export$32ed8bd093d896ae)(expression, magicContext, dataContext);
const reactiveState = (0, $7840aca22a25b751$export$ed681408ec9d9148).reactive({
...state,
...node.__wickedStateObject ?? {}
});
node.__wickedStateObject = (0, $345e325304eeef8e$export$c77f809ba2bf306d)(reactiveState, node);
const init = node.__wickedStateObject.init ?? null;
if ((0, $f07516389d4964f1$export$f6e2535fb5126e54)(init)) init.call(node.__wickedStateObject);
cleanup(()=>{
const destroy = node.__wickedStateObject.destroy ?? null;
if ((0, $f07516389d4964f1$export$f6e2535fb5126e54)(destroy)) destroy.call(node.__wickedStateObject);
delete node.__wickedStateObject;
delete node.__wickedStateCurrentElement;
});
}
};
const $4f90c7ced6f11b5a$export$4521b476f294278a = {
name: 'model',
priority: 2,
handler ({ node: node, value: value, state: state, effect: effect, cleanup: cleanup }) {
const target = node;
const isInput = target instanceof HTMLInputElement;
const isCheckbox = isInput && target.type === 'checkbox';
const isRadio = isInput && target.type === 'radio';
const isSelect = target instanceof HTMLSelectElement;
const eventName = isInput && !(isCheckbox || isRadio || isSelect) ? 'input' : 'change';
const unsubscribeFromState = effect(()=>{
const stateValue = state.$get(value);
if (isRadio) {
target.checked = stateValue === target.value;
return;
}
if (isCheckbox) {
target.checked = (0, $f07516389d4964f1$export$43bee75e5e14138e)(stateValue) ? stateValue.indexOf(target.value) > -1 : !!stateValue;
return;
}
if (isSelect && target.multiple && (0, $f07516389d4964f1$export$43bee75e5e14138e)(stateValue)) {
target.selectedIndex = 0;
[].slice.call(target.options).forEach((option)=>{
option.selected = stateValue.indexOf(option.value || option.text) > -1;
});
return;
}
target.value = stateValue;
});
const eventHandler = function(event) {
if (event instanceof CustomEvent && typeof event.detail !== 'undefined') {
state.$set(value, event.detail || event.target.value);
return;
}
state.$set(value, (()=>{
if (isRadio) return target.value;
if (isCheckbox) {
const stateValue = state.$get(value);
if ((0, $f07516389d4964f1$export$43bee75e5e14138e)(stateValue)) return target.checked ? stateValue.concat(target.value).filter((v, i, a)=>a.indexOf(v) === i) : stateValue.filter((v)=>v !== target.value);
return target.checked;
}
if (isSelect && target.multiple) return [].slice.call(target.selectedOptions).map((option)=>option.value || option.text);
return target.value;
})());
};
node.addEventListener(eventName, eventHandler);
cleanup(()=>{
unsubscribeFromState();
node.removeEventListener(eventName, eventHandler);
});
}
};
const $39a622489981183a$export$61c4243e2eba6587 = {
name: 'confirm',
priority: -1,
handler ({ node: node, value: value, modifiers: modifiers }) {
const message = value.replace('\\n', '\n');
const shouldPrompt = modifiers.prompt;
node.__wickedStateConfirm = (action, instead)=>{
if (shouldPrompt) {
let [question, expected] = message.split('|');
if (!expected) throw new Error('[WickedState]: Expected value is missing in the confirm directive.');
const input = prompt(question);
if (input === expected) return action();
return instead();
}
if (confirm(message)) return action();
return instead();
};
}
};
const $10c6000c3eb907f8$export$81cba120cc4563c8 = {
name: 'ignore',
priority: -2,
handler ({ node: node, modifiers: modifiers, cleanup: cleanup }) {
if (modifiers.self) node.__wickedStateIgnoreSelf = true;
else node.__wickedStateIgnore = true;
cleanup(()=>{
if (modifiers.self) delete node.__wickedStateIgnoreSelf;
else delete node.__wickedStateIgnore;
});
}
};
const $36e42b9e09ae49ee$export$90a684c00f3df6ed = [
(0, $10c6000c3eb907f8$export$81cba120cc4563c8),
(0, $bc03e0dcf06d7303$export$fcc0e524c4aadbc3),
(0, $39a622489981183a$export$61c4243e2eba6587),
(0, $6db6084ca7d8b287$export$1263dba676a8d779),
(0, $80e7a8bea19f0ad4$export$43ce500bf4a8d767),
(0, $a080ae0302c18bcc$export$d03945daad90acec),
(0, $fd0ef0d1e78f780a$export$3c610999f89db804),
(0, $52e1234fed1bde15$export$22847faf1d65df28),
(0, $9754a8586dbe3d28$export$e6147e795ef92312),
(0, $c61a97069827832e$export$9ec0abe690dab1c4),
(0, $5f74496bf6598340$export$930d069ed4ef143b),
(0, $4f90c7ced6f11b5a$export$4521b476f294278a)
];
function $36e42b9e09ae49ee$export$99b43ad1ed32e735(directive) {
if ($36e42b9e09ae49ee$export$90a684c00f3df6ed.some((d)=>d.name === directive.name)) throw new Error(`[WickedState] Directive ${directive.name} is already registered`);
$36e42b9e09ae49ee$export$90a684c00f3df6ed.push(directive);
return directive;
}
export {$345e325304eeef8e$export$13db3bb8db75f394 as magic, $2b2581aeb0085b11$export$4051a07651545597 as data, $36e42b9e09ae49ee$export$99b43ad1ed32e735 as directive, $63191ebc3ca43801$export$b3890eb0ae9dca99 as render, $63191ebc3ca43801$export$82e9f45cca5ba907 as prefix, $63191ebc3ca43801$export$996f12a91725edd8 as setPrefix, $63191ebc3ca43801$export$9ee9b73b7e17308b as setRenderer, $072a3abd9f7689d0$export$32ed8bd093d896ae as evaluator, $072a3abd9f7689d0$export$ed772cd96ac76723 as setEvaluator, $7840aca22a25b751$export$ed681408ec9d9148 as reactivity, $7840aca22a25b751$export$225fc30ede027ded as setReactivity, $172664e3731b89fd$export$6743d8801cad6964 as domRenderer, $bbade9eff3ebc441$export$e77854cf7e3bc41a as functionEvaluator, $a28778f2705822f0$export$aa88f37b1a14cc2c as defaultReactivity};
//# sourceMappingURL=index.js.map