celestite
velte
Crystal + esvelte = ⚡
Celestite le permite usar toda la potencia de los componentes reactivos de SVelte en sus aplicaciones web de Crystal. Es un reemplazo de entrega de su capa de vista: no es necesario más necesidad de plantillas .ecr intermedias. Con Celestite, escribe su código de servidor de backend en Crystal, su código de cliente frontend en JavaScript y HTML, y todo funciona juntos sin problemas ... y rápido.
Lea la publicación de blog introductoria completa aquí.
El servidor Render se construyó utilizando el nodo 10.15.3 (en particular, utiliza el estándar de URL WhatWG, que se agregó en el nodo 7+). No es necesario hacer esto, estrictamente hablar, y si hay una razón convincente para apoyar versiones anteriores de Node, estoy contento de hacer este cambio).
Esto no es mucho más que una prueba de concepto en este momento, ¡pero funciona! Se aplican advertencias estándar: es probable que se rompa/se estrellará en una gloria espectacular y mal, así que no lo empuje, lo alimente más de la medianoche o lo use para cualquier misión crítica (todavía).
Celestite ha sido desarrollado / probado con el marco web Amber, pero también diseñado para trabajar independientemente. Tampoco hay razón para que no funcione con Lucky, Kemal, Athena, etc. (pero aún no se ha hecho trabajo que se haya hecho con ellos). Los pasos a continuación suponen que trabajará con Amber.
shard.yml de su aplicación y ejecute shards install dependencies :
celestite :
github : noahlh/celestite
version : ~> 0.1.3Celestite::Adapter::Amber en su application_controller.cr Esto agrega la macro celestite_render .
# application_controller.cr
require " jasper_helpers "
class ApplicationController < Amber::Controller::Base
include JasperHelpers
+ include Celestite :: Adapter :: Amber
endcelestite_amber_init.cr a /config/initializersSe proporciona un ejemplo. Puede nombrar este archivo lo que desee, siempre que se llame a la inicialización.
_error.svelte a su directorio de vistasEsto se requiere por el momento porque Sapper lo espera. Si falta, su aplicación seguirá funcionando, pero habrá algo de rareza con la representación de CSS (confía en mí, esto me costó una noche;)
< script >
export let status ;
export let error ;
</ script >
< h1 > {status} </ h1 >
< p > {error.message} </ p >Esto se debe a un ligero enganche con cómo Svelte funciona detrás de escena (a través de Sapper), pero esencialmente: el cliente debe poder acceder a los archivos JS relevantes en /cliente, pero Sapper necesita un control completo sobre ese directorio (lo limpia con cada nueva construcción). Por lo tanto, simultáneamente le damos su propio directorio y también lo ponemos a disposición a través de la ruta de la raíz.
# 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 y comience a construir! Una nota sobre Naming: Asegúrese de seguir las reglas de nombres de archivos de Sapper. Sugerencia: el componente raíz debe llamarse index.svelte (todos minúsculas).
celestite_render (context : Celestite::Context = nil, path : String? = nil, template : String? = nil)
Realiza el render. Esto se llama donde normalmente llamaría render en sus controladores. No necesita ningún parámetro de forma predeterminada (extrae automáticamente la ruta del método que lo llama en función de sus rutas ámbar), pero puede usar los siguientes parámetros opcionales:
context : Celestite::Context
Celestite utiliza un hash literal llamado Celestite::Context . Cualquier variable que desee disponible en sus componentes entran aquí, utilizando una clave de símbolo del nombre deseado.
Entonces, si desea acceder a example_crystal_data en su componente VUE, asigne el valor relevante a my_context[:example_crystal_data] . Ver ejemplo a continuación para más detalles
Esto se logra utilizando el mecanismo de semillas de sesión de Sapper.
path : String?
Si necesita especificar manualmente qué ruta está agotando (es decir, no está en ámbar), puede pasar en un parámetro de cadena. En ámbar se le asignará un valor predeterminado igual a la ruta AMBER actual que el método del controlador está manejando.
template : String?
(Aún no implementado) en qué diseño/plantilla le gustaría representar el componente. Utilizará una plantilla predeterminada especificada en el archivo init si no se especifica en Render.
# home_controller.cr
class HomeController < ApplicationController
def index
data = 1 + 1
context = Celestite :: Context { :data => data}
celestite_render(context)
end
end Sus componentes .svelte se presentarán automáticamente en el lado del servidor antes de ser enviado al cliente. Esto suele ser perfecto, pero deberá conocer cualquier código (o bibliotecas) que se basa en API específicas del navegador (como document o window ). Esto arrojará un error cuando los componentes se representan en el contexto del nodo (frente al navegador).
Para evitar esto, puede importar la función onMount() de Sapper. Cualquier función envuelta en onMount() se representará solo en el cliente (navegador).
Puede leer más sobre consideraciones de renderizado del lado del servidor aquí.
Mi objetivo/filosofía es lanzar temprano, lanzar a menudo y obtener tantos comentarios de los usuarios lo más temprano en el proceso como sea posible, por lo que a pesar de que el perfeccionista en mí le gustaría pasar otros 6 años mejorando esto, para entonces será 2024 y quién sabe que todos podríamos estar viviendo bajo el agua. No hay tiempo como el presente.
Objetivos a corto plazo:
Objetivos a más largo plazo:
Este ha sido un proyecto en solitario y me encantaría nada más que recibir comentarios sobre el código / mejoras / contribuciones. Encontré con mucho la mejor manera de aprender y nivelar las habilidades de desarrollo es que otros revisen el código con el que ha luchado.
Es decir, no te detengas. Informe cosas que están rotas, ayudan a mejorar parte del código, o incluso simplemente solucionar algunos errores tipográficos. Todos (en todos los niveles de habilidad) son bienvenidos.
git checkout -b omg-this-fixed-so-many-bugs )git commit -am 'Made a fix!' )git push origin omg-this-fixed-so-many-bugs )
