celestite下載 - celestite源源代碼下載

celestite

網站數據

velte

下載

Celestite

水晶 + svelte =⚡

Celestite允許您在Crystal Web應用程序中使用Svelte反應性組件的全部功能。這是您的視圖層的替換 - 不再需要中間.ecr模板。使用Celestite，您可以用Crystal編寫後端服務器代碼，在JavaScript和HTML中使用前端客戶端代碼，並且一切都無縫地工作……快速地工作。

介紹

在此處閱讀完整的介紹性博客文章。

要求

晶體0.35.1+
紗線1.12+
節點10+

渲染服務器是使用節點10.15.3構建的（特別是它使用了whatwg URL標準，該標準是在節點7+中添加的。）它不需要執行此操作，嚴格說話，如果有令人信服的理由支持早期版本的節點，我很樂意進行此更改。）

安裝

這是預覽 /早期alpha軟件

這不僅僅是目前的概念驗證，但確實有效！適用標準警告 - 它可能會以壯觀且不合時宜的榮耀中斷/崩潰，因此不要戳它，在午夜過後餵食或將其用於關鍵任務（尚未）。

Celestite已通過Amber Web框架開發 /測試，但也設計為獨立工作。也沒有理由與Lucky，Kemal，Athena等都無法使用（但是與這些工作還沒有完成。）以下步驟假設您將與Amber合作。

1。將celestite添加到您的應用程序的`shard.yml`並`shards install`

 dependencies :
  celestite :
    github : noahlh/celestite
    version : ~> 0.1.3

2。包括助手`Celestite::Adapter::Amber`在您的`application_controller.cr`中

這添加了celestite_render宏。

  # application_controller.cr

  require " jasper_helpers "

  class ApplicationController < Amber::Controller::Base
    include JasperHelpers
+   include Celestite :: Adapter :: Amber
  end

3。將`celestite_amber_init.cr`添加到`/config/initializers`

提供了一個示例。只要在初始化時被調用，您都可以將此文件命名。

4。添加`_error.svelte`到您的視圖目錄

這是暫時需要的，因為Sapper期望它。如果缺少它，您的應用程序仍然可以正常工作，但是CSS渲染會有一些怪異（相信我 - 這使我付出了一個夜晚；）

 < script >
  export let status ;
  export let error ;
</ script >

< h1 > {status} </ h1 >
< p > {error.message} </ p >

4。在琥珀的靜態管道中為您的build_dir添加靜態路線

這是因為與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

最後...

5。添加您的`.svelte`文件並開始構建！

有關命名的註釋：確保您遵循Sapper的文件命名規則。提示：根組件應命名為index.svelte （asvelte）。

使用細節

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?
如果您需要手動指定要施用的路徑（即您不在琥珀色中），則可以通過字符串參數傳遞。在琥珀色中，將分配一個等於當前琥珀色路由控制器方法正在處理的默認值。
template : String?
（尚未實現）您要渲染組件的哪些佈局/模板。如果在渲染上沒有指定的話，將使用初始文件中指定的默認模板。

示例控制器

 # home_controller.cr

class HomeController < ApplicationController
  def index
    data = 1 + 1
    context = Celestite :: Context { :data => data}
    celestite_render(context)
  end
end