Work

Rakefile

@@ -3,12 +3,12 @@
 
 require_relative 'config/application'
 
-# namespace :assets do
-#   task :precompile do
-#   end
-#   task :clobber do
-#   end
-# end
+namespace :erik do
+  task :setup do
+    puts `cp public/assets/.manifest.json app/javascript/.manifest.json`
+  end
+end
 
 Rails.application.load_tasks
 
+Rake::Task['javascript:build'].enhance(%w[erik:setup])

app/javascript/components/common/GraphicalIcon.tsx

@@ -1,4 +1,7 @@
 import React from 'react'
+import manifest from '../../.manifest.json'
+
+console.log(manifest)
 
 export function GraphicalIcon({
   icon,
@@ -15,7 +18,7 @@ export function GraphicalIcon({
     (className) => className.length > 0
   )
 
-  const iconFile = require(`../../images/${category || 'icons'}/${icon}.svg`)
+  const iconFile = manifest[`images/${category || 'icons'}/${icon}.svg`]
 
   return hex ? (
     <div className={classNames.join(' ')}>

app/javascript/components/common/Icon.tsx

@@ -1,4 +1,7 @@
 import * as React from 'react'
+import manifest from '../../.manifest.json'
+
+console.log(manifest)
 
 export function Icon({
   icon,
@@ -15,8 +18,7 @@ export function Icon({
   if (className !== undefined) {
     classNames.push(className)
   }
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  const iconFile = require(`../../images/${category}/${icon}.svg`)
+  const iconFile = manifest[`images/${category}/${icon}.svg`]
 
   return <img src={iconFile} alt={alt} className={classNames.join(' ')} />
 }

app/javascript/components/common/imageErrorHandler.tsx

@@ -1,12 +1,12 @@
-const errorIcon = require(`../../../images/graphics/missing-exercise.svg`)
+// const errorIcon = require(`../../../images/graphics/missing-exercise.svg`)
 
 export const imageErrorHandler = (
   e: React.SyntheticEvent<HTMLImageElement, Event>
 ) => {
-  const el = e.target as HTMLImageElement
-  if ((el.src = errorIcon)) {
-    return
-  }
-  el.onerror = null
-  el.src = errorIcon
+  // const el = e.target as HTMLImageElement
+  // if ((el.src = errorIcon)) {
+  //   return
+  // }
+  // el.onerror = null
+  // el.src = errorIcon
 }

app/javascript/esbuild.js

@@ -1,5 +1,5 @@
 #!/usr/bin/env node
-
+console.log('yay')
 const svgrPlugin = require('esbuild-plugin-svgr')
 const ImportGlobPlugin = require('esbuild-plugin-import-glob')
 
@@ -12,7 +12,7 @@ for (const k in process.env) {
 */
 
 /* TODO: Get a map of all the images (name -> digest name)
- * and pass this into the config to replace the dynamic requires 
+ * and pass this into the config to replace the dynamic requires
  * in Icon/GraphicalIcon which don't work with esbuild */
 
 require('esbuild')
@@ -25,7 +25,7 @@ require('esbuild')
     bundle: true,
     sourcemap: true,
     outdir: '.built-assets',
-    tsconfig: "./tsconfig.json",
+    tsconfig: './tsconfig.json',
     define: {
       'process.env.BUGSNAG_API_KEY': '"938ae3d231c5455e5c6597de1b1467af"',
     },