Fix | Multiple children error

packages/core/core.ts

@@ -207,10 +207,10 @@ class Marquee {
     this.resizeObserver?.disconnect()
     this.resizeObserver = undefined
 
-    // // Remove the cloned child if it exists
-    // if (this.clonedChild && this.clonedChild.parentNode === this.root) {
-    //   this.root.removeChild(this.clonedChild)
-    // }
+    // Remove the cloned child if it exists
+    if (this.clonedChild && this.clonedChild.parentNode === this.root) {
+      this.root.removeChild(this.clonedChild)
+    }
     this.clonedChild = undefined
     this.originalChild = undefined
   }

packages/react/index.tsx

@@ -33,17 +33,15 @@ const useMarquee = <T extends HTMLDivElement>({
     }
 
     marquee.initialize(children[0] as HTMLElement)
+
+    return () => marquee.destroy()
   }, [])
 
   useEffect(() => {
     if (!marquee) return
     if (play) marquee.play()
     else marquee.pause()
-  }, [play])
-
-  useEffect(() => {
-    return () => marquee?.destroy()
-  }, [])
+  }, [play, marquee])
 
   return [rootRef, marquee] as const
 }

templates/basic/app/components/header.tsx

@@ -1,5 +1,6 @@
 import { Link } from 'react-router'
 import Logo from './logo'
+import { isDevelopment } from '@/lib/constants'
 
 export const links = [
   {
@@ -14,25 +15,41 @@ export const links = [
     label: 'discord',
     to: 'https://discord.gg/UJtQFJ3X3z',
   },
+  isDevelopment
+    ? {
+        label: 'Test Page',
+        to: '/test',
+      }
+    : undefined,
 ]
 
+const checkIsAbsoluteUrl = (url: string) => {
+  return url.startsWith('http')
+}
+
 export default function Header() {
   return (
     <div className="flex items-center px-em-[32] h-em-[64] bg-foreground text-background fixed top-0 left-1/2 -translate-x-1/2 rounded-b-em-[24] z-50">
-      <Logo className="text-background h-em-[20] mr-em-[20]" />
+      <Link to="/">
+        <Logo className="text-background h-em-[20] mr-em-[20]" />
+      </Link>
 
       <div className="flex items-center gap-x-em-[20] font-mono uppercase text-em-[16/16] leading-[1]">
-        {links.map((link) => (
-          <Link
-            key={link.label}
-            to={link.to}
-            target="_blank"
-            rel="noopener noreferrer"
-            className="underline underline-offset-2"
-          >
-            {link.label}
-          </Link>
-        ))}
+        {links.map((link) => {
+          if (!link) return null
+          const isAbsoluteUrl = checkIsAbsoluteUrl(link.to)
+          return (
+            <Link
+              key={link.label}
+              to={link.to}
+              target={isAbsoluteUrl ? '_blank' : undefined}
+              rel={isAbsoluteUrl ? 'noopener noreferrer' : undefined}
+              className="underline underline-offset-2"
+            >
+              {link.label}
+            </Link>
+          )
+        })}
       </div>
     </div>
   )

templates/basic/app/lib/constants.ts

@@ -4,7 +4,7 @@ export const isServer = typeof window === 'undefined'
 
 export const isClient = typeof window !== 'undefined'
 
-export const isDevelopment = import.meta.env.NODE_ENV === 'development'
+export const isDevelopment = import.meta.env.MODE === 'development'
 
 const base_url =
   import.meta.env.VITE_VERCEL_PROJECT_PRODUCTION_URL || import.meta.env.VITE_VERCEL_URL || import.meta.env.VITE_SITE_URL

templates/basic/app/routes.ts

@@ -1,3 +1,3 @@
-import { type RouteConfig, index } from '@react-router/dev/routes'
+import { type RouteConfig, index, route } from '@react-router/dev/routes'
 
-export default [index('routes/home/index.tsx')] satisfies RouteConfig
+export default [index('routes/home/index.tsx'), route('/test', 'routes/test/index.tsx')] satisfies RouteConfig

templates/basic/app/routes/test/index.tsx

@@ -0,0 +1,13 @@
+import { Marquee } from '@joycostudio/marquee/react'
+
+export default function Test() {
+  return (
+    <div className="h-screen flex items-center">
+      <Marquee speed={100} direction={1} marqueeClassName="py-em-[24] bg-foreground/10">
+        <h1 className="text-8xl font-bold uppercase">
+          This page is to test how the marquee behaves when the component is unmounted.
+        </h1>
+      </Marquee>
+    </div>
+  )
+}