Merge branch 'main' into allow-data-params

packages/alpinejs/src/alpine.js

@@ -1,7 +1,7 @@
 import { setReactivityEngine, disableEffectScheduling, reactive, effect, release, raw } from './reactivity'
 import { mapAttributes, directive, setPrefix as prefix } from './directives'
 import { setEvaluator, evaluate, evaluateLater } from './evaluator'
-import { start, addRootSelector, closestRoot } from './lifecycle'
+import { start, addRootSelector, closestRoot, initTree } from './lifecycle'
 import { interceptor } from './interceptor'
 import { mutateDom } from './mutation'
 import { nextTick } from './nextTick'
@@ -29,6 +29,7 @@ let Alpine = {
     mutateDom,
     directive,
     evaluate,
+    initTree,
     nextTick,
     prefix,
     plugin,

packages/alpinejs/src/directives/x-init.js

@@ -1,8 +1,8 @@
 import { directive, prefix } from "../directives";
-import { addRootSelector } from "../lifecycle";
+import { addInitSelector } from "../lifecycle";
 import { skipDuringClone } from "../clone";
 import { evaluate } from "../evaluator";
 
-addRootSelector(() => `[${prefix('init')}]`)
+addInitSelector(() => `[${prefix('init')}]`)
 
 directive('init', skipDuringClone((el, { expression }) => evaluate(el, expression, {}, false)))

packages/alpinejs/src/lifecycle.js

@@ -22,7 +22,7 @@ export function start() {
 
     let outNestedComponents = el => ! closestRoot(el.parentNode || closestRoot(el))
 
-    Array.from(document.querySelectorAll(rootSelectors()))
+    Array.from(document.querySelectorAll(allSelectors()))
         .filter(outNestedComponents)
         .forEach(el => {
             initTree(el)
@@ -32,12 +32,18 @@ export function start() {
 }
 
 let rootSelectorCallbacks = []
+let initSelectorCallbacks = []
 
 export function rootSelectors() {
     return rootSelectorCallbacks.map(fn => fn())
 }
 
+export function allSelectors() {
+    return rootSelectorCallbacks.concat(initSelectorCallbacks).map(fn => fn())
+}
+
 export function addRootSelector(selectorCallback) { rootSelectorCallbacks.push(selectorCallback) }
+export function addInitSelector(selectorCallback) { initSelectorCallbacks.push(selectorCallback) }
 
 export function closestRoot(el) {
     if (rootSelectors().some(selector => el.matches(selector))) return el

packages/alpinejs/src/utils/classes.js

@@ -4,6 +4,8 @@ export function setClasses(el, value) {
         return setClassesFromString(el, value.join(' '))
     } else if (typeof value === 'object' && value !== null) {
         return setClassesFromObject(el, value)
+    } else if (typeof value === 'function') {
+        return setClasses(el, value())
     }
 
     return setClassesFromString(el, value)

tests/cypress/integration/magics/$refs.spec.js

@@ -38,3 +38,16 @@ test('can reference elements from x-init',
         get('span').should(haveText('lob'))
     }
 )
+
+test('can reference elements outside of x-init',
+    html`
+        <div x-data x-ref="foo" data-foo="bar">
+            <div x-init="() => {}">
+                <span x-text="$refs.foo.dataset.foo"></span>
+            </div>
+        </div>
+    `,
+    ({ get }) => {
+        get('span').should(haveText('bar'))
+    }
+)