Unduh celestite - Unduh Kode Sumber celestite

celestite

Data situs web

velte

Unduh

Celestite

Crystal + Svelte = ⚡

Celestite memungkinkan Anda untuk menggunakan kekuatan penuh komponen reaktif langsing di aplikasi web kristal Anda. Ini adalah pengganti drop-in untuk lapisan tampilan Anda-tidak perlu lagi untuk templat .ecr menengah. Dengan Celestite, Anda menulis kode server backend Anda di Crystal, kode klien frontend Anda di JavaScript & HTML, dan semuanya bekerja bersama dengan mulus ... dan cepat.

Perkenalan

Baca posting blog pengantar lengkap di sini.

Persyaratan

Crystal 0.35.1+
Benang 1.12+
Node 10+

Server render dibangun menggunakan simpul 10.15.3 (khususnya ia menggunakan standar URL WhatWG, yang ditambahkan dalam simpul 7+.) Tidak perlu melakukan ini, berbicara dengan ketat, dan jika ada alasan kuat untuk mendukung versi node sebelumnya, saya senang melakukan perubahan ini.)

Instalasi

Ini adalah pratinjau / perangkat lunak alpha awal

Ini tidak lebih dari bukti konsep saat ini, tetapi berhasil! Peringatan standar berlaku-kemungkinan akan pecah/jatuh dalam kemuliaan yang spektakuler dan tidak tepat waktu, jadi jangan menyodoknya, memberi makan melewati tengah malam, atau menggunakannya untuk apa pun yang kritis-misi (belum).

Celestite telah dikembangkan / diuji dengan kerangka kerja Amber, tetapi dirancang untuk bekerja mandiri juga. Juga tidak ada alasan itu tidak akan berhasil dengan Lucky, Kemal, Athena, dll. (Tetapi belum ada pekerjaan yang mengintegrasikan dengan itu telah dilakukan.) Langkah -langkah di bawah ini menganggap Anda akan bekerja dengan Amber.

1. Tambahkan Celestite ke `shard.yml` Aplikasi Anda dan Jalankan `shards install`

 dependencies :
  celestite :
    github : noahlh/celestite
    version : ~> 0.1.3

2. Sertakan Helper `Celestite::Adapter::Amber` di `application_controller.cr` Anda

Ini menambahkan makro celestite_render .

  # application_controller.cr

  require " jasper_helpers "

  class ApplicationController < Amber::Controller::Base
    include JasperHelpers
+   include Celestite :: Adapter :: Amber
  end

3. Tambahkan `celestite_amber_init.cr` to `/config/initializers`

Contoh disediakan. Anda dapat menyebutkan file ini apa pun yang Anda inginkan, selama itu dipanggil setelah inisialisasi.

4. Tambahkan `_error.svelte` ke direktori tampilan Anda

Ini diperlukan untuk saat ini karena Sapper mengharapkannya. Jika hilang, aplikasi Anda akan tetap berfungsi, tetapi akan ada beberapa keanehan dengan rendering CSS (percayalah - ini biaya malam;)

 < script >
  export let status ;
  export let error ;
</ script >

< h1 > {status} </ h1 >
< p > {error.message} </ p >

4. Tambahkan rute statis untuk Build_dir Anda ke pipa statis Amber

Ini karena sedikit halangan dengan bagaimana Svelte bekerja di belakang layar (melalui Sapper), tetapi pada dasarnya: klien harus dapat mengakses file JS yang relevan di /klien, namun Sapper membutuhkan kontrol penuh atas direktori itu (itu menyeka dengan setiap build baru). Jadi kami secara bersamaan memberikan direktori sendiri dan juga membuatnya tersedia melalui jalur root.

 # routes.cr

 pipeline :static do
   plug Amber :: Pipe :: Error .new
   plug Amber :: Pipe :: Static .new( " ./public " )
+  plug Amber :: Pipe :: Static .new( " ./public/celestite " )
 end

Dan akhirnya ...

5. Tambahkan file `.svelte` Anda dan mulailah membangun!

Catatan tentang penamaan: Pastikan Anda mengikuti aturan penamaan file Sapper. Petunjuk: Komponen root harus dinamai index.svelte (semua huruf kecil).

Detail Penggunaan

celestite_render (context : Celestite::Context = nil, path : String? = nil, template : String? = nil)

Melakukan render. Ini akan dipanggil di mana Anda biasanya memanggil render di pengontrol Anda. Tidak perlu parameter apa pun secara default (secara otomatis mengekstrak jalur metode yang menyebutnya berdasarkan rute kuning Anda), tetapi Anda dapat menggunakan parameter opsional berikut:

context : Celestite::Context
Celestite menggunakan hash literal yang disebut Celestite::Context . Setiap variabel yang Anda ingin tersedia di komponen Anda masuk ke sini, menggunakan kunci simbol dari nama yang diinginkan.
Jadi, jika Anda ingin mengakses example_crystal_data di komponen VUE Anda, tetapkan nilai yang relevan ke my_context[:example_crystal_data] . Lihat contoh di bawah ini untuk detailnya
Ini dicapai dengan menggunakan mekanisme sesi-biji Sapper.
path : String?
Jika Anda perlu menentukan jalur mana yang Anda rending (yaitu Anda tidak dalam amber), Anda dapat melewati parameter string. Di Amber ini akan diberikan nilai default yang sama dengan rute amber saat ini yang ditangani oleh metode pengontrol.
template : String?
(Belum diimplementasikan) Tata letak/templat mana yang ingin Anda render komponen. Akan menggunakan templat default yang ditentukan dalam file init jika tidak ada yang ditentukan pada render.

Contoh Pengontrol

 # home_controller.cr

class HomeController < ApplicationController
  def index
    data = 1 + 1
    context = Celestite :: Context { :data => data}
    celestite_render(context)
  end
end

Server vs rendering klien (node/javascript)

Komponen .svelte Anda secara otomatis akan diterjemahkan sisi server sebelum dikirim ke klien. Ini biasanya mulus, tetapi Anda harus mengetahui kode apa pun (atau perpustakaan) yang mengandalkan API khusus browser (seperti document atau window ). Ini akan melempar kesalahan ketika komponen diterjemahkan dalam konteks node (vs browser).

Untuk menyiasati ini, Anda dapat mengimpor fungsi onMount() Sapper. Fungsi apa pun yang dibungkus dengan onMount() akan diterjemahkan di klien (browser) saja.

Anda dapat membaca lebih lanjut tentang pertimbangan rendering sisi server di sini.

Status proyek

Tujuan/filosofi saya adalah untuk merilis lebih awal, sering dirilis, dan mendapatkan umpan balik pengguna sebanyak mungkin dalam proses mungkin, jadi meskipun perfeksionis dalam diri saya ingin menghabiskan 6 tahun lagi meningkatkan ini, pada saat itu akan menjadi 2024 dan siapa tahu kita semua mungkin hidup di bawah air. Tidak ada waktu seperti sekarang.

Peta jalan

Tujuan Jangka Pendek:

Lepaskan versi 0.1.0 yang memalukan (awalnya didukung VUE)
Perbaiki masalah pemuatan ulang (tidak semuanya restart dengan benar)
Foto Hot Module Reloading (HMR)
Tambahkan Dukungan untuk Svelte (dirilis dalam 0.1.2)
Dapatkan penggunaan -> Ekspos Bug
Dapatkan Contoh / Proyek Demo Langsung
Beralih ke Sveltkit saat hidup

Tujuan jangka panjang:

Peningkatan Kinerja & Kode Kebersihan
Hapus kebutuhan untuk proses simpul terpisah / http (evaluasi js dalam kristal?)

Kontribusi / kritik yang diinginkan!

Ini telah menjadi proyek solo saya dan saya tidak ingin lebih dari mendapatkan umpan balik tentang kode / peningkatan / kontribusi. Sejauh ini saya telah menemukan cara terbaik untuk belajar dan meningkatkan keterampilan pengembangan adalah dengan memiliki kode ulasan orang lain yang telah Anda gulat.

Artinya, jangan menahan diri. Laporkan hal -hal yang rusak, membantu meningkatkan beberapa kode, atau bahkan hanya memperbaiki beberapa kesalahan ketik. Semua orang (di semua tingkat keterampilan) dipersilakan.