@ethercorps/sveltekit-og 3.0.0-alpha.1 → 3.0.0-next.11

package/dist/providers/instances.d.ts

@@ -0,0 +1,38 @@
+import type _satori from 'satori';
+export declare function useResvg(): Promise<new (svg: Uint8Array | string, options?: import("@resvg/resvg-wasm").ResvgRenderOptions) => {
+    free(): void;
+    render(): {
+        free(): void;
+        asPng(): Uint8Array;
+        readonly height: number;
+        readonly pixels: Uint8Array;
+        readonly width: number;
+    };
+    toString(): string;
+    innerBBox(): {
+        free(): void;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    } | undefined;
+    getBBox(): {
+        free(): void;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    } | undefined;
+    cropByBBox(bbox: {
+        free(): void;
+        height: number;
+        width: number;
+        x: number;
+        y: number;
+    }): void;
+    imagesToResolve(): any[];
+    resolveImage(href: string, buffer: Uint8Array): void;
+    readonly height: number;
+    readonly width: number;
+}>;
+export declare function useSatori(): Promise<typeof _satori>;

package/dist/providers/instances.js

@@ -0,0 +1,22 @@
+import { isEdgeLight, isWorkerd } from 'std-env';
+// we keep instances alive to avoid re-importing them on every request, maybe not needed but
+// also helps with type inference
+// Code from vue-og-images
+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);
+    }
+    return resvgInstance.instance.Resvg;
+}
+export async function useSatori() {
+    satoriInstance.instance = satoriInstance.instance || await import(`./satori/node.js`).then(m => m.default);
+    await satoriInstance.instance.initWasmPromise;
+    return satoriInstance.instance.satori;
+}

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

@@ -0,0 +1,6 @@
+declare namespace _default {
+    export let initWasmPromise: Promise<void>;
+    export { _Resvg as Resvg };
+}
+export default _default;
+import { Resvg as _Resvg } from '@resvg/resvg-js';

package/dist/providers/resvg/node.js

@@ -0,0 +1,6 @@
+import { Resvg as _Resvg } from '@resvg/resvg-js'
+
+export default {
+	initWasmPromise: Promise.resolve(),
+	Resvg: _Resvg,
+}

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

@@ -0,0 +1,6 @@
+declare namespace _default {
+    export let initWasmPromise: Promise<void>;
+    export { _Resvg as Resvg };
+}
+export default _default;
+import { Resvg as _Resvg } from '@resvg/resvg-wasm';

package/dist/providers/resvg/wasm.js

@@ -0,0 +1,6 @@
+import { Resvg as _Resvg, initWasm } from '@resvg/resvg-wasm'
+
+export default {
+  initWasmPromise: initWasm(import('@resvg/resvg-wasm/index_bg.wasm?module').then(r => r.default || r)),
+  Resvg: _Resvg,
+}

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

@@ -0,0 +1,6 @@
+declare namespace _default {
+    export let initWasmPromise: Promise<void>;
+    export { _satori as satori };
+}
+export default _default;
+import _satori from 'satori';

package/dist/providers/satori/node.js

@@ -0,0 +1,6 @@
+import _satori from 'satori'
+
+export default {
+  initWasmPromise: Promise.resolve(),
+  satori: _satori,
+}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,16 @@
+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

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

package/dist/runtime/compatability.js

@@ -0,0 +1,25 @@
+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

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

package/dist/runtime/detector.js

@@ -0,0 +1,29 @@
+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];
+}

package/dist/types.d.ts

@@ -1,11 +1,99 @@
 import type { SatoriOptions } from 'satori/wasm';
-export interface ImageResponseOptions {
+export type ImageOptions = {
+    /**
+     * Width of the image
+     * @default 1200
+     * */
     width?: number;
+    /**
+     * Height of the image
+     * @default 630
+     * */
     height?: number;
+    /**
+     * Emoji provider
+     * @default twemoji
+     * */
+    emoji?: 'twemoji' | 'blobmoji' | 'noto' | 'openmoji' | 'fluent' | 'fluentFlat';
+    /**
+     * Fonts used for your text
+     * @default `helpers/defaults.js`
+     * */
     fonts?: SatoriOptions['fonts'];
+    /**
+     * Tailwind config
+     * @default provided by satori
+     * */
+    tailwindConfig?: SatoriOptions['tailwindConfig'];
+    /**
+     * Debug operations
+     * @default false
+     * */
     debug?: boolean;
+    /**
+     * Image format
+     * @default png
+     * */
+    format?: 'svg' | 'png';
+};
+export type ResponseImageOptions = {
+    /**
+     * Status code for response
+     * @default 200
+     * */
     status?: number;
+    /**
+     * Status text for response
+     * @default Success
+     * */
     statusText?: string;
+    /**
+     * Response Headers
+     * @default {
+     *   'Content-Type': 'image/png',
+     *   'Cache-Control': options.debug ? 'no-cache, no-store' : 'public, immutable, no-transform, max-age=31536000'
+     * }
+     * */
     headers?: Record<string, string>;
-    format?: 'svg' | 'png';
+};
+/**
+ * Image response options type exposed to devs for ImageResponse Instance
+ * */
+export type ImageResponseOptions = ImageOptions & ResponseImageOptions;
+/**
+ * Svelte Component props to render the component which dynamic content
+ * */
+export type ComponentOptions = {
+    props: Record<string, any>;
+};
+/**
+ * React virtual node, supported by satori as input (alternative to JSX input).
+ * */
+export interface VNode {
+    type: string;
+    props: {
+        style?: Record<string, any>;
+        children?: string | VNode | 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

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

package/package.json

@@ -1,57 +1,69 @@
 {
-  "name": "@ethercorps/sveltekit-og",
-  "version": "3.0.0-alpha.1",
-  "private": false,
-  "description": "Generate Open Graph Images dynamically from HTML/CSS without a browser in SvelteKit",
-  "type": "module",
-  "files": [
-    "dist"
-  ],
-  "devDependencies": {
-    "svelte": "^4.2.2",
-    "@types/node": "^20.5.1",
-    "esbuild": "^0.18.20",
-    "esbuild-plugin-d.ts": "^1.1.0",
-    "typescript": "^5.1.6"
-  },
-  "dependencies": {
-    "@ethercorps/svelte-h2j": "link:../svelte-h2j",
-    "@resvg/resvg-wasm": "^2.4.1",
-    "just-camel-case": "^6.2.0",
-    "satori": "^0.10.3",
-    "yoga-wasm-web": "^0.3.3"
-  },
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "exports": {
-    ".": {
-      "import": "./dist/index.js",
-      "require": "./dist/index.js"
-    }
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/etherCorps/sveltekit-og.git"
-  },
-  "homepage": "https://github.com/etherCorps/sveltekit-og#readme",
-  "keywords": [
-    "open graph image",
-    "open graph",
-    "og image",
-    "og:image",
-    "social",
-    "card",
-    "sveltekit og",
-    "sveltekit-og",
-    "@ethercorps/sveltekit-og"
-  ],
-  "author": "theetherGit",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/etherCorps/sveltekit-og/issues"
-  },
-  "scripts": {
-    "build": "node bin/esbuild.js",
-    "ts": "tsc --noEmit"
-  }
+	"name": "@ethercorps/sveltekit-og",
+	"version": "3.0.0-next.11",
+	"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"
+		}
+	},
+	"files": [
+		"dist",
+		"!dist/**/*.test.*",
+		"!dist/**/*.spec.*"
+	],
+	"peerDependencies": {
+		"svelte": "^4.0.0"
+	},
+	"devDependencies": {
+		"@sveltejs/adapter-auto": "^3.2.2",
+		"@sveltejs/adapter-vercel": "^5.3.2",
+		"@sveltejs/kit": "^2.5.17",
+		"@sveltejs/package": "^2.3.2",
+		"@sveltejs/vite-plugin-svelte": "^3.1.1",
+		"@typescript-eslint/eslint-plugin": "^5.62.0",
+		"@typescript-eslint/parser": "^5.62.0",
+		"css-tree": "^2.3.1",
+		"eslint": "^8.57.0",
+		"eslint-config-prettier": "^8.10.0",
+		"eslint-plugin-svelte": "^2.40.0",
+		"prettier": "^2.8.8",
+		"prettier-plugin-svelte": "^2.10.1",
+		"publint": "^0.1.16",
+		"svelte": "^4.2.18",
+		"svelte-check": "^3.8.1",
+		"tslib": "^2.6.3",
+		"typescript": "^5.5.2",
+		"vite": "^5.3.1",
+		"vite-plugin-wasm": "^3.3.0",
+		"vitest": "^1.6.0"
+	},
+	"svelte": "./dist/index.js",
+	"types": "./dist/index.d.ts",
+	"type": "module",
+	"dependencies": {
+		"@ethercorps/svelte-h2j": "^4.0.0",
+		"satori": "^0.10.13",
+		"std-env": "^3.7.0",
+		"unwasm": "^0.3.9",
+		"yoga-wasm-web": "^0.3.3"
+	},
+	"optionalDependencies": {
+		"@resvg/resvg-js": "^2.6.2",
+		"@resvg/resvg-wasm": "^2.6.2"
+	}
 }

package/dist/api.d.ts

@@ -1,6 +0,0 @@
-import type { ImageResponseOptions } from './types.js';
-import type { SvelteComponent } from "svelte";
-export declare const og: (element: string | SvelteComponent, options: ImageResponseOptions, props?: {}) => Promise<string | Uint8Array>;
-export declare class ImageResponse extends Response {
-    constructor(element: string | SvelteComponent, options?: ImageResponseOptions, props?: {});
-}

package/dist/font.d.ts

@@ -1,5 +0,0 @@
-export declare function loadGoogleFont({ family, weight, text }: {
-    family: string;
-    weight?: number;
-    text?: string;
-}): Promise<ArrayBuffer>;