Генератор лицензий в SvelteKit

Генерация лицензий из вашего package.json

Создать JSON-файл из ваших зависимостей, перечисленных в файле пакета, очень просто. Я использую библиотеку под названием license-report, которая сводит эту задачу к одному вызову команды. Мне просто нужно установить пакет в качестве зависимости разработки для моего проекта и добавить следующий NPM-скрипт. Как видите, я сохраняю созданный файл в статическом каталоге для последующего доступа.

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

С каждой сборкой SvelteKit

Поскольку это повторяющаяся задача, которую необходимо выполнять перед каждым развертыванием, чтобы обеспечить текущий результат, я просто добавил ее в команду сборки NPM. Эта команда также используется SvelteKit, что означает, что всякий раз, когда вы развертываете новую версию (и, следовательно, создаете новую сборку), лицензии из ваших зависимостей генерируются до фактической сборки.

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

Использование лицензий

Следующие фрагменты кода показывают реальное использование, которое я реализовал для spikze.club. Ссылка на репозиторий также доступна в приложении в конце этой страницы. Я просто извлекаю данные из компонента. Благодаря 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>