wip

Author: calebporzio

packages/alpinejs/src/alpine.js

@@ -3,7 +3,7 @@ import { mapAttributes, directive, setPrefix as prefix, prefix as prefixed } fro
 import { start, addRootSelector, addInitSelector, closestRoot, findClosest, initTree, destroyTree, interceptInit } from './lifecycle'
 import { onElRemoved, onAttributeRemoved, onAttributesAdded, mutateDom, deferMutations, flushAndStopDeferringMutations, startObservingMutations, stopObservingMutations } from './mutation'
 import { mergeProxies, closestDataStack, addScopeToNode, scope as $data } from './scope'
-import { setEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions, evaluateRaw } from './evaluator'
+import { setEvaluator, setRawEvaluator, evaluate, evaluateLater, dontAutoEvaluateFunctions, evaluateRaw } from './evaluator'
 import { transition } from './directives/x-transition'
 import { clone, cloneNode, skipDuringClone, onlyDuringClone, interceptClone } from './clone'
 import { interceptor, initInterceptors } from './interceptor'
@@ -50,6 +50,7 @@ let Alpine = {
     initInterceptors,
     injectMagics,
     setEvaluator,
+    setRawEvaluator,
     mergeProxies,
     extractProp,
     findClosest,

packages/alpinejs/src/evaluator.js

@@ -34,6 +34,12 @@ export function setEvaluator(newEvaluator) {
     theEvaluatorFunction = newEvaluator
 }
 
+let theRawEvaluatorFunction
+
+export function setRawEvaluator(newEvaluator) {
+    theRawEvaluatorFunction = newEvaluator
+}
+
 export function normalEvaluator(el, expression) {
     let overriddenMagics = {}
 
@@ -157,7 +163,11 @@ export function runIfTypeOfFunction(receiver, value, scope, params, el) {
     }
 }
 
-export function evaluateRaw(el, expression, extras = {}) {
+export function evaluateRaw(...args) {
+    return theRawEvaluatorFunction(...args)
+}
+
+export function normalRawEvaluator(el, expression, extras = {}) {
     let overriddenMagics = {}
 
     injectMagics(overriddenMagics, el)

packages/alpinejs/src/index.js

@@ -23,9 +23,10 @@ import Alpine from './alpine'
  * It's the function that converts raw JavaScript string
  * expressions like @click="toggle()", into actual JS.
  */
-import { normalEvaluator } from './evaluator'
+import { normalEvaluator, normalRawEvaluator } from './evaluator'
 
 Alpine.setEvaluator(normalEvaluator)
+Alpine.setRawEvaluator(normalRawEvaluator)
 
 /**
  * _______________________________________________________

packages/csp/src/evaluator.js

@@ -4,6 +4,26 @@ import { tryCatch } from 'alpinejs/src/utils/error'
 import { generateRuntimeFunction } from './parser'
 import { injectMagics } from 'alpinejs/src/magics'
 
+export function cspRawEvaluator(el, expression, extras = {}) {
+    let dataStack = generateDataStack(el)
+
+    let scope = mergeProxies([extras.scope ?? {}, ...dataStack])
+
+    let evaluate = generateRuntimeFunction(expression)
+
+    let result = evaluate({
+        scope,
+        forceBindingRootScopeToFunctions: true,
+    })
+
+    // If the result is a function, call it
+    if (typeof result === 'function' && shouldAutoEvaluateFunctions) {
+        return result()
+    }
+
+    return result
+}
+
 export function cspEvaluator(el, expression) {
     let dataStack = generateDataStack(el)
 

packages/csp/src/index.js

@@ -17,9 +17,10 @@ import Alpine from 'alpinejs/src/alpine'
  * interpret strings as runtime JS. We're going to use
  * a more CSP-friendly evaluator for this instead.
  */
-import { cspEvaluator } from './evaluator'
+import { cspEvaluator, cspRawEvaluator } from './evaluator'
 
 Alpine.setEvaluator(cspEvaluator)
+Alpine.setRawEvaluator(cspRawEvaluator)
 
 /**
  * The rest of this file bootstraps Alpine the way it is

tests/vitest/csp-evaluator.spec.js

@@ -0,0 +1,91 @@
+// @vitest-environment jsdom
+
+import { describe, it, expect, beforeAll } from 'vitest';
+import Alpine from '../../packages/csp/src/index.js';
+import { cspRawEvaluator } from '../../packages/csp/src/evaluator.js';
+
+beforeAll(() => Alpine.start())
+
+describe('cspRawEvaluator', () => {
+    it('simple expression', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        expect(cspRawEvaluator(element, '42')).toBe(42)
+    });
+
+    it('with scope', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        expect(cspRawEvaluator(element, 'foo', { scope: { foo: 42 } })).toBe(42)
+    });
+
+    it('auto-evaluating function expression', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        let scope = { getAnswer: () => 42 }
+
+        expect(cspRawEvaluator(element, 'getAnswer()', { scope })).toBe(42)
+    });
+
+    it('non auto-evaluating function expression', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        let scope = { getAnswer: () => 42 }
+
+        Alpine.dontAutoEvaluateFunctions(() => {
+            let fn = cspRawEvaluator(element, 'getAnswer', { scope })
+            expect(fn()).toBe(42)
+        })
+    });
+
+    it('property access', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        let scope = { user: { name: 'John' } }
+
+        expect(cspRawEvaluator(element, 'user.name', { scope })).toBe('John')
+    });
+
+    it('method calls preserve context', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        let scope = {
+            counter: {
+                count: 5,
+                getCount() { return this.count }
+            }
+        }
+
+        expect(cspRawEvaluator(element, 'counter.getCount()', { scope })).toBe(5)
+    });
+
+    it('ternary expressions', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        expect(cspRawEvaluator(element, 'true ? 1 : 2')).toBe(1)
+        expect(cspRawEvaluator(element, 'false ? 1 : 2')).toBe(2)
+    });
+
+    it('arithmetic operations', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        expect(cspRawEvaluator(element, '2 + 3 * 4')).toBe(14)
+        expect(cspRawEvaluator(element, '(2 + 3) * 4')).toBe(20)
+    });
+
+    it('comparison operations', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        expect(cspRawEvaluator(element, '5 > 3')).toBe(true)
+        expect(cspRawEvaluator(element, '5 === 5')).toBe(true)
+        expect(cspRawEvaluator(element, '5 === "5"')).toBe(false)
+    });
+
+    it('logical operations', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        expect(cspRawEvaluator(element, 'true && false')).toBe(false)
+        expect(cspRawEvaluator(element, 'true || false')).toBe(true)
+        expect(cspRawEvaluator(element, '!false')).toBe(true)
+    });
+});

tests/vitest/evaluator.spec.js

@@ -2,7 +2,7 @@
 
 import { describe, it, expect, beforeAll } from 'vitest';
 import Alpine from '../../packages/alpinejs/src/index.js';
-import { evaluate, evaluateLater } from '../../packages/alpinejs/src/evaluator.js';
+import { evaluate, evaluateLater, evaluateRaw } from '../../packages/alpinejs/src/evaluator.js';
 
 beforeAll(() => Alpine.start())
 
@@ -151,4 +151,50 @@ describe('evaluateLater([Function])', () => {
             expect(value).toBe(42)
         })
     });
+})
+
+describe('evaluateRaw([String])', () => {
+    it('simple expression', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        expect(evaluateRaw(element, '42')).toBe(42)
+    });
+
+    it('with scope', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        expect(evaluateRaw(element, 'foo', { scope: { foo: 42 } })).toBe(42)
+    });
+
+    it('auto-evaluating function expression', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        expect(evaluateRaw(element, '() => 42')).toBe(42)
+    });
+
+    it('non auto-evaluating function expression', () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        Alpine.dontAutoEvaluateFunctions(() => {
+            expect(evaluateRaw(element, '() => 42')()).toBe(42)
+        })
+    });
+
+    it('await returns promise directly', async () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        let result = evaluateRaw(element, 'await Promise.resolve(42)')
+
+        expect(result).toBeInstanceOf(Promise)
+        expect(await result).toBe(42)
+    });
+
+    it('promise is returned directly', async () => {
+        let element = { parentNode: null, _x_dataStack: [] }
+
+        let result = evaluateRaw(element, '(() => { let promise = new Promise(() => {}); promise.foo = "bar"; return promise })()')
+
+        expect(result).toBeInstanceOf(Promise)
+        expect(result.foo).toBe('bar')
+    });
 })