celestite
velte
Crystal + Svelte = ⚡
Celestite позволяет вам использовать полную мощность стройных реактивных компонентов в ваших кристаллических веб -приложениях. Это замена для вашего просмотра-больше не нужно в промежуточных шаблонах .ecr . С Celestite вы пишете код сервера бэкэнд в Crystal, ваш клиент -код Frontend в JavaScript & HTML, и все работает вместе беспрепятственно ... и быстро.
Прочитайте полное вступительное сообщение в блоге здесь.
Сервер рендеринга был построен с использованием узла 10.15.3 (в частности, он использует стандарт URL WhatWG, который был добавлен в узле 7+.). Он не должен делать это, строго говоря, и если есть убедительная причина для поддержки более ранних версий узла, я рад внести эти изменения).
В настоящее время это не гораздо больше, чем подтверждение концепции, но это работает! Применяются стандартные предупреждения-он, вероятно, сломается/авария в впечатляющей и нестандартной славе, поэтому не выщипайте, кормит его после полуночи или используйте для чего-либо критически важного (пока).
Celestite был разработан / протестирован с помощью веб -фреймворка Amber, но также предназначен для работы автономным. Также нет никаких причин, по которым он не будет работать с счастливчиком, Кемалом, Афиной и т. Д. (Но нет работы, интегрирующейся с ними еще не была сделана.) Приведенные ниже шаги предполагают, что вы будете работать с янтарным.
shard.yml и забегайте 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 . Любые переменные, которые вы хотели бы, доступны в ваших компонентах, заходят здесь, используя ключ символа желаемого имени.
Поэтому, если вы хотите получить доступ example_crystal_data в вашем компоненте VUE, назначьте соответствующее значение 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's 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 )
