@storyblok/js - npm Package Compare versions

Comparing version 3.1.9 to 3.2.0

dist/types/index.d.ts

@@ -1,13 +0,64 @@
-import { SbSDKOptions, StoryblokBridgeConfigV2, ISbStoryData, SbInitResult, ISbRichtext, StoryblokComponentType, SbRichTextOptions } from "./types";
-import { RichtextResolver } from "storyblok-js-client";
-export declare const useStoryblokBridge: <T extends StoryblokComponentType<string> = any>(id: Number, cb: (newStory: ISbStoryData<T>) => void, options?: StoryblokBridgeConfigV2) => void;
-export declare const storyblokInit: (pluginOptions?: SbSDKOptions) => SbInitResult;
-export declare const isRichTextEmpty: (data?: ISbRichtext) => boolean;
-export declare const renderRichText: (data?: ISbRichtext, options?: SbRichTextOptions, resolverInstance?: RichtextResolver) => string;
-export declare const loadStoryblokBridge: () => Promise<unknown>;
-export { useStoryblokBridge as registerStoryblokBridge };
-export { default as apiPlugin } from "./modules/api";
-export { default as storyblokEditable } from "./modules/editable";
-export { RichtextResolver as RichTextResolver, RichtextSchema as RichTextSchema, } from "storyblok-js-client";
-export * from "./types";
-export { BlockTypes, MarkTypes, richTextResolver, TextTypes, type StoryblokRichTextOptions, type StoryblokRichTextDocumentNode, type StoryblokRichTextNodeTypes, type StoryblokRichTextNode, type StoryblokRichTextResolvers, type StoryblokRichTextNodeResolver, type StoryblokRichTextImageOptimizationOptions, } from "@storyblok/richtext";
+import { ISbComponentType, ISbConfig, ISbStoryData, default as StoryblokJSClient } from 'storyblok-js-client';
+export type StoryblokClient = StoryblokJSClient;
+declare global {
+    interface Window {
+        storyblokRegisterEvent: (cb: () => void) => void;
+        StoryblokBridge: {
+            new (options?: StoryblokBridgeConfigV2): StoryblokBridgeV2;
+        };
+    }
+}
+export interface SbInitResult {
+    storyblokApi?: StoryblokClient;
+}
+export type SbPluginFactory = (options: SbSDKOptions) => any;
+export type SbBlokKeyDataTypes = string | number | object | boolean | undefined;
+export interface SbBlokData extends ISbComponentType<string> {
+    [index: string]: SbBlokKeyDataTypes;
+}
+export interface SbRichTextOptions {
+    schema?: ISbConfig['richTextSchema'];
+    resolver?: ISbConfig['componentResolver'];
+}
+export interface SbSDKOptions {
+    bridge?: boolean;
+    accessToken?: string;
+    use?: any[];
+    apiOptions?: ISbConfig;
+    richText?: SbRichTextOptions;
+    bridgeUrl?: string;
+}
+export interface ISbEventPayload<S extends ISbComponentType<string> = any> {
+    action: 'customEvent' | 'published' | 'input' | 'change' | 'unpublished' | 'enterEditmode';
+    event?: string;
+    story?: ISbStoryData<S>;
+    slug?: string;
+    slugChanged?: boolean;
+    storyId?: number;
+    reload?: boolean;
+}
+export interface StoryblokBridgeConfigV2 {
+    resolveRelations?: string | string[];
+    customParent?: string;
+    preventClicks?: boolean;
+    language?: string;
+    resolveLinks?: 'url' | 'story' | '0' | '1' | 'link';
+}
+export interface StoryblokBridgeV2 {
+    pingEditor: (event: any) => void;
+    isInEditor: () => boolean;
+    enterEditmode: () => void;
+    on: (event: 'customEvent' | 'published' | 'input' | 'change' | 'unpublished' | 'enterEditmode' | string[], callback: (payload?: ISbEventPayload) => void) => void;
+}
+export type { ArrayFn, AsyncFn, ISbAlternateObject, // previously AlternateObject
+ISbCache, // previously StoryblokCache
+ISbComponentType as StoryblokComponentType, ISbConfig, // previously StoryblokConfig
+ISbContentMangmntAPI, ISbDimensions, ISbError, ISbManagmentApiResult, // previously StoryblokManagmentApiResult
+ISbNode, ISbResponse, ISbResult, // previously StoryblokResult
+ISbRichtext, // previously Richtext
+ISbSchema, ISbStories, // previously Stories
+ISbStoriesParams, // previously StoriesParams
+ISbStory, // previously Story
+ISbStoryData, // previously StoryData
+ISbStoryParams, // previously StoryParams
+ISbThrottle, ISbThrottledRequest, } from 'storyblok-js-client';

package.json

 {
   "name": "@storyblok/js",
-  "version": "3.1.9",
+  "type": "module",
+  "version": "3.2.0",
+  "packageManager": "pnpm@9.12.2",
   "description": "SDK to integrate Storyblok into your project using JavaScript.",
-  "main": "./dist/storyblok-js.js",
-  "module": "./dist/storyblok-js.mjs",
-  "types": "./dist/types/index.d.ts",
-  "files": [
-    "dist"
-  ],
+  "license": "MIT",
   "exports": {
@@ -18,74 +15,61 @@ ".": {
   },
+  "main": "./dist/storyblok-js.js",
+  "module": "./dist/storyblok-js.mjs",
+  "types": "./dist/types/index.d.ts",
+  "files": [
+    "dist"
+  ],
   "scripts": {
-    "dev": "vite build --watch",
-    "build": "vite build && tsc --project tsconfig.json",
-    "test": "npm run test:unit && npm run test:e2e",
-    "test:unit": "vitest run",
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "test:unit": "vitest",
+    "test:unit:ci": "vitest run",
+    "test:unit:ui": "vitest --ui",
     "test:e2e": "start-server-and-test cy:playground http://localhost:5173/ cy:run",
     "test:e2e-watch": "start-server-and-test cy:playground http://localhost:5173/ cy:open",
-    "cy:playground": "npm run demo --prefix ../playground",
+    "cy:playground": "pnpm --filter='./playground/vanilla' dev",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix",
     "cy:run": "cypress run",
-    "cy:open": "cypress open",
-    "prepublishOnly": "npm run build && cp ../README.md ./"
+    "cy:open": "cypress open"
   },
   "dependencies": {
-    "@storyblok/richtext": "^3.0.0",
-    "storyblok-js-client": "^6.10.3"
+    "@storyblok/richtext": "3.0.2",
+    "storyblok-js-client": "6.10.6"
   },
   "devDependencies": {
+    "@commitlint/cli": "^19.6.0",
+    "@commitlint/config-conventional": "^19.6.0",
+    "@storyblok/eslint-config": "^0.3.0",
     "@tsconfig/recommended": "^1.0.8",
-    "cypress": "^13.16.0",
-    "eslint-plugin-cypress": "^2.15.2",
-    "eslint-plugin-jest": "^28.9.0",
+    "@types/node": "^22.10.1",
+    "cypress": "^13.16.1",
+    "eslint": "^9.16.0",
+    "eslint-plugin-cypress": "^4.1.0",
     "isomorphic-fetch": "^3.0.0",
+    "kolorist": "^1.8.0",
+    "pathe": "^1.1.2",
+    "simple-git-hooks": "^2.11.1",
     "start-server-and-test": "^2.0.8",
-    "vite": "^5.4.11",
+    "typescript": "^5.7.2",
+    "vite": "^6.0.1",
+    "vite-plugin-banner": "^0.8.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vite-plugin-qrcode": "^0.2.3",
     "vitest": "^2.1.5"
   },
-  "babel": {
-    "presets": [
-      [
-        "@babel/preset-env",
-        {
-          "targets": {
-            "node": "current"
-          }
-        }
-      ]
+  "commitlint": {
+    "extends": [
+      "@commitlint/config-conventional"
     ]
   },
-  "jest": {
-    "moduleFileExtensions": [
-      "js",
-      "json"
-    ],
-    "transform": {
-      "^.+\\.js$": "babel-jest"
-    }
-  },
   "release": {
     "branches": [
-      "main",
-      {
-        "name": "next",
-        "prerelease": true
-      },
-      {
-        "name": "beta",
-        "prerelease": true
-      }
+      "main"
     ]
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/storyblok/storyblok-js"
-  },
-  "author": "Storyblok",
-  "bugs": {
-    "url": "https://github.com/storyblok/storyblok-js/issues"
-  },
-  "homepage": "https://github.com/storyblok/storyblok-js",
-  "publishConfig": {
-    "access": "public"
+  "simple-git-hooks": {
+    "pre-commit": "pnpm lint",
+    "pre-push": "pnpm commitlint --last --verbose"
   }
 }

README.md

 <div align="center">
-	<a href="https://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js" align="center">
-		<img src="https://a.storyblok.com/f/88751/1776x360/296788fb19/sb-js.png"  alt="Storyblok Logo">
-	</a>
-	<h1 align="center">@storyblok/js</h1>
+  <a href="https://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js" align="center">
+    <img src="https://a.storyblok.com/f/88751/1776x360/296788fb19/sb-js.png"  alt="Storyblok Logo">
+  </a>
+  <h1 align="center">@storyblok/js</h1>
   <p align="center">
@@ -60,6 +60,6 @@ The JavaScript SDK you need to interact with <a href="http://www.storyblok.com?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js" target="_blank">Storyblok API</a> and enable the <a href="https://www.storyblok.com/docs/guide/essentials/visual-editor?utm_source=github.com&utm_medium=readme&utm_campaign=storyblok-js" target="_blank">Real-time Visual Editing Experience</a>.
 ```js
-import { storyblokInit, apiPlugin } from "@storyblok/js";
+import { apiPlugin, storyblokInit } from '@storyblok/js';
 
 const { storyblokApi } = storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
+  accessToken: 'YOUR_ACCESS_TOKEN',
   use: [apiPlugin],
@@ -86,9 +86,9 @@ });
 ```js
-import { storyblokInit, apiPlugin } from "@storyblok/js";
+import { apiPlugin, storyblokInit } from '@storyblok/js';
 
 const { storyblokApi } = storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
+  accessToken: 'YOUR_ACCESS_TOKEN',
   use: [apiPlugin],
   apiOptions: {
-    region: "us",
+    region: 'us',
   },
@@ -113,10 +113,10 @@ });
 ```js
-import { storyblokInit, apiPlugin } from "@storyblok/js";
+import { apiPlugin, storyblokInit } from '@storyblok/js';
 
 const { storyblokApi } = storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
+  accessToken: 'YOUR_ACCESS_TOKEN',
   use: [apiPlugin],
 });
 
-const { data } = await storyblokApi.get("cdn/stories", { version: "draft" });
+const { data } = await storyblokApi.get('cdn/stories', { version: 'draft' });
 ```
@@ -131,14 +131,14 @@
 ```js
-import { storyblokInit, apiPlugin, useStoryblokBridge } from "@storyblok/js";
+import { apiPlugin, storyblokInit, useStoryblokBridge } from '@storyblok/js';
 
 const { storyblokApi } = storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
+  accessToken: 'YOUR_ACCESS_TOKEN',
   use: [apiPlugin],
 });
 
-const { data } = await storyblokApi.get("cdn/stories", { version: "draft" });
+const { data } = await storyblokApi.get('cdn/stories', { version: 'draft' });
 
 const story = data ? data.story : null;
 
-useStoryblokBridge(story.id, (story) => (state.story = story));
+useStoryblokBridge(story.id, story => (state.story = story));
 ```
@@ -149,5 +149,5 @@
 ```js
-useStoryblokBridge(story.id, (story) => (state.story = story), {
-  resolveRelations: ["Article.author"],
-  resolveLinks: "url"
+useStoryblokBridge(story.id, story => (state.story = story), {
+  resolveRelations: ['Article.author'],
+  resolveLinks: 'url'
 });
@@ -163,3 +163,3 @@ ```
 ```js
-import { storyblokEditable } from "@storyblok/js";
+import { storyblokEditable } from '@storyblok/js';
 
@@ -170,5 +170,5 @@ const vEditableDirective = {
       const options = storyblokEditable(binding.value);
-      el.setAttribute("data-blok-c", options["data-blok-c"]);
-      el.setAttribute("data-blok-uid", options["data-blok-uid"]);
-      el.classList.add("storyblok__outline");
+      el.setAttribute('data-blok-c', options['data-blok-c']);
+      el.setAttribute('data-blok-uid', options['data-blok-uid']);
+      el.classList.add('storyblok__outline');
     }
@@ -191,6 +191,6 @@ },
 const { storyblokApi } = storyblokInit({
-  accessToken: "YOUR_ACCESS_TOKEN",
+  accessToken: 'YOUR_ACCESS_TOKEN',
   apiOptions: {
     // storyblok-js-client config object
-    cache: { type: "memory" },
+    cache: { type: 'memory' },
   },
@@ -213,3 +213,3 @@ use: [apiPlugin],
 const { storyblokApi } = storyblokInit({
-  bridge: process.env.NODE_ENV !== "production",
+  bridge: process.env.NODE_ENV !== 'production',
 });
@@ -223,3 +223,3 @@ ```
 
-sbBridge.on(["input", "published", "change"], (event) => {
+sbBridge.on(['input', 'published', 'change'], (event) => {
   // ...
@@ -234,3 +234,3 @@ });
 ```js
-import { renderRichText } from "@storyblok/js";
+import { renderRichText } from '@storyblok/js';
 
@@ -243,4 +243,4 @@ const renderedRichText = renderRichText(blok.richtext);
 ```js
-import { RichTextSchema, storyblokInit } from "@storyblok/js";
-import cloneDeep from "clone-deep";
+import { RichTextSchema, storyblokInit } from '@storyblok/js';
+import cloneDeep from 'clone-deep';
 
@@ -252,3 +252,3 @@ const mySchema = cloneDeep(RichTextSchema); // you can make a copy of the default RichTextSchema
 storyblokInit({
-  accessToken: "<your-token>",
+  accessToken: '<your-token>',
   richText: {
@@ -258,6 +258,6 @@ schema: mySchema,
       switch (component) {
-        case "my-custom-component":
+        case 'my-custom-component':
           return `<div class="my-component-class">${blok.text}</div>`;
         default:
-          return "Resolver not defined";
+          return 'Resolver not defined';
       }
@@ -272,3 +272,3 @@ },
 ```js
-import { renderRichText } from "@storyblok/js";
+import { renderRichText } from '@storyblok/js';
 
@@ -279,5 +279,4 @@ renderRichText(blok.richTextField, {
     switch (component) {
-      case "my-custom-component":
+      case 'my-custom-component':
         return `<div class="my-component-class">${blok.text}</div>`;
-        break;
       default:
@@ -284,0 +283,0 @@ return `Component ${component} not found`;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

88067

increased by4.63%

Number of package files

10

increased by11.11%

Lines of code

1428

increased by4.69%

Is type module

Yes

Worsened metrics

Dev dependency count

19

increased by137.5%

Number of low maintenance alerts

2

increased byInfinity%

Number of low quality alerts

1

increased byInfinity%

Number of lines in readme file

294

decreased by-0.34%

Number of low supply chain risk alerts

1

increased byInfinity%

Number of medium supply chain risk alerts

3

increased by50%

Dependency changes

• Updated@storyblok/richtext@3.0.2

• Updatedstoryblok-js-client@6.10.6