npm - @ethercorps/sveltekit-og - Versions diffs - 2.0.1 → 2.0.2 - Mend

@ethercorps/sveltekit-og 2.0.1 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/README.md CHANGED Viewed

@@ -1,189 +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
-```
+## Creating a project
-> Using with Cloudflare Pages or Workers then you have to provide `url` polyfill by just installing it as `devDependency`.
+If you're seeing this, you've probably already done this step. Congrats!
 ```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
-			}
-		]
-	});
-};
-```
+# create a new project in the current directory
+npm create svelte@latest
-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; `woff2` is not supported. 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.
-## Examples
-- `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>
-    })
-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)
+Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-> Now you have to install dependency by yourself which will make it easier to build for all plateforms.
-```
-npm i @resvg/resvg-js
-```
+```bash
+npm run dev
+# or start the server and open the app in a new browser tab
+npm run dev -- --open
 ```
-npm i satori
-```
-> From now on their will be no issues related to build, and soon this library going to have its own documentation.
-### v1.2.2 Update (Breaking Change)
-- We don't provide access to satori from `@ethercorps/sveltekit-og`.
+Everything inside `src/lib` is part of your library, everything inside `src/routes` can be used as a showcase or preview app.
-### v1.0.0 Update (Breaking Changes)
+## Building
-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:
+To build your library:
-- 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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

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

package/dist/index.js ADDED Viewed

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

package/package.json CHANGED Viewed

@@ -1,55 +1,55 @@
 {
   "name": "@ethercorps/sveltekit-og",
-  "version": "2.0.1",
-  "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.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",
+    "@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",
-    "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"
+    "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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

@@ -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 DELETED Viewed

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