Loosly packs image assets instead. (#9)

Author: skellock

fuse.js

@@ -1,8 +1,9 @@
-const { FuseBox, CSSPlugin, Sparky, ImageBase64Plugin } = require('fuse-box')
+const { FuseBox, CSSPlugin, Sparky, CopyPlugin } = require('fuse-box')
 const { spawn } = require('child_process')
 
 const DEV_PORT = 4445
 const OUTPUT_DIR = 'out'
+const ASSETS = ['*.jpg', '*.png', '*.jpeg', '*.gif', '*.svg']
 
 // are we running in production mode?
 const isProduction = process.env.NODE_ENV === 'production'
@@ -20,7 +21,6 @@ Sparky.task('default', ['copy-html'], () => {
     output: `${OUTPUT_DIR}/$name.js`,
     target: 'electron',
     cache: !isProduction,
-    plugins: [CSSPlugin(), ImageBase64Plugin({ useDefault: true })],
     sourceMaps: true
   })
 
@@ -38,7 +38,11 @@ Sparky.task('default', ['copy-html'], () => {
   }
 
   // bundle the electron renderer code
-  const rendererBundle = fuse.bundle('renderer').instructions('> [renderer/index.tsx]')
+  const rendererBundle = fuse
+    .bundle('renderer')
+    .instructions('> [renderer/index.tsx]')
+    .plugin(CSSPlugin())
+    .plugin(CopyPlugin({ useDefault: true, files: ASSETS, dest: 'assets', resolve: 'assets/' }))
 
   // and watch & hot reload unless we're bundling for production
   if (!isProduction) {

package-lock.json

@@ -2,7 +2,7 @@ import * as React from 'react'
 import dogImage from './fun-dog.jpg'
 
 const style = {
-  width: '200',
+  width: 200,
   borderStyle: 'solid',
   borderWidth: 4,
   borderColor: 'white'

src/renderer/platform/components/fun-dog/fun-dog.tsx

@@ -1,9 +1,5 @@
 import * as React from 'react'
-// Just until this ships:
-// https://github.com/fuse-box/fuse-box/pull/672
-// 
-// then we can drop the '* as'
-import * as icon from './electron-icon.svg'
+import icon from './electron-icon.svg'
 
 const style = {
   width: 80,