prosceniumダウンロード - prosceniumソースコードのダウンロード

Proscenium - Rails 用の統合フロントエンド開発

船首・シー・ニー・うーん
名詞:プロセニアム
劇場の舞台のカーテンの前の部分。

Proscenium は、フロントエンドとクライアント側のコードを Rails アプリの第一級住民として扱い、「デフォルトで高速な」インターネットを前提としています。 JavaScript (+ JSX)、TypeScript (+TSX)、および CSS をリアルタイム、オンデマンド、構成なしでバンドルおよび縮小します。

ハイライト:

Javascript (.js、.jsx)、Typescript (.ts、.tsx)、および CSS (.css) の高速でリアルタイムのバンドル、ツリーシェイキング、コード分割、および縮小。
JavaScript ランタイム (ノードなど) は必要ありません。ブラウザだけで十分です。
ビルドステップやプリコンパイルはありません。
追加のプロセスやサーバーは必要ありませんrails s実行するだけです。
新しい JavaScript および CSS 構文を、古いブラウザー用の古い構文に変換します。
Railsとの緊密な統合。
レイアウト、ビュー、パーシャルを自動的にサイドロードします。
NPM、URL、およびローカルからインポートします。
サーバー側インポートマップのサポート。
CSS モジュールとミックスイン。
ソースマップ。

はじめる
インストール
どこでもクライアント側のコード
サイドローディング
インポート中
- 現地輸入品
マップのインポート
ソースマップ
SVG
環境変数
i18n
JavaScript
- 木の揺れ
- コード分割
- JavaScript に関する注意事項
CSS
- JavaScriptからCSSをインポートする
- CSSモジュール
- CSS ミックスイン
- CSS の注意事項
タイプスクリプト
- タイプスクリプトの注意事項
JSX
JSON
フレックスサポート
ビューコンポーネントのサポート
キャッシュバスティング
rjsが帰ってきた！
解決
- Rails エンジンのアセット
ありがとう
発達

はじめる

開始方法は、Proscenium を既存の Rails アプリに追加するか、新しい Rails アプリを作成するかによって異なります。したがって、以下の適切なガイドを選択してください。

新しい Rails アプリの入門
既存の Rails アプリの使用を開始する
- Sprockets からの移行
- プロップシャフトからの移行[近日公開予定]
- Webpacker からの移行[近日公開予定]
Proscenium を使用して React コンポーネントをレンダリングする

インストール

この行を Rails アプリケーションの Gemfile に追加すれば準備完了です。

 gem 'proscenium'

Proscenium は Rails でのみ使用するように設計されていることに注意してください。

これで、Rails アプリを起動すると、任意のフロントエンドコード (JS、CSS など) を開くことができます。たとえば、 app/assets/stylesheets/application.cssにあるファイルはhttps://localhost:3000/app/assets/stylesheets/application.cssでアクセスでき、これは [実稼働環境で] バンドル、変換、縮小されます。リアルタイムで。

どこでもクライアント側のコード

Proscenium は、フロントエンドコードはバックエンドコードと同じくらい重要であり、後付けではなく、Rails アプリの第一級市民であるべきであると信じています。したがって、すべての JS と CSS を「app/assets」ディレクトリに放り込んで、コンパイルまたはバンドルするための別のプロセスを必要とする代わりに、それらをアプリ内の好きな場所に置くだけで、Rails を実行するだけです。

たとえば、 app/views/users/index.html.erbビューに必要な JS がある場合は、 app/views/users/index.jsに JS ファイルを作成します。または、アプリケーション全体で使用される CSS がある場合は、それをapp/views/layouts/application.cssに配置し、レイアウトと一緒に読み込みます。おそらく、いくつかの JS ユーティリティ関数があるので、それらをlib/utils.jsに配置します。

JS(X) と CSS を好きな場所に配置するだけで、配置した場所から Rails アプリによって提供されます。

上記の例を使用すると...

app/views/users/index.js => https://localhost:3000/app/views/users/index.js
app/views/layouts/application.css => https://localhost:3000/app/views/layouts/application.css
lib/utils.js => https://localhost:3000/lib/utils.js
app/components/menu_component.jsx => https://localhost:3000/app/components/menu_component.jsx
config/properties.css => https://localhost:3000/config/properties.css

サイドローディング

Proscenium は、アセットが自動的にサイドロードされるときに最も効果的に体験できます。

問題

Rails では通常、 javascript_include_tagヘルパーとstylesheet_link_tagヘルパーを使用して JavaScript および CSS アセットを宣言的にロードします。

たとえば、最上位の「アプリケーション」CSS が/app/assets/stylesheets/application.cssのファイルにあるとします。同様に、 /app/javascript/application.jsのファイルにグローバル JavaScript が存在する場合があります。

次のように、これら 2 つのファイルをアプリケーションレイアウトに手動で宣言的に含めます。

 <%# /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 >

ここで、特定のビューおよび部分的にのみ必要な CSS と JavaScript がある場合があるため、次のようにそれをビュー (またはレイアウト) にロードします。

 <%# /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 %>

主な問題は、これらすべてのアセットを追跡し、それらを必要とするすべてのビューによってそれぞれのアセットがロードされていることを確認する必要があることですが、また、必要でない場合にはロードしないようにする必要があることです。これは、特に多くのビューがある場合に、非常に面倒になる可能性があります。

解決策

Proscenium で JavaScript、Typescript、CSS をサイドロードすると、それらは必要な場合にのみ、ビュー、パーシャル、レイアウト、コンポーネントとともに自動的に組み込まれます。

サイドローディングは、ビュー、部分、レイアウト、またはコンポーネントと同じ名前の JS/TS/CSS ファイルを検索することで機能します。たとえば、 app/views/users/index.html.erbにビューがある場合、Proscenium はapp/views/users/index.js 、 app/views/users/index.tsで JS/TS/CSS ファイルを検索します。 app/views/users/index.tsまたはapp/views/users/index.css 。見つかった場合は、そのビューの HTML にそれを含めます。

JSX は JavaScript と Typescript でもサポートされています。 .jsまたは.tsの代わりに.jsxまたは.tsx拡張子を使用してください。

使用法

ビュー、部分、レイアウトと同じ名前の JS ファイルや CSS ファイルを作成するだけです。

上記の問題の例を続けてみましょう。ここには次のアセットがあります。

/app/assets/application.css
/app/assets/application.js
/app/assets/users.css
/app/assets/users.js
/app/assets/user.js

アプリケーションのレイアウトは/app/views/layouts/application.hml.erbにあり、ユーザーのアセットを必要とするビューは/app/views/users/index.html.erbにあるため、アセットの JS と CSS をそれらの横に移動します。 :

/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 (部分)

次に、レイアウトとビューで、 javascript_include_tagヘルパーとstylesheet_link_tagヘルパーを Proscenium のinclude_assetヘルパーに置き換えます。次のようなもの:

 <!DOCTYPE html >
< html >
  < head >
    < title > Hello World </ title >
    <%= include_assets # <-- %>
  </ head >
  < body >
    <%= yield %>
  </ body >
</ html >

ページリクエストごとに、Proscenium はビュー、レイアウト、パーシャルのいずれかに同じ名前の JS/TS/CSS ファイルがあるかどうかを確認し、 include_assetsヘルパーが配置された場所にそれらを含めます。

これで、アセットを再度含めることを忘れずに済みます。ビュー、パーシャル、レイアウトと一緒に作成するだけで、残りは Proscenium が処理します。

サイドローディングはデフォルトで有効になっていますが、 /config/application.rbでconfig.proscenium.side_load falseに設定することで無効にできます。

CSS および JS アセットを HTML 内のどこに含めるかを制御できるinclude_stylesheetsおよびinclude_javascriptsヘルパーもあります。アセットが含まれる場所を正確に制御したい場合は、 include_assetsの代わりにこれらのヘルパーを使用する必要があります。

同梱

ファイルをバンドルするとは、インポートされた依存関係をファイル自体にインライン化することを意味します。このプロセスは再帰的であるため、依存関係の依存関係 (など) もインライン化されます。

Proscenium はデフォルトでリアルタイムにバンドルされます。したがって、個別のビルドステップやプリコンパイルはありません。

Proscenium は、NPM、URL、ローカルアプリ、さらには他の Ruby Gem からの JS、JSX、TS、TSX、CSS、SVG のインポートをサポートしています。

静的 ( import ) インポートと動的 ( import() ) インポートの両方が JavaScript と TypeScript でサポートされており、JS、TS、JSX、TSX、JSON、CSS、SVG ファイルのインポートに使用できます。

CSS では@import CSS at-rule がサポートされています。

分析不可能なインポート

現在、インポートパスは、文字列リテラルまたはグロブパターンである場合にのみバンドルされます。他の形式のインポートパスはバンドルされず、生成された出力にそのまま保存されます。これは、バンドルはコンパイル時の操作であり、Proscenium は実行時のパス解決のすべての形式をサポートしているわけではないためです。

以下にいくつかの例を示します。

 // Analyzable imports (will be bundled)
import "pkg" ;
import ( "pkg" ) ;
import ( `./locale- ${ foo } .json` ) ;

// Non-analyzable imports (will not be bundled)
import ( `pkg/ ${ foo } ` ) ;

分析不可能なインポートを回避する方法は、この問題のあるコードを含むパッケージをバンドルされていないとしてマークし、バンドルに含まれないようにすることです。次に、実行時に外部パッケージのコピーがバンドルされたコードで利用できることを確認する必要があります。

NPM ( `node_modules` ) からのインポート

ベアインポート ( ./ 、 / 、 https:// 、 http://で始まらないインポート) は完全にサポートされており、次の場所にあるpackage.jsonファイル経由で選択したパッケージマネージャー (NPM、Yarn、pnpm など) を使用します。 Rails アプリのルートにあります。

選択したパッケージマネージャーを使用して、インポートするパッケージをインストールします...

 npm install react

...その後、他のパッケージと同様にインポートします。

 import React from "react" ;

現地輸入品

そしてもちろん、相対パスまたは絶対パスを使用して独自のコードをインポートすることもできます (ファイル拡張子はオプションで、絶対パスは Rails ルートをベースとして使用します)。

 import utils from "/lib/utils" ;
import constants from "./constants" ;
import Header from "/app/components/header" ;

 @import "/lib/reset" ;

バンドル解除

インポートをバンドルしたくない場合があります。たとえば、React のインスタンスが 1 つだけロードされるようにしたいとします。この場合、 unbundle解除プレフィックスを使用できます。

 import React from "unbundle:react" ;

これは、ベアインポートとローカルインポートのみで機能します。

インポートマップでunbundleプレフィックスを使用することもできます。これにより、特定のパスのすべてのインポートが常にバンドル解除されます。

{
  "imports" : {
    "react" : " unbundle:react "
  }
}

あとは通常どおりインポートするだけです。

 import React from "react" ;

マップのインポート

[作業中]

JS と CSS の両方のマップのインポートは追加設定なしでサポートされており、使用されているブラウザーに関係なく機能します。これは、インポートマップがブラウザーではなくサーバー上の Proscenium によって解析および解決されるためです。これは高速であり、インポートマップをまだサポートしていないブラウザでもインポートマップを使用できるようになります。

インポートマップに慣れていない場合は、インポートマップをエイリアスを定義する方法として考えてください。

config/import_map.jsonを作成し、使用するインポートを指定するだけです。例えば：

{
  "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]/ "
  }
}

上記のインポートマップを使用すると、次のことができます...

 import { useCallback } from "react" ;
import startHere from "start" ;
import styles from "common" ;

そしてCSSについては…

 @import "common" ;
@import "@radix-ui/colors/blue.css" ;

JSON の代わりに JavaScript でインポートマップを記述することもできます。したがって、 config/import_map.jsonの代わりにconfig/import_map.jsを作成し、匿名関数を定義します。この関数は単一のenvironment引数を受け入れます。

 ( env ) => ( {
  imports : {
    react :
      env === "development"
        ? "https://esm.sh/[email protected]?dev"
        : "https://esm.sh/[email protected]" ,
  } ,
} ) ;

ソースマップ

ソースマップを使用すると、コードのデバッグが容易になります。これらは、生成された出力ファイルの行/列オフセットを、対応する元の入力ファイルの行/列オフセットに変換するために必要な情報をエンコードします。これは、生成されたコードが元のコードと大きく異なる場合 (たとえば、元のコードが TypeScript であるか、縮小化が有効になっている場合) に便利です。これは、1 つの大きなバンドルファイルではなく、ブラウザの開発者ツールで個々のファイルを確認したい場合にも便利です。

ソースマップの出力は、JavaScript と CSS の両方でサポートされています。各ファイルにはソースマップへのリンクが追加されます。例えば：

 //# sourceMappingURL=/app/views/layouts/application.js.map

ブラウザの開発ツールはこれを認識し、必要なときに必要な場所でソースマップを自動的にロードする必要があります。

SVG

JS(X) から SVG をインポートすると、SVG ソースコードがバンドルされます。さらに、JSX または TSX からインポートする場合、SVG ソースコードは JSX/TSX コンポーネントとしてレンダリングされます。

環境変数

>=0.10.0で利用可能

JavaScript および Typescript から、 proscenium.env名前空間で環境変数を定義してアクセスできます。

パフォーマンスとセキュリティ上の理由から、公開する環境変数名をconfig/application.rbファイルで宣言する必要があります。

 config . proscenium . env_vars = Set [ 'API_KEY' , 'SOME_SECRET_VARIABLE' ]
config . proscenium . env_vars << 'ANOTHER_API_KEY'

これは、同じ名前の環境変数がすでに定義されていることを前提としています。そうでない場合は、Ruby のENVオブジェクトを使用してコード内で定義するか、シェルで定義する必要があります。

これらの宣言された環境変数は定数式に置き換えられ、次のように使用できるようになります。

 console . log ( proscenium . env . RAILS_ENV ) ; // console.log("development")
console . log ( proscenium . env . RAILS_ENV === "development" ) ; // console.log(true)

RAILS_ENVおよびNODE_ENV環境変数は常に自動的に宣言されます。

これに加えて、Proscenium はprocess.env.NODE_ENV変数も提供します。これは、 proscenium.env.RAILS_ENVと同じ値に設定されます。これは、この変数に依存することが多いコミュニティの既存のツールをサポートするために提供されています。

環境変数は、ツリーの揺れを助けるのに特に強力です。

 function start ( ) {
  console . log ( "start" ) ;
}
function doSomethingDangerous ( ) {
  console . log ( "resetDatabase" ) ;
}

proscenium . env . RAILS_ENV === "development" && doSomethingDangerous ( ) ;

start ( ) ;

開発では、上記のコードは次のコードに変換され、定義が破棄され、 doSomethingDangerous()が呼び出されます。

 function start ( ) {
  console . log ( "start" ) ;
}
start ( ) ;

セキュリティ上の理由から、URL インポートでは環境変数は置き換えられないことに注意してください。

未定義の環境変数はundefinedに置き換えられます。

 console . log ( proscenium . env . UNKNOWN ) ; // console.log((void 0).UNKNOWN)

これは、これに依存するコードはツリーシェイクされないことを意味します。この問題は、オプションの連鎖演算子を使用して回避できます。

 if ( typeof proscenium . env ?. UNKNOWN !== "undefined" ) {
  // do something if UNKNOWN is defined
}

i18n

Rails ロケールファイルをconfig/locales/*.ymlからインポートし、JSON としてエクスポートするための基本サポートが提供されています。

 import translations from "@proscenium/i18n" ;
// translations.en.*

JavaScript

デフォルトでは、Proscenium の出力は、ES2022 仕様以前のすべての最新の JS 機能を利用します。たとえば、 a !== void 0 && a !== null ? a : b a ?? bになります。 a ?? b縮小するとき (運用環境ではデフォルトで有効)。ES2020 バージョンの JavaScript の構文が使用されます。 ES2020 でサポートされていない構文機能は、より広くサポートされている古い JavaScript 構文に変換されます。

木の揺れ

ツリーシェイクとは、JavaScript コミュニティがデッドコードの除去、つまり到達不能なコードを自動的に削除する一般的なコンパイラ最適化に使用する用語です。 Proscenium では、ツリーの揺れがデフォルトで有効になっています。

 function one ( ) {
  console . log ( "one" ) ;
}
function two ( ) {
  console . log ( "two" ) ;
}
one ( ) ;

上記のコードは次のコードに変換され、 two()は呼び出されないため破棄されます。

 function one ( ) {
  console . log ( "one" ) ;
}
one ( ) ;

コード分割

>=0.10.0で利用可能です。

サイドロードされたアセットは自動的にコード分割されます。これは、インポートされて使用されるファイルが複数回、異なるファイルによってインポートされて使用される場合、そのファイルは別のファイルに分割されることを意味します。

例として:

 // /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とdaughter.js両方ともfather.jsをインポートするため、通常は Son と Daughter の両方に Father のコピーが含まれ、コードが重複してバンドルサイズが大きくなります。

これらのファイルがサイドロードされる場合、 father.js別のファイルまたはチャンクに分割され、ダウンロードされるのは 1 回だけになります。

複数のエントリポイント間で共有されるコードは、両方のエントリポイントがインポートする個別の共有ファイルに分割されます。そうすることで、ユーザーが最初に 1 つのページを参照し、次に別のページを参照した場合、共有部分が既にダウンロードされてブラウザーにキャッシュされている場合、2 番目のページの JavaScript をすべて最初からダウンロードする必要がなくなります。
非同期import()を通じて参照されるコードは別のファイルに分割され、その式が評価されるときにのみロードされます。これにより、起動時に必要なコードのみをダウンロードし、後で必要に応じて追加のコードを遅延ダウンロードすることで、アプリの初期ダウンロード時間を短縮できます。
コードを分割しない場合、import() 式は代わりにPromise.resolve().then(() => require())になります。これでも式の非同期セマンティクスは保持されますが、インポートされたコードが別のファイルに分割されるのではなく、同じバンドルに含まれることを意味します。

コード分割はデフォルトで有効になっています。これを無効にするには、アプリケーションの/config/application.rbでcode_splitting構成オプションをfalseに設定します。

 config . proscenium . code_splitting = false

JavaScript に関する注意事項

JavaScript に関する限り、いくつかの重要な注意事項があります。これらについては、esbuild サイトで詳しく説明されています。

CSS

CSS は Proscenium のファーストクラスのコンテンツタイプです。つまり、JavaScript コードから CSS をインポートすることなく、CSS ファイルを直接バンドルできます。他の CSS ファイルを@import 、 url()を使用して画像ファイルとフォントファイルを参照すると、Proscenium がすべてをまとめてバンドルします。

デフォルトでは、Proscenium の出力は最新の CSS 機能をすべて利用することに注意してください。たとえば、 color: rgba(255, 0, 0, 0.4)本番環境で縮小すると、 color: #f006になります。これは、CSS カラーモジュールレベル 4 の構文を使用します。

新しい CSS ネスト構文がサポートされており、古いブラウザではネストされていない CSS に変換されます。

Proscenium は、CSS が古いブラウザでも機能するようにベンダープレフィックスも自動的に挿入します。

JavaScriptからCSSをインポートする

JavaScript から CSS をインポートすることもできます。これを行うと、Proscenium は各スタイルシートを<link>要素としてドキュメントの先頭に自動的に追加します。

 import "./button.css" ;

export let Button = ( { text } ) => {
  return < div className = "button" > { text } < / div > ;
} ;

CSSモジュール

Proscenium は CSS モジュールのサブセットを実装します。 :localおよび:globalキーワードはサポートされますが、 composesプロパティはサポートされません。 ( composesの代わりに mixin を使用することをお勧めします。これはプレーンな CSS ファイルであってもどこでも機能するためです。)

CSS ファイルに.module.css拡張子を付けると、Proscenium はそれを CSS モジュールとして扱い、すべてのクラス名をファイルに固有の接尾辞で変換します。

. title {
  font-size : 20 em ;
}

上記の入力により次が生成されます。

. title-5564cdbb {
  font-size : 20 em ;
}

これで、ほぼどこでも使用できる一意のクラス名が作成されました。

あなたのビューで

css_moduleヘルパーを使用すると、Rails ビュー、パーシャル、レイアウトから CSS モジュールを参照できます。このヘルパーは 1 つ以上のクラス名を受け入れ、同等の CSS モジュール名 (一意のサフィックスが追加されたクラス名) を返します。

サイドローディング設定では、次のようにcss_moduleヘルパーを使用できます。

 < 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複数のクラス名を受け入れ、変換された CSS モジュール名のスペース区切りの文字列を返します。

 css_module :my_module_name
# => "my_module_name-ABCD1234"

ファイルへの URL パスをクラス名のプレフィックスとして渡すことで、任意の CSS ファイルからクラスを参照することもできます。これにより、スタイルシートが自動的にサイドロードされます。

 css_module '/app/components/button.css@big_button'
# => "big_button"

NPM パッケージもサポートしています (/node_modules にすでにインストールされています)。

 css_module 'mypackage/button@big_button'
# => "big_button"

css_module pathキーワード引数も受け入れます。これにより、CSS ファイルへのパスを指定できます。これにより、 css_moduleのインスタンスに渡されるすべてのクラス名に指定されたパスが使用されることに注意してください。

 css_module :my_module_name , path : Rails . root . join ( 'app/components/button.css' )

JavaScript 内で

JS から CSS モジュールをインポートすると、スタイルシートがドキュメントの先頭に自動的に追加されます。そしてインポートの結果はモジュール名に対するCSSクラスのオブジェクトとなります。

 import styles from "./styles.module.css" ;
// styles == { header: 'header-5564cdbb' }

CSS モジュール名のエクスポートされたオブジェクトは、実際には JavaScript プロキシオブジェクトであることに注意することが重要です。したがって、オブジェクトを分割しても機能しません。代わりに、プロパティに直接アクセスする必要があります。

また、CSS モジュールを別の CSS モジュールにインポートすると、すべてのクラスで同じダイジェスト文字列が生成されます。

CSS ミックスイン

Proscenium は、1 つ以上の CSS クラスを別のクラスに含めるか「混合」するための機能を提供します。これは CSS モジュールのcomposesプロパティに似ていますが、CSS モジュールに限定されず、どこでも機能します。

CSS ミックスインは@define-mixinおよび@mixin at-rules を使用してサポートされます。

ミックスインは@define-mixin at-rule を使用して定義されます。クラス名のセマンティクスに従う必要がある名前を渡し、ルールを宣言します。

// /lib/mixins.css
@define-mixin bigText {
  font-size : 50 px ;
}

@mixin at-rule を使用してミックスインを使用します。使用するミックスインの名前と、ミックスインが宣言されている URL を渡します。 URL はミックスインを解決するために使用され、相対 URL、絶対 URL、または NPM パッケージからの URL を使用できます。

// /app/views/layouts/application.css
p {
  @mixin bigText from url ( "/lib/mixins.css" );
  color : red;
}

上記により、次の出力が生成されます。

 p {
  font-size : 50 px ;
  color : red;
}

ミックスインは任意の CSS ファイルで宣言できます。これらは、使用される場所と同じファイル内で宣言する必要はありません。ただし、同じファイル内でミックスインを宣言して使用する場合は、ミックスインが宣言されている URL を指定する必要はありません。

 @define-mixin bigText {
  font-size : 50 px ;
}

p {
  @mixin bigText;
  color : red;
}

CSS モジュールと Mixins は完全に連携して機能します。 CSS モジュールにミックスインを含めることができます。

CSS の注意事項

CSS に関する限り、いくつかの重要な注意事項があります。これらについては、esbuild サイトで詳しく説明されています。

タイプスクリプト

Typescript と TSX はすぐに使用できるようサポートされており、TypeScript 構文の解析と型注釈の破棄のサポートが組み込まれています。ファイルの名前を.tsまたは.tsxに変更するだけで準備完了です。

Proscenium は型チェックを行わないため、型をチェックするには Proscenium と並行してtsc -noEmitを実行する必要があることに注意してください。

タイプスクリプトの注意事項

Typescript に関する限り、いくつかの重要な注意事項があります。これらについては、esbuild サイトで詳しく説明されています。

JSX

JSX 構文を使用するには、通常、使用している JSX ライブラリを手動でインポートする必要があります。たとえば、React を使用している場合、デフォルトでは、次のように各 JSX ファイルに React をインポートする必要があります。

 import * as React from "react" ;
render ( < div / > ) ;

これは、JSX 変換によって JSX 構文がReact.createElementへの呼び出しに変換されますが、それ自体は何もインポートされないため、React 変数は自動的には存在しません。

Proscenium はこれらのインポートステートメントを生成します。これにより、JSX 変換の動作方法も完全に変更されるため、React ではない JSX ライブラリを使用している場合はコードが破損する可能性があることに注意してください。

[そう遠くない]将来には、別の JSX ライブラリを使用するように Proscenium を構成したり、この自動インポートを完全に無効にしたりできるようになります。

JSON

.json ファイルをインポートすると、JSON ファイルが JavaScript オブジェクトに解析され、そのオブジェクトがデフォルトのエクスポートとしてエクスポートされます。使用すると次のようになります。

 import object from "./example.json" ;
console . log ( object ) ;

デフォルトのエクスポートに加えて、JSON オブジェクトの最上位プロパティごとに名前付きエクスポートもあります。名前付きエクスポートを直接インポートすると、Proscenium が JSON ファイルの未使用部分をバンドルから自動的に削除し、実際に使用した名前付きエクスポートのみを残すことができます。たとえば、次のコードにはバンドルされた場合にバージョンフィールドのみが含まれます。

 import { version } from "./package.json" ;
console . log ( version ) ;

フレックスサポート

Phlex は、純粋な Ruby で高速で再利用可能でテスト可能なビューを構築するためのフレームワークです。 Proscenium は、サイドローディング、CSS モジュールなどをサポートし、Phlex と完全に連携します。 Phlex クラスを作成し、 Proscenium::Phlexから継承するだけです。

 class MyView < Proscenium :: Phlex
  def view_template
    h1 { 'Hello World' }
  end
end

レイアウトにProscenium::Phlex::AssetInclusionsを含めて、 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

include_stylesheetsとinclude_javascriptsヘルパーを使用して CCS および JS アセットを具体的に組み込むことができ、HTML 内のどこに組み込むかを制御できます。

サイドローディング

Proscenium::Phlexを継承するすべての Phlex クラスは、自動的にサイドロードされます。

CSSモジュール

CSS モジュールは Phlex クラスで完全にサポートされており、必要に応じてcss_moduleヘルパーにアクセスできます。ただし、Phlex クラスで CSS モジュールクラスを参照する、より優れた、よりシームレスな方法があります。

Phlex クラス内では、 @で始まるクラス名はすべて CSS モジュールクラスとして扱われます。

 # /app/views/users/show_view.rb
class Users :: ShowView < Proscenium :: Phlex
  def

拡大する

proscenium

Proscenium - Rails 用の統合フロントエンド開発

目次

はじめる

インストール

どこでもクライアント側のコード

サイドローディング

問題

解決策

使用法

同梱

分析不可能なインポート

NPM ( node_modules ) からのインポート

現地輸入品

バンドル解除

マップのインポート

ソースマップ

SVG

環境変数

i18n

JavaScript

木の揺れ

コード分​​割

JavaScript に関する注意事項

CSS

JavaScriptからCSSをインポートする

CSSモジュール

あなたのビューで

JavaScript 内で

CSS ミックスイン

CSS の注意事項

タイプスクリプト

タイプスクリプトの注意事項

JSX

JSON

フレックスサポート

サイドローディング

CSSモジュール

NPM ( `node_modules` ) からのインポート

コード分割