Добавить поддержку html + css

[fey]

Problem description

Сейчас поддерживается только JS. Добавляем поддержку HTML + css

Proposed solution

Оставляем слева такой же редактор. Ставим язык html. Вместо терминала справа выводим блок, в котором будет рендериться html + css

Сперва можно разработать интерфейс, потом бекенд.

Интерфейс страницы редактора должен зависеть от "языка" сниппета.

[fey]

Необходимо подготовить интерфейс и бекенд. Задачи можно сделать независимо.

[Lena05k]

Тут фронтенд подойдет?

[fey]

да, тут бекенд и фронтенд, можно вдвоем делать (один бек, другой фронт)

[Lena05k]

Давай я займусь фронтендом

[Lena05k]

Не получается запустить http://localhost:3000/

При запуске make start у меня ругается:

Error: ENOSPC: System limit for number of file watchers reached, watch ../runit/frontend/public
Emitted 'error' event on FSWatcher instance at
Node.js v18.17.1
error Command failed with exit code 1.
error Command failed
RpcIpcMessagePortClosedError: Cannot send the message - the message port has been closed for the process.

[fey]

@Lena05k посмотрите на стековерфлоу https://stackoverflow.com/questions/55763428/react-native-error-enospc-system-limit-for-number-of-file-watchers-reached

[Lena05k]

Есть ли макет, где я могу посмотреть, как нужно реализовать, или я должна придумать? Я посмотрела на другой сниппет Replit, там в одном редакторе присутствуют три файла: js, html, css. Так нужно реализовать?

[fey]

@Lena05k пока у нас нет поддержки работы нескольких файлов. Я предлагаю ограничиться работой с одним файлом.
Т.е. базой у нас будет html файл, внутри которого (пока) можно писать css.

Макета пока нет, можно ориентироваться на тот дизайн, что у нас есть. Плюсом вы можете создать draft пулл реквест, задеплоить демонстрацию и показать, что получается

[Lena05k]

Я не в силах выполнить задание.

[fey]

@Lena05k Лена, привет. Давайте созвонимся (договоримся в чатике ~internship)
Попробуем вместе декомпозировать задачу.

[Lena05k]

@fey Я с удовольствием присоединюсь к звонку, но так как плохо слышу, не смогу участвовать. Могу вести с вами переписку вместо звонка.

[fey]

@Lena05k Да, давайте. Можно здесь.
Давайте декомпозируем задачу на подпукты. Первым пунктом у нас будет сделать визуальный интерфейс для html+css.

Сейчас у нас в редакторе ограничение на один файл, в котором может работать пользователь. Значит мы можем сделать только поддержку html в самом начале. Что нам для этого нужно

1. Условный свич-кейс, либо обьект, где ключом будет язык сниппета.

В зависимости от этого языка у нас будет меняться подсветка в редакторе + отступы.
Плюс если это html, то вместо компонента-терминала будет выводиться блок с отрендеренным html.

Кажется эту задачу можно сделать без бекенда, чисто сделать компоненты. Получится такое сделать?)

[Lena05k]

@fey Я в новом сниппете добавила еще один значок HTML. После нажатия на него открывается файл HTML. Но я не знаю, как создать логику, которая меняла бы значение currentLanguage на нужный язык при создании нового сниппета с определенным языком поддержки.

Если в currentLanguage указать HTML, то подсветка HTML в редакторе будет отображаться следующим образом.

[fey]

@Lena05k Создайте пулл реквест, оформите его в draft. Запишите вопрос в ПРе, попросим помощи наших студентов.
ПРосто с кодом будет легче подсказать.

[d13ch]

Попробую влиться в обсуждение. Как я понимаю задачу:

На странице со сниппетом есть две "переменные" которые зависят от языка:

1. Редактор
2. Терминал/Рендер

Состояние языка описано в слайсе. Там же есть редьюсер , который позволяет изменить текущий язык. Соответственно, при создании нового сниппета в состоянии должен устанавливаться соответствующий язык:

import { useDispatch } from 'react-redux';
import { actions } from '/languagesSlice.js';

const dispatch = useDispatch();

// далее в хендлере
dispatch(actions.changeLanguage({ language });

@fey кстати, возможно от этой строки стоит избавиться?

Теперь, когда в состоянии актуальный язык, на странице со сниппетом мы можем вывести соответствующие элементы ("переменные"). Сначала получаем язык из состояния в файле:

import { useSelector } from 'react-redux';

const currentLanguage = useSelector((state) => state.languages.currentLanguage);

Далее передаём язык в редактор кода и в терминал/рендер.
@fey тут у меня возникает вопрос: судя по коду, который я успел рассмотреть, редактор сам настраивает подсветку кода, исходя из языка указанного у него в параметрах. Правильно?
Ну и соответственно, нужно подключить api или библиотеку, которая будет отображать панель рендера.
Остаются сопутствующие изменения: добавить иконки html, где необходимо, обновить тексты и файлы локализации, если требуется.

@fey прошу поправить, если где-то неправ.

[fey]

@fey кстати, возможно от этой строки стоит избавиться?

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

Посмотрите как это сделано в КБ. Там есть словари с разными настройками. Например использовать табы или размер отступов.

Можно эти настройки сгруппировать, получится обьект с настройками конкретного языка. И на текущем этапе будет два обьекта - под javascript и под html

@fey тут у меня возникает вопрос: судя по коду, который я успел рассмотреть, редактор сам настраивает подсветку кода, исходя из языка указанного у него в параметрах. Правильно?

Не знаю :D Видимо да

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

[d13ch]

Пока не догоняю, зачем для этой задачи нужен бек. И что на данном этапе можно сделать с рендером?

[fey]

@d13ch с бекенда вы получаете язык сниппета чтобы отрисовать в нужном виде синтаксис + показ рендера страницы.
Смысл такой что редактор должен знать, на каком языке сниппет, чтобы с ним что-то сделать. Например для HTML не показывать терминал, а показывать окошко с рендером страницы.

[d13ch]

@fey как я вижу этот процесс: на странице профиля происходит загрузка всех сниппетов пользователя. Каждый сниппет - сущность с набором свойств, среди которых есть язык сниппета. Поэтому в моём понимании работа бека заключается в том, чтобы отдать нам список сущностей. За последующее отображение элементов при нажатии на сниппеты и создании нового отвечает фронт 🤔

[fey]

Угу, фронтенд должен запрашивать данные для построение UI. Только не совсем понимаю, а причем тут список?
По идее, когда мы открываем урл вида /snippets/asdfj123мы отправляем на бекенд GET запрос и получаем информацию о том, что это за сниппет (язык, код и тд)

[d13ch]

Это про тот список, что находится на странице пользователя. То есть, приложение уже знает, на каком языке написан каждый из сниппетов. Можно ли использовать уже полученную информацию, чтобы не подгружать те же данные второй раз? Или это ненужная оптимизация?

[fey]

Кажется выглядит лишним. Мы ведь можем открыть сниппет по прямой ссылке, а не перейти с профиля.

[d13ch]

А что с рендером? Есть ли проверенные решения, которые можно использовать?

[fey]

@d13ch нет, пока нету, бекенд не сделали.
Но тут на самом деле не должно быть проблемой, тк по сути это инфа с бекенда, а ее можно замокать.

[d13ch]

Тут у меня пока не хватает понимания, как это можно сделать

[fey]

@d13ch вспомните 2 проект. Там мы использовали парсер или форматтер в зависимости от условия.
Здесь аналогично.
Нам неважен даже бекенд, мы можем захардкодить обьет сниппета на фронтенде и рендерить для него определенным образом редактор. И добавляем соответственно новое условие для поддержки html/

[d13ch]

@fey как реализовать вывод в зависимости от условий, я могу представить. Пока не понимаю, что вставить на место блока рендера. Пустышку?

[fey]

угу, можно просто положить код html и его рендерить.

[fey]

Задачку можно делать поэтапно в 2. @d13ch можете расписать плз итоги. как решили это реализовать? Тогда Елене будет понятно, как можно с вами поработать над задачей.

[d13ch]

@fey сначала долго не мог понять, как выполнить задачу, но после созвона стало значительно легче ей заниматься. Ещё пару дней вникал в то, как и какие файлы между собой взаимодействуют и какие данные передают друг другу. Сегодня сел и залпом всё сделал. Ну почти всё) Так что извиняюсь, что пропустил последнее сообщение в треде. Оформил черновой ПР и написал в комментарии к нему итоги работы #385
Наверное, по результатам ревью можно будет разделить дальнейшие задачи.

[d13ch]

Забыл тегнуть ищью в коммитах:
1d72ee8
6bae77f

[geophyzik]

попробовал сделать связку js-html, вопрос если в сторе editor помимо поля code сделать отдельные поля codeHTML, codeCSS, это норм?

[geophyzik]

с учетом пра от d13ch получилось сделать чтот подобное

в лендингах вроде не было готового дизайна экрана сниппета, в таком виде нормально?(для начала)
никто параллельно не занимался связкой js-html-css? мне отдельно ишью делать или это тут дополняется?
пришлось стейт editor подправить помимо поля вместо поля code будет code[язык], аналогично под сейв поля.
надо в бэк добавить язык javascript-html-css
расширение у многоязычных сниппетов уберем, думал мб еще помимо иконок подписать файлы index.html script.js но тогда там с адаптивностью просто беда, над тулбар переписать вообще

[fey]

Хм, я верно понимаю, что вы сделали, чтобы в одном сниппете было несколько файлов? Просто с этим можем проблема) Что бекенд еще не поддерживает это.

[geophyzik]

думал мб еще помимо иконок подписать файлы index.html script.js

образно, а так все данные хранятся в сторе, никаких файлов

[fey]

тут надо подумать, а как лучше. Ибо на бекенде если это не реализовано, то будет сложно и больно.

Как вариант - не делать пока разделение на несколько файлов, а ограничиться только html

[geophyzik]

так давайте разбираться правильно ли я понимаю, что нам надо от бэка

1. поле для языка снипета (в моем случае тут будет javascript-html-css потом это сплитуется)
2. поле под html код(если мы хотим иметь связку, т.к. поле code занято js)
3. поле под css код

первое поле в любом случае добавляем, а остальные 2 сложно добавить? или в code хранить объект со всем кодом, а потом его сплитить %)

это вроде как текущая структура ответа от бэка
а в идеале надо так

• code
• codeHtml
• codeCSS
• language
• created_at
• id
• name
• slug
• updated

а ограничиться только html

получается как то скучно )

[fey]

а в идеале надо так

code
codeHtml
codeCSS

скорее всего так не получится. У нас ведь не только htmlcssjs может быть. но и пайтон и при этом может быть несколько файлов. Например файловая структура. ПОэтому я предлагаю сперва идти по простому пути. Например выводить HTML и внутри него использовать style для css и script для джаваскрипта.

[geophyzik]

У нас ведь не только htmlcssjs может быть. но и пайтон и при этом может быть несколько файлов. Например файловая структура.

в случае пайтона код пойдет в code, поэтому хотелось уточнить в каком виде мы хотим видеть структуру где храниться код

предлагаю сперва идти по простому пути. Например выводить HTML и внутри него использовать style для css и script для джаваскрипта.

а вот тут интересно, я тож собрал хтмлку через стайл и скрипт, а имеется ввиду чтобы эту собранную хтмлку надо отправлять на бэк в code?

а так понял принял пока не буду тогда допиливать то что получилось

[fey]

да, у нас сейчас система, что есть только 1 файл. В случае питона будет аналогично code, потому что нет разделения на много файлов и мало файлов. Т.е. у нас даже понятия файл нет, просто место, куда можно писать код =) Поэтмоу изначально предлагал схему с вводом кода в 1 файл html, а потом расширять до аля-кодпен или repl с файловой системой.