celestite
velte
Crystal + SVELTE = ⚡
A Celestite permite que você use todo o poder dos componentes reativos esbeltos em seus aplicativos da Web Crystal. É uma substituição para sua camada de visualização-não há mais necessidade de modelos intermediários .ecr . Com o Celestite, você escreve o código do seu servidor de back -end em Crystal, o código do cliente front -end em JavaScript & HTML e tudo funciona juntos perfeitamente ... e rápido.
Leia a postagem completa do blog introdutório aqui.
O servidor Render foi construído usando o Node 10.15.3 (em particular, ele usa o padrão URL Whatwg, que foi adicionado no nó 7+.) Ele não precisa fazer isso, de língua estritamente, e se houver uma razão convincente para apoiar versões anteriores do Node, fico feliz em fazer essa alteração.)
Isso não é muito mais do que uma prova de conceito no momento, mas funciona! Avaliações padrão se aplicam-provavelmente quebrará/falhará na glória espetacular e mal-time; portanto, não a cutuca, alimente-a depois da meia-noite ou use-a para qualquer coisa da missão crítica (ainda).
A Celestite foi desenvolvida / testada com a estrutura da Web Amber, mas projetada para funcionar independente também. Também não há razão para que não funcione com Lucky, Kemal, Athena, etc. (mas nenhum trabalho integrando com eles ainda foi feito.) As etapas abaixo assumem que você estará trabalhando com Amber.
shard.yml do seu aplicativo e execute shards install dependencies :
celestite :
github : noahlh/celestite
version : ~> 0.1.3Celestite::Adapter::Amber em seu application_controller.cr Isso adiciona a macro celestite_render .
# application_controller.cr
require " jasper_helpers "
class ApplicationController < Amber::Controller::Base
include JasperHelpers
+ include Celestite :: Adapter :: Amber
endcelestite_amber_init.cr para /config/initializersUm exemplo é fornecido. Você pode nomear este arquivo o que quiser, desde que seja chamado após a inicialização.
_error.svelte ao seu diretório de visualizaçõesPor enquanto, isso é necessário, porque o Sapper espera. Se estiver faltando, seu aplicativo ainda funcionará, mas haverá alguma estranheza com a renderização do CSS (confie em mim - isso me custou uma noite;)
< script >
export let status ;
export let error ;
</ script >
< h1 > {status} </ h1 >
< p > {error.message} </ p >Isso ocorre devido a um leve engate com o modo como o esbelto funciona nos bastidores (via Sapper), mas essencialmente: o cliente precisa poder acessar os arquivos JS relevantes em /cliente, mas o Sapper precisa de controle completo sobre esse diretório (ele o limpa com cada nova compilação). Por isso, simultaneamente, fornecemos seu próprio diretório e também o disponibilizamos através do caminho raiz.
# 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 e comece a criar! Uma nota sobre a nomeação: siga as regras de nomeação de arquivos do Sapper. Dica: o componente raiz deve ser nomeado index.svelte (todas as minúsculas).
celestite_render (context : Celestite::Context = nil, path : String? = nil, template : String? = nil)
Executa a renderização. Isso deve ser chamado de onde você normalmente chamaria de render em seus controladores. Ele não precisa de nenhum parâmetros por padrão (extrai automaticamente o caminho do método chamando -o com base em suas rotas âmbar), mas você pode usar os seguintes parâmetros opcionais:
context : Celestite::Context
Celestite usa um hash literal chamado Celestite::Context . Quaisquer variáveis que você desejar disponível em seus componentes entram aqui, usando uma chave de símbolo do nome desejado.
Portanto, se você deseja acessar example_crystal_data no seu componente VUE, atribua o valor relevante ao my_context[:example_crystal_data] . Veja o exemplo abaixo para obter detalhes
Isso é atingido usando o mecanismo de semeadadura de sessão do Sapper.
path : String?
Se você precisar especificar manualmente qual caminho você está rasgando (ou seja, você não está em âmbar), pode passar em um parâmetro de string. Em Amber, isso receberá um valor padrão igual à rota âmbar atual que o método do controlador está lidando.
template : String?
(Ainda não implementado) em qual layout/modelo você deseja renderizar o componente. Usará um modelo padrão especificado no arquivo init se nenhum especificado na renderização.
# home_controller.cr
class HomeController < ApplicationController
def index
data = 1 + 1
context = Celestite :: Context { :data => data}
celestite_render(context)
end
end Seus componentes .svelte serão automaticamente renderizados no lado do servidor antes de serem enviados ao cliente. Isso geralmente é contínuo, mas você precisa estar ciente de qualquer código (ou bibliotecas) que dependam de APIs específicas do navegador (como document ou window ). Isso apresentará um erro quando os componentes forem renderizados no contexto do nó (vs o navegador).
Para contornar isso, você pode importar a função onMount() do Sapper. Qualquer função envolvida em onMount() será renderizada apenas no cliente (navegador).
Você pode ler mais sobre considerações de renderização do lado do servidor aqui.
Meu objetivo/filosofia é lançar cedo, liberar com frequência e obter o máximo de feedback do usuário o mais cedo possível no processo, portanto, mesmo que o perfeccionista em mim gostaria de passar mais 6 anos melhorando isso, até então será 2024 e quem sabe que todos poderíamos estar vivendo debaixo d'água. Não há tempo como o presente.
Objetivos de curto prazo:
Objetivos de longo prazo:
Este tem sido um projeto solo meu e eu adoraria nada além de obter feedback sobre o código / melhorias / contribuições. Descobri de longe a melhor maneira de aprender e as habilidades de desenvolvimento de nível para cima é fazer com que outras pessoas revisem o código com o qual você lutou.
Ou seja, não se segure. Relate coisas que estão quebradas, ajude a melhorar parte do código ou até mesmo consertar alguns erros de digitação. Todos (em todos os níveis de habilidade) são bem -vindos.
git checkout -b omg-this-fixed-so-many-bugs )git commit -am 'Made a fix!' )git push origin omg-this-fixed-so-many-bugs )
