Generador de licencias en SvelteKit

Generando licencias desde su paquete.json

Crear un archivo JSON a partir de las dependencias enumeradas en el archivo del paquete es realmente simple. Estoy usando una biblioteca llamada informe de licencia, que reduce esta tarea a una sola llamada de comando. Solo tengo que instalar el paquete como una dependencia de desarrollo para mi proyecto y agregar el siguiente script NPM. Como puede ver, guardo el archivo creado en el directorio estático para acceder más tarde.

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

Con cada compilación de SvelteKit

Como esta es una tarea repetitiva que debe realizarse antes de cada implementación para garantizar un resultado actual, simplemente la agregué al comando de compilación de NPM. SvelteKit también usa este comando, lo que significa que cada vez que implementa una nueva versión (y, por lo tanto, crea una nueva compilación), las licencias de sus dependencias se generan antes de la compilación real.

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

Consumir las licencias

Los siguientes fragmentos de código muestran un uso real que implementé para spikze.club. Un enlace al repositorio también está disponible en el apéndice al final de esta página. Simplemente busco los datos en un componente. Gracias a SvelteKit, los datos se alinean con la búsqueda del componente. Luego, el resultado se pasa a una vista de lista.

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