@ethercorps/sveltekit-og 4.2.0 → 4.3.1-next.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ethercorps
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,9 +1,13 @@
+[![npm version](https://flat.badgen.net/npm/v/@ethercorps/sveltekit-og?color=orange)](https://npmjs.com/package/bits-ui)
+[![npm downloads](https://flat.badgen.net/npm/dm/@ethercorps/sveltekit-og?color=orange)](https://npmjs.com/package/@ethercorps/sveltekit-og)
+[![license](https://flat.badgen.net/github/license/ethercorps/sveltekit-og?color=orange)](https://github.com/ethercorps/sveltekit-og/blob/main/LICENSE)
+
 # SvelteKit Open Graph Image Generation
 
 Dynamically generate Open Graph images from an HTML+CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG. Based on [Satori](https://github.com/vercel/satori#documentation). No headless browser required.
 
 ## Docs
-- With sveltekit-og@4, we have [official documentation](https://sveltekit-og.dev). 
+- With `sveltekit-og@4`, we have [official documentation](https://sveltekit-og.dev). 
 
 ## Installation
 
@@ -114,7 +118,7 @@ Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Rem
 
 ## Example Output
 
-![Rendered OG image](https://vercel.sveltekit-og.dev)
+![Rendered OG image](https://github.com/etherCorps/sveltekit-og/blob/main/static/og.png)
 
 ## Headers
 

package/dist/fonts.d.ts

@@ -17,18 +17,10 @@ export declare class BaseFont {
      */
     get data(): MayBePromise<Buffer | ArrayBuffer>;
 }
-/** * A helper class to load Custom fonts, typically from local files.
- * The input must be a function provided by the user (e.g., using $app/server/read).
- */
 export declare class CustomFont extends BaseFont {
     private promise?;
-    /**
-     * Creates an instance of CustomFont.
-     * @param name The name of the font (for CSS font-family).
-     * @param input Font data as ArrayBuffer or a function that resolves to ArrayBuffer (user must provide the loading logic).
-     */
     constructor(name: string, input: MayBePromise<Buffer | ArrayBuffer> | (() => MayBePromise<Buffer | ArrayBuffer>), options?: BaseFontOptions);
-    /** A promise which resolves to font data as `ArrayBuffer` (Lazy load) */
+    /** A promise which resolves to font data as `ArrayBuffer` (Lazy load and CACHED) */
     get data(): Promise<Buffer | ArrayBuffer>;
 }
 /** Loads Google font ArrayBuffer with caching. */

package/dist/fonts.js

@@ -20,24 +20,24 @@ export class BaseFont {
         return this.input;
     }
 }
-/** * A helper class to load Custom fonts, typically from local files.
- * The input must be a function provided by the user (e.g., using $app/server/read).
- */
 export class CustomFont extends BaseFont {
     promise;
-    /**
-     * Creates an instance of CustomFont.
-     * @param name The name of the font (for CSS font-family).
-     * @param input Font data as ArrayBuffer or a function that resolves to ArrayBuffer (user must provide the loading logic).
-     */
     constructor(name, input, options) {
         super(name, input, options);
     }
-    /** A promise which resolves to font data as `ArrayBuffer` (Lazy load) */
+    /** A promise which resolves to font data as `ArrayBuffer` (Lazy load and CACHED) */
     get data() {
-        // Defines the loading mechanism: execute the input function or resolve the promise/buffer.
-        const fallback = async () => (typeof this.input === 'function' ? this.input() : this.input);
-        // Memoization: ensures the input function is executed only once.
+        const cacheKey = `${this.name}-${this.weight}-${this.style}`;
+        const cachedData = FONT_CACHE_MAP.get(cacheKey);
+        if (cachedData) {
+            return Promise.resolve(cachedData);
+        }
+        const fallback = async () => {
+            const buffer = typeof this.input === 'function' ? this.input() : this.input;
+            const resolvedBuffer = await buffer;
+            FONT_CACHE_MAP.set(cacheKey, resolvedBuffer);
+            return resolvedBuffer;
+        };
         this.promise = this.promise?.then(null, fallback) ?? fallback();
         return this.promise;
     }

package/dist/helpers/create.d.ts

@@ -1,5 +1,4 @@
 import type { Component } from 'svelte';
-import type { ComponentOptions, ImageOptions, VNode } from '../types.js';
-export declare function createVNode(element: string | Component, componentOptions?: ComponentOptions): Promise<VNode>;
+import type { ComponentOptions, ImageOptions } from '../types.js';
 export declare function createSvg(element: string | Component, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<string>;
 export declare function createPng(element: string | Component, imageOptions: ImageOptions, componentOptions?: ComponentOptions): Promise<Uint8Array<ArrayBufferLike>>;

package/dist/helpers/create.js

@@ -1,15 +1,7 @@
-import { html } from 'satori-html';
 import { loadDynamicAsset } from './emoji.js';
 import { default_fonts, DEFAULT_WIDTH } from '../helpers/defaults.js';
 import { useResvg, useSatori } from '../providers/instances.js';
-import { render } from 'svelte/server';
-function svelteComponentToJsx(component, props = {}) {
-    const { body, head } = render(component, { props });
-    return html(body + head);
-}
-export async function createVNode(element, componentOptions) {
-    return typeof element === 'string' ? html(element.replaceAll('\n', '').trim()) : svelteComponentToJsx(element, componentOptions?.props);
-}
+import { createVNode } from './toJSX.js';
 export async function createSvg(element, imageOptions, componentOptions) {
     const [satori, vnodes] = await Promise.all([useSatori(), createVNode(element, componentOptions)]);
     const satoriOptions = structuredClone(imageOptions);

package/dist/helpers/toJSX.d.ts

@@ -0,0 +1,3 @@
+import type { Component } from 'svelte';
+import type { ComponentOptions, VNode } from '../types.js';
+export declare function createVNode(element: string | Component, componentOptions?: ComponentOptions): VNode;

package/dist/helpers/toJSX.js

@@ -0,0 +1,9 @@
+import { render } from 'svelte/server';
+import { html } from 'satori-html';
+function svelteComponentToHTML(component, props = {}) {
+    const { body, head } = render(component, { props });
+    return html(body + head);
+}
+export function createVNode(element, componentOptions) {
+    return typeof element === 'string' ? html(element.replaceAll('\n', '').trim()) : svelteComponentToHTML(element, componentOptions?.props);
+}

package/dist/plugin.js

@@ -13,8 +13,8 @@ export function sveltekitOG(options) {
             return {
                 build: {
                     rollupOptions: {
-                        plugins: [rollupWasm(options)]
-                    }
+                        plugins: [rollupWasm(options)],
+                    },
                 }
             };
         }

package/dist/providers/resvg/edge.js

@@ -3,6 +3,6 @@ import { Resvg as _Resvg, initWasm } from '@resvg/resvg-wasm'
 export default {
 	// eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
-  initWasmPromise: initWasm(import('./resvg.wasm?module').then(r => r.default || r)),
+  initWasmPromise: initWasm(import('@resvg/resvg-wasm/index_bg.wasm').then(r => r.default || r)),
   Resvg: _Resvg,
 }

package/package.json

@@ -1,73 +1,81 @@
 {
-  "name": "@ethercorps/sveltekit-og",
-  "version": "4.2.0",
-  "exports": {
-    ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js",
-      "import": "./dist/index.js"
-    },
-    "./fonts": {
-      "types": "./dist/fonts.d.ts",
-      "import": "./dist/fonts.js"
-    },
-    "./plugin": {
-      "types": "./dist/plugin.d.ts",
-      "import": "./dist/plugin.js"
-    }
-  },
-  "files": [
-    "dist",
-    "!dist/**/*.test.*",
-    "!dist/**/*.spec.*"
-  ],
-  "devDependencies": {
-    "@sveltejs/adapter-vercel": "^5.10.2",
-    "@sveltejs/kit": "^2.48.5",
-    "@sveltejs/package": "^2.5.4",
-    "@sveltejs/vite-plugin-svelte": "^4.0.4",
-    "@types/node": "^24.7.1",
-    "@typescript-eslint/eslint-plugin": "^5.62.0",
-    "@typescript-eslint/parser": "^5.62.0",
-    "css-tree": "^2.3.1",
-    "eslint": "^8.57.1",
-    "eslint-config-prettier": "^8.10.0",
-    "eslint-plugin-svelte": "^2.46.1",
-    "prettier": "^3.6.2",
-    "prettier-plugin-svelte": "^3.4.0",
-    "publint": "^0.1.16",
-    "rollup-plugin-visualizer": "^5.14.0",
-    "svelte": "^5.43.12",
-    "svelte-check": "^4.3.2",
-    "tslib": "^2.8.1",
-    "typescript": "^5.9.3",
-    "vite": "^5.4.19",
-    "vitest": "^1.6.1"
-  },
-  "main": "./dist/index.js",
-  "svelte": "./dist/index.js",
-  "types": "./dist/index.d.ts",
-  "type": "module",
-  "dependencies": {
-    "@resvg/resvg-wasm": "^2.6.2",
-    "satori": "^0.10.14",
-    "satori-html": "0.3.2",
-    "std-env": "^3.9.0",
-    "unwasm": "^0.5.0"
-  },
-  "peerDependencies": {
-    "@sveltejs/kit": ">=2.0.0"
-  },
-  "scripts": {
-    "dev": "vite dev",
-    "build": "vite build && npm run package",
-    "preview": "vite preview",
-    "package": "svelte-kit sync && svelte-package && publint",
-    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "test": "vitest",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write .",
-    "publishBeta": "npm publish --tag beta"
-  }
+	"name": "@ethercorps/sveltekit-og",
+	"version": "4.3.1-next.1",
+	"license": "MIT",
+	"homepage": "https://sveltekit-og.dev",
+	"repository": "github:ethercorps/sveltekit-og",
+	"funding": "https://github.com/sponsors/ethercorps",
+	"author": "Shivam Meena <https://github.com/theetherGit>",
+	"description": "Dynamically generate Open Graph images from an HTML, CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG",
+	"scripts": {
+		"dev": "vite dev",
+		"build": "vite build && npm run package",
+		"preview": "vite preview",
+		"package": "svelte-kit sync && svelte-package && publint",
+		"prepublishOnly": "npm run package",
+		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+		"test": "vitest",
+		"lint": "prettier --plugin-search-dir . --check . && eslint .",
+		"format": "prettier --plugin-search-dir . --write .",
+		"publishBeta": "npm publish --tag beta"
+	},
+	"exports": {
+		".": {
+			"types": "./dist/index.d.ts",
+			"svelte": "./dist/index.js",
+			"import": "./dist/index.js"
+		},
+		"./fonts": {
+			"types": "./dist/fonts.d.ts",
+			"import": "./dist/fonts.js"
+		},
+		"./plugin": {
+			"types": "./dist/plugin.d.ts",
+			"import": "./dist/plugin.js"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"devDependencies": {
+		"@sveltejs/adapter-vercel": "^5.10.2",
+		"@sveltejs/kit": "^2.48.5",
+		"@sveltejs/package": "^2.5.4",
+		"@sveltejs/vite-plugin-svelte": "^4.0.4",
+		"@types/node": "^24.7.1",
+		"@typescript-eslint/eslint-plugin": "^5.62.0",
+		"@typescript-eslint/parser": "^5.62.0",
+		"css-tree": "^2.3.1",
+		"eslint": "^8.57.1",
+		"eslint-config-prettier": "^8.10.0",
+		"eslint-plugin-svelte": "^2.46.1",
+		"prettier": "^3.6.2",
+		"prettier-plugin-svelte": "^3.4.0",
+		"publint": "^0.1.16",
+		"rollup-plugin-visualizer": "^5.14.0",
+		"svelte": "^5.43.12",
+		"svelte-check": "^4.3.2",
+		"tslib": "^2.8.1",
+		"typescript": "^5.9.3",
+		"vite": "^5.4.19",
+		"vitest": "^1.6.1"
+	},
+	"main": "./dist/index.js",
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"@resvg/resvg-wasm": "^2.6.2",
+		"satori": "^0.10.14",
+		"satori-html": "0.3.2",
+		"std-env": "^3.9.0",
+		"unwasm": "^0.5.0"
+	},
+	"peerDependencies": {
+		"@sveltejs/kit": ">=2.0.0"
+	},
+	"packageManager": "pnpm@10.12.1"
 }