Lizenzgenerator in SvelteKit

Generieren von Lizenzen aus Ihrer package.json

Das Erstellen einer JSON-Datei aus Ihren Abhängigkeiten, die in der Paketdatei aufgeführt sind, ist wirklich einfach. Ich verwende eine Bibliothek namens „license-report“, die diese Aufgabe auf einen einzigen Befehlsaufruf reduziert. Ich muss das Paket nur als Entwicklungsabhängigkeit für mein Projekt installieren und das folgende NPM-Skript hinzufügen. Wie Sie sehen können, speichere ich die erstellte Datei im statischen Verzeichnis für den späteren Zugriff.

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

Mit jedem SvelteKit-Build

Da dies eine sich wiederholende Aufgabe ist, die vor jedem Deployment durchgeführt werden muss, um eine aktuelle Ausgabe sicherzustellen, habe ich sie einfach dem Build-Befehl von NPM hinzugefügt. Dieser Befehl wird auch von SvelteKit verwendet, was bedeutet, dass immer, wenn Sie eine neue Version bereitstellen (und daher einen neuen Build erstellen), die Lizenzen aus Ihren Abhängigkeiten vor dem eigentlichen Build generiert werden.

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

Verbrauchen der Lizenzen

Die folgenden Codeschnipsel zeigen eine reale Nutzung, die ich für spikze.club implementiert habe. Ein Link zum Repo ist auch im Anhang am Ende dieser Seite verfügbar. Ich hole die Daten einfach in einer Komponente ab. Dank SvelteKit werden die Daten in den Komponentenabruf eingebunden. Das Ergebnis wird dann an eine Listenansicht übergeben.

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