Generatore di licenze in SvelteKit

Crea un elenco di dipendenze per il tuo progetto SvelteKit

Generazione di licenze dal tuo package.json

La creazione di un file JSON dalle dipendenze elencate nel file del pacchetto è davvero semplice. Sto usando una libreria chiamata report-licenza, che riduce questa attività a una singola chiamata di comando. Devo solo installare il pacchetto come dipendenza di sviluppo per il mio progetto e aggiungere il seguente script NPM. Come puoi vedere, salvo il file creato nella directory statica per un accesso successivo.

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

Con ogni build SvelteKit

Poiché si tratta di un'attività ripetitiva che deve essere eseguita prima di ogni distribuzione per garantire un output corrente, l'ho semplicemente aggiunto al comando di build di NPM. Questo comando viene utilizzato anche da SvelteKit, il che significa che ogni volta che distribuisci una nuova versione (e quindi crei una nuova build), le licenze delle tue dipendenze vengono generate prima della build effettiva.

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

Consumare le licenze

I seguenti frammenti di codice mostrano un utilizzo nel mondo reale che ho implementato per spikze.club. Un collegamento al repository è disponibile anche nell'addendum alla fine di questa pagina. Prendo semplicemente i dati in un componente. Grazie a SvelteKit, i dati vengono allineati con il recupero dei componenti. Il risultato viene quindi passato a una visualizzazione elenco.

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

Suggerimenti

Correlati

Addendum