Licencgeneratoro en SvelteKit

Generante permesilojn de via package.json

Krei JSON-dosieron el viaj dependecoj listigitaj en la pakdosiero estas vere simpla. Mi uzas bibliotekon nomatan permesilo-raporto, kiu reduktas ĉi tiun taskon al ununura komandvoko. Mi nur devas instali la pakaĵon kiel evoluan dependecon por mia projekto kaj aldonis la sekvan NPM-skripton. Kiel vi povas vidi, mi konservas la kreitan dosieron en la statika dosierujo por posta aliro.

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

Kun ĉiu SvelteKit-konstruaĵo

Ĉar ĉi tio estas ripetema tasko, kiu devas esti farita antaŭ ĉiu deplojo por certigi aktualan eliron, mi simple aldonis ĝin al la konstrukomando de NPM. Ĉi tiu komando ankaŭ estas uzata de SvelteKit, kio signifas kiam ajn vi deplojas novan version (kaj do kreas novan konstruaĵon), la permesiloj de viaj dependecoj estas generitaj antaŭ la reala konstruo.

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

Konsumante la permesilojn

La sekvaj kodaj fragmentoj montras realan mondan uzadon, kiun mi efektivigis por spikze.club. Ligilo al la deponejo ankaŭ haveblas en la aldono ĉe la fino de ĉi tiu paĝo. Mi simple prenas la datumojn en komponanto. Dank'al SvelteKit, la datumoj iĝas aligitaj kun la komponanto. La rezulto tiam estas pasita al listvido.

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