Γεννήτρια άδειας χρήσης στο SvelteKit

Δημιουργία αδειών από το πακέτο σας.json

Η δημιουργία ενός αρχείου JSON από τις εξαρτήσεις σας που αναφέρονται στο αρχείο πακέτου είναι πολύ απλή. Χρησιμοποιώ μια βιβλιοθήκη που ονομάζεται αναφορά άδειας χρήσης, η οποία μειώνει αυτήν την εργασία σε μία κλήση εντολής. Απλώς πρέπει να εγκαταστήσω το πακέτο ως εξάρτηση ανάπτυξης για το έργο μου και να προσθέσω το ακόλουθο σενάριο NPM. Όπως μπορείτε να δείτε, αποθηκεύω το αρχείο που δημιουργήθηκε στον static-directory για μεταγενέστερη πρόσβαση.

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

Με κάθε κατασκευή SvelteKit

Καθώς αυτή είναι μια επαναλαμβανόμενη εργασία που πρέπει να εκτελείται πριν από κάθε ανάπτυξη για να διασφαλιστεί η τρέχουσα έξοδος, απλώς την πρόσθεσα στην εντολή build-command του NPM. Αυτή η εντολή χρησιμοποιείται επίσης από το SvelteKit, που σημαίνει ότι κάθε φορά που αναπτύσσετε μια νέα έκδοση (και επομένως δημιουργείτε μια νέα έκδοση), οι άδειες από τις εξαρτήσεις σας δημιουργούνται πριν από την πραγματική έκδοση.

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

Καταναλώνοντας τις άδειες

Τα παρακάτω αποσπάσματα κώδικα δείχνουν μια πραγματική χρήση που εφάρμοσα για το spikze.club. Ένας σύνδεσμος προς το repo είναι επίσης διαθέσιμος στο προσάρτημα στο τέλος αυτής της σελίδας. Απλώς ανακτώ τα δεδομένα σε ένα στοιχείο. Χάρη στο SvelteKit, τα δεδομένα ενσωματώνονται με την ανάκτηση στοιχείων. Στη συνέχεια, το αποτέλεσμα μεταβιβάζεται σε μια προβολή λίστας.

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