archive/rsnext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Upgrade og dependencies (#59541)

Browse source 
Upgrade `@vercel/og` to 0.6.1

Closes NEXT-1857
This commit is contained in:
Jiachi Liu 2023-12-21 14:50:57 +01:00 committed by GitHub
parent 75a8303f1b
commit 14052c052e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 4395 additions and 3817 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -110,7 +110,7 @@
"@typescript-eslint/eslint-plugin": "6.14.0",
"@typescript-eslint/parser": "6.14.0",
"@vercel/fetch": "6.1.1",
"@vercel/og": "0.5.15",
"@vercel/og": "0.6.1",
"abort-controller": "3.0.0",
"alex": "9.1.0",
"amphtml-validator": "1.0.35",
@ -212,7 +212,7 @@
"request-promise-core": "1.1.2",
"resolve-from": "5.0.0",
"sass": "1.54.0",
"satori": "0.10.6",
"satori": "0.10.9",
"scheduler-builtin": "npm:scheduler@0.24.0-canary-0cdfef19b-20231211",
"scheduler-experimental-builtin": "npm:scheduler@0.0.0-experimental-0cdfef19b-20231211",
"seedrandom": "3.0.5",

4
packages/next-swc/crates/next-core/src/next_import_map.rs
View file

@ -388,7 +388,9 @@ pub async fn get_next_edge_import_map(
"next/dist/shared/lib/dynamic" => "next/dist/esm/shared/lib/dynamic".to_string(),
"next/dist/shared/lib/head" => "next/dist/esm/shared/lib/head".to_string(),
"next/dist/shared/lib/image-external" => "next/dist/esm/shared/lib/image-external".to_string(),
"dist/server/og/image-response" => "next/dist/esm/server/og/image-response".to_string(),
"next/dist/server/og/image-response" => "next/dist/esm/server/og/image-response".to_string(),
// Alias built-in @vercel/og to edge bundle for edge runtime
"next/dist/compiled/@vercel/og/index.node.js" => "next/dist/compiled/@vercel/og/index.edge.js".to_string(),
},
);

2
packages/next/src/build/create-compiler-aliases.ts
View file

@ -90,7 +90,7 @@ export function createWebpackAliases({
}
return {
'@vercel/og': 'next/dist/server/og/image-response',
'@vercel/og$': 'next/dist/server/og/image-response',
// Alias next/dist imports to next/dist/esm assets,
// let this alias hit before `next` alias.

1
packages/next/src/build/handle-externals.ts
View file

@ -240,6 +240,7 @@ export function makeExternalHandler({
// Don't bundle @vercel/og nodejs bundle for nodejs runtime.
// TODO-APP: bundle route.js with different layer that externals common node_module deps.
// Make sure @vercel/og is loaded as ESM for Node.js runtime
if (
isWebpackServerLayer(layer) &&
request === 'next/dist/compiled/@vercel/og/index.node.js'

7
packages/next/src/compiled/@vercel/og/figma/index.d.ts vendored Normal file
View file

@ -0,0 +1,7 @@
import type { EdgeImageResponse } from '../index.edge';
import { FigmaImageResponseProps } from '../types';
declare type InternalFigmaImageResponseProps = FigmaImageResponseProps & {
Response: EdgeImageResponse;
};
export declare const FigmaImageResponse: ({ url, template, fonts, imageResponseOptions, Response, }: InternalFigmaImageResponseProps) => Promise<import("../index.edge").ImageResponse>;
export {};

4
packages/next/src/compiled/@vercel/og/index.edge.d.ts vendored
View file

@ -1,5 +1,7 @@
import type { ReactElement } from 'react';
import type { ImageResponseOptions } from './types';
import type { ImageResponseOptions, FigmaImageResponseProps } from './types';
export declare class ImageResponse extends Response {
constructor(element: ReactElement, options?: ImageResponseOptions);
}
export declare const experimental_FigmaImageResponse: (props: FigmaImageResponseProps) => Promise<ImageResponse>;
export declare type EdgeImageResponse = typeof ImageResponse;

4011
packages/next/src/compiled/@vercel/og/index.edge.js
View file

File diff suppressed because one or more lines are too long

4
packages/next/src/compiled/@vercel/og/index.node.d.ts vendored
View file

@ -1,6 +1,6 @@
/// <reference types="node" />
import type { ReactElement } from 'react';
import type { ImageResponseNodeOptions, ImageResponseOptions } from './types';
import type { ImageResponseNodeOptions, ImageResponseOptions, FigmaImageResponseProps } from './types';
import { Readable } from 'stream';
export declare class ImageResponse extends Response {
constructor(element: ReactElement, options?: ImageResponseOptions);
@ -23,3 +23,5 @@ export declare class ImageResponse extends Response {
* ```
*/
export declare function unstable_createNodejsStream(element: ReactElement, options?: Omit<ImageResponseNodeOptions, 'status' | 'statusText' | 'headers'>): Promise<Readable>;
export declare const experimental_FigmaImageResponse: (props: FigmaImageResponseProps) => Promise<import("./index.edge").ImageResponse>;
export declare type NodeImageResponse = typeof ImageResponse;

4009
packages/next/src/compiled/@vercel/og/index.node.js
View file

File diff suppressed because one or more lines are too long

2
packages/next/src/compiled/@vercel/og/package.json
View file

@ -1,6 +1,6 @@
{
"name": "@vercel/og",
"version": "0.5.15",
"version": "0.6.1",
"LICENSE": "MLP-2.0",
"type": "module",
"main": "./index.node.js",

BIN
packages/next/src/compiled/@vercel/og/resvg.wasm
View file

Binary file not shown.

6
packages/next/src/compiled/@vercel/og/satori/index.d.ts vendored
View file

@ -24,12 +24,12 @@ type Locale = keyof typeof code;
*/
type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
type Style$1 = 'normal' | 'italic';
type FontStyle = 'normal' | 'italic';
interface FontOptions {
data: Buffer | ArrayBuffer;
name: string;
weight?: Weight;
style?: Style$1;
style?: FontStyle;
lang?: string;
}
@ -170,4 +170,4 @@ type SatoriOptions = ({
declare function satori(element: ReactNode, options: SatoriOptions): Promise<string>;
export { FontOptions as Font, Style$1 as FontStyle, Weight as FontWeight, Locale, SatoriNode, SatoriOptions, satori as default, init };
export { FontOptions as Font, FontStyle, Weight as FontWeight, Locale, SatoriNode, SatoriOptions, satori as default, init };

53
packages/next/src/compiled/@vercel/og/types.d.ts vendored
View file

@ -1,4 +1,6 @@
/// <reference types="node" />
/// <reference types="react" />
/// <reference types="node" />
import type { SatoriOptions } from "next/dist/compiled/@vercel/og/satori";
import type { EmojiType } from './emoji';
import type { OutgoingHttpHeader } from 'http';
@ -46,6 +48,57 @@ export declare type ImageResponseNodeOptions = ImageOptions & {
headers?: OutgoingHttpHeader[];
};
export declare type ImageResponseOptions = ImageOptions & ConstructorParameters<typeof Response>[1];
export interface FigmaImageResponseProps {
/**
* Link to the Figma template frame.
*
* You can get the URL in Figma by right-clicking a frame and selecting "Copy link".
* @example https://www.figma.com/file/QjGNQixWnhu300e1Xzdl2y/OG-Images?type=design&node-id=11356-2443&mode=design&t=yLROd7ro8mP1PxMY-4
*/
url: string;
/**
* A mapping between Figma layer name and the value you want to replace it with.
*
* @example Sets Figma text layer named "Title" to "How to create OG Images"
* ```js
* { "Title": "How to create OG Images" }
* ```
*
* @example Sets multiple Figma text layers and provides custom styles
* ```js
* {
* "Title": { value: "How to create OG Images", props: { color: "red", centerHorizontally: true } },
* "Description": { value: "A short story", props: { centerHorizontally: true } },
* }
* ```
*
* `centerHorizontally` centers text layer horizontally.
*/
template: Record<string, FigmaComplexTemplate | string>;
/**
* The font names must match the font names in Figma.
*/
fonts?: FontOptions[];
/**
* The same as {@link ImageResponseOptions} except `width` and `height`. `width` and `height` are automatically set from the Figma frame's size.
*/
imageResponseOptions?: Omit<ImageResponseOptions, 'width' | 'height'>;
}
export interface FigmaComplexTemplate {
value: string;
props?: {
centerHorizontally?: boolean;
} & React.CSSProperties;
}
declare type Weight = 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
declare type Style = 'normal' | 'italic';
interface FontOptions {
data: Buffer | ArrayBuffer;
name: string;
weight?: Weight;
style?: Style;
lang?: string;
}
declare module 'react' {
interface HTMLAttributes<T> {
/**

36
packages/next/src/server/og/image-response.ts
View file

@ -1,22 +1,24 @@
type OgModule = typeof import('next/dist/compiled/@vercel/og')
function importModule(): Promise<
typeof import('next/dist/compiled/@vercel/og')
> {
return import(
process.env.NEXT_RUNTIME === 'edge'
? 'next/dist/compiled/@vercel/og/index.edge.js'
: 'next/dist/compiled/@vercel/og/index.node.js'
)
}
export class ImageResponse extends Response {
public static displayName = 'NextImageResponse'
constructor(
...args: ConstructorParameters<
typeof import('next/dist/compiled/@vercel/og').ImageResponse
>
) {
public static displayName = 'ImageResponse'
constructor(...args: ConstructorParameters<OgModule['ImageResponse']>) {
const readable = new ReadableStream({
async start(controller) {
const OGImageResponse: typeof import('next/dist/compiled/@vercel/og').ImageResponse =
// So far we have to manually determine which build to use,
// as the auto resolving is not working
(
await import(
process.env.NEXT_RUNTIME === 'edge'
? 'next/dist/compiled/@vercel/og/index.edge.js'
: 'next/dist/compiled/@vercel/og/index.node.js'
)
).ImageResponse
(await importModule()).ImageResponse
const imageResponse = new OGImageResponse(...args) as Response
if (!imageResponse.body) {
@ -50,3 +52,11 @@ export class ImageResponse extends Response {
})
}
}
export async function experimental_FigmaImageResponse(
props: Parameters<OgModule['experimental_FigmaImageResponse']>[0]
) {
const originExperimentalFigmaImageResponse = (await importModule())
.experimental_FigmaImageResponse
return originExperimentalFigmaImageResponse(props)
}

37
packages/next/taskfile.js
View file

@ -161,29 +161,24 @@ export async function copy_babel_runtime(task, opts) {
externals['@vercel/og'] = 'next/dist/compiled/@vercel/og'
export async function copy_vercel_og(task, opts) {
await task
.source(
join(
relative(
__dirname,
dirname(require.resolve('@vercel/og/package.json'))
),
'{./dist/*.+(js|ttf|wasm),LICENSE}'
function copy_og_asset(globPattern) {
return task
.source(
join(
relative(
__dirname,
dirname(require.resolve('@vercel/og/package.json'))
),
globPattern
)
)
)
.target('src/compiled/@vercel/og')
.target('src/compiled/@vercel/og')
}
await task
.source(
join(
relative(
__dirname,
dirname(require.resolve('@vercel/og/package.json'))
),
'./dist/index.*.js'
)
)
.target('src/compiled/@vercel/og')
await copy_og_asset('./dist/*.ttf')
await copy_og_asset('./dist/*.wasm')
await copy_og_asset('LICENSE')
await copy_og_asset('./dist/index.*.js')
// Types are not bundled, include satori types here
await task

24
pnpm-lock.yaml
View file

@ -177,8 +177,8 @@ importers:
specifier: 6.1.1
version: 6.1.1(@types/node-fetch@2.6.1)(node-fetch@2.6.7)
'@vercel/og':
specifier: 0.5.15
version: 0.5.15
specifier: 0.6.1
version: 0.6.1
abort-controller:
specifier: 3.0.0
version: 3.0.0
@ -483,8 +483,8 @@ importers:
specifier: 1.54.0
version: 1.54.0
satori:
specifier: 0.10.6
version: 0.10.6
specifier: 0.10.9
version: 0.10.9
scheduler-builtin:
specifier: npm:scheduler@0.24.0-canary-0cdfef19b-20231211
version: /scheduler@0.24.0-canary-0cdfef19b-20231211
@ -5737,8 +5737,8 @@ packages:
resolution: {integrity: sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==}
dev: true
/@resvg/resvg-wasm@2.4.1:
resolution: {integrity: sha512-yi6R0HyHtsoWTRA06Col4WoDs7SvlXU3DLMNP2bdAgs7HK18dTEVl1weXgxRzi8gwLteGUbIg29zulxIB3GSdg==}
/@resvg/resvg-wasm@2.6.0:
resolution: {integrity: sha512-iDkBM6Ivex8nULtBu8cX670/lfsGxq8U1cuqE+qS9xFpPQP1enPdVm/33Kq3+B+bAldA+AHNZnCgpmlHo/fZrQ==}
engines: {node: '>= 10'}
dev: true
@ -7193,12 +7193,12 @@ packages:
- supports-color
dev: true
/@vercel/og@0.5.15:
resolution: {integrity: sha512-8LrEb/3C7R2TqRA9qTde+eoeOCCQZfElqCNiSi3qqnKSczv2V91Wa1Nt3Gy6qqLDeny8aFQxcB/OCZEWNubaqw==}
/@vercel/og@0.6.1:
resolution: {integrity: sha512-o0ItpTQrn7TdBRiYLoBmATfunenfI87AZ5S/SvS9puxN4rjuNdDHSV6ND24WBt0FK2SljfM9LYowK/99ql2bEA==}
engines: {node: '>=16'}
dependencies:
'@resvg/resvg-wasm': 2.4.1
satori: 0.10.6
'@resvg/resvg-wasm': 2.6.0
satori: 0.10.9
yoga-wasm-web: 0.3.3
dev: true
@ -21424,8 +21424,8 @@ packages:
immutable: 4.1.0
source-map-js: 1.0.2
/satori@0.10.6:
resolution: {integrity: sha512-bhAAnh+ZZgulFpxoDi5AB1VA3MsN6AnhB0Elfdj5bQitn4N9GHAB3MC5eFauOnXHF7a9TT1jIPHhUY4JQsP6Xg==}
/satori@0.10.9:
resolution: {integrity: sha512-XU9EELUEZuioT4acLIpCXxHcFzrsC8muvg0MY28d+TlqwxbkTzBmWbw+3+hnCzXT7YZ0Qm8k3eXktDaEu+qmEw==}
engines: {node: '>=16'}
dependencies:
'@shuding/opentype.js': 1.4.0-beta.0

4
test/e2e/app-dir/metadata-dynamic-routes/app/twitter-image.tsx
View file

@ -2,10 +2,8 @@ import { ImageResponse } from 'next/og'
import { ImageResponse as ImageResponse2 } from '@vercel/og'
// Node.js: Using @vercel/og external package, and should be aliased to "next/server" ImageResponse
if (ImageResponse.displayName !== 'NextImageResponse')
throw new Error('ImageResponse mismatch: ' + ImageResponse.displayName)
// @ts-ignore
if (ImageResponse2.displayName !== 'NextImageResponse')
if (ImageResponse2.displayName !== ImageResponse.displayName)
// @ts-ignore
throw new Error('ImageResponse mismatch: ' + ImageResponse2.displayName)

4
test/e2e/app-dir/metadata-dynamic-routes/app/twitter-image2.tsx
View file

@ -3,10 +3,8 @@ import { ImageResponse } from 'next/og'
import { ImageResponse as ImageResponse2 } from '@vercel/og'
// Edge: Using @vercel/og external package, and should be aliased to "next/server" ImageResponse
if (ImageResponse.displayName !== 'NextImageResponse')
throw new Error('ImageResponse mismatch: ' + ImageResponse.displayName)
// @ts-ignore
if (ImageResponse2.displayName !== 'NextImageResponse')
if (ImageResponse2.displayName !== ImageResponse.displayName)
// @ts-ignore
throw new Error('ImageResponse2 mismatch: ' + ImageResponse2.displayName)