Ruby on Rails 7, урок #22 | Миграция с Webpacker на ESBuild и DartSass

[@vladimirm4617]

Как всегда подача материала на высоте! Надеюсь, Вы расскажите, как правильно использовать Hotwire и Turbo и в rails 6, все-таки много проектов на предыдущей версии rails.

[@IlyaBodrovKrukowski]

Хорошо, принял во внимание. Но вообще вот эти две библиотеки для бандла, которые я показал, должны работать в Rails 6 тоже - имеет смысл их подрубить по возможности, тк удобно

[@ledockol]

Ожидаемо комментарий пропал) Повторю: Прекрасное изложение, как мне казалось, известного материала. Однако после просмотра данного видео понимаешь какой огромный пласт знаний у автора. Как всегда все просто и доступно изложено, с прекрасным историческим экскурсом. Илья, огромное спасибо! Для создания аналогичного приложения с нуля в Rails 7: rails new app_name -j esbuild -c bootstrap d postgresql -T

[@IlyaBodrovKrukowski]

Спасибо большое! Мне очень жаль, что YT трёт комментарии, уже несколько человек про это мне писали, но в Гугле вообще не чешутся... В принципе, вот эти новые библиотеки я сам вот только-только для себя открыл, но такое обновление - это естественный процесс. Помнится, когда-то Sprockets с помпой презентовали, а теперь вот уже мы говорим, что это старая библиотека :) Видимо, через некоторое время мы дорастём и до importmap, просто его ещё до ума не довели окончательно.

[@someguy9607]

@@IlyaBodrovKrukowski там у них AI барахлит конкретно. Он по дефолту должен был беспалевно тереть хэйт спич но этот самый спич стал так разнообразен и изощрен, особенно в инглиш секторе, что алгоритм уже давно поехал крышей пытаясь в этом разобраться)))

[@IlyaBodrovKrukowski]

@@someguy9607 Может быть :) Я уже им писал напрямую, тк под это дело открыли тикет, но, увы, пока всё на мёртвой точке...

[@egorcloud7899]

ноу коммент, просто Бог ruby и rails))

[@IlyaBodrovKrukowski]

Спасибо

[@deniszaharov8437]

Здравствуйте, у меня вопрос, это нормально что при изменении кастомных scss файлов при запущеном bin/dev автоматически изменения в стилях не подтягиваются, чтобы все подтянулось мне нужно выполнить rails assets:precompile + bin/dev(перезапустить)?

[@IlyaBodrovKrukowski]

Так быть не должно. Проверьте, что у вас есть задача watch (которая автоматом всё это делает). В видео она присутствует, насколько я помню

[@deniszaharov8437]

@@IlyaBodrovKrukowski Не знаю почему так произошло, но проблема была в том, что у меня копились скомпилированные css в public/assets, удалил папку public/assets и всё встало в норму, в любом случае спасибо за ответ!

[@IlyaBodrovKrukowski]

@@deniszaharov8437

[@xaogao]

Спасибо за видео

[@IlyaBodrovKrukowski]

На здоровье!

[@kirill_prog]

Илья, подскажите пожалуйста, хочу ESBuild подружить с React. Как лучше это сделать? Через gem react-rails? Или можно как-то более правильно?

[@IlyaBodrovKrukowski]

Нет, зачем. Просто добавить в package.json нужные библиотеки и потом их подцепить в файлах js

[@kirill_prog]

@@IlyaBodrovKrukowski спасибо, сделал, работает. Была ошибка react is not defined. Решение было простое, надо импорт реакта делать в каждом реакт файле.

[@IlyaBodrovKrukowski]

@@kirill_prog Можете посмотреть первый урок из плейлиста hotwire, там аналогичная история, только со stimulus

[@Aluston1783]

Почему вы совместили sprockets и esbuild?

[@IlyaBodrovKrukowski]

Я не помню уже, что там было, но там он криво работал иначе. Сейчас можно его убрать и добавить 'jsbundling-rails', cssbundling-rails и propshaft

[@Cyberdforest]

а можете еще подсказать, почему не работает после перехода на рейлс 7 и esbuilder confirm окна?

[@IlyaBodrovKrukowski]

Сложно сказать. Вы Turbo включили, возможно? Но вообще причин много может быть

[@Cyberdforest]

@@IlyaBodrovKrukowski на всякий случай уточню, а как он включается в рейлс 7 ? во вью я пишу data: { turbo_method: "delete", turbo_confirm: "Are you sure?"}, а application.js import Turbolinks from "turbolinks" что - то еще нужно? в лейауте стоит

[@Cyberdforest]

ну и в package тоже добавлен и гем файл тоже

[@IlyaBodrovKrukowski]

@@Cyberdforest Так долго объяснять - просто посмотрите видео по Turbo на канале, это одни из последних видео по Rails на данный момент

[@Cyberdforest]

@@IlyaBodrovKrukowski огромное спасс! пересмотрел, поправил и заработало!! правда на link_to работает, а если меняешь на button_to то конфирмейшен не работает

[@ГлебЖегулин-й2ы]

Здравствуйте! Спасибо за материал. В принципе мигрировался успешно, всё работает кроме дропдаунов ( в частности, где переключение языка и смена пользователя в меню). Не подскажете, как решить эту проблему?

[@IlyaBodrovKrukowski]

Импортировать нужные модули из bootstrap, например так github.com/bodrovis/MCSAnswer/blob/master/app/javascript/application.js#L4=

[@ГлебЖегулин-й2ы]

@@IlyaBodrovKrukowski Испортировал, но к сожалению не подключились дропдауны. И соответственно при дальнейшей миграции на Turbo ошибки в представлениях "ActionView::SyntaxErrorInTemplate"...

[@IlyaBodrovKrukowski]

@@ГлебЖегулин-й2ы Не знаю даже. Попробуйте посмотреть детальнее проект, который я вам скинул, в частности его конфиги, там всё работает 100%

[@ГлебЖегулин-й2ы]

@@IlyaBodrovKrukowski Заработало! Там пришлось в layouts (application.html.erb) дополнительно дописать скрипт с тегами "link" и "script". Попробую прикрепить, но боюсь youtube опять сейчас удалит.

[@ГлебЖегулин-й2ы]

Да, удаляет. Ну в общем проблему решил. Спасибо)

[@slavapol-v1553]

А зачем сделали сборку стилей через cssbundling-rails, если esbuild сам может сделать сборку стилей или я что то не понимаю?

[@IlyaBodrovKrukowski]

esbuild - это для JS

[@slavapol-v1553]

@@IlyaBodrovKrukowski Ну это в рельсах сделали jsbundling-rails и cssbundling-rails, хотя esbuild по дефолту собирает стили, а через плагины работает и с препроцессорами и с postcss, вот из доков This loader is enabled by default for .css files. It loads the file as CSS syntax. CSS is a first-class content type in esbuild, which means esbuild can bundle CSS files directly without needing to import your CSS from JavaScript code. esbuild --bundle app.css --outfile=out.css Поэтому и не понял что в рельсе навелосипедели.

[@IlyaBodrovKrukowski]

@@slavapol-v1553 Ну вообще да, в целом так и есть. Я к тому, что тут как-то решили разделить теперь, тк раньше это было всё ещё сложнее и неудобнее

[@ГлебЖеглов-ь1с]

Здравствуйте! А Вы не сталкивались с такой ошибкой после миграции на esbuild , как "No route matches [GET] " в половине маршрутов, причем не девайзовских?? хотя в них тоже местами. Т.е. выборочно, при переходе по ссылкам, словно такого маршрута нет вовсе, хотя он есть и всё работало. В другом приложении, где девайз не использовался, эту проблему решил путем добавления в файл application.html тега "script" с веб-ссылкой на "jquery-1.11.3.min.js". Т.е. как я понимаю, это связано с jquery каким то образом, не с логикой и моделями. Но в этом раз у меня подход не сработал, в гугловском пространстве ничего подходящего не встретил. Скорее всего что-то нужно включить в "application.html", чтоб при клике на ссылку/кнопку происходил переход...

[@IlyaBodrovKrukowski]

Нет, а причём тут jquery? Он не используется нигде вроде бы. Такой ошибки не встречал

[@ГлебЖеглов-ь1с]

@@IlyaBodrovKrukowski Из всей пачки стилей не подключились только вот эти "gem font-awesome-rails', иконки. Ну и плюс выборочный отказ перехода по маршруту при клике на кнопку.

[@ГлебЖеглов-ь1с]

​@@IlyaBodrovKrukowski Удалился коммент. В общем прочитал на stackoverflow - /questions/8886614/uncaught-referenceerror-jquery-is-not-defined. Однажды это сработало

[@ГлебЖеглов-ь1с]

Со стилями разобрался, остались только маршруты

[@ГлебЖеглов-ь1с]

@@IlyaBodrovKrukowski У меня еще добавлена галочка "показать пароль/скрыть пароль" - вот этот функционал требует присутствия ссылки на файл jquery-1.11.3.min.js в application.html

[@deffoobar]

Importmaps это боль, спустя год, попытался добавить bootstrap без esbuild и без node, очень много проблем во первых bootstrap gem требует autoprefixer, а он уже в свою очередь Execjs т.е. js рантайм необходим гг и так много где, боль

[@IlyaBodrovKrukowski]

Я всё никак не могу себя заставить с этим разобраться, честно говоря

[@deffoobar]

@@IlyaBodrovKrukowski пишу сообщение во второй т.к. первое удалилось, как же сильно у меня бомбит) надеюсь прочтешь. Самое простое что можно попытаться сделать это создать новый проект на importmaps + bootstrap, согласимся что это очень популярный css фреймворк. Ну чтож погнали 1) команда rails new . --css=bootstrap сломана ихихихих. Потому что по дефолту прогон этот команды в Rails 7.0.x создавал проект с esbuild без importmaps, но в 7.1.x поменяли поведение и теперь создается на importmaps и барабанная дробь это известный момент в issues на github и пр смержен с этим багом. Представляешь лицо человека который решил попробывать рельсы нагугли гайд и не понимает почему самая простая команда не работает, мда) 2) ладно забыли про --css=bootstrap, давай попробуем добавить все сами? есть же гем booststrap да? звучит неплохо, авторы гема добавили поддержку importmaps но видимо с ними не работали и не поняли зачем, т.е. опять барабанная дробь и гем требует JS runtime :) т.е. без nodejs он не запустится, а основная суть importmaps в rails это уход от ноды как зависимости. Нам этот вариант не подходит, autoprefixer указан в зависимостях гема и он тащит за собой execjs так что тут никак не обойти 3) ладно пытаемся добавить все руками через команду bin/importmaps pin bootstrap и... в конечном итоге у не работает JS из bootstrap потому что не все пакеты поддерживаются и типа ок, DHH закрыл issues и сказал что нужна просто дока как работать с такими пакетами 4) самое главное importmaps не поддерживает css, даже если пакет содержит стили, то он подгрузит только JS, но как же нам тогда подключить bootstrap, и тут тоже есть ответы в issues... Нужно скачать все руками и положить в папочку. Тут я уже просто был в шоке, как настолько тривиальная проблема как создание проекта с bootstrap может требовать столько усилий? Да нужно пойти и скачать стили руками... а как их обновлять? тоже руками скачивать новую версию, это ужасно не удобно

[@deffoobar]

5) если быстро загуглить то можно найти десяток гайдов где пишут что rails 7 importmaps + bootstrap. НО! хихихи там везде используют гем boostrap который без nodejs не будет работать) просто авторы тоже не вникали как и что работает, и в 99% у тебя локально есть нода, я тоже не заметил этого, все стало очевидным когда я пошел деплоить приложение и увидел что деплой упал, в образе нет ноды (что правильно, ее и не должно быть в проекте с importmaps). Так что все гайды не валидные, importmaps там для галочки

[@deffoobar]

это полный ужас, я прицепился к этому bootstrap только из-за того что это самый популярный css фреймворк, и что человек который прийдет попробовать RoR скорей всего его поставит и это очень сильно ему испортит впечатление потому что importmaps идут по дефолту

[@deffoobar]

чувствую себя каким-то шизиком, потому что кругом гайды где используется гем который требует установленную nodejs/etc и когда на это указываешь авторам, они тебя тупо не понимают

[@relex9662]

наверное луший канал по рельсам

[@IlyaBodrovKrukowski]

[@dmytroyatskiv9451]

Илья такой вопрос при импортирую import TomSelect from 'tom-select/dist/js/tom-select.popular' и возникает следущая проблема, нагуглить решение не могу , возможно ви поможете Could not resolve "tom-select/dist/js/tom-select.popular" app/javascript/scripts/select.js:1:22: 1 │ import TomSelect from 'tom-select/dist/js/tom-select.popular'

[@IlyaBodrovKrukowski]

Честно говоря, сложно сказать. Проверьте, что все конфиги, включая конфиг yarn именно такой, как в исходниках - иначе я правда не знаю, в чём тут ещё может быть дело

[@kirill_prog]

Добрый день, Илья, не могу подружить sass с tailwind и esbuild. Хочу использовать scss файлы в проекте для костомного css. Подскажите пожалуйста, как это лучше сделать? Вот такие у меня скрипты "build": "esbuild app/javascript/*.* --bundle --sourcemap --outdir=app/assets/builds --public-path=assets", "build:css:dev": "tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/application.css", "build:css": "build:css:dev && postcss ./app/assets/builds/application.css --replace --use autoprefixer -no-map --minify compressed"

[@IlyaBodrovKrukowski]

Честно говоря, никогда не пробовал использовать так tailwind. Видимо, надо как-то экспериментировать..

[@kirill_prog]

@@IlyaBodrovKrukowski те скрипты которые выше, они как раз рабочие, я вот не понимаю куда мне sass обработчик вставить 🙂Буду искать информацию, спасибо за ответ.

[@rick9251]

Привет ,сделай вилео про dry.rb

[@IlyaBodrovKrukowski]

Привет, постараюсь, запрос уже такой был