Insightcn

Svelte

Use Insightcn in Svelte applications.

Setup

Install insightcn:

npm install insightcn

Usage

<script>
  import { captureRegistryEvent } from "@insightcn/sdk";

  async function handleInstall() {
    const request = new Request("https://your-registry.com/r/ui/button.json", {
      method: "GET",
      headers: { "user-agent": "node-fetch" },
    });

    await captureRegistryEvent(request, "your-api-key", "installed");
  }
</script>

<button on:click={handleInstall}>Install Button</button>

Store

You can create a store for reusable tracking:

// lib/registry-tracker.ts
import { writable } from "svelte/store";
import { captureRegistryEvent, generateRegistryRssFeed } from "@insightcn/sdk";

export function createRegistryTracker(apiKey: string) {
  const trackEvent = async (
    registryUrl: string,
    type: "installed" | "viewed" | "downloaded" = "installed"
  ) => {
    const request = new Request(registryUrl, {
      method: "GET",
      headers: { "user-agent": "node-fetch" },
    });

    await captureRegistryEvent(request, apiKey, type);
  };

  const generateRss = async (
    options: Parameters<typeof generateRegistryRssFeed>[0]
  ) => {
    return generateRegistryRssFeed(options);
  };

  return { trackEvent, generateRss };
}

Usage in Component

<script>
  import { createRegistryTracker } from "./lib/registry-tracker";

  const tracker = createRegistryTracker("your-api-key");

  async function handleInstall() {
    await tracker.trackEvent("https://your-registry.com/r/ui/button.json");
  }

  async function handleGenerateRss() {
    const rss = await tracker.generateRss({
      baseUrl: "https://your-registry.com",
      rss: {
        title: "My Shadcn Registry",
        description: "Custom components for shadcn/ui",
      },
    });

    console.log(rss);
  }
</script>

<button on:click={handleInstall}>Install Button</button>
<button on:click={handleGenerateRss}>Generate RSS</button>

On this page