@ethercorps/sveltekit-og 0.1.4 → 0.1.6

package/README.md

@@ -10,6 +10,7 @@ Install `@ethercorps/sveltekit-og`, then use it inside a server endpoint route (
 ```typescript
 // /routes/og/+server.ts
 import { ImageResponse } from '@ethercorps/sveltekit-og';
+import { RequestHandler } from './$types';
 
 const template = `
  <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
@@ -32,20 +33,19 @@ const template = `
 const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
 const fontData: ArrayBuffer = await fontFile.arrayBuffer();
 
-export const GET: () => Promise<ImageResponse> = async () => {
-    return new ImageResponse(template, {
-        height: 250,
-        width: 500,
-        fonts: [
-            {
-                name: 'Inter Latin',
-                data: fontData,
-                weight: 400
-            }
-        ]
-    });
+export const GET: RequestHandler = async () => {
+	return new ImageResponse(template, {
+		height: 250,
+		width: 500,
+		fonts: [
+			{
+				name: 'Inter Latin',
+				data: fontData,
+				weight: 400
+			}
+		]
+	});
 };
-
 ```
 
 Then run `pnpm dev` and access localhost:5173/og, the api/route endpoint be rendered and responded as a PNG from that api/endpoint:
@@ -55,10 +55,10 @@ Then run `pnpm dev` and access localhost:5173/og, the api/route endpoint be rend
 Read more about the API, supported features and check out the examples on Satori Playground.
 
 ## Examples:
+
 - `ImageResponse` · [_source_](/src/routes/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app)
 - `componentToImageResponse` · [_source_](/src/routes/component-og/) · [_demo_](https://sveltekit-og-five.vercel.app/component-og)
 
-
 ## API Reference
 
 The package exposes an `ImageResponse` and `componentToImageResponse` constructors, with the following options available:
@@ -125,7 +125,6 @@ Please refer to [Satori’s documentation](https://github.com/vercel/satori#docu
 
 By default, `@ethercorps/sveltekit-og` only has the 'Noto Sans' font included. If you need to use other fonts, you can pass them in the `fonts` option.
 
-
 ## Acknowledgements
 
 This project will not be possible without the following projects:
@@ -135,7 +134,6 @@ This project will not be possible without the following projects:
 - [Noto by Google Fonts](https://fonts.google.com/noto)
 - [Resvg.js](https://github.com/yisibl/resvg-js)
 
-
 ## Authors
 
 - [@theetherGit](https://www.github.com/theetherGit)

package/index.d.ts

@@ -1,9 +1,9 @@
 import type { SatoriOptions } from 'satori';
-import type { SvelteComponent } from "svelte";
-export declare class ImageResponse {
+import type { SvelteComponent } from 'svelte';
+declare class ImageResponse {
     constructor(htmlTemplate: string, optionsByUser: ImageResponseOptions);
 }
-export declare class componentToImageResponse {
+declare class componentToImageResponse {
     constructor(component: typeof SvelteComponent, props: {} | undefined, optionsByUser: ImageResponseOptions);
 }
 declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
@@ -13,6 +13,6 @@ declare type ImageOptions = {
     debug?: boolean;
     fonts?: SatoriOptions['fonts'];
     graphemeImages?: Record<string, string>;
-    loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
+    loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions['fonts'] | string | undefined>;
 };
-export {};
+export { componentToImageResponse, ImageResponse };

package/index.js

@@ -1,10 +1,11 @@
 import { html as toReactNode } from 'satori-html';
 import satori from 'satori';
 import { Resvg, initWasm } from '@resvg/resvg-wasm';
+import { dev } from '$app/environment';
 const resSvgWasm = initWasm(fetch('https://sveltekit-og.ethercorps.io/resvg.wasm'));
 const fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
 const fontData = await fontFile.arrayBuffer();
-export class ImageResponse {
+class ImageResponse {
     constructor(htmlTemplate, optionsByUser) {
         const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
         const png = new ReadableStream({
@@ -31,7 +32,7 @@ export class ImageResponse {
         return new Response(png, {
             headers: {
                 'Content-Type': 'image/png',
-                'cache-control': import.meta.env.DEV
+                'cache-control': dev
                     ? 'no-cache, no-store'
                     : 'public, immutable, no-transform, max-age=31536000',
                 ...options.headers
@@ -41,7 +42,7 @@ export class ImageResponse {
         });
     }
 }
-export class componentToImageResponse {
+class componentToImageResponse {
     constructor(component, props = {}, optionsByUser) {
         const htmlTemplate = componentToMarkup(component, props);
         return new ImageResponse(htmlTemplate, optionsByUser);
@@ -55,3 +56,4 @@ const componentToMarkup = (component, props = {}) => {
     }
     return htmlTemplate;
 };
+export { componentToImageResponse, ImageResponse };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "private": false,
   "devDependencies": {
     "@playwright/test": "^1.27.1",