@ethercorps/sveltekit-og 0.0.3 → 0.0.5

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 (5) hide show
  1. package/index.d.ts +16 -1
  2. package/index.js +54 -1
  3. package/package.json +17 -20
  4. package/svelte-satori.d.ts +0 -16
  5. package/svelte-satori.js +0 -54
package/index.d.ts CHANGED
@@ -1 +1,16 @@
1
- export { ImageResponse, componentToImageResponse, ImageResponseOptions } from "./svelte-satori";
1
+ import type { SvelteComponent } from 'svelte';
2
+ import type { SatoriOptions } from 'satori';
3
+ export declare const ImageResponse: {
4
+ new (htmlTemplate: string, optionsByUser: ImageResponseOptions): {};
5
+ };
6
+ export declare const componentToImageResponse: {
7
+ new (component: SvelteComponent, props: {} | undefined, optionsByUser: ImageResponseOptions): {};
8
+ };
9
+ export declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
10
+ declare type ImageOptions = {
11
+ width?: number;
12
+ height?: number;
13
+ debug?: boolean;
14
+ fonts?: SatoriOptions['fonts'];
15
+ };
16
+ export {};
package/index.js CHANGED
@@ -1 +1,54 @@
1
- export { ImageResponse, componentToImageResponse, ImageResponseOptions } from './svelte-satori';
1
+ import { html as toReactNode } from 'satori-html';
2
+ import satori from 'satori';
3
+ import { Resvg, initWasm } from '@resvg/resvg-wasm';
4
+ import { join } from 'path';
5
+ import { readFileSync } from 'fs';
6
+ import { fileURLToPath } from 'url';
7
+ const __filename = fileURLToPath(import.meta.url);
8
+ const resSvgWasm = initWasm(readFileSync(join(__filename, '../vendors/resvg.wasm')));
9
+ const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
10
+ const fontData = await fontFile.arrayBuffer();
11
+ export const ImageResponse = class {
12
+ constructor(htmlTemplate, optionsByUser) {
13
+ const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
14
+ const png = new ReadableStream({
15
+ async start(a) {
16
+ await resSvgWasm;
17
+ const svg = await satori(toReactNode(htmlTemplate), {
18
+ width: options.width,
19
+ height: options.height,
20
+ fonts: options.fonts || [
21
+ {
22
+ name: 'Inter Latin',
23
+ data: fontData,
24
+ weight: 400,
25
+ style: 'normal'
26
+ }
27
+ ]
28
+ });
29
+ const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } });
30
+ a.enqueue(pngData.render().asPng());
31
+ a.close();
32
+ }
33
+ });
34
+ return new Response(png, {
35
+ headers: {
36
+ 'Content-Type': 'image/png',
37
+ 'cache-control': 'public, immutable, no-transform, max-age=31536000',
38
+ ...options.headers
39
+ },
40
+ status: options.status,
41
+ statusText: options.statusText
42
+ });
43
+ }
44
+ };
45
+ export const componentToImageResponse = class {
46
+ constructor(component, props = {}, optionsByUser) {
47
+ const SvelteRenderedMarkup = component.render(props);
48
+ let htmlTemplate = `${SvelteRenderedMarkup.html}`;
49
+ if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) {
50
+ htmlTemplate = `${SvelteRenderedMarkup.html}<style>${SvelteRenderedMarkup.css.code}</style>`;
51
+ }
52
+ return new ImageResponse(htmlTemplate, optionsByUser);
53
+ }
54
+ };
package/package.json CHANGED
@@ -1,24 +1,25 @@
1
1
  {
2
2
  "name": "@ethercorps/sveltekit-og",
3
- "version": "0.0.3",
3
+ "version": "0.0.5",
4
+ "private": false,
4
5
  "devDependencies": {
5
- "@playwright/test": "^1.25.0",
6
+ "@playwright/test": "^1.27.1",
6
7
  "@sveltejs/adapter-auto": "next",
8
+ "@sveltejs/kit": "next",
7
9
  "@sveltejs/package": "next",
8
- "@typescript-eslint/eslint-plugin": "^5.27.0",
9
- "@typescript-eslint/parser": "^5.27.0",
10
- "eslint": "^8.16.0",
11
- "eslint-config-prettier": "^8.3.0",
10
+ "@typescript-eslint/eslint-plugin": "^5.40.1",
11
+ "@typescript-eslint/parser": "^5.40.1",
12
+ "eslint": "^8.25.0",
13
+ "eslint-config-prettier": "^8.5.0",
12
14
  "eslint-plugin-svelte3": "^4.0.0",
13
- "prettier": "^2.6.2",
14
- "prettier-plugin-svelte": "^2.7.0",
15
- "svelte": "^3.44.0",
16
- "svelte-check": "^2.7.1",
17
- "svelte-preprocess": "^4.10.6",
18
- "tslib": "^2.3.1",
19
- "typescript": "^4.7.4",
20
- "vite": "^3.1.0",
21
- "sveltekit-og": "link:./package"
15
+ "prettier": "^2.7.1",
16
+ "prettier-plugin-svelte": "^2.8.0",
17
+ "svelte": "^3.52.0",
18
+ "svelte-check": "^2.9.2",
19
+ "svelte-preprocess": "^4.10.7",
20
+ "tslib": "^2.4.0",
21
+ "typescript": "^4.8.4",
22
+ "vite": "^3.1.8"
22
23
  },
23
24
  "type": "module",
24
25
  "dependencies": {
@@ -26,13 +27,9 @@
26
27
  "satori": "^0.0.42",
27
28
  "satori-html": "^0.2.0"
28
29
  },
29
- "peerDependencies": {
30
- "@sveltejs/kit": "next"
31
- },
32
30
  "exports": {
33
31
  "./package.json": "./package.json",
34
32
  ".": "./index.js",
35
- "./svelte-satori": "./svelte-satori.js",
36
33
  "./vendors/resvg.wasm": "./vendors/resvg.wasm"
37
34
  }
38
- }
35
+ }
package/svelte-satori.d.ts DELETED
@@ -1,16 +0,0 @@
1
- import type { SvelteComponent } from 'svelte';
2
- import type { SatoriOptions } from 'satori';
3
- export declare const ImageResponse: {
4
- new (htmlTemplate: string, optionsByUser: ImageResponseOptions): {};
5
- };
6
- export declare const componentToImageResponse: {
7
- new (component: SvelteComponent, props: {} | undefined, optionsByUser: ImageResponseOptions): {};
8
- };
9
- export declare type ImageResponseOptions = ConstructorParameters<typeof Response>[1] & ImageOptions;
10
- declare type ImageOptions = {
11
- width?: number;
12
- height?: number;
13
- debug?: boolean;
14
- fonts?: SatoriOptions['fonts'];
15
- };
16
- export {};
package/svelte-satori.js DELETED
@@ -1,54 +0,0 @@
1
- import { html as toReactNode } from 'satori-html';
2
- import satori from 'satori';
3
- import { Resvg, initWasm } from '@resvg/resvg-wasm';
4
- import { join } from 'path';
5
- import { readFileSync } from 'fs';
6
- import { fileURLToPath } from 'url';
7
- const __filename = fileURLToPath(import.meta.url);
8
- const resSvgWasm = initWasm(readFileSync(join(__filename, '../vendors/resvg.wasm')));
9
- const fontFile = await fetch('https://og-playground.vercel.app/inter-latin-ext-400-normal.woff');
10
- const fontData = await fontFile.arrayBuffer();
11
- export const ImageResponse = class {
12
- constructor(htmlTemplate, optionsByUser) {
13
- const options = Object.assign({ width: 1200, height: 630, debug: !1 }, optionsByUser);
14
- const png = new ReadableStream({
15
- async start(a) {
16
- await resSvgWasm;
17
- const svg = await satori(toReactNode(htmlTemplate), {
18
- width: options.width,
19
- height: options.height,
20
- fonts: options.fonts || [
21
- {
22
- name: 'Inter Latin',
23
- data: fontData,
24
- weight: 400,
25
- style: 'normal'
26
- }
27
- ]
28
- });
29
- const pngData = new Resvg(svg, { fitTo: { mode: 'width', value: options.width } });
30
- a.enqueue(pngData.render().asPng());
31
- a.close();
32
- }
33
- });
34
- return new Response(png, {
35
- headers: {
36
- 'Content-Type': 'image/png',
37
- 'cache-control': 'public, immutable, no-transform, max-age=31536000',
38
- ...options.headers
39
- },
40
- status: options.status,
41
- statusText: options.statusText
42
- });
43
- }
44
- };
45
- export const componentToImageResponse = class {
46
- constructor(component, props = {}, optionsByUser) {
47
- const SvelteRenderedMarkup = component.render(props);
48
- let htmlTemplate = `${SvelteRenderedMarkup.html}`;
49
- if (SvelteRenderedMarkup && SvelteRenderedMarkup.css && SvelteRenderedMarkup.css.code) {
50
- htmlTemplate = `${SvelteRenderedMarkup.html}<style>${SvelteRenderedMarkup.css.code}</style>`;
51
- }
52
- return new ImageResponse(htmlTemplate, optionsByUser);
53
- }
54
- };