proscenium
v0.18.0
proa · ver · nee · uhm
sustantivo : proscenio
- La parte del escenario de un teatro frente al telón.
Proscenium trata su código de interfaz y del lado del cliente como ciudadanos de primera clase de su aplicación Rails y asume una Internet "rápida por defecto". Agrupa y minimiza JavaScript (+ JSX), TypeScript (+TSX) y CSS en tiempo real, bajo demanda y sin configuración.
Lo más destacado:
rails s !Obviamente, comenzar depende de si está agregando Proscenium a una aplicación Rails existente o creando una nueva. Así que elija la guía adecuada a continuación:
Agregue esta línea al Gemfile de su aplicación Rails y listo:
gem 'proscenium'Tenga en cuenta que Proscenium está diseñado únicamente para usarse con Rails.
Ahora, si inicia su aplicación Rails, puede abrir cualquier código de interfaz (JS, CSS, etc.). Por ejemplo, se puede acceder a un archivo en app/assets/stylesheets/application.css en https://localhost:3000/app/assets/stylesheets/application.css , que se empaquetará, transformará y minimizará [en producción]. en tiempo real.
Proscenium cree que su código frontend es tan importante como su código backend, y no es una ocurrencia tardía: deben ser ciudadanos de primera clase de su aplicación Rails. Entonces, en lugar de tener que colocar todos sus JS y CSS en un directorio "aplicación/activos" y luego requerir un proceso separado para compilarlos o agruparlos, simplemente colóquelos donde desee dentro de su aplicación y simplemente ejecute Rails.
Por ejemplo, si tiene algún JS que requiere su vista app/views/users/index.html.erb , simplemente cree un archivo JS junto a él en app/views/users/index.js . O si tiene algo de CSS que utiliza toda su aplicación, colóquelo en app/views/layouts/application.css y cárguelo junto con su diseño. Tal vez tenga algunas funciones de utilidad JS, así que colóquelas en lib/utils.js .
Simplemente coloque su JS(X) y CSS en cualquier lugar que desee, y su aplicación Rails los entregará desde la ubicación donde los colocó.
Usando los ejemplos anteriores...
app/views/users/index.js => https://localhost:3000/app/views/users/index.jsapp/views/layouts/application.css => https://localhost:3000/app/views/layouts/application.csslib/utils.js => https://localhost:3000/lib/utils.jsapp/components/menu_component.jsx => https://localhost:3000/app/components/menu_component.jsxconfig/properties.css => https://localhost:3000/config/properties.css Proscenium se experimenta mejor cuando sus activos se cargan lateralmente automáticamente.
Con Rails, normalmente cargarías de forma declarativa tus activos de JavaScript y CSS utilizando los ayudantes javascript_include_tag y stylesheet_link_tag .
Por ejemplo, es posible que tenga CSS de "aplicación" de nivel superior ubicado en un archivo en /app/assets/stylesheets/application.css . Del mismo modo, es posible que tenga algo de JavaScript global ubicado en un archivo en /app/javascript/application.js .
Incluirías de forma manual y declarativa esos dos archivos en el diseño de tu aplicación, algo como esto:
<%# /app/views/layouts/application.html.erb %>
<!DOCTYPE html >
< html >
< head >
< title > Hello World </ title >
<%= stylesheet_link_tag 'application' %> <!-- << Your app CSS -->
</ head >
< body >
<%= yield %>
<%= javascript_include_tag 'application' %> <!-- << Your app JS -->
</ body >
</ html >Ahora, es posible que tenga algo de CSS y JavaScript que solo sea requerido por una vista específica y parcial, por lo que debería cargarlo en su vista (o diseño), algo como esto:
<%# /app/views/users/index.html.erb %>
<%= stylesheet_link_tag 'users' %>
<%= javascript_include_tag 'users' %>
<%# needed by the `users/_user.html.erb` partial %>
<%= javascript_include_tag '_user' %>
<% render @users %> El principal problema es que debe realizar un seguimiento de todos estos activos y asegurarse de que cada uno esté cargado por todas las vistas que los requieren, pero también evitar cargarlos cuando no sean necesarios. Esto puede ser una verdadera molestia, especialmente cuando tienes muchas vistas.
Cuando carga lateralmente su JavaScript, Typecript y CSS con Proscenium, se incluyen automáticamente junto con sus vistas, parciales, diseños y componentes, y solo cuando es necesario.
La carga lateral funciona buscando un archivo JS/TS/CSS con el mismo nombre que su vista, parcial, diseño o componente. Por ejemplo, si tiene una vista en app/views/users/index.html.erb , entonces Proscenium buscará un archivo JS/TS/CSS en app/views/users/index.js , app/views/users/index.ts o app/views/users/index.css . Si encuentra uno, lo incluirá en el HTML de esa vista.
JSX también es compatible con JavaScript y Typecript. Simplemente use la extensión .jsx o .tsx en lugar de .js o .ts .
Simplemente cree un archivo JS y/o CSS con el mismo nombre que cualquier vista, parcial o diseño.
Continuemos con nuestro ejemplo de problema anterior, donde tenemos los siguientes activos
/app/assets/application.css/app/assets/application.js/app/assets/users.css/app/assets/users.js/app/assets/user.js El diseño de su aplicación está en /app/views/layouts/application.hml.erb , y la vista que necesita los activos de los usuarios está en /app/views/users/index.html.erb , así que mueva sus activos JS y CSS junto a ellos :
/app/views/layouts/application.css/app/views/layouts/application.js/app/views/users/index.css/app/views/users/index.js/app/views/users/_user.js (parcial) Ahora, en su diseño y vista, reemplace los ayudantes javascript_include_tag y stylesheet_link_tag con el ayudante include_asset de Proscenium. Algo como esto:
<!DOCTYPE html >
< html >
< head >
< title > Hello World </ title >
<%= include_assets # <-- %>
</ head >
< body >
<%= yield %>
</ body >
</ html > En cada solicitud de página, Proscenium comprobará si alguna de sus vistas, diseños y parciales tiene un archivo JS/TS/CSS con el mismo nombre, y luego los incluirá dondequiera que haya colocado el asistente include_assets .
Ahora nunca más tendrás que acordarte de incluir tus activos. Simplemente créelos junto con sus vistas, parciales y diseños, y Proscenium se encargará del resto.
La carga lateral está habilitada de forma predeterminada, pero puede deshabilitarla configurando config.proscenium.side_load en false en su /config/application.rb .
También hay ayudantes include_stylesheets e include_javascripts que le permiten controlar dónde se incluyen los activos CSS y JS en el HTML. Estos ayudantes deben usarse en lugar de include_assets si desea controlar exactamente dónde se incluyen los activos.
Empaquetar un archivo significa incorporar cualquier dependencia importada en el archivo mismo. Este proceso es recursivo, por lo que las dependencias de las dependencias (y así sucesivamente) también se incluirán.
Proscenium se empaquetará de forma predeterminada y en tiempo real. Por lo tanto, no hay un paso de compilación o precompilación por separado.
Proscenium admite la importación de JS, JSX, TS, TSX, CSS y SVG desde NPM, por URL, su aplicación local e incluso desde otras Ruby Gems.
Tanto las importaciones estáticas ( import ) como las dinámicas ( import() ) son compatibles con JavaScript y TypeScript, y se pueden utilizar para importar archivos JS, TS, JSX, TSX, JSON, CSS y SVG.
La regla @import CSS es compatible con CSS.
Actualmente, las rutas de importación solo se incluyen si son una cadena literal o un patrón global. Otras formas de rutas de importación no se incluyen y, en cambio, se conservan palabra por palabra en la salida generada. Esto se debe a que la agrupación es una operación en tiempo de compilación y Proscenium no admite todas las formas de resolución de rutas en tiempo de ejecución.
A continuación se muestran algunos ejemplos:
// Analyzable imports (will be bundled)
import "pkg" ;
import ( "pkg" ) ;
import ( `./locale- ${ foo } .json` ) ;
// Non-analyzable imports (will not be bundled)
import ( `pkg/ ${ foo } ` ) ;La forma de solucionar las importaciones no analizables es marcar el paquete que contiene este código problemático como desagregado para que no esté incluido en el paquete. Luego deberá asegurarse de que haya una copia del paquete externo disponible para su código incluido en tiempo de ejecución.
node_modules ) Las importaciones simples (importaciones que no comienzan con ./ , / , https:// , http:// ) son totalmente compatibles y utilizarán el administrador de paquetes de su elección (por ejemplo, NPM, Yarn, pnpm) a través del archivo package.json ubicado en la raíz de tu aplicación Rails.
Instale el paquete que desea importar usando el administrador de paquetes de su elección...
npm install react
...y luego importarlo como lo haría con cualquier otro paquete.
import React from "react" ;Y, por supuesto, puedes importar tu propio código, usando rutas relativas o absolutas (la extensión de archivo es opcional y las rutas absolutas usan tu raíz de Rails como base):
import utils from "/lib/utils" ;
import constants from "./constants" ;
import Header from "/app/components/header" ; @import "/lib/reset" ; A veces no deseas agrupar una importación. Por ejemplo, desea asegurarse de que solo se cargue una instancia de React. En estos casos, puede utilizar el prefijo unbundle .
import React from "unbundle:react" ;Esto solo funciona con importaciones locales y básicas.
También puedes usar el prefijo unbundle en tu mapa de importación, lo que garantiza que todas las importaciones de una ruta en particular siempre estén desagregadas:
{
"imports" : {
"react" : " unbundle:react "
}
}Luego simplemente importe como de costumbre:
import React from "react" ; [WIP]
La importación de mapas para JS y CSS se admite desde el primer momento y funciona independientemente del navegador que se utilice. Esto se debe a que Proscenium analiza y resuelve el mapa de importación en el servidor, en lugar de hacerlo el navegador. Esto es más rápido y también le permite utilizar mapas de importación en navegadores que aún no los admiten.
Si no está familiarizado con los mapas de importación, considérelos como una forma de definir alias.
Simplemente cree config/import_map.json y especifique las importaciones que desea utilizar. Por ejemplo:
{
"imports" : {
"react" : " https://esm.sh/[email protected] " ,
"start" : " /lib/start.js " ,
"common" : " /lib/common.css " ,
"@radix-ui/colors/" : " https://esm.sh/@radix-ui/[email protected]/ "
}
}Usando el mapa de importación anterior, podemos hacer...
import { useCallback } from "react" ;
import startHere from "start" ;
import styles from "common" ;y para CSS...
@import "common" ;
@import "@radix-ui/colors/blue.css" ; También puede escribir su mapa de importación en JavaScript en lugar de JSON. Entonces, en lugar de config/import_map.json , cree config/import_map.js y defina una función anónima. Esta función acepta un único argumento environment .
( env ) => ( {
imports : {
react :
env === "development"
? "https://esm.sh/[email protected]?dev"
: "https://esm.sh/[email protected]" ,
} ,
} ) ; Los mapas de origen pueden facilitar la depuración de su código. Codifican la información necesaria para traducir desde un desplazamiento de línea/columna en un archivo de salida generado a un desplazamiento de línea/columna en el archivo de entrada original correspondiente. Esto es útil si su código generado es suficientemente diferente de su código original (por ejemplo, su código original es TypeScript o habilitó la minificación). Esto también es útil si prefiere ver archivos individuales en las herramientas de desarrollo de su navegador en lugar de un gran archivo empaquetado.
La salida del mapa fuente es compatible tanto con JavaScript como con CSS. A cada archivo se le adjunta el enlace al mapa fuente. Por ejemplo:
//# sourceMappingURL=/app/views/layouts/application.js.mapLas herramientas de desarrollo de su navegador deberían captar esto y cargar automáticamente el mapa fuente cuando y donde sea necesario.
Puede importar SVG desde JS(X), que incluirá el código fuente SVG. Además, si importa desde JSX o TSX, el código fuente SVG se representará como un componente JSX/TSX.
Disponible en
>=0.10.0
Puede definir y acceder a cualquier variable de entorno desde su JavaScript y Typecript en el espacio de nombres proscenium.env .
Por razones de rendimiento y seguridad, debe declarar los nombres de las variables de entorno que desea exponer en su archivo config/application.rb .
config . proscenium . env_vars = Set [ 'API_KEY' , 'SOME_SECRET_VARIABLE' ]
config . proscenium . env_vars << 'ANOTHER_API_KEY' Esto supone que la variable de entorno del mismo nombre ya ha sido definida. De lo contrario, deberá definirlo usted mismo en su código utilizando el objeto ENV de Ruby o en su shell.
Estas variables de entorno declaradas serán reemplazadas por expresiones constantes, lo que le permitirá usar esto de esta manera:
console . log ( proscenium . env . RAILS_ENV ) ; // console.log("development")
console . log ( proscenium . env . RAILS_ENV === "development" ) ; // console.log(true) Las variables de entorno RAILS_ENV y NODE_ENV siempre se declararán automáticamente.
Además de esto, Proscenium también proporciona una variable process.env.NODE_ENV , que se establece en el mismo valor que proscenium.env.RAILS_ENV . Se proporciona para respaldar las herramientas existentes de la comunidad, que a menudo dependen de esta variable.
Las variables ambientales son particularmente poderosas para ayudar a que los árboles se sacudan.
function start ( ) {
console . log ( "start" ) ;
}
function doSomethingDangerous ( ) {
console . log ( "resetDatabase" ) ;
}
proscenium . env . RAILS_ENV === "development" && doSomethingDangerous ( ) ;
start ( ) ; En desarrollo el código anterior se transformará en el siguiente código, descartando la definición, y llamando a doSomethingDangerous() .
function start ( ) {
console . log ( "start" ) ;
}
start ( ) ;Tenga en cuenta que, por razones de seguridad, las variables de entorno no se reemplazan en las importaciones de URL.
Una variable de entorno indefinida será reemplazada por undefined .
console . log ( proscenium . env . UNKNOWN ) ; // console.log((void 0).UNKNOWN)Esto significa que el código que se basa en esto no se sacudirá. Puede solucionar este problema utilizando el operador de encadenamiento opcional:
if ( typeof proscenium . env ?. UNKNOWN !== "undefined" ) {
// do something if UNKNOWN is defined
} Se proporciona soporte básico para importar sus archivos locales de Rails desde config/locales/*.yml y exportarlos como JSON.
import translations from "@proscenium/i18n" ;
// translations.en.* De forma predeterminada, la salida de Proscenium aprovechará todas las características JS modernas de la especificación ES2022 y anteriores. Por ejemplo, a !== void 0 && a !== null ? a : b se convertirá en a ?? b al minimizar (habilitado de forma predeterminada en producción), que utiliza la sintaxis de la versión ES2020 de JavaScript. Cualquier característica de sintaxis que no sea compatible con ES2020 se transformará en una sintaxis de JavaScript más antigua que sea más compatible.
Tree shake es el término que utiliza la comunidad JavaScript para la eliminación de código inactivo, una optimización común del compilador que elimina automáticamente el código inalcanzable. La vibración de árboles está habilitada de forma predeterminada en Proscenium.
function one ( ) {
console . log ( "one" ) ;
}
function two ( ) {
console . log ( "two" ) ;
}
one ( ) ; El código anterior se transformará al siguiente código, descartando two() , ya que nunca se llama.
function one ( ) {
console . log ( "one" ) ;
}
one ( ) ;Disponible en
>=0.10.0.
Los activos cargados lateralmente se dividen automáticamente en código. Esto significa que si tiene un archivo que se importa y utiliza varias veces, y en diferentes archivos, se dividirá en un archivo separado.
Como ejemplo:
// /lib/son.js
import father from "./father" ;
father ( ) + " and Son" ; // /lib/daughter.js
import father from "./father" ;
father ( ) + " and Daughter" ; // /lib/father.js
export default ( ) => "Father" ; Tanto son.js como daughter.js importan father.js , por lo que tanto el hijo como la hija normalmente incluirían una copia de Father, lo que genera código duplicado y paquetes de mayor tamaño.
Si estos archivos se cargan lateralmente, father.js se dividirá en un archivo o fragmento separado y solo se descargará una vez.
El código compartido entre múltiples puntos de entrada se divide en un archivo compartido separado que importan ambos puntos de entrada. De esa manera, si el usuario navega primero a una página y luego a otra, no tiene que descargar todo el JavaScript para la segunda página desde cero si su navegador ya descargó y almacenó en caché la parte compartida.
El código al que se hace referencia a través de una expresión import() asincrónica se dividirá en un archivo separado y solo se cargará cuando se evalúe esa expresión. Esto le permite mejorar el tiempo de descarga inicial de su aplicación descargando solo el código que necesita al inicio y luego descargando lentamente código adicional si es necesario más adelante.
Sin dividir el código, una expresión import() se convierte en Promise.resolve().then(() => require()) en su lugar. Esto aún conserva la semántica asincrónica de la expresión, pero significa que el código importado se incluye en el mismo paquete en lugar de dividirse en un archivo separado.
La división de código está habilitada de forma predeterminada. Puede deshabilitarlo estableciendo la opción de configuración code_splitting en false en /config/application.rb de su aplicación:
config . proscenium . code_splitting = falseHay algunas advertencias importantes en lo que respecta a JavaScript. Estos se detallan en el sitio de esbuild.
CSS es un tipo de contenido de primera clase en Proscenium, lo que significa que puede agrupar archivos CSS directamente sin necesidad de importar su CSS desde código JavaScript. Puede @import otros archivos CSS y archivos de imágenes y fuentes de referencia con url() y Proscenium agrupará todo.
Tenga en cuenta que, de forma predeterminada, la salida de Proscenium aprovechará todas las funciones CSS modernas. Por ejemplo, color: rgba(255, 0, 0, 0.4) se convertirá en color: #f006 después de minimizar en producción, lo que utiliza la sintaxis del módulo de color CSS nivel 4.
Se admite la nueva sintaxis de anidamiento de CSS y se transforma en CSS no anidado para navegadores más antiguos.
Proscenium también insertará automáticamente prefijos de proveedores para que su CSS funcione en navegadores más antiguos.
También puedes importar CSS desde JavaScript. Cuando haga esto, Proscenium agregará automáticamente cada hoja de estilo al encabezado del documento como un elemento <link> .
import "./button.css" ;
export let Button = ( { text } ) => {
return < div className = "button" > { text } < / div > ;
} ; Proscenium implementa un subconjunto de módulos CSS. Admite las palabras clave :local y :global , pero no la propiedad composes . (Se recomienda utilizar mixins en lugar de composes , ya que funcionarán en todas partes, incluso en archivos CSS simples).
Asigne a cualquier archivo CSS una extensión .module.css y Proscenium lo tratará como un módulo CSS, transformando todos los nombres de clases con un sufijo exclusivo para el archivo.
. title {
font-size : 20 em ;
}La entrada anterior produce:
. title-5564cdbb {
font-size : 20 em ;
}Ahora tienes un nombre de clase único que puedes usar prácticamente en cualquier lugar.
Puede hacer referencia a módulos CSS desde sus vistas, parciales y diseños de Rails utilizando el asistente css_module , que acepta uno o más nombres de clases y devolverá los nombres de módulos CSS equivalentes: el nombre de clase con el sufijo único adjunto.
Con la configuración de carga lateral, puede utilizar el asistente css_module de la siguiente manera.
< div >
< h1 class =" <%= css_module :hello_title %> " > Hello World </ h1 >
< p class =" <%= css_module :body , paragraph : %> " >
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</ p >
</ div > css_module acepta múltiples nombres de clases y devolverá una cadena separada por espacios de nombres de módulos CSS transformados.
css_module :my_module_name
# => "my_module_name-ABCD1234"Incluso puedes hacer referencia a una clase desde cualquier archivo CSS pasando la ruta URL al archivo, como prefijo del nombre de la clase. Al hacerlo, se cargará automáticamente la hoja de estilo.
css_module '/app/components/button.css@big_button'
# => "big_button"También admite paquetes NPM (ya instalados en /node_modules):
css_module 'mypackage/button@big_button'
# => "big_button" css_module también acepta un argumento de palabra clave path , que le permite especificar la ruta al archivo CSS. Tenga en cuenta que esto utilizará la ruta proporcionada para todos los nombres de clase pasados a esa instancia de css_module .
css_module :my_module_name , path : Rails . root . join ( 'app/components/button.css' ) Al importar un módulo CSS desde JS, se agregará automáticamente la hoja de estilo al encabezado del documento. Y el resultado de la importación será un objeto de clase CSS para los nombres de los módulos.
import styles from "./styles.module.css" ;
// styles == { header: 'header-5564cdbb' }Es importante tener en cuenta que el objeto exportado de los nombres de los módulos CSS es en realidad un objeto proxy de JavaScript. Entonces desestructurar el objeto no funcionará. En su lugar, debes acceder a las propiedades directamente.
Además, importar un módulo CSS a otro módulo CSS dará como resultado la misma cadena de resumen para todas las clases.
Proscenium proporciona funcionalidad para incluir o "mezclar" una o más clases de CSS en otras. Esto es similar a la propiedad composes de los módulos CSS, pero funciona en todas partes y no se limita a los módulos CSS.
Los mixins CSS se admiten mediante las reglas @define-mixin y @mixin .
Un mixin se define usando la regla at @define-mixin . Pásele un nombre, que debe cumplir con la semántica del nombre de clase, y declare sus reglas:
// /lib/mixins.css
@define-mixin bigText {
font-size : 50 px ;
} Utilice un mixin utilizando la regla at @mixin . Pásale el nombre del mixin que deseas usar y la URL donde está declarado el mixin. La URL se utiliza para resolver el mixin y puede ser relativa, absoluta, una URL o incluso de un paquete NPM.
// /app/views/layouts/application.css
p {
@mixin bigText from url ( "/lib/mixins.css" );
color : red;
}Lo anterior produce este resultado:
p {
font-size : 50 px ;
color : red;
}Los mixins se pueden declarar en cualquier archivo CSS. No es necesario declararlos en el mismo fichero donde se utilizan. sin embargo, si declara y utiliza un mixin en el mismo archivo, no necesita especificar la URL donde se declara el mixin.
@define-mixin bigText {
font-size : 50 px ;
}
p {
@mixin bigText;
color : red;
}Los módulos CSS y Mixins funcionan perfectamente juntos. Puede incluir un mixin en un módulo CSS.
Hay algunas advertencias importantes en lo que respecta a CSS. Estos se detallan en el sitio de esbuild.
Typecript y TSX son compatibles desde el primer momento y tienen soporte integrado para analizar la sintaxis de TypeScript y descartar las anotaciones de tipo. Simplemente cambie el nombre de sus archivos a .ts o .tsx y estará listo.
Tenga en cuenta que Proscenium no realiza ninguna verificación de tipos, por lo que aún deberá ejecutar tsc -noEmit en paralelo con Proscenium para verificar los tipos.
Hay algunas advertencias importantes en lo que respecta a Typecript. Estos se detallan en el sitio de esbuild.
El uso de la sintaxis JSX generalmente requiere que importe manualmente la biblioteca JSX que está utilizando. Por ejemplo, si está utilizando React, de forma predeterminada deberá importar React en cada archivo JSX de esta manera:
import * as React from "react" ;
render ( < div / > ) ; Esto se debe a que la transformación JSX convierte la sintaxis JSX en una llamada a React.createElement pero no importa nada, por lo que la variable React no está presente automáticamente.
Proscenium genera estas declaraciones de importación para usted. Tenga en cuenta que esto también cambia completamente la forma en que funciona la transformación JSX, por lo que puede dañar su código si está utilizando una biblioteca JSX que no es React.
En un futuro [no muy lejano], podrá configurar Proscenium para utilizar una biblioteca JSX diferente o desactivar esta importación automática por completo.
La importación de archivos .json analiza el archivo JSON en un objeto JavaScript y exporta el objeto como exportación predeterminada. Usarlo se parece a esto:
import object from "./example.json" ;
console . log ( object ) ;Además de la exportación predeterminada, también hay exportaciones con nombre para cada propiedad de nivel superior en el objeto JSON. Importar una exportación con nombre directamente significa que Proscenium puede eliminar automáticamente del paquete las partes no utilizadas del archivo JSON, dejando solo las exportaciones con nombre que realmente utilizó. Por ejemplo, este código solo incluirá el campo de versión cuando esté incluido:
import { version } from "./package.json" ;
console . log ( version ) ; Phlex es un marco para crear vistas rápidas, reutilizables y comprobables en Ruby puro. Proscenium funciona perfectamente con Phlex, con soporte para carga lateral, módulos CSS y más. Simplemente escriba sus clases Phlex y herede de Proscenium::Phlex .
class MyView < Proscenium :: Phlex
def view_template
h1 { 'Hello World' }
end
end En sus diseños, incluya Proscenium::Phlex::AssetInclusions y llame al asistente include_assets .
class ApplicationLayout < Proscenium :: Phlex
include Proscenium :: Phlex :: AssetInclusions # <--
def view_template ( & )
doctype
html do
head do
title { 'My Awesome App' }
include_assets # <--
end
body ( & )
end
end
end Puede incluir específicamente recursos CCS y JS utilizando los ayudantes include_stylesheets e include_javascripts , lo que le permite controlar dónde se incluyen en el HTML.
Cualquier clase Phlex que herede Proscenium::Phlex se cargará automáticamente.
Los módulos CSS son totalmente compatibles con las clases Phlex, con acceso al asistente css_module si lo necesita. Sin embargo, existe una forma mejor y más sencilla de hacer referencia a las clases de módulos CSS en sus clases Phlex.
Dentro de sus clases Phlex, cualquier nombre de clase que comience con @ será tratado como una clase de módulo CSS.
# /app/views/users/show_view.rb
class Users :: ShowView < Proscenium :: Phlex
def 
