fix: build allows for not including js or css file (#768)

SgtPooki · web-flow · commit 0a10b471f071 · 2025-06-23T11:04:19.000-04:00
* fix: build allows for not including js or css file

* chore(build): remove unique asset injection plugin

* chore(build): html asset injection is robust for any .html

* chore: fix lint

* fix: injected js uses correct src attr
diff --git a/build.js b/build.js
@@ -51,71 +51,6 @@ function gitRevision () {
   }
 }
 
-/**
- * Inject the dist/index.js and dist/index.css into the dist/index.html file
- *
- * @param {esbuild.Metafile} metafile - esbuild's metafile to extract output file names
- * @param {string} revision - Pre-computed Git revision string
- */
-const injectAssets = async (metafile, revision) => {
-  const htmlFilePath = path.resolve('dist/index.html')
-  const outputs = metafile.outputs
-
-  // Get the built JS and CSS filenames
-  const scriptFile = Object.keys(outputs).find(file => file.endsWith('.js') && file.includes('ipfs-sw-index'))
-  const cssFile = Object.keys(outputs).find(file => file.endsWith('.css') && file.includes('ipfs-sw-index'))
-
-  if (!scriptFile || !cssFile) {
-    console.error('Could not find the required assets in the metafile.')
-    return
-  }
-
-  const scriptTag = `<script type="module" src="${path.basename(scriptFile)}"></script>`
-  const linkTag = `<link rel="stylesheet" href="${path.basename(cssFile)}">`
-
-  let htmlContent = await fs.readFile(htmlFilePath, 'utf8')
-  htmlContent = htmlContent
-    .replace('</head>', `${linkTag}</head>`)
-    .replace('</body>', `${scriptTag}</body>`)
-    .replace(/<%= GIT_VERSION %>/g, revision)
-
-  await fs.writeFile(htmlFilePath, htmlContent)
-  console.log(`Injected ${path.basename(scriptFile)} and ${path.basename(cssFile)} into index.html.`)
-}
-
-/**
- * Inject the ipfs-sw-first-hit.js into the ipfs-sw-first-hit.html file
- *
- * This was added when addressing an issue with redirects not preserving query parameters.
- *
- * The solution we're moving forward with is, instead of using 302 redirects with ipfs _redirects file, we are
- * using 200 responses with the ipfs-sw-first-hit.html file. That file will include the ipfs-sw-first-hit.js script
- * which will be injected into the index.html file, and handle the redirect logic for us.
- *
- * @see https://github.com/ipfs/service-worker-gateway/issues/628
- *
- * @param {esbuild.Metafile} metafile - esbuild's metafile to extract output file names
- * @param {string} revision - Pre-computed Git revision string
- */
-const injectFirstHitJs = async (metafile, revision) => {
-  const htmlFilePath = path.resolve('dist/ipfs-sw-first-hit.html')
-
-  const scriptFile = Object.keys(metafile.outputs).find(file => file.endsWith('.js') && file.includes('ipfs-sw-first-hit'))
-
-  if (!scriptFile) {
-    console.error('Could not find the ipfs-sw-first-hit JS file in the metafile.')
-    return
-  }
-
-  const scriptTag = `<script src="/${path.basename(scriptFile)}"></script>`
-  let htmlContent = await fs.readFile(htmlFilePath, 'utf8')
-  htmlContent = htmlContent
-    .replace(/<%= GIT_VERSION %>/g, revision)
-    .replace('</body>', `${scriptTag}</body>`)
-
-  await fs.writeFile(htmlFilePath, htmlContent)
-}
-
 /**
  * Inject all ipfs-sw-*.html pages (not index.html and not ipfs-sw-first-hit.html) in the dist folder with CSS, git revision, and logo.
  *
@@ -124,32 +59,69 @@ const injectFirstHitJs = async (metafile, revision) => {
  */
 const injectHtmlPages = async (metafile, revision) => {
   const htmlFilePaths = await fs.readdir(path.resolve('dist'), { withFileTypes: true })
-    .then(files => files.filter(file => file.isFile() && file.name.startsWith('ipfs-sw-') && file.name.endsWith('.html') && !file.name.includes('first-hit')))
+    .then(files => files.filter(file => file.isFile() && file.name.endsWith('.html')))
     .then(files => files.map(file => path.resolve('dist', file.name)))
 
+  // htmlFilePaths.push(path.resolve('dist/index.html'))
+
   for (const htmlFilePath of htmlFilePaths) {
-    // find the -index-*.css file in the metafile results
-    const cssFile = Object.keys(metafile.outputs).find(file => file.endsWith('.css') && file.includes('ipfs-sw-index'))
+    const baseName = path.basename(htmlFilePath, '.html')
+    let jsFile = Object.keys(metafile.outputs).filter(file => file.endsWith('.js') && (file.includes(baseName) || file.includes('index')))
+    if (jsFile.length > 1) {
+      // override injection of index.js to the basename file
+      jsFile = jsFile.find(file => file.includes(baseName))
+    } else {
+      jsFile = jsFile[0]
+    }
 
-    if (!cssFile) {
-      console.error('Could not find the ipfs-sw-index CSS file in the metafile.')
-      return
+    let cssFile = Object.keys(metafile.outputs).filter(file => file.endsWith('.css') && (file.includes(baseName) || file.includes('index')))
+    if (cssFile.length > 1) {
+      // override injection of index.css to the basename file
+      cssFile = cssFile.find(file => file.includes(baseName))
+    } else {
+      cssFile = cssFile[0]
     }
 
     const logoFile = Object.keys(metafile.outputs).find(file => file.endsWith('.svg') && file.includes('ipfs-sw-ipfs-logo'))
 
-    if (!logoFile) {
-      console.error('Could not find the ipfs-sw-ipfs-logo SVG file in the metafile.')
-      return
+    let htmlContent = await fs.readFile(htmlFilePath, 'utf8')
+
+    if (htmlContent.includes('<%= JS_SCRIPT_TAG %>')) {
+      if (jsFile != null) {
+        const jsTag = `<script type="module" src="/${path.basename(jsFile)}"></script>`
+        htmlContent = htmlContent.replace(/<%= JS_SCRIPT_TAG %>/g, jsTag)
+        console.log(`Injected ${path.basename(jsFile)} into ${path.relative(process.cwd(), htmlFilePath)}.`)
+      } else {
+        throw new Error(`Could not find a js file to include in ${path.relative(process.cwd(), htmlFilePath)}.`)
+      }
     }
 
-    const cssTag = `<link rel="stylesheet" href="/${path.basename(cssFile)}">`
+    if (htmlContent.includes('<%= CSS_STYLES %>')) {
+      if (cssFile != null) {
+        const cssTag = `<link rel="stylesheet" href="/${path.basename(cssFile)}">`
+        htmlContent = htmlContent.replace(/<%= CSS_STYLES %>/g, cssTag)
+        console.log(`Injected ${path.basename(cssFile)} into ${path.relative(process.cwd(), htmlFilePath)}.`)
+      } else {
+        throw new Error(`Could not find an index.css file to include in ${path.relative(process.cwd(), htmlFilePath)}.`)
+      }
+    }
 
-    let htmlContent = await fs.readFile(htmlFilePath, 'utf8')
-    htmlContent = htmlContent
-      .replace(/<%= CSS_STYLES %>/g, cssTag)
-      .replace(/<%= IPFS_LOGO_PATH %>/g, logoFile.replace('dist/', '/'))
-      .replace(/<%= GIT_VERSION %>/g, revision)
+    if (htmlContent.includes('<%= IPFS_LOGO_PATH %>')) {
+      if (logoFile != null) {
+        htmlContent = htmlContent.replace(/<%= IPFS_LOGO_PATH %>/g, path.basename(logoFile))
+        console.log(`Injected ${path.basename(logoFile)} into ${path.relative(process.cwd(), htmlFilePath)}.`)
+      } else {
+        throw new Error(`Could not find the logo file to include in ${path.relative(process.cwd(), htmlFilePath)}.`)
+      }
+    }
+
+    if (!htmlContent.includes('<%= GIT_VERSION %>')) {
+      // if you see this error, make sure you update the HTML file to include an html comment similar to the one in public/index.html
+      throw new Error(`${path.relative(process.cwd(), htmlFilePath)} does not contain <%= GIT_VERSION %>.`)
+    }
+
+    htmlContent = htmlContent.replace(/<%= GIT_VERSION %>/g, revision)
+    console.log(`Added git revision (${revision}) to ${path.relative(process.cwd(), htmlFilePath)}.`)
 
     await fs.writeFile(htmlFilePath, htmlContent)
   }
@@ -218,12 +190,7 @@ const modifyBuiltFiles = {
       // Run copyPublicFiles first to make sure public assets are in place
       await copyPublicFiles()
 
-      // Run injection tasks concurrently since they modify separate files
-      await Promise.all([
-        injectAssets(result.metafile, revision),
-        injectFirstHitJs(result.metafile, revision),
-        injectHtmlPages(result.metafile, revision)
-      ])
+      await injectHtmlPages(result.metafile, revision)
 
       // Modify the redirects file last
       await modifyRedirects()
@@ -252,7 +219,7 @@ const excludeFilesPlugin = (extensions) => ({
  * @type {esbuild.BuildOptions}
  */
 export const buildOptions = {
-  entryPoints: ['src/index.tsx', 'src/sw.ts', 'src/ipfs-sw-first-hit.ts'],
+  entryPoints: ['src/index.tsx', 'src/sw.ts', 'src/ipfs-sw-*.ts', 'src/ipfs-sw-*.css'],
   bundle: true,
   outdir: 'dist',
   loader: {
diff --git a/public/index.html b/public/index.html
@@ -26,8 +26,10 @@
     <link rel="manifest" href="/ipfs-sw-manifest.json">
     <link rel="icon" href="/ipfs-sw-favicon.ico" type="image/ico"/>
     <link rel="shortcut icon" href="/ipfs-sw-favicon.ico" type="image/x-icon"/>
+    <%= CSS_STYLES %>
   </head>
   <body>
     <div id="root" class="sans-serif f5"></div>
+    <%= JS_SCRIPT_TAG %>
   </body>
 </html>
diff --git a/public/ipfs-sw-first-hit.html b/public/ipfs-sw-first-hit.html
@@ -1,7 +1,23 @@
 <!DOCTYPE html>
 <html lang="en">
     <head>
+      <!--
+
+        This HTML page initializes IPFS Service Worker Gateway.
+        Build: <%= GIT_VERSION %>
+
+        The HTTP server behind this HTTP URL does not host this website.
+        Instead, it sends basic website code along with JavaScript. The JS sets
+        up a tool called IPFS Service Worker Gateway in the user's browser and
+        uses https://www.npmjs.com/package/@helia/verified-fetch to get IPFS blocks
+        from content providers.
+
+        CID hash verification and data assembly happens in the browser.
+
+        Learn more about it here: https://github.com/ipfs/service-worker-gateway
+
+      -->
       <title>IPFS Service Worker Gateway | <%= GIT_VERSION %></title>
     </head>
-    <body></body>
+    <body><%= JS_SCRIPT_TAG %></body>
 </html>
diff --git a/src/ipfs-sw-first-hit.ts b/src/ipfs-sw-first-hit.ts
@@ -1,5 +1,9 @@
 /**
- * This script is injected into the ipfs-sw-first-hit.html file.
+ * This script is injected into the ipfs-sw-first-hit.html file. This was added when addressing an issue with redirects not preserving query parameters.
+ *
+ * The solution we're moving forward with is, instead of using 302 redirects with ipfs _redirects file, we are
+ * using 200 responses with the ipfs-sw-first-hit.html file. That file will include the ipfs-sw-first-hit.js script
+ * which will be injected into the index.html file, and handle the redirect logic for us.
  *
  * It handles the logic for the first hit to the service worker and should only
  * ever run when _redirects file redirects to ipfs-sw-first-hit.html for /ipns
