Showing preview only (4,079K chars total). Download the full file or copy to clipboard to get everything.
Repository: alpinejs/alpine
Branch: main
Commit: 1735d0bf0c62
Files: 294
Total size: 3.8 MB
Directory structure:
gitextract_pwh8a3u7/
├── .claude/
│ └── skills/
│ ├── review-pr/
│ │ └── SKILL.md
│ └── summarize-activity/
│ └── SKILL.md
├── .editorconfig
├── .github/
│ ├── FUNDING.yml
│ ├── ISSUE_TEMPLATE/
│ │ └── config.yml
│ ├── SECURITY.md
│ └── workflows/
│ └── run-tests.yml
├── .gitignore
├── CLAUDE.md
├── LICENSE.md
├── README.md
├── benchmarks/
│ ├── giant.html
│ ├── init.html
│ ├── loop.html
│ ├── memory.html
│ └── mutation_observer.html
├── cypress.json
├── index.html
├── index2.html
├── jest.config.js
├── morph.html
├── package.json
├── packages/
│ ├── alpinejs/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── alpine.js
│ │ ├── binds.js
│ │ ├── clone.js
│ │ ├── datas.js
│ │ ├── directives/
│ │ │ ├── index.js
│ │ │ ├── x-bind.js
│ │ │ ├── x-cloak.js
│ │ │ ├── x-data.js
│ │ │ ├── x-effect.js
│ │ │ ├── x-for.js
│ │ │ ├── x-html.js
│ │ │ ├── x-id.js
│ │ │ ├── x-if.js
│ │ │ ├── x-ignore.js
│ │ │ ├── x-init.js
│ │ │ ├── x-model.js
│ │ │ ├── x-modelable.js
│ │ │ ├── x-on.js
│ │ │ ├── x-ref.js
│ │ │ ├── x-show.js
│ │ │ ├── x-teleport.js
│ │ │ ├── x-text.js
│ │ │ └── x-transition.js
│ │ ├── directives.js
│ │ ├── entangle.js
│ │ ├── evaluator.js
│ │ ├── ids.js
│ │ ├── index.js
│ │ ├── interceptor.js
│ │ ├── lifecycle.js
│ │ ├── magics/
│ │ │ ├── $data.js
│ │ │ ├── $dispatch.js
│ │ │ ├── $el.js
│ │ │ ├── $id.js
│ │ │ ├── $nextTick.js
│ │ │ ├── $refs.js
│ │ │ ├── $root.js
│ │ │ ├── $store.js
│ │ │ ├── $watch.js
│ │ │ └── index.js
│ │ ├── magics.js
│ │ ├── mutation.js
│ │ ├── nextTick.js
│ │ ├── plugin.js
│ │ ├── reactivity.js
│ │ ├── scheduler.js
│ │ ├── scope.js
│ │ ├── store.js
│ │ └── utils/
│ │ ├── bind.js
│ │ ├── classes.js
│ │ ├── debounce.js
│ │ ├── dispatch.js
│ │ ├── error.js
│ │ ├── on.js
│ │ ├── once.js
│ │ ├── styles.js
│ │ ├── throttle.js
│ │ ├── walk.js
│ │ └── warn.js
│ ├── anchor/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ ├── collapse/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ ├── csp/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── directives/
│ │ │ └── x-html.js
│ │ ├── evaluator.js
│ │ ├── index.js
│ │ └── parser.js
│ ├── docs/
│ │ ├── package.json
│ │ └── src/
│ │ └── en/
│ │ ├── advanced/
│ │ │ ├── async.md
│ │ │ ├── csp.md
│ │ │ ├── extending.md
│ │ │ └── reactivity.md
│ │ ├── advanced.md
│ │ ├── directives/
│ │ │ ├── bind.md
│ │ │ ├── cloak.md
│ │ │ ├── data.md
│ │ │ ├── effect.md
│ │ │ ├── for.md
│ │ │ ├── html.md
│ │ │ ├── id.md
│ │ │ ├── if.md
│ │ │ ├── ignore.md
│ │ │ ├── init.md
│ │ │ ├── model.md
│ │ │ ├── modelable.md
│ │ │ ├── on.md
│ │ │ ├── ref.md
│ │ │ ├── show.md
│ │ │ ├── teleport.md
│ │ │ ├── text.md
│ │ │ └── transition.md
│ │ ├── directives.md
│ │ ├── essentials/
│ │ │ ├── events.md
│ │ │ ├── installation.md
│ │ │ ├── lifecycle.md
│ │ │ ├── state.md
│ │ │ └── templating.md
│ │ ├── essentials.md
│ │ ├── globals/
│ │ │ ├── alpine-bind.md
│ │ │ ├── alpine-data.md
│ │ │ └── alpine-store.md
│ │ ├── globals.md
│ │ ├── magics/
│ │ │ ├── data.md
│ │ │ ├── dispatch.md
│ │ │ ├── el.md
│ │ │ ├── id.md
│ │ │ ├── nextTick.md
│ │ │ ├── refs.md
│ │ │ ├── root.md
│ │ │ ├── store.md
│ │ │ └── watch.md
│ │ ├── magics.md
│ │ ├── plugins/
│ │ │ ├── anchor.md
│ │ │ ├── collapse.md
│ │ │ ├── focus.md
│ │ │ ├── intersect.md
│ │ │ ├── mask.md
│ │ │ ├── morph.md
│ │ │ ├── persist.md
│ │ │ ├── resize.md
│ │ │ └── sort.md
│ │ ├── plugins.md
│ │ ├── start-here.md
│ │ └── upgrade-guide.md
│ ├── focus/
│ │ ├── .gitignore
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ ├── history/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ ├── intersect/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ ├── mask/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ ├── morph/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ ├── index.js
│ │ ├── morph.js
│ │ └── old_morph.js
│ ├── navigate/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ ├── persist/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ ├── resize/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ ├── sort/
│ │ ├── builds/
│ │ │ ├── cdn.js
│ │ │ └── module.js
│ │ ├── package.json
│ │ └── src/
│ │ └── index.js
│ └── ui/
│ ├── builds/
│ │ ├── cdn.js
│ │ └── module.js
│ ├── demo/
│ │ ├── index.html
│ │ └── listbox/
│ │ ├── data-driven.html
│ │ ├── index.html
│ │ └── multiple.html
│ ├── package.json
│ └── src/
│ ├── combobox.js
│ ├── dialog.js
│ ├── disclosure.js
│ ├── index.js
│ ├── list-context.js
│ ├── listbox.js
│ ├── menu.js
│ ├── popover.js
│ ├── radio.js
│ ├── switch.js
│ └── tabs.js
├── scripts/
│ ├── build.js
│ ├── cleanup-worktree.sh
│ ├── release.js
│ ├── setup.sh
│ ├── update-docs.js
│ ├── utils.js
│ └── worktree.sh
├── tests/
│ ├── cypress/
│ │ ├── .gitignore
│ │ ├── fixtures/
│ │ │ └── example.json
│ │ ├── integration/
│ │ │ ├── clone.spec.js
│ │ │ ├── custom-bind.spec.js
│ │ │ ├── custom-data.spec.js
│ │ │ ├── custom-directives.spec.js
│ │ │ ├── custom-interceptors.spec.js
│ │ │ ├── custom-magics.spec.js
│ │ │ ├── custom-prefix.spec.js
│ │ │ ├── directives/
│ │ │ │ ├── x-bind-class.spec.js
│ │ │ │ ├── x-bind-style.spec.js
│ │ │ │ ├── x-bind.spec.js
│ │ │ │ ├── x-cloak.spec.js
│ │ │ │ ├── x-data.spec.js
│ │ │ │ ├── x-for.spec.js
│ │ │ │ ├── x-html.spec.js
│ │ │ │ ├── x-if.spec.js
│ │ │ │ ├── x-ignore.spec.js
│ │ │ │ ├── x-init.spec.js
│ │ │ │ ├── x-model.spec.js
│ │ │ │ ├── x-modelable.spec.js
│ │ │ │ ├── x-on.spec.js
│ │ │ │ ├── x-show.spec.js
│ │ │ │ ├── x-teleport.spec.js
│ │ │ │ ├── x-text.spec.js
│ │ │ │ └── x-transition.spec.js
│ │ │ ├── entangle.spec.js
│ │ │ ├── error-handling.spec.js
│ │ │ ├── magics/
│ │ │ │ ├── $data.spec.js
│ │ │ │ ├── $dispatch.spec.js
│ │ │ │ ├── $el.spec.js
│ │ │ │ ├── $id.spec.js
│ │ │ │ ├── $nextTick.spec.js
│ │ │ │ ├── $refs.spec.js
│ │ │ │ ├── $root.spec.js
│ │ │ │ └── $watch.spec.js
│ │ │ ├── mutation.spec.js
│ │ │ ├── plugins/
│ │ │ │ ├── anchor.spec.js
│ │ │ │ ├── collapse.spec.js
│ │ │ │ ├── csp-compatibility.spec.js
│ │ │ │ ├── focus.spec.js
│ │ │ │ ├── history.spec.js
│ │ │ │ ├── intersect.spec.js
│ │ │ │ ├── mask.spec.js
│ │ │ │ ├── morph.spec.js
│ │ │ │ ├── navigate.spec.js
│ │ │ │ ├── persist.spec.js
│ │ │ │ ├── resize.spec.js
│ │ │ │ ├── sort.spec.js
│ │ │ │ └── ui/
│ │ │ │ ├── combobox.spec.js
│ │ │ │ ├── dialog.spec.js
│ │ │ │ ├── disclosure.spec.js
│ │ │ │ ├── listbox.spec.js
│ │ │ │ ├── menu.spec.js
│ │ │ │ ├── popover.spec.js
│ │ │ │ ├── radio.spec.js
│ │ │ │ ├── switch.spec.js
│ │ │ │ └── tabs.spec.js
│ │ │ ├── scope.spec.js
│ │ │ └── store.spec.js
│ │ ├── manual-memory.html
│ │ ├── manual-transition-test.html
│ │ ├── plugins/
│ │ │ └── index.js
│ │ ├── spec-csp.html
│ │ ├── spec.html
│ │ ├── support/
│ │ │ ├── commands.js
│ │ │ ├── drag.js
│ │ │ └── index.js
│ │ └── utils.js
│ └── vitest/
│ ├── csp-evaluator.spec.js
│ ├── csp-parser.spec.js
│ ├── evaluator.spec.js
│ └── mask.spec.js
└── vitest.config.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .claude/skills/review-pr/SKILL.md
================================================
---
name: review-pr
description: Review an open PR like a maintainer — checkout, fix issues, push changes, post a structured verdict comment. You just merge or close.
disable-model-invocation: true
allowed-tools: Bash, Read, Glob, Grep, Edit, Write, Task
argument-hint: "[PR number (optional - picks latest if omitted)]"
---
# /review-pr - Maintainer-style PR review bot
You are a strict, opinionated maintainer of the Alpine.js project. Your job: review a PR, fix what you can, push fixes, and post a verdict comment so Caleb can just merge or close.
**IMPORTANT: Every numbered step below is mandatory. Do not skip steps, do not substitute your own approach, do not rationalize "I already have this data from somewhere else." Run the exact commands listed. If a command fails, retry it — do not silently move on. Complete each step fully before starting the next.**
## Step 1: Pick a PR
If `$ARGUMENTS` is provided, use that as the PR number. Otherwise, pick the latest open PR:
```bash
gh pr list --state open --limit 1 --json number -q '.[0].number'
```
## Step 2: Check if already reviewed
Look for the `<!-- claude-review -->` marker in PR comments:
```bash
gh pr view {number} --json comments -q '.comments[].body' | grep -q '<!-- claude-review -->'
```
If found, tell the user this PR was already reviewed and stop. Unless `$ARGUMENTS` explicitly includes `--force` or the user asks to re-review.
## Step 3: Fetch PR data
Run ALL FOUR of these commands in parallel. If any fail, retry them. Do not proceed to Step 4 until you have output from all four:
```bash
gh pr view {number} --json title,body,author,state,labels,comments,reviews,files,additions,deletions,baseRefName,headRefName,createdAt,updatedAt,reviewDecision,statusCheckRollup,url
gh pr diff {number}
gh pr checks {number}
gh api repos/{owner}/{repo}/issues/{number}/reactions
```
## Step 4: Checkout locally and merge main
```bash
gh pr checkout {number}
git merge main
```
Always merge main into the PR branch before reviewing. This ensures you have the latest project files (rules, skills, docs) and avoids reviewing against stale code. If the merge has conflicts, resolve them or flag for the contributor.
## Step 5: Read and classify
Read through the diff and PR body. Classify the PR:
- **Bug fix** - Fixes broken behavior
- **Feature** - Adds new functionality
- **Refactor** - Restructures without changing behavior
- **Docs** - Documentation only
- **Mixed** - Multiple categories (flag this as a concern)
## Step 6: Challenge the contributor's framing
Don't accept the PR description's framing of the bug or problem at face value. Verify independently:
1. **Identify the root cause yourself.** Read the code the PR modifies. Understand *why* the bug exists before looking at how the PR fixes it.
2. **Does the test actually isolate that root cause?** Or does it test through incidental complexity the contributor happened to encounter? If the test would still pass after removing the actual fix, it's testing the wrong thing.
3. **If the test encodes a wrong mental model, rewrite it.** Strip it to the minimum reproduction that targets the real bug. Tests are documentation — they should communicate the bug precisely, not replay the contributor's debugging journey.
4. **Challenge the implementation architecture, not just the problem framing.** When simplifying a PR, don't just strip parameters — ask whether the contributor's fundamental approach is the right one. A simpler version of a bad approach is still a bad approach. Ask: "What's the laziest correct solution? Does the language/framework already handle this if I just let it?"
## Step 7: Evaluate
### For bug fixes
1. **Has a test?** If not, write one. The test should fail on `main` and pass on the PR branch.
2. **Test covers the actual fix?** Including edge cases?
3. **Actually verify regression.** Don't just reason about whether the test fails without the fix — prove it. Stash the fix (`git stash -- <fix files>`), rebuild (`npm run build`), run the test. If it passes without the fix, the test is not testing the fix. Unstash and rewrite the test. This is non-negotiable for bug fix PRs.
4. **Test isolates root cause?** Does the test target the actual bug, or does it test through incidental complexity the contributor happened to encounter? Strip tests to the minimum reproduction. Tests are documentation — they should communicate the bug precisely.
5. **Naming quality?** Review all test names, component names, variable names. Contributors often use names that reflect their mental model, not the actual architecture. Fix these before merging — they become permanent.
6. **Unnecessary fixtures/setup?** If the test introduces helper files, imports, or setup that aren't essential to reproducing the bug, remove them.
7. **For visual/browser bugs, test observable behavior, not DOM state.** Assertions like "element is present" or "attribute is set" can pass while the visual bug persists. For animation bugs: assert on `document.getAnimations()` state. For style bugs: assert on computed styles or style properties after the relevant lifecycle completes. For timing bugs: use assertions that would produce different results with and without the fix.
8. **Fix is surgical/minimal?** No unrelated changes?
9. **Regression risk?** Could this break something else?
### For features
Address EVERY item below. Do not skip any — even to say "N/A":
1. **Already possible without new API?** Default stance: reject new public API surface. Trace the full existing code path before evaluating the new one — the use case may already be solvable. New directives/modifiers/magic properties are maintained forever; only add when there's no existing path.
2. **Community demand?** Check reactions on the PR and linked issues. Low engagement = higher bar.
3. **Intuitive API?** Single-word modifiers preferred (`x-transition.opacity` not `x-transition.opacity-only`). Alpine favors short, expressive directive syntax.
4. **Precedent?** Does it build on existing patterns or introduce new ones? New patterns need strong justification.
5. **Scope?** Should this be a core Alpine feature or a separate plugin package? Alpine core should stay minimal.
6. **Docs included?** Features need documentation.
7. **Registration complete?** Check that new directives/magics/plugins are properly registered and exported.
### For all PRs
Address EVERY item below:
1. **Project style?**
- JS: no semicolons, `let` not `const`
- Follows Alpine's existing patterns and conventions
2. **Single responsibility?** Flag PRs doing too many things.
3. **Security?** Extra scrutiny for: `x-html`, expression evaluation, `Alpine.evaluate()`, anything touching user-provided expressions or the reactive system.
4. **Built JS assets in diff?** Check the file list from `gh pr diff --name-only` for `dist/` files. These should NOT be committed. Remove them.
5. **"No for now" bias.** When in doubt, lean toward not merging. It's easier to add later than remove.
6. **Async timing fixes are treacherous.** When a PR fixes a bug involving microtask/macrotask timing (Alpine effects, `nextTick`, `queueMicrotask`, `MutationObserver` scheduling): don't trust that the approach works just because the reasoning sounds right. Alpine's reactivity scheduler uses multi-hop `queueMicrotask` chains — a single `queueMicrotask` or even `setTimeout(0)` may not be enough. If you can't verify the timing empirically, flag it for discussion.
7. **"What's the laziest correct solution?"** Before evaluating the PR's implementation details, independently brainstorm the simplest possible fix. The contributor's approach is often shaped by their discovery path, not by what's optimal.
## Step 8: Run relevant tests only
**NEVER run the full test suite.** Only run tests the PR adds or touches:
```bash
# Find test files in the diff
gh pr diff {number} --name-only | grep -E '\.spec\.js$'
```
Run those specific tests:
```bash
# For Cypress browser tests
npx cypress run --spec ./tests/cypress/integration/{test-file}.spec.js
# For Vitest unit tests
npx vitest run tests/vitest/{test-file}.spec.js
```
If the PR doesn't touch test files but you wrote tests in step 6, run those.
Also check CI status:
```bash
gh pr checks {number}
```
## Step 8b: If the PR has no fix, write one
If the PR only adds a failing test (or describes a bug without a fix), don't just review the test and stop. **Explore solution paths and try to fix the bug yourself.** This is the most valuable thing you can do.
1. Identify 2-3 possible fix approaches
2. Evaluate trade-offs of each (surgical vs broad, risk of regressions, etc.)
3. Present the options to Caleb with a brief explanation of each
4. Once Caleb picks a direction, implement and test it
## Step 9: Make fixes directly
Fix issues you find. Common fixes:
- **Style violations**: Remove semicolons from JS, change `const` to `let`
- **Built assets in diff**: `git checkout main -- dist/` (or whatever the build output path is)
- **Missing tests**: Write them
- **Small refactors**: Simplify overly complex code
- **Missing registration**: Add to package index files, etc.
- **Before committing a simplified version of the contributor's code, do a smell test:** Could this be done in fewer lines with a completely different approach? The best code is the code you delete.
Stage and commit fixes:
```bash
git add -A
git commit -m "Review fixes: [brief description]
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>"
```
## Step 10: Push to PR branch
Try to push to the contributor's branch:
```bash
git push
```
### If push fails (fork doesn't allow maintainer edits)
1. Create a new branch from `main`
2. Cherry-pick the contributor's commits
3. Apply your fixes on top
4. Push the new branch
5. Create a new PR:
```bash
gh pr create --title "{original title}" --body "$(cat <<'EOF'
Closes #{original_number}
Cherry-picked from #{original_number} by @{author} with review fixes applied.
## Original description
{original_body}
## Review fixes applied
{list of fixes}
EOF
)"
```
6. Comment on the original PR explaining the new PR.
## Step 11: Post verdict comment
Post a structured comment on the PR:
```bash
gh pr comment {number} --body "$(cat <<'EOF'
<!-- claude-review -->
## PR Review: #{number} — {title}
**Type**: {Bug fix | Feature | Refactor | Docs | Mixed}
**Verdict**: {Merge | Request changes | Needs discussion | Close}
### What's happening (plain English)
{Explain the PR like Caleb is a 3-year-old who happens to be an expert in Alpine internals but has zero context on this specific PR. Use a numbered step-by-step walkthrough of the exact sequence that triggers the bug/feature. No jargon beyond what Alpine devs already know. Be crystal clear and concise — this is the most important section.}
### Other approaches considered
{Briefly list 2-3 alternative ways this could have been solved, with one sentence each on why the PR's approach is better (or worse). If there's only one reasonable approach, say so and explain why. This helps Caleb quickly evaluate whether the chosen path is the right one.}
### Changes Made
{List of fixups you pushed, or "No changes made" if none}
### Test Results
{Which tests ran, pass/fail status, CI status}
### Code Review
{Specific feedback with file:line references. What's good, what's concerning.}
### Security
{Any security considerations, or "No security concerns identified."}
### Verdict
{Your reasoning for the verdict. Be direct. If it should be merged, say why. If closed, say why kindly but clearly.}
---
*Reviewed by Claude*
EOF
)"
```
## Verdict guidelines
- **Merge**: Code is correct, tests pass, style is clean, feature is wanted. You've fixed any minor issues.
- **Request changes**: Significant issues you can't fix yourself (architectural problems, missing context, needs author input).
- **Needs discussion**: Feature scope questions, API design debates, core vs plugin questions. Tag these for Caleb.
- **Close**: PR is stale with no response, duplicates existing functionality, or solves a problem that shouldn't be solved. Be kind.
## Important rules
- NEVER run the full test suite. Only run tests the PR touches or that you wrote.
- Always use the `<!-- claude-review -->` marker so you can detect previous reviews.
- Be opinionated. This project has strong conventions — enforce them.
- Fix what you can. Don't just point out problems if you can solve them.
- Security is non-negotiable. If you see a security issue, verdict is always "Request changes" regardless of everything else.
- Match the project voice: practical, direct, minimal.
- Don't accept the contributor's framing of the problem at face value. Verify the root cause independently, then ensure the test targets that root cause — not the contributor's incidental path to discovering it.
- "Should this exist?" before "Is this correct?" — Don't get pulled into reviewing implementation details (code quality, edge cases, naming) until you've decided the feature itself is justified. Implementation nits imply acceptance.
- Tests are documentation. A sloppy test that passes is not good enough — it should precisely communicate what broke and why.
- Review contributor naming as critically as contributor code. Bad names get merged and become permanent.
================================================
FILE: .claude/skills/summarize-activity/SKILL.md
================================================
---
name: summarize-activity
description: Summarize recent GitHub activity — discussions, PRs, issues, events, traffic — into an actionable report so you can stay on top of the project without reading everything.
disable-model-invocation: true
allowed-tools: Bash, Read, Task
argument-hint: "[timeframe: 24h (default), 48h, 7d, 1w]"
---
# /summarize-activity - GitHub activity digest
You generate a concise, actionable summary of recent Alpine.js GitHub activity for Caleb.
**IMPORTANT: Every numbered step below is mandatory. Do not skip steps, do not substitute your own approach. Run the exact commands listed. If a command fails, retry it — do not silently move on. Complete each step fully before starting the next.**
## Step 1: Parse timeframe
Parse `$ARGUMENTS` into a cutoff timestamp. Supported formats:
- `24h`, `48h`, `72h` — hours (default: `24h` if no argument)
- `7d`, `14d`, `30d` — days
- `1w`, `2w` — weeks (1w = 7d)
Compute the ISO 8601 cutoff timestamp:
```bash
# Example for 24h:
date -u -v-24H '+%Y-%m-%dT%H:%M:%SZ'
# Example for 7d:
date -u -v-7d '+%Y-%m-%dT%H:%M:%SZ'
```
Store the cutoff timestamp and the human-readable timeframe label (e.g., "last 24 hours", "last 7 days") for use in later steps.
## Step 2: Fetch activity in parallel
Run ALL FIVE of these commands in parallel using the Bash tool. If any fail, retry them. Do not proceed to Step 3 until you have output from all five.
**Owner/repo:** `alpinejs/alpine`
### 2a. Discussions (GraphQL)
```bash
gh api graphql -f query='
{
repository(owner: "alpinejs", name: "alpine") {
discussions(first: 50, orderBy: {field: UPDATED_AT, direction: DESC}) {
nodes {
title
url
author { login }
category { name }
comments { totalCount }
body
answer { author { login } body createdAt }
createdAt
updatedAt
}
}
}
}'
```
### 2b. Pull Requests
```bash
gh pr list --repo alpinejs/alpine --state all --limit 50 --json number,title,url,author,state,labels,createdAt,updatedAt,additions,deletions,headRefName,baseRefName,reviewDecision,comments
```
### 2c. Issues
```bash
gh issue list --repo alpinejs/alpine --state all --limit 50 --json number,title,url,author,state,labels,createdAt,updatedAt,comments
```
### 2d. Events
```bash
gh api repos/alpinejs/alpine/events --paginate --jq '.[] | {type, actor: .actor.login, created_at: .created_at, payload_action: .payload.action, ref: .payload.ref, ref_type: .payload.ref_type}' | head -100
```
### 2e. Traffic & stars
```bash
gh api repos/alpinejs/alpine/traffic/views 2>/dev/null; echo "---SEPARATOR---"; gh api repos/alpinejs/alpine/traffic/clones 2>/dev/null; echo "---SEPARATOR---"; gh api repos/alpinejs/alpine --jq '{stargazers_count, forks_count, open_issues_count, watchers_count}'
```
Note: Traffic endpoints require push access. If they return 403, skip traffic data and note it in the report.
## Step 3: Fetch comment threads for active items
For discussions that have comments updated within the timeframe, fetch full comment bodies via GraphQL. Batch up to 10 discussions per query:
```bash
gh api graphql -f query='
{
repository(owner: "alpinejs", name: "alpine") {
discussion(number: {NUMBER}) {
comments(last: 10) {
nodes {
author { login }
body
createdAt
updatedAt
}
}
}
}
}'
```
For the most active PRs and issues (those with comments updated in timeframe), fetch recent comments:
```bash
gh api repos/alpinejs/alpine/issues/{number}/comments --jq '.[] | select(.updated_at > "{CUTOFF}") | {user: .user.login, body: .body, created_at: .created_at}'
```
Only fetch threads that are clearly within the timeframe. Don't fetch everything — be selective.
## Step 4: Filter by timeframe
Discard anything with `updatedAt` / `updated_at` before the cutoff timestamp. Keep items where:
- The item was created within the timeframe
- The item received new comments within the timeframe
- The item changed state (opened, closed, merged) within the timeframe
## Step 5: Analyze and write report
Output a markdown report with these sections. Be concise — this is a digest, not a novel.
---
### Report format:
```markdown
# Alpine.js Activity — {timeframe label}
_{start date} to {end date}_
## TL;DR
{2-3 sentences. What's the pulse? Any fires? Anything exciting? Give Caleb the vibe in 10 seconds.}
## Needs Your Attention
{Actionable items only. Each with a recommended next step: reply, merge, close, investigate, etc.}
- **[Title](url)** by @author — {why it needs attention}. **Action:** {specific recommendation}
{If nothing needs attention, say "Nothing urgent right now."}
## Hot Discussions
{Discussions with the most activity or notable sentiment. Include key quotes if illuminating.}
- **[Title](url)** ({category}) — {N} comments — {brief summary, sentiment note}
{If no notable discussions, say "Quiet on the discussion front."}
## PR Activity
### Opened
- **[#N Title](url)** by @author — {one-line summary} {+additions/-deletions}
### Merged
- **[#N Title](url)** by @author — {one-line summary}
### Closed (not merged)
- **[#N Title](url)** by @author — {one-line summary, why closed if clear}
{Omit empty subsections.}
## Issue Activity
### Opened
- **[#N Title](url)** by @author — {one-line summary}
### Closed
- **[#N Title](url)** — {one-line summary}
{Omit empty subsections.}
## Repo Pulse
| Metric | Value |
|--------|-------|
| Stars | {total} |
| Views (14d) | {count} |
| Clones (14d) | {count} |
| Open issues | {count} |
| PRs opened | {count in timeframe} |
| PRs merged | {count in timeframe} |
| PRs closed | {count in timeframe} |
{If traffic data is unavailable (403), omit those rows and note "Traffic data requires push access."}
```
---
## Important rules
- Every item must include a `[title](url)` link so Caleb can click through.
- Include @author for attribution.
- Keep summaries to ONE line per item. This is a digest.
- The "Needs Your Attention" section is the most important. Be opinionated about what deserves Caleb's time.
- If a discussion or issue has heated sentiment, note it (e.g., "heated", "confused users", "strong demand").
- Omit empty sections entirely — don't show "No activity" headers.
- For PRs, mention if CI is failing when relevant.
- Don't editorialize beyond what's helpful for triage. Be practical, not chatty.
================================================
FILE: .editorconfig
================================================
root = true
[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4
trim_trailing_whitespace = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .github/FUNDING.yml
================================================
# These are supported funding model platforms
github: [calebporzio]
================================================
FILE: .github/ISSUE_TEMPLATE/config.yml
================================================
blank_issues_enabled: false
contact_links:
- name: Get help or ask a Question
url: https://github.com/alpinejs/alpine/discussions/new?category=1-help
about: Ask questions or get help from other community members
- name: Feature Request
url: https://github.com/alpinejs/alpine/discussions/new?category=3-feature-ideas
about: For ideas or feature requests
- name: Bug Report
url: https://github.com/alpinejs/alpine/discussions/new?category=5-bugs
about: Submit a bug report
- name: Documentation issue
url: https://github.com/alpinejs/alpine/pulls
about: For documentation issues, please open a pull request
================================================
FILE: .github/SECURITY.md
================================================
# Security Policy
**PLEASE DON'T DISCLOSE SECURITY-RELATED ISSUES PUBLICLY.**
## Reporting a Vulnerability
If you discover a security vulnerability within Alpine.js, please send an email to Caleb Porzio at support@alpinejs.dev. All security vulnerabilities will be promptly addressed.
================================================
FILE: .github/workflows/run-tests.yml
================================================
name: Run Tests
on: [push, pull_request]
jobs:
build:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '18'
- run: npm install
- run: npm run build
- run: npm run test
- run: npm run vitest
================================================
FILE: .gitignore
================================================
node_modules
scratch.md
dist/
prompts/
.env.json
.idea
================================================
FILE: CLAUDE.md
================================================
# Alpine.js Development Guidelines
## Pull Request Evaluation Criteria
When evaluating pull requests for Alpine.js, assess the following:
### 1. Tests
- Are tests provided for the change?
- Do existing tests still pass?
- For configuration changes (package.json, build scripts), tests may not be required
### 2. Code Style
- Does the code match Alpine's existing patterns?
- Check indentation, naming conventions, and structure
- For package.json changes, ensure consistency with other packages in the monorepo
### 3. Code Quality
- Is the code clean and maintainable?
- Is the change focused and minimal?
- Are there any unnecessary changes or complexity?
- Does this PR contain changes that should apply elsewhere?
### 4. Simplicity
- Is this a simple, focused change?
- Does it follow Alpine's philosophy of simplicity?
- Could it be implemented more simply?
- Are the proposed additions intuitive for users? or do they require extra knowledge that they have to dig for.
### 5. Precedent
- Does this PR (both public facing additions and internal implementation) follow established precedents in the project
- Does it use terms that are unfamiliar to the project as of yet?
### 6. Description Quality
- Is there a clear explanation of what/why/how?
- Are breaking changes documented?
- Is backward compatibility addressed?
### 7. Community Engagement
- Are there comments, reviews, or discussions?
- Has it been approved by maintainers?
- Are there any conflicting opinions or unresolved concerns?
### Mergeability Rating
Based on the above, rate as:
- **HIGH**: Ready to merge (all criteria met, approved)
- **MEDIUM**: Needs attention (technically sound but missing reviews/tests)
- **LOW**: Requires work (has issues or conflicts to resolve)
## Project Structure
Alpine.js is a monorepo with packages in `/packages/`:
- Each package has its own package.json
- Build outputs go to `dist/` with `.cjs.js`, `.esm.js`, and `.min.js` versions
- Browser tests use Cypress, unit tests use Vitest
- CI runs on GitHub Actions
## Common Commands
```bash
# Build
npm run build # Build all packages
# Browser tests (Cypress)
npm test # Run all tests
npx cypress run --spec ./tests/cypress/integration/[filename].spec.js # Run single spec
# Unit tests (Vitest)
npx vitest run tests/vitest/[filename].spec.js # Run single spec
# Review PRs
gh pr list # List open PRs
gh pr view [number] # View PR details
gh pr diff [number] # View code changes
gh pr checks [number] # Check CI status
```
## Manual Testing
1. Edit `./index.html` at project root
2. Open in browser at `http://alpine.test/` (assumes local dev server mapped to directory name)
## Summary
After assessing the pull request on the above qualities, provide a summary explaining the problem this PR addresses and the fix, and why it's a good or bad fix. Do it in plain language as if you are personally advising me on what the PR is and weather or not I should merge it. And if not, what might need to be addressed first. If things need to be addressed, offer to address them yourself.
Please use code snippets to establish a starting point and and ending point if helpful. For example, when explaining the problem, it is often easier to provide a brief explanation alongside a code snippet of what is currently problematic, then when explaining the solution, showing what new code will allow a fix if applicable.
================================================
FILE: LICENSE.md
================================================
# MIT License
Copyright © 2019-2025 Caleb Porzio and contributors
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# Alpine.js
Go to the Alpine docs for most things: [Alpine Docs](https://alpinejs.dev)
You are welcome to submit updates to the docs by submitting a PR to this repo. Docs are located in the [`/packages/docs`](/packages/docs) directory.
Stay here for contribution-related information.
> Looking for V2 docs? [here they are](https://github.com/alpinejs/alpine/tree/v2.8.2)
<p align="center"><a href="https://alpinejs.dev/patterns"><img src="/hero.jpg" alt="Alpine Component Patterns"></a></p>
## Contribution Guide:
### Quickstart
* clone this repo locally
* run `npm install` & `npm run build`
* Include the `/packages/alpinejs/dist/cdn.js` file from a `<script>` tag on a webpage and you're good to go!
### Brief Tour
You can get everything installed with: `npm install` in the root directory of this repo after cloning it locally.
This repo is a "mono-repo" using npm workspaces for managing the packages. Each package has its own folder in the `/packages` directory.
Rather than having to run separate builds for each package, all package bundles are handled with the same command: `npm run build`
Here's a brief look at each package in this repo:
Package | Description
--- | ---
[alpinejs](packages/alpinejs) | The main Alpine repo with all of Alpine's core
[collapse](packages/collapse) | A plugin for expanding and collapsing elements using smooth animations
[csp](packages/csp) | A repo to provide a "CSP safe" build of Alpine
[docs](packages/docs) | The Alpine documentation
[focus](packages/focus) | A plugin that allows you to manage focus inside an element
[history](packages/history) | A plugin for binding data to query string parameters using the history API (name is likely to change)
[intersect](packages/intersect) | A plugin for triggering JS expressions based on elements intersecting with the viewport
[mask](packages/mask) | A plugin for automatically formatting a text input field as a user types
[morph](packages/morph) | A plugin for morphing HTML (like morphdom) inside the page intelligently
[persist](packages/persist) | A plugin for persisting Alpine state across page loads
The compiled JS files (as a result of running `npm run [build/watch]`) to be included as a `<script>` tag for example are stored in each package's `packages/[package]/dist` directory.
Each package should at least have: a "cdn" build that is self-initializing and can be included using the `src` attribute in a `<script defer>` tag, and a `module.[esm/cjs].js` file that is used for importing as a JS module (cjs for node, esm for everything else).
The bundling for Alpine V3 is handled exclusively by ESBuild. All of the configuration for these builds is stored in the `scripts/build.js` file.
### Testing
There are 2 different testing tools used in this repo: Cypress (for integration tests), and Vitest (for unit tests).
All tests are stored inside the `/tests` folder under `/tests/cypress` and `/tests/vitest`.
If you wish to only run Cypress and open it's user interface (recommended during development), you can run: `npm run cypress`
If you wish to only run Vitest tests, you can run `npm run vitest` like normal and target specific tests.
================================================
FILE: benchmarks/giant.html
================================================
<!--
This page is just the copied source of a random GitHub page.
The idea is to test mutation observer performance against
a giant, real-life HTML page.
I've annotated benchmarking additions to this page with "@goto"
for easy searching
-->
<!DOCTYPE html>
<html lang="en" data-color-mode="light" data-light-theme="light" data-dark-theme="dark">
<head>
<!-- @goto -->
<script>
function walk(el, callback) {
if (el instanceof ShadowRoot) {
Array.from(el.children).forEach(el => walk(el, callback))
return
}
let skip = false
callback(el, () => skip = true)
if (skip) return
let node = el.firstElementChild
while (node) {
walk(node, callback, false)
node = node.nextElementSibling
}
}
</script>
<script>
document.addEventListener('DOMContentLoaded', () => {
setTimeout(() => {
console.time();
let observer = new MutationObserver(mutations => {
console.log(mutations);
})
observer.observe(document.body, { characterData: true, childList: true, subtree: true, attributes: true })
// walk(document.body, el => {
// for (let index = 0; index < el.attributes; index++) {
// let attr = el.attributes[index]
// }
// })
console.timeEnd();
}, 1000)
})
</script>
<meta charset="utf-8">
<link rel="dns-prefetch" href="https://github.githubassets.com">
<link rel="dns-prefetch" href="https://avatars.githubusercontent.com">
<link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com">
<link rel="dns-prefetch" href="https://user-images.githubusercontent.com/">
<link crossorigin="anonymous" media="all"
integrity="sha512-7KjiGvJiLLy6LJPGf3m67ejAdgQsgDdnxZYoaI6+Agd0ZxHKTCjoKZgaf3PgUjURCcVceAwySJJJWgitRskDiA=="
rel="stylesheet"
href="https://github.githubassets.com/assets/frameworks-eca8e21af2622cbcba2c93c67f79baed.css" />
<link crossorigin="anonymous" media="all"
integrity="sha512-ZS0ILXChK0v6MFarr5VP2Qq916nqPSByfcud8IEvgXav8xbAAafFHX22IuZOi5/ZkKbLgOmqFkezGZVyANnFrQ=="
rel="stylesheet" href="https://github.githubassets.com/assets/behaviors-652d082d70a12b4bfa3056abaf954fd9.css" />
<link crossorigin="anonymous" media="all"
integrity="sha512-ec37dkdwRxMnZ+C8WVJL5fX0MDw39MbZDqmjBB3JFemYXHZrq3E3F25pcbYUEmuB29eH0L5f+KOgO+FQNEFTgw=="
rel="stylesheet" href="https://github.githubassets.com/assets/github-79cdfb76477047132767e0bc59524be5.css" />
<script crossorigin="anonymous" defer="defer"
integrity="sha512-CzeY4A6TiG4fGZSWZU8FxmzFFmcQFoPpArF0hkH0/J/S7UL4eed/LKEXMQXfTwiG5yEJBI+9BdKG8KQJNbhcIQ=="
type="application/javascript" src="https://github.githubassets.com/assets/environment-0b3798e0.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-ahOZvzpz/+SYFONmTAqBCwF04p4zvYweAHl7o69sVAwf0oxqMEyVZa//FnA859IbgU9lzj55LagjePKStkjwpw=="
type="application/javascript"
src="https://github.githubassets.com/assets/chunk-frameworks-6a1399bf.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-+1BN8W3XvQeL2HiktoDjb/NDm2W8tp9hDUb+NL4vabH/tvhdLZIdE9tYL3xRh6HDsc7JpvlTmu2m7CllRB+QYA=="
type="application/javascript" src="https://github.githubassets.com/assets/chunk-vendor-fb504df1.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-HdN9wL816nmT1eI4oHE0w/OlqibUShYhoSQOg7jXRAnvoTDhsaLyludbOMoRvKFzN1vkhe+TxQTEplKkZSlSiw=="
type="application/javascript" src="https://github.githubassets.com/assets/behaviors-1dd37dc0.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-tjuNQcwhEIXGvVIG4XM/Aj4z+Od+NBRkbgWNwEMjGL3nsnAmdoBdbzsn/WTvl3hk+TPt1D0BvBLHLBPgiwvT2w=="
type="application/javascript" data-module-id="./chunk-animate-on-scroll.js"
data-src="https://github.githubassets.com/assets/chunk-animate-on-scroll-b63b8d41.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-+BKEtK9JkmJ52jKSoX6+SBrGV6kJxB8J/iAPkFQ/oeq8YekNcz7IZlJgM5Tddyx1RrkL3+sdG0tAy3YuFbYqfA=="
type="application/javascript" data-module-id="./chunk-codemirror.js"
data-src="https://github.githubassets.com/assets/chunk-codemirror-f81284b4.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-EKOvqJ9uTatAt87WxU+OSS4mi7gMUszFbGo4aPErQkjpWLXnrPSeZvK5ngU8OYoIoiVOq+v8dA3C6MF/z2d/kA=="
type="application/javascript" data-module-id="./chunk-color-modes.js"
data-src="https://github.githubassets.com/assets/chunk-color-modes-10a3afa8.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-zkYZSjUFqSifB+Lt76jclFMrfqpcPqevT801RZcoBNCZHRTBKcFrW9OyJoPOzKFv+fZVDRnqdqGsuIv5KOIgZg=="
type="application/javascript" data-module-id="./chunk-contributions-spider-graph.js"
data-src="https://github.githubassets.com/assets/chunk-contributions-spider-graph-ce46194a.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-6j/oSF+kbW+yetNPvI684VzAu9pzug6Vj2h+3u1LdCuRhR4jnuiHZfeQKls3nxcT/S3H+oIt7FtigE/aeoj+gg=="
type="application/javascript" data-module-id="./chunk-drag-drop.js"
data-src="https://github.githubassets.com/assets/chunk-drag-drop-ea3fe848.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-N+ziqJjVMfWiqeVHdayDHpNRlG5HsF+cgV+pFnMDoTJuvBzgw+ndsepe4NcKAxIS3WMvzMaQcYmd2vrIaoAJVg=="
type="application/javascript" data-module-id="./chunk-edit.js"
data-src="https://github.githubassets.com/assets/chunk-edit-37ece2a8.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-aiqMIGGZGo8AQMjcoImKPMTsZVVRl6htCSY7BpRmpGPG/AF+Wq+P/Oj/dthWQOIk9cCNMPEas7O2zAR6oqn0tA=="
type="application/javascript" data-module-id="./chunk-emoji-picker-element.js"
data-src="https://github.githubassets.com/assets/chunk-emoji-picker-element-6a2a8c20.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-G3/1Wo8nza2llJz848q++KJXUpeUuHcSDvXLcJzqQZDBLXm/PaOchsesQlyxX/3bXdasUpOE217R8Ln6vTqMHA=="
type="application/javascript" data-module-id="./chunk-filter-input.js"
data-src="https://github.githubassets.com/assets/chunk-filter-input-1b7ff55a.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-XwuQdORq1W9Z+a/i72pH+NfR1rhwlGdxIlaIBbTciscGc/+McxMNLixGBp8e6Td4W1zzHvQ1Jyryl5gUfEr76g=="
type="application/javascript" data-module-id="./chunk-insights-graph.js"
data-src="https://github.githubassets.com/assets/chunk-insights-graph-5f0b9074.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-cdGVmQXhZYV6/Qj5QsArM/LjCG6qatgnsAE6W5y9UOHI+J2NdRU7l3IPlxh1zKNwgt5FWXnvrpyEIL7pc3aihg=="
type="application/javascript" data-module-id="./chunk-jump-to.js"
data-src="https://github.githubassets.com/assets/chunk-jump-to-71d19599.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-supZkxo+OPYLNtLXxI+e1dkCqVySu4FOWX1fiVVFs2ZggygppNsEz4F9wVp4YtH2TjFsZW8r/75uDUhPneO2sA=="
type="application/javascript" data-module-id="./chunk-notification-list-focus.js"
data-src="https://github.githubassets.com/assets/chunk-notification-list-focus-b2ea5993.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-ma0OOy3nj0c1cqBx0BkcmIFsLqcSZ+MIukQxyEFM/OWTzZpG+QMgOoWPAHZz43M6fyjAUG1jH6c/6LPiiKPCyw=="
type="application/javascript" data-module-id="./chunk-profile-pins-element.js"
data-src="https://github.githubassets.com/assets/chunk-profile-pins-element-99ad0e3b.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-zh+tYYvd4W00us1O4PkhmKsl/CzInIyrdoMqV2xqC7XPu06UEHfEMJfOiwidJ5f80SwrdGWogWFuJzLHwRbRgA=="
type="application/javascript" data-module-id="./chunk-ref-selector.js"
data-src="https://github.githubassets.com/assets/chunk-ref-selector-ce1fad61.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-Zii9oRdZ6q2QDNjL5A+me7jwJjMLvs1NiQNHmajUZnn4t9shcBDb4F8l/PQZW26eYfe5065oM7lIOSmbMinA7Q=="
type="application/javascript" data-module-id="./chunk-responsive-underlinenav.js"
data-src="https://github.githubassets.com/assets/chunk-responsive-underlinenav-6628bda1.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-9WNXtB07IyWypiPmkuucspwog4mme9q5GKGMSgd7FI0DPimmg/pEw+aaAofFV1vuWMt9I8H5QpsVtlbHGg1YBA=="
type="application/javascript" data-module-id="./chunk-runner-groups.js"
data-src="https://github.githubassets.com/assets/chunk-runner-groups-f56357b4.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-fIq9Mn7jY/bHQXnsmh+VejpDnaO+d/FDxsp+4CuZtdNLrLuO+dQCjh+m6Yd8GCYD2Cy6DWbCEyM+mH2dkB2H9A=="
type="application/javascript" data-module-id="./chunk-sortable-behavior.js"
data-src="https://github.githubassets.com/assets/chunk-sortable-behavior-7c8abd32.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-WK8VXw3lfUQ/VRW0zlgKPhcMUqH0uTnB/KzePUPdZhCm/HpxfXXHKTGvj5C0Oex7+zbIM2ECzULbtTCT4ug3yg=="
type="application/javascript" data-module-id="./chunk-toast.js"
data-src="https://github.githubassets.com/assets/chunk-toast-58af155f.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-vgHJEmEJxNmHucGbVY8bEUoOYo5/ZwpQ69rU8Dld89daWJ54uad9lNptxq32F8pnbHhdngw9lohNEbMbjmj5AQ=="
type="application/javascript" data-module-id="./chunk-tweetsodium.js"
data-src="https://github.githubassets.com/assets/chunk-tweetsodium-be01c912.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-aSxfTHAZj9wv7n08DxgAKkNg7jhiTo4yKKbDqLGxcDxUk/al571Y2ZSsOmLJ0Vh8cuAL8tW+JgX1t0JeKfyfaA=="
type="application/javascript" data-module-id="./chunk-user-status-submit.js"
data-src="https://github.githubassets.com/assets/chunk-user-status-submit-692c5f4c.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-7Ui55K2N4e8NB585f61+PoRWvxizndh3immaY43j3lT6Gx42PT0ux4+JQ0v9YOG8v+241ud6X8azfl04BX9pEA=="
type="application/javascript" src="https://github.githubassets.com/assets/diffs-ed48b9e4.js"></script>
<script crossorigin="anonymous" defer="defer"
integrity="sha512-Gk2IWkCrXWEuB+/njsWEN2NIj7LKHjhSSZaVGVTGxcc00MlHtZovfnGeKQBR+VrfduEl/nymFTaytnWHJk+I9w=="
type="application/javascript" src="https://github.githubassets.com/assets/repositories-1a4d885a.js"></script>
<meta name="viewport" content="width=device-width">
<title>Comparing v2.4.0...master · livewire/livewire</title>
<meta name="description"
content="A full-stack framework for Laravel that takes the pain out of building dynamic UIs. - livewire/livewire">
<link rel="search" type="application/opensearchdescription+xml" href="/opensearch.xml" title="GitHub">
<link rel="fluid-icon" href="https://github.com/fluidicon.png" title="GitHub">
<meta property="fb:app_id" content="1401488693436528">
<meta name="apple-itunes-app" content="app-id=1477376905" />
<meta name="twitter:image:src"
content="https://opengraph.githubassets.com/2c3bdb8f8e974e29270f0871c5109550250d88e6f15e78f9e76ee5c9402e7943/livewire/livewire" />
<meta name="twitter:site" content="@github" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="livewire/livewire" />
<meta name="twitter:description"
content="A full-stack framework for Laravel that takes the pain out of building dynamic UIs. - livewire/livewire" />
<meta property="og:image"
content="https://opengraph.githubassets.com/2c3bdb8f8e974e29270f0871c5109550250d88e6f15e78f9e76ee5c9402e7943/livewire/livewire" />
<meta property="og:image:alt"
content="A full-stack framework for Laravel that takes the pain out of building dynamic UIs. - livewire/livewire" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="og:site_name" content="GitHub" />
<meta property="og:type" content="object" />
<meta property="og:title" content="livewire/livewire" />
<meta property="og:url" content="https://github.com/livewire/livewire" />
<meta property="og:description"
content="A full-stack framework for Laravel that takes the pain out of building dynamic UIs. - livewire/livewire" />
<link rel="assets" href="https://github.githubassets.com/">
<link rel="shared-web-socket"
href="wss://alive.github.com/_sockets/u/3670578/ws?session=eyJ2IjoiVjMiLCJ1IjozNjcwNTc4LCJzIjo2NjQ5NDAwNjMsImMiOjMzOTEyNDU3NTUsInQiOjE2MTk2NTgwMDN9--04a68da7ebc819e2a2255059fd0688878878654c20ccd90a9f536be9143f9388"
data-refresh-url="/_alive" data-session-id="67bb550516ee9baa341519a263257364cc249c174d73cef440f2ebbd72e91158">
<link rel="shared-web-socket-src" href="/socket-worker-3f088aa2.js">
<link rel="sudo-modal" href="/sessions/sudo_modal">
<meta name="request-id" content="CCCD:3F5B:1974405:32E9AD9:608A0503" data-pjax-transient="true" />
<meta name="html-safe-nonce" content="557fb0696dac7fb80490fa7a4e91bc5ca235fad92960b2156d7d81429fe2867a"
data-pjax-transient="true" />
<meta name="visitor-payload"
content="eyJyZWZlcnJlciI6bnVsbCwicmVxdWVzdF9pZCI6IkNDQ0Q6M0Y1QjoxOTc0NDA1OjMyRTlBRDk6NjA4QTA1MDMiLCJ2aXNpdG9yX2lkIjoiNTIxMDgyOTQ0ODEwMzUwMTczMyIsInJlZ2lvbl9lZGdlIjoiaWFkIiwicmVnaW9uX3JlbmRlciI6ImlhZCJ9"
data-pjax-transient="true" />
<meta name="visitor-hmac" content="d6d0bcc2678a7e8512d44d5efa443be1244d5b543a89368a149406beb19b5a54"
data-pjax-transient="true" />
<meta name="hovercard-subject-tag" content="repository:170355508" data-pjax-transient>
<meta name="github-keyboard-shortcuts" content="repository,source-code" data-pjax-transient="true" />
<meta name="selected-link" value="repo_source" data-pjax-transient>
<meta name="google-site-verification" content="c1kuD-K2HIVF635lypcsWPoD4kilo5-jA_wBFyT4uMY">
<meta name="google-site-verification" content="KT5gs8h0wvaagLKAVWq8bbeNwnZZK1r1XQysX3xurLU">
<meta name="google-site-verification" content="ZzhVyEFwb7w3e0-uOTltm8Jsck2F5StVihD0exw2fsA">
<meta name="google-site-verification" content="GXs5KoUUkNCoaAZn7wPN-t01Pywp9M3sEjnt_3_ZWPc">
<meta name="octolytics-host" content="collector.githubapp.com" />
<meta name="octolytics-app-id" content="github" />
<meta name="octolytics-event-url" content="https://collector.githubapp.com/github-external/browser_event" />
<meta name="octolytics-actor-id" content="3670578" />
<meta name="octolytics-actor-login" content="calebporzio" />
<meta name="octolytics-actor-hash" content="ea5c7bc4a37b65d07c6b56074b63615f19314fbd4a42cc8a2f1a9d71e9fbe181" />
<meta name="analytics-location" content="/<user-name>/<repo-name>/compare/show"
data-pjax-transient="true" />
<meta name="hostname" content="github.com">
<meta name="user-login" content="calebporzio">
<meta name="expected-hostname" content="github.com">
<meta name="js-proxy-site-detection-payload"
content="NmZmYzAyZjZmMDAzMmFjMzhhNjA1ZmYwNDM3MTU5NmQ2ZDYzZWM2YjJkNmNkMzNhMmNkMzEwNzM2YWYxODlmYnx7InJlbW90ZV9hZGRyZXNzIjoiMTA4LjE3LjE1LjQ1IiwicmVxdWVzdF9pZCI6IkNDQ0Q6M0Y1QjoxOTc0NDA1OjMyRTlBRDk6NjA4QTA1MDMiLCJ0aW1lc3RhbXAiOjE2MTk2NTgwMDMsImhvc3QiOiJnaXRodWIuY29tIn0=">
<meta name="enabled-features"
content="MARKETPLACE_PENDING_INSTALLATIONS,AUTOCOMPLETE_EMOJIS_IN_MARKDOWN_EDITOR,GITHUB_TOKEN_PERMISSION,ACTIONS_CONCURRENCY_UI">
<meta http-equiv="x-pjax-version" content="a19e819ac3421c0b8ca026b3b670d302ebcd282e758523a8d1a60a3d92cdcb98">
<link data-pjax-transient rel='alternate' type='text/x-diff' href='/livewire/livewire/compare/v2.4.0...master.diff'>
<link data-pjax-transient rel='alternate' type='text/x-patch'
href='/livewire/livewire/compare/v2.4.0...master.patch'>
<meta name="session-resume-id" content="/livewire/livewire/compare" data-pjax-transient>
<meta name="go-import" content="github.com/livewire/livewire git https://github.com/livewire/livewire.git">
<meta name="octolytics-dimension-user_id" content="51960834" />
<meta name="octolytics-dimension-user_login" content="livewire" />
<meta name="octolytics-dimension-repository_id" content="170355508" />
<meta name="octolytics-dimension-repository_nwo" content="livewire/livewire" />
<meta name="octolytics-dimension-repository_public" content="true" />
<meta name="octolytics-dimension-repository_is_fork" content="false" />
<meta name="octolytics-dimension-repository_network_root_id" content="170355508" />
<meta name="octolytics-dimension-repository_network_root_nwo" content="livewire/livewire" />
<meta name="browser-stats-url" content="https://api.github.com/_private/browser/stats">
<meta name="browser-errors-url" content="https://api.github.com/_private/browser/errors">
<meta name="browser-optimizely-client-errors-url"
content="https://api.github.com/_private/browser/optimizely_client/errors">
<link rel="mask-icon" href="https://github.githubassets.com/pinned-octocat.svg" color="#000000">
<link rel="alternate icon" class="js-site-favicon" type="image/png"
href="https://github.githubassets.com/favicons/favicon.png">
<link rel="icon" class="js-site-favicon" type="image/svg+xml"
href="https://github.githubassets.com/favicons/favicon.svg">
<meta name="theme-color" content="#1e2327">
<meta name="color-scheme" content="light dark" />
<link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">
</head>
<body class="logged-in env-production page-responsive" style="word-wrap: break-word;">
<div class="position-relative js-header-wrapper ">
<a href="#start-of-content"
class="p-3 color-bg-info-inverse color-text-white show-on-focus js-skip-to-content">Skip to content</a>
<span class="progress-pjax-loader width-full js-pjax-loader-bar Progress position-fixed">
<span style="background-color: #79b8ff;width: 0%;" class="Progress-item progress-pjax-loader-bar "></span>
</span>
<header class="Header js-details-container Details px-3 px-md-4 px-lg-5 flex-wrap flex-md-nowrap" role="banner">
<div class="Header-item mt-n1 mb-n1 d-none d-md-flex">
<a class="Header-link " href="https://github.com/" data-hotkey="g d" aria-label="Homepage "
data-ga-click="Header, go to dashboard, icon:logo">
<svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16"
version="1.1" width="32" aria-hidden="true">
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
</a>
</div>
<div class="Header-item d-md-none">
<button class="Header-link btn-link js-details-target" type="button" aria-label="Toggle navigation"
aria-expanded="false">
<svg height="24" class="octicon octicon-three-bars" viewBox="0 0 16 16" version="1.1" width="24"
aria-hidden="true">
<path fill-rule="evenodd"
d="M1 2.75A.75.75 0 011.75 2h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 2.75zm0 5A.75.75 0 011.75 7h12.5a.75.75 0 110 1.5H1.75A.75.75 0 011 7.75zM1.75 12a.75.75 0 100 1.5h12.5a.75.75 0 100-1.5H1.75z">
</path>
</svg>
</button>
</div>
<div
class="Header-item Header-item--full flex-column flex-md-row width-full flex-order-2 flex-md-order-none mr-0 mr-md-3 mt-3 mt-md-0 Details-content--hidden-not-important d-md-flex">
<div class="header-search flex-auto js-site-search position-relative flex-self-stretch flex-md-self-auto mb-3 mb-md-0 mr-0 mr-md-3 scoped-search site-scoped-search js-jump-to"
role="combobox" aria-owns="jump-to-results" aria-label="Search or jump to" aria-haspopup="listbox"
aria-expanded="false">
<div class="position-relative">
<!-- '"` -->
<!-- </textarea></xmp> -->
</option>
</form>
<form class="js-site-search-form" role="search" aria-label="Site" data-scope-type="Repository"
data-scope-id="170355508" data-scoped-search-url="/livewire/livewire/search"
data-owner-scoped-search-url="/orgs/livewire/search" data-unscoped-search-url="/search"
action="/livewire/livewire/search" accept-charset="UTF-8" method="get">
<label
class="form-control input-sm header-search-wrapper p-0 js-chromeless-input-container header-search-wrapper-jump-to position-relative d-flex flex-justify-between flex-items-center">
<input type="text"
class="form-control input-sm header-search-input jump-to-field js-jump-to-field js-site-search-focus js-site-search-field is-clearable"
data-hotkey="s,/" name="q" value="" placeholder="Search or jump to…"
data-unscoped-placeholder="Search or jump to…"
data-scoped-placeholder="Search or jump to…" autocapitalize="off"
aria-autocomplete="list" aria-controls="jump-to-results"
aria-label="Search or jump to…"
data-jump-to-suggestions-path="/_graphql/GetSuggestedNavigationDestinations"
spellcheck="false" autocomplete="off">
<input type="hidden"
value="ShzwEg2Zqb6gnqBwUyXc21KpEEXoWPsZD/kjb44OhkNeZORhpdEipljIa/mNdXtfhlsSA444zNT0YImAnNCsZw=="
data-csrf="true" class="js-data-jump-to-suggestions-path-csrf" />
<input type="hidden" class="js-site-search-type-field" name="type">
<img src="https://github.githubassets.com/images/search-key-slash.svg" alt=""
class="mr-2 header-search-key-slash">
<div
class="Box position-absolute overflow-hidden d-none jump-to-suggestions js-jump-to-suggestions-container">
<ul class="d-none js-jump-to-suggestions-template-container">
<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-suggestion"
role="option">
<a tabindex="-1"
class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2"
href="" data-item-type="suggestion">
<div
class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
<svg height="16" width="16"
class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none"
title="Repository" aria-label="Repository" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z">
</path>
</svg>
<svg height="16" width="16"
class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none"
title="Project" aria-label="Project" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z">
</path>
</svg>
<svg height="16" width="16"
class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none"
title="Search" aria-label="Search" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z">
</path>
</svg>
</div>
<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none"
alt="" aria-label="Team" src="" width="28" height="28">
<div
class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>
<div
class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search">
<span class="js-jump-to-badge-search-text-default d-none"
aria-label="in this repository">
In this repository
</span>
<span class="js-jump-to-badge-search-text-global d-none"
aria-label="in all of GitHub">
All GitHub
</span>
<span aria-hidden="true"
class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
<div aria-hidden="true"
class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
Jump to
<span class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
</a>
</li>
</ul>
<ul class="d-none js-jump-to-no-results-template-container">
<li
class="d-flex flex-justify-center flex-items-center f5 d-none js-jump-to-suggestion p-2">
<span class="color-text-secondary">No suggested jump to results</span>
</li>
</ul>
<ul id="jump-to-results" role="listbox"
class="p-0 m-0 js-navigation-container jump-to-suggestions-results-container js-jump-to-suggestions-results-container">
<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-scoped-search d-none"
role="option">
<a tabindex="-1"
class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2"
href="" data-item-type="scoped_search">
<div
class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
<svg height="16" width="16"
class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none"
title="Repository" aria-label="Repository" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z">
</path>
</svg>
<svg height="16" width="16"
class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none"
title="Project" aria-label="Project" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z">
</path>
</svg>
<svg height="16" width="16"
class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none"
title="Search" aria-label="Search" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z">
</path>
</svg>
</div>
<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none"
alt="" aria-label="Team" src="" width="28" height="28">
<div
class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>
<div
class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search">
<span class="js-jump-to-badge-search-text-default d-none"
aria-label="in this repository">
In this repository
</span>
<span class="js-jump-to-badge-search-text-global d-none"
aria-label="in all of GitHub">
All GitHub
</span>
<span aria-hidden="true"
class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
<div aria-hidden="true"
class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
Jump to
<span class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
</a>
</li>
<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-owner-scoped-search d-none"
role="option">
<a tabindex="-1"
class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2"
href="" data-item-type="owner_scoped_search">
<div
class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
<svg height="16" width="16"
class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none"
title="Repository" aria-label="Repository" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z">
</path>
</svg>
<svg height="16" width="16"
class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none"
title="Project" aria-label="Project" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z">
</path>
</svg>
<svg height="16" width="16"
class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none"
title="Search" aria-label="Search" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z">
</path>
</svg>
</div>
<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none"
alt="" aria-label="Team" src="" width="28" height="28">
<div
class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>
<div
class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search">
<span class="js-jump-to-badge-search-text-default d-none"
aria-label="in this organization">
In this organization
</span>
<span class="js-jump-to-badge-search-text-global d-none"
aria-label="in all of GitHub">
All GitHub
</span>
<span aria-hidden="true"
class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
<div aria-hidden="true"
class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
Jump to
<span class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
</a>
</li>
<li class="d-flex flex-justify-start flex-items-center p-0 f5 navigation-item js-navigation-item js-jump-to-global-search d-none"
role="option">
<a tabindex="-1"
class="no-underline d-flex flex-auto flex-items-center jump-to-suggestions-path js-jump-to-suggestion-path js-navigation-open p-2"
href="" data-item-type="global_search">
<div
class="jump-to-octicon js-jump-to-octicon flex-shrink-0 mr-2 text-center d-none">
<svg height="16" width="16"
class="octicon octicon-repo flex-shrink-0 js-jump-to-octicon-repo d-none"
title="Repository" aria-label="Repository" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z">
</path>
</svg>
<svg height="16" width="16"
class="octicon octicon-project flex-shrink-0 js-jump-to-octicon-project d-none"
title="Project" aria-label="Project" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z">
</path>
</svg>
<svg height="16" width="16"
class="octicon octicon-search flex-shrink-0 js-jump-to-octicon-search d-none"
title="Search" aria-label="Search" viewBox="0 0 16 16"
version="1.1" role="img">
<path fill-rule="evenodd"
d="M11.5 7a4.499 4.499 0 11-8.998 0A4.499 4.499 0 0111.5 7zm-.82 4.74a6 6 0 111.06-1.06l3.04 3.04a.75.75 0 11-1.06 1.06l-3.04-3.04z">
</path>
</svg>
</div>
<img class="avatar mr-2 flex-shrink-0 js-jump-to-suggestion-avatar d-none"
alt="" aria-label="Team" src="" width="28" height="28">
<div
class="jump-to-suggestion-name js-jump-to-suggestion-name flex-auto overflow-hidden text-left no-wrap css-truncate css-truncate-target">
</div>
<div
class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none js-jump-to-badge-search">
<span class="js-jump-to-badge-search-text-default d-none"
aria-label="in this repository">
In this repository
</span>
<span class="js-jump-to-badge-search-text-global d-none"
aria-label="in all of GitHub">
All GitHub
</span>
<span aria-hidden="true"
class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
<div aria-hidden="true"
class="border rounded-1 flex-shrink-0 color-bg-tertiary px-1 color-text-tertiary ml-1 f6 d-none d-on-nav-focus js-jump-to-badge-jump">
Jump to
<span class="d-inline-block ml-1 v-align-middle">↵</span>
</div>
</a>
</li>
<li
class="d-flex flex-justify-center flex-items-center p-0 f5 js-jump-to-suggestion">
<svg style="box-sizing: content-box; color: var(--color-icon-primary);"
viewBox="0 0 16 16" fill="none" width="32" height="32"
class="m-3 anim-rotate">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25"
stroke-width="2" vector-effect="non-scaling-stroke" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
vector-effect="non-scaling-stroke" />
</svg>
</li>
</ul>
</div>
</label>
</form>
</div>
</div>
<nav class="d-flex flex-column flex-md-row flex-self-stretch flex-md-self-auto" aria-label="Global">
<a class="Header-link py-md-3 d-block d-md-none py-2 border-top border-md-top-0 border-white-fade-15"
data-ga-click="Header, click, Nav menu - item:dashboard:user" aria-label="Dashboard"
href="/dashboard">
Dashboard
</a>
<a class="js-selected-navigation-item Header-link mt-md-n3 mb-md-n3 py-2 py-md-3 mr-0 mr-md-3 border-top border-md-top-0 border-white-fade-15"
data-hotkey="g p" data-ga-click="Header, click, Nav menu - item:pulls context:user"
aria-label="Pull requests you created"
data-selected-links="/pulls /pulls/assigned /pulls/mentioned /pulls" href="/pulls">
Pull<span class="d-inline d-md-none d-lg-inline"> request</span>s
</a>
<a class="js-selected-navigation-item Header-link mt-md-n3 mb-md-n3 py-2 py-md-3 mr-0 mr-md-3 border-top border-md-top-0 border-white-fade-15"
data-hotkey="g i" data-ga-click="Header, click, Nav menu - item:issues context:user"
aria-label="Issues you created"
data-selected-links="/issues /issues/assigned /issues/mentioned /issues" href="/issues">
Issues
</a>
<div class="d-flex position-relative">
<a class="js-selected-navigation-item Header-link flex-auto mt-md-n3 mb-md-n3 py-2 py-md-3 mr-0 mr-md-3 border-top border-md-top-0 border-white-fade-15"
data-ga-click="Header, click, Nav menu - item:marketplace context:user"
data-octo-click="marketplace_click" data-octo-dimensions="location:nav_bar"
data-selected-links=" /marketplace" href="/marketplace">
Marketplace
</a>
</div>
<a class="js-selected-navigation-item Header-link mt-md-n3 mb-md-n3 py-2 py-md-3 mr-0 mr-md-3 border-top border-md-top-0 border-white-fade-15"
data-ga-click="Header, click, Nav menu - item:explore"
data-selected-links="/explore /trending /trending/developers /integrations /integrations/feature/code /integrations/feature/collaborate /integrations/feature/ship showcases showcases_search showcases_landing /explore"
href="/explore">
Explore
</a>
<a class="js-selected-navigation-item Header-link d-block d-md-none py-2 py-md-3 border-top border-md-top-0 border-white-fade-15"
data-ga-click="Header, click, Nav menu - item:workspaces context:user"
data-selected-links="/codespaces /codespaces" href="/codespaces">
Codespaces
</a>
<a class="js-selected-navigation-item Header-link d-block d-md-none py-2 py-md-3 border-top border-md-top-0 border-white-fade-15"
data-ga-click="Header, click, Nav menu - item:Sponsors"
data-hydro-click="{"event_type":"sponsors.button_click","payload":{"button":"HEADER_SPONSORS_DASHBOARD","sponsorable_login":"calebporzio","originating_url":"https://github.com/livewire/livewire/compare/v2.4.0...master","user_id":3670578}}"
data-hydro-click-hmac="22cb5ddd16c713f6bd489b6a5834b103bf046730721949a0d1d536e17bfc9fb9"
data-selected-links=" /sponsors/accounts" href="/sponsors/accounts">Sponsors</a>
<a class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-top border-md-top-0 border-white-fade-15"
href="/settings/profile">
Settings
</a>
<a class="Header-link d-block d-md-none mr-0 mr-md-3 py-2 py-md-3 border-top border-md-top-0 border-white-fade-15"
href="/calebporzio">
<img class="avatar avatar-user"
src="https://avatars.githubusercontent.com/u/3670578?s=40&v=4" width="20" height="20"
alt="@calebporzio" />
calebporzio
</a>
<!-- '"` -->
<!-- </textarea></xmp> -->
</option>
</form>
<form action="/logout" accept-charset="UTF-8" method="post"><input type="hidden"
name="authenticity_token"
value="9+7FhAatzPGw3hT7+wVwNXk/SAoiTm4cZwa9dSePNBjYklZ4vj/svoqfMJvl/Rw7cAkzfSNSukn77o081tow5w==" />
<button type="submit"
class="Header-link mr-0 mr-md-3 py-2 py-md-3 border-top border-md-top-0 border-white-fade-15 d-md-none btn-link d-block width-full text-left"
data-ga-click="Header, sign out, icon:logout" style="padding-left: 2px;">
<svg class="octicon octicon-sign-out v-align-middle" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 010 1.5h-2.5a.25.25 0 00-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 010 1.5h-2.5A1.75 1.75 0 012 13.25V2.75zm10.44 4.5H6.75a.75.75 0 000 1.5h5.69l-1.97 1.97a.75.75 0 101.06 1.06l3.25-3.25a.75.75 0 000-1.06l-3.25-3.25a.75.75 0 10-1.06 1.06l1.97 1.97z">
</path>
</svg>
Sign out
</button>
</form>
</nav>
</div>
<div class="Header-item Header-item--full flex-justify-center d-md-none position-relative">
<a class="Header-link " href="https://github.com/" data-hotkey="g d" aria-label="Homepage "
data-ga-click="Header, go to dashboard, icon:logo">
<svg class="octicon octicon-mark-github v-align-middle" height="32" viewBox="0 0 16 16"
version="1.1" width="32" aria-hidden="true">
<path fill-rule="evenodd"
d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z">
</path>
</svg>
</a>
</div>
<div class="Header-item mr-0 mr-md-3 flex-order-1 flex-md-order-none">
<notification-indicator class="js-socket-channel" data-test-selector="notifications-indicator"
data-channel="eyJjIjoibm90aWZpY2F0aW9uLWNoYW5nZWQ6MzY3MDU3OCIsInQiOjE2MTk2NTgwMDN9--0068489773fd235881c029716c4da100c479652edd0aa143c5d9c9cadb5bcf52">
<a href="/notifications"
class="Header-link notification-indicator position-relative tooltipped tooltipped-sw"
aria-label="You have unread notifications" data-hotkey="g n"
data-ga-click="Header, go to notifications, icon:unread"
data-target="notification-indicator.link">
<span class="mail-status unread " data-target="notification-indicator.modifier"></span>
<svg class="octicon octicon-bell" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path
d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z">
</path>
<path fill-rule="evenodd"
d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z">
</path>
</svg>
</a>
</notification-indicator>
</div>
<div class="Header-item position-relative d-none d-md-flex">
<details class="details-overlay details-reset js-header-promo-toggle">
<summary class="Header-link" aria-label="Create new…" data-ga-click="Header, create new, icon:add">
<svg class="octicon octicon-plus" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path fill-rule="evenodd"
d="M7.75 2a.75.75 0 01.75.75V7h4.25a.75.75 0 110 1.5H8.5v4.25a.75.75 0 11-1.5 0V8.5H2.75a.75.75 0 010-1.5H7V2.75A.75.75 0 017.75 2z">
</path>
</svg> <span class="dropdown-caret"></span>
</summary>
<details-menu class="dropdown-menu dropdown-menu-sw">
<a role="menuitem" class="dropdown-item" href="/new"
data-ga-click="Header, create new repository">
New repository
</a>
<a role="menuitem" class="dropdown-item" href="/new/import"
data-ga-click="Header, import a repository">
Import repository
</a>
<a role="menuitem" class="dropdown-item" href="https://gist.github.com/"
data-ga-click="Header, create new gist">
New gist
</a>
<a role="menuitem" class="dropdown-item" href="/organizations/new"
data-ga-click="Header, create new organization">
New organization
</a>
<div role="none" class="dropdown-divider"></div>
<div class="dropdown-header">
<span title="livewire/livewire">This repository</span>
</div>
<a role="menuitem" class="dropdown-item" href="/livewire/livewire/issues/new/choose"
data-ga-click="Header, create new issue" data-skip-pjax>
New issue
</a>
</details-menu>
</details>
</div>
<div class="Header-item position-relative mr-0 d-none d-md-flex">
<details
class="details-overlay details-reset js-header-promo-toggle js-feature-preview-indicator-container"
data-feature-preview-indicator-src="/users/calebporzio/feature_preview/indicator_check">
<summary class="Header-link" aria-label="View profile and more"
data-ga-click="Header, show menu, icon:avatar">
<img src="https://avatars.githubusercontent.com/u/3670578?s=60&v=4" alt="@calebporzio"
size="20" height="20" width="20" class="avatar-user avatar avatar-small "></img>
<span class="feature-preview-indicator js-feature-preview-indicator" style="top: 1px;"
hidden></span>
<span class="dropdown-caret"></span>
</summary>
<details-menu class="dropdown-menu dropdown-menu-sw" style="width: 180px" src="/users/3670578/menu"
preload>
<include-fragment>
<p class="text-center mt-3" data-hide-on-error>
<svg style="box-sizing: content-box; color: var(--color-icon-primary);"
viewBox="0 0 16 16" fill="none" width="32" height="32" class="anim-rotate">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25"
stroke-width="2" vector-effect="non-scaling-stroke" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2"
stroke-linecap="round" vector-effect="non-scaling-stroke" />
</svg>
</p>
<p class="ml-1 mb-2 mt-2 color-text-primary" data-show-on-error>
<svg class="octicon octicon-alert" viewBox="0 0 16 16" version="1.1" width="16"
height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M8.22 1.754a.25.25 0 00-.44 0L1.698 13.132a.25.25 0 00.22.368h12.164a.25.25 0 00.22-.368L8.22 1.754zm-1.763-.707c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0114.082 15H1.918a1.75 1.75 0 01-1.543-2.575L6.457 1.047zM9 11a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.25a.75.75 0 00-1.5 0v2.5a.75.75 0 001.5 0v-2.5z">
</path>
</svg>
Sorry, something went wrong.
</p>
</include-fragment>
</details-menu>
</details>
</div>
</header>
</div>
<div id="start-of-content" class="show-on-focus"></div>
<div data-pjax-replace id="js-flash-container">
<template class="js-flash-template">
<div class="flash flash-full {{ className }}">
<div class=" px-2">
<button class="flash-close js-flash-close" type="button" aria-label="Dismiss this message">
<svg class="octicon octicon-x" viewBox="0 0 16 16" version="1.1" width="16" height="16"
aria-hidden="true">
<path fill-rule="evenodd"
d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z">
</path>
</svg>
</button>
<div>{{ message }}</div>
</div>
</div>
</template>
</div>
<include-fragment class="js-notification-shelf-include-fragment"
data-base-src="https://github.com/notifications/beta/shelf"></include-fragment>
<div class="application-main " data-commit-hovercards-enabled data-discussion-hovercards-enabled
data-issue-and-pr-hovercards-enabled>
<div itemscope itemtype="http://schema.org/SoftwareSourceCode" class="">
<main id="js-repo-pjax-container" data-pjax-container>
<div class="color-bg-secondary pt-3 hide-full-screen mb-5">
<div class="d-flex mb-3 px-3 px-md-4 px-lg-5">
<div class="flex-auto min-width-0 width-fit mr-3">
<h1 class=" d-flex flex-wrap flex-items-center break-word f3 text-normal">
<svg class="octicon octicon-repo color-text-secondary mr-2" viewBox="0 0 16 16"
version="1.1" width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M2 2.5A2.5 2.5 0 014.5 0h8.75a.75.75 0 01.75.75v12.5a.75.75 0 01-.75.75h-2.5a.75.75 0 110-1.5h1.75v-2h-8a1 1 0 00-.714 1.7.75.75 0 01-1.072 1.05A2.495 2.495 0 012 11.5v-9zm10.5-1V9h-8c-.356 0-.694.074-1 .208V2.5a1 1 0 011-1h8zM5 12.25v3.25a.25.25 0 00.4.2l1.45-1.087a.25.25 0 01.3 0L8.6 15.7a.25.25 0 00.4-.2v-3.25a.25.25 0 00-.25-.25h-3.5a.25.25 0 00-.25.25z">
</path>
</svg>
<span class="author flex-self-stretch" itemprop="author">
<a class="url fn" rel="author" data-hovercard-type="organization"
data-hovercard-url="/orgs/livewire/hovercard" href="/livewire">livewire</a>
</span>
<span class="mx-1 flex-self-stretch color-text-secondary">/</span>
<strong itemprop="name" class="mr-2 flex-self-stretch">
<a data-pjax="#js-repo-pjax-container" href="/livewire/livewire">livewire</a>
</strong>
</h1>
</div>
<ul class="pagehead-actions flex-shrink-0 d-none d-md-inline" style="padding: 2px 0;">
<li>
<details id="funding-links-modal"
class="details-reset details-overlay details-overlay-dark d-inline-block float-left">
<summary id="sponsor-button-repo" class="btn btn-sm"
title="Sponsor livewire/livewire"
data-ga-click="Repository, show sponsor modal, action:compare#show; text:Sponsor">
<svg class="octicon octicon-heart icon-sponsor text-pink mr-1" height="16"
viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M4.25 2.5c-1.336 0-2.75 1.164-2.75 3 0 2.15 1.58 4.144 3.365 5.682A20.565 20.565 0 008 13.393a20.561 20.561 0 003.135-2.211C12.92 9.644 14.5 7.65 14.5 5.5c0-1.836-1.414-3-2.75-3-1.373 0-2.609.986-3.029 2.456a.75.75 0 01-1.442 0C6.859 3.486 5.623 2.5 4.25 2.5zM8 14.25l-.345.666-.002-.001-.006-.003-.018-.01a7.643 7.643 0 01-.31-.17 22.075 22.075 0 01-3.434-2.414C2.045 10.731 0 8.35 0 5.5 0 2.836 2.086 1 4.25 1 5.797 1 7.153 1.802 8 3.02 8.847 1.802 10.203 1 11.75 1 13.914 1 16 2.836 16 5.5c0 2.85-2.045 5.231-3.885 6.818a22.08 22.08 0 01-3.744 2.584l-.018.01-.006.003h-.002L8 14.25zm0 0l.345.666a.752.752 0 01-.69 0L8 14.25z">
</path>
</svg>
Sponsor
</summary>
<details-dialog class="anim-fade-in fast Box Box--overlay d-flex flex-column"
src="/livewire/livewire/funding_links?fragment=1" preload>
<div class="Box-header">
<button class="Box-btn-octicon btn-octicon float-right" type="button"
aria-label="Close dialog" data-close-dialog>
<svg class="octicon octicon-x" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z">
</path>
</svg>
</button>
<h3 class="Box-title">
Sponsor livewire/livewire
</h3>
</div>
<div class="overflow-auto">
<include-fragment>
<svg aria-label="Loading..."
style="box-sizing: content-box; color: var(--color-icon-primary);"
viewBox="0 0 16 16" fill="none" width="64" height="64"
class="my-3 mx-auto d-block anim-rotate">
<circle cx="8" cy="8" r="7" stroke="currentColor"
stroke-opacity="0.25" stroke-width="2"
vector-effect="non-scaling-stroke" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
vector-effect="non-scaling-stroke" />
</svg>
</include-fragment>
</div>
</details-dialog>
</details>
</li>
<li>
<notifications-list-subscription-form class="f5 position-relative d-flex">
<details class="details-reset details-overlay f5 position-relative"
data-target="notifications-list-subscription-form.details"
data-action="toggle:notifications-list-subscription-form#detailsToggled">
<summary class="btn btn-sm rounded-right-0"
data-hydro-click="{"event_type":"repository.click","payload":{"target":"WATCH_BUTTON","repository_id":170355508,"originating_url":"https://github.com/livewire/livewire/compare/v2.4.0...master","user_id":3670578}}"
data-hydro-click-hmac="a7627d94619addaa4691df329a47b427f1e8e50927b2dc066b79a5483b43d1a1"
data-ga-click="Repository, click Watch settings, action:compare#show"
aria-label="Notifications settings">
<span data-menu-button>
<span
data-target="notifications-list-subscription-form.unwatchButtonCopy">
<svg class="octicon octicon-eye" height="16" viewBox="0 0 16 16"
version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z">
</path>
</svg>
Unwatch
</span>
<span hidden
data-target="notifications-list-subscription-form.stopIgnoringButtonCopy">
<svg class="octicon octicon-bell-slash" height="16"
viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M8 1.5c-.997 0-1.895.416-2.534 1.086A.75.75 0 014.38 1.55 5 5 0 0113 5v2.373a.75.75 0 01-1.5 0V5A3.5 3.5 0 008 1.5zM4.182 4.31L1.19 2.143a.75.75 0 10-.88 1.214L3 5.305v2.642a.25.25 0 01-.042.139L1.255 10.64A1.518 1.518 0 002.518 13h11.108l1.184.857a.75.75 0 10.88-1.214l-1.375-.996a1.196 1.196 0 00-.013-.01L4.198 4.321a.733.733 0 00-.016-.011zm7.373 7.19L4.5 6.391v1.556c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01.015.015 0 00.005.012.017.017 0 00.006.004l.007.001h9.037zM8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z">
</path>
</svg>
Stop ignoring
</span>
<span hidden
data-target="notifications-list-subscription-form.watchButtonCopy">
<svg class="octicon octicon-eye" height="16" viewBox="0 0 16 16"
version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M1.679 7.932c.412-.621 1.242-1.75 2.366-2.717C5.175 4.242 6.527 3.5 8 3.5c1.473 0 2.824.742 3.955 1.715 1.124.967 1.954 2.096 2.366 2.717a.119.119 0 010 .136c-.412.621-1.242 1.75-2.366 2.717C10.825 11.758 9.473 12.5 8 12.5c-1.473 0-2.824-.742-3.955-1.715C2.92 9.818 2.09 8.69 1.679 8.068a.119.119 0 010-.136zM8 2c-1.981 0-3.67.992-4.933 2.078C1.797 5.169.88 6.423.43 7.1a1.619 1.619 0 000 1.798c.45.678 1.367 1.932 2.637 3.024C4.329 13.008 6.019 14 8 14c1.981 0 3.67-.992 4.933-2.078 1.27-1.091 2.187-2.345 2.637-3.023a1.619 1.619 0 000-1.798c-.45-.678-1.367-1.932-2.637-3.023C11.671 2.992 9.981 2 8 2zm0 8a2 2 0 100-4 2 2 0 000 4z">
</path>
</svg>
Watch
</span>
</span>
<span class="dropdown-caret"></span>
</summary>
<details-menu class="SelectMenu " role="menu"
data-target="notifications-list-subscription-form.menu">
<div class="SelectMenu-modal notifications-component-menu-modal">
<header class="SelectMenu-header">
<h3 class="SelectMenu-title">Notifications</h3>
<button class="SelectMenu-closeButton" type="button"
aria-label="Close menu"
data-action="click:notifications-list-subscription-form#closeMenu">
<svg class="octicon octicon-x" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z">
</path>
</svg>
</button>
</header>
<div class="SelectMenu-list">
<form data-target="notifications-list-subscription-form.form"
data-action="submit:notifications-list-subscription-form#submitForm"
action="/notifications/subscribe" accept-charset="UTF-8"
method="post"><input type="hidden" name="authenticity_token"
value="Ydq+x6q0Q9s22TAF70yZRVrcryU7QruCMhE4732JeI6zEO6rjPBR+Fc8xvd8LKwvyKbWzG5DAha3kJcGhSITgQ==" />
<input type="hidden" name="repository_id" value="170355508">
<button type="submit" name="do" value="included"
class="SelectMenu-item flex-items-start"
role="menuitemradio" aria-checked="false"
data-targets="notifications-list-subscription-form.subscriptionButtons">
<span class="f5">
<svg class="octicon octicon-check SelectMenu-icon SelectMenu-icon--check"
height="16" viewBox="0 0 16 16" version="1.1"
width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
</path>
</svg>
</span>
<div>
<div class="f5 text-bold">
Participating and @mentions
</div>
<div
class="text-small color-text-secondary text-normal pb-1">
Only receive notifications from this repository when
participating or @mentioned.
</div>
</div>
</button>
<button type="submit" name="do" value="subscribed"
class="SelectMenu-item flex-items-start"
role="menuitemradio" aria-checked="true"
data-targets="notifications-list-subscription-form.subscriptionButtons">
<span class="f5">
<svg class="octicon octicon-check SelectMenu-icon SelectMenu-icon--check"
height="16" viewBox="0 0 16 16" version="1.1"
width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
</path>
</svg>
</span>
<div>
<div class="f5 text-bold">
All Activity
</div>
<div
class="text-small color-text-secondary text-normal pb-1">
Notified of all notifications on this repository.
</div>
</div>
</button>
<button type="submit" name="do" value="ignore"
class="SelectMenu-item flex-items-start"
role="menuitemradio" aria-checked="false"
data-targets="notifications-list-subscription-form.subscriptionButtons">
<span class="f5">
<svg class="octicon octicon-check SelectMenu-icon SelectMenu-icon--check"
height="16" viewBox="0 0 16 16" version="1.1"
width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
</path>
</svg>
</span>
<div>
<div class="f5 text-bold">
Ignore
</div>
<div
class="text-small color-text-secondary text-normal pb-1">
Never be notified.
</div>
</div>
</button>
</form>
<button class="SelectMenu-item flex-items-start pr-3" type="button"
role="menuitemradio"
data-target="notifications-list-subscription-form.customButton"
data-action="click:notifications-list-subscription-form#openCustomDialog"
aria-haspopup="true" aria-checked="false">
<span class="f5">
<svg class="octicon octicon-check SelectMenu-icon SelectMenu-icon--check"
height="16" viewBox="0 0 16 16" version="1.1" width="16"
aria-hidden="true">
<path fill-rule="evenodd"
d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z">
</path>
</svg>
</span>
<div>
<div class="d-flex flex-items-start flex-justify-between">
<div class="f5 text-bold">Custom</div>
<div class="f5 pr-1">
<svg class="octicon octicon-arrow-right" height="16"
viewBox="0 0 16 16" version="1.1" width="16"
aria-hidden="true">
<path fill-rule="evenodd"
d="M8.22 2.97a.75.75 0 011.06 0l4.25 4.25a.75.75 0 010 1.06l-4.25 4.25a.75.75 0 01-1.06-1.06l2.97-2.97H3.75a.75.75 0 010-1.5h7.44L8.22 4.03a.75.75 0 010-1.06z">
</path>
</svg>
</div>
</div>
<div
class="text-small color-text-secondary text-normal pb-1">
Select events you want to be notified of in addition to
participating and @mentions.
</div>
</div>
</button>
</div>
</div>
</details-menu>
<details-dialog class="notifications-component-dialog "
data-target="notifications-list-subscription-form.customDialog" hidden>
<div
class="SelectMenu-modal notifications-component-dialog-modal overflow-visible">
<form data-target="notifications-list-subscription-form.customform"
data-action="submit:notifications-list-subscription-form#submitCustomForm"
action="/notifications/subscribe" accept-charset="UTF-8"
method="post"><input type="hidden" name="authenticity_token"
value="23byxDOOU2M8WE19er6RBhRyO73g+BxMSWEzObDNQIgJvKKoFcpBQF29u4/p3qRshghCVLX5pdjM4JzQSGYrhw==" />
<input type="hidden" name="repository_id" value="170355508">
<header
class="d-sm-none SelectMenu-header pb-0 border-bottom-0 px-2 px-sm-3">
<h1 class="f3 SelectMenu-title d-inline-flex">
<button
class="color-bg-primary border-0 px-2 py-0 m-0 Link--secondary f5"
aria-label="Return to menu" type="button"
data-action="click:notifications-list-subscription-form#closeCustomDialog">
<svg style="" class="octicon octicon-arrow-left"
height="16" viewBox="0 0 16 16" version="1.1"
width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z">
</path>
</svg>
</button>
Custom
</h3>
</header>
<header class="d-none d-sm-flex flex-items-start pt-1">
<button class="border-0 px-2 pt-1 m-0 Link--secondary f5"
style="background-color: transparent;"
aria-label="Return to menu" type="button"
data-action="click:notifications-list-subscription-form#closeCustomDialog">
<svg style="position: relative; left: 2px; top: 1px"
class="octicon octicon-arrow-left" height="16"
viewBox="0 0 16 16" version="1.1" width="16"
aria-hidden="true">
<path fill-rule="evenodd"
d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z">
</path>
</svg>
</button>
<h1 class="pt-1 pr-4 pb-0 pl-0 f5 text-bold">
Custom
</h1>
</header>
<fieldset>
<legend>
<div
class="text-small color-text-secondary pt-0 pr-3 pb-3 pl-6 pl-sm-5 border-bottom mb-3">
Select events you want to be notified of in addition to
participating and @mentions.
</div>
</legend>
<div class="form-checkbox mr-3 ml-6 ml-sm-5 mb-2 mt-0">
<label class="f5 text-normal">
<input type="checkbox" name="thread_types[]"
value="Issue"
data-targets="notifications-list-subscription-form.threadTypeCheckboxes"
data-action="change:notifications-list-subscription-form#threadTypeCheckboxesUpdated">
Issues
</label>
</div>
<div class="form-checkbox mr-3 ml-6 ml-sm-5 mb-2 mt-0">
<label class="f5 text-normal">
<input type="checkbox" name="thread_types[]"
value="PullRequest"
data-targets="notifications-list-subscription-form.threadTypeCheckboxes"
data-action="change:notifications-list-subscription-form#threadTypeCheckboxesUpdated">
Pull requests
</label>
</div>
<div class="form-checkbox mr-3 ml-6 ml-sm-5 mb-2 mt-0">
<label class="f5 text-normal">
<input type="checkbox" name="thread_types[]"
value="Release"
data-targets="notifications-list-subscription-form.threadTypeCheckboxes"
data-action="change:notifications-list-subscription-form#threadTypeCheckboxesUpdated">
Releases
</label>
</div>
<div class="form-checkbox mr-3 ml-6 ml-sm-5 mb-2 mt-0">
<label class="f5 text-normal">
<input type="checkbox" name="thread_types[]"
value="Discussion"
data-targets="notifications-list-subscription-form.threadTypeCheckboxes"
data-action="change:notifications-list-subscription-form#threadTypeCheckboxesUpdated">
Discussions
</label>
</div>
</fieldset>
<div
class="pt-2 pb-3 px-3 d-flex flex-justify-start flex-row-reverse">
<button type="submit" name="do" value="custom"
class="btn btn-sm btn-primary ml-2"
data-target="notifications-list-subscription-form.customSubmit"
disabled>Apply</button>
<button class="btn btn-sm" type="button"
data-action="click:notifications-list-subscription-form#resetForm"
data-close-dialog="">Cancel</button>
</div>
</form>
</div>
</details-dialog>
<div class="notifications-component-dialog-overlay"></div>
</details>
<a class="social-count" href="/livewire/livewire/watchers"
aria-label="179 users are watching this repository"
data-target="notifications-list-subscription-form.socialCount">
179
</a>
</notifications-list-subscription-form>
</li>
<li>
<div class="d-block js-toggler-container js-social-container starring-container on">
<form class="starred js-social-form" action="/livewire/livewire/unstar"
accept-charset="UTF-8" method="post"><input type="hidden"
name="authenticity_token"
value="YEssjLcpByUaytmoyOSqtxscnZJXcnkmK0hrhgOeQMgBWnHiKYLdt6Zd5aP+r0V5OFbMcffvGDvnd/70DV5e+Q==" />
<input type="hidden" name="context" value="repository">
<button type="submit" class="btn btn-sm btn-with-count js-toggler-target"
aria-label="Unstar this repository" title="Unstar livewire/livewire"
data-hydro-click="{"event_type":"repository.click","payload":{"target":"UNSTAR_BUTTON","repository_id":170355508,"originating_url":"https://github.com/livewire/livewire/compare/v2.4.0...master","user_id":3670578}}"
data-hydro-click-hmac="bc5093c637cdf7c6e6f31f0fec12eb0aa3c2be537a20845e37f9ba9fe069977e"
data-ga-click="Repository, click unstar button, action:compare#show; text:Unstar">
<svg class="octicon octicon-star-fill mr-1" height="16" viewBox="0 0 16 16"
version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25z">
</path>
</svg>
<span>
Unstar
</span></button> <a class="social-count js-social-count"
href="/livewire/livewire/stargazers"
aria-label="10972 users starred this repository">
11k
</a>
</form>
<form class="unstarred js-social-form" action="/livewire/livewire/star"
accept-charset="UTF-8" method="post"><input type="hidden"
name="authenticity_token"
value="cdxb1VOEWZsilwfEVxPUPqU+nW1Kaia3rxhpmocyFImNd7PBx2IvlhwNXZnQtA5R4LDuX493t7ndj7jP0wdorg==" />
<input type="hidden" name="context" value="repository">
<button type="submit" class="btn btn-sm btn-with-count js-toggler-target"
aria-label="Unstar this repository" title="Star livewire/livewire"
data-hydro-click="{"event_type":"repository.click","payload":{"target":"STAR_BUTTON","repository_id":170355508,"originating_url":"https://github.com/livewire/livewire/compare/v2.4.0...master","user_id":3670578}}"
data-hydro-click-hmac="071a2e4fb0329ce3ba97a1c8016f1e11f156b427f80f8f11b647779fe9d42313"
data-ga-click="Repository, click star button, action:compare#show; text:Star">
<svg class="octicon octicon-star mr-1" height="16" viewBox="0 0 16 16"
version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M8 .25a.75.75 0 01.673.418l1.882 3.815 4.21.612a.75.75 0 01.416 1.279l-3.046 2.97.719 4.192a.75.75 0 01-1.088.791L8 12.347l-3.766 1.98a.75.75 0 01-1.088-.79l.72-4.194L.818 6.374a.75.75 0 01.416-1.28l4.21-.611L7.327.668A.75.75 0 018 .25zm0 2.445L6.615 5.5a.75.75 0 01-.564.41l-3.097.45 2.24 2.184a.75.75 0 01.216.664l-.528 3.084 2.769-1.456a.75.75 0 01.698 0l2.77 1.456-.53-3.084a.75.75 0 01.216-.664l2.24-2.183-3.096-.45a.75.75 0 01-.564-.41L8 2.694v.001z">
</path>
</svg>
<span>
Star
</span></button> <a class="social-count js-social-count"
href="/livewire/livewire/stargazers"
aria-label="10972 users starred this repository">
11k
</a>
</form>
</div>
</li>
<li>
<div class="float-left">
<details class="details-reset details-overlay details-overlay-dark ">
<summary class="btn btn-sm btn-with-count"
title="Fork your own copy of livewire/livewire to your account"
data-hydro-click="{"event_type":"repository.click","payload":{"target":"FORK_BUTTON","repository_id":170355508,"originating_url":"https://github.com/livewire/livewire/compare/v2.4.0...master","user_id":3670578}}"
data-hydro-click-hmac="7de18a3ca53eef6d3ddb3be2212da3b4784c4444d6b47b1e2d1970dfbdf2e704"
data-ga-click="Repository, show fork modal, action:compare#show; text:Fork">
<svg class="octicon octicon-repo-forked" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M5 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm0 2.122a2.25 2.25 0 10-1.5 0v.878A2.25 2.25 0 005.75 8.5h1.5v2.128a2.251 2.251 0 101.5 0V8.5h1.5a2.25 2.25 0 002.25-2.25v-.878a2.25 2.25 0 10-1.5 0v.878a.75.75 0 01-.75.75h-4.5A.75.75 0 015 6.25v-.878zm3.75 7.378a.75.75 0 11-1.5 0 .75.75 0 011.5 0zm3-8.75a.75.75 0 100-1.5.75.75 0 000 1.5z">
</path>
</svg>
Fork
</summary>
<details-dialog class="Box d-flex flex-column anim-fade-in fast Box--overlay "
aria-label="Fork livewire" src="/livewire/livewire/fork?fragment=1" preload>
<div class="Box-header">
<button class="Box-btn-octicon btn-octicon float-right" type="button"
aria-label="Close dialog" data-close-dialog>
<svg class="octicon octicon-x" height="16" viewBox="0 0 16 16"
version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z">
</path>
</svg>
</button>
<h1 class="Box-title">Fork livewire</h1>
</div>
<div class="text-center overflow-auto">
<include-fragment>
<div class="octocat-spinner my-5" aria-label="Loading..."></div>
<p class="f5 color-text-secondary">If this dialog fails to load, you
can visit <a href="/livewire/livewire/fork">the fork page</a>
directly.</p>
</include-fragment>
</div>
</details-dialog>
</details>
</div>
<a href="/livewire/livewire/network/members" class="social-count"
aria-label="624 users forked this repository">
624
</a>
</li>
</ul>
</div>
<nav data-pjax="#js-repo-pjax-container" aria-label="Repository"
class="js-repo-nav js-sidenav-container-pjax js-responsive-underlinenav overflow-hidden UnderlineNav px-3 px-md-4 px-lg-5 color-bg-secondary">
<ul class="UnderlineNav-body list-style-none ">
<li class="d-flex">
<a href="/livewire/livewire" data-tab-item="i0code-tab"
data-selected-links="repo_source repo_downloads repo_commits repo_releases repo_tags repo_branches repo_packages repo_deployments /livewire/livewire"
data-hotkey="g c" data-ga-click="Repository, Navigation click, Code tab"
aria-current="page"
class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item selected ">
<svg class="octicon octicon-code UnderlineNav-octicon d-none d-sm-inline"
height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M4.72 3.22a.75.75 0 011.06 1.06L2.06 8l3.72 3.72a.75.75 0 11-1.06 1.06L.47 8.53a.75.75 0 010-1.06l4.25-4.25zm6.56 0a.75.75 0 10-1.06 1.06L13.94 8l-3.72 3.72a.75.75 0 101.06 1.06l4.25-4.25a.75.75 0 000-1.06l-4.25-4.25z">
</path>
</svg>
<span data-content="Code">Code</span>
<span title="Not available" class="Counter "></span>
</a>
</li>
<li class="d-flex">
<a href="/livewire/livewire/issues" data-tab-item="i1issues-tab"
data-selected-links="repo_issues repo_labels repo_milestones /livewire/livewire/issues"
data-hotkey="g i" data-ga-click="Repository, Navigation click, Issues tab"
class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item ">
<svg class="octicon octicon-issue-opened UnderlineNav-octicon d-none d-sm-inline"
height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9 3a1 1 0 11-2 0 1 1 0 012 0zm-.25-6.25a.75.75 0 00-1.5 0v3.5a.75.75 0 001.5 0v-3.5z">
</path>
</svg>
<span data-content="Issues">Issues</span>
<span title="116" class="Counter ">116</span>
</a>
</li>
<li class="d-flex">
<a href="/livewire/livewire/pulls" data-tab-item="i2pull-requests-tab"
data-selected-links="repo_pulls checks /livewire/livewire/pulls" data-hotkey="g p"
data-ga-click="Repository, Navigation click, Pull requests tab"
class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item ">
<svg class="octicon octicon-git-pull-request UnderlineNav-octicon d-none d-sm-inline"
height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.177 3.073L9.573.677A.25.25 0 0110 .854v4.792a.25.25 0 01-.427.177L7.177 3.427a.25.25 0 010-.354zM3.75 2.5a.75.75 0 100 1.5.75.75 0 000-1.5zm-2.25.75a2.25 2.25 0 113 2.122v5.256a2.251 2.251 0 11-1.5 0V5.372A2.25 2.25 0 011.5 3.25zM11 2.5h-1V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5zm1 10.25a.75.75 0 111.5 0 .75.75 0 01-1.5 0zM3.75 12a.75.75 0 100 1.5.75.75 0 000-1.5z">
</path>
</svg>
<span data-content="Pull requests">Pull requests</span>
<span title="7" class="Counter ">7</span>
</a>
</li>
<li class="d-flex">
<a href="/livewire/livewire/discussions" data-tab-item="i3discussions-tab"
data-selected-links="repo_discussions /livewire/livewire/discussions"
data-hotkey="g g" data-ga-click="Repository, Navigation click, Discussions tab"
class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item ">
<svg class="octicon octicon-comment-discussion UnderlineNav-octicon d-none d-sm-inline"
height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M1.5 2.75a.25.25 0 01.25-.25h8.5a.25.25 0 01.25.25v5.5a.25.25 0 01-.25.25h-3.5a.75.75 0 00-.53.22L3.5 11.44V9.25a.75.75 0 00-.75-.75h-1a.25.25 0 01-.25-.25v-5.5zM1.75 1A1.75 1.75 0 000 2.75v5.5C0 9.216.784 10 1.75 10H2v1.543a1.457 1.457 0 002.487 1.03L7.061 10h3.189A1.75 1.75 0 0012 8.25v-5.5A1.75 1.75 0 0010.25 1h-8.5zM14.5 4.75a.25.25 0 00-.25-.25h-.5a.75.75 0 110-1.5h.5c.966 0 1.75.784 1.75 1.75v5.5A1.75 1.75 0 0114.25 12H14v1.543a1.457 1.457 0 01-2.487 1.03L9.22 12.28a.75.75 0 111.06-1.06l2.22 2.22v-2.19a.75.75 0 01.75-.75h1a.25.25 0 00.25-.25v-5.5z">
</path>
</svg>
<span data-content="Discussions">Discussions</span>
<span title="Not available" class="Counter "></span>
</a>
</li>
<li class="d-flex">
<a href="/livewire/livewire/actions" data-tab-item="i4actions-tab"
data-selected-links="repo_actions /livewire/livewire/actions" data-hotkey="g a"
data-ga-click="Repository, Navigation click, Actions tab"
class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item ">
<svg class="octicon octicon-play UnderlineNav-octicon d-none d-sm-inline"
height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M1.5 8a6.5 6.5 0 1113 0 6.5 6.5 0 01-13 0zM8 0a8 8 0 100 16A8 8 0 008 0zM6.379 5.227A.25.25 0 006 5.442v5.117a.25.25 0 00.379.214l4.264-2.559a.25.25 0 000-.428L6.379 5.227z">
</path>
</svg>
<span data-content="Actions">Actions</span>
<span title="Not available" class="Counter "></span>
</a>
</li>
<li class="d-flex">
<a href="/livewire/livewire/projects" data-tab-item="i5projects-tab"
data-selected-links="repo_projects new_repo_project repo_project /livewire/livewire/projects"
data-hotkey="g b" data-ga-click="Repository, Navigation click, Projects tab"
class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item ">
<svg class="octicon octicon-project UnderlineNav-octicon d-none d-sm-inline"
height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M1.75 0A1.75 1.75 0 000 1.75v12.5C0 15.216.784 16 1.75 16h12.5A1.75 1.75 0 0016 14.25V1.75A1.75 1.75 0 0014.25 0H1.75zM1.5 1.75a.25.25 0 01.25-.25h12.5a.25.25 0 01.25.25v12.5a.25.25 0 01-.25.25H1.75a.25.25 0 01-.25-.25V1.75zM11.75 3a.75.75 0 00-.75.75v7.5a.75.75 0 001.5 0v-7.5a.75.75 0 00-.75-.75zm-8.25.75a.75.75 0 011.5 0v5.5a.75.75 0 01-1.5 0v-5.5zM8 3a.75.75 0 00-.75.75v3.5a.75.75 0 001.5 0v-3.5A.75.75 0 008 3z">
</path>
</svg>
<span data-content="Projects">Projects</span>
<span title="2" class="Counter ">2</span>
</a>
</li>
<li class="d-flex">
<a href="/livewire/livewire/security" data-tab-item="i6security-tab"
data-selected-links="security overview alerts policy token_scanning code_scanning /livewire/livewire/security"
data-hotkey="g s" data-ga-click="Repository, Navigation click, Security tab"
class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item ">
<svg class="octicon octicon-shield UnderlineNav-octicon d-none d-sm-inline"
height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.467.133a1.75 1.75 0 011.066 0l5.25 1.68A1.75 1.75 0 0115 3.48V7c0 1.566-.32 3.182-1.303 4.682-.983 1.498-2.585 2.813-5.032 3.855a1.7 1.7 0 01-1.33 0c-2.447-1.042-4.049-2.357-5.032-3.855C1.32 10.182 1 8.566 1 7V3.48a1.75 1.75 0 011.217-1.667l5.25-1.68zm.61 1.429a.25.25 0 00-.153 0l-5.25 1.68a.25.25 0 00-.174.238V7c0 1.358.275 2.666 1.057 3.86.784 1.194 2.121 2.34 4.366 3.297a.2.2 0 00.154 0c2.245-.956 3.582-2.104 4.366-3.298C13.225 9.666 13.5 8.36 13.5 7V3.48a.25.25 0 00-.174-.237l-5.25-1.68zM9 10.5a1 1 0 11-2 0 1 1 0 012 0zm-.25-5.75a.75.75 0 10-1.5 0v3a.75.75 0 001.5 0v-3z">
</path>
</svg>
<span data-content="Security">Security</span>
<include-fragment src="/livewire/livewire/security/overall-count"
accept="text/fragment+html"></include-fragment>
</a>
</li>
<li class="d-flex">
<a href="/livewire/livewire/pulse" data-tab-item="i7insights-tab"
data-selected-links="repo_graphs repo_contributors dependency_graph dependabot_updates pulse people community /livewire/livewire/pulse"
data-ga-click="Repository, Navigation click, Insights tab"
class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item ">
<svg class="octicon octicon-graph UnderlineNav-octicon d-none d-sm-inline"
height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M1.5 1.75a.75.75 0 00-1.5 0v12.5c0 .414.336.75.75.75h14.5a.75.75 0 000-1.5H1.5V1.75zm14.28 2.53a.75.75 0 00-1.06-1.06L10 7.94 7.53 5.47a.75.75 0 00-1.06 0L3.22 8.72a.75.75 0 001.06 1.06L7 7.06l2.47 2.47a.75.75 0 001.06 0l5.25-5.25z">
</path>
</svg>
<span data-content="Insights">Insights</span>
<span title="Not available" class="Counter "></span>
</a>
</li>
<li class="d-flex">
<a href="/livewire/livewire/settings" data-tab-item="i8settings-tab"
data-selected-links="repo_settings repo_branch_settings hooks integration_installations repo_keys_settings issue_template_editor secrets_settings key_links_settings repo_actions_settings notifications repository_environments interaction_limits /livewire/livewire/settings"
data-ga-click="Repository, Navigation click, Settings tab"
class="UnderlineNav-item hx_underlinenav-item no-wrap js-responsive-underlinenav-item ">
<svg class="octicon octicon-gear UnderlineNav-octicon d-none d-sm-inline"
height="16" viewBox="0 0 16 16" version="1.1" width="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.429 1.525a6.593 6.593 0 011.142 0c.036.003.108.036.137.146l.289 1.105c.147.56.55.967.997 1.189.174.086.341.183.501.29.417.278.97.423 1.53.27l1.102-.303c.11-.03.175.016.195.046.219.31.41.641.573.989.014.031.022.11-.059.19l-.815.806c-.411.406-.562.957-.53 1.456a4.588 4.588 0 010 .582c-.032.499.119 1.05.53 1.456l.815.806c.08.08.073.159.059.19a6.494 6.494 0 01-.573.99c-.02.029-.086.074-.195.045l-1.103-.303c-.559-.153-1.112-.008-1.529.27-.16.107-.327.204-.5.29-.449.222-.851.628-.998 1.189l-.289 1.105c-.029.11-.101.143-.137.146a6.613 6.613 0 01-1.142 0c-.036-.003-.108-.037-.137-.146l-.289-1.105c-.147-.56-.55-.967-.997-1.189a4.502 4.502 0 01-.501-.29c-.417-.278-.97-.423-1.53-.27l-1.102.303c-.11.03-.175-.016-.195-.046a6.492 6.492 0 01-.573-.989c-.014-.031-.022-.11.059-.19l.815-.806c.411-.406.562-.957.53-1.456a4.587 4.587 0 010-.582c.032-.499-.119-1.05-.53-1.456l-.815-.806c-.08-.08-.073-.159-.059-.19a6.44 6.44 0 01.573-.99c.02-.029.086-.075.195-.045l1.103.303c.559.153 1.112.008 1.529-.27.16-.107.327-.204.5-.29.449-.222.851-.628.998-1.189l.289-1.105c.029-.11.101-.143.137-.146zM8 0c-.236 0-.47.01-.701.03-.743.065-1.29.615-1.458 1.261l-.29 1.106c-.017.066-.078.158-.211.224a5.994 5.994 0 00-.668.386c-.123.082-.233.09-.3.071L3.27 2.776c-.644-.177-1.392.02-1.82.63a7.977 7.977 0 00-.704 1.217c-.315.675-.111 1.422.363 1.891l.815.806c.05.048.098.147.088.294a6.084 6.084 0 000 .772c.01.147-.038.246-.088.294l-.815.806c-.474.469-.678 1.216-.363 1.891.2.428.436.835.704 1.218.428.609 1.176.806 1.82.63l1.103-.303c.066-.019.176-.011.299.071.213.143.436.272.668.386.133.066.194.158.212.224l.289 1.106c.169.646.715 1.196 1.458 1.26a8.094 8.094 0 001.402 0c.743-.064 1.29-.614 1.458-1.26l.29-1.106c.017-.066.078-.158.211-.224a5.98 5.98 0 00.668-.386c.123-.082.233-.09.3-.071l1.102.302c.644.177 1.392-.02 1.82-.63.268-.382.505-.789.704-1.217.315-.675.111-1.422-.364-1.891l-.814-.806c-.05-.048-.098-.147-.088-.294a6.1 6.1 0 000-.772c-.01-.147.039-.246.088-.294l.814-.806c.475-.469.679-1.216.364-1.891a7.992 7.992 0 00-.704-1.218c-.428-.609-1.176-.806-1.82-.63l-1.103.303c-.066.019-.176.011-.299-.071a5.991 5.991 0 00-.668-.386c-.133-.066-.194-.158-.212-.224L10.16 1.29C9.99.645 9.444.095 8.701.031A8.094 8.094 0 008 0zm1.5 8a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zM11 8a3 3 0 11-6 0 3 3 0 016 0z">
</path>
</svg>
<span data-content="Settings">Settings</span>
<span title="Not available" class="Counter "></span>
</a>
</li>
</ul>
<div style="visibility:hidden;"
class="UnderlineNav-actions js-responsive-underlinenav-overflow position-absolute pr-3 pr-md-4 pr-lg-5 right-0">
<details class="details-overlay details-reset position-relative">
<summary role="button">
<div class="UnderlineNav-item mr-0 border-0">
<svg class="octicon octicon-kebab-horizontal" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path
d="M8 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zM1.5 9a1.5 1.5 0 100-3 1.5 1.5 0 000 3zm13 0a1.5 1.5 0 100-3 1.5 1.5 0 000 3z">
</path>
</svg>
<span class="sr-only">More</span>
</div>
</summary>
<div>
<details-menu role="menu" class="dropdown-menu dropdown-menu-sw ">
<ul>
<li data-menu-item="i0code-tab" hidden>
<a role="menuitem" class="js-selected-navigation-item dropdown-item"
data-selected-links=" /livewire/livewire" href="/livewire/livewire">
Code
</a>
</li>
<li data-menu-item="i1issues-tab" hidden>
<a role="menuitem" class="js-selected-navigation-item dropdown-item"
data-selected-links=" /livewire/livewire/issues"
href="/livewire/livewire/issues">
Issues
</a>
</li>
<li data-menu-item="i2pull-requests-tab" hidden>
<a role="menuitem" class="js-selected-navigation-item dropdown-item"
data-selected-links=" /livewire/livewire/pulls"
href="/livewire/livewire/pulls">
Pull requests
</a>
</li>
<li data-menu-item="i3discussions-tab" hidden>
<a role="menuitem" class="js-selected-navigation-item dropdown-item"
data-selected-links=" /livewire/livewire/discussions"
href="/livewire/livewire/discussions">
Discussions
</a>
</li>
<li data-menu-item="i4actions-tab" hidden>
<a role="menuitem" class="js-selected-navigation-item dropdown-item"
data-selected-links=" /livewire/livewire/actions"
href="/livewire/livewire/actions">
Actions
</a>
</li>
<li data-menu-item="i5projects-tab" hidden>
<a role="menuitem" class="js-selected-navigation-item dropdown-item"
data-selected-links=" /livewire/livewire/projects"
href="/livewire/livewire/projects">
Projects
</a>
</li>
<li data-menu-item="i6security-tab" hidden>
<a role="menuitem" class="js-selected-navigation-item dropdown-item"
data-selected-links=" /livewire/livewire/security"
href="/livewire/livewire/security">
Security
</a>
</li>
<li data-menu-item="i7insights-tab" hidden>
<a role="menuitem" class="js-selected-navigation-item dropdown-item"
data-selected-links=" /livewire/livewire/pulse"
href="/livewire/livewire/pulse">
Insights
</a>
</li>
<li data-menu-item="i8settings-tab" hidden>
<a role="menuitem" class="js-selected-navigation-item dropdown-item"
data-selected-links=" /livewire/livewire/settings"
href="/livewire/livewire/settings">
Settings
</a>
</li>
</ul>
</details-menu>
</div>
</details>
</div>
</nav>
</div>
<div class="container-xl clearfix new-discussion-timeline px-3 px-md-4 px-lg-5">
<div id="repo-content-pjax-container" class="repository-content ">
<a class="d-none js-permalink-shortcut" data-hotkey="y"
href="https://github.com/livewire/livewire/compare/livewire:8055af7...livewire:33101c8">Permalink</a>
<div class="compare-show-header Subhead hx_Subhead--responsive ">
<h1 class="Subhead-heading ">Comparing changes</h1>
<div class="Subhead-description "> Choose two branches to see what's changed or to start a
new pull request.
If you need to, you can also <button type="button"
class="btn-link js-toggle-range-editor-cross-repo">compare across forks</button>.
</div>
</div>
<div class="compare-pr-header Subhead hx_Subhead--responsive ">
<h1 class="Subhead-heading ">Open a pull request</h1>
<div class="Subhead-description "> Create a new pull request by comparing changes across two
branches. If you need to, you can also <button type="button"
class="btn-link js-toggle-range-editor-cross-repo">compare across forks</button>.
</div>
</div>
<div class="range-editor color-text-secondary js-range-editor ">
<svg class="octicon octicon-git-compare range-editor-icon" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M9.573.677L7.177 3.073a.25.25 0 000 .354l2.396 2.396A.25.25 0 0010 5.646V4h1a1 1 0 011 1v5.628a2.251 2.251 0 101.5 0V5A2.5 2.5 0 0011 2.5h-1V.854a.25.25 0 00-.427-.177zM6 12v-1.646a.25.25 0 01.427-.177l2.396 2.396a.25.25 0 010 .354l-2.396 2.396A.25.25 0 016 15.146V13.5H5A2.5 2.5 0 012.5 11V5.372a2.25 2.25 0 111.5 0V11a1 1 0 001 1h1zm6.75 0a.75.75 0 100 1.5.75.75 0 000-1.5zM4 3.25a.75.75 0 11-1.5 0 .75.75 0 011.5 0z">
</path>
</svg>
<div class="range-cross-repo-pair">
<details class="select-menu fork-suggester details-reset details-overlay hx_rsm">
<summary class="btn btn-sm select-menu-button">
<i>base repository:</i>
<span class="css-truncate css-truncate-target" data-menu-button
title="base: livewire/livewire">livewire/livewire</span>
</summary>
<details-menu class="select-menu-modal position-absolute" style="z-index: 99;"
data-pjax
src="/livewire/livewire/compare/repository-list?range=v2.4.0...master&selected=livewire%2Flivewire&type=base"
preload>
<include-fragment>
<svg style="box-sizing: content-box; color: var(--color-icon-primary);"
viewBox="0 0 16 16" fill="none" width="32" height="32"
class="my-6 mx-auto d-block anim-rotate">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25"
stroke-width="2" vector-effect="non-scaling-stroke" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
vector-effect="non-scaling-stroke" />
</svg>
</include-fragment>
</details-menu>
</details>
<details class="details-reset details-overlay select-menu commitish-suggester hx_rsm">
<summary class="btn btn-sm select-menu-button branch">
<i>base:</i>
<span class="css-truncate css-truncate-target" data-menu-button
title="base: v2.4.0">v2.4.0</span>
</summary>
<details-menu class="select-menu-modal position-absolute" style="z-index: 99;"
data-pjax
src="/livewire/livewire/compare/branch-list?range=v2.4.0...master&type=base"
preload>
<include-fragment>
<svg style="box-sizing: content-box; color: var(--color-icon-primary);"
viewBox="0 0 16 16" fill="none" width="32" height="32"
class="my-6 mx-auto d-block anim-rotate">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25"
stroke-width="2" vector-effect="non-scaling-stroke" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
vector-effect="non-scaling-stroke" />
</svg>
</include-fragment>
</details-menu>
</details>
</div>
<span class="tooltipped tooltipped-n" aria-label="Diff using three-dot (...) notation"><svg
class="octicon octicon-arrow-left" viewBox="0 0 16 16" version="1.1" width="16"
height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M7.78 12.53a.75.75 0 01-1.06 0L2.47 8.28a.75.75 0 010-1.06l4.25-4.25a.75.75 0 011.06 1.06L4.81 7h7.44a.75.75 0 010 1.5H4.81l2.97 2.97a.75.75 0 010 1.06z">
</path>
</svg></span>
<div class="range-cross-repo-pair">
<details class="select-menu fork-suggester details-reset details-overlay hx_rsm">
<summary class="btn btn-sm select-menu-button">
<i>head repository:</i>
<span class="css-truncate css-truncate-target" data-menu-button
title="head: livewire/livewire">livewire/livewire</span>
</summary>
<details-menu class="select-menu-modal position-absolute" style="z-index: 99;"
data-pjax
src="/livewire/livewire/compare/repository-list?range=v2.4.0...master&selected=livewire%2Flivewire&type=head"
preload>
<include-fragment>
<svg style="box-sizing: content-box; color: var(--color-icon-primary);"
viewBox="0 0 16 16" fill="none" width="32" height="32"
class="my-6 mx-auto d-block anim-rotate">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25"
stroke-width="2" vector-effect="non-scaling-stroke" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
vector-effect="non-scaling-stroke" />
</svg>
</include-fragment>
</details-menu>
</details>
<details class="details-reset details-overlay select-menu commitish-suggester hx_rsm">
<summary class="btn btn-sm select-menu-button branch">
<i>compare:</i>
<span class="css-truncate css-truncate-target" data-menu-button
title="compare: master">master</span>
</summary>
<details-menu class="select-menu-modal position-absolute" style="z-index: 99;"
data-pjax
src="/livewire/livewire/compare/branch-list?range=v2.4.0...master&type=head"
preload>
<include-fragment>
<svg style="box-sizing: content-box; color: var(--color-icon-primary);"
viewBox="0 0 16 16" fill="none" width="32" height="32"
class="my-6 mx-auto d-block anim-rotate">
<circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25"
stroke-width="2" vector-effect="non-scaling-stroke" />
<path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor"
stroke-width="2" stroke-linecap="round"
vector-effect="non-scaling-stroke" />
</svg>
</include-fragment>
</details-menu>
</details>
</div>
</div>
<div class="tabnav">
<div class="tabnav-extra float-right">
<svg class="octicon octicon-organization" viewBox="0 0 16 16" version="1.1" width="16"
height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M1.5 14.25c0 .138.112.25.25.25H4v-1.25a.75.75 0 01.75-.75h2.5a.75.75 0 01.75.75v1.25h2.25a.25.25 0 00.25-.25V1.75a.25.25 0 00-.25-.25h-8.5a.25.25 0 00-.25.25v12.5zM1.75 16A1.75 1.75 0 010 14.25V1.75C0 .784.784 0 1.75 0h8.5C11.216 0 12 .784 12 1.75v12.5c0 .085-.006.168-.018.25h2.268a.25.25 0 00.25-.25V8.285a.25.25 0 00-.111-.208l-1.055-.703a.75.75 0 11.832-1.248l1.055.703c.487.325.779.871.779 1.456v5.965A1.75 1.75 0 0114.25 16h-3.5a.75.75 0 01-.197-.026c-.099.017-.2.026-.303.026h-3a.75.75 0 01-.75-.75V14h-1v1.25a.75.75 0 01-.75.75h-3zM3 3.75A.75.75 0 013.75 3h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 3.75zM3.75 6a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM3 9.75A.75.75 0 013.75 9h.5a.75.75 0 010 1.5h-.5A.75.75 0 013 9.75zM7.75 9a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5zM7 6.75A.75.75 0 017.75 6h.5a.75.75 0 010 1.5h-.5A.75.75 0 017 6.75zM7.75 3a.75.75 0 000 1.5h.5a.75.75 0 000-1.5h-.5z">
</path>
</svg>
25
contributors
</div>
<nav class="tabnav-tabs">
<a href="#commits_bucket" class="tabnav-tab js-compare-tab selected"
data-ga-click="Compare, tabs, commits">
<svg class="octicon octicon-git-commit" viewBox="0 0 16 16" version="1.1" width="16"
height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z">
</path>
</svg>
Commits
<span title="56" class="Counter ">56</span>
</a>
<a href="#files_bucket" class="tabnav-tab js-compare-tab"
data-ga-click="Compare, tabs, files">
<svg class="octicon octicon-file-diff" viewBox="0 0 16 16" version="1.1" width="16"
height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M2.75 1.5a.25.25 0 00-.25.25v12.5c0 .138.112.25.25.25h10.5a.25.25 0 00.25-.25V4.664a.25.25 0 00-.073-.177l-2.914-2.914a.25.25 0 00-.177-.073H2.75zM1 1.75C1 .784 1.784 0 2.75 0h7.586c.464 0 .909.184 1.237.513l2.914 2.914c.329.328.513.773.513 1.237v9.586A1.75 1.75 0 0113.25 16H2.75A1.75 1.75 0 011 14.25V1.75zm7 1.5a.75.75 0 01.75.75v1.5h1.5a.75.75 0 010 1.5h-1.5v1.5a.75.75 0 01-1.5 0V7h-1.5a.75.75 0 010-1.5h1.5V4A.75.75 0 018 3.25zm-3 8a.75.75 0 01.75-.75h4.5a.75.75 0 010 1.5h-4.5a.75.75 0 01-.75-.75z">
</path>
</svg>
Files changed
<span title="74" class="Counter ">74</span>
</a>
<a href="#commit_comments_bucket" class="tabnav-tab js-compare-tab"
data-ga-click="Compare, tabs, comments">
<svg class="octicon octicon-comment" viewBox="0 0 16 16" version="1.1" width="16"
height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M2.75 2.5a.25.25 0 00-.25.25v7.5c0 .138.112.25.25.25h2a.75.75 0 01.75.75v2.19l2.72-2.72a.75.75 0 01.53-.22h4.5a.25.25 0 00.25-.25v-7.5a.25.25 0 00-.25-.25H2.75zM1 2.75C1 1.784 1.784 1 2.75 1h10.5c.966 0 1.75.784 1.75 1.75v7.5A1.75 1.75 0 0113.25 12H9.06l-2.573 2.573A1.457 1.457 0 014 13.543V12H2.75A1.75 1.75 0 011 10.25v-7.5z">
</path>
</svg>
Commit comments
<span title="0" class="Counter ">0</span>
</a>
</nav>
</div>
<div id="commits_bucket" class="">
<div>
<div>
<div class="TimelineItem pb-1">
<div class="TimelineItem-badge">
<svg class="octicon octicon-repo-push" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z">
</path>
</svg>
</div>
<div class="TimelineItem-body">
Commits on Jan 28, 2021
</div>
</div>
<div class="TimelineItem TimelineItem--condensed">
<div class="TimelineItem-badge">
<svg class="octicon octicon-git-commit" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z">
</path>
</svg>
</div>
<div class="TimelineItem-body">
<div class="js-details-container Details js-socket-channel js-updatable-content"
data-channel="eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OjFiMDAzZWY0NDQ5OGE1MTlmNDQzZDRkNDQzOTlkYTg0ZjVhMGVlNzYiLCJ0IjoxNjE5NjU4MDAzfQ==--fc6903ac9bf07a1532fd65c55e6f521a9d2c0c3f63d5bbca22cb4ddd43cb7073"
data-url="/livewire/livewire/commit/1b003ef44498a519f443d4d44399da84f5a0ee76/_render_node/compare/commit">
<div class="d-flex flex-md-row flex-column">
<div class="d-flex flex-auto">
<div class="AvatarStack flex-self-start ">
<div class="AvatarStack-body" aria-label="driesvints">
<a class="avatar avatar-user" data-skip-pjax="true"
data-hovercard-type="user"
data-hovercard-url="/users/driesvints/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
style="width:20px;height:20px;" href="/driesvints">
<img height="20" width="20" alt="@driesvints"
src="https://avatars.githubusercontent.com/u/594614?s=60&v=4"
class=" avatar-user" />
</a>
</div>
</div>
<div class="pr-1 flex-auto min-width-0">
<code>
<a title="Only return integers for pages (#2409)" data-pjax="true" class="Link--secondary markdown-title" href="/livewire/livewire/commit/1b003ef44498a519f443d4d44399da84f5a0ee76">Only return integers for pages (</a><a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="794312283" data-permission-text="Title is private" data-url="https://github.com/livewire/livewire/issues/2409" data-hovercard-type="pull_request" data-hovercard-url="/livewire/livewire/pull/2409/hovercard" href="https://github.com/livewire/livewire/pull/2409">#2409</a><a title="Only return integers for pages (#2409)" data-pjax="true" class="Link--secondary markdown-title" href="/livewire/livewire/commit/1b003ef44498a519f443d4d44399da84f5a0ee76">)</a>
</code>
</div>
<div class="text-right pr-1 d-md-inline-block d-none">
<batch-deferred-content class="d-inline-block"
data-url="/commits/badges">
<input type="hidden"
value="sPa4rmACsilzkeHzoWi9ucl/4hjwE8URdvT0GQRgpOHsoeg7r9R8IHv3PgOVB0I6mO+8u0S3XbZpBIJznv26+w=="
data-csrf="true" />
<input type="hidden" name="id" id="id"
value="MDY6Q29tbWl0MTcwMzU1NTA4OjFiMDAzZWY0NDQ5OGE1MTlmNDQzZDRkNDQzOTlkYTg0ZjVhMGVlNzY="
data-targets="batch-deferred-content.inputs" />
<input type="hidden" name="badge_size" id="badge_size"
value="small"
data-targets="batch-deferred-content.inputs" />
<input type="hidden" name="dropdown_direction"
id="dropdown_direction" value="w"
data-targets="batch-deferred-content.inputs" />
<span class="Skeleton d-inline-block mr-1"
style="width:75px; height:14px; margin-top:5px;"></span>
</batch-deferred-content>
</div>
<div class="pr-1 flex-shrink-0" style="width: 16px;">
<batch-deferred-content class="d-inline-block"
data-url="/livewire/livewire/commits/checks-statuses-rollups">
<input type="hidden"
value="t6pHYgsF/WrAOFQ5rksxqzROgBOu/AoEu5ubS8WcRVquF7ajDiEdic+uYq/42vLQyHfAKYK6FqA3h5RvNZySAQ=="
data-csrf="true" />
<input type="hidden" name="oid" id="oid"
value="1b003ef44498a519f443d4d44399da84f5a0ee76"
data-targets="batch-deferred-content.inputs" />
<input type="hidden" name="dropdown_direction"
id="dropdown_direction" value="w"
data-targets="batch-deferred-content.inputs" />
<div class="commit-build-statuses">
<span class="Skeleton d-inline-block"
style="width:14px; height:14px; margin-top:5px;"></span>
</div>
</batch-deferred-content>
</div>
<!-- ml-1 is added to accommodate "clock" icon -->
<div class="text-right ml-1">
<code>
<a href="/livewire/livewire/commit/1b003ef44498a519f443d4d44399da84f5a0ee76" class="Link--secondary">1b003ef</a>
</code>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="TimelineItem pb-1">
<div class="TimelineItem-badge">
<svg class="octicon octicon-repo-push" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M1 2.5A2.5 2.5 0 013.5 0h8.75a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0V1.5h-8a1 1 0 00-1 1v6.708A2.492 2.492 0 013.5 9h3.25a.75.75 0 010 1.5H3.5a1 1 0 100 2h5.75a.75.75 0 010 1.5H3.5A2.5 2.5 0 011 11.5v-9zm13.23 7.79a.75.75 0 001.06-1.06l-2.505-2.505a.75.75 0 00-1.06 0L9.22 9.229a.75.75 0 001.06 1.061l1.225-1.224v6.184a.75.75 0 001.5 0V9.066l1.224 1.224z">
</path>
</svg>
</div>
<div class="TimelineItem-body">
Commits on Feb 28, 2021
</div>
</div>
<div class="TimelineItem TimelineItem--condensed">
<div class="TimelineItem-badge">
<svg class="octicon octicon-git-commit" viewBox="0 0 16 16" version="1.1"
width="16" height="16" aria-hidden="true">
<path fill-rule="evenodd"
d="M10.5 7.75a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm1.43.75a4.002 4.002 0 01-7.86 0H.75a.75.75 0 110-1.5h3.32a4.001 4.001 0 017.86 0h3.32a.75.75 0 110 1.5h-3.32z">
</path>
</svg>
</div>
<div class="TimelineItem-body">
<div class="js-details-container Details js-socket-channel js-updatable-content"
data-channel="eyJjIjoicmVwbzoxNzAzNTU1MDg6Y29tbWl0OmY5NDg1ZDJhNDg5ZjE5ZDcxMjhiOTBlMDBlYjRlNDgxOTc1MTliNGIiLCJ0IjoxNjE5NjU4MDAzfQ==--668b3cb663bf6debcc17e59bd0343118e026d6b0d61e4f646237422dc1d22025"
data-url="/livewire/livewire/commit/f9485d2a489f19d7128b90e00eb4e48197519b4b/_render_node/compare/commit">
<div class="d-flex flex-md-row flex-column">
<div class="d-flex flex-auto">
<div class="AvatarStack flex-self-start ">
<div class="AvatarStack-body" aria-label="ncharalampidis">
<a class="avatar avatar-user" data-skip-pjax="true"
data-hovercard-type="user"
data-hovercard-url="/users/ncharalampidis/hovercard"
data-octo-click="hovercard-link-click"
data-octo-dimensions="link_type:self"
style="width:20px;height:20px;"
href="/ncharalampidis">
<img height="20" width="20" alt="@ncharalampidis"
src="https://avatars.githubusercontent.com/u/1126928?s=60&u=a500a2a42786e106607abb172037915ec5e92c77&v=4"
class=" avatar-user" />
</a>
</div>
</div>
<div class="pr-1 flex-auto min-width-0">
<code>
<a title="Remove onNodeAdded event call when matched keyed node moved to new parent" data-pjax="true" class="Link--secondary markdown-title" href="/livewire/livewire/commit/f9485d2a489f19d7128b90e00eb4e48197519b4b">Remove onNodeAdded event call when matched keyed node moved to new pa…</a>
</code>
<span class="hidden-text-expander inline">
<button type="button"
class="ellipsis-expander js-details-target"
aria-expanded="false">…</button>
</span>
</div>
<div class="text-right pr-1 d-md-inline-block d-none">
<batch-deferred-content class="d-inline-block"
data-url="/commits/badges">
<input type="hidden"
value="ulwhI4L0LtV+ntLy9vh3xlOoNzqWILxuVKRtEZnOuE/mC3G2TSLg3Hb4DQLCl4hFAjhpmSKEJMlLVBt7A1OmVQ=="
data-csrf="true" />
<input type="hidden" name="id" id="id"
value="MDY6Q29tbWl0MTcwMzU1NTA4OmY5NDg1ZDJhNDg5ZjE5ZDcxMjhiOTBlMDBlYjRlNDgxOTc1MTliNGI="
data-targets="batch-deferred-content.inputs" />
<input type="hidden" name="badge_size" id="badge_size"
value="small"
data-targets="batch-deferred-content.inputs" />
<input type="hidden" name="dropdown_direction"
id="dropdown_direction" value="w"
data-targets="batch-deferred-content.inputs" />
</batch-deferred-content>
</div>
<div class="pr-1 flex-shrink-0" style="width: 16px;">
<batch-deferred-content class="d-inline-block"
data-url="/livewire/livewire/commits/checks-statuses-rollups">
<input type="hidden"
value="Kvvw8RxHjrDjBqRi9VjT3rFUEuO4rDSh5Ec/3+oOma4zRgEwGWNuU+yQkvSjyRClTW1S2ZTqKAVoWzD7Gg5O9Q=="
data-csrf="true" />
<input type="hidden" name="oid" id="oid"
value="f9485d2a489f19d7128b90e00eb4e48197519b4b"
data-targets="batch-deferred-content.inputs" />
<input type="hidden" name="dropdown_direction"
gitextract_pwh8a3u7/ ├── .claude/ │ └── skills/ │ ├── review-pr/ │ │ └── SKILL.md │ └── summarize-activity/ │ └── SKILL.md ├── .editorconfig ├── .github/ │ ├── FUNDING.yml │ ├── ISSUE_TEMPLATE/ │ │ └── config.yml │ ├── SECURITY.md │ └── workflows/ │ └── run-tests.yml ├── .gitignore ├── CLAUDE.md ├── LICENSE.md ├── README.md ├── benchmarks/ │ ├── giant.html │ ├── init.html │ ├── loop.html │ ├── memory.html │ └── mutation_observer.html ├── cypress.json ├── index.html ├── index2.html ├── jest.config.js ├── morph.html ├── package.json ├── packages/ │ ├── alpinejs/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ ├── alpine.js │ │ ├── binds.js │ │ ├── clone.js │ │ ├── datas.js │ │ ├── directives/ │ │ │ ├── index.js │ │ │ ├── x-bind.js │ │ │ ├── x-cloak.js │ │ │ ├── x-data.js │ │ │ ├── x-effect.js │ │ │ ├── x-for.js │ │ │ ├── x-html.js │ │ │ ├── x-id.js │ │ │ ├── x-if.js │ │ │ ├── x-ignore.js │ │ │ ├── x-init.js │ │ │ ├── x-model.js │ │ │ ├── x-modelable.js │ │ │ ├── x-on.js │ │ │ ├── x-ref.js │ │ │ ├── x-show.js │ │ │ ├── x-teleport.js │ │ │ ├── x-text.js │ │ │ └── x-transition.js │ │ ├── directives.js │ │ ├── entangle.js │ │ ├── evaluator.js │ │ ├── ids.js │ │ ├── index.js │ │ ├── interceptor.js │ │ ├── lifecycle.js │ │ ├── magics/ │ │ │ ├── $data.js │ │ │ ├── $dispatch.js │ │ │ ├── $el.js │ │ │ ├── $id.js │ │ │ ├── $nextTick.js │ │ │ ├── $refs.js │ │ │ ├── $root.js │ │ │ ├── $store.js │ │ │ ├── $watch.js │ │ │ └── index.js │ │ ├── magics.js │ │ ├── mutation.js │ │ ├── nextTick.js │ │ ├── plugin.js │ │ ├── reactivity.js │ │ ├── scheduler.js │ │ ├── scope.js │ │ ├── store.js │ │ └── utils/ │ │ ├── bind.js │ │ ├── classes.js │ │ ├── debounce.js │ │ ├── dispatch.js │ │ ├── error.js │ │ ├── on.js │ │ ├── once.js │ │ ├── styles.js │ │ ├── throttle.js │ │ ├── walk.js │ │ └── warn.js │ ├── anchor/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ ├── collapse/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ ├── csp/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ ├── directives/ │ │ │ └── x-html.js │ │ ├── evaluator.js │ │ ├── index.js │ │ └── parser.js │ ├── docs/ │ │ ├── package.json │ │ └── src/ │ │ └── en/ │ │ ├── advanced/ │ │ │ ├── async.md │ │ │ ├── csp.md │ │ │ ├── extending.md │ │ │ └── reactivity.md │ │ ├── advanced.md │ │ ├── directives/ │ │ │ ├── bind.md │ │ │ ├── cloak.md │ │ │ ├── data.md │ │ │ ├── effect.md │ │ │ ├── for.md │ │ │ ├── html.md │ │ │ ├── id.md │ │ │ ├── if.md │ │ │ ├── ignore.md │ │ │ ├── init.md │ │ │ ├── model.md │ │ │ ├── modelable.md │ │ │ ├── on.md │ │ │ ├── ref.md │ │ │ ├── show.md │ │ │ ├── teleport.md │ │ │ ├── text.md │ │ │ └── transition.md │ │ ├── directives.md │ │ ├── essentials/ │ │ │ ├── events.md │ │ │ ├── installation.md │ │ │ ├── lifecycle.md │ │ │ ├── state.md │ │ │ └── templating.md │ │ ├── essentials.md │ │ ├── globals/ │ │ │ ├── alpine-bind.md │ │ │ ├── alpine-data.md │ │ │ └── alpine-store.md │ │ ├── globals.md │ │ ├── magics/ │ │ │ ├── data.md │ │ │ ├── dispatch.md │ │ │ ├── el.md │ │ │ ├── id.md │ │ │ ├── nextTick.md │ │ │ ├── refs.md │ │ │ ├── root.md │ │ │ ├── store.md │ │ │ └── watch.md │ │ ├── magics.md │ │ ├── plugins/ │ │ │ ├── anchor.md │ │ │ ├── collapse.md │ │ │ ├── focus.md │ │ │ ├── intersect.md │ │ │ ├── mask.md │ │ │ ├── morph.md │ │ │ ├── persist.md │ │ │ ├── resize.md │ │ │ └── sort.md │ │ ├── plugins.md │ │ ├── start-here.md │ │ └── upgrade-guide.md │ ├── focus/ │ │ ├── .gitignore │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ ├── history/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ ├── intersect/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ ├── mask/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ ├── morph/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ ├── index.js │ │ ├── morph.js │ │ └── old_morph.js │ ├── navigate/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ ├── persist/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ ├── resize/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ ├── sort/ │ │ ├── builds/ │ │ │ ├── cdn.js │ │ │ └── module.js │ │ ├── package.json │ │ └── src/ │ │ └── index.js │ └── ui/ │ ├── builds/ │ │ ├── cdn.js │ │ └── module.js │ ├── demo/ │ │ ├── index.html │ │ └── listbox/ │ │ ├── data-driven.html │ │ ├── index.html │ │ └── multiple.html │ ├── package.json │ └── src/ │ ├── combobox.js │ ├── dialog.js │ ├── disclosure.js │ ├── index.js │ ├── list-context.js │ ├── listbox.js │ ├── menu.js │ ├── popover.js │ ├── radio.js │ ├── switch.js │ └── tabs.js ├── scripts/ │ ├── build.js │ ├── cleanup-worktree.sh │ ├── release.js │ ├── setup.sh │ ├── update-docs.js │ ├── utils.js │ └── worktree.sh ├── tests/ │ ├── cypress/ │ │ ├── .gitignore │ │ ├── fixtures/ │ │ │ └── example.json │ │ ├── integration/ │ │ │ ├── clone.spec.js │ │ │ ├── custom-bind.spec.js │ │ │ ├── custom-data.spec.js │ │ │ ├── custom-directives.spec.js │ │ │ ├── custom-interceptors.spec.js │ │ │ ├── custom-magics.spec.js │ │ │ ├── custom-prefix.spec.js │ │ │ ├── directives/ │ │ │ │ ├── x-bind-class.spec.js │ │ │ │ ├── x-bind-style.spec.js │ │ │ │ ├── x-bind.spec.js │ │ │ │ ├── x-cloak.spec.js │ │ │ │ ├── x-data.spec.js │ │ │ │ ├── x-for.spec.js │ │ │ │ ├── x-html.spec.js │ │ │ │ ├── x-if.spec.js │ │ │ │ ├── x-ignore.spec.js │ │ │ │ ├── x-init.spec.js │ │ │ │ ├── x-model.spec.js │ │ │ │ ├── x-modelable.spec.js │ │ │ │ ├── x-on.spec.js │ │ │ │ ├── x-show.spec.js │ │ │ │ ├── x-teleport.spec.js │ │ │ │ ├── x-text.spec.js │ │ │ │ └── x-transition.spec.js │ │ │ ├── entangle.spec.js │ │ │ ├── error-handling.spec.js │ │ │ ├── magics/ │ │ │ │ ├── $data.spec.js │ │ │ │ ├── $dispatch.spec.js │ │ │ │ ├── $el.spec.js │ │ │ │ ├── $id.spec.js │ │ │ │ ├── $nextTick.spec.js │ │ │ │ ├── $refs.spec.js │ │ │ │ ├── $root.spec.js │ │ │ │ └── $watch.spec.js │ │ │ ├── mutation.spec.js │ │ │ ├── plugins/ │ │ │ │ ├── anchor.spec.js │ │ │ │ ├── collapse.spec.js │ │ │ │ ├── csp-compatibility.spec.js │ │ │ │ ├── focus.spec.js │ │ │ │ ├── history.spec.js │ │ │ │ ├── intersect.spec.js │ │ │ │ ├── mask.spec.js │ │ │ │ ├── morph.spec.js │ │ │ │ ├── navigate.spec.js │ │ │ │ ├── persist.spec.js │ │ │ │ ├── resize.spec.js │ │ │ │ ├── sort.spec.js │ │ │ │ └── ui/ │ │ │ │ ├── combobox.spec.js │ │ │ │ ├── dialog.spec.js │ │ │ │ ├── disclosure.spec.js │ │ │ │ ├── listbox.spec.js │ │ │ │ ├── menu.spec.js │ │ │ │ ├── popover.spec.js │ │ │ │ ├── radio.spec.js │ │ │ │ ├── switch.spec.js │ │ │ │ └── tabs.spec.js │ │ │ ├── scope.spec.js │ │ │ └── store.spec.js │ │ ├── manual-memory.html │ │ ├── manual-transition-test.html │ │ ├── plugins/ │ │ │ └── index.js │ │ ├── spec-csp.html │ │ ├── spec.html │ │ ├── support/ │ │ │ ├── commands.js │ │ │ ├── drag.js │ │ │ └── index.js │ │ └── utils.js │ └── vitest/ │ ├── csp-evaluator.spec.js │ ├── csp-parser.spec.js │ ├── evaluator.spec.js │ └── mask.spec.js └── vitest.config.js
SYMBOL INDEX (446 symbols across 72 files)
FILE: packages/alpinejs/src/alpine.js
method reactive (line 25) | get reactive() { return reactive }
method release (line 26) | get release() { return release }
method effect (line 27) | get effect() { return effect }
method raw (line 28) | get raw() { return raw }
method transaction (line 29) | get transaction() { return transaction }
FILE: packages/alpinejs/src/binds.js
function bind (line 5) | function bind(name, bindings) {
function injectBindingProviders (line 17) | function injectBindingProviders(obj) {
function addVirtualBindings (line 31) | function addVirtualBindings(el, bindings) {
function applyBindingsObject (line 37) | function applyBindingsObject(el, obj, original) {
FILE: packages/alpinejs/src/clone.js
function skipDuringClone (line 7) | function skipDuringClone(callback, fallback = () => {}) {
function onlyDuringClone (line 11) | function onlyDuringClone(callback) {
function interceptClone (line 17) | function interceptClone(callback) {
function cloneNode (line 21) | function cloneNode(from, to)
function clone (line 44) | function clone(oldEl, newEl) {
function cloneTree (line 59) | function cloneTree(el) {
function dontRegisterReactiveSideEffects (line 75) | function dontRegisterReactiveSideEffects(callback) {
FILE: packages/alpinejs/src/datas.js
function data (line 4) | function data(name, callback) {
function injectDataProviders (line 8) | function injectDataProviders(obj, context) {
FILE: packages/alpinejs/src/directives.js
function prefix (line 8) | function prefix(subject = '') {
function setPrefix (line 12) | function setPrefix(newPrefix) {
function directive (line 18) | function directive(name, callback) {
function directiveExists (line 33) | function directiveExists(name) {
function directives (line 37) | function directives(el, attributes, originalAttributeOverride) {
function attributesOnly (line 73) | function attributesOnly(attributes) {
function deferHandlingDirectives (line 83) | function deferHandlingDirectives(callback) {
function getElementBoundUtilities (line 105) | function getElementBoundUtilities(el) {
function getDirectiveHandler (line 127) | function getDirectiveHandler(el, directive) {
function toTransformedAttributes (line 159) | function toTransformedAttributes(callback = () => {}) {
function mapAttributes (line 173) | function mapAttributes(callback) {
function outNonAlpineAttributes (line 177) | function outNonAlpineAttributes({ name }) {
function toParsedDirectives (line 183) | function toParsedDirectives(transformedAttributeMap, originalAttributeOv...
constant DEFAULT (line 204) | const DEFAULT = 'DEFAULT'
function byPriority (line 224) | function byPriority(a, b) {
FILE: packages/alpinejs/src/directives/index.js
function warnMissingPluginDirective (line 29) | function warnMissingPluginDirective(name, directiveName, slug) {
FILE: packages/alpinejs/src/directives/x-bind.js
function storeKeyForXFor (line 58) | function storeKeyForXFor(el, expression) {
FILE: packages/alpinejs/src/directives/x-data.js
function shouldSkipRegisteringDataDuringClone (line 62) | function shouldSkipRegisteringDataDuringClone(el) {
FILE: packages/alpinejs/src/directives/x-for.js
function refreshScope (line 36) | function refreshScope(scope) {
function loop (line 44) | function loop(templateEl, iteratorNames, evaluateItems, evaluateKey) {
function parseForExpression (line 131) | function parseForExpression(expression) {
function getIterationScopeVariables (line 158) | function getIterationScopeVariables(iteratorNames, item, index, items) {
function isNumeric (line 187) | function isNumeric(subject){
function isObject (line 191) | function isObject(subject) {
FILE: packages/alpinejs/src/directives/x-model.js
method get (line 145) | get() {
method set (line 148) | set(value) {
function getInputValue (line 177) | function getInputValue(el, modifiers, event, currentValue) {
function safeParseNumber (line 245) | function safeParseNumber(rawValue) {
function checkedAttrLooseCompare (line 251) | function checkedAttrLooseCompare(valueA, valueB) {
function isNumeric (line 255) | function isNumeric(subject){
function isGetterSetter (line 259) | function isGetterSetter(value) {
FILE: packages/alpinejs/src/directives/x-modelable.js
method get (line 28) | get() { return outerGet() }
method set (line 29) | set(value) { outerSet(value) }
method get (line 32) | get() { return innerGet() }
method set (line 33) | set(value) { innerSet(value) }
FILE: packages/alpinejs/src/directives/x-ref.js
function handler (line 5) | function handler () {}
FILE: packages/alpinejs/src/directives/x-teleport.js
function getTarget (line 75) | function getTarget(expression) {
FILE: packages/alpinejs/src/directives/x-transition.js
function registerTransitionsFromClassString (line 18) | function registerTransitionsFromClassString(el, classString, stage) {
function registerTransitionsFromHelper (line 33) | function registerTransitionsFromHelper(el, modifiers, stage) {
function registerTransitionObject (line 101) | function registerTransitionObject(el, setFunction, defaultValue = {}) {
function closestHide (line 192) | function closestHide(el) {
function transition (line 200) | function transition(el, setFunction, { during, start, end } = {}, before...
function performTransition (line 232) | function performTransition(el, stages) {
function modifierValue (line 305) | function modifierValue(modifiers, key, fallback) {
FILE: packages/alpinejs/src/entangle.js
function entangle (line 3) | function entangle({ get: outerGet, set: outerSet }, { get: innerGet, set...
function cloneIfObject (line 37) | function cloneIfObject(value) {
FILE: packages/alpinejs/src/evaluator.js
function dontAutoEvaluateFunctions (line 7) | function dontAutoEvaluateFunctions(callback) {
function evaluate (line 19) | function evaluate(el, expression, extras = {}) {
function evaluateLater (line 27) | function evaluateLater(...args) {
function setEvaluator (line 33) | function setEvaluator(newEvaluator) {
function setRawEvaluator (line 39) | function setRawEvaluator(newEvaluator) {
function normalEvaluator (line 43) | function normalEvaluator(el, expression) {
function generateEvaluatorFromFunction (line 57) | function generateEvaluatorFromFunction(dataStack, func) {
function generateFunctionFromString (line 74) | function generateFunctionFromString(expression, el) {
function generateEvaluatorFromString (line 116) | function generateEvaluatorFromString(dataStack, expression, el) {
function runIfTypeOfFunction (line 150) | function runIfTypeOfFunction(receiver, value, scope, params, el) {
function evaluateRaw (line 166) | function evaluateRaw(...args) {
function normalRawEvaluator (line 170) | function normalRawEvaluator(el, expression, extras = {}) {
FILE: packages/alpinejs/src/ids.js
function findAndIncrementId (line 5) | function findAndIncrementId(name) {
function closestIdRoot (line 11) | function closestIdRoot(el, name) {
function setIdRoot (line 17) | function setIdRoot(el, name) {
FILE: packages/alpinejs/src/interceptor.js
function initInterceptors (line 4) | function initInterceptors(data) {
function interceptor (line 28) | function interceptor(callback, mutateObj = () => {}) {
function get (line 61) | function get(obj, path) {
function set (line 65) | function set(obj, path, value) {
FILE: packages/alpinejs/src/lifecycle.js
function start (line 9) | function start() {
function rootSelectors (line 45) | function rootSelectors() {
function allSelectors (line 49) | function allSelectors() {
function addRootSelector (line 53) | function addRootSelector(selectorCallback) { rootSelectorCallbacks.push(...
function addInitSelector (line 54) | function addInitSelector(selectorCallback) { initSelectorCallbacks.push(...
function closestRoot (line 56) | function closestRoot(el, includeInitSelectors = false) {
function findClosest (line 64) | function findClosest(el, callback) {
function isRoot (line 80) | function isRoot(el) {
function interceptInit (line 86) | function interceptInit(callback) { initInterceptors.push(callback) }
function initTree (line 90) | function initTree(el, walker = walk, intercept = () => {}) {
function destroyTree (line 115) | function destroyTree(root, walker = walk) {
function warnAboutMissingPlugins (line 123) | function warnAboutMissingPlugins() {
FILE: packages/alpinejs/src/magics.js
function magic (line 7) | function magic(name, callback) {
function injectMagics (line 11) | function injectMagics(obj, el) {
function getUtilities (line 26) | function getUtilities(el) {
FILE: packages/alpinejs/src/magics/$id.js
function cacheIdByNameOnElement (line 30) | function cacheIdByNameOnElement(el, cacheKey, cleanup, callback)
FILE: packages/alpinejs/src/magics/$refs.js
function getArrayOfRefObject (line 13) | function getArrayOfRefObject(el) {
FILE: packages/alpinejs/src/magics/index.js
function warnMissingPluginMagic (line 18) | function warnMissingPluginMagic(name, magicName, slug) {
FILE: packages/alpinejs/src/mutation.js
function onElAdded (line 6) | function onElAdded(callback) {
function onElRemoved (line 10) | function onElRemoved(el, callback) {
function onAttributesAdded (line 20) | function onAttributesAdded(callback) {
function onAttributeRemoved (line 24) | function onAttributeRemoved(el, name, callback) {
function cleanupAttributes (line 31) | function cleanupAttributes(el, names) {
function cleanupElement (line 43) | function cleanupElement(el) {
function startObservingMutations (line 53) | function startObservingMutations() {
function stopObservingMutations (line 59) | function stopObservingMutations() {
function flushObserver (line 69) | function flushObserver() {
function mutateDom (line 87) | function mutateDom(callback) {
function deferMutations (line 102) | function deferMutations() {
function flushAndStopDeferringMutations (line 106) | function flushAndStopDeferringMutations() {
function onMutate (line 114) | function onMutate(mutations) {
FILE: packages/alpinejs/src/nextTick.js
function nextTick (line 6) | function nextTick(callback = () => {}) {
function releaseNextTicks (line 21) | function releaseNextTicks() {
function holdNextTicks (line 27) | function holdNextTicks() {
FILE: packages/alpinejs/src/plugin.js
function plugin (line 3) | function plugin(callback) {
FILE: packages/alpinejs/src/reactivity.js
function disableEffectScheduling (line 7) | function disableEffectScheduling(callback) {
function setReactivityEngine (line 15) | function setReactivityEngine(engine) {
function overrideEffect (line 28) | function overrideEffect(override) { effect = override }
function elementBoundEffect (line 30) | function elementBoundEffect(el) {
function watch (line 59) | function watch(getter, callback) {
function transaction (line 100) | async function transaction(callback) {
FILE: packages/alpinejs/src/scheduler.js
function scheduler (line 8) | function scheduler (callback) { queueJob(callback) }
function startTransaction (line 10) | function startTransaction() {
function commitTransaction (line 14) | function commitTransaction() {
function queueJob (line 19) | function queueJob(job) {
function dequeueJob (line 24) | function dequeueJob(job) {
function queueFlush (line 30) | function queueFlush() {
function flushJobs (line 40) | function flushJobs() {
FILE: packages/alpinejs/src/scope.js
function scope (line 2) | function scope(node) {
function addScopeToNode (line 6) | function addScopeToNode(node, data, referenceNode) {
function hasScope (line 14) | function hasScope(node) {
function closestDataStack (line 18) | function closestDataStack(node) {
function closestDataProxy (line 32) | function closestDataProxy(el) {
function mergeProxies (line 36) | function mergeProxies (objects) {
function keyInPrototypeChain (line 40) | function keyInPrototypeChain(obj, key) {
method ownKeys (line 48) | ownKeys({ objects }) {
method has (line 54) | has({ objects }, name) {
method get (line 63) | get({ objects }, name, thisProxy) {
method set (line 75) | set({ objects }, name, value, thisProxy) {
function collapseProxies (line 90) | function collapseProxies() {
FILE: packages/alpinejs/src/store.js
function store (line 7) | function store(name, value) {
function getStores (line 23) | function getStores() { return stores }
FILE: packages/alpinejs/src/utils/bind.js
function bind (line 6) | function bind(el, name, value, modifiers = []) {
function bindInputValue (line 41) | function bindInputValue(el, value) {
function bindClasses (line 82) | function bindClasses(el, value) {
function bindStyles (line 88) | function bindStyles(el, value) {
function bindAttributeAndProperty (line 94) | function bindAttributeAndProperty(el, name, value) {
function bindAttribute (line 99) | function bindAttribute(el, name, value) {
function setIfChanged (line 109) | function setIfChanged(el, attrName, value) {
function setPropertyIfChanged (line 115) | function setPropertyIfChanged(el, propName, value) {
function updateSelect (line 121) | function updateSelect(el, value) {
function camelCase (line 129) | function camelCase(subject) {
function checkedAttrLooseCompare (line 133) | function checkedAttrLooseCompare(valueA, valueB) {
function safeParseBoolean (line 137) | function safeParseBoolean(rawValue) {
function isBooleanAttr (line 180) | function isBooleanAttr(attrName) {
function attributeShouldntBePreservedIfFalsy (line 184) | function attributeShouldntBePreservedIfFalsy(name) {
function getBinding (line 188) | function getBinding(el, name, fallback) {
function extractProp (line 195) | function extractProp(el, name, fallback, extract = true) {
function getAttributeBinding (line 212) | function getAttributeBinding(el, name, fallback) {
function isCheckbox (line 229) | function isCheckbox(el) {
function isRadio (line 233) | function isRadio(el) {
FILE: packages/alpinejs/src/utils/classes.js
function setClasses (line 2) | function setClasses(el, value) {
function splitClasses (line 14) | function splitClasses(classString) {
function setClassesFromString (line 18) | function setClassesFromString(el, classString) {
function setClassesFromObject (line 33) | function setClassesFromObject(el, classObject) {
FILE: packages/alpinejs/src/utils/debounce.js
function debounce (line 2) | function debounce(func, wait) {
FILE: packages/alpinejs/src/utils/dispatch.js
function dispatch (line 2) | function dispatch(el, name, detail = {}, options = {}) {
FILE: packages/alpinejs/src/utils/error.js
function tryCatch (line 1) | function tryCatch(el, expression, callback, ...args) {
function handleError (line 9) | function handleError(...args) {
function setErrorHandler (line 15) | function setErrorHandler(handler) {
function normalErrorHandler (line 19) | function normalErrorHandler(error , el, expression = undefined) {
FILE: packages/alpinejs/src/utils/on.js
function on (line 4) | function on (el, event, modifiers, callback) {
function addDebounceOrThrottle (line 92) | function addDebounceOrThrottle(modifiers, handler) {
function dotSyntax (line 108) | function dotSyntax(subject) {
function camelCase (line 112) | function camelCase(subject) {
function isNumeric (line 116) | function isNumeric(subject){
function kebabCase (line 120) | function kebabCase(subject) {
function isKeyEvent (line 126) | function isKeyEvent(event) {
function isClickEvent (line 130) | function isClickEvent(event) {
function isListeningForASpecificKeyThatHasntBeenPressed (line 134) | function isListeningForASpecificKeyThatHasntBeenPressed(e, modifiers) {
function keyToModifiers (line 186) | function keyToModifiers(key) {
FILE: packages/alpinejs/src/utils/once.js
function once (line 2) | function once(callback, fallback = () => {}) {
FILE: packages/alpinejs/src/utils/styles.js
function setStyles (line 2) | function setStyles(el, value) {
function setStylesFromObject (line 10) | function setStylesFromObject(el, value) {
function setStylesFromString (line 38) | function setStylesFromString(el, value) {
function kebabCase (line 48) | function kebabCase(subject) {
FILE: packages/alpinejs/src/utils/throttle.js
function throttle (line 2) | function throttle(func, limit) {
FILE: packages/alpinejs/src/utils/walk.js
function walk (line 1) | function walk(el, callback) {
FILE: packages/alpinejs/src/utils/warn.js
function warn (line 2) | function warn(message, ...args) {
FILE: packages/anchor/src/index.js
function setStyles (line 72) | function setStyles(el, x, y) {
function getOptions (line 78) | function getOptions(modifiers) {
FILE: packages/collapse/src/index.js
function collapse (line 13) | function collapse(el, { modifiers }) {
function modifierValue (line 86) | function modifierValue(modifiers, key, fallback) {
FILE: packages/csp/src/evaluator.js
function cspRawEvaluator (line 7) | function cspRawEvaluator(el, expression, extras = {}) {
function cspEvaluator (line 29) | function cspEvaluator(el, expression) {
function generateDataStack (line 42) | function generateDataStack(el) {
function generateEvaluator (line 50) | function generateEvaluator(el, expression, dataStack) {
FILE: packages/csp/src/parser.js
class Token (line 11) | class Token {
method constructor (line 12) | constructor(type, value, start, end) {
class Tokenizer (line 20) | class Tokenizer {
method constructor (line 21) | constructor(input) {
method tokenize (line 27) | tokenize() {
method skipWhitespace (line 51) | skipWhitespace() {
method skipLineComment (line 57) | skipLineComment() {
method isDigit (line 63) | isDigit(char) {
method isAlpha (line 67) | isAlpha(char) {
method isAlphaNumeric (line 71) | isAlphaNumeric(char) {
method peek (line 75) | peek(offset = 1) {
method readNumber (line 79) | readNumber() {
method readIdentifierOrKeyword (line 99) | readIdentifierOrKeyword() {
method readString (line 124) | readString() {
method readOperatorOrPunctuation (line 161) | readOperatorOrPunctuation() {
class Parser (line 210) | class Parser {
method constructor (line 211) | constructor(tokens) {
method parse (line 216) | parse() {
method parseExpression (line 231) | parseExpression() {
method parseAssignment (line 235) | parseAssignment() {
method parseTernary (line 254) | parseTernary() {
method parseLogicalOr (line 272) | parseLogicalOr() {
method parseLogicalAnd (line 289) | parseLogicalAnd() {
method parseEquality (line 306) | parseEquality() {
method parseRelational (line 323) | parseRelational() {
method parseAdditive (line 340) | parseAdditive() {
method parseMultiplicative (line 357) | parseMultiplicative() {
method parseUnary (line 374) | parseUnary() {
method parsePostfix (line 402) | parsePostfix() {
method parseMember (line 419) | parseMember() {
method parseArguments (line 455) | parseArguments() {
method parsePrimary (line 468) | parsePrimary() {
method parseArrayLiteral (line 519) | parseArrayLiteral() {
method parseObjectLiteral (line 541) | parseObjectLiteral() {
method match (line 589) | match(...args) {
method check (line 614) | check(type, value) {
method checkType (line 622) | checkType(type) {
method advance (line 627) | advance() {
method isAtEnd (line 632) | isAtEnd() {
method current (line 636) | current() {
method previous (line 640) | previous() {
method consume (line 644) | consume(type, value) {
class Evaluator (line 654) | class Evaluator {
method evaluate (line 655) | evaluate({ node, scope = {}, context = null, forceBindingRootScopeToFu...
method checkForDangerousKeywords (line 871) | checkForDangerousKeywords(keyword) {
method checkForDangerousValues (line 883) | checkForDangerousValues(prop) {
function generateRuntimeFunction (line 910) | function generateRuntimeFunction(expression) {
FILE: packages/focus/src/index.js
method within (line 19) | within(el) { within = el; return this }
method withoutScrolling (line 20) | withoutScrolling() { this.__noscroll = true; return this }
method noscroll (line 21) | noscroll() { this.__noscroll = true; return this }
method withWrapAround (line 22) | withWrapAround() { this.__wrapAround = true; return this }
method wrap (line 23) | wrap() { return this.withWrapAround() }
method focusable (line 24) | focusable(el) {
method previouslyFocused (line 27) | previouslyFocused() {
method lastFocused (line 30) | lastFocused() {
method focused (line 33) | focused() {
method focusables (line 36) | focusables() {
method all (line 41) | all() { return this.focusables() }
method isFirst (line 42) | isFirst(el) {
method isLast (line 47) | isLast(el) {
method getFirst (line 52) | getFirst() { return this.all()[0] }
method getLast (line 53) | getLast() { return this.all().slice(-1)[0] }
method getNext (line 54) | getNext() {
method getPrevious (line 68) | getPrevious() {
method first (line 82) | first() { this.focus(this.getFirst()) }
method last (line 83) | last() { this.focus(this.getLast()) }
method next (line 84) | next() { this.focus(this.getNext()) }
method previous (line 85) | previous() { this.focus(this.getPrevious()) }
method prev (line 86) | prev() { return this.previous() }
method focus (line 87) | focus(el) {
function setInert (line 177) | function setInert(el) {
function crawlSiblingsUp (line 193) | function crawlSiblingsUp(el, callback) {
function disableScrolling (line 205) | function disableScrolling() {
FILE: packages/intersect/src/index.js
function getThreshold (line 29) | function getThreshold(modifiers) {
function getLengthValue (line 42) | function getLengthValue(rawValue) {
function getRootMargin (line 48) | function getRootMargin(modifiers) {
FILE: packages/mask/src/index.js
function processInputValue (line 84) | function processInputValue (el, shouldRestoreCursor = true) {
function restoreCursorPosition (line 115) | function restoreCursorPosition(el, template, callback) {
function formatInput (line 136) | function formatInput(template, input) {
function formatMoney (line 168) | function formatMoney(input, delimiter = '.', thousands, precision = 2) {
FILE: packages/morph/src/morph.js
function morph (line 5) | function morph(from, toHtml, options) {
function morphBetween (line 33) | function morphBetween(startMarker, endMarker, toHtml, options = {}) {
function createMorphContext (line 68) | function createMorphContext(options = {}) {
function shouldSkip (line 439) | function shouldSkip(hook, ...args) {
function shouldSkipChildren (line 452) | function shouldSkipChildren(hook, skipChildren, skipUntil, ...args) {
function createElement (line 460) | function createElement(html) {
function textOrComment (line 466) | function textOrComment(el) {
class Block (line 474) | class Block {
method constructor (line 475) | constructor(start, end) {
method children (line 481) | get children() {
method appendChild (line 495) | appendChild(child) {
method firstChild (line 499) | get firstChild() {
method nextNode (line 507) | nextNode(reference) {
method insertBefore (line 515) | insertBefore(newNode, reference) {
function getFirstNode (line 522) | function getFirstNode(parent) {
function getNextSibling (line 526) | function getNextSibling(parent, reference) {
function monkeyPatchDomSetAttributeToAllowAtSymbols (line 538) | function monkeyPatchDomSetAttributeToAllowAtSymbols() {
function seedingMatchingId (line 567) | function seedingMatchingId(to, from) {
FILE: packages/morph/src/old_morph.js
function morph (line 7) | async function morph(from, toHtml, options) {
function shouldSkip (line 388) | function shouldSkip(hook, ...args) {
function initializeAlpineOnTo (line 396) | function initializeAlpineOnTo(from, to, childrenOnly) {
FILE: packages/persist/src/index.js
function storageHas (line 63) | function storageHas(key, storage) {
function storageGet (line 67) | function storageGet(key, storage) {
function storageSet (line 75) | function storageSet(key, value, storage) {
FILE: packages/resize/src/index.js
function onElResize (line 17) | function onElResize(el, callback) {
function onDocumentResize (line 32) | function onDocumentResize(callback) {
function dimensions (line 50) | function dimensions(entries) {
FILE: packages/sort/src/index.js
function generateSortHandler (line 45) | function generateSortHandler(expression, evaluate) {
function getConfigurationOverrides (line 62) | function getConfigurationOverrides(el, modifiers, evaluate)
function initSortable (line 75) | function initSortable(el, config, preferences, handle) {
function keepElementsWithinMorphMarkers (line 159) | function keepElementsWithinMorphMarkers(el) {
function getGroupName (line 172) | function getGroupName(el, modifiers)
FILE: packages/ui/src/combobox.js
method value (line 17) | get value() {
method isOpen (line 20) | get isOpen() {
method isDisabled (line 23) | get isDisabled() {
method activeOption (line 26) | get activeOption() {
method activeIndex (line 31) | get activeIndex() {
method isActive (line 55) | get isActive() {
method isSelected (line 58) | get isSelected() {
method isDisabled (line 61) | get isDisabled() {
function handleRoot (line 68) | function handleRoot(el, Alpine) {
function handleInput (line 285) | function handleInput(el, Alpine) {
function handleButton (line 372) | function handleButton(el, Alpine) {
function handleLabel (line 407) | function handleLabel(el, Alpine) {
function handleOptions (line 415) | function handleOptions(el, Alpine) {
function handleOption (line 438) | function handleOption(el, Alpine) {
function microtask (line 508) | function microtask(callback) {
FILE: packages/ui/src/dialog.js
method open (line 16) | get open() {
method isOpen (line 19) | get isOpen() {
method close (line 22) | close() {
function handleRoot (line 29) | function handleRoot(el, Alpine) {
function handleOverlay (line 69) | function handleOverlay(el, Alpine) {
function handlePanel (line 77) | function handlePanel(el, Alpine) {
function handleTitle (line 84) | function handleTitle(el, Alpine) {
function handleDescription (line 91) | function handleDescription(el, Alpine) {
FILE: packages/ui/src/disclosure.js
method isOpen (line 13) | get isOpen() {
method close (line 16) | close() {
function handleRoot (line 23) | function handleRoot(el, Alpine) {
function handleButton (line 49) | function handleButton(el, Alpine) {
function handlePanel (line 72) | function handlePanel(el, Alpine) {
FILE: packages/ui/src/list-context.js
function generateContext (line 2) | function generateContext(Alpine, multiple, orientation, activateSelected...
function keyByValue (line 360) | function keyByValue(object, value) {
function renderHiddenInputs (line 364) | function renderHiddenInputs(Alpine, el, name, value) {
function generateInputs (line 394) | function generateInputs(name, value, carry = []) {
function isObjectOrArray (line 414) | function isObjectOrArray(subject) {
function switchboard (line 418) | function switchboard(value) {
FILE: packages/ui/src/listbox.js
method selected (line 17) | get selected() {
method active (line 21) | get active() {
method value (line 26) | get value() {
method isOpen (line 29) | get isOpen() {
method isDisabled (line 32) | get isDisabled() {
method activeOption (line 35) | get activeOption() {
method activeIndex (line 40) | get activeIndex() {
method isActive (line 60) | get isActive() {
method isSelected (line 63) | get isSelected() {
method isDisabled (line 66) | get isDisabled() {
function handleRoot (line 73) | function handleRoot(el, Alpine) {
function handleLabel (line 250) | function handleLabel(el, Alpine) {
function handleButton (line 258) | function handleButton(el, Alpine) {
function handleOptions (line 288) | function handleOptions(el, Alpine) {
function handleOption (line 339) | function handleOption(el, Alpine) {
function microtask (line 386) | function microtask(callback) {
FILE: packages/ui/src/menu.js
method isActive (line 13) | get isActive() {
method isDisabled (line 16) | get isDisabled() {
function handleRoot (line 23) | function handleRoot(el, Alpine) {
function handleButton (line 64) | function handleButton(el, Alpine) {
function handleItems (line 87) | function handleItems(el, Alpine) {
function handleItem (line 121) | function handleItem(el, Alpine) {
method first (line 176) | first(Alpine, parent, receive = i => i, fallback = () => { }) {
method last (line 189) | last(Alpine, parent, receive = i => i, fallback = () => { }) {
method next (line 196) | next(Alpine, el, receive = i => i, fallback = () => { }) {
method previous (line 206) | previous(Alpine, el, receive = i => i, fallback = () => { }) {
method clearSearch (line 218) | clearSearch(Alpine) {
method search (line 225) | search(Alpine, parent, key, receiver) {
FILE: packages/ui/src/popover.js
method isOpen (line 15) | get isOpen() {
method open (line 18) | open() {
method close (line 21) | close() {
function handleRoot (line 28) | function handleRoot(el, Alpine) {
function handleButton (line 97) | function handleButton(el, Alpine) {
function handlePanel (line 148) | function handlePanel(el, Alpine) {
function handleGroup (line 194) | function handleGroup(el, Alpine) {
function handleOverlay (line 205) | function handleOverlay(el, Alpine) {
FILE: packages/ui/src/radio.js
method isActive (line 14) | get isActive() {
method isChecked (line 17) | get isChecked() {
method isDisabled (line 20) | get isDisabled() {
function handleRoot (line 31) | function handleRoot(el, Alpine) {
function handleOption (line 162) | function handleOption(el, Alpine) {
function handleLabel (line 208) | function handleLabel(el, Alpine) {
function handleDescription (line 215) | function handleDescription(el, Alpine) {
FILE: packages/ui/src/switch.js
method isChecked (line 14) | get isChecked() {
function handleGroup (line 21) | function handleGroup(el, Alpine) {
function handleRoot (line 34) | function handleRoot(el, Alpine) {
function handleLabel (line 100) | function handleLabel(el, Alpine) {
function handleDescription (line 111) | function handleDescription(el, Alpine) {
FILE: packages/ui/src/tabs.js
method isSelected (line 15) | get isSelected() {
method isDisabled (line 18) | get isDisabled() {
method isSelected (line 28) | get isSelected() {
function handleRoot (line 35) | function handleRoot(el, Alpine) {
function handleList (line 71) | function handleList(el, Alpine) {
function handleTab (line 77) | function handleTab(el, Alpine) {
function handlePanels (line 127) | function handlePanels(el, Alpine) {
function handlePanel (line 133) | function handlePanel(el, Alpine) {
FILE: scripts/build.js
function bundleFile (line 33) | function bundleFile(package, file) {
function build (line 82) | function build(options) {
function outputSize (line 96) | function outputSize(package, file) {
function bytesToSize (line 102) | function bytesToSize(bytes) {
FILE: scripts/release.js
function writeNewAlpineVersion (line 31) | function writeNewAlpineVersion() {
function buildAssets (line 78) | function buildAssets() {
function publish (line 83) | function publish() {
function draftRelease (line 126) | async function draftRelease(name, after = () => {}) {
function getLastRelease (line 152) | async function getLastRelease() {
function getPullRequestsSince (line 163) | async function getPullRequestsSince(since) {
function tagNewRelease (line 175) | function tagNewRelease(name, content, after = () => {}) {
FILE: scripts/update-docs.js
function deploy (line 21) | function deploy() {
FILE: tests/cypress/integration/error-handling.spec.js
function setupConsoleInterceptor (line 3) | function setupConsoleInterceptor( ...targetIds ) {
function assertConsoleInterceptorHadErrorWithCorrectElement (line 18) | function assertConsoleInterceptorHadErrorWithCorrectElement() {
FILE: tests/cypress/integration/plugins/morph.spec.js
method key (line 283) | key(el) {return el.dataset.key}
method key (line 401) | key(el) { return el.id }
method key (line 579) | key(el) { return el.id }
method key (line 769) | key(el) { return el.getAttribute('key') }
method key (line 815) | key(el) { return el.dataset.id }
method removing (line 859) | removing(el) {
method adding (line 862) | adding(el) {
method updating (line 1051) | updating(from, to, childrenOnly, skip, skipChildren, skipUntil) {
FILE: tests/cypress/support/drag.js
function omit (line 9) | function omit(object = {}, keys = []) {
function isAttached (line 13) | function isAttached(element) {
method rectsEqual (line 22) | rectsEqual(r1, r2) {
method createDefaultOptions (line 25) | createDefaultOptions(options) {
method dropped (line 31) | get dropped() {
method hasTriesLeft (line 35) | get hasTriesLeft() {
method target (line 38) | set target(target) {
method target (line 41) | get target() {
method dragstart (line 44) | dragstart(clientPosition = {}) {
method drop (line 63) | drop(clientPosition = {}) {
method dragover (line 94) | dragover(clientPosition = {}) {
method init (line 123) | init(source, target, options = {}) {
method drag (line 132) | drag(sourceWrapper, targetSelector, options) {
method move (line 144) | move(sourceWrapper, options) {
function addChildCommand (line 155) | function addChildCommand(name, command) {
FILE: tests/cypress/utils.js
function html (line 4) | function html(strings) {
function ensureNoConsoleWarns (line 8) | function ensureNoConsoleWarns() {
function injectHtmlAndBootAlpine (line 57) | function injectHtmlAndBootAlpine(cy, templateAndPotentiallyScripts, call...
function root (line 158) | function root(el) {
FILE: tests/vitest/csp-evaluator.spec.js
method getCount (line 61) | getCount() { return this.count }
FILE: tests/vitest/csp-parser.spec.js
method change (line 154) | change() { this.bar = 'qux' }
method change (line 169) | change() { this.foo.bar = 'qux' }
Condensed preview — 294 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (4,210K chars).
[
{
"path": ".claude/skills/review-pr/SKILL.md",
"chars": 13313,
"preview": "---\nname: review-pr\ndescription: Review an open PR like a maintainer — checkout, fix issues, push changes, post a struct"
},
{
"path": ".claude/skills/summarize-activity/SKILL.md",
"chars": 6428,
"preview": "---\nname: summarize-activity\ndescription: Summarize recent GitHub activity — discussions, PRs, issues, events, traffic —"
},
{
"path": ".editorconfig",
"chars": 188,
"preview": "root = true\n\n[*]\ncharset = utf-8\nend_of_line = lf\ninsert_final_newline = true\nindent_style = space\nindent_size = 4\ntrim_"
},
{
"path": ".github/FUNDING.yml",
"chars": 69,
"preview": "# These are supported funding model platforms\n\ngithub: [calebporzio]\n"
},
{
"path": ".github/ISSUE_TEMPLATE/config.yml",
"chars": 649,
"preview": "blank_issues_enabled: false\ncontact_links:\n - name: Get help or ask a Question\n url: https://github.com/alpinejs/alp"
},
{
"path": ".github/SECURITY.md",
"chars": 288,
"preview": "# Security Policy\n\n**PLEASE DON'T DISCLOSE SECURITY-RELATED ISSUES PUBLICLY.**\n\n## Reporting a Vulnerability\n\nIf you dis"
},
{
"path": ".github/workflows/run-tests.yml",
"chars": 313,
"preview": "name: Run Tests\non: [push, pull_request]\njobs:\n build:\n runs-on: ubuntu-latest\n steps:\n - uses: actions/chec"
},
{
"path": ".gitignore",
"chars": 55,
"preview": "node_modules\nscratch.md\ndist/\nprompts/\n.env.json\n.idea\n"
},
{
"path": "CLAUDE.md",
"chars": 3466,
"preview": "# Alpine.js Development Guidelines\n\n## Pull Request Evaluation Criteria\n\nWhen evaluating pull requests for Alpine.js, as"
},
{
"path": "LICENSE.md",
"chars": 1091,
"preview": "# MIT License\n\nCopyright © 2019-2025 Caleb Porzio and contributors\n\nPermission is hereby granted, free of charge, to any"
},
{
"path": "README.md",
"chars": 3169,
"preview": "# Alpine.js\n\nGo to the Alpine docs for most things: [Alpine Docs](https://alpinejs.dev)\n\nYou are welcome to submit updat"
},
{
"path": "benchmarks/giant.html",
"chars": 1982049,
"preview": "<!--\n This page is just the copied source of a random GitHub page.\n The idea is to test mutation observer performa"
},
{
"path": "benchmarks/init.html",
"chars": 857546,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <title>Alpine-3-keyed</title>\n <link href="
},
{
"path": "benchmarks/loop.html",
"chars": 7523,
"preview": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"utf-8\" />\n <title>Alpine-3-keyed</title>\n <link href="
},
{
"path": "benchmarks/memory.html",
"chars": 464,
"preview": "<html>\n <script src=\"http://alpine-next.test/packages/alpinejs/dist/cdn.js\" defer></script>\n\n <div x-data=\"{ items"
},
{
"path": "benchmarks/mutation_observer.html",
"chars": 1905,
"preview": "<html lang=\"en\">\n<head>\n <meta charset=\"UTF-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">\n <meta n"
},
{
"path": "cypress.json",
"chars": 399,
"preview": "{\n \"ignoreTestFiles\": \"*.html\",\n \"screenshotOnRunFailure\": false,\n \"video\": false,\n \"fixturesFolder\": \"tests"
},
{
"path": "index.html",
"chars": 1113,
"preview": "<html>\n <!-- <script src=\"./packages/intersect/dist/cdn.js\" defer></script>\n <script src=\"./packages/morph/dist/cd"
},
{
"path": "index2.html",
"chars": 374,
"preview": "<html>\n <script src=\"./packages/navigate/dist/cdn.js\" defer></script>\n <script src=\"./packages/alpinejs/dist/cdn.j"
},
{
"path": "jest.config.js",
"chars": 71,
"preview": "let config = {\n rootDir: './tests/jest',\n}\n\nmodule.exports = config\n"
},
{
"path": "morph.html",
"chars": 2227,
"preview": "<html>\n <script src=\"./packages/morph/dist/cdn.js\" defer></script>\n <script src=\"./packages/alpinejs/dist/cdn.js\" "
},
{
"path": "package.json",
"chars": 672,
"preview": "{\n \"private\": true,\n \"workspaces\": [\n \"packages/*\"\n ],\n \"devDependencies\": {\n \"axios\": \"^0.21."
},
{
"path": "packages/alpinejs/builds/cdn.js",
"chars": 106,
"preview": "import Alpine from './../src/index'\n\nwindow.Alpine = Alpine\n\nqueueMicrotask(() => {\n Alpine.start()\n})\n"
},
{
"path": "packages/alpinejs/builds/module.js",
"chars": 78,
"preview": "import Alpine from './../src/index'\n\nexport default Alpine\n\nexport { Alpine }\n"
},
{
"path": "packages/alpinejs/package.json",
"chars": 522,
"preview": "{\n \"name\": \"alpinejs\",\n \"version\": \"3.15.8\",\n \"description\": \"The rugged, minimal JavaScript framework\",\n \"h"
},
{
"path": "packages/alpinejs/src/alpine.js",
"chars": 2875,
"preview": "import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw, watch, transaction } from './reac"
},
{
"path": "packages/alpinejs/src/binds.js",
"chars": 1752,
"preview": "import { attributesOnly, directives } from \"./directives\"\n\nlet binds = {}\n\nexport function bind(name, bindings) {\n le"
},
{
"path": "packages/alpinejs/src/clone.js",
"chars": 2038,
"preview": "import { effect, release, overrideEffect } from \"./reactivity\"\nimport { initTree, isRoot } from \"./lifecycle\"\nimport { w"
},
{
"path": "packages/alpinejs/src/datas.js",
"chars": 457,
"preview": "\nlet datas = {}\n\nexport function data(name, callback) {\n datas[name] = callback\n}\n\nexport function injectDataProvider"
},
{
"path": "packages/alpinejs/src/directives/index.js",
"chars": 982,
"preview": "import { directive } from '../directives'\nimport { warn } from '../utils/warn'\n\nimport './x-transition'\nimport './x-mode"
},
{
"path": "packages/alpinejs/src/directives/x-bind.js",
"chars": 1910,
"preview": "import { directive, into, mapAttributes, prefix, startingWith } from '../directives'\nimport { evaluateLater } from '../e"
},
{
"path": "packages/alpinejs/src/directives/x-cloak.js",
"chars": 192,
"preview": "import { directive, prefix } from '../directives'\nimport { mutateDom } from '../mutation'\n\ndirective('cloak', el => queu"
},
{
"path": "packages/alpinejs/src/directives/x-data.js",
"chars": 2147,
"preview": "import { directive, prefix } from '../directives'\nimport { initInterceptors } from '../interceptor'\nimport { injectDataP"
},
{
"path": "packages/alpinejs/src/directives/x-effect.js",
"chars": 261,
"preview": "import { skipDuringClone } from '../clone'\nimport { directive } from '../directives'\nimport { evaluate, evaluateLater } "
},
{
"path": "packages/alpinejs/src/directives/x-for.js",
"chars": 6548,
"preview": "import { addScopeToNode } from '../scope'\nimport { evaluateLater } from '../evaluator'\nimport { directive } from '../dir"
},
{
"path": "packages/alpinejs/src/directives/x-html.js",
"chars": 506,
"preview": "import { directive } from '../directives'\nimport { initTree } from '../lifecycle'\nimport { mutateDom } from '../mutation"
},
{
"path": "packages/alpinejs/src/directives/x-id.js",
"chars": 507,
"preview": "import { interceptClone } from \"../clone\"\nimport { directive } from \"../directives\"\nimport { setIdRoot } from '../ids'\n\n"
},
{
"path": "packages/alpinejs/src/directives/x-if.js",
"chars": 1400,
"preview": "import { evaluateLater } from '../evaluator'\nimport { addScopeToNode } from '../scope'\nimport { directive } from '../dir"
},
{
"path": "packages/alpinejs/src/directives/x-ignore.js",
"chars": 384,
"preview": "import { directive } from \"../directives\"\n\nlet handler = () => {}\n\nhandler.inline = (el, { modifiers }, { cleanup }) => "
},
{
"path": "packages/alpinejs/src/directives/x-init.js",
"chars": 431,
"preview": "import { directive, prefix } from \"../directives\";\nimport { addInitSelector } from \"../lifecycle\";\nimport { skipDuringCl"
},
{
"path": "packages/alpinejs/src/directives/x-model.js",
"chars": 9906,
"preview": "import bind, { isCheckbox, isRadio, safeParseBoolean } from '../utils/bind'\nimport { evaluateLater } from '../evaluator'"
},
{
"path": "packages/alpinejs/src/directives/x-modelable.js",
"chars": 1382,
"preview": "import { directive } from '../directives'\nimport { entangle } from '../entangle';\n\ndirective('modelable', (el, { express"
},
{
"path": "packages/alpinejs/src/directives/x-on.js",
"chars": 838,
"preview": "import { directive, into, mapAttributes, prefix, startingWith } from '../directives'\nimport { evaluateLater } from '../e"
},
{
"path": "packages/alpinejs/src/directives/x-ref.js",
"chars": 633,
"preview": "import { closestRoot } from '../lifecycle'\nimport { skipDuringClone } from '../clone'\nimport { directive } from '../dire"
},
{
"path": "packages/alpinejs/src/directives/x-show.js",
"chars": 2150,
"preview": "import { evaluateLater } from '../evaluator'\nimport { directive } from '../directives'\nimport { mutateDom } from '../mut"
},
{
"path": "packages/alpinejs/src/directives/x-teleport.js",
"chars": 2477,
"preview": "import { skipDuringClone } from \"../clone\"\nimport { directive } from \"../directives\"\nimport { initTree, destroyTree } fr"
},
{
"path": "packages/alpinejs/src/directives/x-text.js",
"chars": 352,
"preview": "import { directive } from '../directives'\nimport { mutateDom } from '../mutation'\n\ndirective('text', (el, { expression }"
},
{
"path": "packages/alpinejs/src/directives/x-transition.js",
"chars": 11761,
"preview": "import { releaseNextTicks, holdNextTicks } from '../nextTick'\nimport { setClasses } from '../utils/classes'\nimport { set"
},
{
"path": "packages/alpinejs/src/directives.js",
"chars": 6376,
"preview": "import { onAttributeRemoved, onElRemoved } from './mutation'\nimport { evaluate, evaluateLater } from './evaluator'\nimpor"
},
{
"path": "packages/alpinejs/src/entangle.js",
"chars": 1185,
"preview": "import { effect, release } from './reactivity'\n\nexport function entangle({ get: outerGet, set: outerSet }, { get: innerG"
},
{
"path": "packages/alpinejs/src/evaluator.js",
"chars": 8177,
"preview": "import { closestDataStack, mergeProxies } from './scope'\nimport { injectMagics } from './magics'\nimport { tryCatch, hand"
},
{
"path": "packages/alpinejs/src/ids.js",
"chars": 501,
"preview": "import { findClosest } from './lifecycle'\n\nlet globalIdMemo = {}\n\nexport function findAndIncrementId(name) {\n if (! g"
},
{
"path": "packages/alpinejs/src/index.js",
"chars": 2479,
"preview": "/**\n * _\n * /\\ | | (_) (_)\n * / \\ | |_ __ _ _ __ ___ _ ___\n * / /\\ \\ | | '_ \\"
},
{
"path": "packages/alpinejs/src/interceptor.js",
"chars": 2452,
"preview": "// Warning: The concept of \"interceptors\" in Alpine is not public API and is subject to change\n// without tagging a majo"
},
{
"path": "packages/alpinejs/src/lifecycle.js",
"chars": 4311,
"preview": "import { startObservingMutations, onAttributesAdded, onElAdded, onElRemoved, cleanupAttributes, cleanupElement } from \"."
},
{
"path": "packages/alpinejs/src/magics/$data.js",
"chars": 99,
"preview": "import { scope } from '../scope'\nimport { magic } from '../magics'\n\nmagic('data', el => scope(el))\n"
},
{
"path": "packages/alpinejs/src/magics/$dispatch.js",
"chars": 133,
"preview": "import { dispatch } from '../utils/dispatch'\nimport { magic } from '../magics'\n\nmagic('dispatch', el => dispatch.bind(di"
},
{
"path": "packages/alpinejs/src/magics/$el.js",
"chars": 58,
"preview": "import { magic } from \"../magics\";\n\nmagic('el', el => el)\n"
},
{
"path": "packages/alpinejs/src/magics/$id.js",
"chars": 1152,
"preview": "import { magic } from '../magics'\nimport { closestIdRoot, findAndIncrementId } from '../ids'\nimport { interceptClone } f"
},
{
"path": "packages/alpinejs/src/magics/$nextTick.js",
"chars": 108,
"preview": "import { nextTick } from '../nextTick'\nimport { magic } from '../magics'\n\nmagic('nextTick', () => nextTick)\n"
},
{
"path": "packages/alpinejs/src/magics/$refs.js",
"chars": 469,
"preview": "import { closestRoot, findClosest } from '../lifecycle'\nimport { mergeProxies } from '../scope'\nimport { magic } from '."
},
{
"path": "packages/alpinejs/src/magics/$root.js",
"chars": 117,
"preview": "import { closestRoot } from \"../lifecycle\";\nimport { magic } from \"../magics\";\n\nmagic('root', el => closestRoot(el))\n"
},
{
"path": "packages/alpinejs/src/magics/$store.js",
"chars": 98,
"preview": "import { getStores } from '../store'\nimport { magic } from '../magics'\n\nmagic('store', getStores)\n"
},
{
"path": "packages/alpinejs/src/magics/$watch.js",
"chars": 357,
"preview": "import { magic } from '../magics'\nimport { watch } from '../reactivity'\n\nmagic('watch', (el, { evaluateLater, cleanup })"
},
{
"path": "packages/alpinejs/src/magics/index.js",
"chars": 648,
"preview": "import { warn } from '../utils/warn'\nimport { magic } from '../magics'\n\nimport './$nextTick'\nimport './$dispatch'\nimport"
},
{
"path": "packages/alpinejs/src/magics.js",
"chars": 776,
"preview": "import { getElementBoundUtilities } from './directives'\nimport { interceptor } from './interceptor'\nimport { onElRemoved"
},
{
"path": "packages/alpinejs/src/mutation.js",
"chars": 6207,
"preview": "import { dequeueJob } from \"./scheduler\";\nlet onAttributeAddeds = []\nlet onElRemoveds = []\nlet onElAddeds = []\n\nexport f"
},
{
"path": "packages/alpinejs/src/nextTick.js",
"chars": 470,
"preview": "\nlet tickStack = []\n\nlet isHolding = false\n\nexport function nextTick(callback = () => {}) {\n queueMicrotask(() => {\n "
},
{
"path": "packages/alpinejs/src/plugin.js",
"chars": 176,
"preview": "import Alpine from \"./alpine\";\n\nexport function plugin(callback) {\n let callbacks = Array.isArray(callback) ? callbac"
},
{
"path": "packages/alpinejs/src/reactivity.js",
"chars": 2985,
"preview": "\nimport { scheduler, startTransaction as startTx, commitTransaction as commitTx } from './scheduler'\n\nlet reactive, effe"
},
{
"path": "packages/alpinejs/src/scheduler.js",
"chars": 1026,
"preview": "\nlet flushPending = false\nlet flushing = false\nlet queue = []\nlet lastFlushedIndex = -1\nlet transactionActive = false\n\ne"
},
{
"path": "packages/alpinejs/src/scope.js",
"chars": 2683,
"preview": "\nexport function scope(node) {\n return mergeProxies(closestDataStack(node))\n}\n\nexport function addScopeToNode(node, d"
},
{
"path": "packages/alpinejs/src/store.js",
"chars": 575,
"preview": "import { initInterceptors } from \"./interceptor\";\nimport { reactive } from \"./reactivity\"\n\nlet stores = {}\nlet isReactiv"
},
{
"path": "packages/alpinejs/src/utils/bind.js",
"chars": 6727,
"preview": "import { dontAutoEvaluateFunctions, evaluate } from '../evaluator'\nimport { reactive } from '../reactivity'\nimport { set"
},
{
"path": "packages/alpinejs/src/utils/classes.js",
"chars": 1832,
"preview": "\nexport function setClasses(el, value) {\n if (Array.isArray(value)) {\n return setClassesFromString(el, value.j"
},
{
"path": "packages/alpinejs/src/utils/debounce.js",
"chars": 323,
"preview": "\nexport function debounce(func, wait) {\n let timeout\n\n return function() {\n const context = this, args = ar"
},
{
"path": "packages/alpinejs/src/utils/dispatch.js",
"chars": 394,
"preview": "\nexport function dispatch(el, name, detail = {}, options = {}) {\n return el.dispatchEvent(\n new CustomEvent(na"
},
{
"path": "packages/alpinejs/src/utils/error.js",
"chars": 728,
"preview": "export function tryCatch(el, expression, callback, ...args) {\n try {\n return callback(...args)\n } catch (e)"
},
{
"path": "packages/alpinejs/src/utils/on.js",
"chars": 7585,
"preview": "import { debounce } from './debounce'\nimport { throttle } from './throttle'\n\nexport default function on (el, event, modi"
},
{
"path": "packages/alpinejs/src/utils/once.js",
"chars": 278,
"preview": "\nexport function once(callback, fallback = () => {}) {\n let called = false\n\n return function () {\n if (! ca"
},
{
"path": "packages/alpinejs/src/utils/styles.js",
"chars": 1246,
"preview": "\nexport function setStyles(el, value) {\n if (typeof value === 'object' && value !== null) {\n return setStylesF"
},
{
"path": "packages/alpinejs/src/utils/throttle.js",
"chars": 303,
"preview": "\nexport function throttle(func, limit) {\n let inThrottle\n\n return function() {\n let context = this, args = "
},
{
"path": "packages/alpinejs/src/utils/walk.js",
"chars": 419,
"preview": "export function walk(el, callback) {\n if (typeof ShadowRoot === 'function' && el instanceof ShadowRoot) {\n Arr"
},
{
"path": "packages/alpinejs/src/utils/warn.js",
"chars": 100,
"preview": "\nexport function warn(message, ...args) {\n console.warn(`Alpine Warning: ${message}`, ...args)\n}\n"
},
{
"path": "packages/anchor/builds/cdn.js",
"chars": 123,
"preview": "import anchor from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(anchor)\n"
},
{
"path": "packages/anchor/builds/module.js",
"chars": 79,
"preview": "import anchor from '../src/index.js'\n\nexport default anchor\n\nexport { anchor }\n"
},
{
"path": "packages/anchor/package.json",
"chars": 552,
"preview": "{\n \"name\": \"@alpinejs/anchor\",\n \"version\": \"3.15.8\",\n \"description\": \"Anchor an element's position relative to "
},
{
"path": "packages/anchor/src/index.js",
"chars": 3106,
"preview": "import { computePosition, autoUpdate, flip, offset, shift } from '@floating-ui/dom'\n\nexport default function (Alpine) {\n"
},
{
"path": "packages/collapse/builds/cdn.js",
"chars": 127,
"preview": "import collapse from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(collap"
},
{
"path": "packages/collapse/builds/module.js",
"chars": 85,
"preview": "import collapse from '../src/index.js'\n\nexport default collapse\n\nexport { collapse }\n"
},
{
"path": "packages/collapse/package.json",
"chars": 519,
"preview": "{\n \"name\": \"@alpinejs/collapse\",\n \"version\": \"3.15.8\",\n \"description\": \"Collapse and expand elements with robus"
},
{
"path": "packages/collapse/src/index.js",
"chars": 3860,
"preview": "export default function (Alpine) {\n Alpine.directive('collapse', collapse)\n\n // If we're using a \"minimum height\","
},
{
"path": "packages/csp/builds/cdn.js",
"chars": 106,
"preview": "import Alpine from './../src/index'\n\nwindow.Alpine = Alpine\n\nqueueMicrotask(() => {\n Alpine.start()\n})\n"
},
{
"path": "packages/csp/builds/module.js",
"chars": 78,
"preview": "import Alpine from './../src/index'\n\nexport default Alpine\n\nexport { Alpine }\n"
},
{
"path": "packages/csp/package.json",
"chars": 299,
"preview": "{\n \"name\": \"@alpinejs/csp\",\n \"version\": \"3.15.8\",\n \"description\": \"A CSP-friendly build of AlpineJS\",\n \"auth"
},
{
"path": "packages/csp/src/directives/x-html.js",
"chars": 247,
"preview": "import { directive } from 'alpinejs/src/directives'\nimport { handleError } from 'alpinejs/src/utils/error'\n\ndirective('h"
},
{
"path": "packages/csp/src/evaluator.js",
"chars": 2658,
"preview": "import { generateEvaluatorFromFunction, shouldAutoEvaluateFunctions } from 'alpinejs/src/evaluator'\nimport { closestData"
},
{
"path": "packages/csp/src/index.js",
"chars": 1396,
"preview": "/**\n * Alpine CSP Build.\n *\n * Alpine allows you to use JavaScript directly inside your HTML. This is an\n * incredibly p"
},
{
"path": "packages/csp/src/parser.js",
"chars": 30844,
"preview": "let safemap = new WeakMap()\nlet globals = new Set()\n\nObject.getOwnPropertyNames(globalThis).forEach(key => {\n // Prev"
},
{
"path": "packages/docs/package.json",
"chars": 161,
"preview": "{\n \"name\": \"@alpinejs/docs\",\n \"version\": \"3.15.8\",\n \"description\": \"The documentation for Alpine\",\n \"author\""
},
{
"path": "packages/docs/src/en/advanced/async.md",
"chars": 1099,
"preview": "---\norder: 4\ntitle: Async\n---\n\n# Async\n\nAlpine is built to support asynchronous functions in most places it supports sta"
},
{
"path": "packages/docs/src/en/advanced/csp.md",
"chars": 5691,
"preview": "---\norder: 1\ntitle: CSP\n---\n\n# CSP (Content-Security Policy) Build\n\nIn order for Alpine to execute JavaScript expression"
},
{
"path": "packages/docs/src/en/advanced/extending.md",
"chars": 13610,
"preview": "---\norder: 3\ntitle: Extending\n---\n\n# Extending\n\nAlpine has a very open codebase that allows for extension in a number of"
},
{
"path": "packages/docs/src/en/advanced/reactivity.md",
"chars": 3779,
"preview": "---\norder: 2\ntitle: Reactivity\n---\n\n# Reactivity\n\nAlpine is \"reactive\" in the sense that when you change a piece of data"
},
{
"path": "packages/docs/src/en/advanced.md",
"chars": 53,
"preview": "---\norder: 8\ntitle: Advanced\ntype: sub-directory\n---\n"
},
{
"path": "packages/docs/src/en/directives/bind.md",
"chars": 6462,
"preview": "---\norder: 4\ntitle: bind\n---\n\n# x-bind\n\n`x-bind` allows you to set HTML attributes on elements based on the result of Ja"
},
{
"path": "packages/docs/src/en/directives/cloak.md",
"chars": 1842,
"preview": "---\norder: 12\ntitle: cloak\n---\n\n# x-cloak\n\nSometimes, when you're using AlpineJS for a part of your template, there is a"
},
{
"path": "packages/docs/src/en/directives/data.md",
"chars": 4566,
"preview": "---\norder: 1\ntitle: data\n---\n\n# x-data\n\nEverything in Alpine starts with the `x-data` directive.\n\n`x-data` defines a chu"
},
{
"path": "packages/docs/src/en/directives/effect.md",
"chars": 855,
"preview": "---\norder: 11\ntitle: effect\n---\n\n# x-effect\n\n`x-effect` is a useful directive for re-evaluating an expression when one o"
},
{
"path": "packages/docs/src/en/directives/for.md",
"chars": 3642,
"preview": "---\norder: 8\ntitle: for\n---\n\n# x-for\n\nAlpine's `x-for` directive allows you to create DOM elements by iterating through "
},
{
"path": "packages/docs/src/en/directives/html.md",
"chars": 771,
"preview": "---\norder: 7\ntitle: html\n---\n\n# x-html\n\n`x-html` sets the \"innerHTML\" property of an element to the result of a given ex"
},
{
"path": "packages/docs/src/en/directives/id.md",
"chars": 1050,
"preview": "---\norder: 17\ntitle: id\n---\n\n# x-id\n\n`x-id` allows you to declare a new \"scope\" for any new IDs generated using `$id()`."
},
{
"path": "packages/docs/src/en/directives/if.md",
"chars": 871,
"preview": "---\norder: 16\ntitle: if\n---\n\n# x-if\n\n`x-if` is used for toggling elements on the page, similarly to `x-show`, however it"
},
{
"path": "packages/docs/src/en/directives/ignore.md",
"chars": 564,
"preview": "---\norder: 11\ntitle: ignore\n---\n\n# x-ignore\n\nBy default, Alpine will crawl and initialize the entire DOM tree of an elem"
},
{
"path": "packages/docs/src/en/directives/init.md",
"chars": 2120,
"preview": "---\norder: 2\ntitle: init\n---\n\n# x-init\n\nThe `x-init` directive allows you to hook into the initialization phase of any e"
},
{
"path": "packages/docs/src/en/directives/model.md",
"chars": 12780,
"preview": "---\norder: 7\ntitle: model\n---\n\n# x-model\n\n`x-model` allows you to bind the value of an input element to Alpine data.\n\nHe"
},
{
"path": "packages/docs/src/en/directives/modelable.md",
"chars": 1143,
"preview": "---\norder: 7\ntitle: modelable\n---\n\n# x-modelable\n\n`x-modelable` allows you to expose any Alpine property as the target o"
},
{
"path": "packages/docs/src/en/directives/on.md",
"chars": 14209,
"preview": "---\norder: 5\ntitle: on\n---\n\n# x-on\n\n`x-on` allows you to easily run code on dispatched DOM events.\n\nHere's an example of"
},
{
"path": "packages/docs/src/en/directives/ref.md",
"chars": 719,
"preview": "---\norder: 11\ntitle: ref\n---\n\n# x-ref\n\n`x-ref` in combination with `$refs` is a useful utility for easily accessing DOM "
},
{
"path": "packages/docs/src/en/directives/show.md",
"chars": 1952,
"preview": "---\norder: 3\ntitle: show\n---\n\n# x-show\n\n`x-show` is one of the most useful and powerful directives in Alpine. It provide"
},
{
"path": "packages/docs/src/en/directives/teleport.md",
"chars": 5568,
"preview": "---\norder: 12\ntitle: teleport\ndescription: Send Alpine templates to other parts of the DOM\ngraph_image: https://alpinejs"
},
{
"path": "packages/docs/src/en/directives/text.md",
"chars": 569,
"preview": "---\norder: 6\ntitle: text\n---\n\n# x-text\n\n`x-text` sets the text content of an element to the result of a given expression"
},
{
"path": "packages/docs/src/en/directives/transition.md",
"chars": 5859,
"preview": "---\norder: 10\ntitle: transition\n---\n\n# x-transition\n\nAlpine provides a robust transitions utility out of the box. With a"
},
{
"path": "packages/docs/src/en/directives.md",
"chars": 82,
"preview": "---\norder: 4\ntitle: Directives\nprefix: x-\nfont-type: mono\ntype: sub-directory\n---\n"
},
{
"path": "packages/docs/src/en/essentials/events.md",
"chars": 3532,
"preview": "---\norder: 4\ntitle: Events\n---\n\n# Events\n\nAlpine makes it simple to listen for browser events and react to them.\n\n<a nam"
},
{
"path": "packages/docs/src/en/essentials/installation.md",
"chars": 2210,
"preview": "---\norder: 1\ntitle: Installation\n---\n\n# Installation\n\nThere are 2 ways to include Alpine into your project:\n\n* Including"
},
{
"path": "packages/docs/src/en/essentials/lifecycle.md",
"chars": 3232,
"preview": "---\norder: 5\ntitle: Lifecycle\n---\n\n# Lifecycle\n\nAlpine has a handful of different techniques for hooking into different "
},
{
"path": "packages/docs/src/en/essentials/state.md",
"chars": 4066,
"preview": "---\norder: 2\ntitle: State\n---\n\n# State\n\nState (JavaScript data that Alpine watches for changes) is at the core of everyt"
},
{
"path": "packages/docs/src/en/essentials/templating.md",
"chars": 10589,
"preview": "---\norder: 3\ntitle: Templating\n---\n\n# Templating\n\nAlpine offers a handful of useful directives for manipulating the DOM "
},
{
"path": "packages/docs/src/en/essentials.md",
"chars": 55,
"preview": "---\norder: 3\ntitle: Essentials\ntype: sub-directory\n---\n"
},
{
"path": "packages/docs/src/en/globals/alpine-bind.md",
"chars": 815,
"preview": "---\norder: 3\ntitle: bind()\n---\n\n# Alpine.bind\n\n`Alpine.bind(...)` provides a way to re-use [`x-bind`](/directives/bind#b"
},
{
"path": "packages/docs/src/en/globals/alpine-data.md",
"chars": 4307,
"preview": "---\norder: 1\ntitle: data()\n---\n\n# Alpine.data\n\n`Alpine.data(...)` provides a way to re-use `x-data` contexts within your"
},
{
"path": "packages/docs/src/en/globals/alpine-store.md",
"chars": 2841,
"preview": "---\norder: 2\ntitle: store()\n---\n\n# Alpine.store\n\nAlpine offers global state management through the `Alpine.store()` API."
},
{
"path": "packages/docs/src/en/globals.md",
"chars": 84,
"preview": "---\norder: 6\ntitle: Globals\nfont-type: mono\nprefix: Alpine.\ntype: sub-directory\n---\n"
},
{
"path": "packages/docs/src/en/magics/data.md",
"chars": 1406,
"preview": "---\norder: 8\nprefix: $\ntitle: data\n---\n\n# $data\n\n`$data` is a magic property that gives you access to the current Alpine"
},
{
"path": "packages/docs/src/en/magics/dispatch.md",
"chars": 4682,
"preview": "---\norder: 5\ntitle: dispatch\n---\n\n# $dispatch\n\n`$dispatch` is a helpful shortcut for dispatching browser events.\n\n```alp"
},
{
"path": "packages/docs/src/en/magics/el.md",
"chars": 424,
"preview": "---\norder: 1\nprefix: $\ntitle: el\n---\n\n# $el\n\n`$el` is a magic property that can be used to retrieve the current DOM node"
},
{
"path": "packages/docs/src/en/magics/id.md",
"chars": 3857,
"preview": "---\norder: 9\nprefix: $\ntitle: id\n---\n\n# $id\n\n`$id` is a magic property that can be used to generate an element's ID and "
},
{
"path": "packages/docs/src/en/magics/nextTick.md",
"chars": 1195,
"preview": "---\norder: 6\nprefix: $\ntitle: nextTick\n---\n\n# $nextTick\n\n`$nextTick` is a magic property that allows you to only execute"
},
{
"path": "packages/docs/src/en/magics/refs.md",
"chars": 1293,
"preview": "---\norder: 2\nprefix: $\ntitle: refs\n---\n\n# $refs\n\n`$refs` is a magic property that can be used to retrieve DOM elements m"
},
{
"path": "packages/docs/src/en/magics/root.md",
"chars": 526,
"preview": "---\norder: 7\nprefix: $\ntitle: root\n---\n\n# $root\n\n`$root` is a magic property that can be used to retrieve the root eleme"
},
{
"path": "packages/docs/src/en/magics/store.md",
"chars": 1354,
"preview": "---\norder: 3\nprefix: $\ntitle: store\n---\n\n# $store\n\nYou can use `$store` to conveniently access global Alpine stores regi"
},
{
"path": "packages/docs/src/en/magics/watch.md",
"chars": 2126,
"preview": "---\norder: 4\ntitle: watch\n---\n\n# $watch\n\nYou can \"watch\" a component property using the `$watch` magic method. For examp"
},
{
"path": "packages/docs/src/en/magics.md",
"chars": 77,
"preview": "---\norder: 5\ntitle: Magics\nprefix: $\nfont-type: mono\ntype: sub-directory\n---\n"
},
{
"path": "packages/docs/src/en/plugins/anchor.md",
"chars": 6390,
"preview": "---\norder: 7\ntitle: Anchor\ndescription: Anchor an element's positioning to another element on the page\ngraph_image: http"
},
{
"path": "packages/docs/src/en/plugins/collapse.md",
"chars": 4449,
"preview": "---\norder: 6\ntitle: Collapse\ndescription: Collapse and expand elements with robust animations\ngraph_image: https://alpin"
},
{
"path": "packages/docs/src/en/plugins/focus.md",
"chars": 13948,
"preview": "---\norder: 5\ntitle: Focus\ndescription: Easily manage focus within the page\ngraph_image: https://alpinejs.dev/social_focu"
},
{
"path": "packages/docs/src/en/plugins/intersect.md",
"chars": 6156,
"preview": "---\norder: 2\ntitle: Intersect\ndescription: An Alpine convenience wrapper for Intersection Observer that allows you to ea"
},
{
"path": "packages/docs/src/en/plugins/mask.md",
"chars": 5578,
"preview": "---\norder: 1\ntitle: Mask\ndescription: Automatically format text fields as users type\ngraph_image: https://alpinejs.dev/s"
},
{
"path": "packages/docs/src/en/plugins/morph.md",
"chars": 9769,
"preview": "---\norder: 8\ntitle: Morph\ndescription: Morph an element into the provided HTML\ngraph_image: https://alpinejs.dev/social_"
},
{
"path": "packages/docs/src/en/plugins/persist.md",
"chars": 7085,
"preview": "---\norder: 4\ntitle: Persist\ndescription: Easily persist data across page loads using localStorage\ngraph_image: https://a"
},
{
"path": "packages/docs/src/en/plugins/resize.md",
"chars": 3057,
"preview": "---\norder: 3\ntitle: Resize\ndescription: An Alpine convenience wrapper for the Resize Observer API that allows you to eas"
},
{
"path": "packages/docs/src/en/plugins/sort.md",
"chars": 11974,
"preview": "---\norder: 9\ntitle: Sort\ndescription: Easily re-order elements by dragging them with your mouse\ngraph_image: https://alp"
},
{
"path": "packages/docs/src/en/plugins.md",
"chars": 68,
"preview": "---\norder: 7\ntitle: Plugins\nfont-type: mono\ntype: sub-directory\n---\n"
},
{
"path": "packages/docs/src/en/start-here.md",
"chars": 12275,
"preview": "---\norder: 1\ntitle: Start Here\n---\n\n# Start Here\n\nCreate a blank HTML file somewhere on your computer with a name like: "
},
{
"path": "packages/docs/src/en/upgrade-guide.md",
"chars": 11047,
"preview": "---\norder: 2\ntitle: Upgrade From V2\n---\n\n# Upgrade from V2\n\nBelow is an exhaustive guide on the breaking changes in Alpi"
},
{
"path": "packages/focus/.gitignore",
"chars": 0,
"preview": ""
},
{
"path": "packages/focus/builds/cdn.js",
"chars": 119,
"preview": "import trap from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(trap)\n})\n"
},
{
"path": "packages/focus/builds/module.js",
"chars": 76,
"preview": "import focus from '../src/index.js'\n\nexport default focus\n\nexport { focus }\n"
},
{
"path": "packages/focus/package.json",
"chars": 551,
"preview": "{\n \"name\": \"@alpinejs/focus\",\n \"version\": \"3.15.8\",\n \"description\": \"Manage focus within a page\",\n \"homepage"
},
{
"path": "packages/focus/src/index.js",
"chars": 6993,
"preview": "import { createFocusTrap } from 'focus-trap'\nimport { focusable, isFocusable } from 'tabbable'\n\nexport default function "
},
{
"path": "packages/history/builds/cdn.js",
"chars": 125,
"preview": "import history from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(history"
},
{
"path": "packages/history/builds/module.js",
"chars": 129,
"preview": "import history from '../src/index.js'\nimport { track } from '../src/index.js'\n\nexport default history\n\nexport { history,"
},
{
"path": "packages/history/package.json",
"chars": 514,
"preview": "{\n \"name\": \"@alpinejs/history\",\n \"version\": \"3.0.0-alpha.0\",\n \"description\": \"Sync Alpine data with the browser"
},
{
"path": "packages/history/src/index.js",
"chars": 109,
"preview": "// This plugin has been moved into the livewire/livewire repository until it's more stable and ready to tag.\n"
},
{
"path": "packages/intersect/builds/cdn.js",
"chars": 129,
"preview": "import intersect from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(inter"
},
{
"path": "packages/intersect/builds/module.js",
"chars": 90,
"preview": "import intersect from './../src/index.js'\n\nexport default intersect\n\nexport { intersect }\n"
},
{
"path": "packages/intersect/package.json",
"chars": 525,
"preview": "{\n \"name\": \"@alpinejs/intersect\",\n \"version\": \"3.15.8\",\n \"description\": \"Trigger JavaScript when an element ent"
},
{
"path": "packages/intersect/src/index.js",
"chars": 2092,
"preview": "export default function (Alpine) {\n Alpine.directive('intersect', Alpine.skipDuringClone((el, { value, expression, mo"
},
{
"path": "packages/mask/builds/cdn.js",
"chars": 119,
"preview": "import mask from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(mask)\n})\n"
},
{
"path": "packages/mask/builds/module.js",
"chars": 103,
"preview": "import mask, { formatInput } from '../src/index.js'\n\nexport default mask\n\nexport { mask, formatInput }\n"
},
{
"path": "packages/mask/package.json",
"chars": 434,
"preview": "{\n \"name\": \"@alpinejs/mask\",\n \"version\": \"3.15.8\",\n \"description\": \"An Alpine plugin for input masking\",\n \"h"
},
{
"path": "packages/mask/src/index.js",
"chars": 7365,
"preview": "\nexport default function (Alpine) {\n Alpine.directive('mask', (el, { value, expression }, { effect, evaluateLater, cl"
},
{
"path": "packages/morph/builds/cdn.js",
"chars": 121,
"preview": "import morph from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(morph)\n})"
},
{
"path": "packages/morph/builds/module.js",
"chars": 76,
"preview": "import morph from '../src/index.js'\n\nexport default morph\n\nexport { morph }\n"
},
{
"path": "packages/morph/package.json",
"chars": 465,
"preview": "{\n \"name\": \"@alpinejs/morph\",\n \"version\": \"3.15.8\",\n \"description\": \"Diff and patch a block of HTML on a page w"
},
{
"path": "packages/morph/src/index.js",
"chars": 180,
"preview": "import { morph, morphBetween } from './morph'\n\nexport default function (Alpine) {\n Alpine.morph = morph\n Alpine.mo"
},
{
"path": "packages/morph/src/morph.js",
"chars": 18446,
"preview": "let resolveStep = () => {}\n\nlet logger = () => {}\n\nexport function morph(from, toHtml, options) {\n monkeyPatchDomSetA"
},
{
"path": "packages/morph/src/old_morph.js",
"chars": 11346,
"preview": "import { dom, createElement, textOrComment} from './dom.js'\n\nlet resolveStep = () => {}\n\nlet logger = () => {}\n\nexport a"
},
{
"path": "packages/navigate/builds/cdn.js",
"chars": 127,
"preview": "import navigate from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(naviga"
},
{
"path": "packages/navigate/builds/module.js",
"chars": 85,
"preview": "import navigate from '../src/index.js'\n\nexport default navigate\n\nexport { navigate }\n"
},
{
"path": "packages/navigate/package.json",
"chars": 326,
"preview": "{\n \"name\": \"@alpinejs/navigate\",\n \"version\": \"3.10.2\",\n \"description\": \"An Alpine plugin for adding SPA-like na"
},
{
"path": "packages/navigate/src/index.js",
"chars": 109,
"preview": "// This plugin has been moved into the livewire/livewire repository until it's more stable and ready to tag.\n"
},
{
"path": "packages/persist/builds/cdn.js",
"chars": 125,
"preview": "import persist from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(persist"
},
{
"path": "packages/persist/builds/module.js",
"chars": 82,
"preview": "import persist from '../src/index.js'\n\nexport default persist\n\nexport { persist }\n"
},
{
"path": "packages/persist/package.json",
"chars": 610,
"preview": "{\n \"name\": \"@alpinejs/persist\",\n \"version\": \"3.15.8\",\n \"description\": \"Persist Alpine data across page loads\",\n"
},
{
"path": "packages/persist/src/index.js",
"chars": 1915,
"preview": "export default function (Alpine) {\n let persist = () => {\n let alias\n let storage\n\n try {\n "
},
{
"path": "packages/resize/builds/cdn.js",
"chars": 123,
"preview": "import resize from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(resize)\n"
},
{
"path": "packages/resize/builds/module.js",
"chars": 81,
"preview": "import resize from './../src/index.js'\n\nexport default resize\n\nexport { resize }\n"
},
{
"path": "packages/resize/package.json",
"chars": 522,
"preview": "{\n \"name\": \"@alpinejs/resize\",\n \"version\": \"3.15.8\",\n \"description\": \"Trigger JavaScript when an element is res"
},
{
"path": "packages/resize/src/index.js",
"chars": 1555,
"preview": "export default function (Alpine) {\n Alpine.directive('resize', Alpine.skipDuringClone((el, { value, expression, modif"
},
{
"path": "packages/sort/builds/cdn.js",
"chars": 119,
"preview": "import sort from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(sort)\n})\n"
},
{
"path": "packages/sort/builds/module.js",
"chars": 74,
"preview": "import sort from '../src/index.js'\n\nexport default sort\n\nexport { sort }\n"
},
{
"path": "packages/sort/package.json",
"chars": 512,
"preview": "{\n \"name\": \"@alpinejs/sort\",\n \"version\": \"3.15.8\",\n \"description\": \"An Alpine plugin for drag sorting items on "
},
{
"path": "packages/sort/src/index.js",
"chars": 5406,
"preview": "import Sortable from 'sortablejs'\nimport { walk } from '../../alpinejs/src/utils/walk'\n\nexport default function (Alpine)"
},
{
"path": "packages/ui/builds/cdn.js",
"chars": 115,
"preview": "import ui from '../src/index.js'\n\ndocument.addEventListener('alpine:init', () => {\n window.Alpine.plugin(ui)\n})\n"
},
{
"path": "packages/ui/builds/module.js",
"chars": 67,
"preview": "import ui from '../src/index.js'\n\nexport default ui\n\nexport { ui }\n"
},
{
"path": "packages/ui/demo/index.html",
"chars": 9627,
"preview": "<!DOCTYPE html>\n<html>\n<head>\n <meta charSet=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n "
},
{
"path": "packages/ui/demo/listbox/data-driven.html",
"chars": 5771,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charSet=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n"
},
{
"path": "packages/ui/demo/listbox/index.html",
"chars": 16659,
"preview": "<!DOCTYPE html>\n<html>\n\n<head>\n <meta charSet=\"utf-8\" />\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" />\n"
}
]
// ... and 94 more files (download for full content)
About this extraction
This page contains the full source code of the alpinejs/alpine GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 294 files (3.8 MB), approximately 1.0M tokens, and a symbol index with 446 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.