Actualmente estoy actualizando mi aplicación Rails a 7. Solo la estaba probando por un tiempo y luego tengo problemas con Foundation Rails . Lo instalé y seguí todos los pasos excepto el
Agrega Foundation a tu JS
Parece que la instrucción aún no está actualizada para Rails 7.
Como resultado, el CSS parece funcionar bien, pero al intentar implementar funciones que requieren javascript como Reveal , no funcionará correctamente.
¿Alguna idea de cómo implementar Foundation to Rails 7 correctamente?
La gema Foundation-Rails, como casi todos los "activos gemificados", está hecha para la tubería de activos antigua de Sprockets que era la predeterminada en Rails 5 y no se mantiene ni es relevante en las versiones modernas de Rails.
Toda la idea de envolver paquetes JavaScript o CSS de terceros en Ruby gems se consideró una solución aceptable cuando Sprockets se presentó originalmente, pero no ha envejecido bien ya que depende de que los mantenedores actualicen las gemas solo para impulsar nuevas versiones del paquete front-end.
El desarrollo en Sprockets también se ha detenido y es posible que ni siquiera pueda compilar versiones modernas de Foundation si utiliza características más nuevas como el sistema de módulos que solo está disponible en Dart-Sass.
Rails 6 reemplazó a Spockets con el Webpacker basado en Node.js de corta duración. Rails 6 también utilizó de forma predeterminada Yarn para instalar paquetes front-end desde NPM.
Rails 7 adopta un enfoque muy diferente:
Entonces, en Rails 7, estamos ofreciendo simultáneamente una excelente forma predeterminada de evitar tener que lidiar con la configuración completa de nodos/npm/empaquetado y ofrecemos una ruta alternativa totalmente compatible que abarca todas esas cosas. Pero vamos a hacerlo de una manera diferente a la anterior.
Webpacker nació hace casi cinco años con la misión de hacer que la canalización de paquetes de JavaScript fuera fácil de usar para los desarrolladores de Rails que no estaban necesariamente interesados en convertirse en expertos en JavaScript. Dado que ES6 requería la transpilación para un uso generalizado en los navegadores en ese momento, y npm necesitaba acceder al ecosistema de paquetes para el nodo, realmente no había forma de evitarlo. Podríamos abrazar esa realidad o relegar a Rails a ser solo una API para tales aplicaciones. Elegimos el abrazo.
Pero hoy, las compensaciones hechas por Webpacker comienzan a tener mucho menos sentido. Está algo atrapado en el medio fangoso entre dos caminos más claros. Existe el nuevo camino de renunciar por completo a la tubería de agrupación, que es mucho más fácil de configurar, tiene menos dependencias y divisiones de trabajo menos incómodas entre Ruby y JavaScript. Y luego está la ruta integral en la que no intentamos ocultar ni envolver las complejidades de JavaScript en absoluto. Simplemente proporcionamos un puente por el cual el JavaScript generado se puede usar en la aplicación Rails, pero dejamos que el ecosistema de JavaScript proporcione todas las respuestas.
Rails 7 no se envía con una sola respuesta sobre cómo administrar los paquetes front-end.
En cambio, solo tiene la tubería para conectar una variedad de sistemas y necesita encontrar el sistema que funcione para sus requisitos, como vincular a CDN a través de import-maps, jsbundling-rails o (estremecimiento) descargar base y compilarlo a través de algo como Explorar.
En términos de conveniencia para los desarrolladores, es un gran paso atrás desde los días de Rails 5 cuando "simplemente funcionaba" (más o menos), pero ese enfoque ya no era sostenible.
Encontré una manera de hacerlo funcionar.
lo que no encontré es la forma correcta de agregar las hojas de estilo de base, en scss, mediante importmap. Simplemente los pegué todos en los activos y exploté mi repositorio. Pero funciona por ahora.
jQuery
ejecutar ./bin/importmap pin jquery --download ver otras opciones
agregar a application.js
import jquery from 'jquery' window.$ = jqueryhojas de estilo
app/assets/stylesheets/foundation_vendor y scss a la nueva carpeta@import "./foundation/scss/foundation"; y @include foundation-everything(); a application.scss*= require_tree . y *= require_selfJavaScript
./bin/importmap pin foundation-sites --download luego agregue a application.js
import 'foundation-sites'; $(document).ready(function () { onPageLoad(); }); function onPageLoad() { // init foundation $(document).foundation(); console.log('foundation-loaded') }PERDIDO
el reemplazo para
$(document).on('turbolinks:load', function() { onPageLoad(); });lo publicare tan pronto como lo tenga