@ethercorps/sveltekit-og 3.0.0-next.12 → 3.0.0-next.14

package/dist/helpers/create.d.ts

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

package/dist/helpers/create.js

@@ -1,6 +1,6 @@
 import { svelteComponentToJsx, toReactElement } from '@ethercorps/svelte-h2j';
 import { loadDynamicAsset } from './emoji.js';
-import { default_fonts } from '../helpers/defaults.js';
+import { default_fonts, DEFAULT_WIDTH } from '../helpers/defaults.js';
 import { useResvg, useSatori } from '../providers/instances.js';
 // TODO: Export VNode Type from svelte-h2j
 // TODO: Make svelte-h2j functions async in new v5 support
@@ -13,6 +13,8 @@ export async function createSvg(element, imageOptions, componentOptions) {
         imageOptions['fonts'] = await default_fonts();
     }
     // Add dynamic emoji loading handler
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     imageOptions['loadAdditionalAsset'] = loadDynamicAsset({
         emoji: imageOptions.emoji
     });
@@ -28,13 +30,11 @@ export async function createPng(element, imageOptions, componentOptions) {
         console.info('SVG generated by satori:', svg, '\n');
     }
     const resvg_instance = await useResvg();
-    console.log(resvg_instance, 'f');
     const resvg_options = {
         fitTo: {
             mode: 'width',
-            value: imageOptions.width
-        },
-        logLevel: imageOptions.debug ? 'info' : 'error'
+            value: imageOptions.width || DEFAULT_WIDTH,
+        }
     };
     if (imageOptions.debug) {
         console.info('Options provided to ReSVG:', resvg_options, '\n');

package/dist/helpers/defaults.d.ts

@@ -1,6 +1,6 @@
 import type { SatoriOptions } from 'satori';
 import type { ImageOptions } from '../types.js';
-export declare function default_fonts(): SatoriOptions['fonts'];
+export declare function default_fonts(): Promise<SatoriOptions['fonts']>;
 export declare const DEFAULT_FORMAT = "png";
 export declare const DEFAULT_WIDTH = 1200;
 export declare const DEFAULT_HEIGHT = 630;

package/dist/helpers/defaults.js

@@ -9,13 +9,13 @@ export async function default_fonts() {
     const [noto_sans_regular_font, noto_sans_bold_font] = await Promise.all([noto_sans_regular_font_resp.arrayBuffer(), noto_sans_bold_font_reps.arrayBuffer()]);
     return [
         {
-            data: noto_sans_regular_font,
+            data: new Uint8Array(noto_sans_regular_font),
             name: 'Inter',
             weight: 400,
             style: 'normal'
         },
         {
-            data: noto_sans_bold_font,
+            data: new Uint8Array(noto_sans_bold_font),
             name: 'Inter',
             weight: 700,
             style: 'normal'

package/dist/image-response.js

@@ -1,21 +1,20 @@
 import { DEFAULT_OPTIONS, DEFAULT_STATUS_CODE, DEFAULT_STATUS_TEXT } from './helpers/defaults.js';
 import { createPng, createSvg } from './helpers/create.js';
-import { isDevelopment } from 'std-env';
 export class ImageResponse extends Response {
     constructor(element, options, props) {
         const extended_options = Object.assign({ ...DEFAULT_OPTIONS }, options);
-        const create_image_funtion = extended_options.format === 'png' ? createPng : createSvg;
+        const create_image_function = extended_options.format === 'png' ? createPng : createSvg;
         const body = new ReadableStream({
             async start(controller) {
-                const buffer = await create_image_funtion(element, extended_options, { props });
+                const buffer = await create_image_function(element, extended_options, { props });
                 controller.enqueue(buffer);
                 controller.close();
             }
         });
         super(body, {
             headers: {
-                'Content-Type': `image/${extended_options.format}`,
-                'Cache-Control': (extended_options.debug || isDevelopment)
+                'Content-Type': `image/${extended_options.format}${extended_options.format === 'svg' ? '+xml' : ''}`,
+                'Cache-Control': extended_options.debug
                     ? 'no-cache, no-store'
                     : 'public, immutable, no-transform, max-age=31536000',
                 ...extended_options.headers

package/dist/providers/instances.js

@@ -5,14 +5,9 @@ import { isEdgeLight, isWorkerd } from 'std-env';
 const resvgInstance = { instance: undefined };
 const satoriInstance = { instance: undefined };
 export async function useResvg() {
-    const moduleImport = isEdgeLight || isWorkerd ? import(`./resvg/wasm.js`) : import('./resvg/node.js');
-    try {
-        resvgInstance.instance = resvgInstance.instance || await moduleImport.then(m => m.default);
-        await resvgInstance.instance.initWasmPromise;
-    }
-    catch (e) {
-        console.log(e);
-    }
+    const moduleImport = isEdgeLight || isWorkerd ? import(`./resvg/edge.js`) : import('./resvg/node.js');
+    resvgInstance.instance = resvgInstance.instance || await moduleImport.then(m => m.default);
+    await resvgInstance.instance.initWasmPromise;
     return resvgInstance.instance.Resvg;
 }
 export async function useSatori() {

package/dist/providers/resvg/node.d.ts

@@ -3,4 +3,4 @@ declare namespace _default {
     export { _Resvg as Resvg };
 }
 export default _default;
-import { Resvg as _Resvg } from '@resvg/resvg-js';
+import { Resvg as _Resvg } from '@resvg/resvg-wasm';

package/dist/providers/resvg/node.js

@@ -1,6 +1,13 @@
-import { Resvg as _Resvg } from '@resvg/resvg-js'
+import { Resvg as _Resvg, initWasm } from '@resvg/resvg-wasm';
+
+/**
+ * Fetch will be called only once whenever you load this file.
+ * In vercel serverless functions, fetch will run on cold start.
+ * In Node.js (Stateful e.g. Linux servers), Fetch will run once when you start your server.
+ * */
+const resvgWasm = fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm')
 
 export default {
-	initWasmPromise: Promise.resolve(),
+	initWasmPromise: initWasm(resvgWasm),
 	Resvg: _Resvg,
-}
+}

package/dist/types.d.ts

@@ -64,7 +64,7 @@ export type ImageResponseOptions = ImageOptions & ResponseImageOptions;
  * Svelte Component props to render the component which dynamic content
  * */
 export type ComponentOptions = {
-    props: Record<string, any>;
+    props?: Record<string, any>;
 };
 /**
  * React virtual node, supported by satori as input (alternative to JSX input).
@@ -77,23 +77,3 @@ export interface VNode {
         [prop: string]: any;
     };
 }
-/**
- * Supported runtimes by sveltekit-og
- * TODO: Test all the runtimes.
- * */
-export type SupportedRuntimes = 'node' | 'stackblitz' | 'codesandbox' | 'aws-lambda' | 'netlify' | 'netlify-edge' | 'vercel' | 'vercel-edge' | 'cloudflare-pages' | 'cloudflare-workers';
-/**
- * Files support on the basis of runtime
- * node: Use nodejs based implementation of the provider
- * wasm: Use wasm based implementation of the provider
- * wasm-fs: Mainly provided for web containers which supports `fs`.
- * */
-type SupportedImplementations = 'node' | 'wasm' | 'wasm-fs';
-/**
- * Provider and There supported Implementations
- * */
-export interface RuntimeCompatibility {
-    resvg: SupportedImplementations;
-    satori: SupportedImplementations;
-}
-export {};

package/dist/types.js

@@ -1,3 +1 @@
-;
-;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ethercorps/sveltekit-og",
-	"version": "3.0.0-next.12",
+	"version": "3.0.0-next.14",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run package",
@@ -57,21 +57,11 @@
 		"satori": "^0.10.13",
 		"std-env": "^3.7.0",
 		"unwasm": "^0.3.9",
-		"yoga-wasm-web": "^0.3.3"
+		"@resvg/resvg-wasm": "^2.6.2"
 	},
 	"peerDependencies": {
 		"svelte": "^4.0.0",
 		"unwasm": "^0.3.9",
-		"vite-plugin-wasm": "^3.3.0",
-		"@resvg/resvg-js": "^2.6.2",
-		"@resvg/resvg-wasm": "^2.6.2"
-	},
-	"peerDependenciesMeta": {
-		"@resvg/resvg-js": {
-			"optional": true
-		},
-		"@resvg/resvg-wasm": {
-			"optional": true
-		}
+		"vite-plugin-wasm": "^3.3.0"
 	}
 }

package/dist/providers/satori/wasm.d.ts

@@ -1,6 +0,0 @@
-declare namespace _default {
-    export function initWasmPromise(resolve: any): void;
-    export { _satori as satori };
-}
-export default _default;
-import _satori from 'satori/wasm';

package/dist/providers/satori/wasm.js

@@ -1,16 +0,0 @@
-import _satori from 'satori/wasm'
-import initYoga from 'yoga-wasm-web'
-import { init } from 'satori'
-
-const wasm = import('yoga-wasm-web/dist/yoga.wasm?module')
-  .then(async yoga => await initYoga(yoga.default || yoga))
-
-export default {
-  initWasmPromise: ((resolve) => {
-    wasm.then((yoga) => {
-      init(yoga)
-      resolve()
-    })
-  }),
-  satori: _satori,
-}

package/dist/runtime/compatability.d.ts

@@ -1,2 +0,0 @@
-import type { RuntimeCompatibility, SupportedRuntimes } from '../types.js';
-export declare const runtimeCompatibility: Record<SupportedRuntimes, RuntimeCompatibility>;

package/dist/runtime/compatability.js

@@ -1,25 +0,0 @@
-const NodeRuntime = {
-    'resvg': 'wasm',
-    'satori': 'wasm',
-};
-const WorkersRuntime = {
-    'resvg': 'wasm',
-    'satori': 'node',
-};
-const WebContainerRuntime = {
-    'resvg': 'wasm-fs',
-    'satori': 'wasm-fs',
-};
-export const runtimeCompatibility = {
-    'dev': NodeRuntime,
-    'node': NodeRuntime,
-    'stackblitz': WebContainerRuntime,
-    'codesandbox': WebContainerRuntime,
-    'aws-lambda': NodeRuntime,
-    'netlify': NodeRuntime,
-    'netlify-edge': WorkersRuntime,
-    'vercel': NodeRuntime,
-    'vercel-edge': WorkersRuntime,
-    'cloudflare-pages': WorkersRuntime,
-    'cloudflare-workers': WorkersRuntime
-};

package/dist/runtime/detector.d.ts

@@ -1,3 +0,0 @@
-import type { RuntimeCompatibility, SupportedRuntimes } from '../types.js';
-export declare function getRuntime(): SupportedRuntimes;
-export declare function getRuntimeCompatibility(runtime?: SupportedRuntimes): RuntimeCompatibility;

package/dist/runtime/detector.js

@@ -1,29 +0,0 @@
-import { provider, env, runtime, isDevelopment } from 'std-env';
-import { runtimeCompatibility } from '../runtime/compatability.js';
-export function getRuntime() {
-    if (provider === 'stackblitz' || provider === 'codesandbox')
-        return provider;
-    if (isDevelopment) {
-        return 'node';
-    }
-    const parsedProvider = provider.replace('_', '-');
-    const compatibility = runtimeCompatibility[env['OG_RUNTIME'] || parsedProvider];
-    if (compatibility)
-        return parsedProvider;
-    switch (runtime) {
-        case 'node':
-        case 'deno':
-        case 'bun':
-        case 'netlify':
-        default:
-            return 'node';
-        case 'edge-light':
-            return 'vercel-edge';
-        case 'workerd':
-            return 'cloudflare-workers';
-    }
-    ;
-}
-export function getRuntimeCompatibility(runtime = getRuntime()) {
-    return runtimeCompatibility[runtime];
-}