@ethercorps/sveltekit-og 2.0.0 → 2.0.2

package/README.md

@@ -1,188 +1,58 @@
-# SvelteKit Open Graph Image Generation
+# create-svelte
 
-Dynamically generate Open Graph images from an HTML+CSS template or Svelte component using fast and efficient conversion from HTML > SVG > PNG. Based on [Satori](https://github.com/vercel/satori#documentation). No headless browser required.
+Everything you need to build a Svelte library, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 
-## Installation
+Read more about creating a library [in the docs](https://kit.svelte.dev/docs/packaging).
 
-```bash
-pnpm install -D @ethercorps/sveltekit-og
-```
-> Using with Cloudflare Pages or Workers then you have to provide `url` polyfill by just installing it as `devDependency`.
-> 
-```bash
-pnpm i -D url
-```
-
-## Usage
-
-Create a file at `/src/routes/og/+server.ts`. Alternatively, you can use JavaScript by removing the types from this example.
-
-```typescript
-// src/routes/og/+server.ts
-import { ImageResponse } from '@ethercorps/sveltekit-og';
-import { RequestHandler } from './$types';
-
-const template = `
- <div tw="bg-gray-50 flex w-full h-full items-center justify-center">
-    <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 href="#" 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 href="#" 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 fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
-const fontData: ArrayBuffer = await fontFile.arrayBuffer();
-
-export const GET: RequestHandler = async () => {
-  return await ImageResponse(template, {
-    height: 630,
-    width: 1200,
-    fonts: [
-      {
-        name: 'Inter Latin',
-        data: fontData,
-        weight: 400
-      }
-    ]
-  });
-};
-```
-
-Then run `npm dev` and visit `localhost:5173/og` to view your generated PNG. Remember that hot module reloading does not work with server routes, so if you change your HTML or CSS, hard refresh the route to see changes. 
-
-## Example Output
-
-![Rendered OG image](static/demo.png)
-
-## Headers
-
-When run in development, image headers contain `cache-control: no-cache, no-store`. In production, image headers contain `'cache-control': 'public, immutable, no-transform, max-age=31536000'`, which caches the image for 1 year. In both cases, the `'content-type': 'image/png'` is used.
-
-
-## Styling
-
-Notice that our example uses TailwindCSS classes (e.g. `tw="bg-gray-50"`). Alternatively, your HTML can contain style attributes using any of [the subset of CSS supported by Satori](https://github.com/vercel/satori#css). 
-
-Satori supports only a subset of HTML and CSS. For full details, see [Satori’s documentation](https://github.com/vercel/satori#documentation). Notably, Satori only supports flex-based layouts.
-
-## Fonts
-
-Satori supports `ttf`, `otf`, and `woff` font formats. To maximize the font parsing speed, `ttf` or `otf` are recommended over `woff`.
-
-By default, `@ethercorps/sveltekit-og` includes only 'Noto Sans' font. If you need to use other fonts, you can specify them as shown in the example. Notably, you can also import a font file that is stored locally within your project and are not required to use fetch. 
+## Creating a project
 
-## Examples
+If you're seeing this, you've probably already done this step. Congrats!
 
-- `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
-
-The package exposes an `ImageResponse` and `componentToImageResponse` constructors, with the following options available:
-
-```typescript
-import {ImageResponse, componentToImageResponse} from '@ethercorps/sveltekit-og'
-import {SvelteComponent} from "svelte";
-
-// ...
-ImageResponse(
-    element : string,
-    options : {
-      width ? : number = 1200
-      height ? : number = 630,
-      backgroundColor ? : string = "#fff"       
-      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>
-    })
+```bash
+# create a new project in the current directory
+npm create svelte@latest
 
-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>
-    })
+# create a new project in my-app
+npm create svelte@latest my-app
 ```
 
-## Changelog
+## Developing
 
-### v1.2.3 Update (Breaking Changes)
-> Now you have to install dependency by yourself which will make it easier to build for all plateforms.
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
 
-```
-npm i @resvg/resvg-js
-```
+```bash
+npm run dev
 
-```
-npm i satori
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
 ```
 
-> From now on their will be no issues related to build, and soon this library going to have its own documentation.
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
 
-### v1.2.2 Update (Breaking Change)
+## Building
 
-- We don't provide access to satori from `@ethercorps/sveltekit-og`.
+To build your library:
 
-### 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:
-
-- 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.`
+```bash
+npm run package
+```
 
-> 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.
+To create a production version of your showcase app:
 
-## Acknowledgements
+```bash
+npm run build
+```
 
-This project will not be possible without the following projects:
+You can preview the production build with `npm run preview`.
 
-- [Satori & @vercel/og](https://github.com/vercel/satori)
-- [Noto by Google Fonts](https://fonts.google.com/noto)
-- [svg2png-wasm](https://github.com/ssssota/svg2png-wasm)
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
 
-## Authors
+## Publishing
 
-- [@theetherGit](https://www.github.com/theetherGit)
-- [@etherCorps](https://www.github.com/etherCorps)
+Go into the `package.json` and give your package the desired name through the `"name"` option. Also consider adding a `"license"` field and point it to a `LICENSE` file which you can create from a template (one popular option is the [MIT license](https://opensource.org/license/mit/)).
 
-## Contributors
+To publish your library to [npm](https://www.npmjs.com):
 
-- [@jasongitmail](https://github.com/jasongitmail)
+```bash
+npm publish
+```

package/dist/api.d.ts

@@ -0,0 +1,63 @@
+/// <reference types="node" />
+import { ImageResponse as IR } from "@vercel/og";
+import type { SvelteComponent } from "svelte";
+export declare const ImageResponse: (htmlTemplate: string, options?: ImageResponseOptions) => Promise<IR>;
+export declare const componentToImageResponse: (component: SvelteComponent, props: Record<string, any>, options?: ImageResponseOptions) => Promise<IR>;
+declare const apis: {
+    twemoji: (code: any) => string;
+    openmoji: string;
+    blobmoji: string;
+    noto: string;
+    fluent: (code: any) => string;
+    fluentFlat: (code: any) => string;
+};
+declare type EmojiType = keyof typeof apis;
+type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+type Style$1 = 'normal' | 'italic';
+interface FontOptions {
+    data: Buffer | ArrayBuffer;
+    name: string;
+    weight?: Weight;
+    style?: Style$1;
+    lang?: string;
+}
+export declare type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
+declare type ImageOptions = {
+    /**
+     * The width of the image.
+     *
+     * @type {number}
+     * @default 1200
+     */
+    width?: number;
+    /**
+     * The height of the image.
+     *
+     * @type {number}
+     * @default 630
+     */
+    height?: number;
+    /**
+     * Display debug information on the image.
+     *
+     * @type {boolean}
+     * @default false
+     */
+    debug?: boolean;
+    /**
+     * A list of fonts to use.
+     *
+     * @type {{ data: ArrayBuffer; name: string; weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900; style?: 'normal' | 'italic' }[]}
+     * @default Noto Sans Latin Regular.
+     */
+    fonts?: FontOptions[];
+    /**
+     * Using a specific Emoji style. Defaults to `twemoji`.
+     *
+     * @link https://github.com/vercel/og#emoji
+     * @type {EmojiType}
+     * @default 'twemoji'
+     */
+    emoji?: EmojiType;
+};
+export {};

package/dist/api.js

@@ -0,0 +1,12 @@
+import { html } from "satori-html";
+import { ImageResponse as IR } from "@vercel/og";
+export const ImageResponse = async (htmlTemplate, options) => {
+    const reactVNode = html(`${htmlTemplate}`);
+    console.log(reactVNode);
+    return new IR(reactVNode, options);
+};
+export const componentToImageResponse = async (component, props, options) => {
+    const ssrSvelte = component.render(props);
+    console.log(ssrSvelte);
+    return ImageResponse(`${ssrSvelte.html}<style>${ssrSvelte.css.code}</style>`, options);
+};

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { componentToImageResponse, ImageResponse, type ImageResponseOptions } from "./api.js";

package/dist/index.js

@@ -0,0 +1 @@
+export { componentToImageResponse, ImageResponse } from "./api.js";

package/package.json

@@ -1,54 +1,55 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "2.0.0",
-  "private": false,
+  "version": "2.0.2",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*"
+  ],
+  "peerDependencies": {
+    "svelte": "^4.0.0"
+  },
   "devDependencies": {
-    "@playwright/test": "^1.34.3",
-    "@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",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.20.4",
+    "@sveltejs/package": "^2.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.45.0",
+    "@typescript-eslint/parser": "^5.45.0",
+    "eslint": "^8.28.0",
+    "eslint-config-prettier": "^8.5.0",
+    "eslint-plugin-svelte": "^2.30.0",
+    "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.10.1",
-    "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"
+    "publint": "^0.1.9",
+    "svelte": "^4.0.5",
+    "svelte-check": "^3.4.3",
+    "tslib": "^2.4.1",
+    "typescript": "^5.0.0",
+    "vite": "^4.4.2",
+    "vitest": "^0.34.0"
   },
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
   "type": "module",
   "dependencies": {
-    "satori": "^0.10.1",
-    "svg2png-wasm": "^1.4.0"
+    "@vercel/og": "^0.5.17",
+    "satori-html": "^0.3.2"
   },
-  "keywords": [
-    "open graph image",
-    "open graph",
-    "og image",
-    "og:image",
-    "social",
-    "card",
-    "sveltekit og",
-    "sveltekit-og",
-    "@ethercorps/sveltekit-og"
-  ],
-  "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"
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build && npm run package",
+    "preview": "vite preview",
+    "package": "svelte-kit sync && svelte-package && publint",
+    "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 ."
   }
 }

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';
-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';
-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;