celestite
velte
Crystal + Svelte = ⚡
Celestite ช่วยให้คุณใช้พลังเต็มรูปแบบของส่วนประกอบปฏิกิริยา Svelte ในแอพคริสตัลเว็บของคุณ มันเป็นการแทนที่แบบเลื่อนลงสำหรับเลเยอร์มุมมองของคุณ-ไม่จำเป็นต้องใช้เทมเพลต. .ecr ระดับกลางอีกต่อไป ด้วย Celestite คุณเขียนรหัสเซิร์ฟเวอร์แบ็กเอนด์ของคุณใน Crystal รหัสไคลเอนต์ส่วนหน้าของคุณใน JavaScript & HTML และทุกอย่างทำงานร่วมกันได้อย่างราบรื่น ... และรวดเร็ว
อ่านโพสต์บล็อกเบื้องต้นที่นี่
เซิร์ฟเวอร์เรนเดอร์ถูกสร้างขึ้นโดยใช้โหนด 10.15.3 (โดยเฉพาะอย่างยิ่งมันใช้มาตรฐาน URL WHATWG ซึ่งเพิ่มเข้ามาในโหนด 7+) ไม่จำเป็นต้องทำเช่นนี้พูดอย่างเคร่งครัดและหากมีเหตุผลที่น่าสนใจในการสนับสนุนโหนดเวอร์ชันก่อนหน้านี้ฉันยินดีที่จะทำการเปลี่ยนแปลงนี้
นี่ไม่มากไปกว่าการพิสูจน์แนวคิดในขณะนี้ แต่มันใช้งานได้! คำเตือนมาตรฐานใช้-มันอาจจะแตก/ขัดข้องในความรุ่งโรจน์ที่น่าตื่นเต้นและไม่เหมาะสมดังนั้นอย่ากระตุ้นมันให้อาหารที่ผ่านมาเที่ยงคืนหรือใช้มันเพื่อสิ่งที่สำคัญในภารกิจ (ยัง)
Celestite ได้รับการพัฒนา / ทดสอบด้วยกรอบเว็บแอมเบอร์ แต่ออกแบบมาเพื่อทำงานแบบสแตนด์อโลนเช่นกัน นอกจากนี้ยังไม่มีเหตุผลที่จะไม่ทำงานกับ Lucky, Kemal, Athena ฯลฯ (แต่ยังไม่มีงานรวมกับสิ่งที่ได้ทำไปแล้ว) ขั้นตอนด้านล่างถือว่าคุณจะทำงานกับแอมเบอร์
shard.yml ของแอปพลิเคชันและ Run 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 to /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 ใช้ตัวอักษรแฮชที่เรียกว่า 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 ของคุณจะแสดงผลฝั่งเซิร์ฟเวอร์โดยอัตโนมัติก่อนที่จะถูกส่งไปยังไคลเอนต์ โดยปกติแล้วจะไร้รอยต่อ แต่คุณจะต้องตระหนักถึงรหัสใด ๆ (หรือไลบรารี) ที่ขึ้นอยู่กับ APIs เฉพาะเบราว์เซอร์ (เช่น document หรือ window ) สิ่งนี้จะทำให้เกิดข้อผิดพลาดเมื่อส่วนประกอบถูกแสดงในบริบทของโหนด (เทียบกับเบราว์เซอร์)
เพื่อให้ได้สิ่งนี้คุณสามารถนำเข้าฟังก์ชั่น onMount() ของ Sapper () ฟังก์ชั่นใด ๆ ที่ห่อหุ้มด้วย onMount() จะแสดงผลในไคลเอนต์ (เบราว์เซอร์) เท่านั้น
คุณสามารถอ่านเพิ่มเติมเกี่ยวกับข้อควรพิจารณาเกี่ยวกับการแสดงผลฝั่งเซิร์ฟเวอร์ได้ที่นี่
เป้าหมาย/ปรัชญาของฉันคือการปล่อยตัวเร็วปล่อยบ่อย ๆ และได้รับความคิดเห็นจากผู้ใช้ให้มากที่สุดเท่าที่จะเป็นไปได้ดังนั้นแม้ว่าผู้ที่ชอบความสมบูรณ์แบบในตัวฉันต้องการใช้เวลาอีก 6 ปีในการปรับปรุงสิ่งนี้ ไม่มีเวลาเหมือนปัจจุบัน
เป้าหมายระยะสั้น:
เป้าหมายระยะยาว:
นี่เป็นโครงการเดี่ยวของฉันและฉันไม่ชอบอะไรมากไปกว่าการได้รับคำติชมเกี่ยวกับรหัส / การปรับปรุง / การมีส่วนร่วม ฉันพบวิธีที่ดีที่สุดในการเรียนรู้และทักษะการพัฒนาระดับคือการมีรหัสตรวจสอบอื่น ๆ ที่คุณต่อสู้ด้วย
กล่าวคืออย่าระงับ รายงานสิ่งต่าง ๆ ที่เสียช่วยปรับปรุงรหัสบางส่วนหรือแม้แต่แก้ไขความผิดพลาดบางอย่าง ยินดีต้อนรับทุกคน (ทุกระดับทักษะ)
git checkout -b omg-this-fixed-so-many-bugs )git commit -am 'Made a fix!' )git push origin omg-this-fixed-so-many-bugs )
