-
Notifications
You must be signed in to change notification settings - Fork 26.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[edge] allow importing blob assets #38492
Changes from all commits
d6c3a49
e614a7f
f51f1ae
52130d6
c2a38b5
d118710
163d27b
2172eb1
668d764
9be0db2
372196d
6dba223
72e3a7f
5c86155
4247f85
fb33685
e6ef92a
8b8f70d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,19 @@ | ||
import loaderUtils from 'next/dist/compiled/loader-utils3' | ||
import { getModuleBuildInfo } from './get-module-build-info' | ||
|
||
export default function MiddlewareAssetLoader(this: any, source: Buffer) { | ||
const name = loaderUtils.interpolateName(this, '[name].[hash].[ext]', { | ||
context: this.rootContext, | ||
content: source, | ||
}) | ||
const filePath = `edge-chunks/asset_${name}` | ||
const buildInfo = getModuleBuildInfo(this._module) | ||
buildInfo.nextAssetMiddlewareBinding = { | ||
filePath: `server/${filePath}`, | ||
name, | ||
} | ||
this.emitFile(filePath, source) | ||
return `module.exports = ${JSON.stringify(`blob:${name}`)}` | ||
} | ||
|
||
export const raw = true |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,39 @@ | ||
import { createReadStream, promises as fs } from 'fs' | ||
import path from 'path' | ||
import { requestToBodyStream } from '../../body-streams' | ||
import type { EdgeFunctionDefinition } from '../../../build/webpack/plugins/middleware-plugin' | ||
|
||
/** | ||
* Short-circuits the `fetch` function | ||
* to return a stream for a given asset, if a user used `new URL("file", import.meta.url)`. | ||
* This allows to embed assets in Edge Runtime. | ||
*/ | ||
export async function fetchInlineAsset(options: { | ||
input: RequestInfo | ||
distDir: string | ||
assets: EdgeFunctionDefinition['assets'] | ||
context: { Response: any } | ||
}): Promise<Response | undefined> { | ||
const inputString = String(options.input) | ||
if (!inputString.startsWith('blob:')) { | ||
return | ||
} | ||
|
||
const hash = inputString.replace('blob:', '') | ||
const asset = options.assets?.find((x) => x.name === hash) | ||
if (!asset) { | ||
return | ||
} | ||
|
||
const filePath = path.resolve(options.distDir, asset.filePath) | ||
|
||
const fileIsReadable = await fs.access(filePath).then( | ||
() => true, | ||
() => false | ||
) | ||
|
||
if (fileIsReadable) { | ||
const readStream = createReadStream(filePath) | ||
return new options.context.Response(requestToBodyStream(readStream)) | ||
} | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
export const config = { runtime: 'experimental-edge' } | ||
|
||
/** | ||
* @param {import('next/server').NextRequest} req | ||
*/ | ||
export default async (req) => { | ||
const handlerName = req.nextUrl.searchParams.get('handler') | ||
const handler = handlers.get(handlerName) || defaultHandler | ||
return handler() | ||
} | ||
|
||
/** | ||
* @type {Map<string, () => Promise<Response>>} | ||
*/ | ||
const handlers = new Map([ | ||
[ | ||
'text-file', | ||
async () => { | ||
const url = new URL('../../src/text-file.txt', import.meta.url) | ||
return fetch(url) | ||
}, | ||
], | ||
[ | ||
'image-file', | ||
async () => { | ||
const url = new URL('../../src/vercel.png', import.meta.url) | ||
return fetch(url) | ||
}, | ||
], | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Maybe add an fetch to an external asset too, to make sure that still works as expected. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. wdym external asset? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. yep that one. To ensure the overriding fetch function still works correctly for non-blob urls There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. done with |
||
[ | ||
'from-node-module', | ||
async () => { | ||
const url = new URL('my-pkg/hello/world.json', import.meta.url) | ||
return fetch(url) | ||
}, | ||
], | ||
[ | ||
'remote-full', | ||
async () => { | ||
const url = new URL('https://example.vercel.sh') | ||
const response = await fetch(url) | ||
const headers = new Headers(response.headers) | ||
headers.delete('content-encoding') | ||
return new Response(response.body, { headers, status: response.status }) | ||
}, | ||
], | ||
[ | ||
'remote-with-base', | ||
async () => { | ||
const url = new URL('/', 'https://example.vercel.sh') | ||
const response = await fetch(url) | ||
const headers = new Headers(response.headers) | ||
headers.delete('content-encoding') | ||
return new Response(response.body, { headers, status: response.status }) | ||
}, | ||
], | ||
]) | ||
|
||
const defaultHandler = async () => | ||
new Response('Invalid handler', { status: 400 }) |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
Hello, from text-file.txt! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I would rename it to
for (const module of queue)
as it's not only going through entry modules, but through all referenced modules.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
makes total sense, but can we do that in a different PR, to minimize the amount of changes per PR? 🙏