Pass a function as a value.

[trusktr]

I'd like to do something like this, passing a function value:

<lume-box :position="(x, y, z, t) => [x, 100 * Math.sin(t * 0.001 + boxes[i][1]), z]"></lume-box>

but I can't seem to pass a function value. Specifically, it would need to be passed to the JS rotation property (not the attribute, seems x-bind is only for the attribute).

Here's an example using Alpine.js to dynamically create a series of boxes, and then I apply that desired function with JavaScript (but the goal is to apply the function in the HTML instead of in JS):

https://codepen.io/trusktr/pen/poqEJqj?editors=1000

[ekwoka]

x-init="$el.position = blahblah"

[trusktr]

Nice, that works. Thanks! Here's a version of that demo with the x-init syntax:

	<template x-data x-for="box in boxes">
		<lume-box
			x-init="
				$el.position = (x, y, z, t) => [box[1], 100 * Math.sin(t * 0.001 + box[1]), z]
				$el.rotation = (x, y) => [10, ++y, 30]
			"
			:color="box[0]"
			size="50 50 50" 
			mount-point="0.5 0.5 0.5"
		></lume-box>
	</template>

https://codepen.io/trusktr/pen/wvRzOEK

Maybe Alpine can have some additional syntax, or support function literals as values, to make it more concise.

With Vue, for example, we can use .prop or .attr to explicitly set the JS property vs the attribute,

<some-el :foo.prop="1" :bar.attr="2">
<!-- shorthand for the property: -->
<some-el .foo="1" :bar.attr="2">

where that will perform el.foo = '1' and el.setAttribute('bar', '2').

I could add support for arrow functions via the string attributes in the Lume elements, f.e.

<lume-box rotation="(x, y, z) => [x, ++y, z]"

but then that will not carry in the Alpine variables (f.e. the box in the x-for). Having the string values will be useful for standalone functions in plain HTML without Alpine, for examples like ++y that do not depend on outer scope.

Here's what it could look like with property syntax in Alpine:

	<template x-data x-for="box in boxes">
		<lume-box
			.position="(x, y, z, t) => [box[1], 100 * Math.sin(t * 0.001 + box[1]), z]"
			.rotation="(x, y) => [10, ++y, 30]"
			:color="box[0]"
			size="50 50 50" 
			mount-point="0.5 0.5 0.5"
		></lume-box>
	</template>

[ekwoka]

Right now, a fundamental part of how expressions are evaluated is that it continues to call any functions (and resolve any promises) returned until it's no longer a function/promise. So that would need to stay the default, but I believe their might be the hooks in place to allow an explicit opt for property.

You can see that doing

<div x-text="()=>()=>()=>()=>()=>()=>()=>()=>'hello'"></div>

will make the textContent hello.

I'll see about adding this to my backlog to investigate, but you could also submit the PR :)