release to staging (#404)

* fix: remove auto-reload config and default to true (#319) * fix: remove auto-reload config and default to true * test: fix ci layout test * test: fix some playwright tests * test: fix firefox e2e tests * test: fix first-hit e2e tests * chore: code cleanup self review * deps(dev): bump playwright from 1.45.0 to 1.45.3 (#331) Bumps [playwright](https://github.com/microsoft/playwright) from 1.45.0 to 1.45.3. - [Release notes](https://github.com/microsoft/playwright/releases) - [Commits](microsoft/playwright@v1.45.0...v1.45.3) --- updated-dependencies: - dependency-name: playwright dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * feat: build with esbuild, apply source maps (#392) * feat: use esbuild for building * feat: remove webpack * test: fix e2e tests * chore: remove timeout only required on my network * chore: remove copyfiles * chore: suggestions from self code review * fix: use code-splitting * fix: firefox doesn't like ESM service workers * fix: remove type in sw registration * feat: add git version into index.html --------- Co-authored-by: Daniel N <[email protected]> * fix: service worker logs are visible again (#395) * fix: service worker logs are visible again * chore: self pr suggestion * fix: remove fonts from dist folder (#394) * fix: remove fonts from dist folder * chore: install http-server for playwright * fix: use more ipfs-sw prefixes (#396) * fix: use enable from @libp2p/logger (#398) * feat: add p2p retrieval option (#391) * feat: add config toggle for p2p retrieval * deps: add helia and bump verified fetch * feat: load p2p helia * chore: remove console.log * feat: try to make recursive gateways optional * fixup! feat: add config toggle for p2p retrieval * chore: aegir lint --fix * chore: install missing deps * feat: use esbuild for building * feat: remove webpack * test: fix e2e tests * chore: remove timeout only required on my network * chore: remove copyfiles * chore: suggestions from self code review * fix: gateways null when loading sw * fix: use code-splitting * fix: firefox doesn't like ESM service workers * fix: remove type in sw registration * feat: add git version into index.html * Revert "feat: try to make recursive gateways optional" This reverts commit eba97a4. * fix: bug returning an array with 1 el * ui: improve contrast for disabled toggle * feat: add granular config options * test: fix config layout test * deps: add missing deps * fix: unused deps * fix: make toggles smaller * fix: avoid setting defaults in inputs * feat: allow a single router for now * chore: rename to get verified fetch * feat: reorder config * feat: add additional title * fix: break config UI into sections * chore: output localhost as listening host * fix: allow multiple routers see #402 * fix: run validation onblur to allow editing * fix: log config as string otherwise it's not viewable in the console * feat: add ipip-484 filtering to delegated router * chore: more left padding on input section Co-authored-by: Daniel Norman <[email protected]> --------- Co-authored-by: Daniel N <[email protected]> Co-authored-by: Russell Dempsey <[email protected]> --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Russell Dempsey <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Daniel N <[email protected]>
ipfs · Oct 25, 2024 · f8716fa · f8716fa
1 parent 2f4cbfd
commit f8716fa
Show file tree

Hide file tree

Showing 29 changed files with 12,913 additions and 9,164 deletions.
diff --git a/.aegir.js b/.aegir.js
@@ -20,20 +20,17 @@ export default {
       'ipfs-css',
       'tachyons',
 
-      // required by webpack
-      'webpack-cli',
-      'webpack-dev-server',
-      'babel-loader',
-      'style-loader',
-      'css-loader'
+      // playwright dependencies
+      'http-server'
     ],
     productionIgnorePatterns: [
       'webpack.config.js',
       'playwright.config.js',
       'test-e2e',
       '.aegir.js',
       '/test',
-      'dist'
+      'dist',
+      'build.js'
     ]
   }
 }
diff --git a/build.js b/build.js
@@ -0,0 +1,215 @@
+/* eslint-disable no-console */
+import { execSync } from 'node:child_process'
+import fs from 'node:fs'
+import path from 'node:path'
+import esbuild from 'esbuild'
+
+const copyPublicFiles = () => {
+  const srcDir = path.resolve('public')
+  const destDir = path.resolve('dist')
+
+  // Ensure the destination directory exists
+  if (!fs.existsSync(destDir)) {
+    fs.mkdirSync(destDir, { recursive: true })
+  }
+
+  // Read all files in the source directory
+  const files = fs.readdirSync(srcDir)
+
+  // Copy each file to the destination directory
+  files.forEach(file => {
+    const srcFile = path.join(srcDir, file)
+    const destFile = path.join(destDir, file)
+    fs.copyFileSync(srcFile, destFile)
+    console.log(`${file} copied to dist folder.`)
+  })
+}
+
+function gitRevision () {
+  try {
+    const ref = execSync('git rev-parse --abbrev-ref HEAD').toString().trim()
+    const sha = execSync('git rev-parse --short HEAD').toString().trim()
+
+    try {
+      // detect production build
+      execSync('git fetch --force --depth=1 --quiet origin production')
+      const latestProduction = execSync('git rev-parse remotes/origin/production').toString().trim()
+      if (latestProduction.startsWith(sha)) {
+        return `production@${sha}`
+      }
+
+      // detect staging build
+      execSync('git fetch --force --depth=1 --quiet origin staging')
+      const latestStaging = execSync('git rev-parse remotes/origin/staging').toString().trim()
+      if (latestStaging.startsWith(sha)) {
+        return `staging@${sha}`
+      }
+    } catch (_) { /* noop */ }
+
+    return `${ref}@${sha}`
+  } catch (_) {
+    return `no-git-dirty@${new Date().getTime().toString()}`
+  }
+}
+
+/**
+ * Inject the dist/index.js and dist/index.css into the dist/index.html file
+ *
+ * @param {esbuild.Metafile} metafile
+ */
+const injectAssets = (metafile) => {
+  const htmlFilePath = path.resolve('dist/index.html')
+
+  // Extract the output file names from the metafile
+  const outputs = metafile.outputs
+  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'))
+
+  const scriptTag = `<script type="module" src="${path.basename(scriptFile)}"></script>`
+  const linkTag = `<link rel="stylesheet" href="${path.basename(cssFile)}">`
+
+  // Read the index.html file
+  let htmlContent = fs.readFileSync(htmlFilePath, 'utf8')
+
+  // Inject the link tag for CSS before the closing </head> tag
+  htmlContent = htmlContent.replace('</head>', `${linkTag}</head>`)
+
+  // Inject the script tag for JS before the closing </body> tag
+  htmlContent = htmlContent.replace('</body>', `${scriptTag}</body>`)
+
+  // Inject the git revision into the index
+  htmlContent = htmlContent.replace(/<%= GIT_VERSION %>/g, gitRevision())
+
+  // Write the modified HTML back to the index.html file
+  fs.writeFileSync(htmlFilePath, htmlContent)
+  console.log(`Injected ${path.basename(scriptFile)} and ${path.basename(cssFile)} into index.html.`)
+}
+
+/**
+ * We need the service worker to have a consistent name
+ *
+ * @type {esbuild.Plugin}
+ */
+const renameSwPlugin = {
+  name: 'rename-sw-plugin',
+  setup (build) {
+    build.onEnd(() => {
+      const outdir = path.resolve('dist')
+      const files = fs.readdirSync(outdir)
+
+      files.forEach(file => {
+        if (file.startsWith('ipfs-sw-sw-')) {
+          // everything after the dot
+          const extension = file.slice(file.indexOf('.'))
+          const oldPath = path.join(outdir, file)
+          const newPath = path.join(outdir, `ipfs-sw-sw${extension}`)
+          fs.renameSync(oldPath, newPath)
+          console.log(`Renamed ${file} to ipfs-sw-sw${extension}`)
+          if (extension === '.js') {
+            // Replace sourceMappingURL with new path
+            const contents = fs.readFileSync(newPath, 'utf8')
+            const newContents = contents.replace(/sourceMappingURL=.*\.js\.map/, 'sourceMappingURL=ipfs-sw-sw.js.map')
+            fs.writeFileSync(newPath, newContents)
+          }
+        }
+      })
+    })
+  }
+}
+
+/**
+ * @type {esbuild.Plugin}
+ */
+const modifyBuiltFiles = {
+  name: 'modify-built-files',
+  setup (build) {
+    build.onEnd(async (result) => {
+      copyPublicFiles()
+      injectAssets(result.metafile)
+    })
+  }
+}
+
+/**
+ * @param {string[]} extensions - The extension of the imported files to exclude. Must match the fill ending path in the import(js) or url(css) statement.
+ * @returns {esbuild.Plugin}
+ */
+const excludeFilesPlugin = (extensions) => ({
+  name: 'exclude-files',
+  setup (build) {
+    build.onResolve({ filter: /.*/ }, async (args) => {
+      if (extensions.some(ext => args.path.endsWith(ext))) {
+        return { path: args.path, namespace: 'exclude', external: true }
+      }
+    })
+  }
+})
+
+/**
+ * @type {esbuild.BuildOptions}
+ */
+export const buildOptions = {
+  entryPoints: ['src/index.tsx', 'src/sw.ts'],
+  bundle: true,
+  outdir: 'dist',
+  loader: {
+    '.js': 'jsx',
+    '.css': 'css',
+    '.svg': 'file'
+  },
+  minify: true,
+  sourcemap: true,
+  metafile: true,
+  splitting: false,
+  target: ['es2020'],
+  format: 'esm',
+  entryNames: 'ipfs-sw-[name]-[hash]',
+  assetNames: 'ipfs-sw-[name]-[hash]',
+  plugins: [renameSwPlugin, modifyBuiltFiles, excludeFilesPlugin(['.eot?#iefix', '.otf', '.woff', '.woff2'])]
+}
+
+const ctx = await esbuild.context(buildOptions)
+
+const buildAndWatch = async () => {
+  try {
+    await ctx.watch()
+
+    process.on('exit', async () => {
+      await ctx.dispose()
+    })
+
+    console.log('Watching for changes...')
+    await ctx.rebuild()
+    console.log('Initial build completed successfully.')
+  } catch (error) {
+    console.error('Build failed:', error)
+    process.exit(1)
+  }
+}
+
+const watchRequested = process.argv.includes('--watch')
+const serveRequested = process.argv.includes('--serve')
+
+if (!watchRequested && !serveRequested) {
+  try {
+    await ctx.rebuild()
+    console.log('Build completed successfully.')
+  } catch (error) {
+    console.error('Build failed:', error)
+    process.exit(1)
+  }
+  await ctx.dispose()
+}
+
+if (watchRequested) {
+  await buildAndWatch()
+}
+
+if (serveRequested) {
+  const { port } = await ctx.serve({
+    servedir: 'dist',
+    port: 8345,
+    host: 'localhost'
+  })
+  console.info(`Listening on http://localhost:${port}`)
+}