celestite
velte
クリスタル + svelte =⚡
Celestiteを使用すると、クリスタルWebアプリでSvelte Reactiveコンポーネントのフルパワーを使用できます。ビューレイヤーのドロップイン交換です。中間の.ecrテンプレートは必要ありません。 Celestiteを使用すると、Crystalにバックエンドサーバーコードを書き、JavaScript＆HTMLでフロントエンドクライアントコードを書き込み、すべてがシームレスに一緒に動作します...そして速いです。
詳細なブログ投稿はこちらをご覧ください。
レンダリングサーバーは、ノード10.15.3を使用して構築されました（特にノード7+に追加されたWhatWG URL標準を使用します）。これを厳密に言えば、これを行う必要はありません。
これは現時点での概念の証明以上のものではありませんが、機能します！標準の警告が適用されます - 壮大でタイミングの悪い栄光で壊れたりクラッシュしたりする可能性が高いので、それを突きつけたり、真夜中を過ぎても餌を与えたり、ミッションクリティカルなものに使用したりしません。
Celestiteは、Amber Webフレームワークで開発 /テストされていますが、スタンドアロンも動作するように設計されています。また、ラッキー、ケマル、アテナなどで機能しない理由もありません（しかし、それらと統合された作業はまだ行われていません）。
shard.ymlにcelestiteを追加して、破損したshards install dependencies :
celestite :
github : noahlh/celestite
version : ~> 0.1.3Celestite::Adapter::Amber application_controller.crに含めますこれにより、 celestite_renderマクロが追加されます。
# application_controller.cr
require " jasper_helpers "
class ApplicationController < Amber::Controller::Base
include JasperHelpers
+ include Celestite :: Adapter :: Amber
endcelestite_amber_init.cr /config/initializersに追加します例が提供されています。初期化に応じて呼び出されている限り、このファイルに名前を付けることができます。
_error.svelteをビューディレクトリに追加しますこれは、サッパーがそれを期待しているために必要です。それが欠落している場合、あなたのアプリはまだ機能しますが、CSSレンダリングにはいくらかの奇妙さがあります（私を信頼してください - これは私に夜を費やしました;）
< script >
export let status ;
export let error ;
</ script >
< h1 > {status} </ h1 >
< p > {error.message} </ p >これは、Svelteが舞台裏で（Sapperを介して）どのように機能するかについてのわずかなヒッチのためですが、基本的に：クライアントは /クライアントの関連するJSファイルにアクセスできる必要がありますが、Sapperはそのディレクトリを完全に制御する必要があります（新しいビルドごとに拭き取ります）。したがって、同時に独自のディレクトリを提供し、ルートパスを介して利用できるようにします。
# routes.cr
pipeline :static do
plug Amber :: Pipe :: Error .new
plug Amber :: Pipe :: Static .new( " ./public " )
+ plug Amber :: Pipe :: Static .new( " ./public/celestite " )
end.svelteファイルを追加して、構築を開始してください！命名に関するメモ：Sapperのファイルネーミングルールに従ってください。ヒント：ルートコンポーネントは、 index.svelte （すべて小文字）という名前である必要があります。
celestite_render (context : Celestite::Context = nil, path : String? = nil, template : String? = nil)
レンダリングを実行します。これは、通常、コントローラーでrenderを呼び出す場所と呼ばれます。デフォルトではパラメーターは必要ありません（アンバールートに基づいて呼び出すメソッドのパスを自動的に抽出しますが、次のオプションパラメーターを使用できます。
context : Celestite::Context
CelestiteはCelestite::Contextと呼ばれるハッシュリテラルを使用します。希望の名前のシンボルキーを使用して、コンポーネントで利用できる変数はここにあります。
したがって、Vueコンポーネントでexample_crystal_dataにアクセスする場合は、関連する値をmy_context[:example_crystal_data]に割り当てます。詳細については、以下の例を参照してください
これは、Sapperのセッションシードメカニズムを使用して痛みます。
path : String?
どのパスをrendingしているかを手動で指定する必要がある場合（つまり、mberではありません）、文字列パラメーターを渡すことができます。 Amberでは、これには、コントローラー法が処理している現在のAmberルートに等しいデフォルト値が割り当てられます。
template : String?
（まだ実装されていません）コンポーネントをレンダリングするレイアウト/テンプレート。レンダリングに指定されていない場合は、initファイルで指定されたデフォルトのテンプレートを使用します。
# home_controller.cr
class HomeController < ApplicationController
def index
data = 1 + 1
context = Celestite :: Context { :data => data}
celestite_render(context)
end
end .svelteコンポーネントは、クライアントに送信される前に、自動的にサーバー側にレンダリングされます。通常、これはシームレスですが、ブラウザー固有のAPI（ documentやwindowなど）に依存するコード（またはライブラリ）に注意する必要があります。これにより、コンポーネントがノードのコンテキストでレンダリングされるとエラーが発生します（ブラウザ）。
これを回避するには、SapperのonMount()関数をインポートできます。 onMount()にラップされた機能は、（ブラウザー）クライアントのみでレンダリングされます。
サーバー側のレンダリングに関する考慮事項の詳細については、こちらをご覧ください。
私の目標/哲学は、早めにリリースし、頻繁にリリースし、できるだけ早い段階でユーザーのフィードバックを得ることです。現在のような時間はありません。
短期目標：
長期目標：
これは私のソロプロジェクトであり、コード /改善 /貢献に関するフィードバックを得ること以外に、私は何も愛していません。開発スキルを学び、レベルアップするための最良の方法は、他の人にあなたが格闘したコードをレビューさせることです。
つまり、抑えないでください。壊れたものを報告したり、コードの一部を改善したり、タイプミスを修正したりするだけです。誰もが（すべてのスキルレベルで）大歓迎です。
git checkout -b omg-this-fixed-so-many-bugs ）git commit -am 'Made a fix!' ）git push origin omg-this-fixed-so-many-bugs ）
