Svelte - ここからどこへ行く?

基礎

ここ数年、svelte について多くのファズを聞いてきたので、svelte について少し学ぶことを楽しみにしていました. Web プロジェクトを作成するという大学の課題があり、私のグループはそれを svelte で行うことにしました.
最初は、新しいものを簡単に作成できることと、アプリケーションの構築速度に非常に感激しました.
大学の分野の MVP を終えた後、私はいくつかの質問を残しました.私はこれを開発するのがちょっと急いでいたので、あなたの意見を受け取りたいと思っていますが、それに戻って適切にコーディングしたいと思っています! :)

コンポーネントを適切に拡張するには?

最初に私を驚かせたのは、コンポーネントを適切に拡張し、構造の大部分を活用する方法でした.私が作成したプロジェクトにはいくつかのフォームが含まれており、フォーム グループ入力をフォームに簡単に追加できるように、入力用のコンポーネントを作成するパターンに慣れていました. svelte では、次のようなコンポーネントを作成できないようです.

<script>
    export let type = 'text';
    export let label;
</script>
<div>
    <span>{label}</span>
    <input {type} />
</div>

私が得ているエラー/警告は、ここで型を動的にすることはできないということです.私が取ったアプローチは、それをより速く完了するためだけに、使用しなければならなかった各タイプのコンポーネントを作成することでしたが、これは悪いように聞こえました.ひどい.この時点で、各入力でスパン/入力構造を再作成する方が簡単でした.

認証ストアとユーザー

API 呼び出しで認証を証明するために使用されるベアラー トークンを保存するために、writable を使用してストアを作成しました.このプロジェクトでは、認証用に 1 つ、ユーザー データ用にもう 1 つ作成しました.ユーザーデータには、これまで他の情報が必要なかったという理由だけで、現在ロールのみが含まれています.彼らは次のように見えました:auth.js

import user from './user';
import { writable } from 'svelte/store'
const { subscribe, set } = writable(localStorage.getItem('token'));

const logout = () => {
    set(null);
    localStorage.removeItem('token');
    user.resetUserRole();
}

const update = (newToken) => {
    localStorage.setItem('token', newToken);
    set(newToken);
    user.populateUserData();
}

export default {
    subscribe, logout, update
}

user.js

import { writable } from 'svelte/store'
import auth from './auth'
import { userConnector } from '../backend-connector';

const { subscribe, set } = writable(localStorage.getItem('role'))

const resetUserRole = () => {
    set(null);
    localStorage.removeItem('role');
}

const updateUserRole = (newRole) => {
    localStorage.setItem('role', newRole);
    set(newRole);
}

const populateUserData = () => {
    userConnector.getUserData().then((response) => {
        if (response.ok) {
            response.json().then((data) => {
                updateUserRole(data.roles.map((role) => role.name));
            });
        } else {
            auth.logout();
        }
    }).catch(() => {
        auth.logout();
    });
}

export default {
    subscribe, resetUserRole, updateUserRole, populateUserData
}

await の代わりに使用される .then() 構造が使用されたのは、同僚に promise の仕組みを教えていて、より洗練された await 構文に変更するのを忘れたからです.populateUserData メソッドの目的は、ユーザーがログインまたはシステムに入るたびにユーザー情報を更新し、localStorage との一貫性を維持して、ユーザーがタブを終了して再度入力するたびに保持されるようにすることでした.結果は気に入りましたが、svelte/store get メソッドを使用して任意のストアのコンテンツを読み取るのは非常に簡単でしたが、この構造をどのように配置するのか知りたいです!

ルート上のロールガード

そのためのプラットフォーム コンポーネントがないため、システム上での役割に基づいて、いくつかのルートへのガードを表す構造を作成しようとしました.次のように見えました.

<script>
    import { Route } from 'svelte-navigator';
    import auth from '../../store/auth';
    import user from '../../store/user';

    export let path;
    export let componentToRoleMapping;

    $: isAuthenticated = $auth;
    $: role = $user;
</script>

{#if isAuthenticated && componentToRoleMapping[role] != null}
    <Route path={path} component={componentToRoleMapping[role]} />
{:else}
    <Route path={path} component={componentToRoleMapping['ELSE']} />
{/if}

componentToRoleMapping オブジェクトは次のようになります.

let feedComponentToRoleMapping = {
     'DONOR': DonorFeed,
     'ADMIN': AdminFeed,
     'ELSE': Login
}

これを改善する方法はありますか?それはかなり正しいと感じましたが、何かが欠けているように感じました.

最終的な考え

Svelte は学ぶのに適したフレームワークでした.改善の余地がたくさんあるように感じますが、ゼロからヒーローにコーディングする最も簡単な方法の 1 つでした.官僚主義はほぼゼロで、近道がたくさんあります.このコードを改善する方法についてご意見がありましたら、および/またはテクノロジについてさらに学ぶための資料をお持ちでしたら、ぜひご覧ください.