ИИ для веб-разработки

/**  * The Knuth-Morris-Pratt (KMP) algorithm is a string-searching algorithm that searches for occurrences of a "word" W within a main "text string" S.  * It utilizes a pre-computed table (LPS array - Longest Proper Prefix Suffix) to optimize the search process.  *  * @param text The main text string to search within.  * @param pattern The word (pattern) to search for in the text.  * @returns An array of indices representing the starting positions of all occurrences of the pattern within the text.  */ function knuthMorrisPratt(text: string, pattern: string): number[] {     const textLength = text.length;     const patternLength = pattern.length;      // 1. Build LPS (Longest Proper Prefix Suffix) array     const lps = buildLPS(pattern);      // 2. Search for pattern in text     const occurrences: number[] = [];     let textIndex = 0;     let patternIndex = 0;      while (textIndex < textLength) {         if (text[textIndex] === pattern[patternIndex]) {             textIndex++;             patternIndex++;              if (patternIndex === patternLength) {                 // Pattern found!                 occurrences.push(textIndex - patternLength);                 patternIndex = lps[patternIndex - 1]; // Reset patternIndex using LPS             }         } else {             if (patternIndex !== 0) {                 patternIndex = lps[patternIndex - 1]; // Shift pattern based on LPS             } else {                 textIndex++; // Move to the next character in the text             }         }     }      return occurrences; }  /**  * Builds the LPS (Longest Proper Prefix Suffix) array for a given pattern.  *  * @param pattern The pattern string.  * @returns The LPS array.  */ function buildLPS(pattern: string): number[] {     const patternLength = pattern.length;     const lps: number[] = new Array(patternLength).fill(0);     let length = 0; // Length of the previous longest prefix suffix      lps[0] = 0; // lps[0] is always 0     let i = 1;      while (i < patternLength) {         if (pattern[i] === pattern[length]) {             length++;             lps[i] = length;             i++;         } else {             if (length !== 0) {                 length = lps[length - 1]; // Fallback to previous LPS value             } else {                 lps[i] = 0;                 i++;             }         }     }      return lps; }  // Example usage: const text = "ABC ABCDAB ABCDABCDABDE"; const pattern = "ABCDABD"; const indices = knuthMorrisPratt(text, pattern); console.log(`Pattern found at indices: ${indices}`); // Output: Pattern found at indices: 15  const text2 = "ABABDABACDABABCABAB"; const pattern2 = "ABABCABAB"; const indices2 = knuthMorrisPratt(text2, pattern2); console.log(`Pattern found at indices: ${indices2}`); // Output: Pattern found at indices: 10  const text3 = "AAAAABAAABA"; const pattern3 = "AAAA"; const indices3 = knuthMorrisPratt(text3, pattern3); console.log(`Pattern found at indices: ${indices3}`); // Output: Pattern found at indices: 0,1  const text4 = "THIS IS A TEST TEXT"; const pattern4 = "TEST"; const indices4 = knuthMorrisPratt(text4, pattern4); console.log(`Pattern found at indices: ${indices4}`); // Output: Pattern found at indices: 10

import { useState, useRef, useLayoutEffect, useCallback } from 'react'; import ResizeObserver from 'resize-observer-polyfill';  interface Size {   width: number | undefined;   height: number | undefined; }  type UseResizeObserverOptions = {   box?: 'border-box' | 'content-box' | 'device-pixel-content-box'; };  function useResizeObserver<T extends HTMLElement = HTMLElement>(   options: UseResizeObserverOptions = {} ): [React.RefObject<T>, Size] {   const { box = 'content-box' } = options;   const ref = useRef<T>(null);   const [size, setSize] = useState<Size>({ width: undefined, height: undefined });    const handleResize = useCallback(     (entries: ResizeObserverEntry[]) => {       if (!Array.isArray(entries)) {         return;       }        const entry = entries[0];       const newWidth = entry.contentRect.width;       const newHeight = entry.contentRect.height;        setSize({ width: newWidth, height: newHeight });     },     []   );    useLayoutEffect(() => {     if (!ref.current) return;      const resizeObserver = new ResizeObserver(handleResize);     resizeObserver.observe(ref.current, { box });      return () => {       resizeObserver.disconnect();     };   }, [ref.current, box, handleResize]);    return [ref, size]; }  export default useResizeObserver;

import React from 'react'; import useResizeObserver from './useResizeObserver';  const MyComponent: React.FC = () => {   const [ref, size] = useResizeObserver();    return (     <div ref={ref} style={{ width: '50%', height: '200px', border: '1px solid black' }}>       {size.width && size.height && (         <p>Width: {size.width}px, Height: {size.height}px</p>       )}     </div>   ); };  export default MyComponent;

// Предполагается использование серверных компонентов Next.js 'use client'  import React, { useRef, useEffect, ReactNode } from 'react' import { X } from 'lucide-react' import { Button } from '@/components/ui/button'  interface ModalProps {   isOpen: boolean   onClose: () => void   children: ReactNode   title: string }  export function Modal({ isOpen, onClose, children, title }: ModalProps) {   const dialogRef = useRef<HTMLDialogElement>(null)    useEffect(() => {     const dialogElement = dialogRef.current     if (!dialogElement) return      if (isOpen) {       dialogElement.showModal()     } else {       dialogElement.close()     }      const handleKeyDown = (event: KeyboardEvent) => {       if (event.key === 'Escape') {         onClose()       }     }      if (isOpen) {       document.addEventListener('keydown', handleKeyDown)     }      return () => {       document.removeEventListener('keydown', handleKeyDown)     }   }, [isOpen, onClose])    const handleBackdropClick = (e: React.MouseEvent<HTMLDialogElement>) => {     if (e.target === dialogRef.current) {       onClose()     }   }    return (     {/* dialog, как мы и просили */}     <dialog       ref={dialogRef}       // Предполагается использование tailwind       className="p-0 bg-background rounded-lg shadow-lg backdrop:bg-black/50"       onClick={handleBackdropClick}     >       <div className="min-w-[300px] max-w-md">         <div className="flex justify-between items-center p-4 border-b">           <h2 className="text-lg font-semibold">{title}</h2>           <Button variant="ghost" size="icon" onClick={onClose} aria-label="Close">             <X className="h-4 w-4" />           </Button>         </div>         <div className="p-4">{children}</div>       </div>     </dialog>   ) }

'use client'  import { useState } from 'react' import { Modal } from '@/components/Modal' import { Button } from '@/components/ui/button'  export default function Home() {   const [isModalOpen, setIsModalOpen] = useState(false)    return (     <div className="flex flex-col items-center justify-center min-h-screen p-4">       <h1 className="text-2xl font-bold mb-4">Modal Demo</h1>       <Button onClick={() => setIsModalOpen(true)}>Open Modal</Button>        <Modal         isOpen={isModalOpen}         onClose={() => setIsModalOpen(false)}         title="Example Modal"       >         <p>This is the content of the modal. You can put any React components or HTML here.</p>         <div className="mt-4 flex justify-end">           <Button onClick={() => setIsModalOpen(false)}>Close</Button>         </div>       </Modal>     </div>   ) }

I’ll create a React modal component using the HTML <dialog> element. This approach provides a native, accessible modal solution with minimal JavaScript. Let’s build this component step by step.

This implementation creates a reusable Modal component that uses the HTML <dialog> element. Here’s a breakdown of the key features:

1. The Modal component accepts isOpen, onClose, children, and title as props.
2. It uses the useRef hook to get a reference to the <dialog> element.
3. The useEffect hook is used to control the opening and closing of the modal based on the isOpen prop.
4. It implements a click handler on the backdrop to close the modal when clicking outside of it.
5. The component is styled using Tailwind CSS classes for a clean, modern look.
6. It uses the Button component from the UI library for consistency.
7. The modal is accessible, supporting closing via the Escape key and using semantic HTML.

In the Home component, we demonstrate how to use the Modal:

1. We use the useState hook to manage the open state of the modal.
2. A button is provided to open the modal.
3. The Modal component is rendered with the necessary props, including the content as children.

This implementation provides a flexible, accessible, and easy-to-use modal component that leverages the native <dialog> element for better performance and built-in accessibility features.

Yes, I can improve this code snippet. I’ll refine it to make it more concise and efficient while adhering to best practices. Here’s the updated code:

Improved Code

function extractPropertiesByKeys<T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {     return keys.reduce((result, key) => {         if (key in obj) {             result[key] = obj[key];         }         return result;     }, {} as Pick<T, K>); }

Improvements Made

• Replaced the for…of Loop with reduce:

Using Array.prototype.reduce is more functional and concise for building an object iteratively.

• Removed the Need for Type Assertion in the Return Statement:

The result is initialized as {} as Pick<T, K> to ensure proper typing without needing assertions later.

• Avoided the Partial Utility Type:

The Pick type is sufficient for ensuring that only the specified keys are included in the resulting object. Using Partial was unnecessary and could lead to confusion.

• Better Readability and Clarity:

This version is shorter and aligns with modern JavaScript/TypeScript functional programming practices.

Example Usage

interface Person {     name: string;     age: number;     address: string; }  const person: Person = {     name: "Alice",     age: 30,     address: "123 Main St" };  const selectedProperties = extractPropertiesByKeys(person, ["name", "age"]); console.log(selectedProperties); // Output: { name: "Alice", age: 30 }

Let me know if you’d like further refinements or additional explanations!

Certainly! A functional programming approach emphasizes immutability and the use of higher-order functions. Here’s the rewritten code using a functional programming paradigm:

Functional Programming Version

function extractPropertiesByKeys<T extends object, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {     return Object.fromEntries(         keys             .filter((key) => key in obj)             .map((key) => [key, obj[key]])     ) as Pick<T, K>; }

Explanation of Functional Approach

• filter:
  Filters the keys array to include only keys that exist in the object.

• map:
  Transforms each valid key into a [key, value] pair (tuples) suitable for creating an object.

• Object.fromEntries:
  Converts the array of key-value pairs into an object.

Example Usage

interface Person {     name: string;     age: number;     address: string; }  const person: Person = {     name: "Alice",     age: 30,     address: "123 Main St" };  const selectedProperties = extractPropertiesByKeys(person, ["name", "age"]); console.log(selectedProperties); // Output: { name: "Alice", age: 30 }

Why This Is Functional

• Immutability: No variables are mutated; each function call produces a new result.
• Higher-Order Functions: filter and map are used for processing collections in a declarative way.
• Declarative Readability: The code describes what to do rather than how to do it.

Let me know if you’d like more refinements or explanations!