feat: handle mount/unmount effects

tuono-labs · Oct 20, 2024 · 00bfcc4 · 00bfcc4
1 parent e764322
commit 00bfcc4
Show file tree

Hide file tree

Showing 9 changed files with 298 additions and 209 deletions.
diff --git a/examples/tutorial/src/routes/index.tsx b/examples/tutorial/src/routes/index.tsx
@@ -3,48 +3,48 @@ import { Head, type TuonoProps } from 'tuono'
 import PokemonLink from '../components/PokemonLink'
 
 interface Pokemon {
-  name: string
+	name: string
 }
 
 interface IndexProps {
-  results: Pokemon[]
+	results: Pokemon[]
 }
 
 export default function IndexPage({
-  data,
+	data,
 }: TuonoProps<IndexProps>): JSX.Element {
-  if (!data?.results) {
-    return <></>
-  }
+	if (!data?.results) {
+		return <></>
+	}
 
-  return (
-    <>
-      <Head>
-        <title>Tuono tutorial</title>
-      </Head>
-      <header className="header">
-        <a href="https://crates.io/crates/tuono" target="_blank">
-          Crates
-        </a>
-        <a href="https://www.npmjs.com/package/tuono" target="_blank">
-          Npm
-        </a>
-      </header>
-      <div className="title-wrap">
-        <h1 className="title">
-          TU<span>O</span>NO
-        </h1>
-        <div className="logo">
-          <img src="rust.svg" className="rust" />
-          <img src="react.svg" className="react" />
-        </div>
-      </div>
-      <ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
-        <PokemonLink pokemon={{ name: 'GOAT' }} id={0} />
-        {data.results.map((pokemon, i) => {
-          return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />
-        })}
-      </ul>
-    </>
-  )
+	return (
+		<>
+			<Head>
+				<title>Tuono tutorial</title>
+			</Head>
+			<header className="header">
+				<a href="https://crates.io/crates/tuono" target="_blank">
+					Crates
+				</a>
+				<a href="https://www.npmjs.com/package/tuono" target="_blank">
+					Npm
+				</a>
+			</header>
+			<div className="title-wrap">
+				<h1 className="title">
+					TU<span>O</span>NO
+				</h1>
+				<div className="logo">
+					<img src="rust.svg" className="rust" />
+					<img src="react.svg" className="react" />
+				</div>
+			</div>
+			<ul style={{ flexWrap: 'wrap', display: 'flex', gap: 10 }}>
+				<PokemonLink pokemon={{ name: 'GOAT' }} id={0} />
+				{data.results.map((pokemon, i) => {
+					return <PokemonLink pokemon={pokemon} id={i + 1} key={i} />
+				})}
+			</ul>
+		</>
+	)
 }
diff --git a/packages/html-tags/package.json b/packages/html-tags/package.json
@@ -55,6 +55,7 @@
     "@tanstack/config": "^0.7.11",
     "@testing-library/jest-dom": "^6.6.0",
     "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.2",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
     "vitest": "^2.0.0"

diff --git a/packages/html-tags/src/meta-tags-context.tsx b/packages/html-tags/src/meta-tags-context.tsx
@@ -4,30 +4,30 @@ import type { ReactNode } from 'react'
 type ExtractFn = (elements: ReactNode) => void
 
 interface MetaTagsContextValues {
-	extract?: ExtractFn
+  extract?: ExtractFn
 }
 
 const MetaContext = createContext<MetaTagsContextValues>({})
 
 interface MetaTagsContextProps {
-	children: ReactNode
-	extract?: ExtractFn
+  children: ReactNode
+  extract?: ExtractFn
 }
 
 export default function MetaContextProvider({
-	extract,
-	children,
+  extract,
+  children,
 }: MetaTagsContextProps): ReactNode {
-	return (
-		<MetaContext.Provider
-			value={{
-				extract,
-			}}
-		>
-			{children}
-		</MetaContext.Provider>
-	)
+  return (
+    <MetaContext.Provider
+      value={{
+        extract,
+      }}
+    >
+      {children}
+    </MetaContext.Provider>
+  )
 }
 
 export const useMetaTagsContext = (): MetaTagsContextValues =>
-	useContext(MetaContext)
+  useContext(MetaContext)
diff --git a/packages/html-tags/src/meta-tags.spec.tsx b/packages/html-tags/src/meta-tags.spec.tsx
@@ -1,25 +1,77 @@
 import * as React from 'react'
 import { afterEach, describe, expect, test } from 'vitest'
-import { cleanup, render } from '@testing-library/react'
+import { cleanup, render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
 import '@testing-library/jest-dom'
 import MetaContextProvider from './meta-tags-context'
 import MetaTags from './meta-tags'
 
+const MockRouter = (): React.ReactNode => {
+  const [showRoute, setShowRoute] = React.useState(false)
+
+  return (
+    <MetaContextProvider>
+      <button onClick={() => setShowRoute((st) => !st)}>Toggle route</button>
+      {showRoute ? (
+        <MetaTags>
+          <title>Updated title</title>
+        </MetaTags>
+      ) : (
+        <MetaTags>
+          <title>Tuono</title>
+        </MetaTags>
+      )}
+    </MetaContextProvider>
+  )
+}
+
 describe('Should correctly render the head tags', () => {
   afterEach(() => {
     cleanup()
   })
 
   test('It should correctly render the head element', async () => {
-    await React.act(async () => {
-      render(
-        <MetaContextProvider>
-          <MetaTags>
-            <title>Tuono</title>
-          </MetaTags>
-        </MetaContextProvider>,
-      )
-    })
+    render(
+      <MetaContextProvider>
+        <MetaTags>
+          <title>Tuono</title>
+        </MetaTags>
+      </MetaContextProvider>,
+    )
+    expect(document.title).toEqual('Tuono')
+  })
+
+  test('It should remove the properties when unmount', async () => {
+    const { unmount } = render(
+      <MetaContextProvider>
+        <MetaTags>
+          <title>Tuono</title>
+        </MetaTags>
+      </MetaContextProvider>,
+    )
+    expect(document.title).toEqual('Tuono')
+
+    unmount()
+
+    expect(document.title).toEqual('')
+  })
+
+  test('It should update the existing values with the newly mounted', async () => {
+    const user = userEvent.setup()
+    render(<MockRouter />)
+
     expect(document.title).toEqual('Tuono')
+
+    await user.click(screen.getByText('Toggle route'))
+    await waitFor(() => {
+      expect(document.title).toEqual('Updated title')
+    })
+
+    await user.click(screen.getByText('Toggle route'))
+
+    await waitFor(() => {
+      expect(document.title).toEqual('Tuono')
+    })
   })
 })
diff --git a/packages/html-tags/src/meta-tags.tsx b/packages/html-tags/src/meta-tags.tsx
@@ -1,7 +1,14 @@
 import React, { useEffect, useRef, useState } from 'react'
 import type { ReactNode } from 'react'
 import { useMetaTagsContext } from './meta-tags-context'
-import { appendChild } from './utils'
+import {
+  appendChild,
+  getDuplicateTitle,
+  removeChild,
+  getDuplicateMeta,
+  getDuplicateCanonical,
+  getDuplicateElementById,
+} from './utils'
 
 interface MetaTagsProps {
   children: ReactNode
@@ -19,7 +26,37 @@ export default function MetaTags({ children }: MetaTagsProps): ReactNode {
 
     setLastChildren(children)
 
-    const childNodes = Array.prototype.slice.call(elementRef.current?.children)
+    let childNodes = Array.prototype.slice.call(elementRef.current?.children)
+
+    const head = document.head
+    const headHtml = head.innerHTML
+
+    //filter children remove if children has not been changed
+    childNodes = childNodes.filter((child) => {
+      return headHtml.indexOf(child.outerHTML) === -1
+    })
+
+    //create clone of childNodes
+    childNodes = childNodes.map((child) => child.cloneNode(true))
+
+    //remove duplicate title and meta from head
+    childNodes.forEach((child) => {
+      const tag = child.tagName.toLowerCase()
+      if (tag === 'title') {
+        const title = getDuplicateTitle()
+        if (title.length > 0) removeChild(head, title)
+      } else if (child.id) {
+        // if the element has id defined remove the existing element with that id
+        const elm = getDuplicateElementById(child)
+        if (elm.length > 0) removeChild(head, elm)
+      } else if (tag === 'meta') {
+        const meta = getDuplicateMeta(child)
+        if (meta.length > 0) removeChild(head, meta)
+      } else if (tag === 'link' && child.rel === 'canonical') {
+        const link = getDuplicateCanonical()
+        if (link.length > 0) removeChild(head, link)
+      }
+    })
 
     appendChild(document.head, childNodes)
   }

diff --git a/packages/html-tags/src/server/meta-tags-server.tsx b/packages/html-tags/src/server/meta-tags-server.tsx
@@ -2,8 +2,8 @@ import type { ReactNode } from 'react'
 import { renderToStaticMarkup } from 'react-dom/server'
 
 interface MetaServerTagsOut {
-	extract: (el: ReactNode) => void
-	renderToString: () => string
+  extract: (el: ReactNode) => void
+  renderToString: () => string
 }
 
 /*
@@ -13,14 +13,14 @@ interface MetaServerTagsOut {
  *
  */
 export default function MetaTagsServer(): MetaServerTagsOut {
-	let headElms: ReactNode
+  let headElms: ReactNode
 
-	return {
-		extract(elms: ReactNode): void {
-			headElms = elms
-		},
-		renderToString(): string {
-			return renderToStaticMarkup(headElms)
-		},
-	}
+  return {
+    extract(elms: ReactNode): void {
+      headElms = elms
+    },
+    renderToString(): string {
+      return renderToStaticMarkup(headElms)
+    },
+  }
 }