@zeno-cms/sdk 1.0.0 → 1.0.2

package/README.md

@@ -202,56 +202,172 @@ if (error) {
 }
 ```
 
-## Framework Examples
+## Framework Integrations
 
-### React with TanStack Query
+Built-in hooks, composables, stores and signals for every major framework — zero external dependencies.
+
+### React
+
+```tsx
+// main.tsx — Setup provider once
+import { ZenoProvider } from '@zeno-cms/sdk/react'
+
+createRoot(document.getElementById('root')!).render(
+  <ZenoProvider apiKey={import.meta.env.VITE_ZENO_API_KEY}>
+    <App />
+  </ZenoProvider>
+)
+```
+
+```tsx
+// components/BlogList.tsx — Use hooks
+import { useEntries } from '@zeno-cms/sdk/react'
+
+export function BlogList() {
+  const { data: posts, isLoading, error } = useEntries('blog', {
+    status: 'published'
+  })
+
+  if (isLoading) return <p>Loading...</p>
+  if (error) return <p>Error: {error}</p>
+
+  return posts?.map(post => (
+    <article key={post.id}>
+      <h2>{post.data.title}</h2>
+    </article>
+  ))
+}
+```
+
+Available hooks: `useEntries`, `useEntry`, `useCollections`, `useCollection`, `useAssets`, `useAssetUrl`, `useProject`, `useLocales`, `useZeno`
+
+### Vue
 
 ```typescript
-import { useQuery } from '@tanstack/react-query'
-import { ZenoCMS } from '@zeno-cms/sdk'
+// main.ts — Setup plugin once
+import { createZeno } from '@zeno-cms/sdk/vue'
 
-const zeno = new ZenoCMS()
+app.use(createZeno({
+  apiKey: import.meta.env.VITE_ZENO_API_KEY
+}))
+```
 
-export function usePosts() {
-  return useQuery({
-    queryKey: ['posts'],
-    queryFn: async () => {
-      const { data, error } = await zeno.getEntries('blog', {
-        status: 'published'
-      })
-      if (error) throw new Error(error)
-      return data ?? []
-    }
+```vue
+<!-- components/BlogList.vue -->
+<script setup>
+import { useEntries } from '@zeno-cms/sdk/vue'
+
+const { data: posts, loading } = useEntries('blog', {
+  status: 'published'
+})
+</script>
+
+<template>
+  <p v-if="loading">Loading...</p>
+  <article v-for="post in posts" :key="post.id">
+    <h2>{{ post.data.title }}</h2>
+  </article>
+</template>
+```
+
+Available composables: `useEntries`, `useEntry`, `useCollections`, `useCollection`, `useAssets`, `useLocales`, `useZeno`
+
+### Svelte
+
+```svelte
+<!-- +layout.svelte — Setup once -->
+<script lang="ts">
+  import { initZeno } from '@zeno-cms/sdk/svelte'
+  let { children } = $props()
+
+  initZeno({ apiKey: import.meta.env.VITE_ZENO_API_KEY })
+</script>
+
+{@render children()}
+```
+
+```svelte
+<!-- components/BlogList.svelte -->
+<script>
+  import { useEntries } from '@zeno-cms/sdk/svelte'
+
+  const { data: posts, loading, error } = useEntries('blog', {
+    status: 'published'
   })
+</script>
+
+{#if $loading}
+  <p>Loading...</p>
+{:else}
+  {#each $posts ?? [] as post}
+    <article>
+      <h2>{post.data.title}</h2>
+    </article>
+  {/each}
+{/if}
+```
+
+Available stores: `useEntries`, `useEntry`, `useCollections`, `useCollection`, `useAssets`, `useAssetUrl`, `useProject`, `useLocales`, `useZeno`
+
+### Angular
+
+```typescript
+// app.config.ts — Setup provider once
+import { provideZeno } from '@zeno-cms/sdk/angular'
+
+export const appConfig = {
+  providers: [
+    provideZeno({ apiKey: environment.zenoApiKey })
+  ]
 }
 ```
 
-### Next.js App Router
+```typescript
+// components/blog-list.component.ts
+import { Component } from '@angular/core'
+import { useEntries } from '@zeno-cms/sdk/angular'
+
+@Component({
+  selector: 'app-blog-list',
+  template: `
+    @if (posts.loading()) { <p>Loading...</p> }
+    @for (post of posts.data(); track post.id) {
+      <article>
+        <h2>{{ post.data.title }}</h2>
+      </article>
+    }
+  `
+})
+export class BlogListComponent {
+  posts = useEntries('blog', { status: 'published' })
+}
+```
+
+Available signals: `useEntries`, `useEntry`, `useCollections`, `useCollection`, `useAssets`, `useAssetUrl`, `useProject`, `useLocales`, `injectZeno`
+
+### Next.js (Server Components)
 
 ```typescript
-// app/blog/page.tsx
+// app/blog/page.tsx — Server-side, no hooks needed
 import { ZenoCMS } from '@zeno-cms/sdk'
 
 const zeno = new ZenoCMS()
 
 export default async function BlogPage() {
   const { data: posts } = await zeno.getEntries('blog', {
-    status: 'published',
-    locale: 'en'
+    status: 'published'
   })
 
-  return (
-    <main>
-      {posts?.map(post => (
-        <article key={post.id}>
-          <h2>{post.data.title as string}</h2>
-        </article>
-      ))}
-    </main>
-  )
+  return posts?.map(post => (
+    <article key={post.id}>
+      <h2>{post.data.title as string}</h2>
+    </article>
+  ))
 }
 ```
 
+For Client Components, use `ZenoProvider` + hooks from `@zeno-cms/sdk/react`.
+
 ### Astro
 
 ```astro
@@ -328,7 +444,9 @@ If the allowed domains list is empty, requests are accepted from any origin.
 The SDK automatically detects and reads the API key from:
 
 - **Node.js**: `process.env.ZENO_API_KEY`
-- **Vite/Astro**: `import.meta.env.ZENO_API_KEY`
+- **Next.js (client)**: `process.env.NEXT_PUBLIC_ZENO_API_KEY`
+- **Vite / React / Vue / Svelte**: `import.meta.env.VITE_ZENO_API_KEY`
+- **Astro**: `import.meta.env.PUBLIC_ZENO_API_KEY`
 - **Browser**: Pass directly via `new ZenoCMS({ apiKey: '...' })`
 
 ## TypeScript
@@ -338,13 +456,19 @@ Full TypeScript support with exported types:
 ```typescript
 import {
   ZenoCMS,
+  ZenoConfig,
   ZenoResponse,
   Collection,
   Entry,
   Asset,
+  AssetUrl,
   Locale,
+  Project,
+  Field,
+  HealthStatus,
   PaginationParams,
-  FilterParams
+  FilterParams,
+  EmailParams
 } from '@zeno-cms/sdk'
 ```
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeno-cms/sdk",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Official SDK for Zeno CMS - Fetch content, manage assets, send emails and more",
   "main": "dist/index.js",
   "module": "dist/index.mjs",