kris/reacord
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

return content in asset

Browse Source
This commit is contained in:
MapleLeaf
2022-01-08 14:55:03 -06:00
parent b118d8a653
commit 7379402e80
3 changed files with 16 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
packages/docs/src/asset-builder/asset-builder.ts
View File

@@ -10,6 +10,7 @@ export type Asset = {
inputFile: string inputFile: string
outputFile: string outputFile: string
url: string url: string
content: string
} }
export type AssetTransformer = { export type AssetTransformer = {
@@ -37,21 +38,16 @@ export class AssetBuilder {
async build(input: Promisable<string | URL>, name?: string): Promise<Asset> { async build(input: Promisable<string | URL>, name?: string): Promise<Asset> {
const inputFile = normalizeAsFilePath(await input) const inputFile = normalizeAsFilePath(await input)
const { content } = await this.transform(inputFile)
const transformResult = await this.transform(inputFile) const hash = createHash("sha256").update(content).digest("hex").slice(0, 8)
const hash = createHash("sha256")
.update(transformResult.content)
.digest("hex")
.slice(0, 8)
const parsedInputFile = parse(inputFile) const parsedInputFile = parse(inputFile)
const url = `/${name || parsedInputFile.name}.${hash}${parsedInputFile.ext}` const url = `/${name || parsedInputFile.name}.${hash}${parsedInputFile.ext}`
const outputFile = join(this.cacheFolder, url) const outputFile = join(this.cacheFolder, url)
await ensureWrite(outputFile, content)
await ensureWrite(outputFile, transformResult.content) return { inputFile, outputFile, url, content }
return { inputFile, outputFile, url }
} }
middleware(): RequestHandler { middleware(): RequestHandler {

14
packages/docs/src/asset-builder/asset.tsx
View File

@@ -29,7 +29,7 @@ function useAssetBuild(
throw state.promise throw state.promise
} }
return state.asset.url return state.asset
} }
export function LocalFileAsset({ export function LocalFileAsset({
@@ -39,15 +39,15 @@ export function LocalFileAsset({
}: { }: {
from: string | URL from: string | URL
as?: string as?: string
children: (url: string) => ReactNode children: (url: Asset) => ReactNode
}) { }) {
const inputFile = normalizeAsFilePath(from) const inputFile = normalizeAsFilePath(from)
const url = useAssetBuild(inputFile, (builder) => { const asset = useAssetBuild(inputFile, (builder) => {
return builder.build(inputFile, name) return builder.build(inputFile, name)
}) })
return <>{children(url)}</> return <>{children(asset)}</>
} }
export function ModuleAsset({ export function ModuleAsset({
@@ -57,14 +57,14 @@ export function ModuleAsset({
}: { }: {
from: string from: string
as?: string as?: string
children: (url: string) => ReactNode children: (url: Asset) => ReactNode
}) { }) {
const cacheKey = `node:${from}` const cacheKey = `node:${from}`
const url = useAssetBuild(cacheKey, async (builder) => { const asset = useAssetBuild(cacheKey, async (builder) => {
const inputFile = await import.meta.resolve!(from) const inputFile = await import.meta.resolve!(from)
return await builder.build(inputFile, name) return await builder.build(inputFile, name)
}) })
return <>{children(url)}</> return <>{children(asset)}</>
} }

6
packages/docs/src/html.tsx
View File

@@ -32,17 +32,17 @@ export function Html({
/> />
<ModuleAsset from="tailwindcss/tailwind.css"> <ModuleAsset from="tailwindcss/tailwind.css">
{(url) => <link rel="stylesheet" href={url} />} {(asset) => <link rel="stylesheet" href={asset.url} />}
</ModuleAsset> </ModuleAsset>
<LocalFileAsset from={new URL("ui/prism-theme.css", import.meta.url)}> <LocalFileAsset from={new URL("ui/prism-theme.css", import.meta.url)}>
{(url) => <link rel="stylesheet" href={url} />} {(asset) => <link rel="stylesheet" href={asset.url} />}
</LocalFileAsset> </LocalFileAsset>
<title>{title}</title> <title>{title}</title>
<ModuleAsset from="alpinejs/dist/cdn.js" as="alpine"> <ModuleAsset from="alpinejs/dist/cdn.js" as="alpine">
{(url) => <script defer src={url} />} {(asset) => <script defer src={asset.url} />}
</ModuleAsset> </ModuleAsset>
</head> </head>
<body>{children}</body> <body>{children}</body>