ripple 0.2.45 → 0.2.47

package/src/compiler/utils.js

@@ -4,22 +4,22 @@ import * as b from '../utils/builders.js';
 const regex_return_characters = /\r/g;
 
 const VOID_ELEMENT_NAMES = [
-	'area',
-	'base',
-	'br',
-	'col',
-	'command',
-	'embed',
-	'hr',
-	'img',
-	'input',
-	'keygen',
-	'link',
-	'meta',
-	'param',
-	'source',
-	'track',
-	'wbr',
+  'area',
+  'base',
+  'br',
+  'col',
+  'command',
+  'embed',
+  'hr',
+  'img',
+  'input',
+  'keygen',
+  'link',
+  'meta',
+  'param',
+  'source',
+  'track',
+  'wbr',
 ];
 
 /**
@@ -27,602 +27,679 @@ const VOID_ELEMENT_NAMES = [
  * @param {string} name
  */
 export function is_void_element(name) {
-	return VOID_ELEMENT_NAMES.includes(name) || name.toLowerCase() === '!doctype';
+  return VOID_ELEMENT_NAMES.includes(name) || name.toLowerCase() === '!doctype';
 }
 
 const RESERVED_WORDS = [
-	'arguments',
-	'await',
-	'break',
-	'case',
-	'catch',
-	'class',
-	'const',
-	'continue',
-	'debugger',
-	'default',
-	'delete',
-	'do',
-	'else',
-	'enum',
-	'eval',
-	'export',
-	'extends',
-	'false',
-	'finally',
-	'for',
-	'function',
-	'if',
-	'implements',
-	'import',
-	'in',
-	'instanceof',
-	'interface',
-	'let',
-	'new',
-	'null',
-	'package',
-	'private',
-	'protected',
-	'public',
-	'return',
-	'static',
-	'super',
-	'switch',
-	'this',
-	'throw',
-	'true',
-	'try',
-	'typeof',
-	'var',
-	'void',
-	'while',
-	'with',
-	'yield',
+  'arguments',
+  'await',
+  'break',
+  'case',
+  'catch',
+  'class',
+  'const',
+  'continue',
+  'debugger',
+  'default',
+  'delete',
+  'do',
+  'else',
+  'enum',
+  'eval',
+  'export',
+  'extends',
+  'false',
+  'finally',
+  'for',
+  'function',
+  'if',
+  'implements',
+  'import',
+  'in',
+  'instanceof',
+  'interface',
+  'let',
+  'new',
+  'null',
+  'package',
+  'private',
+  'protected',
+  'public',
+  'return',
+  'static',
+  'super',
+  'switch',
+  'this',
+  'throw',
+  'true',
+  'try',
+  'typeof',
+  'var',
+  'void',
+  'while',
+  'with',
+  'yield',
 ];
 
 export function is_reserved(word) {
-	return RESERVED_WORDS.includes(word);
+  return RESERVED_WORDS.includes(word);
 }
 
 /**
  * Attributes that are boolean, i.e. they are present or not present.
  */
 const DOM_BOOLEAN_ATTRIBUTES = [
-	'allowfullscreen',
-	'async',
-	'autofocus',
-	'autoplay',
-	'checked',
-	'controls',
-	'default',
-	'disabled',
-	'formnovalidate',
-	'hidden',
-	'indeterminate',
-	'inert',
-	'ismap',
-	'loop',
-	'multiple',
-	'muted',
-	'nomodule',
-	'novalidate',
-	'open',
-	'playsinline',
-	'readonly',
-	'required',
-	'reversed',
-	'seamless',
-	'selected',
-	'webkitdirectory',
-	'defer',
-	'disablepictureinpicture',
-	'disableremoteplayback',
+  'allowfullscreen',
+  'async',
+  'autofocus',
+  'autoplay',
+  'checked',
+  'controls',
+  'default',
+  'disabled',
+  'formnovalidate',
+  'hidden',
+  'indeterminate',
+  'inert',
+  'ismap',
+  'loop',
+  'multiple',
+  'muted',
+  'nomodule',
+  'novalidate',
+  'open',
+  'playsinline',
+  'readonly',
+  'required',
+  'reversed',
+  'seamless',
+  'selected',
+  'webkitdirectory',
+  'defer',
+  'disablepictureinpicture',
+  'disableremoteplayback',
 ];
 
 export function is_boolean_attribute(name) {
-	return DOM_BOOLEAN_ATTRIBUTES.includes(name);
+  return DOM_BOOLEAN_ATTRIBUTES.includes(name);
 }
 
 const DOM_PROPERTIES = [
-	...DOM_BOOLEAN_ATTRIBUTES,
-	'formNoValidate',
-	'isMap',
-	'noModule',
-	'playsInline',
-	'readOnly',
-	'value',
-	'volume',
-	'defaultValue',
-	'defaultChecked',
-	'srcObject',
-	'noValidate',
-	'allowFullscreen',
-	'disablePictureInPicture',
-	'disableRemotePlayback',
+  ...DOM_BOOLEAN_ATTRIBUTES,
+  'formNoValidate',
+  'isMap',
+  'noModule',
+  'playsInline',
+  'readOnly',
+  'value',
+  'volume',
+  'defaultValue',
+  'defaultChecked',
+  'srcObject',
+  'noValidate',
+  'allowFullscreen',
+  'disablePictureInPicture',
+  'disableRemotePlayback',
 ];
 
 export function is_dom_property(name) {
-	return DOM_PROPERTIES.includes(name);
+  return DOM_PROPERTIES.includes(name);
 }
 
 /** List of Element events that will be delegated */
 const DELEGATED_EVENTS = [
-	'beforeinput',
-	'click',
-	'change',
-	'dblclick',
-	'contextmenu',
-	'focusin',
-	'focusout',
-	'input',
-	'keydown',
-	'keyup',
-	'mousedown',
-	'mousemove',
-	'mouseout',
-	'mouseover',
-	'mouseup',
-	'pointerdown',
-	'pointermove',
-	'pointerout',
-	'pointerover',
-	'pointerup',
-	'touchend',
-	'touchmove',
-	'touchstart',
+  'beforeinput',
+  'click',
+  'change',
+  'dblclick',
+  'contextmenu',
+  'focusin',
+  'focusout',
+  'input',
+  'keydown',
+  'keyup',
+  'mousedown',
+  'mousemove',
+  'mouseout',
+  'mouseover',
+  'mouseup',
+  'pointerdown',
+  'pointermove',
+  'pointerout',
+  'pointerover',
+  'pointerup',
+  'touchend',
+  'touchmove',
+  'touchstart',
 ];
 
 export function is_delegated(event_name) {
-	return DELEGATED_EVENTS.includes(event_name);
+  return DELEGATED_EVENTS.includes(event_name);
 }
 
 const PASSIVE_EVENTS = ['touchstart', 'touchmove'];
 
 export function is_passive_event(name) {
-	return PASSIVE_EVENTS.includes(name);
+  return PASSIVE_EVENTS.includes(name);
 }
 
 export function is_event_attribute(attr) {
-	return attr.startsWith('on') && attr.length > 2 && attr[2] === attr[2].toUpperCase();
+  return attr.startsWith('on') && attr.length > 2 && attr[2] === attr[2].toUpperCase();
 }
 
 const unhoisted = { hoisted: false };
 
 export function get_delegated_event(event_name, handler, state) {
-	// Handle delegated event handlers. Bail out if not a delegated event.
-	if (!handler || !is_delegated(event_name)) {
-		return null;
-	}
-
-	/** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
-	let target_function = null;
-	let binding = null;
-
-	if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
-		target_function = handler;
-	} else if (handler.type === 'Identifier') {
-		binding = state.scope.get(handler.name);
-
-		if (state.analysis.module.scope.references.has(handler.name)) {
-			// If a binding with the same name is referenced in the module scope (even if not declared there), bail out
-			return unhoisted;
-		}
-
-		if (binding != null) {
-			for (const { path } of binding.references) {
-				const parent = path.at(-1);
-				if (parent === undefined) return unhoisted;
-
-				const grandparent = path.at(-2);
-
-				/** @type {AST.RegularElement | null} */
-				let element = null;
-				/** @type {string | null} */
-				let event_name = null;
-				if (
-					parent.type === 'ExpressionTag' &&
-					grandparent?.type === 'Attribute' &&
-					is_event_attribute(grandparent)
-				) {
-					element = /** @type {AST.RegularElement} */ (path.at(-3));
-					const attribute = /** @type {AST.Attribute} */ (grandparent);
-					event_name = get_attribute_event_name(attribute.name);
-				}
-
-				if (element && event_name) {
-					if (
-						element.type !== 'Element' ||
-						element.metadata.has_spread ||
-						!is_delegated(event_name)
-					) {
-						return unhoisted;
-					}
-				} else if (parent.type !== 'FunctionDeclaration' && parent.type !== 'VariableDeclarator') {
-					return unhoisted;
-				}
-			}
-		}
-
-		// If the binding is exported, bail out
-		if (state.analysis.exports.find((node) => node.name === handler.name)) {
-			return unhoisted;
-		}
-
-		if (binding !== null && binding.initial !== null && !binding.updated && !binding.is_called) {
-			const binding_type = binding.initial.type;
-
-			if (
-				binding_type === 'ArrowFunctionExpression' ||
-				binding_type === 'FunctionDeclaration' ||
-				binding_type === 'FunctionExpression'
-			) {
-				target_function = binding.initial;
-			}
-		}
-	}
-
-	// If we can't find a function, or the function has multiple parameters, bail out
-	if (target_function == null || target_function.params.length > 1) {
-		return unhoisted;
-	}
-
-	const visited_references = new Set();
-	const scope = target_function.metadata.scope;
-	for (const [reference] of scope.references) {
-		// Bail out if the arguments keyword is used or $host is referenced
-		if (reference === 'arguments') return unhoisted;
-
-		const binding = scope.get(reference);
-		const local_binding = state.scope.get(reference);
-
-		// If we are referencing a binding that is shadowed in another scope then bail out.
-		if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
-			return unhoisted;
-		}
-
-		if (
-			binding !== null &&
-			// Bail out if the the binding is a rest param
-			(binding.declaration_kind === 'rest_param' || // or any normal not reactive bindings that are mutated.
-				// Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
-				(binding.kind === 'normal' && binding.updated))
-		) {
-			return unhoisted;
-		}
-		visited_references.add(reference);
-	}
-
-	return { hoisted: true, function: target_function };
+  // Handle delegated event handlers. Bail out if not a delegated event.
+  if (!handler || !is_delegated(event_name)) {
+    return null;
+  }
+
+  /** @type {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression | null} */
+  let target_function = null;
+  let binding = null;
+
+  if (handler.type === 'ArrowFunctionExpression' || handler.type === 'FunctionExpression') {
+    target_function = handler;
+  } else if (handler.type === 'Identifier') {
+    binding = state.scope.get(handler.name);
+
+    if (state.analysis.module.scope.references.has(handler.name)) {
+      // If a binding with the same name is referenced in the module scope (even if not declared there), bail out
+      return unhoisted;
+    }
+
+    if (binding != null) {
+      for (const { path } of binding.references) {
+        const parent = path.at(-1);
+        if (parent === undefined) return unhoisted;
+
+        const grandparent = path.at(-2);
+
+        /** @type {AST.RegularElement | null} */
+        let element = null;
+        /** @type {string | null} */
+        let event_name = null;
+        if (
+          parent.type === 'ExpressionTag' &&
+          grandparent?.type === 'Attribute' &&
+          is_event_attribute(grandparent)
+        ) {
+          element = /** @type {AST.RegularElement} */ (path.at(-3));
+          const attribute = /** @type {AST.Attribute} */ (grandparent);
+          event_name = get_attribute_event_name(attribute.name);
+        }
+
+        if (element && event_name) {
+          if (
+            element.type !== 'Element' ||
+            element.metadata.has_spread ||
+            !is_delegated(event_name)
+          ) {
+            return unhoisted;
+          }
+        } else if (parent.type !== 'FunctionDeclaration' && parent.type !== 'VariableDeclarator') {
+          return unhoisted;
+        }
+      }
+    }
+
+    // If the binding is exported, bail out
+    if (state.analysis.exports.find((node) => node.name === handler.name)) {
+      return unhoisted;
+    }
+
+    if (binding !== null && binding.initial !== null && !binding.updated && !binding.is_called) {
+      const binding_type = binding.initial.type;
+
+      if (
+        binding_type === 'ArrowFunctionExpression' ||
+        binding_type === 'FunctionDeclaration' ||
+        binding_type === 'FunctionExpression'
+      ) {
+        target_function = binding.initial;
+      }
+    }
+  }
+
+  // If we can't find a function, or the function has multiple parameters, bail out
+  if (target_function == null || target_function.params.length > 1) {
+    return unhoisted;
+  }
+
+  const visited_references = new Set();
+  const scope = target_function.metadata.scope;
+  for (const [reference] of scope.references) {
+    // Bail out if the arguments keyword is used or $host is referenced
+    if (reference === 'arguments') return unhoisted;
+
+    const binding = scope.get(reference);
+    const local_binding = state.scope.get(reference);
+
+    // If we are referencing a binding that is shadowed in another scope then bail out.
+    if (local_binding !== null && binding !== null && local_binding.node !== binding.node) {
+      return unhoisted;
+    }
+
+    if (
+      binding !== null &&
+      // Bail out if the the binding is a rest param
+      (binding.declaration_kind === 'rest_param' || // or any normal not reactive bindings that are mutated.
+        // Bail out if we reference anything from the EachBlock (for now) that mutates in non-runes mode,
+        (binding.kind === 'normal' && binding.updated))
+    ) {
+      return unhoisted;
+    }
+    visited_references.add(reference);
+  }
+
+  return { hoisted: true, function: target_function };
 }
 
 function get_hoisted_params(node, context) {
-	const scope = context.state.scope;
-
-	/** @type {Identifier[]} */
-	const params = [];
-
-	/**
-	 * We only want to push if it's not already present to avoid name clashing
-	 * @param {Identifier} id
-	 */
-	function push_unique(id) {
-		if (!params.find((param) => param.name === id.name)) {
-			params.push(id);
-		}
-	}
-
-	for (const [reference] of scope.references) {
-		let binding = scope.get(reference);
-
-		if (binding !== null && !scope.declarations.has(reference) && binding.initial !== node) {
-			if (binding.kind === 'prop') {
-				push_unique(b.id('__props'));
-			} else if (binding.kind === 'prop_fallback') {
-				push_unique(b.id(binding.node.name));
-			} else if (
-				// imports don't need to be hoisted
-				binding.declaration_kind !== 'import'
-			) {
-				// create a copy to remove start/end tags which would mess up source maps
-				push_unique(b.id(binding.node.name));
-			}
-		}
-	}
-	return params;
+  const scope = context.state.scope;
+
+  /** @type {Identifier[]} */
+  const params = [];
+
+  /**
+   * We only want to push if it's not already present to avoid name clashing
+   * @param {Identifier} id
+   */
+  function push_unique(id) {
+    if (!params.find((param) => param.name === id.name)) {
+      params.push(id);
+    }
+  }
+
+  for (const [reference] of scope.references) {
+    let binding = scope.get(reference);
+
+    if (binding !== null && !scope.declarations.has(reference) && binding.initial !== node) {
+      if (binding.kind === 'prop') {
+        push_unique(b.id('__props'));
+      } else if (binding.kind === 'prop_fallback') {
+        push_unique(b.id(binding.node.name));
+      } else if (
+        // imports don't need to be hoisted
+        binding.declaration_kind !== 'import'
+      ) {
+        // create a copy to remove start/end tags which would mess up source maps
+        push_unique(b.id(binding.node.name));
+      }
+    }
+  }
+  return params;
 }
 
 export function build_hoisted_params(node, context) {
-	const hoisted_params = get_hoisted_params(node, context);
-	node.metadata.hoisted_params = hoisted_params;
-
-	/** @type {Pattern[]} */
-	const params = [];
-
-	if (node.params.length === 0) {
-		if (hoisted_params.length > 0) {
-			// For the event object
-			params.push(b.id(context.state.scope.generate('_')));
-		}
-	} else {
-		for (const param of node.params) {
-			params.push(/** @type {Pattern} */ (context.visit(param)));
-		}
-	}
-
-	params.push(...hoisted_params, b.id('__block'));
-	return params;
+  const hoisted_params = get_hoisted_params(node, context);
+  node.metadata.hoisted_params = hoisted_params;
+
+  /** @type {Pattern[]} */
+  const params = [];
+
+  if (node.params.length === 0) {
+    if (hoisted_params.length > 0) {
+      // For the event object
+      params.push(b.id(context.state.scope.generate('_')));
+    }
+  } else {
+    for (const param of node.params) {
+      params.push(/** @type {Pattern} */ (context.visit(param)));
+    }
+  }
+
+  params.push(...hoisted_params, b.id('__block'));
+  return params;
 }
 
 export function is_inside_component(context, includes_functions = false) {
-	for (let i = context.path.length - 1; i >= 0; i -= 1) {
-		const context_node = context.path[i];
-		const type = context_node.type;
-
-		if (
-			!includes_functions &&
-			(type === 'FunctionExpression' ||
-				type === 'ArrowFunctionExpression' ||
-				type === 'FunctionDeclaration')
-		) {
-			return false;
-		}
-		if (type === 'Component') {
-			return true;
-		}
-	}
-	return false;
+  for (let i = context.path.length - 1; i >= 0; i -= 1) {
+    const context_node = context.path[i];
+    const type = context_node.type;
+
+    if (
+      !includes_functions &&
+      (type === 'FunctionExpression' ||
+        type === 'ArrowFunctionExpression' ||
+        type === 'FunctionDeclaration')
+    ) {
+      return false;
+    }
+    if (type === 'Component') {
+      return true;
+    }
+  }
+  return false;
+}
+
+export function is_component_level_function(context) {
+  for (let i = context.path.length - 1; i >= 0; i -= 1) {
+    const context_node = context.path[i];
+    const type = context_node.type;
+
+    if (type === 'BlockStatement' && context_node.body.find((n) => n.type === 'Component')) {
+      return true;
+    }
+
+    if (
+      type === 'FunctionExpression' ||
+      type === 'ArrowFunctionExpression' ||
+      type === 'FunctionDeclaration'
+    ) {
+      return false;
+    }
+  }
+  return true;
 }
 
 export function is_inside_call_expression(context) {
-	for (let i = context.path.length - 1; i >= 0; i -= 1) {
-		const context_node = context.path[i];
-		const type = context_node.type;
-
-		if (
-			type === 'FunctionExpression' ||
-			type === 'ArrowFunctionExpression' ||
-			type === 'FunctionDeclaration'
-		) {
-			return false;
-		}
-		if (type === 'CallExpression') {
-			return true;
-		}
-	}
-	return false;
+  for (let i = context.path.length - 1; i >= 0; i -= 1) {
+    const context_node = context.path[i];
+    const type = context_node.type;
+
+    if (
+      type === 'FunctionExpression' ||
+      type === 'ArrowFunctionExpression' ||
+      type === 'FunctionDeclaration'
+    ) {
+      return false;
+    }
+    if (type === 'CallExpression') {
+      return true;
+    }
+  }
+  return false;
 }
 
 export function is_tracked_name(name) {
-	return typeof name === 'string' && name.startsWith('$') && name.length > 1 && name[1] !== '$';
+  return typeof name === 'string' && name.startsWith('$') && name.length > 1 && name[1] !== '$';
 }
 
 export function is_value_static(node) {
-	if (node.type === 'Literal') {
-		return true;
-	}
-	if (node.type === 'ArrayExpression') {
-		return true;
-	}
-	if (node.type === 'NewExpression') {
-		if (node.callee.type === 'Identifier' && node.callee.name === 'Array') {
-			return true;
-		}
-		return false;
-	}
-
-	return false;
+  if (node.type === 'Literal') {
+    return true;
+  }
+  if (node.type === 'ArrayExpression') {
+    return true;
+  }
+  if (node.type === 'NewExpression') {
+    if (node.callee.type === 'Identifier' && node.callee.name === 'Array') {
+      return true;
+    }
+    return false;
+  }
+
+  return false;
 }
 
 export function is_tracked_computed_property(object, property, context) {
-	const binding = context.state.scope.get(object.name);
-
-	if (binding) {
-		const initial = binding.initial;
-		if (initial && is_value_static(initial)) {
-			return false;
-		}
-	}
-	if (property.type === 'Identifier') {
-		return true;
-	}
-	if (
-		property.type === 'Literal' &&
-		typeof property.value === 'string' &&
-		is_tracked_name(property.value)
-	) {
-		return true;
-	}
-
-	// TODO: do we need to handle more logic here? default to false for now
-	return true;
+  const binding = context.state.scope.get(object.name);
+
+  if (binding) {
+    const initial = binding.initial;
+    if (initial && is_value_static(initial)) {
+      return false;
+    }
+  }
+  if (property.type === 'Identifier') {
+    return true;
+  }
+  if (
+    property.type === 'Literal' &&
+    typeof property.value === 'string' &&
+    is_tracked_name(property.value)
+  ) {
+    return true;
+  }
+
+  // TODO: do we need to handle more logic here? default to false for now
+  return true;
 }
 
 export function is_ripple_import(callee, context) {
-	if (callee.type === 'Identifier') {
-		const binding = context.state.scope.get(callee.name);
-
-		return (
-			binding?.declaration_kind === 'import' &&
-			binding.initial.source.type === 'Literal' &&
-			binding.initial.source.value === 'ripple'
-		);
-	}
-
-	return false;
-}
-
-export function is_declared_within_component(node, context) {
-	const component = context.path.find((n) => n.type === 'Component');
+  if (callee.type === 'Identifier') {
+    const binding = context.state.scope.get(callee.name);
 
-	if (node.type === 'Identifier' && component) {
-		const binding = context.state.scope.get(node.name);
-		const component_scope = context.state.scopes.get(component);
+    return (
+      binding?.declaration_kind === 'import' &&
+      binding.initial.source.type === 'Literal' &&
+      binding.initial.source.value === 'ripple'
+    );
+  }
 
-		if (binding !== null && component_scope !== null) {
-			let scope = binding.scope;
-
-			while (scope !== null) {
-				if (scope === component_scope) {
-					return true;
-				}
-				scope = scope.parent;
-			}
-		}
-	}
+  return false;
+}
 
-	return false;
+export function is_declared_function_within_component(node, context) {
+  const component = context.path.find((n) => n.type === 'Component');
+
+  if (node.type === 'Identifier' && component) {
+    const binding = context.state.scope.get(node.name);
+    const component_scope = context.state.scopes.get(component);
+
+    if (binding !== null && component_scope !== null) {
+      if (
+        binding.declaration_kind !== 'function' &&
+        binding.initial?.type !== 'FunctionDeclaration' &&
+        binding.initial?.type !== 'ArrowFunctionExpression' &&
+        binding.initial?.type !== 'FunctionExpression'
+      ) {
+        return false;
+      }
+      let scope = binding.scope;
+
+      while (scope !== null) {
+        if (scope === component_scope) {
+          return true;
+        }
+        scope = scope.parent;
+      }
+    }
+  }
+
+  return false;
 }
 
 function is_non_coercive_operator(operator) {
-	return ['=', '||=', '&&=', '??='].includes(operator);
+  return ['=', '||=', '&&=', '??='].includes(operator);
 }
 
 export function visit_assignment_expression(node, context, build_assignment) {
-	if (
-		node.left.type === 'ArrayPattern' ||
-		node.left.type === 'ObjectPattern' ||
-		node.left.type === 'RestElement'
-	) {
-		const value = /** @type {Expression} */ (context.visit(node.right));
-		const should_cache = value.type !== 'Identifier';
-		const rhs = should_cache ? b.id('$$value') : value;
-
-		let changed = false;
-
-		const assignments = extract_paths(node.left).map((path) => {
-			const value = path.expression?.(rhs);
-
-			let assignment = build_assignment('=', path.node, value, context);
-			if (assignment !== null) changed = true;
-
-			return (
-				assignment ??
-				b.assignment(
-					'=',
-					/** @type {Pattern} */ (context.visit(path.node)),
-					/** @type {Expression} */ (context.visit(value)),
-				)
-			);
-		});
-
-		if (!changed) {
-			// No change to output -> nothing to transform -> we can keep the original assignment
-			return null;
-		}
-
-		const is_standalone = /** @type {Node} */ (context.path.at(-1)).type.endsWith('Statement');
-		const sequence = b.sequence(assignments);
-
-		if (!is_standalone) {
-			// this is part of an expression, we need the sequence to end with the value
-			sequence.expressions.push(rhs);
-		}
-
-		if (should_cache) {
-			// the right hand side is a complex expression, wrap in an IIFE to cache it
-			const iife = b.arrow([rhs], sequence);
-
-			const iife_is_async =
-				is_expression_async(value) ||
-				assignments.some((assignment) => is_expression_async(assignment));
-
-			return iife_is_async ? b.await(b.call(b.async(iife), value)) : b.call(iife, value);
-		}
-
-		return sequence;
-	}
-
-	if (node.left.type !== 'Identifier' && node.left.type !== 'MemberExpression') {
-		throw new Error(`Unexpected assignment type ${node.left.type}`);
-	}
-
-	const transformed = build_assignment(node.operator, node.left, node.right, context);
-
-	if (transformed === node.left) {
-		return node;
-	}
-
-	return transformed;
+  if (
+    node.left.type === 'ArrayPattern' ||
+    node.left.type === 'ObjectPattern' ||
+    node.left.type === 'RestElement'
+  ) {
+    const value = /** @type {Expression} */ (context.visit(node.right));
+    const should_cache = value.type !== 'Identifier';
+    const rhs = should_cache ? b.id('$$value') : value;
+
+    let changed = false;
+
+    const assignments = extract_paths(node.left).map((path) => {
+      const value = path.expression?.(rhs);
+
+      let assignment = build_assignment('=', path.node, value, context);
+      if (assignment !== null) changed = true;
+
+      return (
+        assignment ??
+        b.assignment(
+          '=',
+          /** @type {Pattern} */ (context.visit(path.node)),
+          /** @type {Expression} */ (context.visit(value)),
+        )
+      );
+    });
+
+    if (!changed) {
+      // No change to output -> nothing to transform -> we can keep the original assignment
+      return null;
+    }
+
+    const is_standalone = /** @type {Node} */ (context.path.at(-1)).type.endsWith('Statement');
+    const sequence = b.sequence(assignments);
+
+    if (!is_standalone) {
+      // this is part of an expression, we need the sequence to end with the value
+      sequence.expressions.push(rhs);
+    }
+
+    if (should_cache) {
+      // the right hand side is a complex expression, wrap in an IIFE to cache it
+      const iife = b.arrow([rhs], sequence);
+
+      const iife_is_async =
+        is_expression_async(value) ||
+        assignments.some((assignment) => is_expression_async(assignment));
+
+      return iife_is_async ? b.await(b.call(b.async(iife), value)) : b.call(iife, value);
+    }
+
+    return sequence;
+  }
+
+  if (node.left.type !== 'Identifier' && node.left.type !== 'MemberExpression') {
+    throw new Error(`Unexpected assignment type ${node.left.type}`);
+  }
+
+  const transformed = build_assignment(node.operator, node.left, node.right, context);
+
+  if (transformed === node.left) {
+    return node;
+  }
+
+  return transformed;
 }
 
 export function build_assignment(operator, left, right, context) {
-	let object = left;
-
-	while (object.type === 'MemberExpression') {
-		// @ts-expect-error
-		object = object.object;
-	}
-
-	if (object.type !== 'Identifier') {
-		return null;
-	}
-
-	const binding = context.state.scope.get(object.name);
-	if (!binding) return null;
-
-	const transform = binding.transform;
-
-	// reassignment
-	if (object === left || (left.type === 'MemberExpression' && left.computed && operator === '=')) {
-		const assign_fn = transform?.assign || transform?.assign_tracked;
-		if (assign_fn) {
-			let value = /** @type {Expression} */ (
-				context.visit(build_assignment_value(operator, left, right))
-			);
-
-			return assign_fn(
-				object,
-				value,
-				left.type === 'MemberExpression' && left.computed
-					? context.visit(left.property)
-					: undefined,
-			);
-		}
-	}
-
-	// mutation
-	if (transform?.mutate) {
-		return transform.mutate(
-			object,
-			b.assignment(
-				operator,
-				/** @type {Pattern} */ (context.visit(left)),
-				/** @type {Expression} */ (context.visit(right)),
-			),
-		);
-	}
-
-	return null;
+  let object = left;
+
+  while (object.type === 'MemberExpression') {
+    // @ts-expect-error
+    object = object.object;
+  }
+
+  if (object.type !== 'Identifier') {
+    return null;
+  }
+
+  const binding = context.state.scope.get(object.name);
+  if (!binding) return null;
+
+  const transform = binding.transform;
+
+  // reassignment
+  if (object === left || (left.type === 'MemberExpression' && left.computed && operator === '=')) {
+    const assign_fn = transform?.assign || transform?.assign_tracked;
+    if (assign_fn) {
+      let value = /** @type {Expression} */ (
+        context.visit(build_assignment_value(operator, left, right))
+      );
+
+      return assign_fn(
+        object,
+        value,
+        left.type === 'MemberExpression' && left.computed
+          ? context.visit(left.property)
+          : undefined,
+      );
+    }
+  }
+
+  // mutation
+  if (transform?.mutate) {
+    return transform.mutate(
+      object,
+      b.assignment(
+        operator,
+        /** @type {Pattern} */ (context.visit(left)),
+        /** @type {Expression} */ (context.visit(right)),
+      ),
+    );
+  }
+
+  return null;
 }
 
 const ATTR_REGEX = /[&"<]/g;
 const CONTENT_REGEX = /[&<]/g;
 
 export function escape_html(value, is_attr = false) {
-	const str = String(value ?? '');
+  const str = String(value ?? '');
 
-	const pattern = is_attr ? ATTR_REGEX : CONTENT_REGEX;
-	pattern.lastIndex = 0;
+  const pattern = is_attr ? ATTR_REGEX : CONTENT_REGEX;
+  pattern.lastIndex = 0;
 
-	let escaped = '';
-	let last = 0;
+  let escaped = '';
+  let last = 0;
 
-	while (pattern.test(str)) {
-		const i = pattern.lastIndex - 1;
-		const ch = str[i];
-		escaped += str.substring(last, i) + (ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : '&lt;');
-		last = i + 1;
-	}
+  while (pattern.test(str)) {
+    const i = pattern.lastIndex - 1;
+    const ch = str[i];
+    escaped += str.substring(last, i) + (ch === '&' ? '&amp;' : ch === '"' ? '&quot;' : '&lt;');
+    last = i + 1;
+  }
 
-	return escaped + str.substring(last);
+  return escaped + str.substring(last);
 }
 
 export function hash(str) {
-	str = str.replace(regex_return_characters, '');
-	let hash = 5381;
-	let i = str.length;
+  str = str.replace(regex_return_characters, '');
+  let hash = 5381;
+  let i = str.length;
+
+  while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
+  return (hash >>> 0).toString(36);
+}
 
-	while (i--) hash = ((hash << 5) - hash) ^ str.charCodeAt(i);
-	return (hash >>> 0).toString(36);
+const common_dom_names = new Set([
+  'div',
+  'span',
+  'input',
+  'textarea',
+  'select',
+  'button',
+  'a',
+  'p',
+  'img',
+  'form',
+  'label',
+  'ul',
+  'ol',
+  'li',
+  'table',
+  'thead',
+  'tbody',
+  'tr',
+  'td',
+  'th',
+  'section',
+  'header',
+  'footer',
+  'nav',
+  'main',
+  'article',
+  'aside',
+  'h1',
+  'h2',
+  'h3',
+  'h4',
+  'h5',
+  'h6',
+]);
+
+export function is_element_dom_element(node, context) {
+  if (node.id.type === 'Identifier' && node.id.name[0].toLowerCase() === node.id.name[0]) {
+	if (common_dom_names.has(node.id.name)) {
+		return true;
+	}
+	const binding = context.state.scope.get(node.id.name);
+    if (binding == null) {
+		return true;
+	}
+  }
+  return false;
 }