celestite
velte
Cristal + svelte = ⚡
Celestite vous permet d'utiliser toute la puissance des composants réactifs Svelte dans vos applications Web Crystal. C'est un remplacement d'allumage pour votre calque de vue - plus besoin de modèles .ecr intermédiaires. Avec Celestite, vous écrivez votre code de serveur backend dans Crystal, votre code client frontal dans JavaScript & HTML, et tout fonctionne ensemble de manière transparente ... et rapide.
Lisez le blog complet de l'introduction ici.
Le serveur de rendu a été construit en utilisant le nœud 10.15.3 (en particulier il utilise la norme URL WhatWG, qui a été ajoutée dans le nœud 7+.) Il n'a pas besoin de le faire, strictement de langue, et s'il y a une raison impérieuse de prendre en charge les versions antérieures de Node, je suis heureux de faire ce changement.)
Ce n'est pas beaucoup plus qu'une preuve de concept en ce moment, mais cela fonctionne! Des avertissements standard s'appliquent - il se cassera / se brisera probablement dans une gloire spectaculaire et mal instacie, alors ne le piquez pas, ne le nourrissez pas après minuit ou utilisez-le pour quelque chose de critique (encore).
Celestite a été développé / testé avec le framework Web Amber, mais conçu pour fonctionner également autonome. Il n'y a pas non plus de raison que cela ne fonctionnera pas avec Lucky, Kemal, Athena, etc. (mais aucun travail de l'intégration de ceux-ci n'a encore été fait.) Les étapes ci-dessous supposent que vous travaillerez avec Amber.
shard.yml de votre application et exécutez shards install dependencies :
celestite :
github : noahlh/celestite
version : ~> 0.1.3Celestite::Adapter::Amber dans votre application_controller.cr Cela ajoute 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 à /config/initializersUn exemple est fourni. Vous pouvez nommer ce fichier ce que vous voulez, tant qu'il est appelé à l'initialisation.
_error.svelte à votre répertoireCeci est nécessaire pour le moment parce que Sapper s'y attend. Si cela manque, votre application fonctionnera toujours, mais il y aura une étrangeté avec le rendu CSS (croyez-moi - cela m'a coûté une soirée;)
< script >
export let status ;
export let error ;
</ script >
< h1 > {status} </ h1 >
< p > {error.message} </ p >Cela est dû à un léger attelage avec le fonctionnement de Svelte dans les coulisses (via Sapeur), mais essentiellement: le client doit être en mesure d'accéder aux fichiers JS pertinents dans / le client, mais Sapeur a besoin d'un contrôle complet sur ce répertoire (il l'essuie à chaque nouvelle version). Nous lui donnons donc simultanément son propre répertoire et le rendons également disponible via le chemin racine.
# 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 et commencez à construire! Une note sur la dénomination: assurez-vous de suivre les règles de dénomination des fichiers de SAPPER. Astuce: le composant racine doit être nommé index.svelte (tous les minuscules).
celestite_render (context : Celestite::Context = nil, path : String? = nil, template : String? = nil)
Effectue le rendu. Ceci doit être appelé là où vous appelez normalement render dans vos contrôleurs. Il n'a pas besoin de paramètres par défaut (il extrait automatiquement le chemin de la méthode l'appelant en fonction de vos routes ambre), mais vous pouvez utiliser les paramètres facultatifs suivants:
context : Celestite::Context
Celestite utilise un littéral de hachage appelé Celestite::Context . Toutes les variables que vous souhaitez disponibles dans vos composants vont ici, en utilisant une clé de symbole du nom souhaité.
Donc, si vous souhaitez accéder example_crystal_data dans votre composant VUE, attribuez la valeur pertinente à my_context[:example_crystal_data] . Voir l'exemple ci-dessous pour plus de détails
Ceci est atteint en utilisant le mécanisme de séance de séance de Sapeur.
path : String?
Si vous avez besoin de spécifier manuellement le chemin que vous rendez (c'est-à-dire que vous n'êtes pas dans l'ambre), vous pouvez passer dans un paramètre de chaîne. Dans Amber, il se verra attribuer une valeur par défaut égale à la route AMBER actuelle, la méthode du contrôleur est gérée.
template : String?
(Non implémenté encore) Quel modèle / modèle dans lequel vous souhaitez rendre le composant. Utilisera un modèle par défaut spécifié dans le fichier init si aucun n'a spécifié sur le rendu.
# home_controller.cr
class HomeController < ApplicationController
def index
data = 1 + 1
context = Celestite :: Context { :data => data}
celestite_render(context)
end
end Vos composants .svelte seront automatiquement rendus côté serveur avant d'être envoyés au client. Ceci est généralement transparent, mais vous devrez être conscient de tout code (ou bibliothèque) qui reposait sur des API spécifiques du navigateur (telles que document ou window ). Cela lancera une erreur lorsque les composants seront rendus dans le contexte du nœud (vs le navigateur).
Pour contourner cela, vous pouvez importer la fonction onMount() de Sapeur. Toute fonction enveloppée dans onMount() sera rendu uniquement dans le client (du navigateur).
Vous pouvez en savoir plus sur les considérations de rendu côté serveur ici.
Mon objectif / philosophie est de libérer tôt, de libérer souvent et d'obtenir autant de commentaires des utilisateurs le plus tôt possible, donc même si le perfectionniste en moi aimerait passer encore 6 ans à l'améliorer, ce sera alors 2024 et qui sait que nous pourrions tous vivre sous l'eau. Pas de temps comme le présent.
Objectifs à court terme:
Objectifs à plus long terme:
Cela a été un projet solo et je n'aimerais rien de plus que d'obtenir des commentaires sur le code / améliorations / contributions. J'ai trouvé de loin que la meilleure façon d'apprendre et de niveler les compétences de développement est d'avoir d'autres révisions du code avec lequel vous avez lutté.
C'est-à-dire, ne vous retenez pas. Signaler des choses qui sont cassées, aider à améliorer une partie du code, ou même simplement corriger certaines fautes de frappe. Tout le monde (à tous les niveaux de compétence) est le bienvenu.
git checkout -b omg-this-fixed-so-many-bugs )git commit -am 'Made a fix!' )git push origin omg-this-fixed-so-many-bugs )
