מחולל רישיונות ב-SvelteKit

יצירת רישיונות מה-package.json שלך

יצירת קובץ JSON מהתלות שלך הרשומה בקובץ החבילה היא ממש פשוטה. אני משתמש בספרייה בשם license-report, שמצמצמת את המשימה הזו לקריאת פקודה אחת. אני רק צריך להתקין את החבילה כתלות בפיתוח עבור הפרויקט שלי והוספתי את ה-NPM-script הבא. כפי שאתה יכול לראות, אני שומר את הקובץ שנוצר בספרייה הסטטית לגישה מאוחרת יותר.

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

עם כל בניית SvelteKit

מכיוון שזו משימה שחוזרת על עצמה שיש לבצע לפני כל פריסה כדי להבטיח פלט נוכחי, פשוט הוספתי אותה לפקודה build של 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>