Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: alpinejs/alpine
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v3.1.0
Choose a base ref
...
head repository: alpinejs/alpine
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v3.1.1
Choose a head ref
  • 9 commits
  • 6 files changed
  • 2 contributors

Commits on Jun 20, 2021

  1. Update installation.md

    Docs: Added hint for the correct order of custom code when using Alpine as a module
    webworkerJoshua authored Jun 20, 2021

    Verified

    This commit was created on GitHub.com and signed with GitHub’s verified signature.
    Copy the full SHA
    a4fd4f8 View commit details
  2. Bump to 3.1.0

    calebporzio committed Jun 20, 2021
    Copy the full SHA
    60885be View commit details
  3. wip

    calebporzio committed Jun 20, 2021
    Copy the full SHA
    f8c2b73 View commit details
  4. Copy the full SHA
    143f10d View commit details
  5. Merge pull request #1574 from alpinejs/fix-x-ref

    Initialize x-if AFTER being added to the DOM so x-ref works
    calebporzio authored Jun 20, 2021
    Copy the full SHA
    2737bca View commit details
  6. Merge pull request #1572 from webworkerJoshua/main

    Documentation: Added hint in installation.md
    calebporzio authored Jun 20, 2021
    Copy the full SHA
    389d9e0 View commit details

Commits on Jun 24, 2021

  1. Copy the full SHA
    a3ab9b0 View commit details
  2. Merge pull request #1620 from alpinejs/fix-alpine-for-safari-12

    Remove ?. syntax to support Safari 12
    calebporzio authored Jun 24, 2021
    Copy the full SHA
    e75587e View commit details
  3. wip

    calebporzio committed Jun 24, 2021
    Copy the full SHA
    fdae50a View commit details
2 changes: 1 addition & 1 deletion packages/alpinejs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "alpinejs",
"version": "3.0.9",
"version": "3.1.1",
"description": "The rugged, minimal JavaScript framework",
"author": "Caleb Porzio",
"license": "MIT",
4 changes: 2 additions & 2 deletions packages/alpinejs/src/directives/x-for.js
Original file line number Diff line number Diff line change
@@ -171,10 +171,10 @@ function loop(el, iteratorNames, evaluateItems, evaluateKey) {

addScopeToNode(clone, reactive(scope), templateEl)

initTree(clone)

mutateDom(() => {
lastEl.after(clone)

initTree(clone)
})

lookup[key] = clone
14 changes: 11 additions & 3 deletions packages/alpinejs/src/directives/x-if.js
Original file line number Diff line number Diff line change
@@ -14,9 +14,11 @@ directive('if', (el, { expression }, { effect, cleanup }) => {

addScopeToNode(clone, {}, el)

initTree(clone)
mutateDom(() => {
el.after(clone)

mutateDom(() => el.after(clone))
initTree(clone)
})

el._x_currentIfEl = clone

@@ -25,7 +27,13 @@ directive('if', (el, { expression }, { effect, cleanup }) => {
return clone
}

let hide = () => el._x_undoIf?.() || delete el._x_undoIf
let hide = () => {
if (! el._x_undoIf) return

el._x_undoIf()

delete el._x_undoIf
}

effect(() => evaluate(value => {
value ? show() : hide()
2 changes: 1 addition & 1 deletion packages/docs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@alpinejs/docs",
"version": "3.0.9-revision.1",
"version": "3.1.1-revision.1",
"description": "The documentation for Alpine",
"author": "Caleb Porzio",
"license": "MIT"
8 changes: 7 additions & 1 deletion packages/docs/src/en/essentials/installation.md
Original file line number Diff line number Diff line change
@@ -33,7 +33,7 @@ This is by far the simplest way to get started with Alpine. Include the followin
Notice the `@3.x.x` in the provided CDN link. This will pull the latest version of Alpine version 3. For stability in production, it's recommended that you hardcode the latest version in the CDN link.

```html
<script defer src="https://unpkg.com/alpinejs@3.0.9/dist/cdn.min.js"></script>
<script defer src="https://unpkg.com/alpinejs@3.1.1/dist/cdn.min.js"></script>
```

That's it! Alpine is now available for use inside your page.
@@ -60,3 +60,9 @@ Alpine.start()
```

> The `window.Alpine = Alpine` bit is optional, but is nice to have for freedom and flexibility. Like when tinkering with Alpine from the devtools for example.

> If you imported Alpine into a bundle, you have to make sure you are registering any extension code IN BETWEEN when you import the `Alpine` global object, and when you initialize Alpine by calling `Alpine.start()`.

[→ Read more about extending Alpine](/advanced/extending)
15 changes: 15 additions & 0 deletions tests/cypress/integration/directives/x-if.spec.js
Original file line number Diff line number Diff line change
@@ -36,3 +36,18 @@ test('x-if inside x-for allows nested directives',
get('span').should(haveText('1'))
}
)

test('x-if initializes after being added to the DOM to allow x-ref to work',
html`
<div x-data="{}">
<template x-if="true">
<ul x-ref="listbox" data-foo="bar">
<li x-text="$refs.listbox.dataset.foo"></li>
</ul>
</template>
</div>
`,
({ get }) => {
get('li').should(haveText('bar'))
}
)