Générateur de licence dans SvelteKit

Génération de licences à partir de votre package.json

La création d'un fichier JSON à partir de vos dépendances répertoriées dans le fichier de package est très simple. J'utilise une bibliothèque appelée license-report, qui réduit cette tâche à un seul appel de commande. Je dois juste installer le package en tant que dépendance de développement pour mon projet et ajouter le script NPM suivant. Comme vous pouvez le voir, j'enregistre le fichier créé dans le répertoire statique pour un accès ultérieur.

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

Avec chaque version de SvelteKit

Comme il s'agit d'une tâche répétitive qui doit être effectuée avant chaque déploiement pour garantir une sortie actuelle, je l'ai simplement ajoutée à la commande build de NPM. Cette commande est également utilisée par SvelteKit, ce qui signifie que chaque fois que vous déployez une nouvelle version (et donc créez un nouveau build), les licences de vos dépendances sont générées avant le build réel.

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

Consommer les licences

Les extraits de code suivants montrent une utilisation réelle que j'ai implémentée pour spikze.club. Un lien vers le référentiel est également disponible dans l'addendum à la fin de cette page. Je récupère simplement les données dans un composant. Grâce à SvelteKit, les données sont alignées avec la récupération du composant. Le résultat est ensuite transmis à une vue de liste.

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