feedback

Author: trueadm

packages/svelte/src/compiler/phases/3-transform/client/visitors/Fragment.js

@@ -1,4 +1,4 @@
-/** @import { Expression, Identifier, Statement } from 'estree' */
+/** @import { Expression, Identifier, Statement, TemplateElement } from 'estree' */
 /** @import { AST, Namespace } from '#compiler' */
 /** @import { SourceLocation } from '#shared' */
 /** @import { ComponentClientTransformState, ComponentContext } from '../types' */
@@ -212,12 +212,34 @@ function join_template(items) {
 	let quasi = b.quasi('');
 	const template = b.template([quasi], []);
 
+	/**
+	 * @param {Expression} expression
+	 */
+	function push(expression) {
+		if (expression.type === 'TemplateLiteral') {
+			for (let i = 0; i < expression.expressions.length; i += 1) {
+				const q = expression.quasis[i];
+				const e = expression.expressions[i];
+
+				quasi.value.cooked += /** @type {string} */ (q.value.cooked);
+				push(e);
+			}
+
+			const last = /** @type {TemplateElement} */ (expression.quasis.at(-1));
+			quasi.value.cooked += /** @type {string} */ (last.value.cooked);
+		} else if (expression.type === 'Literal') {
+			/** @type {string} */ (quasi.value.cooked) += expression.value;
+		} else {
+			template.expressions.push(expression);
+			template.quasis.push((quasi = b.quasi('')));
+		}
+	}
+
 	for (const item of items) {
 		if (typeof item === 'string') {
 			quasi.value.cooked += item;
 		} else {
-			template.expressions.push(item);
-			template.quasis.push((quasi = b.quasi('')));
+			push(item);
 		}
 	}
 

packages/svelte/src/compiler/phases/3-transform/client/visitors/RegularElement.js

@@ -27,7 +27,7 @@ import {
 import { process_children } from './shared/fragment.js';
 import {
 	build_render_statement,
-	build_template_literal,
+	build_template_chunk,
 	build_update,
 	build_update_assignment,
 	get_states_and_calls
@@ -364,7 +364,7 @@ export function RegularElement(node, context) {
 				b.assignment(
 					'=',
 					b.member(context.state.node, 'textContent'),
-					build_template_literal(trimmed, context.visit, child_state).value
+					build_template_chunk(trimmed, context.visit, child_state).value
 				)
 			)
 		);

packages/svelte/src/compiler/phases/3-transform/client/visitors/TitleElement.js

@@ -1,14 +1,14 @@
 /** @import { AST } from '#compiler' */
 /** @import { ComponentContext } from '../types' */
 import * as b from '../../../../utils/builders.js';
-import { build_template_literal } from './shared/utils.js';
+import { build_template_chunk } from './shared/utils.js';
 
 /**
  * @param {AST.TitleElement} node
  * @param {ComponentContext} context
  */
 export function TitleElement(node, context) {
-	const { has_state, value } = build_template_literal(
+	const { has_state, value } = build_template_chunk(
 		/** @type {any} */ (node.fragment.nodes),
 		context.visit,
 		context.state

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/element.js

@@ -6,7 +6,7 @@ import { is_ignored } from '../../../../../state.js';
 import { get_attribute_expression, is_event_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
 import { build_getter, create_derived } from '../../utils.js';
-import { build_template_literal, build_update } from './utils.js';
+import { build_template_chunk, build_update } from './utils.js';
 
 /**
  * @param {Array<AST.Attribute | AST.SpreadAttribute>} attributes
@@ -200,7 +200,7 @@ export function build_attribute_value(value, context) {
 		};
 	}
 
-	return build_template_literal(value, context.visit, context.state);
+	return build_template_chunk(value, context.visit, context.state);
 }
 
 /**

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/fragment.js

@@ -4,7 +4,7 @@
 import { cannot_be_set_statically } from '../../../../../../utils.js';
 import { is_event_attribute, is_text_attribute } from '../../../../../utils/ast.js';
 import * as b from '../../../../../utils/builders.js';
-import { build_template_literal, build_update } from './utils.js';
+import { build_template_chunk, build_update } from './utils.js';
 
 /**
  * Processes an array of template nodes, joining sibling text/expression nodes
@@ -69,7 +69,7 @@ export function process_children(nodes, initial, is_element, { visit, state }) {
 
 		state.template.push(' ');
 
-		const { has_state, has_call, value } = build_template_literal(sequence, visit, state);
+		const { has_state, has_call, value } = build_template_chunk(sequence, visit, state);
 
 		// if this is a standalone `{expression}`, make sure we handle the case where
 		// no text node was created because the expression was empty during SSR

packages/svelte/src/compiler/phases/3-transform/client/visitors/shared/utils.js

@@ -38,7 +38,7 @@ export function get_states_and_calls(values) {
  * @param {ComponentClientTransformState} state
  * @returns {{ value: Expression, has_state: boolean, has_call: boolean }}
  */
-export function build_template_literal(values, visit, state) {
+export function build_template_chunk(values, visit, state) {
 	/** @type {Expression[]} */
 	const expressions = [];
 

packages/svelte/src/internal/client/index.js

@@ -155,6 +155,7 @@ export {
 	$window as window,
 	$document as document
 } from './dom/operations.js';
+export { attr } from '../shared/attributes.js';
 export { snapshot } from '../shared/clone.js';
 export { noop, fallback } from '../shared/utils.js';
 export {

packages/svelte/src/internal/server/index.js

@@ -2,6 +2,7 @@
 /** @import { Component, Payload, RenderOutput } from '#server' */
 /** @import { Store } from '#shared' */
 export { FILENAME, HMR } from '../../constants.js';
+import { attr } from '../shared/attributes.js';
 import { is_promise, noop } from '../shared/utils.js';
 import { subscribe_to_store } from '../../store/utils.js';
 import {
@@ -153,33 +154,6 @@ export function head(payload, fn) {
 	head_payload.out += BLOCK_CLOSE;
 }
 
-/**
- * `<div translate={false}>` should be rendered as `<div translate="no">` and _not_
- * `<div translate="false">`, which is equivalent to `<div translate="yes">`. There
- * may be other odd cases that need to be added to this list in future
- * @type {Record<string, Map<any, string>>}
- */
-const replacements = {
-	translate: new Map([
-		[true, 'yes'],
-		[false, 'no']
-	])
-};
-
-/**
- * @template V
- * @param {string} name
- * @param {V} value
- * @param {boolean} [is_boolean]
- * @returns {string}
- */
-export function attr(name, value, is_boolean = false) {
-	if (value == null || (!value && is_boolean) || (value === '' && name === 'class')) return '';
-	const normalized = (name in replacements && replacements[name].get(value)) || value;
-	const assignment = is_boolean ? '' : `="${escape_html(normalized, true)}"`;
-	return ` ${name}${assignment}`;
-}
-
 /**
  * @param {Payload} payload
  * @param {boolean} is_html
@@ -549,6 +523,8 @@ export function once(get_value) {
 	};
 }
 
+export { attr };
+
 export { html } from './blocks/html.js';
 
 export { push, pop } from './context.js';

packages/svelte/tests/runtime-legacy/samples/attribute-boolean-case-insensitive/main.svelte

@@ -1 +1 @@
-<input READONLY={true} REQUIRED={false}>
+<input READONLY={!0} REQUIRED={!1}>