celestite
velte
Crystal + svelte = ⚡
Celestite를 사용하면 Crystal Web 앱에서 Svelte 반응성 구성 요소의 전체 전력을 사용할 수 있습니다. 뷰 레이어를위한 드롭 인 교체품입니다. 더 이상 중급 .ecr 템플릿이 필요하지 않습니다. Celestite를 사용하면 JavaScript & HTML의 Frontend 클라이언트 코드 인 Crystal에 백엔드 서버 코드를 작성하며 모든 것이 완벽하게 작동합니다.
여기에서 전체 입문 블로그 게시물을 읽으십시오.
렌더 서버는 노드 10.15.3을 사용하여 구축되었습니다 (특히 노드 7+에 추가 된 Whatwg URL 표준을 사용합니다.)이 작업을 수행 할 필요가 없으며 엄격하게 말할 필요가 없으며 이전 버전의 노드를 지원할 수있는 강력한 이유가 있다면이 변경을 기쁘게 생각합니다).
이것은 현재의 개념 증명 이상의 것이 아니라 효과가 있습니다! 표준 경고가 적용됩니다-그것은 화려하고 불쾌한 영광에서 깨지거나 충돌 할 가능성이 높으므로, 그것을 찌르거나 자정을 지나서 먹이를 주거나, 미션 크리티컬 한 모든 것을 위해 사용하십시오 (아직).
Celestite는 Amber Web Framework로 개발 / 테스트되었지만 독립형 작동하도록 설계되었습니다. Lucky, Kemal, Athena 등과 함께 작동하지 않을 이유도 없습니다 (그러나 아직 통합 된 작업은 아직 수행되지 않았습니다.) 아래 단계는 Amber와 함께 일할 것이라고 가정합니다.
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 to /config/initializers adds예가 제공됩니다. 초기화시 요청되는 한이 파일을 원하는대로 이름을 지정할 수 있습니다.
_error.svelte 추가하십시오Sapper가 기대하기 때문에 당분간이 필요합니다. 누락 된 경우 앱이 여전히 작동하지만 CSS 렌더링에 이상한 점이있을 것입니다 (믿을 수 있습니다.
< script >
export let status ;
export let error ;
</ script >
< h1 > {status} </ h1 >
< p > {error.message} </ p >이는 Spelte가 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 호출하는 곳에서 호출됩니다. 기본적으로 매개 변수가 필요하지 않지만 (Amber 경로를 기반으로 호출하는 메소드 경로를 자동으로 추출 함) 다음 옵션 매개 변수를 사용할 수 있습니다.
context : Celestite::Context
Celestite는 Celestite::Context 라는 해시 문자를 사용합니다. 구성 요소에서 사용할 수있는 변수는 원하는 이름의 기호 키를 사용하여 여기에 들어갑니다.
따라서 vue 구성 요소에서 example_crystal_data 에 액세스하려면 my_context[:example_crystal_data] 에 관련 값을 할당하십시오. 자세한 내용은 아래 예제를 참조하십시오
이것은 Sapper의 세션 시어딩 메커니즘을 사용하여 달성되었습니다.
path : String?
렌즈중인 경로를 수동으로 지정 해야하는 경우 (예 : 앰버에 있지 않음) 문자열 매개 변수를 전달할 수 있습니다. 앰버에서는 현재 앰버 경로와 동일한 기본값이 할당됩니다. 컨트롤러 방법이 처리 중입니다.
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() 에 랩핑 된 모든 기능은 (브라우저) 클라이언트에서만 렌더링됩니다.
서버 측 렌더링 고려 사항에 대한 자세한 내용은 여기를 참조하십시오.
저의 목표/철학은 조기에 출시되고, 자주 출시되며, 가능한 한 초기에 많은 사용자 피드백을 얻는 것입니다. 따라서 저의 완벽 주의자는 6 년을 더 개선하고 싶지만 2024 년이 될 것이며 우리 모두가 수중에 살고 있다는 것을 알고 있습니다. 현재와 같은 시간이 없습니다.
단기 목표 :
장기 목표 :
이것은 내 솔로 프로젝트였으며 코드 / 개선 / 기부금에 대한 피드백을 얻는 것 이상을 좋아할 것입니다. 나는 지금까지 배우고 레벨 업 개발 기술을 배우는 가장 좋은 방법을 찾았습니다. 다른 사람들이 당신이 씨름 한 코드를 검토하도록하는 것입니다.
즉, 물러서는 것입니다. 깨진 물건을보고하거나 코드의 일부를 개선하거나 오타를 고치는 데 도움이됩니다. 모든 사람 (모든 기술 수준)을 환영합니다.
git checkout -b omg-this-fixed-so-many-bugs )git commit -am 'Made a fix!' )git push origin omg-this-fixed-so-many-bugs )
