@ethercorps/sveltekit-og 0.1.8 → 1.1.0

package/README.md

@@ -3,6 +3,66 @@
 About
 Generate Open Graph Images dynamically from HTML/CSS without a browser in SvelteKit.
 
+## v1.0.0 Update (Breaking Changes)
+
+Finally, We have added html to react like element like object converter out of the box and with svelte compiler.
+Now you can use `{ toReactElement }` with `"@ethercorps/sveltekit-og"` like:
+
+```typescript
+// +page.server.js
+
+import { toReactElement, satori } from '@ethercorps/sveltekit-og';
+
+const htmlString = `
+        <div tw="bg-gray-50 flex w-full">
+        <div tw="flex flex-col md:flex-row w-full py-12 px-4 md:items-center justify-between p-8">
+          <h2 tw="flex flex-col text-3xl sm:text-4xl font-bold tracking-tight text-gray-900 text-left">
+            <span>Ready to dive in?</span>
+            <span tw="text-indigo-600">Start your free trial today.</span>
+          </h2>
+          <div tw="mt-8 flex md:mt-0">
+            <div tw="flex rounded-md shadow">
+              <a tw="flex items-center justify-center rounded-md border border-transparent bg-indigo-600 px-5 py-3 text-base font-medium text-white">Get started</a>
+            </div>
+            <div tw="ml-3 flex rounded-md shadow">
+              <a tw="flex items-center justify-center rounded-md border border-transparent bg-white px-5 py-3 text-base font-medium text-indigo-600">Learn more</a>
+            </div>
+          </div>
+        </div>
+        </div>
+        `;
+const newNode = toReactElement(htmlString);
+
+/** @type {import('./$types').PageServerLoad} */
+export async function load() {
+	const fontFile400 = await fetch(
+		'https://og-playground.vercel.app/inter-latin-ext-400-normal.woff'
+	);
+	const fontData400 = await fontFile400.arrayBuffer();
+	const svg = await satori(newNode, {
+		height: 350,
+		width: 500,
+		fonts: [
+			{
+				name: 'sans serif',
+				data: fontData400,
+				style: 'normal',
+				weight: 700
+			}
+		]
+	});
+
+	return { svg };
+}
+```
+
+- We have changed to function based instead of class based ImageResponse and componentToImageResponse.
+- Removed `@resvg/resvg-wasm` with `@resvg/resvg-js` because of internal errors.
+- Removed `satori-html` because now we have `toReactElement` out of the box with svelte compiler.
+  > If you find a problem related to undefined a please check [_vite.config.js_](/vite.config.ts) and add ` define: { _a: 'undefined' } in config.`
+
+> If you find any issue and have suggestion for this project please open a ticket and if you want to contribute please create a new discussion.
+
 ## Quick Start
 
 Install `@ethercorps/sveltekit-og`, then use it inside a server endpoint route (+server.ts or +server.js):
@@ -34,7 +94,7 @@ const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-4
 const fontData: ArrayBuffer = await fontFile.arrayBuffer();
 
 export const GET: RequestHandler = async () => {
-	return new ImageResponse(template, {
+	return await ImageResponse(template, {
 		height: 250,
 		width: 500,
 		fonts: [
@@ -56,7 +116,7 @@ Read more about the API, supported features and check out the examples on Satori
 
 ## Examples:
 
-- `ImageResponse` · [_source_](/src/routes/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app)
+- `ImageResponse` · [_source_](/src/routes/new/+server.ts) · [_demo_](https://sveltekit-og-five.vercel.app/new)
 - `componentToImageResponse` · [_source_](/src/routes/component-og/) · [_demo_](https://sveltekit-og-five.vercel.app/component-og)
 
 ## API Reference
@@ -68,7 +128,7 @@ import {ImageResponse, componentToImageResponse} from '@ethercorps/sveltekit-og'
 import {SvelteComponent} from "svelte";
 
 // ...
-new ImageResponse(
+ImageResponse(
     element : string,
     options : {
     width ? : number = 1200
@@ -88,7 +148,7 @@ new ImageResponse(
     headers ? : Record<string, string>
     })
 
-new componentToImageResponse(
+componentToImageResponse(
     component : typeof SvelteComponent,
     props : {}, // All export let example inside prop dictionary
     options : {
@@ -130,7 +190,6 @@ 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)
 

package/index.d.ts

@@ -1,13 +1,10 @@
-import type { SatoriOptions } from 'satori';
+import { type SatoriOptions } from 'satori';
 import type { SvelteComponent } from 'svelte';
-declare class ImageResponse {
-    constructor(htmlTemplate: string, optionsByUser: ImageResponseOptions);
-}
-declare class componentToImageResponse {
-    constructor(component: typeof SvelteComponent, props: {} | undefined, optionsByUser: ImageResponseOptions);
-}
-declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
-declare type ImageOptions = {
+import toReactElement from './toReactElement';
+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;
@@ -15,4 +12,5 @@ declare type ImageOptions = {
     graphemeImages?: Record<string, string>;
     loadAdditionalAsset?: (languageCode: string, segment: string) => Promise<SatoriOptions['fonts'] | string | undefined>;
 };
-export { componentToImageResponse, ImageResponse };
+type ImageResponseType = typeof ImageResponse;
+export { componentToImageResponse, ImageResponse, toReactElement, type ImageResponseType };

package/index.js

@@ -1,50 +1,45 @@
-import { html as toReactNode } from 'satori-html';
-import satori from 'satori';
-import { Resvg, initWasm } from '@resvg/resvg-wasm';
-const resSvgWasm = initWasm(fetch('https://sveltekit-og.ethercorps.io/resvg.wasm'));
+import satori, {} from 'satori';
+import { Resvg } from '@resvg/resvg-js';
+import toReactElement from './toReactElement';
 const fontFile = await fetch('https://sveltekit-og.ethercorps.io/noto-sans.ttf');
 const fontData = await fontFile.arrayBuffer();
-class ImageResponse {
-    constructor(htmlTemplate, optionsByUser) {
-        const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
-        const png = new ReadableStream({
-            async start(a) {
-                await resSvgWasm;
-                const svg = await satori(toReactNode(htmlTemplate), {
-                    width: options.width,
-                    height: options.height,
-                    debug: options.debug,
-                    fonts: options.fonts || [
-                        {
-                            name: 'sans serif',
-                            data: fontData,
-                            style: 'normal',
-                            weight: 700
-                        }
-                    ]
-                });
-                const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } });
-                a.enqueue(pngData.render().asPng());
-                a.close();
+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
             }
-        });
-        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
-        });
-    }
-}
-class componentToImageResponse {
-    constructor(component, props = {}, optionsByUser) {
-        const htmlTemplate = componentToMarkup(component, props);
-        return new ImageResponse(htmlTemplate, optionsByUser);
-    }
-}
+        ]
+    });
+    const reSvgOptions = {
+        fitTo: {
+            mode: 'width',
+            value: options.width
+        }
+    };
+    const reSvgObject = new Resvg(svg, reSvgOptions);
+    const pngData = await reSvgObject.render().asPng();
+    return new Response(pngData, {
+        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}`;
@@ -53,4 +48,4 @@ const componentToMarkup = (component, props = {}) => {
     }
     return htmlTemplate;
 };
-export { componentToImageResponse, ImageResponse };
+export { componentToImageResponse, ImageResponse, toReactElement };

package/package.json

@@ -1,31 +1,39 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "0.1.8",
+  "version": "1.1.0",
   "private": false,
   "devDependencies": {
-    "@playwright/test": "^1.27.1",
+    "@playwright/test": "^1.28.1",
     "@sveltejs/adapter-auto": "next",
-    "@sveltejs/kit": "next",
+    "@sveltejs/kit": "1.0.0-next.581",
     "@sveltejs/package": "next",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "eslint": "^8.27.0",
+    "@typescript-eslint/eslint-plugin": "^5.46.0",
+    "@typescript-eslint/parser": "^5.46.0",
+    "autoprefixer": "^10.4.13",
+    "brace": "^0.11.1",
+    "eslint": "^8.29.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^2.7.1",
-    "prettier-plugin-svelte": "^2.8.0",
-    "svelte": "^3.53.1",
-    "svelte-check": "^2.9.2",
+    "monaco-editor": "^0.34.1",
+    "postcss": "^8.4.19",
+    "prettier": "^2.8.1",
+    "prettier-plugin-svelte": "^2.9.0",
+    "prismjs": "^1.29.0",
+    "svelte": "^3.54.0",
+    "svelte-check": "^2.10.2",
     "svelte-preprocess": "^4.10.7",
+    "tailwindcss": "^3.2.4",
     "tslib": "^2.4.1",
-    "typescript": "^4.8.4",
-    "vite": "^3.2.3"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.0"
   },
   "type": "module",
   "dependencies": {
-    "@resvg/resvg-wasm": "^2.1.0",
-    "satori": "^0.0.44",
-    "satori-html": "^0.3.0"
+    "@resvg/resvg-js": "^2.2.0",
+    "satori": "^0.0.44"
+  },
+  "peerDependencies": {
+    "svelte": "^3.54.0"
   },
   "keywords": [
     "open graph image",
@@ -43,6 +51,7 @@
   "homepage": "https://github.com/etherCorps/sveltekit-og#readme",
   "exports": {
     "./package.json": "./package.json",
-    ".": "./index.js"
+    ".": "./index.js",
+    "./toReactElement": "./toReactElement.js"
   }
 }

package/toReactElement.d.ts

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

package/toReactElement.js

@@ -0,0 +1,100 @@
+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 */
+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;