SvelteKit'te lisans oluşturucu

Sizin için bir bağımlılık listesi oluşturun SvelteKit-project

package.json dosyanızdan lisans oluşturma

Paket dosyasında listelenen bağımlılıklarınızdan bir JSON dosyası oluşturmak gerçekten basittir. Bu görevi tek bir komut çağrısına indirgeyen lisans raporu adlı bir kitaplık kullanıyorum. Paketi projem için bir geliştirme bağımlılığı olarak kurmam ve aşağıdaki NPM betiğini eklemem gerekiyor. Gördüğünüz gibi oluşturulan dosyayı daha sonra erişim için statik dizine kaydediyorum.

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

Her SvelteKit yapısıyla

Bu, geçerli bir çıktı sağlamak için her dağıtımdan önce yapılması gereken tekrarlayan bir görev olduğundan, onu NPM'nin oluşturma komutuna ekledim. Bu komut aynı zamanda SvelteKit tarafından da kullanılır; bu, yeni bir sürüm dağıttığınızda (ve dolayısıyla yeni bir yapı oluşturduğunuzda), bağımlılıklarınızdaki lisansların gerçek derlemeden önce oluşturulduğu anlamına gelir.

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

Lisansları tüketmek

Aşağıdaki kod parçacıkları, spikze.club için uyguladığım gerçek dünya kullanımını göstermektedir. Bu sayfanın sonundaki ekte depoya bir bağlantı da mevcuttur. Ben sadece bir bileşendeki verileri getiriyorum. SvelteKit sayesinde, veriler bileşen getirme işlemiyle hizalanır. Sonuç daha sonra bir liste görünümüne iletilir.

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