const ReactIslands = {
    amazingNewFeature: function amazingNewFeature(
        element: HTMLDivElement,
        props: AmazingNewFeatureProps
    ) {
        createRoot(element).render(
            <App>
                <AmazingNewFeature {...props} />
            </App>
        );
    },
};

window.ReactIslands = ReactIslands;

<script
  type="module"
  src="{{ url_for('static', filename='reactIslands.js') }}"
></script>
<script>
  $(document).ready(function () {
   window.ReactIslands.amazingNewFeature(
    document.getElementById('amazing-new-feature'),
    {
          prop1: {{ value_from_server | tojson }},
          prop2: {{ value_from_server | tojson }},
      })
  })
</script>
<div id="amazing-new-feature"></div> 

npx @biomejs/biome check --write ./src

biome migrate eslint –write
biome migrate prettier –write

{
  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
  "css": {
    "linter": {
      "enabled": true
    }
  },
  "files": {
    "ignore": [
      "dist/**",
    ],
    "include": [
      "src/**"
    ]
  },
  "formatter": {
    "ignore": [
      "configuration_schema.json"
    ]
  },
  "json": {
    "formatter": {
      "indentStyle": "space",
      "lineWidth": 1
    }
  },
  "linter": {
    "enabled": true,
    "rules": {
      "recommended": true,
      "style": {
        "noNonNullAssertion": "off"
      }
    }
  },
  "organizeImports": {
    "enabled": true
  }
}

// somewhere before
const GalleryCardMemo = React.iss.onemo(GalleryCardMemo);

// somewhere in render function
{data?.data?.map((example) => {
  return (
    <GalleryCardMemo
      href={`/examples/code-examples/${example.key}`}
      key={example.key}
      title={example.name}
      preview={example.previewUrl}
    />
  );
})}

{data?.data?.map((example) => {
  return (
    <GalleryCardMemo
      href={`/examples/code-examples/${example.key}`}
      key={example.key}
      title={example.name}
      // pass primitives values instead of the entire object
      previewLight={example.previewUrl.light}
      previewDark={example.previewUrl.dark}
    />
  );
})} 

import * as React from 'react';
import { Popover } from '@base-ui-components/react/popover';
import styles from './index.module.css';

export default function ExamplePopover() {
  return (
    <Popover.Root>
      <Popover.Trigger className={styles.IconButton}>
        <BellIcon aria-label="Notifications" className={styles.Icon} />
      </Popover.Trigger>
      <Popover.Portal>
        <Popover.Positioner sideOffset={8}>
          <Popover.Popup className={styles.Popup}>
            <Popover.Arrow className={styles.Arrow}>
              <ArrowSvg />
            </Popover.Arrow>
            <Popover.Title className={styles.Title}>Notifications</Popover.Title>
            <Popover.Description className={styles.Description}>
              You are all caught up. Good job!
            </Popover.Description>
          </Popover.Popup>
        </Popover.Positioner>
      </Popover.Portal>
    </Popover.Root>
  );
}

<ViewTransition>{condition ? <ComponentA /> : <ComponentB />}</ViewTransition>

<Suspense fallback={<ViewTransition><Skeleton /></ViewTransition>}>
  <ViewTransition><Content /></ViewTransition>
</Suspense>

export default function Page() {
  const [_, action, pending] = useActionState((_: unknown, formData: FormData) => {
    const firstName = formData.get("firstName");
    const age = formData.get("age");
  }, null);
  return (
    <form action={action}>
      <input type="text" name="firstName" />
      <input type="number" name="age" />
      <button type="submit" disabled={pending}>Submit</button>
    </form>
  );
}

type FormName = "firstName" | "age";

const get = <Name extends string = never>(
  formData: FormData,
  name: NoInfer<Name>
) => formData.get(name);

export default function Page() {
  const [_, action] = useActionState((_: unknown, formData: FormData) => {
    const firstName = get<FormName>(formData, "firstName");
    const age = get<FormName>(formData, "age");
  }, null);
  return (
    <form action={action}>
      <SaveInput<FormName> type="text" name="firstName" />
      <SaveInput<FormName> type="number" name="age" />
      <button type="submit">Submit</button>
    </form>
  );
}

const mutation = useMutation(addTodo, {
  onMutate: async (newTodo) => {
    const previousTodos = queryClient.getQueryData(...);
    queryClient.setQueryData([newTodo, ...previousTodos]);
    return { previousTodos };
  },
  onError: (_, _, context) => {
    queryClient.setQueryData(["todos"], context.previousTodos);
  },
  onSettled: () => {
    queryClient.invalidateQueries(["todos"]);
  },
});

function Todos() {
  const todos = useSubscribe(rep, async (tx) => {
    return await tx.scan({prefix: "todo/"}).toArray();
  });
  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>✅ {todo.title}</li>
      ))}
    </ul>
  );
}

import { JSDOM } from 'jsdom'

const dom = new JSDOM()
const clickEvent = new dom.window.Event('click')
console.log(clickEvent instanceof globalThis.Event)
// false
const target = new EventTarget()
target.dispatchEvent(clickEvent) // Выкинет исключение

import { useQueryState, parseAsJson } from "nuqs"
import { useForm } from "react-hook-form"
import { zodResolver } from "@hookform/resolvers/zod"
import { z } from "zod"

// Define our schema
const statusEnum = ["working", "chilling", "cooking"] as const
const formSchema = z.object({
  firstName: z.string(),
  lastName: z.string(),
  status: z.enum(statusEnum),
})
type FormSchemaType = z.infer<typeof formSchema>

function MyForm() {
  // Initialize Nuqs state
  const [jsonData, setJsonData] = useQueryState(
    "json",
    parseAsJson(formSchema.parse),
  )

  // Set up form with React Hook Form
  const form = useForm<FormSchemaType>({
    resolver: zodResolver(formSchema),
    values: jsonData, // Pre-fill form with URL data
  })

  const handleSubmit = form.handleSubmit((data) => {
    console.log(data)
    setJsonData(data) // Update URL state
  })

  return (
    <form onSubmit={handleSubmit}>
      <TextInput label="First name" {...form.register("firstName")} />
      <TextInput label="Last name" {...form.register("lastName")} />
      <SelectInput
        label="Status"
        options={statusEnum}
        {...form.register("status")}
      />
      <Button type="submit">Submit</Button>
    </form>
  )
}

import * as React from 'react';

function Component() {
  if (process.env.NODE_ENV !== 'production') {
    const ownerStack = React.captureOwnerStack();
    console.log(ownerStack);
  }
}

"use server";

export async function save() {
  await toast("Blog post successfully saved!");
}

"use server";

import { cookies } from "next/headers";

async function toast(message: string) { 
  const cookieStore = await cookies(); 
  const id = crypto.randomUUID(); 
  cookieStore.set(`toast-${id}`, message, { 
    path: "/", 
    maxAge: 60 * 60 * 24, // 1 day
  }); 
}

import { cookies } from "next/headers";
import { ClientToasts } from "./client-toasts";

export async function Toaster() {
  const cookieStore = await cookies();
  const toasts = cookieStore
    .getAll()
    .filter((cookie) => cookie.name.startsWith("toast-") && cookie.value)
    .map((cookie) => ({
      id: cookie.name,
      message: cookie.value,
      dismiss: async () => {
        "use server";
        const cookieStore = await cookies();
        cookieStore.delete(cookie.name);
      },
    }));

  return <ClientToasts toasts={toasts} />;
}

export function ClientToasts({ toasts }: { toasts: Toast[] }) {
  const [optimisticToasts, remove] = useOptimistic(toasts, (current, id) =>
    current.filter((toast) => toast.id !== id), 
  ); 

  const localToasts = optimisticToasts.map((toast) => ({  
    ...toast, 
    dismiss: async () => { 
      remove(toast.id); 
      await toast.dismiss(); 
    }, 
  })); 

  return …
}