public/lookbook-assets/app.js in lookbook-0.2.1 vs public/lookbook-assets/app.js in lookbook-0.2.2

- old
+ new

@@ -2292,16 +2292,21 @@ return directives2.map((directive2) => { return getDirectiveHandler(el, directive2); }); } var isDeferringHandlers = false; - var directiveHandlerStack = []; + var directiveHandlerStacks = new Map(); + var currentHandlerStackKey = Symbol(); function deferHandlingDirectives(callback) { isDeferringHandlers = true; + let key = Symbol(); + currentHandlerStackKey = key; + directiveHandlerStacks.set(key, []); let flushHandlers = () => { - while (directiveHandlerStack.length) - directiveHandlerStack.shift()(); + while (directiveHandlerStacks.get(key).length) + directiveHandlerStacks.get(key).shift()(); + directiveHandlerStacks.delete(key); }; let stopDeferring = () => { isDeferringHandlers = false; flushHandlers(); }; @@ -2328,11 +2333,11 @@ let fullHandler = () => { if (el._x_ignore || el._x_ignoreSelf) return; handler3.inline && handler3.inline(el, directive2, utilities); handler3 = handler3.bind(handler3, el, directive2, utilities); - isDeferringHandlers ? directiveHandlerStack.push(handler3) : handler3(); + isDeferringHandlers ? directiveHandlerStacks.get(currentHandlerStackKey).push(handler3) : handler3(); }; fullHandler.runCleanups = doCleanup; return fullHandler; } var startingWith = (subject, replacement) => ({ name, value }) => { @@ -2447,11 +2452,11 @@ onElAdded((el) => initTree(el, walk)); onElRemoved((el) => nextTick(() => destroyTree(el))); onAttributesAdded((el, attrs) => { directives(el, attrs).forEach((handle) => handle()); }); - let outNestedComponents = (el) => !closestRoot(el.parentNode || closestRoot(el)); + let outNestedComponents = (el) => !closestRoot(el.parentElement); Array.from(document.querySelectorAll(allSelectors())).filter(outNestedComponents).forEach((el) => { initTree(el); }); dispatch(document, "alpine:initialized"); } @@ -2468,10 +2473,12 @@ } function addInitSelector(selectorCallback) { initSelectorCallbacks.push(selectorCallback); } function closestRoot(el) { + if (!el) + return; if (rootSelectors().some((selector) => el.matches(selector))) return el; if (!el.parentElement) return; return closestRoot(el.parentElement); @@ -2574,11 +2581,11 @@ return effect; }, get raw() { return raw; }, - version: "3.2.2", + version: "3.2.4", disableEffectScheduling, setReactivityEngine, addRootSelector, mapAttributes, evaluateLater, @@ -2676,11 +2683,11 @@ } function setStylesFromObject(el, value) { let previousStyles = {}; Object.entries(value).forEach(([key, value2]) => { previousStyles[key] = el.style[key]; - el.style[key] = value2; + el.style.setProperty(kebabCase(key), value2); }); setTimeout(() => { if (el.style.length === 0) { el.removeAttribute("style"); } @@ -2694,10 +2701,13 @@ el.setAttribute("style", value); return () => { el.setAttribute("style", cache); }; } + function kebabCase(subject) { + return subject.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase(); + } function once(callback, fallback = () => { }) { let called = false; return function() { if (!called) { @@ -3111,10 +3121,12 @@ function on(el, event, modifiers, callback) { let listenerTarget = el; let handler3 = (e) => callback(e); let options = {}; let wrapHandler = (callback2, wrapper) => (e) => wrapper(callback2, e); + if (modifiers.includes("dot")) + event = dotSyntax(event); if (modifiers.includes("camel")) event = camelCase2(event); if (modifiers.includes("passive")) options.passive = true; if (modifiers.includes("window")) @@ -3172,10 +3184,13 @@ listenerTarget.addEventListener(event, handler3, options); return () => { listenerTarget.removeEventListener(event, handler3, options); }; } + function dotSyntax(subject) { + return subject.replace(/-/g, "."); + } function camelCase2(subject) { return subject.toLowerCase().replace(/-(\w)/g, (match, char) => char.toUpperCase()); } function debounce(func, wait) { var timeout; @@ -3201,11 +3216,11 @@ }; } function isNumeric(subject) { return !Array.isArray(subject) && !isNaN(subject); } - function kebabCase(subject) { + function kebabCase2(subject) { return subject.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[_\s]/, "-").toLowerCase(); } function isKeyEvent(event) { return ["keydown", "keyup"].includes(event); } @@ -3217,11 +3232,11 @@ let debounceIndex = keyModifiers.indexOf("debounce"); keyModifiers.splice(debounceIndex, isNumeric((keyModifiers[debounceIndex + 1] || "invalid-wait").split("ms")[0]) ? 2 : 1); } if (keyModifiers.length === 0) return false; - if (keyModifiers.length === 1 && keyModifiers[0] === keyToModifier(e.key)) + if (keyModifiers.length === 1 && keyToModifiers(e.key).includes(keyModifiers[0])) return false; const systemKeyModifiers = ["ctrl", "shift", "alt", "meta", "cmd", "super"]; const selectedSystemKeyModifiers = systemKeyModifiers.filter((modifier) => keyModifiers.includes(modifier)); keyModifiers = keyModifiers.filter((i) => !selectedSystemKeyModifiers.includes(i)); if (selectedSystemKeyModifiers.length > 0) { @@ -3229,26 +3244,37 @@ if (modifier === "cmd" || modifier === "super") modifier = "meta"; return e[`${modifier}Key`]; }); if (activelyPressedKeyModifiers.length === selectedSystemKeyModifiers.length) { - if (keyModifiers[0] === keyToModifier(e.key)) + if (keyToModifiers(e.key).includes(keyModifiers[0])) return false; } } return true; } - function keyToModifier(key) { - switch (key) { - case "/": - return "slash"; - case " ": - case "Spacebar": - return "space"; - default: - return key && kebabCase(key); - } + function keyToModifiers(key) { + if (!key) + return []; + key = kebabCase2(key); + let modifierToKeyMap = { + ctrl: "control", + slash: "/", + space: "-", + spacebar: "-", + cmd: "meta", + esc: "escape", + up: "arrow-up", + down: "arrow-down", + left: "arrow-left", + right: "arrow-right" + }; + modifierToKeyMap[key] = key; + return Object.keys(modifierToKeyMap).map((modifier) => { + if (modifierToKeyMap[modifier] === key) + return modifier; + }).filter((modifier) => modifier); } directive("model", (el, { modifiers, expression }, { effect: effect3, cleanup: cleanup2 }) => { let evaluate2 = evaluateLater(el, expression); let assignmentExpression = `${expression} = rightSideOfExpression($event, ${expression})`; let evaluateAssignment = evaluateLater(el, assignmentExpression); @@ -3285,11 +3311,11 @@ }); } return (event, currentValue) => { return mutateDom(() => { if (event instanceof CustomEvent && event.detail !== void 0) { - return event.detail; + return event.detail || event.target.value; } else if (el.type === "checkbox") { if (Array.isArray(currentValue)) { let newValue = modifiers.includes("number") ? safeParseNumber(event.target.value) : event.target.value; return event.target.checked ? currentValue.concat([newValue]) : currentValue.filter((el2) => !checkedAttrLooseCompare2(el2, newValue)); } else { @@ -3381,15 +3407,14 @@ let data2 = evaluate(el, expression, { scope: dataProviderContext }); injectMagics(data2, el); let reactiveData = reactive(data2); initInterceptors(reactiveData); let undo = addScopeToNode(el, reactiveData); - if (reactiveData["init"]) - reactiveData["init"](); + reactiveData["init"] && evaluate(el, reactiveData["init"]); cleanup2(() => { undo(); - reactiveData["destroy"] && reactiveData["destroy"](); + reactiveData["destroy"] && evaluate(el, reactiveData["destroy"]); }); })); directive("show", (el, { modifiers, expression }, { effect: effect3 }) => { let evaluate2 = evaluateLater(el, expression); let hide = () => mutateDom(() => { @@ -3442,10 +3467,12 @@ let templateEl = el; evaluateItems((items) => { if (isNumeric3(items) && items >= 0) { items = Array.from(Array(items).keys(), (i) => i + 1); } + if (items === void 0) + items = []; let lookup = el._x_lookup; let prevKeys = el._x_prevKeys; let scopes = []; let keys = []; if (isObject(items)) { @@ -7685,8 +7712,10 @@ module_default.persistedStore("inspector", { height: 200, active: "source" }); window.Alpine = module_default; - reloader_default(window.SOCKET_PATH).start(); + if (window.SOCKET_PATH) { + reloader_default(window.SOCKET_PATH).start(); + } module_default.start(); })();