celestite
velte
Crystal + svelte = ⚡
يتيح لك Celestite استخدام الطاقة الكاملة للمكونات التفاعلية في تطبيقات Web Crystal. إنه بديل في طبقة العرض الخاصة بك-لم يعد هناك حاجة إلى .ecr متوسطة. مع Celestite ، تكتب رمز خادم الواجهة الخلفية الخاصة بك في Crystal ، ورمز عميل Frontend الخاص بك في JavaScript & HTML ، وكل شيء يعمل بسلاسة ... وبسرعة.
اقرأ منشور المدونة التمهيدي الكامل هنا.
تم تصميم خادم العرض باستخدام Node 10.15.3 (على وجه الخصوص ، يستخدم معيار URL WhatWG ، والذي تمت إضافته في Node 7+.) لا يحتاج إلى القيام بذلك ، يتحدث بشكل صارم ، وإذا كان هناك سبب مقنع لدعم الإصدارات السابقة من العقدة ، يسعدني إجراء هذا التغيير.)
هذا ليس أكثر من مجرد دليل على المفهوم في الوقت الحالي ، لكنه يعمل! تنطبق التحذيرات القياسية-من المحتمل أن تنكسر/تعطل في مجد مذهل وغير محدد ، لذلك لا تكسبها ، أو تغذيها في منتصف الليل ، أو استخدامها لأي شيء مهم (حتى الآن).
تم تطوير / اختبار Celestite مع إطار عمل Amber Web ، ولكنه مصمم للعمل المستقل أيضًا. لا يوجد أيضًا سبب لن يعمل مع Lucky و Kemal و Athena ، وما إلى ذلك (ولكن لم يتم دمج العمل مع هؤلاء بعد.) الخطوات أدناه تفترض أنك ستعمل مع 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 إلى دليل وجهات النظر الخاصة بكهذا مطلوب في الوقت الحالي لأن Sapper يتوقع ذلك. إذا كان الأمر مفقودًا ، فسيظل تطبيقك يعمل ، ولكن سيكون هناك بعض الغرابة من خلال عرض 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::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 الخاصة بك تلقائيًا جانب الخادم قبل إرسالها إلى العميل. هذا عادة ما يكون سلسًا ، ولكن ستحتاج إلى أن تكون على دراية بأي رمز (أو مكتبات) يعتمد على واجهات برمجة التطبيقات الخاصة بالمتصفح (مثل 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
