first commit

crates/next-custom-transforms/tests/fixture/optimize_server_react/1/input.js

@@ -0,0 +1,31 @@
+import { useEffect, useLayoutEffect, useMemo } from 'react'
+import React from 'react'
+
+export default function App() {
+  useEffect(() => {
+    console.log('Hello World')
+  }, [])
+
+  useLayoutEffect(() => {
+    function foo() {}
+    return () => {}
+  }, [1, 2, App])
+
+  useLayoutEffect(() => {}, [runSideEffect()])
+  useEffect(() => {}, [1, runSideEffect(), 2])
+  useEffect(() => {}, getArray())
+
+  const a = useMemo(() => {
+    return 1
+  }, [])
+
+  React.useEffect(() => {
+    console.log('Hello World')
+  })
+
+  return (
+    <div>
+      <h1>Hello World</h1>
+    </div>
+  )
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/1/output.js

@@ -0,0 +1,33 @@
+import { useEffect, useLayoutEffect, useMemo } from 'react';
+import React from 'react';
+export default function App() {
+    process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>{
+        console.log('Hello World');
+    }, []);
+    process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useLayoutEffect(()=>{
+        function foo() {}
+        return ()=>{};
+    }, [
+        1,
+        2,
+        App
+    ]);
+    useLayoutEffect(()=>{}, [
+        runSideEffect()
+    ]);
+    useEffect(()=>{}, [
+        1,
+        runSideEffect(),
+        2
+    ]);
+    useEffect(()=>{}, getArray());
+    const a = useMemo(()=>{
+        return 1;
+    }, []);
+    process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && React.useEffect(()=>{
+        console.log('Hello World');
+    });
+    return <div>
+      <h1>Hello World</h1>
+    </div>;
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/2/input.js

@@ -0,0 +1,65 @@
+// https://github.com/vercel/commerce/blob/18167d22f31fce6c90f98912e514243236200989/components/layout/search/filter/dropdown.tsx#L16
+
+'use client'
+
+import { usePathname, useSearchParams } from 'next/navigation'
+import { useEffect, useRef, useState } from 'react'
+
+import { ChevronDownIcon } from '@heroicons/react/24/outline'
+import { FilterItem } from './item'
+
+export default function FilterItemDropdown({ list }) {
+  const pathname = usePathname()
+  const searchParams = useSearchParams()
+  const [active, setActive] = useState('')
+  const [openSelect, setOpenSelect] = useState(false)
+  const ref = useRef(null)
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (ref.current && !ref.current.contains(event.target)) {
+        setOpenSelect(false)
+      }
+    }
+
+    window.addEventListener('click', handleClickOutside)
+    return () => window.removeEventListener('click', handleClickOutside)
+  }, [])
+
+  useEffect(() => {
+    list.forEach((listItem) => {
+      if (
+        ('path' in listItem && pathname === listItem.path) ||
+        ('slug' in listItem && searchParams.get('sort') === listItem.slug)
+      ) {
+        setActive(listItem.title)
+      }
+    })
+  }, [pathname, list, searchParams])
+
+  return (
+    <div className="relative" ref={ref}>
+      <div
+        onClick={() => {
+          setOpenSelect(!openSelect)
+        }}
+        className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30"
+      >
+        <div>{active}</div>
+        <ChevronDownIcon className="h-4" />
+      </div>
+      {openSelect && (
+        <div
+          onClick={() => {
+            setOpenSelect(false)
+          }}
+          className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md dark:bg-black"
+        >
+          {list.map((item, i) => (
+            <FilterItem key={i} item={item} />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/2/output.js

@@ -0,0 +1,52 @@
+// https://github.com/vercel/commerce/blob/18167d22f31fce6c90f98912e514243236200989/components/layout/search/filter/dropdown.tsx#L16
+'use client';
+import { usePathname, useSearchParams } from 'next/navigation';
+import { useEffect, useRef, useState } from 'react';
+import { ChevronDownIcon } from '@heroicons/react/24/outline';
+import { FilterItem } from './item';
+export default function FilterItemDropdown({ list }) {
+    const pathname = usePathname();
+    const searchParams = useSearchParams();
+    const [active, setActive] = [
+        '',
+        ()=>null
+    ];
+    const [openSelect, setOpenSelect] = [
+        false,
+        ()=>null
+    ];
+    const ref = useRef(null);
+    process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>{
+        const handleClickOutside = (event)=>{
+            if (ref.current && !ref.current.contains(event.target)) {
+                setOpenSelect(false);
+            }
+        };
+        window.addEventListener('click', handleClickOutside);
+        return ()=>window.removeEventListener('click', handleClickOutside);
+    }, []);
+    process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>{
+        list.forEach((listItem)=>{
+            if ('path' in listItem && pathname === listItem.path || 'slug' in listItem && searchParams.get('sort') === listItem.slug) {
+                setActive(listItem.title);
+            }
+        });
+    }, [
+        pathname,
+        list,
+        searchParams
+    ]);
+    return <div className="relative" ref={ref}>
+      <div onClick={()=>{
+        setOpenSelect(!openSelect);
+    }} className="flex w-full items-center justify-between rounded border border-black/30 px-4 py-2 text-sm dark:border-white/30">
+        <div>{active}</div>
+        <ChevronDownIcon className="h-4"/>
+      </div>
+      {openSelect && <div onClick={()=>{
+        setOpenSelect(false);
+    }} className="absolute z-40 w-full rounded-b-md bg-white p-4 shadow-md dark:bg-black">
+          {list.map((item, i)=><FilterItem key={i} item={item}/>)}
+        </div>}
+    </div>;
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/3/input.js

@@ -0,0 +1,16 @@
+import { useState } from 'react'
+
+export default function App({ x }) {
+  const [state, setState] = useState(0)
+  const [state2, setState2] = useState(() => 0)
+  const [state3, setState3] = useState(x)
+  const s = useState(0)
+  const [state4] = useState(0)
+  const [{ a }, setState5] = useState({ a: 0 })
+
+  return (
+    <div>
+      <h1>Hello World</h1>
+    </div>
+  )
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/3/output.js

@@ -0,0 +1,20 @@
+import { useState } from 'react';
+export default function App({ x }) {
+    const [state, setState] = [
+        0,
+        ()=>null
+    ];
+    const [state2, setState2] = useState(()=>0);
+    const [state3, setState3] = useState(x);
+    const s = useState(0);
+    const [state4] = useState(0);
+    const [{ a }, setState5] = [
+        {
+            a: 0
+        },
+        ()=>null
+    ];
+    return <div>
+      <h1>Hello World</h1>
+    </div>;
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/4/input.js

@@ -0,0 +1,28 @@
+const useEffect = 1
+import { useLayoutEffect, useMemo } from 'react'
+const React = 2
+
+export default function App() {
+  useEffect(() => {
+    console.log('Hello World')
+  }, [])
+
+  useLayoutEffect(() => {
+    function foo() {}
+    return () => {}
+  }, [1, 2, App])
+
+  const a = useMemo(() => {
+    return 1
+  }, [])
+
+  React.useEffect(() => {
+    console.log('Hello World')
+  })
+
+  return (
+    <div>
+      <h1>Hello World</h1>
+    </div>
+  )
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/4/output.js

@@ -0,0 +1,25 @@
+const useEffect = 1;
+import { useLayoutEffect, useMemo } from 'react';
+const React = 2;
+export default function App() {
+    useEffect(()=>{
+        console.log('Hello World');
+    }, []);
+    process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useLayoutEffect(()=>{
+        function foo() {}
+        return ()=>{};
+    }, [
+        1,
+        2,
+        App
+    ]);
+    const a = useMemo(()=>{
+        return 1;
+    }, []);
+    React.useEffect(()=>{
+        console.log('Hello World');
+    });
+    return <div>
+      <h1>Hello World</h1>
+    </div>;
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/5/input.js

@@ -0,0 +1,15 @@
+import { ClientComponent } from './ClientComponent'
+
+export default async function Page() {
+  return (
+    <>
+      <div>
+        This fixture is to assert where the bootstrap scripts and other required
+        scripts emit during SSR
+      </div>
+      <div>
+        <ClientComponent />
+      </div>
+    </>
+  )
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/5/output.js

@@ -0,0 +1,12 @@
+import { ClientComponent } from './ClientComponent';
+export default async function Page() {
+    return <>
+      <div>
+        This fixture is to assert where the bootstrap scripts and other required
+        scripts emit during SSR
+      </div>
+      <div>
+        <ClientComponent/>
+      </div>
+    </>;
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/6/input.js

@@ -0,0 +1,12 @@
+import { useState, useEffect, useLayoutEffect } from 'react'
+import React from 'react'
+
+const Component = ({ children, fallback }) => {
+  const [mounted, setMounted] = useState(false)
+  useEffect(() => setMounted(true), [])
+  if (!mounted) {
+    return fallback ?? /* @__PURE__ */ jsx(Fragment, {})
+  }
+  return children
+}
+export { Component }

crates/next-custom-transforms/tests/fixture/optimize_server_react/6/output.js

@@ -0,0 +1,14 @@
+import { useState, useEffect, useLayoutEffect } from 'react';
+import React from 'react';
+const Component = ({ children, fallback })=>{
+    const [mounted, setMounted] = [
+        false,
+        ()=>null
+    ];
+    process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>setMounted(true), []);
+    if (!mounted) {
+        return fallback ?? /* @__PURE__ */ jsx(Fragment, {});
+    }
+    return children;
+};
+export { Component };

crates/next-custom-transforms/tests/fixture/optimize_server_react/7/input.js

@@ -0,0 +1,31 @@
+import { useEffect, useLayoutEffect, useMemo } from 'react'
+import * as React from 'react'
+
+export default function App() {
+  useEffect(() => {
+    console.log('Hello World')
+  }, [])
+
+  useLayoutEffect(() => {
+    function foo() {}
+    return () => {}
+  }, [1, 2, App])
+
+  useLayoutEffect(() => {}, [runSideEffect()])
+  useEffect(() => {}, [1, runSideEffect(), 2])
+  useEffect(() => {}, getArray())
+
+  const a = useMemo(() => {
+    return 1
+  }, [])
+
+  React.useEffect(() => {
+    console.log('Hello World')
+  })
+
+  return (
+    <div>
+      <h1>Hello World</h1>
+    </div>
+  )
+}

crates/next-custom-transforms/tests/fixture/optimize_server_react/7/output.js

@@ -0,0 +1,33 @@
+import { useEffect, useLayoutEffect, useMemo } from 'react';
+import * as React from 'react';
+export default function App() {
+    process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useEffect(()=>{
+        console.log('Hello World');
+    }, []);
+    process.env.__NEXT_PRIVATE_MINIMIZE_MACRO_FALSE && useLayoutEffect(()=>{
+        function foo() {}
+        return ()=>{};
+    }, [
+        1,
+        2,
+        App
+    ]);
+    useLayoutEffect(()=>{}, [
+        runSideEffect()
+    ]);
+    useEffect(()=>{}, [
+        1,
+        runSideEffect(),
+        2
+    ]);
+    useEffect(()=>{}, getArray());
+    const a = useMemo(()=>{
+        return 1;
+    }, []);
+    React.useEffect(()=>{
+        console.log('Hello World');
+    });
+    return <div>
+      <h1>Hello World</h1>
+    </div>;
+}