Svelte
Use Insightcn in Svelte applications.
Setup
Install insightcn:
npm install insightcnUsage
<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>