Не нашел информацию, как сделать имплементацию функции в каждом окружении (client-side и server-side) вручную, без транспиляции модуля

По опыту этот warning не имеет смысла. Чаще всего, длина строчки используется только в кейсе string.length !== 0. Потенциальная проблема еще актуальна, для нее нужно придумать какое-то другое решение отдельно. Например, получать длину строки тем же алгоритмом, что и в JS (тут есть возможные проблемы с кодировкой и emoji)

Написать пошаговую инструкцию для базового create-react-app приложения.

Дано:

export const IconLeft = ({ ref }: Props) => {
  const onClick = () => {
    ref?.current?.scroll({ left: ref.current.scrollLeft - 50, behavior: 'smooth' });
  };

  return (
    <div onClick={onClick} className="ico--left">
      <Icon24 fill="rgba(153,162,173, 1)" />
    </div>
  );
};

Ожидаемый результат: переменная ref отсутствует в выводе, т.к. используется только внутри клиентского обработчика.
Фактический результат: в выводе есть присваивание переменной (как результат деструктуризации)

Пример нерабочего кода:

function dvf(a: number, b: number = 123, c: boolean = true) {
  console.log(a, b, c);
}

function dvdo({a, b = 123, c = true}: { a: number, b?: number, c?: boolean }) {
  console.log(a, b, c);
}

function dvda([a, b = 123, c = true]: [number, number?, boolean?]) {
  console.log(a, b, c);
}

console.log(dvf(1));
console.log(dvdo({ a: 1 }));
console.log(dvda([1]));

Хочется поддержать эту фичу, т.к. она выглядит как часто используемая

Некоторые имена атрибутов в react отличаются от html-представления. Сейчас мы поддерживаем только перевод className в class, но это не единственный такой атрибут (есть еще htmlFor, например). Нужно найти список таких атрибутов и поддержать их всех.

Как сейчас

Typecast в PHP добавляется только для переменных, созданных через десктрутуризацию (const { foo } from props).

Как ожидается

Нужно применять typecast также для использований через props.foo

https://github.com/VKCOM/noverify

Добавить в таски, настроить gh actions

• Про архитектуру elephize
• Про принципы разработки и то как быстро вкатиться, про инструменты и прочее.
• Про сложные части системы
• Про накопленный техдолг

Хочется уметь игнорировать целые папки и модули, в которых 100% неподдерживаемый код для транспиляции. Не проверял, возможно ли это сейчас, но было бы круто в этих glob поддержать алисы. Например,
"importRules": { "#helpers": { "ignore": true } }

При деструктуризации пропсов, в PHP переменная кастится к базовому типу, даже если там пришел null (например, для типа foo?: string в PHP будет генерироваться код $foo = (string)$props['foo'].

В watch режиме некоторые mixed значения в PHPDoc заменяются другими (в моем случае, кажется, проставился @return string в месте, где ожидается mixed), а некоторые JSX тэги оборчиваются в IntrinsicElement::escape.

Возможно, причина первой ошибки в том, что у меня кастомный IntrinsicElement, где JSX возвращает mixed вместо string, а по-дефолту Elephize из JSX возвращает именно string

При компиляции возникают ошибки вида Identifier "props" was used but was never declared. This is compile error
Проявляется для кода следующего вида:

interface Props { /* ... */ }

// @elephizeTarget
export const Component: React.FC<Props> = (props: Props) => { ... };

Лечится убиранием аннотации :Props из сигнатуры функции. Не очень нормальная ситуация, такая сигнатура должна быть допустима.

В JS коде иногда попадаются переменные, которые начинаются с $. После прохода через elephize, такой код становится невалидным. Нужно эскейпить $ на _, например.

При использовании компонента-функции до его определения, Elephize ругается, что не может найти ее определения. Баг НЕ воспроизводится при таких же условиях, если функции не являются React-компонентами

Воспроизведение (псевдокод):

// @elephizeTarget
function Usage() {
  return <Component />
}

// @elephizeTarget
function Component() {

}

Комплексные типы вроде { [key: string]: string } могут быть более точно представлены как string[] на стороне php. Подумать какие еще варианты комплексных типов можно представить более точно. Рассмотреть возможные использования конструкции tuple()

Такая защита от дурака наверно недостаточна, так как тут например может быть массив или ещё какое значение приводимое к опасной строке.

Вот пример TS-компонента, при котором использование компонента в PHP может привести к небезопасной вставке строки:

@@ -4,10 +4,15 @@
 const injection = `<img src=x onerror=alert()>`;
 
 // @elephizeTarget
-export const EscapeHtmlChars = ({ children }: { children: React.ReactNode[] }) => {
+export const EscapeHtmlChars = ({
+  children,
+  // Dangerous string from input or server, received from props
+  mixedValue = [injection]
+}: { children: React.ReactNode[], mixedValue?: string[] }) => {
   const arr = [1, 2, 3, 4];
   return (
     <div className="App">
+      <div>{mixedValue}</div>
       <h1>Hello CodeSandbox</h1>
       <h2>Start editing to see some magic happen!</h2>
       {arr.map((v) => <span>{injection}{v}</span>)}

Конкретных решений не предложу.

Может тогда вынести этот вопрос отдельным issue?

Originally posted by @fix-fix in #112 (comment)

• Происследовать ограничения
• Подготовить прототип
• Согласовать с командой VKUI

При обращении к свойствам this генерируется невалидный PHP-код.
Выражение вида this.property преобразуется в property["undefined"]

Пример TS input:

function test() {
  console.log(window.setTimeout); // OK
  // @ts-ignore
  console.log(this.setTimeout);
}

Пример PHP output:

public function test() {
    \VK\Elephize\Builtins\Console::log($window["setTimeout"]);
    \VK\Elephize\Builtins\Console::log(setTimeout["undefined"]);
}

Судя по доке this не поддерживается, но он всё равно может где-то использоваться в коде. И если его не запретить на уровне транспайлинга в PHP, то нужно поддерживать его кодген.
Само использование this почти всегда скорее невалидно, если не поддержаны классы, так что возможно вообще стоит при использовании this завершать транспайлинг ошибкой.

Сейчас же из-за ошибки генерируется невалидный PHP-код, который может не скомпилироваться в KPHP.

Сейчас вызов useMemo просто отбрасывается, но это можно улучшить, если отбрасывать только мемоизацию, но оставить мемоизируемый на клиенте код.

Примерная схема работы:

• взять первый аргумент useMemo - порождающую функцию
• вытащить ее в анонимную функцию модуля
• по месту использования вызвать ее для получения значения
• остальные аргументы и сам вызов - дропнуть

<span>{text}</span> - экранируется, а <>{text}</> - нет

Сейчас мы требует четкого указания конкретного файла в импорте. Т.е. если имеем файл ./foo/index.ts, то

import { Foo } from './foo/index'; // работает
import { Foo } from './foo'; // не работает

Хочется поддержать это в сокращенной форме, не затаскивая полный резолвинг модулей из ноды.

• Поддержать имена index.ts, index.tsx. Опционально: index.js, index.jsx
• Обратить внимание на производительность, замерить время компиляции до и после правок
• Может быть нетривиальная интеграция в ModuleRegistry и его окрестности, поскольку местами имя php-класса может зависеть от имени исходного файла, а имя php-файла - в свою очередь от имени php-класса. Надо проверять тут тщательным образом.
• Опционально (но очень полезно): выдавать ошибку/предупреждение в случае, если найдено более одного файла с указанными именами одновременно. В общем случае это undefined behavior и ничего хорошего тут ждать нельзя

Если импортируемый модуль содержит в своем пути папку, которая является ключевым словом в PHP, то при использовании будет ошибка Keywords as part of namespace are only allowed since PHP 8.0 . В моем случае одной из папок оказалась 'static'