fix: removing a <title> should not render all previous <title>s (#53)

Author: yume-chan

.changeset/wide-clubs-serve.md

@@ -0,0 +1,5 @@
+---
+"@solidjs/meta": patch
+---
+
+Fix removing one <title> renders all previous <title>s

src/index.tsx

@@ -155,6 +155,7 @@ function initClientProvider() {
             for (let i = index - 1; i >= 0; i--) {
               if (t[i] != null) {
                 document.head.appendChild(t[i].ref);
+                break;
               }
             }
           }

test/index.spec.tsx

@@ -89,6 +89,35 @@ test("unmount middle child, should show only the last title", () => {
   dispose();
 });
 
+test("unmount last child, should show only the second last title", () => {
+  let div = document.createElement("div");
+  const snapshot1 = "<title>Title 3</title>";
+  const snapshot2 = "<title>Title 2</title>";
+  const [visible, setVisible] = createSignal(true);
+  const dispose = render(
+    () => (
+      <MetaProvider>
+        <div>
+          <Title>Title 1</Title>
+        </div>
+        <div>
+          <Title>Title 2</Title>
+        </div>
+        <Show when={visible()}>
+          <div>
+            <Title>Title 3</Title>
+          </div>
+        </Show>
+      </MetaProvider>
+    ),
+    div
+  );
+  expect(document.head.innerHTML).toBe(snapshot1);
+  setVisible(false);
+  expect(document.head.innerHTML).toBe(snapshot2);
+  dispose();
+});
+
 test("hydrates only the last title", () => {
   hydrationScript();
   let div = document.createElement("div");
@@ -218,7 +247,7 @@ test("renders only the last meta with the same name", () => {
   const snapshot1 = '<meta><meta name="name1">';
   const snapshot2 = '<meta><meta name="name1">';
   const snapshot3 = '<meta name="name1"><meta>';
-  
+
   const [visible1, setVisible1] = createSignal(false);
   const [visible2, setVisible2] = createSignal(false);
   const dispose = render(
@@ -279,16 +308,8 @@ test("renders both meta with the same name/property but different other attribut
   const dispose = render(
     () => (
       <MetaProvider>
-        <Meta
-          name="theme-color"
-          media="(prefers-color-scheme: light)"
-          content="#fff"
-        />
-        <Meta
-          name="theme-color"
-          media="(prefers-color-scheme: dark)"
-          content="#000"
-        />
+        <Meta name="theme-color" media="(prefers-color-scheme: light)" content="#fff" />
+        <Meta name="theme-color" media="(prefers-color-scheme: dark)" content="#000" />
       </MetaProvider>
     ),
     div
@@ -307,7 +328,7 @@ test("throws error if head tag is rendered without MetaProvider", () => {
 test("doesn't create any effect on removal", () => {
   let div = document.createElement("div");
 
-  const [ show, setShow ] = createSignal(true);
+  const [show, setShow] = createSignal(true);
   const showAndTest = () => {
     expect(getOwner()?.owner).toBeTruthy();
     return show();
@@ -317,7 +338,9 @@ test("doesn't create any effect on removal", () => {
     () => (
       <MetaProvider>
         <Show when={show()}>
-          <Title>Something {showAndTest()} that forces the Solid compiler to create a memo here</Title>
+          <Title>
+            Something {showAndTest()} that forces the Solid compiler to create a memo here
+          </Title>
         </Show>
       </MetaProvider>
     ),
@@ -330,7 +353,8 @@ test("doesn't create any effect on removal", () => {
 
 test("Escaping the title tag", () => {
   let div = document.createElement("div");
-  const snapshot = '<title>Hello&lt;/title&gt;&lt;script&gt;alert("inject");&lt;/script&gt;&lt;title&gt; World</title>';
+  const snapshot =
+    '<title>Hello&lt;/title&gt;&lt;script&gt;alert("inject");&lt;/script&gt;&lt;title&gt; World</title>';
   const dispose = render(
     () => (
       <MetaProvider>
@@ -361,4 +385,4 @@ test("Escaping the title meta", () => {
   );
   expect(document.head.innerHTML).toBe(snapshot);
   dispose();
-});
+});