From 18762bc856492ade7e3626a7fca2b214b547669d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B8rn=20Erik=20Pedersen?= Date: Mon, 15 Apr 2024 12:52:12 +0200 Subject: [PATCH] alpinejs: Update to v3.13.8 --- alpinejs/packages/alpinejs/builds/module.js | 2 + alpinejs/packages/alpinejs/dist/cdn.js | 211 +++-- alpinejs/packages/alpinejs/dist/cdn.min.js | 4 +- alpinejs/packages/alpinejs/dist/module.cjs.js | 220 ++++-- alpinejs/packages/alpinejs/dist/module.esm.js | 212 +++-- alpinejs/packages/alpinejs/package.json | 2 +- alpinejs/packages/alpinejs/src/alpine.js | 3 +- alpinejs/packages/alpinejs/src/directives.js | 5 +- .../alpinejs/src/directives/x-bind.js | 7 +- .../packages/alpinejs/src/directives/x-for.js | 19 +- .../packages/alpinejs/src/directives/x-id.js | 13 +- .../packages/alpinejs/src/directives/x-if.js | 6 +- .../alpinejs/src/directives/x-model.js | 29 +- .../alpinejs/src/directives/x-teleport.js | 4 +- alpinejs/packages/alpinejs/src/entangle.js | 21 +- alpinejs/packages/alpinejs/src/interceptor.js | 1 + alpinejs/packages/alpinejs/src/lifecycle.js | 5 +- alpinejs/packages/alpinejs/src/magics.js | 7 +- alpinejs/packages/alpinejs/src/magics/$id.js | 48 +- .../packages/alpinejs/src/magics/$refs.js | 12 +- .../packages/alpinejs/src/magics/$watch.js | 34 +- alpinejs/packages/alpinejs/src/mutation.js | 44 +- alpinejs/packages/alpinejs/src/reactivity.js | 29 + alpinejs/packages/alpinejs/src/scope.js | 8 +- alpinejs/packages/alpinejs/src/utils/bind.js | 2 +- alpinejs/packages/alpinejs/src/utils/error.js | 6 +- alpinejs/packages/anchor/builds/module.js | 2 + alpinejs/packages/anchor/dist/module.cjs.js | 5 +- alpinejs/packages/anchor/dist/module.esm.js | 1 + alpinejs/packages/anchor/package.json | 2 +- alpinejs/packages/collapse/builds/module.js | 2 + alpinejs/packages/collapse/dist/module.cjs.js | 5 +- alpinejs/packages/collapse/dist/module.esm.js | 1 + alpinejs/packages/collapse/package.json | 2 +- alpinejs/packages/csp/builds/module.js | 2 + alpinejs/packages/csp/dist/cdn.js | 266 ++++--- alpinejs/packages/csp/dist/cdn.min.js | 10 +- alpinejs/packages/csp/dist/module.cjs.js | 275 ++++--- alpinejs/packages/csp/dist/module.esm.js | 267 ++++--- alpinejs/packages/csp/package.json | 6 +- alpinejs/packages/csp/src/evaluator.js | 50 ++ alpinejs/packages/csp/src/index.js | 57 +- alpinejs/packages/docs/package.json | 2 +- alpinejs/packages/docs/src/en/advanced/csp.md | 85 +- .../docs/src/en/advanced/extending.md | 4 +- .../docs/src/en/advanced/reactivity.md | 2 +- .../packages/docs/src/en/directives/for.md | 24 + .../packages/docs/src/en/directives/model.md | 25 +- .../docs/src/en/directives/teleport.md | 6 +- .../docs/src/en/essentials/installation.md | 2 +- .../docs/src/en/globals/alpine-data.md | 2 +- alpinejs/packages/docs/src/en/magics/refs.md | 15 + .../packages/docs/src/en/plugins/anchor.md | 2 +- .../packages/docs/src/en/plugins/focus.md | 7 + .../packages/docs/src/en/plugins/intersect.md | 5 +- alpinejs/packages/focus/builds/module.js | 6 +- alpinejs/packages/focus/dist/cdn.js | 12 +- alpinejs/packages/focus/dist/cdn.min.js | 2 +- alpinejs/packages/focus/dist/module.cjs.js | 19 +- alpinejs/packages/focus/dist/module.esm.js | 15 +- alpinejs/packages/focus/package.json | 2 +- alpinejs/packages/focus/src/index.js | 10 +- alpinejs/packages/history/builds/module.js | 3 +- alpinejs/packages/intersect/builds/module.js | 2 + alpinejs/packages/intersect/dist/cdn.js | 4 +- alpinejs/packages/intersect/dist/cdn.min.js | 2 +- .../packages/intersect/dist/module.cjs.js | 11 +- .../packages/intersect/dist/module.esm.js | 7 +- alpinejs/packages/intersect/package.json | 2 +- alpinejs/packages/intersect/src/index.js | 4 +- alpinejs/packages/mask/builds/module.js | 6 +- alpinejs/packages/mask/dist/cdn.js | 15 +- alpinejs/packages/mask/dist/cdn.min.js | 2 +- alpinejs/packages/mask/dist/module.cjs.js | 17 +- alpinejs/packages/mask/dist/module.esm.js | 16 +- alpinejs/packages/mask/package.json | 2 +- alpinejs/packages/mask/src/index.js | 20 +- alpinejs/packages/morph/builds/module.js | 4 +- alpinejs/packages/morph/dist/module.cjs.js | 2 +- alpinejs/packages/morph/dist/module.esm.js | 2 +- alpinejs/packages/morph/package.json | 2 +- alpinejs/packages/navigate/builds/module.js | 2 + alpinejs/packages/persist/builds/module.js | 2 + alpinejs/packages/persist/dist/cdn.js | 5 +- alpinejs/packages/persist/dist/cdn.min.js | 2 +- alpinejs/packages/persist/dist/module.cjs.js | 12 +- alpinejs/packages/persist/dist/module.esm.js | 8 +- alpinejs/packages/persist/package.json | 2 +- alpinejs/packages/persist/src/index.js | 6 +- alpinejs/packages/ui/builds/module.js | 2 + alpinejs/packages/ui/dist/cdn.js | 723 +++++++++-------- alpinejs/packages/ui/dist/cdn.min.js | 2 +- alpinejs/packages/ui/dist/module.cjs.js | 730 ++++++++++-------- alpinejs/packages/ui/dist/module.esm.js | 726 +++++++++-------- alpinejs/packages/ui/package.json | 2 +- alpinejs/packages/ui/src/combobox.js | 24 +- alpinejs/packages/ui/src/disclosure.js | 14 +- alpinejs/packages/ui/src/list-context.js | 140 +++- alpinejs/packages/ui/src/listbox.js | 39 +- 99 files changed, 2900 insertions(+), 1818 deletions(-) create mode 100644 alpinejs/packages/csp/src/evaluator.js diff --git a/alpinejs/packages/alpinejs/builds/module.js b/alpinejs/packages/alpinejs/builds/module.js index 0382080..1d9d6a7 100644 --- a/alpinejs/packages/alpinejs/builds/module.js +++ b/alpinejs/packages/alpinejs/builds/module.js @@ -1,3 +1,5 @@ import Alpine from './../src/index' export default Alpine + +export { Alpine } diff --git a/alpinejs/packages/alpinejs/dist/cdn.js b/alpinejs/packages/alpinejs/dist/cdn.js index 999c101..05af4e9 100644 --- a/alpinejs/packages/alpinejs/dist/cdn.js +++ b/alpinejs/packages/alpinejs/dist/cdn.js @@ -85,6 +85,24 @@ cleanup2(); }]; } + function watch(getter, callback) { + let firstTime = true; + let oldValue; + let effectReference = effect(() => { + let value = getter(); + JSON.stringify(value); + if (!firstTime) { + queueMicrotask(() => { + callback(value, oldValue); + oldValue = value; + }); + } else { + oldValue = value; + } + firstTime = false; + }); + return () => release(effectReference); + } // packages/alpinejs/src/utils/dispatch.js function dispatch(el, name, detail = {}) { @@ -193,8 +211,8 @@ }); }); } - function destroyTree(root) { - walk(root, (el) => { + function destroyTree(root, walker = walk) { + walker(root, (el) => { cleanupAttributes(el); cleanupElement(el); }); @@ -254,21 +272,17 @@ observer.disconnect(); currentlyObserving = false; } - var recordQueue = []; - var willProcessRecordQueue = false; + var queuedMutations = []; function flushObserver() { - recordQueue = recordQueue.concat(observer.takeRecords()); - if (recordQueue.length && !willProcessRecordQueue) { - willProcessRecordQueue = true; - queueMicrotask(() => { - processRecordQueue(); - willProcessRecordQueue = false; - }); - } - } - function processRecordQueue() { - onMutate(recordQueue); - recordQueue.length = 0; + let records = observer.takeRecords(); + queuedMutations.push(() => records.length > 0 && onMutate(records)); + let queueLengthWhenTriggered = queuedMutations.length; + queueMicrotask(() => { + if (queuedMutations.length === queueLengthWhenTriggered) { + while (queuedMutations.length > 0) + queuedMutations.shift()(); + } + }); } function mutateDom(callback) { if (!currentlyObserving) @@ -293,16 +307,16 @@ deferredMutations = deferredMutations.concat(mutations); return; } - let addedNodes = []; - let removedNodes = []; + let addedNodes = /* @__PURE__ */ new Set(); + let removedNodes = /* @__PURE__ */ new Set(); let addedAttributes = /* @__PURE__ */ new Map(); let removedAttributes = /* @__PURE__ */ new Map(); for (let i = 0; i < mutations.length; i++) { if (mutations[i].target._x_ignoreMutationObserver) continue; if (mutations[i].type === "childList") { - mutations[i].addedNodes.forEach((node) => node.nodeType === 1 && addedNodes.push(node)); - mutations[i].removedNodes.forEach((node) => node.nodeType === 1 && removedNodes.push(node)); + mutations[i].addedNodes.forEach((node) => node.nodeType === 1 && addedNodes.add(node)); + mutations[i].removedNodes.forEach((node) => node.nodeType === 1 && removedNodes.add(node)); } if (mutations[i].type === "attributes") { let el = mutations[i].target; @@ -335,7 +349,7 @@ onAttributeAddeds.forEach((i) => i(el, attrs)); }); for (let node of removedNodes) { - if (addedNodes.includes(node)) + if (addedNodes.has(node)) continue; onElRemoveds.forEach((i) => i(node)); destroyTree(node); @@ -345,7 +359,7 @@ node._x_ignore = true; }); for (let node of addedNodes) { - if (removedNodes.includes(node)) + if (removedNodes.has(node)) continue; if (!node.isConnected) continue; @@ -399,7 +413,7 @@ if (name == Symbol.unscopables) return false; return objects.some( - (obj) => Object.prototype.hasOwnProperty.call(obj, name) + (obj) => Object.prototype.hasOwnProperty.call(obj, name) || Reflect.has(obj, name) ); }, get({ objects }, name, thisProxy) { @@ -407,7 +421,7 @@ return collapseProxies; return Reflect.get( objects.find( - (obj) => Object.prototype.hasOwnProperty.call(obj, name) + (obj) => Reflect.has(obj, name) ) || {}, name, thisProxy @@ -438,6 +452,8 @@ Object.entries(Object.getOwnPropertyDescriptors(obj)).forEach(([key, { value, enumerable }]) => { if (enumerable === false || value === void 0) return; + if (typeof value === "object" && value !== null && value.__v_skip) + return; let path = basePath === "" ? key : `${basePath}.${key}`; if (typeof value === "object" && value !== null && value._x_interceptor) { obj[key] = value.initialize(data2, path, key); @@ -536,7 +552,10 @@ } } function handleError(error2, el, expression = void 0) { - Object.assign(error2, { el, expression }); + error2 = Object.assign( + error2 ?? { message: "No error message given." }, + { el, expression } + ); console.warn(`Alpine Expression Error: ${error2.message} ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); @@ -657,9 +676,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); return { before(directive2) { if (!directiveHandlers[directive2]) { - console.warn( - "Cannot find directive `${directive}`. `${name}` will use the default order of execution" - ); + console.warn(String.raw`Cannot find directive \`${directive2}\`. \`${name}\` will use the default order of execution`); return; } const pos = directiveOrder.indexOf(directive2); @@ -1386,7 +1403,6 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); "checked", "required", "readonly", - "hidden", "open", "selected", "autofocus", @@ -1473,25 +1489,25 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); function entangle({ get: outerGet, set: outerSet }, { get: innerGet, set: innerSet }) { let firstRun = true; let outerHash; + let innerHash; let reference = effect(() => { - const outer = outerGet(); - const inner = innerGet(); + let outer = outerGet(); + let inner = innerGet(); if (firstRun) { innerSet(cloneIfObject(outer)); firstRun = false; - outerHash = JSON.stringify(outer); } else { - const outerHashLatest = JSON.stringify(outer); + let outerHashLatest = JSON.stringify(outer); + let innerHashLatest = JSON.stringify(inner); if (outerHashLatest !== outerHash) { innerSet(cloneIfObject(outer)); - outerHash = outerHashLatest; - } else { + } else if (outerHashLatest !== innerHashLatest) { outerSet(cloneIfObject(inner)); - outerHash = JSON.stringify(inner); + } else { } } - JSON.stringify(innerGet()); - JSON.stringify(outerGet()); + outerHash = JSON.stringify(outerGet()); + innerHash = JSON.stringify(innerGet()); }); return () => { release(reference); @@ -1610,7 +1626,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); get raw() { return raw; }, - version: "3.13.3", + version: "3.13.8", flushAndStopDeferringMutations, dontAutoEvaluateFunctions, disableEffectScheduling, @@ -1663,6 +1679,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); // INTERNAL bound: getBinding, $data: scope, + watch, walk, data, bind: bind2 @@ -2384,23 +2401,15 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); magic("dispatch", (el) => dispatch.bind(dispatch, el)); // packages/alpinejs/src/magics/$watch.js - magic("watch", (el, { evaluateLater: evaluateLater2, effect: effect3 }) => (key, callback) => { + magic("watch", (el, { evaluateLater: evaluateLater2, cleanup: cleanup2 }) => (key, callback) => { let evaluate2 = evaluateLater2(key); - let firstTime = true; - let oldValue; - let effectReference = effect3(() => evaluate2((value) => { - JSON.stringify(value); - if (!firstTime) { - queueMicrotask(() => { - callback(value, oldValue); - oldValue = value; - }); - } else { - oldValue = value; - } - firstTime = false; - })); - el._x_effects.delete(effectReference); + let getter = () => { + let value; + evaluate2((i) => value = i); + return value; + }; + let unwatch = watch(getter, callback); + cleanup2(unwatch); }); // packages/alpinejs/src/magics/$store.js @@ -2421,12 +2430,10 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); }); function getArrayOfRefObject(el) { let refObjects = []; - let currentEl = el; - while (currentEl) { - if (currentEl._x_refs) - refObjects.push(currentEl._x_refs); - currentEl = currentEl.parentNode; - } + findClosest(el, (i) => { + if (i._x_refs) + refObjects.push(i._x_refs); + }); return refObjects; } @@ -2451,11 +2458,31 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); } // packages/alpinejs/src/magics/$id.js - magic("id", (el) => (name, key = null) => { - let root = closestIdRoot(el, name); - let id = root ? root._x_ids[name] : findAndIncrementId(name); - return key ? `${name}-${id}-${key}` : `${name}-${id}`; + magic("id", (el, { cleanup: cleanup2 }) => (name, key = null) => { + let cacheKey = `${name}${key ? `-${key}` : ""}`; + return cacheIdByNameOnElement(el, cacheKey, cleanup2, () => { + let root = closestIdRoot(el, name); + let id = root ? root._x_ids[name] : findAndIncrementId(name); + return key ? `${name}-${id}-${key}` : `${name}-${id}`; + }); + }); + interceptClone((from, to) => { + if (from._x_id) { + to._x_id = from._x_id; + } }); + function cacheIdByNameOnElement(el, cacheKey, cleanup2, callback) { + if (!el._x_id) + el._x_id = {}; + if (el._x_id[cacheKey]) + return el._x_id[cacheKey]; + let output = callback(); + el._x_id[cacheKey] = output; + cleanup2(() => { + delete el._x_id[cacheKey]; + }); + return output; + } // packages/alpinejs/src/magics/$el.js magic("el", (el) => el); @@ -2775,8 +2802,10 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); setValue(getInputValue(el, modifiers, e, getValue())); }); if (modifiers.includes("fill")) { - if ([null, ""].includes(getValue()) || el.type === "checkbox" && Array.isArray(getValue())) { - el.dispatchEvent(new Event(event, {})); + if ([void 0, null, ""].includes(getValue()) || el.type === "checkbox" && Array.isArray(getValue())) { + setValue( + getInputValue(el, modifiers, { target: el }, getValue()) + ); } } if (!el._x_removeModelListeners) @@ -2845,12 +2874,25 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); return option.value || option.text; }); } else { + let newValue; + if (el.type === "radio") { + if (event.target.checked) { + newValue = event.target.value; + } else { + newValue = currentValue; + } + } else { + newValue = event.target.value; + } if (modifiers.includes("number")) { - return safeParseNumber(event.target.value); + return safeParseNumber(newValue); } else if (modifiers.includes("boolean")) { - return safeParseBoolean(event.target.value); + return safeParseBoolean(newValue); + } else if (modifiers.includes("trim")) { + return newValue.trim(); + } else { + return newValue; } - return modifiers.includes("trim") ? event.target.value.trim() : event.target.value; } }); } @@ -2909,7 +2951,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); // packages/alpinejs/src/directives/x-bind.js mapAttributes(startingWith(":", into(prefix("bind:")))); - var handler2 = (el, { value, modifiers, expression, original }, { effect: effect3 }) => { + var handler2 = (el, { value, modifiers, expression, original }, { effect: effect3, cleanup: cleanup2 }) => { if (!value) { let bindingProviders = {}; injectBindingProviders(bindingProviders); @@ -2931,6 +2973,10 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); } mutateDom(() => bind(el, value, result, modifiers)); })); + cleanup2(() => { + el._x_undoAddedClasses && el._x_undoAddedClasses(); + el._x_undoAddedStyles && el._x_undoAddedStyles(); + }); }; handler2.inline = (el, { value, modifiers, expression }) => { if (!value) @@ -3068,13 +3114,21 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); if (isObject2(items)) { items = Object.entries(items).map(([key, value]) => { let scope2 = getIterationScopeVariables(iteratorNames, value, key, items); - evaluateKey((value2) => keys.push(value2), { scope: { index: key, ...scope2 } }); + evaluateKey((value2) => { + if (keys.includes(value2)) + warn("Duplicate key on x-for", el); + keys.push(value2); + }, { scope: { index: key, ...scope2 } }); scopes.push(scope2); }); } else { for (let i = 0; i < items.length; i++) { let scope2 = getIterationScopeVariables(iteratorNames, items[i], i, items); - evaluateKey((value) => keys.push(value), { scope: { index: i, ...scope2 } }); + evaluateKey((value) => { + if (keys.includes(value)) + warn("Duplicate key on x-for", el); + keys.push(value); + }, { scope: { index: i, ...scope2 } }); scopes.push(scope2); } } @@ -3122,7 +3176,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); let marker = document.createElement("div"); mutateDom(() => { if (!elForSpot) - warn(`x-for ":key" is undefined or invalid`, templateEl); + warn(`x-for ":key" is undefined or invalid`, templateEl, keyForSpot, lookup); elForSpot.after(marker); elInSpot.after(elForSpot); elForSpot._x_currentIfEl && elForSpot.after(elForSpot._x_currentIfEl); @@ -3149,7 +3203,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); }; mutateDom(() => { lastEl.after(clone2); - initTree(clone2); + skipDuringClone(() => initTree(clone2))(); }); if (typeof key === "object") { warn("x-for key cannot be an object, it must be a string or an integer", templateEl); @@ -3233,7 +3287,7 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); addScopeToNode(clone2, {}, el); mutateDom(() => { el.after(clone2); - initTree(clone2); + skipDuringClone(() => initTree(clone2))(); }); el._x_currentIfEl = clone2; el._x_undoIf = () => { @@ -3264,6 +3318,11 @@ ${expression ? 'Expression: "' + expression + '"\n\n' : ""}`, el); let names = evaluate2(expression); names.forEach((name) => setIdRoot(el, name)); }); + interceptClone((from, to) => { + if (from._x_ids) { + to._x_ids = from._x_ids; + } + }); // packages/alpinejs/src/directives/x-on.js mapAttributes(startingWith("@", into(prefix("on:")))); diff --git a/alpinejs/packages/alpinejs/dist/cdn.min.js b/alpinejs/packages/alpinejs/dist/cdn.min.js index b04dc2f..8581e6e 100644 --- a/alpinejs/packages/alpinejs/dist/cdn.min.js +++ b/alpinejs/packages/alpinejs/dist/cdn.min.js @@ -1,5 +1,5 @@ -(()=>{var tt=!1,rt=!1,V=[],nt=-1;function Vt(e){Sn(e)}function Sn(e){V.includes(e)||V.push(e),An()}function ve(e){let t=V.indexOf(e);t!==-1&&t>nt&&V.splice(t,1)}function An(){!rt&&!tt&&(tt=!0,queueMicrotask(On))}function On(){tt=!1,rt=!0;for(let e=0;ee.effect(t,{scheduler:r=>{it?Vt(r):r()}}),ot=e.raw}function st(e){k=e}function Wt(e){let t=()=>{};return[n=>{let i=k(n);return e._x_effects||(e._x_effects=new Set,e._x_runEffects=()=>{e._x_effects.forEach(o=>o())}),e._x_effects.add(i),t=()=>{i!==void 0&&(e._x_effects.delete(i),$(i))},i},()=>{t()}]}function q(e,t,r={}){e.dispatchEvent(new CustomEvent(t,{detail:r,bubbles:!0,composed:!0,cancelable:!0}))}function O(e,t){if(typeof ShadowRoot=="function"&&e instanceof ShadowRoot){Array.from(e.children).forEach(i=>O(i,t));return}let r=!1;if(t(e,()=>r=!0),r)return;let n=e.firstElementChild;for(;n;)O(n,t,!1),n=n.nextElementSibling}function v(e,...t){console.warn(`Alpine Warning: ${e}`,...t)}var Gt=!1;function Jt(){Gt&&v("Alpine has already been initialized on this page. Calling Alpine.start() more than once can cause problems."),Gt=!0,document.body||v("Unable to initialize. Trying to load Alpine before `` is available. Did you forget to add `defer` in Alpine's ` ``` -This will generate a `/packages/csp/dist/` directory with the built files. After copying the appropriate file into your project, you can include it either via ` - +```shell +npm install @alpinejs/csp ``` - -### Module import +Then initialize it from your bundle: ```js -import Alpine from './path/to/module.esm.js' +import Alpine from '@alpinejs/csp' window.Alpine = Alpine -window.Alpine.start() + +Alpine.start() ``` - -## Restrictions + +## Basic Example + +To provide a glimpse of how using the CSP build might feel, here is a copy-pastable HTML file with a working counter component using a common CSP setup: + +```alpine + + + + + + + + +
+ + + +
+ + + + +``` + + +## API Restrictions Since Alpine can no longer interpret strings as plain JavaScript, it has to parse and construct JavaScript functions from them manually. @@ -70,10 +108,13 @@ However, breaking out the expressions into external APIs, the following is valid ``` + ```js Alpine.data('counter', () => ({ count: 1, - increment() { this.count++ } + increment() { + this.count++ + }, })) ``` diff --git a/alpinejs/packages/docs/src/en/advanced/extending.md b/alpinejs/packages/docs/src/en/advanced/extending.md index b356818..d908962 100644 --- a/alpinejs/packages/docs/src/en/advanced/extending.md +++ b/alpinejs/packages/docs/src/en/advanced/extending.md @@ -1,5 +1,5 @@ --- -order: 2 +order: 3 title: Extending --- @@ -229,7 +229,7 @@ Now if the directive is removed from this element or the element is removed itse By default, any new directive will run after the majority of the standard ones (with the exception of `x-teleport`). This is usually acceptable but some times you might need to run your custom directive before another specific one. This can be achieved by chaining the `.before() function to `Alpine.directive()` and specifying which directive needs to run after your custom one. - + ```js Alpine.directive('foo', (el, { value, modifiers, expression }) => { Alpine.addScopeToNode(el, {foo: 'bar'}) diff --git a/alpinejs/packages/docs/src/en/advanced/reactivity.md b/alpinejs/packages/docs/src/en/advanced/reactivity.md index ddbb601..1650953 100644 --- a/alpinejs/packages/docs/src/en/advanced/reactivity.md +++ b/alpinejs/packages/docs/src/en/advanced/reactivity.md @@ -1,5 +1,5 @@ --- -order: 1 +order: 2 title: Reactivity --- diff --git a/alpinejs/packages/docs/src/en/directives/for.md b/alpinejs/packages/docs/src/en/directives/for.md index 2b6665e..bead7d7 100644 --- a/alpinejs/packages/docs/src/en/directives/for.md +++ b/alpinejs/packages/docs/src/en/directives/for.md @@ -25,6 +25,30 @@ Alpine's `x-for` directive allows you to create DOM elements by iterating throug +You may also pass objects to `x-for`. + +```alpine + +``` + + +
+
    + +
+
+ + There are two rules worth noting about `x-for`: >`x-for` MUST be declared on a `