Cevabını vermişsin zaten, master'ı feature branch'ine pull edeceksin. Her şeyin up-to-date olduğundan emin olmak için önce git fetch yap sonrasında sen feature branch'ındayken git pull origin master yaparak origin'deki master ref'ini pull et.
Event listener eklediğin zaman this context'i değişir evet. Ya tekrardan context'i bind edebilirsin, yani bağlayabilirsin, ya da bound edilen fonksiyonun üzerinden geçebilirsin. Şu şekilde;
$(this.e).on("input", "input", this.method.bind(this));
// ya da
$(this.e).on("input", "input", (...args) => this.method(...args));
Metodunu bir arrow function ile sararak this context'ini tutmuş olursun, gelen argümanların hepsini de metoda geçirmeyi unutma tabi. İlkini test etmedim çalışır mı emin değilim, sen test edip buraya yazardan diğer arkadaşlar için de faydalı olur.
Svelte ile istediğin veritabanını kullanabilirsin, modern framework'ler bu konuda agnostik davranıyorlar. Hatta zorla bir veritabanı kullandıran bir framework bilmiyorum. Çünkü böyle bir şey imkansız(?). Kullandığın mongoose.connect fonksiyonu mongoose'un JavaScript driver'ından geliyor olsa da svelte ile browser üzerinden kullanabileceğin bir şey değil. Veritabanı ile alakalı işlerini backend'de halletmen lazım. (Gerçi firebase ya da supabase gibi sistemler var ama senin için önemli olan konseptin kendisi.) Frontend ve backend nedir bu konuda biraz daha oku derim, umarım istediğin şeyi yapabilirsin.
HomeIndexPage fonksiyonu içinde yazdıkların, bu bileşen mount olduğunda çalışacak. Her bu sayfaya gidişinde yine useSWR() hook'unu kullanıyorsun, değişmeyen bir bileşene kadar çıkarman lazım bu isteği sonra da gelen datayı alt bileşene ulaştırman gerek. Örneğin;
// Home.jsx
export default function Home({ path = null, request }) {
const [content, setContent] = useState(null);
const request = useSWR('<API>');
useEffect(() => {
switch (path) {
case 'changelog':
setContent(<ChangelogPage />);
break;
default:
setContent(<HomeIndexPage request={request} />);
}
}, [path]);
return (
<>
<Content content={content} />
</>
);
}
// HomeIndexPage.jsx
export default function HomeIndexPage({ request }) {
const [users, setUsers] = useState([]);
const [error, setError] = useState(null);
useEffect(() => {
if (request.error) setError(request.error.message);
if (request.data) setUsers(request.data.data);
}, [request.error, request.data]);
return (
<>
{error ? (
<span>Bir hata oluştu</span>
) : users.length ? (
{lastUsers.map(user => (
<>
<span>{user}</span>
</>
))}
) : (
<span>Yükleniyor...</span>
)}
</>
);
};
git checkout master
git checkout feature-xxx hedefDosya.txt
Sanırım böyle bir şeyin işini görmesi lazım.
Bana fena gözükmedi, bu tarz bir dosya yapısı çok kullanılıyor. Bence rahat çalışabiliyorsan kötü bir sistem değil. utility/service ve config klasörlerini de src klasörünün altına koyabilirsin. Onun haricinde testlerini göremedim, test yazacaksan (ki yaz, en azından utiliy/service dosyaların için) bileşenlerin olduğu klasörelere stili koyduğun gibi koyabilirsin.
Edit: Mantine de geleceğini gördüğüm açık kaynakı bir proje, henüz tam bakmadım ama güzel duruyor. React kullanıyorsan iş görür.
A non-serializable value was detected in the state
State içinde serileştirilemeyen bir veri bulundu, yani verdiğin veriyi muhtemelen metin haline getiremedi. localStorage'a kaydederken manuel bir şekilde metine dönüştürüp yine localStorage'dan okurken metinden istediğin veriye dönüştürürsen muhtemelen çözülür. JSON objesi bu iş için var.
window.localStorage.setItem('theme', JSON.stringify(state.theme))
/* ... */
let theme = JSON.parse(window.localStorage.getItem('theme'))
Düzenli şekilde değiştiriyorsan JWT'yi bir sıkıntı olmaz. Jetonlarına bir expiration date vermek mantıklı olabilir. Düzenli değiştirmiyorsan da yapılabilecek bir şey yok. Endüstri standardı şu anda localstorage gibi yerlerde saklamak. Güvenlik adına daha farklı şeyler yapabilirsin, 2 Factor Auth gibi.
- Bulma: Benim favori css framework'ümdür. Öğrenmesi kolay, tasarımları iyi bir kütüphane.
- Tailwind: Bunu çok kullanmadım, ama çok övülüyor. Hazır bileşenlerden çok css snippet gibi sınıf isimleri sağlıyor. Bir yerden sonra sınıf isimleri HTML içinde çok uzuyor ama hızlı geliştirme sağlıyor.
- UIKit: Bu kütüphane benim için tasarımıyla ayrı bir yerde duruyor, ama çok bir deneyimim yok.
Eğer bir arayüz kütüphanesi kullanıyorsan ui framework önerebilirim, onları daha çok kullanıyorum bu aralar.
- React
- Mui: React için standart olmuş bir kütüphane bu. Material UI tasarımından sıkıldım diyorsan da çok özelleştirilebilir bir yapısı var. Benim seçimim direkt bu olur ama öğrenmesi biraz zaman alabiliyor.
- React Desktop Masaüstü uygulama havası istiyorsan bu tarz şeyler de var.
- RSuite: Mui'dan sonraki tercihim budur. Güzel bileşenleri var, tema desteği var ve dokümantasyon çok iyi. Mui kadar kolay özelleştirilebilir değil sanırım.
- Carbon: Bu IBM'in tasarım dili için yazılmış React kütüphanesi. Tasarımını seviyorum, diğerlerinden farklı. Kullanması kolay özelleştirmesi zor ama her şey için bileşenleri var.
- Svelte
- Carbon: Az öncekinin aynısı ama svelte için yapılmış. Svelte olduğu için kullanması ekstra rahat.