From 7379402e803e0042733cb9415b3b0ab55a86898b Mon Sep 17 00:00:00 2001
From: MapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Sat, 8 Jan 2022 14:55:03 -0600
Subject: [PATCH] return content in asset

---
 packages/docs/src/asset-builder/asset-builder.ts | 16 ++++++----------
 packages/docs/src/asset-builder/asset.tsx        | 14 +++++++-------
 packages/docs/src/html.tsx                       |  6 +++---
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/docs/src/asset-builder/asset-builder.ts b/packages/docs/src/asset-builder/asset-builder.ts
index c8524e6..b20ed74 100644
--- a/packages/docs/src/asset-builder/asset-builder.ts
+++ b/packages/docs/src/asset-builder/asset-builder.ts
@@ -10,6 +10,7 @@ export type Asset = {
   inputFile: string
   outputFile: string
   url: string
+  content: string
 }
 
 export type AssetTransformer = {
@@ -37,21 +38,16 @@ export class AssetBuilder {
 
   async build(input: Promisable<string | URL>, name?: string): Promise<Asset> {
     const inputFile = normalizeAsFilePath(await input)
+    const { content } = await this.transform(inputFile)
 
-    const transformResult = await this.transform(inputFile)
-
-    const hash = createHash("sha256")
-      .update(transformResult.content)
-      .digest("hex")
-      .slice(0, 8)
-
+    const hash = createHash("sha256").update(content).digest("hex").slice(0, 8)
     const parsedInputFile = parse(inputFile)
     const url = `/${name || parsedInputFile.name}.${hash}${parsedInputFile.ext}`
+
     const outputFile = join(this.cacheFolder, url)
+    await ensureWrite(outputFile, content)
 
-    await ensureWrite(outputFile, transformResult.content)
-
-    return { inputFile, outputFile, url }
+    return { inputFile, outputFile, url, content }
   }
 
   middleware(): RequestHandler {
diff --git a/packages/docs/src/asset-builder/asset.tsx b/packages/docs/src/asset-builder/asset.tsx
index d069591..758b5ea 100644
--- a/packages/docs/src/asset-builder/asset.tsx
+++ b/packages/docs/src/asset-builder/asset.tsx
@@ -29,7 +29,7 @@ function useAssetBuild(
     throw state.promise
   }
 
-  return state.asset.url
+  return state.asset
 }
 
 export function LocalFileAsset({
@@ -39,15 +39,15 @@ export function LocalFileAsset({
 }: {
   from: string | URL
   as?: string
-  children: (url: string) => ReactNode
+  children: (url: Asset) => ReactNode
 }) {
   const inputFile = normalizeAsFilePath(from)
 
-  const url = useAssetBuild(inputFile, (builder) => {
+  const asset = useAssetBuild(inputFile, (builder) => {
     return builder.build(inputFile, name)
   })
 
-  return <>{children(url)}</>
+  return <>{children(asset)}</>
 }
 
 export function ModuleAsset({
@@ -57,14 +57,14 @@ export function ModuleAsset({
 }: {
   from: string
   as?: string
-  children: (url: string) => ReactNode
+  children: (url: Asset) => ReactNode
 }) {
   const cacheKey = `node:${from}`
 
-  const url = useAssetBuild(cacheKey, async (builder) => {
+  const asset = useAssetBuild(cacheKey, async (builder) => {
     const inputFile = await import.meta.resolve!(from)
     return await builder.build(inputFile, name)
   })
 
-  return <>{children(url)}</>
+  return <>{children(asset)}</>
 }
diff --git a/packages/docs/src/html.tsx b/packages/docs/src/html.tsx
index ddcbe44..e81fceb 100644
--- a/packages/docs/src/html.tsx
+++ b/packages/docs/src/html.tsx
@@ -32,17 +32,17 @@ export function Html({
         />
 
         <ModuleAsset from="tailwindcss/tailwind.css">
-          {(url) => <link rel="stylesheet" href={url} />}
+          {(asset) => <link rel="stylesheet" href={asset.url} />}
         </ModuleAsset>
 
         <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>
 
         <title>{title}</title>
 
         <ModuleAsset from="alpinejs/dist/cdn.js" as="alpine">
-          {(url) => <script defer src={url} />}
+          {(asset) => <script defer src={asset.url} />}
         </ModuleAsset>
       </head>
       <body>{children}</body>