Adds image bundling support. (#8)

Author: skellock

fuse.js

@@ -1,4 +1,4 @@
-const { FuseBox, CSSPlugin, Sparky, SVGPlugin } = require('fuse-box')
+const { FuseBox, CSSPlugin, Sparky, ImageBase64Plugin } = require('fuse-box')
 const { spawn } = require('child_process')
 
 const DEV_PORT = 4445
@@ -20,7 +20,7 @@ Sparky.task('default', ['copy-html'], () => {
     output: `${OUTPUT_DIR}/$name.js`,
     target: 'electron',
     cache: !isProduction,
-    plugins: [SVGPlugin(), CSSPlugin()],
+    plugins: [CSSPlugin(), ImageBase64Plugin({ useDefault: true })],
     sourceMaps: true
   })
 

globals.d.ts

@@ -0,0 +1,8 @@
+// Tell the TS compiler that it's ok to load these
+// types of extensions.  FuseBox will do the right thing.
+
+declare module '*.jpeg'
+declare module '*.jpg'
+declare module '*.gif'
+declare module '*.png'
+declare module '*.svg'

package.json

@@ -71,5 +71,5 @@
     "postinstall": "Used by electron-builder to build native dependencies.",
     "start": "Starts the app in dev mode."
   },
-  "version": "0.3.0"
+  "version": "0.4.0"
 }

src/renderer/app/app.tsx

@@ -1,5 +1,6 @@
+
 import * as React from 'react'
-import { Text, Logo } from '../platform'
+import { Text, Logo, FunDog } from '../platform'
 
 const appStyle = {
   flex: 1,
@@ -18,12 +19,18 @@ const appStyle = {
   cursor: 'default'
 }
 
+const textStyle = {
+  paddingTop: 20,
+  paddingBottom: 20
+}
+
 export class App extends React.Component<{}, {}> {
   render() {
     return (
       <div style={appStyle}>
         <Logo />
-        <Text>Wake up and smell the electrons.</Text>
+        <Text style={textStyle}>Wake up and smell the electrons.</Text>
+        <FunDog />
       </div>
     )
   }

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

@@ -0,0 +1,13 @@
+import * as React from 'react'
+import dogImage from './fun-dog.jpg'
+
+const style = {
+  width: '200',
+  borderStyle: 'solid',
+  borderWidth: 4,
+  borderColor: 'white'
+}
+
+export function FunDog() {
+  return <img src={dogImage} style={style} alt="Photo by Braydon Anderson on Unsplash" />
+}

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

@@ -2,3 +2,4 @@
 
 export * from './text/text'
 export * from './logo/logo'
+export * from './fun-dog/fun-dog'

src/renderer/platform/components/index.ts

@@ -1,11 +1,13 @@
 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'
 
-const icon = require('./electron-icon.svg')
 const style = {
   width: 80,
   height: 80,
-  marginTop: -80,
-  paddingBottom: 20,
   animation: 'spin360 infinite 5s linear'
 }
 

src/renderer/platform/components/logo/logo.tsx

@@ -3,10 +3,11 @@ import * as React from 'react'
 export interface TextProps {
   text?: string
   children?: React.ReactNode
+  style?: any
 }
 
 export function Text(props: TextProps) {
   return (
-    <div>{props.text || props.children}</div>
+    <div style={props.style}>{props.text || props.children}</div>
   )
 }