SvelteKitのライセンスジェネレータ

SvelteKitプロジェクトの依存関係のリストを作成します

Tom • Svelte＆SvelteKit, コーディングガイド, 学習 • 09 03 2022

package.jsonからライセンスを生成する

パッケージファイルにリストされている依存関係からJSONファイルを作成するのは本当に簡単です。私はlicense-reportというライブラリを使用しています。これにより、このタスクが1回のコマンド呼び出しになります。プロジェクトの開発依存関係としてパッケージをインストールし、次のNPMスクリプトを追加するだけです。ご覧のとおり、作成したファイルを後でアクセスできるようにstatic-directoryに保存します。

{
  "dep:gen": "license-report --output=json > ./static/licenses.json"
}

jsonLanguageCheck out all coding posts

すべてのSvelteKitビルドで

これは、現在の出力を確保するためにすべてのデプロイの前に実行する必要がある反復的なタスクであるため、NPMのビルドコマンドに追加しただけです。このコマンドはSvelteKitでも使用されます。つまり、新しいバージョンをデプロイする（したがって、新しいビルドを作成する）たびに、依存関係からのライセンスが実際のビルドの前に生成されます。

{
  "build": "npm run dep:gen && svelte-kit build",
}

jsonLanguageCheck out all coding posts

ライセンスの消費

次のコードスニペットは、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>

textLanguageCheck out all coding posts

//
// 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
  };
}

textLanguageCheck out all coding posts

//
// 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>