proscenium
v0.18.0
prow · sehen · nee · ähm
Substantiv : Proszenium
- der Teil einer Theaterbühne vor dem Vorhang.
Proscenium behandelt Ihren Frontend- und clientseitigen Code als erstklassige Bürger Ihrer Rails-App und geht von einem „standardmäßig schnellen“ Internet aus. Es bündelt und minimiert JavaScript (+ JSX), TypeScript (+ TSX) und CSS in Echtzeit, bei Bedarf und ohne Konfiguration.
Die Highlights:
rails s aus!Der Einstieg hängt natürlich davon ab, ob Sie Proscenium zu einer vorhandenen Rails-App hinzufügen oder eine neue erstellen. Wählen Sie also unten den passenden Leitfaden aus:
Fügen Sie diese Zeile zur Gemfile Ihrer Rails-Anwendung hinzu, und schon kann es losgehen:
gem 'proscenium'Bitte beachten Sie, dass Proscenium ausschließlich für die Verwendung mit Rails konzipiert ist.
Wenn Sie nun Ihre Rails-App starten, können Sie jeden Frontend-Code (JS, CSS usw.) öffnen. Beispielsweise kann auf eine Datei unter app/assets/stylesheets/application.css unter https://localhost:3000/app/assets/stylesheets/application.css zugegriffen werden, die [in der Produktion] gebündelt, transformiert und minimiert wird. in Echtzeit.
Proscenium ist davon überzeugt, dass Ihr Frontend-Code genauso wichtig ist wie Ihr Backend-Code und kein nachträglicher Einfall – er sollte erstklassige Bürger Ihrer Rails-App sein. Anstatt also Ihr gesamtes JS und CSS in ein „app/assets“-Verzeichnis zu werfen und dann einen separaten Prozess zum Kompilieren oder Bündeln zu benötigen, platzieren Sie sie einfach an der gewünschten Stelle in Ihrer App und führen Sie einfach Rails aus!
Wenn Sie beispielsweise über JS verfügen, das für Ihre app/views/users/index.html.erb Ansicht erforderlich ist, erstellen Sie einfach eine JS-Datei daneben unter app/views/users/index.js . Oder wenn Sie CSS haben, das von Ihrer gesamten Anwendung verwendet wird, fügen Sie es in app/views/layouts/application.css ein und laden Sie es neben Ihrem Layout. Vielleicht haben Sie ein paar JS-Dienstprogrammfunktionen, also fügen Sie sie in lib/utils.js ein.
Platzieren Sie einfach Ihr JS(X) und CSS an einer beliebigen Stelle und sie werden von Ihrer Rails-App an dem Ort bereitgestellt, an dem Sie sie platziert haben.
Anhand der obigen Beispiele ...
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 lässt sich am besten erleben, wenn Ihre Vermögenswerte automatisch seitlich geladen werden.
Mit Rails laden Sie Ihre JavaScript- und CSS-Assets normalerweise deklarativ mithilfe der Hilfsprogramme javascript_include_tag und stylesheet_link_tag .
Beispielsweise befindet sich möglicherweise das CSS der obersten Ebene für „Anwendungen“ in einer Datei unter /app/assets/stylesheets/application.css . Ebenso befindet sich möglicherweise globales JavaScript in einer Datei unter /app/javascript/application.js .
Sie würden diese beiden Dateien manuell und deklarativ in Ihr Anwendungslayout einbinden, etwa so:
<%# /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 >Nun verfügen Sie möglicherweise über CSS und JavaScript, die nur für eine bestimmte Ansicht und teilweise erforderlich sind. Sie würden diese also in Ihre Ansicht (oder Ihr Layout) laden, etwa so:
<%# /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 %> Das Hauptproblem besteht darin, dass Sie den Überblick über alle diese Assets behalten und sicherstellen müssen, dass jedes von allen Ansichten geladen wird, die sie benötigen, aber auch vermeiden müssen, sie zu laden, wenn sie nicht benötigt werden. Dies kann sehr schmerzhaft sein, insbesondere wenn Sie viele Aufrufe haben.
Wenn Sie Ihr JavaScript, Typescript und CSS mit Proscenium seitlich laden, werden diese automatisch zusammen mit Ihren Ansichten, Teilansichten, Layouts und Komponenten eingebunden, und zwar nur bei Bedarf.
Beim Seitenladen wird nach einer JS/TS/CSS-Datei mit demselben Namen wie Ihre Ansicht, Ihr Teil, Ihr Layout oder Ihre Komponente gesucht. Wenn Sie beispielsweise eine Ansicht unter app/views/users/index.html.erb haben, sucht Proscenium nach einer JS/TS/CSS-Datei unter app/views/users/index.js , app/views/users/index.ts oder app/views/users/index.css . Wenn es eines findet, wird es in den HTML-Code für diese Ansicht eingefügt.
JSX wird auch für JavaScript und Typescript unterstützt. Verwenden Sie einfach die Erweiterung .jsx oder .tsx anstelle von .js oder .ts .
Erstellen Sie einfach eine JS- und/oder CSS-Datei mit demselben Namen wie jede Ansicht, Teilansicht oder jedes Layout.
Fahren wir mit unserem obigen Problembeispiel fort, in dem wir über die folgenden Vermögenswerte verfügen
/app/assets/application.css/app/assets/application.js/app/assets/users.css/app/assets/users.js/app/assets/user.js Ihr Anwendungslayout befindet sich unter /app/views/layouts/application.hml.erb und die Ansicht, die die Assets des Benutzers benötigt, befindet sich unter /app/views/users/index.html.erb . Verschieben Sie also JS und CSS Ihrer Assets daneben :
/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 (teilweise) Ersetzen Sie nun in Ihrem Layout und Ihrer Ansicht die Helfer javascript_include_tag und stylesheet_link_tag durch den Helfer include_asset von Proscenium. Etwas in der Art:
<!DOCTYPE html >
< html >
< head >
< title > Hello World </ title >
<%= include_assets # <-- %>
</ head >
< body >
<%= yield %>
</ body >
</ html > Bei jeder Seitenanforderung prüft Proscenium, ob Ihre Ansichten, Layouts und Teilansichten über eine gleichnamige JS/TS/CSS-Datei verfügen, und fügt diese dann überall dort ein, wo Sie den include_assets Helper platziert haben.
Jetzt müssen Sie nie wieder daran denken, Ihr Vermögen einzubeziehen. Erstellen Sie sie einfach zusammen mit Ihren Ansichten, Teilansichten und Layouts, und Proscenium kümmert sich um den Rest.
Das seitliche Laden ist standardmäßig aktiviert, Sie können es jedoch deaktivieren, indem Sie config.proscenium.side_load in Ihrer /config/application.rb auf false setzen.
Es gibt auch die Hilfsprogramme include_stylesheets und include_javascripts mit denen Sie steuern können, wo die CSS- und JS-Assets in den HTML-Code eingebunden werden. Diese Helfer sollten anstelle von include_assets verwendet werden, wenn Sie genau steuern möchten, wo die Assets eingebunden werden.
Eine Datei zu bündeln bedeutet, alle importierten Abhängigkeiten in die Datei selbst zu integrieren. Dieser Prozess ist rekursiv, sodass auch Abhängigkeiten von Abhängigkeiten (usw.) eingebunden werden.
Proscenium wird standardmäßig und in Echtzeit gebündelt. Es gibt also keinen separaten Build-Schritt oder eine Vorkompilierung.
Proscenium unterstützt den Import von JS, JSX, TS, TSX, CSS und SVG aus NPM, per URL, Ihrer lokalen App und sogar von anderen Ruby Gems.
Sowohl statische ( import ) als auch dynamische ( import() ) Importe werden für JavaScript und TypeScript unterstützt und können zum Importieren von JS-, TS-, JSX-, TSX-, JSON-, CSS- und SVG-Dateien verwendet werden.
Die @import CSS at-Regel wird für CSS unterstützt.
Importpfade werden derzeit nur gebündelt, wenn es sich um ein String-Literal oder ein Glob-Muster handelt. Andere Formen von Importpfaden werden nicht gebündelt und stattdessen wörtlich in der generierten Ausgabe beibehalten. Dies liegt daran, dass die Bündelung ein Vorgang zur Kompilierungszeit ist und Proscenium nicht alle Formen der Laufzeitpfadauflösung unterstützt.
Hier einige Beispiele:
// Analyzable imports (will be bundled)
import "pkg" ;
import ( "pkg" ) ;
import ( `./locale- ${ foo } .json` ) ;
// Non-analyzable imports (will not be bundled)
import ( `pkg/ ${ foo } ` ) ;Die Möglichkeit, nicht analysierbare Importe zu umgehen, besteht darin, das Paket, das diesen problematischen Code enthält, als entbündelt zu markieren, sodass es nicht im Paket enthalten ist. Anschließend müssen Sie sicherstellen, dass Ihrem gebündelten Code zur Laufzeit eine Kopie des externen Pakets zur Verfügung steht.
node_modules ) Bare-Importe (Importe, die nicht mit ./ , / , https:// , http:// beginnen) werden vollständig unterstützt und verwenden den Paketmanager Ihrer Wahl (z. B. NPM, Yarn, pnpm) über die Datei package.json im Stammverzeichnis Ihrer Rails-App.
Installieren Sie das Paket, das Sie importieren möchten, mit dem Paketmanager Ihrer Wahl ...
npm install react
...und dann importieren Sie es wie jedes andere Paket.
import React from "react" ;Und natürlich können Sie Ihren eigenen Code mit relativen oder absoluten Pfaden importieren (die Dateierweiterung ist optional und absolute Pfade verwenden Ihr Rails-Root als Basis):
import utils from "/lib/utils" ;
import constants from "./constants" ;
import Header from "/app/components/header" ; @import "/lib/reset" ; Manchmal möchten Sie einen Import nicht bündeln. Sie möchten beispielsweise sicherstellen, dass nur eine Instanz von React geladen wird. In diesen Fällen können Sie das unbundle -Präfix verwenden
import React from "unbundle:react" ;Dies funktioniert nur bei nackten und lokalen Importen.
Sie können in Ihrer Importzuordnung auch das Präfix unbundle verwenden, das sicherstellt, dass alle Importe eines bestimmten Pfads immer entbündelt sind:
{
"imports" : {
"react" : " unbundle:react "
}
}Dann importieren Sie einfach wie gewohnt:
import React from "react" ; [In Bearbeitung]
Der Import von Karten für JS und CSS wird standardmäßig unterstützt und funktioniert unabhängig vom verwendeten Browser. Dies liegt daran, dass die Importkarte von Proscenium auf dem Server und nicht vom Browser analysiert und aufgelöst wird. Dies ist schneller und ermöglicht Ihnen auch die Verwendung von Importkarten in Browsern, die diese noch nicht unterstützen.
Wenn Sie mit Importzuordnungen nicht vertraut sind, stellen Sie sich diese als eine Möglichkeit vor, Aliase zu definieren.
Erstellen Sie einfach config/import_map.json und geben Sie die Importe an, die Sie verwenden möchten. Zum Beispiel:
{
"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]/ "
}
}Mit der obigen Importkarte können wir Folgendes tun:
import { useCallback } from "react" ;
import startHere from "start" ;
import styles from "common" ;und für CSS...
@import "common" ;
@import "@radix-ui/colors/blue.css" ; Sie können Ihre Importkarte auch in JavaScript statt in JSON schreiben. Erstellen Sie also anstelle von config/import_map.json config/import_map.js und definieren Sie eine anonyme Funktion. Diese Funktion akzeptiert ein einzelnes environment .
( env ) => ( {
imports : {
react :
env === "development"
? "https://esm.sh/[email protected]?dev"
: "https://esm.sh/[email protected]" ,
} ,
} ) ; Quellkarten können das Debuggen Ihres Codes erleichtern. Sie kodieren die Informationen, die zum Übersetzen von einem Zeilen-/Spaltenversatz in einer generierten Ausgabedatei zurück in einen Zeilen-/Spaltenversatz in der entsprechenden ursprünglichen Eingabedatei erforderlich sind. Dies ist nützlich, wenn sich Ihr generierter Code ausreichend von Ihrem Originalcode unterscheidet (z. B. Ihr Originalcode ist TypeScript oder Sie haben die Minimierung aktiviert). Dies ist auch nützlich, wenn Sie statt einer großen gebündelten Datei lieber einzelne Dateien in den Entwicklertools Ihres Browsers betrachten möchten.
Die Ausgabe der Quellkarte wird sowohl für JavaScript als auch für CSS unterstützt. An jede Datei ist der Link zur Quellkarte angehängt. Zum Beispiel:
//# sourceMappingURL=/app/views/layouts/application.js.mapDie Entwicklungstools Ihres Browsers sollten dies erkennen und die Quellkarte bei Bedarf automatisch laden.
Sie können SVG aus JS(X) importieren, wodurch der SVG-Quellcode gebündelt wird. Darüber hinaus wird der SVG-Quellcode beim Import aus JSX oder TSX als JSX/TSX-Komponente gerendert.
Verfügbar in
>=0.10.0
Sie können jede Umgebungsvariable in Ihrem JavaScript und Typescript unter dem Namespace proscenium.env definieren und darauf zugreifen.
Aus Leistungs- und Sicherheitsgründen müssen Sie die Namen der Umgebungsvariablen, die Sie verfügbar machen möchten, in Ihrer Datei config/application.rb deklarieren.
config . proscenium . env_vars = Set [ 'API_KEY' , 'SOME_SECRET_VARIABLE' ]
config . proscenium . env_vars << 'ANOTHER_API_KEY' Dies setzt voraus, dass die gleichnamige Umgebungsvariable bereits definiert wurde. Wenn nicht, müssen Sie es entweder in Ihrem Code mithilfe des ENV Objekts von Ruby oder in Ihrer Shell selbst definieren.
Diese deklarierten Umgebungsvariablen werden durch konstante Ausdrücke ersetzt, sodass Sie dies wie folgt verwenden können:
console . log ( proscenium . env . RAILS_ENV ) ; // console.log("development")
console . log ( proscenium . env . RAILS_ENV === "development" ) ; // console.log(true) Die Umgebungsvariablen RAILS_ENV und NODE_ENV werden immer automatisch für Sie deklariert.
Darüber hinaus stellt Proscenium auch eine Variable process.env.NODE_ENV bereit, die auf denselben Wert wie proscenium.env.RAILS_ENV gesetzt ist. Es wird bereitgestellt, um die vorhandenen Tools der Community zu unterstützen, die häufig auf dieser Variablen basieren.
Umgebungsvariablen sind besonders wirksam bei der Unterstützung des Baumschüttelns.
function start ( ) {
console . log ( "start" ) ;
}
function doSomethingDangerous ( ) {
console . log ( "resetDatabase" ) ;
}
proscenium . env . RAILS_ENV === "development" && doSomethingDangerous ( ) ;
start ( ) ; In der Entwicklung wird der obige Code in den folgenden Code umgewandelt, wobei die Definition verworfen und doSomethingDangerous() aufgerufen wird.
function start ( ) {
console . log ( "start" ) ;
}
start ( ) ;Bitte beachten Sie, dass Umgebungsvariablen aus Sicherheitsgründen bei URL-Importen nicht ersetzt werden.
Eine undefinierte Umgebungsvariable wird durch undefined ersetzt.
console . log ( proscenium . env . UNKNOWN ) ; // console.log((void 0).UNKNOWN)Dies bedeutet, dass Code, der darauf basiert, nicht im Tree-Shake-Modus ausgeführt wird. Sie können dies umgehen, indem Sie den optionalen Verkettungsoperator verwenden:
if ( typeof proscenium . env ?. UNKNOWN !== "undefined" ) {
// do something if UNKNOWN is defined
} Es wird grundlegende Unterstützung für den Import Ihrer Rails-Gebietsschemadateien aus config/locales/*.yml und deren Export als JSON bereitgestellt.
import translations from "@proscenium/i18n" ;
// translations.en.* Standardmäßig nutzt die Ausgabe von Proscenium alle modernen JS-Funktionen aus der ES2022-Spezifikation und früher. Zum Beispiel a !== void 0 && a !== null ? a : b wird zu a ?? b beim Minimieren (standardmäßig in der Produktion aktiviert), wodurch die Syntax der ES2020-Version von JavaScript verwendet wird. Jede Syntaxfunktion, die von ES2020 nicht unterstützt wird, wird in eine ältere JavaScript-Syntax umgewandelt, die umfassender unterstützt wird.
Tree Shaking ist der Begriff, den die JavaScript-Community für die Eliminierung toten Codes verwendet, eine gängige Compiler-Optimierung, die automatisch nicht erreichbaren Code entfernt. Das Schütteln von Bäumen ist in Proscenium standardmäßig aktiviert.
function one ( ) {
console . log ( "one" ) ;
}
function two ( ) {
console . log ( "two" ) ;
}
one ( ) ; Der obige Code wird in den folgenden Code umgewandelt, wobei two() verworfen wird, da er nie aufgerufen wird.
function one ( ) {
console . log ( "one" ) ;
}
one ( ) ;Verfügbar in
>=0.10.0.
Seitlich geladene Assets werden automatisch im Code aufgeteilt. Das bedeutet, dass eine Datei, die mehrmals und von verschiedenen Dateien importiert und importiert wird, in eine separate Datei aufgeteilt wird.
Als Beispiel:
// /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" ; Sowohl son.js als daughter.js importieren father.js , sodass sowohl Son als auch Daughter normalerweise eine Kopie von Father enthalten würden, was zu doppeltem Code und größeren Paketgrößen führt.
Wenn diese Dateien seitlich geladen werden, wird father.js in eine separate Datei oder einen separaten Block aufgeteilt und nur einmal heruntergeladen.
Von mehreren Einstiegspunkten gemeinsam genutzter Code wird in eine separate gemeinsame Datei aufgeteilt, die beide Einstiegspunkte importieren. Auf diese Weise muss der Benutzer, wenn er zuerst zu einer Seite und dann zu einer anderen Seite navigiert, nicht das gesamte JavaScript für die zweite Seite von Grund auf herunterladen, wenn der freigegebene Teil bereits von seinem Browser heruntergeladen und zwischengespeichert wurde.
Code, auf den über einen asynchronen import() Ausdruck verwiesen wird, wird in eine separate Datei aufgeteilt und nur geladen, wenn dieser Ausdruck ausgewertet wird. Dadurch können Sie die anfängliche Downloadzeit Ihrer App verkürzen, indem Sie beim Start nur den Code herunterladen, den Sie benötigen, und später bei Bedarf langsam zusätzlichen Code herunterladen.
Ohne Codeaufteilung wird ein import()-Ausdruck stattdessen zu Promise.resolve().then(() => require()) . Dadurch bleibt die asynchrone Semantik des Ausdrucks erhalten, aber es bedeutet, dass der importierte Code im selben Bundle enthalten ist und nicht in eine separate Datei aufgeteilt wird.
Die Codeaufteilung ist standardmäßig aktiviert. Sie können es deaktivieren, indem Sie die Konfigurationsoption code_splitting in /config/application.rb Ihrer Anwendung auf false setzen:
config . proscenium . code_splitting = falseIn Bezug auf JavaScript gibt es einige wichtige Einschränkungen. Diese werden auf der esbuild-Website detailliert beschrieben.
CSS ist ein erstklassiger Inhaltstyp in Proscenium, was bedeutet, dass CSS-Dateien direkt gebündelt werden können, ohne dass Sie Ihr CSS aus JavaScript-Code importieren müssen. Sie können andere CSS-Dateien @import und Bild- und Schriftartdateien mit url() referenzieren, und Proscenium bündelt alles.
Beachten Sie, dass die Ausgabe von Proscenium standardmäßig alle modernen CSS-Funktionen nutzt. Beispielsweise wird color: rgba(255, 0, 0, 0.4) nach der Minimierung in der Produktion zu color: #f006 , wobei die Syntax von CSS Color Module Level 4 verwendet wird.
Die neue CSS-Verschachtelungssyntax wird unterstützt und für ältere Browser in nicht verschachteltes CSS umgewandelt.
Proscenium fügt außerdem automatisch Herstellerpräfixe ein, sodass Ihr CSS in älteren Browsern funktioniert.
Sie können CSS auch aus JavaScript importieren. Wenn Sie dies tun, hängt Proscenium jedes Stylesheet automatisch als <link> -Element an den Kopf des Dokuments an.
import "./button.css" ;
export let Button = ( { text } ) => {
return < div className = "button" > { text } < / div > ;
} ; Proscenium implementiert eine Teilmenge von CSS-Modulen. Es unterstützt die Schlüsselwörter :local und :global , jedoch nicht die Eigenschaft composes . (Es wird empfohlen, Mixins anstelle von composes zu verwenden, da diese überall funktionieren, sogar in einfachen CSS-Dateien.)
Geben Sie jeder CSS-Datei die Erweiterung .module.css , und Proscenium behandelt sie als CSS-Modul und wandelt alle Klassennamen mit einem für die Datei eindeutigen Suffix um.
. title {
font-size : 20 em ;
}Die obige Eingabe ergibt:
. title-5564cdbb {
font-size : 20 em ;
}Sie haben jetzt einen eindeutigen Klassennamen, den Sie praktisch überall verwenden können.
Sie können CSS-Module aus Ihren Rails-Ansichten, Teilansichten und Layouts referenzieren, indem Sie den Helfer css_module verwenden, der einen oder mehrere Klassennamen akzeptiert und die entsprechenden CSS-Modulnamen zurückgibt – den Klassennamen mit dem angehängten eindeutigen Suffix.
Beim Sideloading-Setup können Sie den css_module Helfer wie folgt verwenden.
< 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 akzeptiert mehrere Klassennamen und gibt eine durch Leerzeichen getrennte Zeichenfolge transformierter CSS-Modulnamen zurück.
css_module :my_module_name
# => "my_module_name-ABCD1234"Sie können sogar aus einer beliebigen CSS-Datei auf eine Klasse verweisen, indem Sie den URL-Pfad zur Datei als Präfix an den Klassennamen übergeben. Dadurch wird das Stylesheet automatisch seitlich geladen.
css_module '/app/components/button.css@big_button'
# => "big_button"Es unterstützt auch NPM-Pakete (bereits in /node_modules installiert):
css_module 'mypackage/button@big_button'
# => "big_button" css_module akzeptiert auch ein path Schlüsselwortargument, mit dem Sie den Pfad zur CSS-Datei angeben können. Beachten Sie, dass dadurch der angegebene Pfad für alle Klassennamen verwendet wird, die an diese Instanz von css_module übergeben werden.
css_module :my_module_name , path : Rails . root . join ( 'app/components/button.css' ) Beim Importieren eines CSS-Moduls aus JS wird das Stylesheet automatisch an den Kopf des Dokuments angehängt. Und das Ergebnis des Imports ist ein Objekt der CSS-Klasse mit Modulnamen.
import styles from "./styles.module.css" ;
// styles == { header: 'header-5564cdbb' }Es ist wichtig zu beachten, dass das exportierte Objekt der CSS-Modulnamen tatsächlich ein JavaScript-Proxy-Objekt ist. Das Destrukturieren des Objekts wird also nicht funktionieren. Stattdessen müssen Sie direkt auf die Eigenschaften zugreifen.
Außerdem führt das Importieren eines CSS-Moduls in ein anderes CSS-Modul dazu, dass für alle Klassen derselbe Digest-String entsteht.
Proscenium bietet Funktionen zum Einbinden oder „Einmischen“ einer oder mehrerer CSS-Klassen in eine andere. Dies ähnelt der composes Eigenschaft von CSS-Modulen, funktioniert jedoch überall und ist nicht auf CSS-Module beschränkt.
CSS-Mixins werden mit den @define-mixin und @mixin at-rules unterstützt.
Ein Mixin wird mithilfe der @define-mixin at-Regel definiert. Übergeben Sie einen Namen, der der Semantik des Klassennamens entsprechen sollte, und deklarieren Sie Ihre Regeln:
// /lib/mixins.css
@define-mixin bigText {
font-size : 50 px ;
} Verwenden Sie ein Mixin mit der @mixin at-Regel. Übergeben Sie den Namen des Mixins, das Sie verwenden möchten, und die URL, unter der das Mixin deklariert ist. Die URL wird zum Auflösen des Mixins verwendet und kann relativ, absolut, eine URL oder sogar aus einem NPM-Paket stammen.
// /app/views/layouts/application.css
p {
@mixin bigText from url ( "/lib/mixins.css" );
color : red;
}Das Obige erzeugt diese Ausgabe:
p {
font-size : 50 px ;
color : red;
}Mixins können in jeder CSS-Datei deklariert werden. Sie müssen nicht in derselben Datei deklariert werden, in der sie verwendet werden. Wenn Sie jedoch ein Mixin in derselben Datei deklarieren und verwenden, müssen Sie nicht die URL angeben, unter der das Mixin deklariert wird.
@define-mixin bigText {
font-size : 50 px ;
}
p {
@mixin bigText;
color : red;
}CSS-Module und Mixins arbeiten perfekt zusammen. Sie können ein Mixin in ein CSS-Modul einbinden.
Was CSS betrifft, gibt es einige wichtige Vorbehalte. Diese werden auf der esbuild-Website detailliert beschrieben.
Typescript und TSX werden standardmäßig unterstützt und verfügen über eine integrierte Unterstützung für das Parsen der TypeScript-Syntax und das Verwerfen der Typanmerkungen. Benennen Sie Ihre Dateien einfach in .ts oder .tsx um und schon kann es losgehen.
Bitte beachten Sie, dass Proscenium keine Typprüfung durchführt, Sie müssen also trotzdem tsc -noEmit parallel zu Proscenium ausführen, um Typen zu überprüfen.
Was Typescript betrifft, gibt es einige wichtige Vorbehalte. Diese werden auf der esbuild-Website detailliert beschrieben.
Die Verwendung der JSX-Syntax erfordert normalerweise, dass Sie die von Ihnen verwendete JSX-Bibliothek manuell importieren. Wenn Sie beispielsweise React verwenden, müssen Sie React standardmäßig wie folgt in jede JSX-Datei importieren:
import * as React from "react" ;
render ( < div / > ) ; Dies liegt daran, dass die JSX-Transformation die JSX-Syntax in einen Aufruf von React.createElement umwandelt, aber selbst nichts importiert, sodass die React-Variable nicht automatisch vorhanden ist.
Proscenium generiert diese Importanweisungen für Sie. Beachten Sie, dass sich dadurch auch die Funktionsweise der JSX-Transformation völlig ändert, sodass Ihr Code möglicherweise beschädigt wird, wenn Sie eine JSX-Bibliothek verwenden, die nicht React ist.
In [nicht allzu ferner] Zukunft können Sie Proscenium so konfigurieren, dass es eine andere JSX-Bibliothek verwendet, oder diesen automatischen Import vollständig deaktivieren.
Beim Importieren von JSON-Dateien wird die JSON-Datei in ein JavaScript-Objekt analysiert und das Objekt als Standardexport exportiert. Die Verwendung sieht in etwa so aus:
import object from "./example.json" ;
console . log ( object ) ;Zusätzlich zum Standardexport gibt es auch benannte Exporte für jede Eigenschaft der obersten Ebene im JSON-Objekt. Das direkte Importieren eines benannten Exports bedeutet, dass Proscenium nicht verwendete Teile der JSON-Datei automatisch aus dem Bundle entfernen kann, sodass nur die benannten Exporte übrig bleiben, die Sie tatsächlich verwendet haben. Dieser Code enthält beispielsweise nur das Versionsfeld, wenn er gebündelt ist:
import { version } from "./package.json" ;
console . log ( version ) ; Phlex ist ein Framework zum Erstellen schneller, wiederverwendbarer und testbarer Ansichten in reinem Ruby. Proscenium funktioniert perfekt mit Phlex und unterstützt Sideloading, CSS-Module und mehr. Schreiben Sie einfach Ihre Phlex-Klassen und erben Sie von Proscenium::Phlex .
class MyView < Proscenium :: Phlex
def view_template
h1 { 'Hello World' }
end
end Fügen Sie in Ihre Layouts Proscenium::Phlex::AssetInclusions ein und rufen Sie den include_assets -Helper auf.
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 Mit den Hilfsprogrammen include_stylesheets und include_javascripts können Sie CCS- und JS-Assets gezielt einbinden und so steuern, wo sie in den HTML-Code eingefügt werden.
Jede Phlex-Klasse, die Proscenium::Phlex erbt, wird automatisch seitlich geladen.
CSS-Module werden in Phlex-Klassen vollständig unterstützt, mit Zugriff auf den css_module Helper, wenn Sie ihn benötigen. Es gibt jedoch eine bessere und einfachere Möglichkeit, in Ihren Phlex-Klassen auf CSS-Modulklassen zu verweisen.
In Ihren Phlex-Klassen werden alle Klassennamen, die mit @ beginnen, als CSS-Modulklasse behandelt.
# /app/views/users/show_view.rb
class Users :: ShowView < Proscenium :: Phlex
def 
