@ethercorps/sveltekit-og 0.1.1 → 0.1.3

package/README.md

@@ -49,7 +49,7 @@ export const GET: RequestHandler = async () => {
 
 ```
 
-Then run `pnpm dev` and access localhost:5173/og, the React element will be rendered and responded as a PNG from that endpoint:
+Then run `pnpm dev` and access localhost:5173/og, the api/route endpoint be rendered and responded as a PNG from that api/endpoint:
 
 ![Rendered OG image](static/demo.png)
 
@@ -62,32 +62,53 @@ Read more about the API, supported features and check out the examples on Satori
 
 ## API Reference
 
-The package exposes an `ImageResponse` constructor, with the following options available:
+The package exposes an `ImageResponse` and `componentToImageResponse` constructors, with the following options available:
 
 ```typescript
-import { ImageResponse } from '@ethercorps/sveltekit-og'
+import {ImageResponse, componentToImageResponse} from '@ethercorps/sveltekit-og'
+import {SvelteComponent} from "svelte";
 
 // ...
 new ImageResponse(
-  element: string,
-  options: {
-    width?: number = 1200
-    height?: number = 630
-    fonts?: {
-      name: string,
-      data: ArrayBuffer,
-      weight: number,
-      style: 'normal' | 'italic'
+    element : string,
+    options : {
+    width ? : number = 1200
+    height ? : number = 630
+    fonts ? : {
+        name: string,
+        data: ArrayBuffer,
+        weight: number,
+        style: 'normal' | 'italic'
     }[]
-    debug?: boolean = false
-    graphemeImages?: Record<string, string>;
-    loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
+    debug ? : boolean = false
+    graphemeImages ? : Record<string, string>;
+    loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
     // Options that will be passed to the HTTP response
-    status?: number = 200
-    statusText?: string
-    headers?: Record<string, string>
-  },
-)
+    status ? : number = 200
+    statusText ? : string
+    headers ? : Record<string, string>
+    })
+
+new componentToImageResponse(
+    component : typeof SvelteComponent,
+    props : {}, // All export let example inside prop dictionary
+    options : {
+    width ? : number = 1200
+    height ? : number = 630
+    fonts ? : {
+        name: string,
+        data: ArrayBuffer,
+        weight: number,
+        style: 'normal' | 'italic'
+    }[]
+    debug ? : boolean = false
+    graphemeImages ? : Record<string, string>;
+    loadAdditionalAsset ? : (languageCode: string, segment: string) => Promise<SatoriOptions["fonts"] | string | undefined>;
+    // Options that will be passed to the HTTP response
+    status ? : number = 200
+    statusText ? : string
+    headers ? : Record<string, string>
+    })
 ```
 
 When running in production, these headers will be included by `@ethercorps/sveltekit-og`:
@@ -111,5 +132,12 @@ By default, `@ethercorps/sveltekit-og` only has the 'Noto Sans' font included. I
 This project will not be possible without the following projects:
 
 - [Satori & @vercel/og](https://github.com/vercel/satori)
+- [Satori-Html](https://github.com/natemoo-re/satori-html)
 - [Noto by Google Fonts](https://fonts.google.com/noto)
 - [Resvg.js](https://github.com/yisibl/resvg-js)
+
+
+## Authors
+
+- [@theetherGit](https://www.github.com/theetherGit)
+- [@etherCorps](https://www.github.com/etherCorps)

package/index.d.ts

@@ -1,11 +1,12 @@
 import type { SatoriOptions } from 'satori';
+import type { SvelteComponent } from "svelte";
 export declare const ImageResponse: {
     new (htmlTemplate: string, optionsByUser: ImageResponseOptions): {};
 };
 export declare const componentToImageResponse: {
-    new (component: any, props: {} | undefined, optionsByUser: ImageResponseOptions): {};
+    new (component: typeof SvelteComponent, props: {} | undefined, optionsByUser: ImageResponseOptions): {};
 };
-export declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
+declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
 declare type ImageOptions = {
     width?: number;
     height?: number;

package/index.js

@@ -1,10 +1,8 @@
 import { html as toReactNode } from 'satori-html';
 import satori from 'satori';
 import { Resvg, initWasm } from '@resvg/resvg-wasm';
-import { fileURLToPath } from 'url';
-const __filename = fileURLToPath(import.meta.url);
-const resSvgWasm = initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'));
-const fontFile = await fetch('https://sveltekit-og-five.vercel.app/noto-sans.ttf');
+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 const ImageResponse = class {
     constructor(htmlTemplate, optionsByUser) {
@@ -26,7 +24,7 @@ export const ImageResponse = class {
                     ]
                 });
                 const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } });
-                a.enqueue(await pngData.render().asPng());
+                a.enqueue(pngData.render().asPng());
                 a.close();
             }
         });
@@ -45,11 +43,15 @@ export const ImageResponse = class {
 };
 export const componentToImageResponse = class {
     constructor(component, props = {}, optionsByUser) {
-        const SvelteRenderedMarkup = component.render(props);
-        let htmlTemplate = `${SvelteRenderedMarkup.html}`;
-        if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) {
-            htmlTemplate = `${SvelteRenderedMarkup.html}<style>${SvelteRenderedMarkup.css.code}</style>`;
-        }
+        const htmlTemplate = componentToMarkup(component, props);
         return new ImageResponse(htmlTemplate, optionsByUser);
     }
 };
+const componentToMarkup = (component, props = {}) => {
+    const SvelteRenderedMarkup = component.render(props);
+    let htmlTemplate = `${SvelteRenderedMarkup.html}`;
+    if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) {
+        htmlTemplate = `${SvelteRenderedMarkup.html}<style>${SvelteRenderedMarkup.css.code}</style>`;
+    }
+    return htmlTemplate;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "private": false,
   "devDependencies": {
     "@playwright/test": "^1.27.1",
@@ -24,8 +24,8 @@
   "type": "module",
   "dependencies": {
     "@resvg/resvg-wasm": "^2.1.0",
-    "satori": "^0.0.42",
-    "satori-html": "^0.2.0"
+    "satori": "^0.0.43",
+    "satori-html": "^0.3.0"
   },
   "keywords": [
     "open graph image",