Shiki anotations usage examples

Hello World

The simplest possible example:

import { initialize } from "our-package"; 

// Initialize
const app = initialize({
  apiKey: "your-api-key",
  environment: "development",
}); 

// Make your first call
const result = await app.getData(); 
console.log("Hello World:", result); 

---

Fetching Data

Retrieve data with filtering and pagination:

const activeItems = await app.getData({
  limit: 10,
  filter: { status: "active" },
}); 

console.log(`Found ${activeItems.length} active items`);

const nextPage = await app.getData({
  limit: 10,
  offset: 10,
  filter: { status: "active" },
});

---

Creating Data

Create new entries:

const newItem = await app.createData({
  name: "My First Item",
  description: "This is a test item",
  category: "example",
  tags: ["test", "demo"],
}); 

console.log("Created item:", newItem.id);

const items = [
  { name: "Item 1", category: "type-a" },
  { name: "Item 2", category: "type-b" },
  { name: "Item 3", category: "type-a" },
];

for (const item of items) {
  await app.createData(item);
}

---

Updating Data

Update existing entries:

await app.updateData("item-123", {
  status: "active",
  status: "completed",
});

await app.updateData("item-456", {
  name: "Updated Name",
  description: "Updated description",
  lastModified: new Date(),
});

---

Error Handling

Handle errors gracefully:

try {
  const data = await app.getData(); 
  console.log("Success:", data); 
} catch (error) {
  if (error.code === "AUTH_REQUIRED") {
    console.error("Please check your API key"); 
  } else if (error.code === "RATE_LIMITED") {
    console.error("Too many requests, please wait"); 
  } else {
    console.error("Unexpected error:", error.message); 
  } 
} 

---

Working with Filters

Advanced filtering examples:

const searchResults = await app.getData({
  filter: {
    name: { contains: "search term" },
  },
});

const recentItems = await app.getData({
  filter: {
    createdAt: {
      gte: new Date("2024-01-01"),
      lte: new Date("2024-12-31"),
    },
  },
});

const complexFilter = await app.getData({
  filter: {
    status: "active",
    category: { in: ["type-a", "type-b"] },
    priority: { gte: 5 },
  },
});

---

Before and After Example

Show what changes when refactoring:

// Old way
const oldConfig = {
  apiEndpoint: "https://api.old.com",
  timeout: 5000,
  retries: 3,
}; 

// New way
const newConfig = {
  baseURL: "https://api.new.com/v2",
  timeout: 10000,
  retries: 5,
  cache: true,
}; 

---

CSS Example (using JavaScript syntax for highlighting)

Since Shiki annotations don’t work well with CSS, we use JS syntax:

// Before
"@tailwind base;"; 
"@tailwind components;"; 
"@tailwind utilities;"; 

// After
"@import 'tailwindcss';";