🐛 Fix using the wrong element when updating an element's properties r…

…eactively
11ways · Jun 15, 2024 · 84c9975 · 84c9975
1 parent 841aa64
commit 84c9975
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 3 deletions.
diff --git a/lib/core/renderer.js b/lib/core/renderer.js
@@ -308,13 +308,24 @@ const queueReactiveTask = (element, type, task) => {
  */
 const updateElementProperty = (element, setter, getter, optional, key, config) => {
 
+	// We need the parent element of the element we're updating
+	const parent_element = element.parentElement;
+
+	// Get the current value from the element we're updating
 	let current_value = getter(element, key);
 
 	// We have to execute the expression to get the new value
 	let renderer = new Hawkejs.Renderer(element.hawkejs);
-	renderer[Hawkejs.ANCESTOR_ELEMENT] = element;
 
-	let variables = element[Hawkejs.VARIABLES];
+	// Set the parent element as the ancestor (`current_element` property)
+	// This is important, since updating an element's property,
+	// attributes, state, ... should actually fetch data from its
+	// "upper" scope
+	renderer[Hawkejs.ANCESTOR_ELEMENT] = parent_element;
+
+	// The variables do have to come from the element itself?
+	// @TODO: Doesn't make a lot of sense, but tests fail without it
+	let variables = element?.[Hawkejs.VARIABLES];
 
 	if (variables) {
 		renderer.active_variables = variables;
@@ -630,7 +641,7 @@ Renderer.setProperty(function current_variables() {
  * @since    2.2.3
  * @version  2.2.3
  *
- * @type     {Boolean}
+ * @type     {boolean}
  */
 Renderer.setProperty(function on_template_root_level() {
 

diff --git a/test/10-expressions.js b/test/10-expressions.js
@@ -1427,6 +1427,98 @@ This should be a converted variable:
 					<test-ref-button id="one"><span>test2</span></test-ref-button>
 				`,
 			],
+			// Passing down state (nested test)
+			[
+				// Prepare the state & variables
+				(vars) => {
+					state = {};
+					state.message = vars.set('original_message', Optional('init'));
+					state.times = vars.set('original_times', Optional(2));
+				},
+				`
+					<state-passing-down
+						id="start"
+						state:message={% original_message{:} %}
+						state:times={% original_times{:} %}
+						prop:counter={% 0 %}
+					></state-passing-down>
+				`,
+				`
+					<state-passing-down id="start">
+						<div id="div0" title="init">
+							<state-passing-down id="spd2">
+								<div id="div1" title="»init">
+									<state-passing-down id="spd1">
+										<div id="div2" title="»»init">
+										</div>
+									</state-passing-down>
+								</div>
+							</state-passing-down>
+						</div>
+					</state-passing-down>
+				`,
+				() => {
+					// Change the amount of times it should render
+					state.times.value = 1;
+				},
+				`
+					<state-passing-down id="start">
+						<div id="div0" title="init">
+							<state-passing-down id="spd1">
+								<div id="div1" title="»init">
+								</div>
+							</state-passing-down>
+						</div>
+					</state-passing-down>
+				`,
+				() => {
+					// Change the message and the times
+					state.message.value = 'change';
+					state.times.value = 2;
+				},
+				`
+					<state-passing-down id="start">
+						<div id="div0" title="change">
+							<state-passing-down id="spd2">
+								<div id="div1" title="»change">
+									<state-passing-down id="spd1">
+										<div id="div2" title="»»change">
+										</div>
+									</state-passing-down>
+								</div>
+							</state-passing-down>
+						</div>
+					</state-passing-down>
+				`,
+				() => {
+					// Change the amount of times only
+					state.times.value = 1;
+				},
+				`
+					<state-passing-down id="start">
+						<div id="div0" title="change">
+							<state-passing-down id="spd1">
+								<div id="div1" title="»change">
+								</div>
+							</state-passing-down>
+						</div>
+					</state-passing-down>
+				`,
+				() => {
+					// Change the message
+					state.message.value = 'third';
+				},
+				`
+					<state-passing-down id="start">
+						<div id="div0" title="third">
+							<state-passing-down id="spd1">
+								<div id="div1" title="»third">
+								</div>
+							</state-passing-down>
+						</div>
+					</state-passing-down>
+				`,
+			],
 		];
 
 		createReactiveTests(tests);

diff --git a/test/helpers/_load.js b/test/helpers/_load.js
@@ -22,4 +22,5 @@ module.exports = function loadHawkejs(hawkejs) {
 	hawkejs.load(test_base + '/helpers/state_value_test.js');
 	hawkejs.load(test_base + '/helpers/test_ref_button.js');
 	hawkejs.load(test_base + '/helpers/prop_passing_down.js');
+	hawkejs.load(test_base + '/helpers/state_passing_down.js');
 }
diff --git a/test/helpers/state_passing_down.js b/test/helpers/state_passing_down.js
@@ -0,0 +1,15 @@
+/**
+ * state-passing-down element
+ */
+const StatePassingDown = Blast.Bound.Function.inherits('Hawkejs.Element', 'StatePassingDown');
+
+StatePassingDown.setTemplateFile('elements/state_passing_down');
+
+StatePassingDown.defineStateVariable('message', {
+	type      : 'string',
+});
+
+StatePassingDown.defineStateVariable('times', {
+	type      : 'integer',
+	default   : 0
+});
diff --git a/test/templates/elements/state_passing_down.hwk b/test/templates/elements/state_passing_down.hwk
@@ -0,0 +1,11 @@
+
+<div id="div{% self.counter or 0 %}" title={% state:message{:} %}>
+	{% if state:times{:} gt 0 %}
+		<state-passing-down
+			id="spd{% state:times %}"
+			state:message={% "»" + state:message{:} %}
+			state:times={% state:times{:} - 1 %}
+			prop:counter={% (self.counter OR 0) + 1 %}
+		></state-passing-down>
+	{% /if %}
+</div>