proscenium
v0.18.0
haluan · lihat · nee · uhm
kata benda : proscenium
- bagian panggung teater di depan tirai.
Proscenium memperlakukan kode frontend dan sisi klien Anda sebagai warga kelas satu dari aplikasi Rails Anda, dan mengasumsikan internet "cepat secara default". Ini menggabungkan dan mengecilkan JavaScript (+ JSX), TypeScript (+TSX) dan CSS secara real time, sesuai permintaan, dan tanpa konfigurasi.
Sorotan:
rails s !Memulainya jelas bergantung pada apakah Anda menambahkan Proscenium ke aplikasi Rails yang sudah ada, atau membuat yang baru. Jadi pilihlah panduan yang sesuai di bawah ini:
Tambahkan baris ini ke Gemfile aplikasi Rails Anda, dan Anda siap melakukannya:
gem 'proscenium'Harap dicatat bahwa Proscenium dirancang hanya untuk digunakan dengan Rails.
Sekarang jika Anda memulai aplikasi Rails, Anda dapat membuka kode front end apa pun (JS, CSS, dll.). Misalnya, file di app/assets/stylesheets/application.css dapat diakses di https://localhost:3000/app/assets/stylesheets/application.css , yang akan digabungkan, diubah, dan diperkecil [dalam produksi] dalam waktu nyata.
Proscenium percaya bahwa kode frontend Anda sama pentingnya dengan kode backend Anda, dan bukan merupakan sebuah renungan - mereka harus menjadi warga kelas satu dari aplikasi Rails Anda. Jadi daripada harus membuang semua JS dan CSS Anda ke dalam direktori "aplikasi/aset", dan kemudian memerlukan proses terpisah untuk dikompilasi atau digabungkan, cukup letakkan di mana pun Anda inginkan dalam aplikasi Anda, dan jalankan Rails!
Misalnya, jika Anda memiliki beberapa JS yang diperlukan oleh tampilan app/views/users/index.html.erb Anda, cukup buat file JS di sampingnya di app/views/users/index.js . Atau jika Anda memiliki beberapa CSS yang digunakan oleh seluruh aplikasi Anda, letakkan di app/views/layouts/application.css dan muat di samping tata letak Anda. Mungkin Anda memiliki beberapa fungsi utilitas JS, jadi letakkan di lib/utils.js .
Cukup letakkan JS(X) dan CSS Anda di mana pun Anda inginkan, dan keduanya akan dilayani oleh aplikasi Rails Anda dari lokasi tempat Anda menempatkannya.
Menggunakan contoh di atas...
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 paling baik digunakan ketika aset Anda dimuat secara otomatis.
Dengan Rails, Anda biasanya memuat aset JavaScript dan CSS secara deklaratif menggunakan pembantu javascript_include_tag dan stylesheet_link_tag .
Misalnya, Anda mungkin memiliki CSS "aplikasi" tingkat atas yang terletak di file di /app/assets/stylesheets/application.css . Demikian pula, Anda mungkin memiliki beberapa JavaScript global yang terletak di file di /app/javascript/application.js .
Anda akan memasukkan kedua file tersebut secara manual dan deklaratif ke dalam tata letak aplikasi Anda, seperti ini:
<%# /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 >Sekarang, Anda mungkin memiliki beberapa CSS dan JavaScript yang hanya diperlukan oleh tampilan tertentu dan sebagian, sehingga Anda akan memuatnya dalam tampilan (atau tata letak), seperti ini:
<%# /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 %> Masalah utamanya adalah Anda harus melacak semua aset ini, dan memastikan masing-masing aset dimuat oleh semua tampilan yang memerlukannya, namun juga menghindari memuatnya saat tidak diperlukan. Ini bisa sangat menyusahkan, terutama bila Anda memiliki banyak penayangan.
Saat memuat JavaScript, TypeScript, dan CSS Anda dengan Proscenium, semuanya secara otomatis disertakan bersama tampilan, sebagian, tata letak, dan komponen Anda, dan hanya jika diperlukan.
Pemuatan samping bekerja dengan mencari file JS/TS/CSS dengan nama yang sama dengan tampilan, sebagian, tata letak, atau komponen Anda. Misalnya, jika Anda memiliki tampilan di app/views/users/index.html.erb , maka Proscenium akan mencari file JS/TS/CSS di app/views/users/index.js , app/views/users/index.ts atau app/views/users/index.css . Jika menemukannya, ia akan memasukkannya ke dalam HTML untuk tampilan tersebut.
BEJ juga didukung untuk JavaScript dan TypeScript. Cukup gunakan ekstensi .jsx atau .tsx bukan .js atau .ts .
Cukup buat file JS dan/atau CSS dengan nama yang sama dengan tampilan, sebagian, atau tata letak apa pun.
Mari kita lanjutkan dengan contoh soal kita di atas, dimana kita memiliki aset berikut
/app/assets/application.css/app/assets/application.js/app/assets/users.css/app/assets/users.js/app/assets/user.js Tata letak aplikasi Anda ada di /app/views/layouts/application.hml.erb , dan tampilan yang memerlukan aset pengguna ada di /app/views/users/index.html.erb , jadi pindahkan aset JS dan CSS Anda di sampingnya :
/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 (sebagian) Sekarang, dalam tata letak dan tampilan Anda, ganti helper javascript_include_tag dan stylesheet_link_tag dengan helper include_asset dari Proscenium. Sesuatu seperti ini:
<!DOCTYPE html >
< html >
< head >
< title > Hello World </ title >
<%= include_assets # <-- %>
</ head >
< body >
<%= yield %>
</ body >
</ html > Pada setiap permintaan halaman, Proscenium akan memeriksa apakah ada tampilan, tata letak, dan sebagian Anda yang memiliki file JS/TS/CSS dengan nama yang sama, dan kemudian menyertakannya di mana pun Anda menempatkan helper include_assets .
Sekarang Anda tidak perlu lagi mengingat untuk memasukkan aset Anda. Buat saja di samping tampilan, bagian, dan tata letak Anda, dan Proscenium akan mengurus sisanya.
Pemuatan samping diaktifkan secara default, tetapi Anda dapat menonaktifkannya dengan menyetel config.proscenium.side_load ke false di /config/application.rb .
Ada juga pembantu include_stylesheets dan include_javascripts yang memungkinkan Anda mengontrol di mana aset CSS dan JS disertakan dalam HTML. Pembantu ini harus digunakan alih-alih include_assets jika Anda ingin mengontrol dengan tepat di mana aset tersebut disertakan.
Membundel file berarti memasukkan semua dependensi yang diimpor ke dalam file itu sendiri. Proses ini bersifat rekursif sehingga dependensi dari dependensi (dan seterusnya) juga akan disejajarkan.
Proscenium akan dibundel secara default, dan secara real time. Jadi tidak ada langkah build atau pra-kompilasi tersendiri.
Proscenium mendukung impor JS, JSX, TS, TSX, CSS dan SVG dari NPM, melalui URL, aplikasi lokal Anda, dan bahkan dari Ruby Gems lainnya.
Impor statis ( import ) dan dinamis ( import() ) didukung untuk JavaScript dan TypeScript, dan dapat digunakan untuk mengimpor file JS, TS, JSX, TSX, JSON, CSS, dan SVG.
Aturan @import CSS didukung untuk CSS.
Jalur impor saat ini hanya dipaketkan jika berupa string literal atau pola glob. Bentuk jalur impor lainnya tidak dibundel, dan dipertahankan kata demi kata dalam keluaran yang dihasilkan. Hal ini karena bundling adalah operasi waktu kompilasi dan Proscenium tidak mendukung semua bentuk resolusi jalur run-time.
Berikut beberapa contohnya:
// Analyzable imports (will be bundled)
import "pkg" ;
import ( "pkg" ) ;
import ( `./locale- ${ foo } .json` ) ;
// Non-analyzable imports (will not be bundled)
import ( `pkg/ ${ foo } ` ) ;Cara mengatasi impor yang tidak dapat dianalisis adalah dengan menandai paket yang berisi kode bermasalah ini sebagai tidak dibundel sehingga tidak disertakan dalam paket. Anda kemudian perlu memastikan bahwa salinan paket eksternal tersedia untuk kode paket Anda pada saat run-time.
node_modules ) Impor kosong (impor yang tidak diawali dengan ./ , / , https:// , http:// ) didukung sepenuhnya, dan akan menggunakan manajer paket pilihan Anda (misalnya, NPM, Yarn, pnpm) melalui file package.json yang berada di root aplikasi Rails Anda.
Instal paket yang ingin Anda impor menggunakan manajer paket pilihan Anda...
npm install react
...dan kemudian mengimpornya seperti yang Anda lakukan pada paket lainnya.
import React from "react" ;Dan tentu saja Anda dapat mengimpor kode Anda sendiri, menggunakan jalur relatif atau absolut (ekstensi file bersifat opsional, dan jalur absolut menggunakan root Rails Anda sebagai basis):
import utils from "/lib/utils" ;
import constants from "./constants" ;
import Header from "/app/components/header" ; @import "/lib/reset" ; Terkadang Anda tidak ingin menggabungkan impor. Misalnya, Anda ingin memastikan bahwa hanya satu instance React yang dimuat. Dalam kasus ini, Anda dapat menggunakan awalan unbundle
import React from "unbundle:react" ;Ini hanya berfungsi untuk impor telanjang dan lokal.
Anda juga dapat menggunakan awalan unbundle di peta impor Anda, yang memastikan bahwa semua impor jalur tertentu selalu tidak dibundel:
{
"imports" : {
"react" : " unbundle:react "
}
}Kemudian impor saja seperti biasa:
import React from "react" ; [WIP]
Impor peta untuk JS dan CSS langsung didukung, dan berfungsi tanpa memandang browser yang digunakan. Hal ini karena peta impor diurai dan diselesaikan oleh Proscenium di server, bukan oleh browser. Ini lebih cepat, dan juga memungkinkan Anda menggunakan peta impor di browser yang belum mendukungnya.
Jika Anda belum familiar dengan impor peta, anggap saja itu sebagai cara untuk mendefinisikan alias.
Cukup buat config/import_map.json dan tentukan impor yang ingin Anda gunakan. Misalnya:
{
"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]/ "
}
}Dengan menggunakan peta impor di atas, kita dapat melakukan...
import { useCallback } from "react" ;
import startHere from "start" ;
import styles from "common" ;dan untuk CSS...
@import "common" ;
@import "@radix-ui/colors/blue.css" ; Anda juga dapat menulis peta impor dalam JavaScript, bukan JSON. Jadi, alih-alih config/import_map.json , buat config/import_map.js , dan tentukan fungsi anonim. Fungsi ini menerima argumen environment tunggal.
( env ) => ( {
imports : {
react :
env === "development"
? "https://esm.sh/[email protected]?dev"
: "https://esm.sh/[email protected]" ,
} ,
} ) ; Peta sumber dapat mempermudah proses debug kode Anda. Mereka menyandikan informasi yang diperlukan untuk menerjemahkan dari offset baris/kolom dalam file keluaran yang dihasilkan kembali ke offset baris/kolom dalam file masukan asli yang sesuai. Ini berguna jika kode yang Anda buat cukup berbeda dari kode asli Anda (misalnya kode asli Anda adalah TypeScript atau Anda mengaktifkan minifikasi). Ini juga berguna jika Anda lebih suka melihat file individual di alat pengembang browser Anda daripada satu file besar yang dibundel.
Output peta sumber didukung untuk JavaScript dan CSS. Setiap file ditambahkan dengan link ke peta sumber. Misalnya:
//# sourceMappingURL=/app/views/layouts/application.js.mapAlat pengembang browser Anda harus mengambil ini dan secara otomatis memuat peta sumber kapan dan di mana diperlukan.
Anda dapat mengimpor SVG dari JS(X), yang akan menggabungkan kode sumber SVG. Selain itu, jika mengimpor dari JSX atau TSX, kode sumber SVG akan dirender sebagai komponen JSX/TSX.
Tersedia dalam
>=0.10.0
Anda dapat menentukan dan mengakses variabel lingkungan apa pun dari JavaScript dan TypeScript Anda di bawah namespace proscenium.env .
Untuk alasan kinerja dan keamanan, Anda harus mendeklarasikan nama variabel lingkungan yang ingin Anda tampilkan di file config/application.rb Anda.
config . proscenium . env_vars = Set [ 'API_KEY' , 'SOME_SECRET_VARIABLE' ]
config . proscenium . env_vars << 'ANOTHER_API_KEY' Ini mengasumsikan bahwa variabel lingkungan dengan nama yang sama telah ditentukan. Jika tidak, Anda perlu mendefinisikannya sendiri di kode Anda menggunakan objek ENV Ruby, atau di shell Anda.
Variabel lingkungan yang dideklarasikan ini akan diganti dengan ekspresi konstan, sehingga Anda dapat menggunakannya seperti ini:
console . log ( proscenium . env . RAILS_ENV ) ; // console.log("development")
console . log ( proscenium . env . RAILS_ENV === "development" ) ; // console.log(true) Variabel lingkungan RAILS_ENV dan NODE_ENV akan selalu dideklarasikan secara otomatis untuk Anda.
Selain itu, Proscenium juga menyediakan variabel process.env.NODE_ENV , yang disetel ke nilai yang sama dengan proscenium.env.RAILS_ENV . Hal ini disediakan untuk mendukung perangkat komunitas yang ada, yang seringkali bergantung pada variabel ini.
Variabel lingkungan sangat berpengaruh dalam membantu guncangan pohon.
function start ( ) {
console . log ( "start" ) ;
}
function doSomethingDangerous ( ) {
console . log ( "resetDatabase" ) ;
}
proscenium . env . RAILS_ENV === "development" && doSomethingDangerous ( ) ;
start ( ) ; Dalam pengembangan, kode di atas akan diubah menjadi kode berikut, membuang definisinya, dan memanggil doSomethingDangerous() .
function start ( ) {
console . log ( "start" ) ;
}
start ( ) ;Harap dicatat bahwa untuk alasan keamanan, variabel lingkungan tidak diganti dalam impor URL.
Variabel lingkungan yang tidak terdefinisi akan diganti dengan undefined .
console . log ( proscenium . env . UNKNOWN ) ; // console.log((void 0).UNKNOWN)Artinya kode yang mengandalkan ini tidak akan diguncang pohon. Anda dapat menyiasatinya dengan menggunakan operator rangkaian opsional:
if ( typeof proscenium . env ?. UNKNOWN !== "undefined" ) {
// do something if UNKNOWN is defined
} Dukungan dasar disediakan untuk mengimpor file lokal Rails Anda dari config/locales/*.yml , mengekspornya sebagai JSON.
import translations from "@proscenium/i18n" ;
// translations.en.* Secara default, keluaran Proscenium akan memanfaatkan semua fitur JS modern dari spesifikasi ES2022 dan versi sebelumnya. Misalnya, a !== void 0 && a !== null ? a : b akan menjadi a ?? b saat melakukan minifikasi (diaktifkan secara default dalam produksi), yang menggunakan sintaksis dari JavaScript versi ES2020. Fitur sintaksis apa pun yang tidak didukung oleh ES2020 akan diubah menjadi sintaksis JavaScript lama yang didukung lebih luas.
Pengguncangan pohon adalah istilah yang digunakan komunitas JavaScript untuk menghilangkan kode mati, sebuah optimasi kompiler umum yang secara otomatis menghapus kode yang tidak dapat dijangkau. Pengguncangan pohon diaktifkan secara default di Proscenium.
function one ( ) {
console . log ( "one" ) ;
}
function two ( ) {
console . log ( "two" ) ;
}
one ( ) ; Kode di atas akan diubah menjadi kode berikut, membuang two() , karena tidak pernah dipanggil.
function one ( ) {
console . log ( "one" ) ;
}
one ( ) ;Tersedia dalam
>=0.10.0.
Aset yang dimuat samping secara otomatis dipisahkan kodenya. Artinya jika Anda memiliki file yang diimpor dan digunakan beberapa kali, dan berdasarkan file yang berbeda, maka file tersebut akan dipecah menjadi file terpisah.
Sebagai contoh:
// /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" ; son.js dan daughter.js mengimpor father.js , sehingga son dan daughter biasanya menyertakan salinan ayah, sehingga menghasilkan kode duplikat dan ukuran bundel yang lebih besar.
Jika file-file ini dimuat di samping, maka father.js akan dipecah menjadi file atau potongan terpisah, dan hanya diunduh satu kali.
Kode yang dibagikan antara beberapa titik masuk dipecah menjadi file bersama terpisah yang diimpor oleh kedua titik masuk. Dengan begitu, jika pengguna menelusuri satu halaman terlebih dahulu lalu ke halaman lain, mereka tidak perlu mendownload semua JavaScript untuk halaman kedua dari awal jika bagian yang dibagikan telah diunduh dan di-cache oleh browser mereka.
Kode yang direferensikan melalui ekspresi import() asinkron akan dipecah menjadi file terpisah dan hanya dimuat ketika ekspresi tersebut dievaluasi. Hal ini memungkinkan Anda meningkatkan waktu pengunduhan awal aplikasi dengan hanya mengunduh kode yang diperlukan saat permulaan, lalu dengan malas mengunduh kode tambahan jika diperlukan nanti.
Tanpa pemisahan kode, ekspresi import() menjadi Promise.resolve().then(() => require()) sebagai gantinya. Ini masih mempertahankan semantik ekspresi asinkron tetapi itu berarti kode yang diimpor disertakan dalam bundel yang sama alih-alih dipecah menjadi file terpisah.
Pemisahan kode diaktifkan secara default. Anda dapat menonaktifkannya dengan menyetel opsi konfigurasi code_splitting ke false di /config/application.rb aplikasi Anda:
config . proscenium . code_splitting = falseAda beberapa peringatan penting terkait JavaScript. Ini dirinci di situs esbuild.
CSS adalah tipe konten kelas satu di Proscenium, yang berarti dapat menggabungkan file CSS secara langsung tanpa perlu mengimpor CSS Anda dari kode JavaScript. Anda dapat @import file CSS lain dan referensi file gambar dan font dengan url() dan Proscenium akan menggabungkan semuanya.
Perhatikan bahwa secara default, keluaran Proscenium akan memanfaatkan semua fitur CSS modern. Misalnya, color: rgba(255, 0, 0, 0.4) akan menjadi color: #f006 setelah diperkecil dalam produksi, yang menggunakan sintaksis dari Modul Warna CSS Level 4.
Sintaks bersarang CSS baru didukung, dan diubah menjadi CSS non-bersarang untuk browser lama.
Proscenium juga akan secara otomatis memasukkan awalan vendor sehingga CSS Anda akan berfungsi di browser lama.
Anda juga dapat mengimpor CSS dari JavaScript. Ketika Anda melakukan ini, Proscenium akan secara otomatis menambahkan setiap stylesheet ke kepala dokumen sebagai elemen <link> .
import "./button.css" ;
export let Button = ( { text } ) => {
return < div className = "button" > { text } < / div > ;
} ; Proscenium mengimplementasikan subset Modul CSS. Ini mendukung kata kunci :local dan :global , tetapi tidak mendukung properti composes . (disarankan agar Anda menggunakan mixin daripada composes , karena mixin dapat berfungsi di mana saja, bahkan dalam file CSS biasa.)
Berikan ekstensi .module.css pada file CSS apa pun, dan Proscenium akan memperlakukannya sebagai Modul CSS, mengubah semua nama kelas dengan akhiran unik untuk file tersebut.
. title {
font-size : 20 em ;
}Masukan di atas menghasilkan:
. title-5564cdbb {
font-size : 20 em ;
}Anda sekarang memiliki nama kelas unik yang dapat Anda gunakan di mana saja.
Anda dapat mereferensikan modul CSS dari tampilan, parsial, dan tata letak Rails Anda menggunakan helper css_module , yang menerima satu atau lebih nama kelas, dan akan mengembalikan nama modul CSS yang setara - nama kelas dengan akhiran unik yang ditambahkan.
Dengan pengaturan pemuatan samping, Anda dapat menggunakan pembantu css_module sebagai berikut.
< 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 menerima beberapa nama kelas, dan akan mengembalikan string nama modul CSS yang diubah yang dipisahkan spasi.
css_module :my_module_name
# => "my_module_name-ABCD1234"Anda bahkan dapat mereferensikan kelas dari file CSS mana pun dengan meneruskan jalur URL ke file tersebut, sebagai awalan nama kelas. Melakukannya secara otomatis akan memuat stylesheet ke samping.
css_module '/app/components/button.css@big_button'
# => "big_button"Ini juga mendukung paket NPM (sudah diinstal di/node_modules):
css_module 'mypackage/button@big_button'
# => "big_button" css_module juga menerima argumen kata kunci path , yang memungkinkan Anda menentukan path ke file CSS. Perhatikan bahwa ini akan menggunakan jalur yang diberikan untuk semua nama kelas yang diteruskan ke instance css_module tersebut.
css_module :my_module_name , path : Rails . root . join ( 'app/components/button.css' ) Mengimpor modul CSS dari JS akan secara otomatis menambahkan stylesheet ke kepala dokumen. Dan hasil importnya akan berupa objek kelas CSS hingga nama modul.
import styles from "./styles.module.css" ;
// styles == { header: 'header-5564cdbb' }Penting untuk dicatat bahwa objek nama modul CSS yang diekspor sebenarnya adalah objek Proxy JavaScript. Jadi merusak objek tidak akan berhasil. Sebaliknya, Anda harus mengakses properti secara langsung.
Selain itu, mengimpor modul CSS ke modul CSS lain akan menghasilkan string intisari yang sama untuk semua kelas.
Proscenium menyediakan fungsionalitas untuk memasukkan atau "mencampurkan" satu atau lebih kelas CSS ke kelas lain. Ini mirip dengan properti composes pada Modul CSS, namun berfungsi di mana saja, dan tidak terbatas pada Modul CSS.
Mixin CSS didukung menggunakan aturan @define-mixin dan @mixin .
Mixin didefinisikan menggunakan aturan @define-mixin . Berikan nama yang harus mematuhi semantik nama kelas, dan nyatakan aturan Anda:
// /lib/mixins.css
@define-mixin bigText {
font-size : 50 px ;
} Gunakan mixin menggunakan aturan @mixin . Berikan nama mixin yang ingin Anda gunakan, dan url tempat mixin dideklarasikan. Url digunakan untuk menyelesaikan mixin, dan dapat berupa relatif, absolut, URL, atau bahkan dari paket NPM.
// /app/views/layouts/application.css
p {
@mixin bigText from url ( "/lib/mixins.css" );
color : red;
}Di atas menghasilkan output ini:
p {
font-size : 50 px ;
color : red;
}Mixin dapat dideklarasikan dalam file CSS apa pun. Mereka tidak perlu dideklarasikan dalam file yang sama dengan tempat mereka digunakan. namun, jika Anda mendeklarasikan dan menggunakan mixin dalam file yang sama, Anda tidak perlu menentukan URL tempat mixin tersebut dideklarasikan.
@define-mixin bigText {
font-size : 50 px ;
}
p {
@mixin bigText;
color : red;
}Modul CSS dan Mixin bekerja sama dengan sempurna. Anda dapat memasukkan mixin ke dalam modul CSS.
Ada beberapa peringatan penting terkait CSS. Ini dirinci di situs esbuild.
TypeScript dan TSX langsung didukung, dan memiliki dukungan bawaan untuk mengurai sintaks TypeScript dan membuang anotasi tipe. Ganti saja nama file Anda menjadi .ts atau .tsx dan Anda siap melakukannya.
Harap dicatat bahwa Proscenium tidak melakukan pemeriksaan jenis apa pun sehingga Anda masih perlu menjalankan tsc -noEmit secara paralel dengan Proscenium untuk memeriksa jenis.
Ada beberapa peringatan penting sejauh menyangkut TypeScript. Ini dirinci di situs esbuild.
Penggunaan sintaksis JSX biasanya mengharuskan Anda mengimpor pustaka JSX yang Anda gunakan secara manual. Misalnya, jika Anda menggunakan React, secara default Anda perlu mengimpor React ke setiap file JSX seperti ini:
import * as React from "react" ;
render ( < div / > ) ; Hal ini karena transformasi JSX mengubah sintaksis JSX menjadi panggilan ke React.createElement tetapi ia tidak mengimpor apa pun, sehingga variabel React tidak ada secara otomatis.
Proscenium menghasilkan pernyataan impor ini untuk Anda. Ingatlah bahwa ini juga sepenuhnya mengubah cara kerja transformasi JSX, sehingga kode Anda mungkin rusak jika Anda menggunakan pustaka JSX yang bukan React.
Dalam waktu [tidak terlalu lama], Anda akan dapat mengonfigurasi Proscenium untuk menggunakan perpustakaan JSX yang berbeda, atau menonaktifkan impor otomatis ini sepenuhnya.
Mengimpor file .json akan mem-parsing file JSON menjadi objek JavaScript, dan mengekspor objek tersebut sebagai ekspor default. Menggunakannya terlihat seperti ini:
import object from "./example.json" ;
console . log ( object ) ;Selain ekspor default, ada juga ekspor bernama untuk setiap properti tingkat atas di objek JSON. Mengimpor ekspor bernama secara langsung berarti Proscenium dapat secara otomatis menghapus bagian file JSON yang tidak digunakan dari bundel, sehingga hanya menyisakan ekspor bernama yang sebenarnya Anda gunakan. Misalnya, kode ini hanya akan menyertakan kolom versi ketika digabungkan:
import { version } from "./package.json" ;
console . log ( version ) ; Phlex adalah kerangka kerja untuk membangun tampilan yang cepat, dapat digunakan kembali, dan dapat diuji di Ruby murni. Proscenium bekerja sempurna dengan Phlex, dengan dukungan untuk side-loading, modul CSS, dan banyak lagi. Cukup tulis kelas Phlex Anda dan warisi dari Proscenium::Phlex .
class MyView < Proscenium :: Phlex
def view_template
h1 { 'Hello World' }
end
end Dalam tata letak Anda, sertakan Proscenium::Phlex::AssetInclusions , dan panggil helper 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 Anda dapat secara khusus memasukkan aset CCS dan JS menggunakan pembantu include_stylesheets dan include_javascripts , sehingga Anda dapat mengontrol di mana aset tersebut disertakan dalam HTML.
Kelas Phlex apa pun yang mewarisi Proscenium::Phlex akan secara otomatis dimuat ke samping.
Modul CSS didukung penuh di kelas Phlex, dengan akses ke pembantu css_module jika Anda membutuhkannya. Namun, ada cara yang lebih baik dan lebih mudah untuk mereferensikan kelas modul CSS di kelas Phlex Anda.
Dalam kelas Phlex Anda, nama kelas apa pun yang dimulai dengan @ akan diperlakukan sebagai kelas modul CSS.
# /app/views/users/show_view.rb
class Users :: ShowView < Proscenium :: Phlex
def 
