chore: replace js-client with new api client

Author: dipankarmaikap

packages/angular/package.json

@@ -34,9 +34,9 @@
     "@angular/router": "^21.1.0",
     "@angular/ssr": "^21.1.2",
     "@storyblok/live-preview": "workspace:*",
-    "storyblok-js-client": "workspace:*",
     "@storyblok/richtext": "workspace:*",
     "@storyblok/js": "workspace:*",
+    "@storyblok/api-client": "workspace:*",
     "express": "^5.1.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0"

packages/angular/projects/sdk/ng-package.json

@@ -5,10 +5,9 @@
     "entryFile": "src/public-api.ts"
   },
   "allowedNonPeerDependencies": [
-    "storyblok-js-client",
     "@storyblok/live-preview",
     "@storyblok/richtext",
     "@storyblok/js",
-    "@storyblok/preview-bridge"
+    "@storyblok/api-client"
   ]
 }

packages/angular/projects/sdk/package.json

@@ -26,9 +26,9 @@
   "dependencies": {
     "tslib": "^2.8.1",
     "@storyblok/live-preview": "workspace:*",
-    "storyblok-js-client": "workspace:*",
     "@storyblok/richtext": "workspace:*",
-    "@storyblok/js": "workspace:*"
+    "@storyblok/js": "workspace:*",
+    "@storyblok/api-client": "workspace:*"
   },
   "sideEffects": false
 }

packages/angular/projects/sdk/project.json

@@ -9,8 +9,8 @@
   },
   "implicitDependencies": [
     "live-preview",
-    "storyblok-js-client",
     "richtext",
-    "js"
+    "js",
+    "api-client"
   ]
 }

packages/angular/projects/sdk/src/lib/storyblok.feature.ts

@@ -1,12 +1,11 @@
-import { ISbConfig } from 'storyblok-js-client';
 import { StoryblokFeature } from './components.feature';
 import {
   EnvironmentProviders,
   inject,
   makeEnvironmentProviders,
   provideAppInitializer,
 } from '@angular/core';
-import { STORYBLOK_CONFIG, StoryblokService } from './storyblok.service';
+import { STORYBLOK_CONFIG, StoryblokClientConfig, StoryblokService } from './storyblok.service';
 
 /**
  * Provides Storyblok configuration at the application level.
@@ -34,7 +33,7 @@ import { STORYBLOK_CONFIG, StoryblokService } from './storyblok.service';
  * ```
  */
 export function provideStoryblok(
-  config: ISbConfig,
+  config: StoryblokClientConfig,
   ...features: StoryblokFeature[]
 ): EnvironmentProviders {
   return makeEnvironmentProviders([

packages/angular/projects/sdk/src/lib/storyblok.service.ts

@@ -1,75 +1,35 @@
 import { Injectable, InjectionToken } from '@angular/core';
-import StoryblokClient, {
-  type ISbConfig,
-  type ISbStoryData,
-  type ISbStoriesParams,
-} from 'storyblok-js-client';
+import type { ContentApiClientConfig } from '@storyblok/api-client';
+import { createApiClient } from '@storyblok/api-client';
 
-/**
- * Injection token for Storyblok configuration
- */
-export const STORYBLOK_CONFIG = new InjectionToken<ISbConfig>('STORYBLOK_CONFIG');
-
-/**
- * Core service for interacting with the Storyblok API.
- * Provides methods for fetching stories and integrating with the Visual Editor.
- *
- * @example
- * ```typescript
- * export class MyComponent {
- *   private storyblok = inject(StoryblokService);
- *
- *   async loadContent() {
- *     const story = await this.storyblok.getStory('home');
- *   }
- * }
- * ```
- */
+export type StoryblokClientConfig = ContentApiClientConfig<boolean, boolean>;
+export const STORYBLOK_CONFIG = new InjectionToken<StoryblokClientConfig>('STORYBLOK_CONFIG');
+type StoryblokClient = ReturnType<typeof createApiClient>;
 @Injectable({
   providedIn: 'root',
 })
 export class StoryblokService {
-  private storyblok: StoryblokClient | null = null;
+  private client: StoryblokClient | null = null;
   private initialized = false;
 
   /**
-   * @internal
-   * Initialize Storyblok SDK with the provided configuration.
-   * This is called automatically by `provideStoryblok()`.
+   * Initialize Storyblok API client with config
    */
-  /** @internal */
-  ɵinit(config: ISbConfig): void {
-    if (this.initialized) {
-      return;
-    }
-    const storyblok = new StoryblokClient(config);
-    this.storyblok = storyblok;
+  ɵinit(config: StoryblokClientConfig): void {
+    if (this.initialized) return;
+    this.client = createApiClient(config);
     this.initialized = true;
   }
 
   /**
-   * Fetch a single story by its slug.
-   *
-   * @param slug - The story slug (e.g., 'home', 'about', 'blog/my-post')
-   * @param options - API options for resolving relations and links
-   * @returns The story data or null if not found
+   * Get the initialized API client instance
    */
-  async getStory(slug: string, options: ISbStoriesParams = {}): Promise<ISbStoryData | null> {
-    if (!this.storyblok) {
-      console.error('Storyblok API not initialized. Call init() first.');
-      return null;
-    }
-    try {
-      const response = await this.storyblok.get(`cdn/stories/${slug}`, {
-        version: options.version ?? 'draft',
-        resolve_relations: options.resolve_relations,
-        resolve_links: options.resolve_links,
-      });
-
-      return response.data?.story ?? null;
-    } catch (error) {
-      console.error(`Failed to fetch story: ${slug}`, error);
-      return null;
+  getClient(): StoryblokClient {
+    if (!this.client) {
+      throw new Error(
+        'Storyblok API client not initialized. Did you forget to call provideStoryblok()?',
+      );
     }
+    return this.client;
   }
 }

packages/angular/projects/sdk/src/public-api.ts

@@ -3,7 +3,11 @@
  */
 
 // Core service and provider
-export { StoryblokService, STORYBLOK_CONFIG } from './lib/storyblok.service';
+export {
+  StoryblokService,
+  STORYBLOK_CONFIG,
+  type StoryblokClientConfig,
+} from './lib/storyblok.service';
 export { provideStoryblok } from './lib/storyblok.feature';
 // Component registry
 export {
@@ -34,14 +38,6 @@ export {
   type StoryblokRichTextOptions,
 } from '@storyblok/richtext';
 
-// Re-export useful types from @storyblok/js
-export type {
-  ISbStoriesParams,
-  ISbStoryData,
-  ISbResult,
-  ISbStory,
-  ISbConfig,
-  ISbComponentType,
-} from 'storyblok-js-client';
-
-export type { SbBlokData } from '@storyblok/js';
+export type { SbBlokData, ISbStoryData } from '@storyblok/js';
+
+export type { Story } from '@storyblok/api-client';

packages/angular/projects/ssr-playground/src/app/app.config.ts

@@ -6,13 +6,14 @@ import {
   provideStoryblok,
   withLivePreview,
   withStoryblokComponents,
-  type ISbConfig,
+  type StoryblokClientConfig,
 } from '@storyblok/angular';
 import { storyblokComponents } from './storyblok.components';
 
-const sbConfig: ISbConfig = {
+const sbConfig: StoryblokClientConfig = {
   accessToken: 'nVjy7VdMK6ObZxyDfTWNwgtt',
   region: 'eu',
+  inlineRelations: true,
 };
 export const appConfig: ApplicationConfig = {
   providers: [

packages/angular/projects/ssr-playground/src/app/app.routes.ts

@@ -14,12 +14,16 @@ export const routes: Routes = [
     loadComponent: () =>
       import('./routes/catch-all/catch-all.component').then((m) => m.CatchAllComponent),
     resolve: {
-      story: (route: ActivatedRouteSnapshot) => {
+      story: async (route: ActivatedRouteSnapshot) => {
         const slug = route.url.map((s) => s.path).join('/') || 'home';
-        return inject(StoryblokService).getStory(slug, {
-          version: 'draft',
-          resolve_relations: 'feature_posts.posts',
+        const client = inject(StoryblokService).getClient();
+        const { data } = await client.stories.get(slug, {
+          query: {
+            version: 'draft',
+            resolve_relations: 'feature_posts.posts',
+          },
         });
+        return data?.story;
       },
     },
   },

packages/angular/projects/ssr-playground/src/app/components/teaser/teaser.ts

@@ -4,7 +4,6 @@ import {
   type SbBlokData,
   type StoryblokRichTextNode,
 } from '@storyblok/angular';
-import type { StoryblokRichTextOptions } from '@storyblok/richtext';
 
 export interface TeaserBlok extends SbBlokData {
   headline?: string;
@@ -18,20 +17,10 @@ export interface TeaserBlok extends SbBlokData {
   template: `
     <div>
       <h2>{{ blok().headline }}</h2>
-      <sb-rich-text [doc]="blok().text" [options]="richTextOptions" />
+      <sb-rich-text [doc]="blok().text" />
     </div>
   `,
 })
 export class TeaserComponent {
   readonly blok = input.required<TeaserBlok>();
-
-  /** Custom rich text configuration */
-  readonly richTextOptions: StoryblokRichTextOptions<string> = {
-    tiptapExtensions: {
-      link: (node: any) => {
-        console.log(node);
-        return `<p>This is a custom link</p>`;
-      },
-    },
-  };
 }