Project X 以较低的成本实现诸如Vue或React之类的大型框架的反应式和声明式特性
Project X 以较低的成本实现诸如Vue或React之类的大型框架的反应式和声明式特性 calebporzio released this
Added
- Better error messaging #887
Fixed
- Directly adjacent
x-for
templates were mistakenly sharing DOM nodes #851
Assets
2
Fixed
- Nested transitions wrapped with parent
x-show
s were being abruptly ended if the transitions were interrupted #853
Assets
2
Fixed
- Regression where x-for when used with an array of a single number caused issues #840
Assets
2
Assets
2
Added
- Added
.camel
modifier to allow binding to events and properties using kebab-case but converting them to camelCase before binding. For example:x-on.some-event.camel
will listen for an event called "someEvent". #597 - Added
.passive
event listener modifier to increase scroll performance. (forces browsers to not block scrolling for event handlers) #619
Fixed
Assets
2
calebporzio released this
Fixed
- Changes introduced by #543 caused regressions in x-show within x-for directives. It has been reverted.
Assets
2
calebporzio released this
Added
x-spread
directive (Allows you to bind an element to an object of Alpine directives and they will be "applied" (similar to x-bind="{}" in Vue)) #515- Now if one Alpine component on a page breaks, the others still work #447
- You can now access
$el
from anx-data
expression #479 - Add support for animations in
x-transition
directives #498 x-model.number
is now supported for checkbox arrays (all items will be cast to a numeric value) #558
Fixed
$nextTick
now waits until a transition is completely started (an extra tick) until being called #555- Because attributes are ALWAYS set in Alpine, some elements like "" were being interupted. Now only if the attribute has CHANGED will it be set #550
- If transitions are toggled too fast, there would be race conditions. Now overlapping transitions is supported (the previous transition is finished first before the next one is applied) #543
- Allow nested components to be moved around the DOM and not be re-initialized #449
- Checkboxes were being checked by default if a value binding was present #462
- Expressions that use a "result" variable were running into a conflict with Alpine's built-in result variable. "result" is freed up now #505
Assets
2
calebporzio released this
Fixed
- Elements with
x-transition:leave-*
and no enter transition were being "shown" one tick after $nextTick, even though there is no transition for them. This is fixed. #492
Assets
2
Fixed
- Obscure mutation observer bug when multiple mutations from different parts of the dom happen AND the first mutation was unrelated to the rest, a
return
statement inside a for loop would stop the rest of the mutations from being processed. We changed it tocontinue
so all mutations would get processed and we are good to go! #456
Assets
2
Added
Alpine.version
property to get the current version of Alpine programmatically- CSP notes in the readme
Fixed
x-model
issues with new Safari fix #403
Assets
2
calebporzio released this
Fixed
x-if
was broken inside ofx-for
because of recent changes to howx-if
is initialized (we moved away from using mutation observer to drive addedx-if
elements) #328
Assets
2
calebporzio released this
Added
- A mechanism for third-party libs to defer loading Alpine until they are finished doing there thing (Livewire lol)
window.deferLoadingAlpine = callback => {
// When some condition is met, call callback() and Alpine will load
}
Assets
2
Added
- The ability to reference just the method reference in an event handler:
// Before
<div x-data={ foo(e) { console.log(e) } }>
<button x-on:click="foo($event)">log event</button>
</div>
// After
<div x-data={ foo(e) { console.log(e) } }>
<button x-on:click="foo">log event</button>
</div>
Fixed
Assets
2
calebporzio released this
Fixed
- For
(item, index, group) in items
,index
andgroup
weren't being made available to elements inside anx-for
<template>
tag. Now they are #208
<div x-data="{ items: ['foo'] }">
<template x-for="(item, index) in items">
<div>
<h1 x-text="items.indexOf(item)"></h1>
// Same as...
<h2 x-text="index"></h2>
</div>
</template>
</div>
- Using
x-for
andx-if
in conjunction (<template x-for="..." x-if="...">
) resulted in odd behavior. It is now fully possible and supported #208
<div x-data="{ items: ['foo', 'bar'], show: false }">
<button @click="show = ! show"></button>
<template x-if="show" x-for="item in items">
<span x-text="item"></span>
</template>
</div>
Assets
2
calebporzio released this
Removed
x-created
andx-mounted
in favor ofx-init
Forx-created
behavior, usex-init
. Forx-mounted
behavior, return a callback fromx-init
Before
<div x-data x-created="doSomething()">
...
<div x-data x-mounted="doSomething()">
After
<div x-data x-init="doSomething()">
...
<div x-data x-init="() => { doSomething() }">
Assets
2
Added
x-show.transition
API
# Default to scale .95->1, opacity 0->1, cubic-bezier(0.4, 0.0, 0.2, 1), 150ms in, 75ms out
x-show.transition
# Only transition opacity
x-show.transition.opacity
# Only transition in
x-show.transition.in
x-show.transition.out
# Only transition scale
x-show.transition.scale
# Customize scale
x-show.transition.scale.95
# Set Duration (automatically sets the "out" duration to half the in)
x-show.transition.duration.150ms
# If you don't like this, you can do this:
# Note: if both "in" AND "out" are applied, they are treated as two
# seperate transition setting groups. Full flexibility.
x-show.transition.in.duration.150ms.out.duration.150ms
# Set origin
x-show.transition.origin.top
# Set multiple origins
x-show.transition.origin.top.left
# All of these settings can be combined to create something rediculous like this:
x-show.transition.in.opacity.duration.150ms.out.opacity.scale.80.duration.500ms.origin.bottom.right
Assets
2
calebporzio released this
Added
- Parent elements with
x-show
, that have children withx-show
AND transitions, will wait for the child transitions to be finished before hiding themselves. You can override this with:x-show.immediate
. #177
Assets
2
Fixed
.once
event listener modifier wasn't honoring newreturn false
ability of listeners.
Assets
2
Fixed
- Don't transition elements in that are already shown when Alpine re-evaluates the DOM after a data update #160
Assets
2
Fixed
- Issue with nested arrays causing exponentially slower performance because of nested proxies #141
Assets
2
calebporzio released this
Fixed
- Nested components were being registered twice on initialization.
Assets
2
Fixed
- Classed specified on an element's
class=
attribute AND anx-transition
directive, were being permanently removed after the transition finished. (#108)
Assets
2
calebporzio released this
Added
- System modifier key-combos:
<input type="text" x-data @keydown.cmd.k="doSomething">
(only fires when bothcmd
ANDk
are pressed)
Assets
2
Fixed:
- Allow colons in event names:
x-on:custom:event="..."
(#65) - Support for "space" keydown modifier:
x-on:keydown.space="..."
(#69) - Class attribute bindings (for string and array syntax) weren't merging. Now, Alpine matches the behavior of VueJS (#75)
- Some reactivity issues have been fixed by a pretty major refactor of the core dependancy tracking mechanism (#74)
Assets
2
calebporzio released this
Added
- The ability to return a callback from
x-init
and it will run AFTER Alpine makes it's initial DOM updates (similar to themounted()
hook in VueJS, or the current, but now deprecated,x-mounted
hook)
<div x-data="initialData()" x-init="init()">
<span x-text="foo" x-ref="span">bar</span>
</div>
<script>
function initialData() {
return {
foo: 'baz',
init() {
this.$refs.span.innerText // 'bar'
return () => {
this.$refs.span.innerText // 'baz'
}
}
}
}
</script>
Deprecated
x-created
andx-mounted
are now deprecated and will be removed in 2.0
Assets
2
calebporzio released this
Changed "Laravel Mix" to "Microbundle" for bunding.
Assets
2
calebporzio released this
Added
Fixed
- Support adding/removing multiple classes from "x-bind:class" [#28 ]
- Made manual DOM changes to
x-data
reactive using MutationObserver - Attempted to prevent double initialization when importing from webpack
Assets
2
calebporzio released this
Added
wire:on:keydown.enter
Added "keydown" modifiers- Added
x-if
(to be used on<template>
tags)
Assets
2
calebporzio released this
Added
- Renamed "Project-X" to "Alpine.js"
Assets
2
calebporzio released this
Fixed
- Nested components were being "skipped", but elements after them were also being skipped unintentionally. The DOM walker was adjusted to make this work. #21
Assets
2
Added
.window
event modifer for listening for events on the global window object.
Assets
2
calebporzio released this
Added
x-show
directive
Assets
2
calebporzio released this
Added:
x-ref
attribute for referencing DOM elements using$refs
in event handlers.
Fixed:
- Supports nested components (each component has an isolated scope)
Assets
2
Watchers:212 |
Star:14597 |
Fork:556 |
创建时间: 2019-11-28 21:51:55 |
最后Commits: 10天前 |
许可协议:MIT |
分类:框架 / JavaScript开发 |
收录时间:2019-12-03 08:54:01 |
2a676db
Compare
Fixed
x-on:click.away
#1054