منشئ الترخيص في SvelteKit

إنشاء التراخيص من package.json الخاص بك

يعد إنشاء ملف JSON من التبعيات المدرجة في ملف الحزمة أمرًا بسيطًا حقًا. أستخدم مكتبة تسمى تقرير الترخيص ، والتي تقلل هذه المهمة إلى استدعاء أمر واحد. عليّ فقط تثبيت الحزمة باعتبارها تبعية تطوير لمشروعي وإضافة البرنامج النصي التالي NPM. كما ترى ، أقوم بحفظ الملف الذي تم إنشاؤه في الدليل الثابت للوصول إليه لاحقًا.

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

مع كل بناء من SvelteKit

نظرًا لأن هذه مهمة متكررة يجب إجراؤها قبل كل عملية نشر لضمان وجود مخرجات حالية ، فقد أضفتها ببساطة إلى أمر build NPM الخاص بـ 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>