@ethercorps/sveltekit-og 2.0.1 → 3.0.0-alpha.1

package/dist/types.d.ts

@@ -0,0 +1,11 @@
+import type { SatoriOptions } from 'satori/wasm';
+export interface ImageResponseOptions {
+    width?: number;
+    height?: number;
+    fonts?: SatoriOptions['fonts'];
+    debug?: boolean;
+    status?: number;
+    statusText?: string;
+    headers?: Record<string, string>;
+    format?: 'svg' | 'png';
+}

package/package.json

@@ -1,38 +1,39 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "2.0.1",
+  "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": {
-    "@playwright/test": "^1.35.0",
-    "@sveltejs/adapter-auto": "next",
-    "@sveltejs/adapter-vercel": "^2.4.3",
-    "@sveltejs/kit": "1.10.0",
-    "@sveltejs/package": "next",
-    "@typescript-eslint/eslint-plugin": "^5.59.9",
-    "@typescript-eslint/parser": "^5.59.9",
-    "autoprefixer": "^10.4.14",
-    "brace": "^0.11.1",
-    "eslint": "^8.42.0",
-    "eslint-config-prettier": "^8.8.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "postcss": "^8.4.24",
-    "prettier": "^2.8.8",
-    "prettier-plugin-svelte": "^2.10.1",
-    "prism-svelte": "^0.5.0",
-    "prismjs": "^1.29.0",
-    "svelte": "^3.59.1",
-    "svelte-check": "^2.10.3",
-    "svelte-preprocess": "^4.10.7",
-    "tailwindcss": "^3.3.2",
-    "tslib": "^2.5.3",
-    "typescript": "^4.9.5",
-    "vite": "^4.3.9"
+    "svelte": "^4.2.2",
+    "@types/node": "^20.5.1",
+    "esbuild": "^0.18.20",
+    "esbuild-plugin-d.ts": "^1.1.0",
+    "typescript": "^5.1.6"
   },
-  "type": "module",
   "dependencies": {
-    "satori": "^0.10.1",
-    "svg2png-wasm": "^1.4.0"
+    "@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",
@@ -44,12 +45,13 @@
     "sveltekit-og",
     "@ethercorps/sveltekit-og"
   ],
+  "author": "theetherGit",
   "license": "MIT",
-  "repository": "https://github.com/etherCorps/sveltekit-og",
-  "homepage": "https://github.com/etherCorps/sveltekit-og#readme",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": "./index.js",
-    "./toReactElement": "./toReactElement.js"
+  "bugs": {
+    "url": "https://github.com/etherCorps/sveltekit-og/issues"
+  },
+  "scripts": {
+    "build": "node bin/esbuild.js",
+    "ts": "tsc --noEmit"
   }
 }

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2022 Ether Corps
-
-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/index.d.ts

@@ -1,17 +0,0 @@
-import { type SatoriOptions } from 'satori';
-import type { SvelteComponent } from 'svelte';
-import toReactElement from './toReactElement.js';
-declare const ImageResponse: (htmlTemplate: string, optionsByUser: ImageResponseOptions) => Promise<Response>;
-declare const componentToImageResponse: (component: typeof SvelteComponent, props: {} | undefined, optionsByUser: ImageResponseOptions) => Promise<Response>;
-type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
-type ImageOptions = {
-    width?: number;
-    height?: number;
-    debug?: boolean;
-    fonts?: SatoriOptions['fonts'];
-    backgroundColor?: string;
-    graphemeImages?: Record<string, string>;
-    loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions['fonts'] | string | undefined>;
-};
-export type ImageResponseType = typeof ImageResponse;
-export { componentToImageResponse, ImageResponse, toReactElement };

package/index.js

@@ -1,62 +0,0 @@
-import satori, {} from 'satori';
-import toReactElement from './toReactElement.js';
-import { svg2png, initialize } from 'svg2png-wasm';
-let initialized = false;
-const fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
-const fontData = await fontFile.arrayBuffer();
-const indexWasmRes = await fetch('https://unpkg.com/svg2png-wasm/svg2png_wasm_bg.wasm');
-const svg2PngWasmBuffer = await indexWasmRes.arrayBuffer();
-const initSvgToPng = async () => {
-    await initialize(svg2PngWasmBuffer).catch((e) => console.log(e));
-    initialized = true;
-};
-const ImageResponse = async (htmlTemplate, optionsByUser) => {
-    const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
-    const svg = await satori(toReactElement(htmlTemplate), {
-        width: options.width,
-        height: options.height,
-        debug: options.debug,
-        fonts: options.fonts || [
-            {
-                name: 'sans serif',
-                data: fontData,
-                style: 'normal',
-                weight: 700
-            }
-        ]
-    });
-    if (!initialized) {
-        await initSvgToPng();
-        initialized = true;
-    }
-    const defaultConfig = {
-        width: options.width,
-        height: options.height // optional
-    };
-    if (Object.hasOwn(options, 'backgroundColor')) {
-        defaultConfig.backgroundColor = options.backgroundColor;
-    }
-    const png = await svg2png(svg, defaultConfig);
-    return new Response(png, {
-        headers: {
-            'Content-Type': 'image/png',
-            'cache-control': 'public, immutable, no-transform, max-age=31536000',
-            ...options.headers
-        },
-        status: options.status,
-        statusText: options.statusText
-    });
-};
-const componentToImageResponse = (component, props = {}, optionsByUser) => {
-    const htmlTemplate = componentToMarkup(component, props);
-    return 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;
-};
-export { componentToImageResponse, ImageResponse, toReactElement };

package/toReactElement.d.ts

@@ -1,10 +0,0 @@
-interface VNode {
-    type: string;
-    props: {
-        style?: Record<string, any>;
-        children?: string | VNode | VNode[];
-        [prop: string]: any;
-    };
-}
-export declare const toReactElement: (htmlString: string) => VNode;
-export default toReactElement;

package/toReactElement.js

@@ -1,100 +0,0 @@
-import { parse, walk } from 'svelte/compiler';
-/* Start of code from satori-html for cssToObject converter*/
-const camelize = (ident) => ident.replace(/-([a-z])/g, (_, char) => char.toUpperCase());
-const cssToObject = (str) => {
-    const obj = {};
-    let t = 0;
-    let pair = ['', ''];
-    const flags = {};
-    for (const c of str) {
-        if (!flags['('] && c === ':') {
-            t = 1;
-        }
-        else if (c === ';') {
-            const [decl = '', value = ''] = pair;
-            obj[camelize(decl.trim())] = value.trim();
-            t = 0;
-            pair = ['', ''];
-        }
-        else {
-            pair[t] += c;
-            switch (c) {
-                case '(': {
-                    flags[c]++;
-                    break;
-                }
-                case ')': {
-                    flags['(']--;
-                    break;
-                }
-            }
-        }
-    }
-    const [decl = '', value = ''] = pair;
-    if (decl.trim() && value.trim()) {
-        obj[camelize(decl.trim())] = value.trim();
-    }
-    return obj;
-};
-const nodeMap = new WeakMap();
-const root = {
-    type: 'div',
-    props: {
-        style: {
-            display: 'flex',
-            flexDirection: 'column',
-            width: '100%',
-            height: '100%'
-        },
-        children: []
-    }
-};
-/* End of satori-html */
-export const toReactElement = (htmlString) => {
-    const svelteAST = parse(htmlString);
-    walk(svelteAST, {
-        enter(node, parent, prop, index) {
-            let newNode = {};
-            if (node.type === 'Fragment') {
-                nodeMap.set(node, root);
-            }
-            else if (node.type === 'Element') {
-                newNode.type = node.name;
-                const { ...props } = node.attributes;
-                if (node.attributes.length > 0) {
-                    node.attributes.forEach((attribute) => {
-                        if (attribute.name === 'style') {
-                            props['style'] = cssToObject(attribute.value[0].data);
-                        }
-                        else
-                            props[attribute.name] = attribute.value[0].data;
-                    });
-                    delete props[0];
-                }
-                props.children = [];
-                Object.assign(newNode, { props });
-                nodeMap.set(node, newNode);
-                if (parent) {
-                    const newParent = nodeMap.get(parent);
-                    newParent.props.children[index] = newNode;
-                }
-            }
-            else if (node.type === 'Text') {
-                newNode = node.data.trim();
-                if (newNode) {
-                    if (parent && parent.type !== 'Attribute') {
-                        const newParent = nodeMap.get(parent);
-                        if (parent.children.length === 1) {
-                            newParent.props.children = newNode;
-                        }
-                        else {
-                            newParent.props.children[index] = newNode;
-                        }
-                    }
-                }
-            }
-        }
-    });
-    return root;
-};
-export default toReactElement;