Licencgenerátor a SvelteKitben

Licencek generálása a package.json fájlból

A csomagfájlban felsorolt függőségekből JSON-fájl létrehozása nagyon egyszerű. Licenc-jelentés nevű könyvtárat használok, amely ezt a feladatot egyetlen parancshívásra redukálja. Csak telepítenem kell a csomagot a projektem fejlesztési függőségeként, és hozzáadnom kell a következő NPM-szkriptet. Amint látja, a létrehozott fájlt a static-könyvtárba mentem későbbi eléréshez.

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

Minden SvelteKit összeállítással

Mivel ez egy ismétlődő feladat, amelyet minden telepítés előtt el kell végezni az aktuális kimenet biztosítása érdekében, egyszerűen hozzáadtam az NPM build-parancsához. Ezt a parancsot a SvelteKit is használja, ami azt jelenti, hogy amikor új verziót telepít (és ezért új buildet hoz létre), a függőségekből származó licencek a tényleges build előtt generálódnak.

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

A licencek fogyasztása

A következő kódrészletek egy valós használatot mutatnak be, amelyet a spikze.club számára implementáltam. A repóra mutató hivatkozás is elérhető az oldal végén található mellékletben. Egyszerűen lekérem az adatokat egy komponensben. A SvelteKitnek köszönhetően az adatok beépülnek az összetevők lekéréséhez. Az eredmény ezután egy listanézetbe kerül.

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