SvelteKitのライセンスジェネレータ
SvelteKitプロジェクトの依存関係のリストを作成します
Tom • Svelte&SvelteKit, コーディングガイド, 学習 •
package.jsonからライセンスを生成する
パッケージファイルにリストされている依存関係からJSONファイルを作成するのは本当に簡単です。私はlicense-reportというライブラリを使用しています。これにより、このタスクが1回のコマンド呼び出しになります。プロジェクトの開発依存関係としてパッケージをインストールし、次のNPMスクリプトを追加するだけです。ご覧のとおり、作成したファイルを後でアクセスできるようにstatic-directoryに保存します。
{
"dep:gen": "license-report --output=json > ./static/licenses.json"
}
すべてのSvelteKitビルドで
これは、現在の出力を確保するためにすべてのデプロイの前に実行する必要がある反復的なタスクであるため、NPMのビルドコマンドに追加しただけです。このコマンドはSvelteKitでも使用されます。つまり、新しいバージョンをデプロイする(したがって、新しいビルドを作成する)たびに、依存関係からのライセンスが実際のビルドの前に生成されます。
ライセンスの消費
次のコードスニペットは、spikze.clubに実装した実際の使用法を示しています。リポジトリへのリンクは、このページの最後にある補遺にもあります。コンポーネント内のデータをフェッチするだけです。 SvelteKitのおかげで、データはコンポーネントフェッチにインライン化されます。次に、結果がリストビューに渡されます。
//
// licenses.svelte
//
<script lang="ts" context="module">
import type { Load } from "@sveltejs/kit";
export const prerender = true;
export const fetch: Load = async () => ({
status: 200,
maxage: 60 * 60 * 24
});
</script>
<script lang="ts">
import PageLayout from "$lib/layout/views/PageLayout.svelte";
import SectionLayout from "$lib/layout/views/SectionLayout.svelte";
import LicenseList from "$lib/license/views/LicenseList.svelte";
import type { ExportedLicense } from "$lib/license/types";
import DisplayGrid from "$lib/display/views/DisplayGrid.svelte";
import DisplayGridItem from "$lib/display/views/DisplayGridItem.svelte";
import DisplaySingularCarouselTitle from "$lib/display/views/DisplaySingularCarouselTitle.svelte";
import DisplayGridItemCarousel from "$lib/display/views/DisplayGridItemCarousel.svelte";
export let licenses: ExportedLicense[];
</script>
<PageLayout>
<SectionLayout>
<DisplayGrid slot="header" variant="2/1">
<div class="col-span-2">
<DisplayGridItem>
<DisplayGridItemCarousel
withRandomInitialDirection
countItems={3}
withInitialDelay={750}
withRandomSeedInitialDelay={1500}
>
<DisplaySingularCarouselTitle slot="0" label="Licenses" />
<DisplaySingularCarouselTitle slot="1" label={`${licenses.length} in total`} />
<DisplaySingularCarouselTitle slot="2" label="spikze.club" />
</DisplayGridItemCarousel>
</DisplayGridItem>
</div>
</DisplayGrid>
</SectionLayout>
<SectionLayout>
<LicenseList {licenses} />
</SectionLayout>
</PageLayout>
//
// licenses.ts
//
import type { EndpointOutput } from "@sveltejs/kit";
import licenses from "../../../static/licenses.json";
export async function get(): Promise<EndpointOutput> {
// const url = "/licenses.json"; // "https://spikze.club/licenses.json"
// const licenses = await fetch(url).then((response) => response.json());
if (licenses) {
return {
body: { licenses }
};
}
return {
status: 500
};
}
//
// LicenseList.svelte
//
<script lang="ts">
import type { ExportedLicense } from "../types";
export let licenses: ExportedLicense[];
</script>
<ul>
{#each licenses as l}
<li>
<a
href={l.link.replace("git+", "").replace(".git", "")}
alt={`License for ${l.name}`}
rel="external"
target="_blank"
>
<div class="hover:text-slate-400 duration-200 ease-in-out py-3">
<strong>
{l.name}
</strong>
by
<strong>{l.author}</strong>
</div>
</a>
</li>
{/each}
</ul>
行動
Feedback
提案された投稿