WIP

packages/svelte/src/internal/client/dom/template.js

@@ -5,12 +5,12 @@ import { current_effect } from '../runtime.js';
 import { TEMPLATE_FRAGMENT, TEMPLATE_USE_IMPORT_NODE } from '../../../constants.js';
 
 /**
- * @param {string} html
+ * @param {string} content
  * @param {number} flags
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function template(html, flags) {
+export function template(content, flags) {
 	var is_fragment = (flags & TEMPLATE_FRAGMENT) !== 0;
 	var use_import_node = (flags & TEMPLATE_USE_IMPORT_NODE) !== 0;
 
@@ -23,7 +23,7 @@ export function template(html, flags) {
 		}
 
 		if (!node) {
-			node = create_fragment_from_html(html);
+			node = create_fragment_from_html(content);
 			if (!is_fragment) node = /** @type {Node} */ (node.firstChild);
 		}
 
@@ -32,14 +32,14 @@ export function template(html, flags) {
 }
 
 /**
- * @param {string} html
+ * @param {string} content
  * @param {number} flags
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function template_with_script(html, flags) {
+export function template_with_script(content, flags) {
 	var first = true;
-	var fn = template(html, flags);
+	var fn = template(content, flags);
 
 	return () => {
 		if (hydrating) return fn();
@@ -56,13 +56,13 @@ export function template_with_script(html, flags) {
 }
 
 /**
- * @param {string} svg
+ * @param {string} content
  * @param {number} flags
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function svg_template(svg, flags) {
+export function svg_template(content, flags) {
-	var fn = template(`<svg>${svg}</svg>`, flags & ~TEMPLATE_FRAGMENT);
+	var fn = template(`<svg>${content}</svg>`, 0); // we don't need to worry about using importNode for SVGs
 
 	/** @type {Element | DocumentFragment} */
 	var node;
@@ -73,14 +73,14 @@ export function svg_template(svg, flags) {
 		}
 
 		if (!node) {
-			var element = /** @type {Element} */ (fn());
+			var svg = /** @type {Element} */ (fn());
 
 			if ((flags & TEMPLATE_FRAGMENT) === 0) {
-				node = /** @type {Element} */ (element.firstChild);
+				node = /** @type {Element} */ (svg.firstChild);
 			} else {
 				node = document.createDocumentFragment();
-				while (element.firstChild) {
+				while (svg.firstChild) {
-					node.appendChild(element.firstChild);
+					node.appendChild(svg.firstChild);
 				}
 			}
 		}
@@ -90,14 +90,14 @@ export function svg_template(svg, flags) {
 }
 
 /**
- * @param {string} svg
+ * @param {string} content
  * @param {number} flags
  * @returns {() => Node | Node[]}
  */
 /*#__NO_SIDE_EFFECTS__*/
-export function svg_template_with_script(svg, flags) {
+export function svg_template_with_script(content, flags) {
 	var first = true;
-	var fn = svg_template(svg, flags);
+	var fn = svg_template(content, flags);
 
 	return () => {
 		if (hydrating) return fn();

packages/svelte/tests/snapshot/samples/dynamic-attributes-casing/_expected/client/main.svelte.js

@@ -3,7 +3,7 @@
 import "svelte/internal/disclose-version";
 import * as $ from "svelte/internal";
 
-var frag = $.template(`<div></div> <svg></svg> <custom-element></custom-element> <div></div> <svg></svg> <custom-element></custom-element>`, true);
+var frag = $.template(`<div></div> <svg></svg> <custom-element></custom-element> <div></div> <svg></svg> <custom-element></custom-element>`, 3);
 
 export default function Main($$anchor, $$props) {
 	$.push($$props, true);
@@ -11,7 +11,7 @@ export default function Main($$anchor, $$props) {
 	// needs to be a snapshot test because jsdom does auto-correct the attribute casing
 	let x = 'test';
 	let y = () => 'test';
-	var fragment = $.open_frag(frag, false);
+	var fragment = frag();
 	var div = $.first_child(fragment);
 	var svg = $.sibling($.sibling(div, true));
 	var custom_element = $.sibling($.sibling(svg, true));

packages/svelte/tests/snapshot/samples/hello-world/_expected/client/index.svelte.js

@@ -9,7 +9,7 @@ export default function Hello_world($$anchor, $$props) {
 	$.push($$props, false);
 	$.init();
 
-	var h1 = $.open(frag);
+	var h1 = frag();
 
 	$.close($$anchor, h1);
 	$.pop();

packages/svelte/tests/snapshot/samples/state-proxy-literal/_expected/client/index.svelte.js

@@ -10,14 +10,14 @@ function reset(_, str, tpl) {
 	$.set(tpl, ``);
 }
 
-var frag = $.template(`<input> <input> <button>reset</button>`, true);
+var frag = $.template(`<input> <input> <button>reset</button>`, 1);
 
 export default function State_proxy_literal($$anchor, $$props) {
 	$.push($$props, true);
 
 	let str = $.source('');
 	let tpl = $.source(``);
-	var fragment = $.open_frag(frag);
+	var fragment = frag();
 	var input = $.first_child(fragment);
 
 	$.remove_input_attr_defaults(input);