celestite
velte
Kristall + Sufle = ⚡
Mit Celestite können Sie die volle Leistung von Svelte -reaktiven Komponenten in Ihren Kristall -Web -Apps verwenden. Es ist ein Drop-In-Ersatz für Ihre Ansichtsschicht-keine Notwendigkeit für .ecr . Mit Celestite schreiben Sie Ihren Backend Server -Code in Crystal, Ihren Frontend -Client -Code in JavaScript & HTML, und alles funktioniert nahtlos zusammen ... und schnell.
Lesen Sie hier den vollständigen Einführungs -Blog -Beitrag.
Der Render-Server wurde unter Verwendung von Knoten 10.15.3 erstellt (insbesondere verwendet er den in Knoten 7+ hinzugefügten Whatwg-URL-Standard). Dies muss nicht ausschließlich sprechend tun, und wenn es einen zwingenden Grund gibt, frühere Versionen von Knoten zu unterstützen, nehmen Sie diese Änderung gerne vor.)
Dies ist im Moment nicht viel mehr als ein Proof-of-Concept, aber es funktioniert! Standardwarnungen gelten-es wird wahrscheinlich in einem spektakulären und schlecht zeitlichen Ruhm brechen/stürzen. Stecken Sie es also nicht, füttern Sie es nach Mitternacht oder verwenden Sie es für alles, was (doch) für etwas Missionsbeschwerte.
Celestite wurde mit dem Bernstein -Web -Framework entwickelt / getestet, aber auch für Standalone entwickelt. Es gibt auch keinen Grund, warum es nicht mit Lucky, Kemal, Athena usw. funktioniert
shard.yml und führen Sie shards install dependencies :
celestite :
github : noahlh/celestite
version : ~> 0.1.3Celestite::Adapter::Amber in Ihr application_controller.cr hinzu Dies fügt das celestite_render -Makro hinzu.
# application_controller.cr
require " jasper_helpers "
class ApplicationController < Amber::Controller::Base
include JasperHelpers
+ include Celestite :: Adapter :: Amber
endcelestite_amber_init.cr zu /config/initializersEin Beispiel wird bereitgestellt. Sie können diese Datei nennen, was Sie wollen, nur solange sie auf die Initialisierung aufgerufen wird.
_error.svelte hinzuDies ist vorerst erforderlich, weil Sapper es erwartet. Wenn es fehlt, funktioniert Ihre App immer noch, aber es wird eine gewisse Verrücktheit mit CSS -Rendering geben (vertrauen Sie mir - das kostete mich einen Abend;)
< script >
export let status ;
export let error ;
</ script >
< h1 > {status} </ h1 >
< p > {error.message} </ p >Dies liegt an einer leichten Anhängerkupplung mit der Funktionsweise von Svelte hinter den Kulissen (über Sapper), im Wesentlichen jedoch: Der Kunde muss in der Lage sein, auf die relevanten JS -Dateien in /client zugreifen zu können, doch Sapper benötigt die vollständige Kontrolle über dieses Verzeichnis (es wischt es mit jedem neuen Build ab). Daher geben wir ihm gleichzeitig ein eigenes Verzeichnis und machen es auch über den Wurzelpfad zur Verfügung.
# 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 -Dateien hinzu und beginnen Sie mit dem Erstellen! Ein Hinweis zur Benennung: Stellen Sie sicher, dass Sie Sappers Datei -Benennungsregeln befolgen. Hinweis: Die Stammkomponente sollte als index.svelte (alle Kleinbuchstaben) bezeichnet werden.
celestite_render (context : Celestite::Context = nil, path : String? = nil, template : String? = nil)
Führt den Render durch. Dies ist aufgerufen, wo Sie normalerweise render in Ihren Controllern aufrufen würden. Standardmäßig benötigen keine Parameter (es extrahiert automatisch den Pfad der Methode, die sie basierend auf Ihren Bernsteinrouten aufruft). Sie können jedoch die folgenden optionalen Parameter verwenden:
context : Celestite::Context
Celestite verwendet einen Hash, der Celestite::Context namens Celestite :: Kontext verwendet. Alle Variablen, die Sie in Ihren Komponenten verfügbar möchten, finden hier einen Symbolschlüssel des gewünschten Namens.
Wenn Sie also in Ihrer VUE -Komponente auf example_crystal_data zugreifen möchten, weisen Sie my_context[:example_crystal_data] den relevanten Wert zu]. Weitere Informationen finden Sie unten Beispiele für Details
Dies wird durch Sappers Sitzungsmechanismus erreicht.
path : String?
Wenn Sie manuell angeben müssen, welchen Pfad Sie begeben (dh Sie sind nicht in Bernstein), können Sie einen String -Parameter übergeben. In Bernstein wird dies zugewiesen, ein Standardwert entspricht der aktuellen Bernsteinroute, die die Controller -Methode bearbeitet.
template : String?
(Noch nicht implementiert) in welcher Layout/der Vorlage Sie die Komponente rendern möchten. Verwenden Sie eine in der Init -Datei angegebene Standardvorlage, wenn keiner auf Render angegeben ist.
# home_controller.cr
class HomeController < ApplicationController
def index
data = 1 + 1
context = Celestite :: Context { :data => data}
celestite_render(context)
end
end Ihre .svelte Komponenten werden automatisch serverseitig gerendert, bevor sie an den Client gesendet werden. Dies ist normalerweise nahtlos, aber Sie müssen sich von Code (oder Bibliotheken) bewusst sein, die auf Browser-spezifischen APIs (wie document oder window ) beruhen. Dies macht einen Fehler, wenn die Komponenten im Kontext des Knotens (gegenüber dem Browser) gerendert werden.
Um dies zu umgehen, können Sie onMount() -Funktion von Sapper importieren. Jede Funktion in onMount() wird nur im (Browser-) Client gerendert.
Weitere Informationen zu serverseitigen Rendering-Überlegungen finden Sie hier.
Mein Ziel/meine Philosophie ist es, frühzeitig freizugeben, oft freizulassen und so früh wie möglich so viel Benutzer -Feedback zu erhalten. Auch wenn der Perfektionist in mir weitere 6 Jahre damit verbringen würde, dies zu verbessern, wird es bis dahin 2024 sein und wer weiß, dass wir alle unter Wasser leben könnten. Keine Zeit wie die Gegenwart.
Kurzfristige Ziele:
Längerfristige Ziele:
Dies war ein Solo -Projekt von mir und ich würde nichts weiter lieben, als Feedback zu den Code / Verbesserungen / Beiträgen zu erhalten. Ich habe bei weitem das beste Weg zum Erlernen und Level-up-Entwicklungsfähigkeiten gefunden, um andere den Code zu überprüfen, mit dem Sie gerungen haben.
Das heißt, halten Sie sich nicht zurück. Melden Sie Dinge, die gebrochen sind, helfen Sie, einen Teil des Codes zu verbessern oder sogar einige Tippfehler zu beheben. Jeder (auf jeden Fall) ist willkommen.
git checkout -b omg-this-fixed-so-many-bugs )git commit -am 'Made a fix!' )git push origin omg-this-fixed-so-many-bugs )
