npx create-yopta-app

create-yopta-app — это инструмент для создания React + Next.js приложений на языке YoptaScript.

Почему YoptaScript? Да хуй его знает, просто я хотел написать сайт naebalovooo.ru на родном языке

Использование:

npx create-yopta-app <name>

Не забудьте указать имя папки, куда вставится ваше приложение. Если не написать то я не знаю что будет, не проверял

Ограничения:

Есть ограничения в написании jsx, например:

• Внутри {} в JSX надо писать код на Typescript, потому что код там не конвертируется, а мне лень писать парсер для этого, и в самом yopascript нет нормального парсера, поэтому там надо писать typescript вместо yoptascript
• Не пишите текст возле JSX элемента, например:

<div>
  <h1>НАЕБАЛОВО.РУ</h1>
  {/* ТЕКСТ НИЖЕ ОБЕРНИТЕ В <span> */}
  Лучший сайт для поиска достоверной информации
  {/* ИНАЧЕ ТЕКСТ БУДЕТ ЗАМЕНЯТЬСЯ НА JS KEYWORDS */}
</div>

Другие ограничения:

• Русские названия переменных могут заменяться на другие из-за того, что разрабы YoptaScript не сумели сделать нормальный парсер. Поэтому, если название вашей переменной на русском языке, проверьте через конвертор, меняется ли оно на что-нибудь другое. И только тогда используйте.

Проблема с клиентскими компонентами

Если вы будете создавать клиентские компоненты через .yopta, то они не будут работать

Это из-за того, что Next.js понимает 'use client' только файлов js и ts.

Я исправил это через специальную обёртку, которая уже будет написана на typescript, и точно будет клиентской

Скрипт сделает всё за вас. Он найдёт все клиентские yopta компоненты и экспортирует их в отдельном ts файле.

Решение:

• Запустите npm run fix-client чтобы создать файл src/client-wrappers.tsx, который будет экспортировать ваши клиентские компоненты.
• Используйте их в вашем приложении, например import { Huita } from '@/client-wrappers'

Поддержка yoptascript в vscode

Для того, чтобы vscode подсвечивал вам синтаксис языка, и не выёбывался своими "cannot find name", рекомендуется установить следующие настройки в vscode:

{
  "files.associations": {
    "*.yopta": "typescriptreact"
  },
  "[typescriptreact]": {
    "editor.semanticHighlighting.enabled": false
  },
  "typescript.validate.enable": false,
  "javascript.validate.enable": false
}

Тут просто добавьте, не заменяйте весь конфиг на это через Ctrl V, а по-умному добавляйте, если есть - соединяйте. И чтобы открыть эти настройки нажмите Ctrl+Shift+P, дальше найдите Open user setting (JSON) и там отредачьте чё надо

И если вы это добавите, то рекомендую включать обратно проверку ошибок, если вы вдруг захотите пописать на обычном js/ts (но крайне не рекомендуется на них писать, если есть yopta)

Как залить в прод такое приложение

Тут уже есть докерфайл, вы просто на VPS залите всё через git, потом запустите через nginx и готово. И SEO на максималку сделайте, чтобы сайты на YoptaScript стали популярными.