Adds svg support. (#7)

Author: skellock

fuse.js

@@ -1,4 +1,4 @@
-const { FuseBox, CSSPlugin, Sparky } = require('fuse-box')
+const { FuseBox, CSSPlugin, Sparky, SVGPlugin } = require('fuse-box')
 const { spawn } = require('child_process')
 
 const DEV_PORT = 4445
@@ -9,9 +9,7 @@ const isProduction = process.env.NODE_ENV === 'production'
 
 // copy the renderer's html file into the right place
 Sparky.task('copy-html', () => {
-  return Sparky
-    .src('src/renderer/{index.html,*.css}')
-    .dest(`${OUTPUT_DIR}/$name`)
+  return Sparky.src('src/renderer/{index.html,*.css}').dest(`${OUTPUT_DIR}/$name`)
 })
 
 // the default task
@@ -22,6 +20,7 @@ Sparky.task('default', ['copy-html'], () => {
     output: `${OUTPUT_DIR}/$name.js`,
     target: 'electron',
     cache: !isProduction,
+    plugins: [SVGPlugin(), CSSPlugin()],
     sourceMaps: true
   })
 
@@ -31,20 +30,15 @@ Sparky.task('default', ['copy-html'], () => {
   }
 
   // bundle the electron main code
-  const mainBundle = fuse
-    .bundle('main')
-    .instructions('> [main/main.ts]')
+  const mainBundle = fuse.bundle('main').instructions('> [main/main.ts]')
 
   // and watch unless we're bundling for production
   if (!isProduction) {
     mainBundle.watch()
   }
 
   // bundle the electron renderer code
-  const rendererBundle = fuse
-    .bundle('renderer')
-    .plugin(CSSPlugin())
-    .instructions('> [renderer/index.tsx]')
+  const rendererBundle = fuse.bundle('renderer').instructions('> [renderer/index.tsx]')
 
   // and watch & hot reload unless we're bundling for production
   if (!isProduction) {
@@ -53,12 +47,10 @@ Sparky.task('default', ['copy-html'], () => {
   }
 
   // when we are finished bundling...
-  return fuse
-    .run()
-    .then(() => {
-      if (!isProduction) {
-        // startup electron
-        spawn('node', [`${__dirname}/node_modules/electron/cli.js`, __dirname], { stdio: 'inherit' })
-      }
-    })
+  return fuse.run().then(() => {
+    if (!isProduction) {
+      // startup electron
+      spawn('node', [`${__dirname}/node_modules/electron/cli.js`, __dirname], { stdio: 'inherit' })
+    }
+  })
 })

src/renderer/app/app.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Text } from '../platform'
+import { Text, Logo } from '../platform'
 
 const appStyle = {
   flex: 1,
@@ -22,6 +22,7 @@ export class App extends React.Component<{}, {}> {
   render() {
     return (
       <div style={appStyle}>
+        <Logo />
         <Text>Wake up and smell the electrons.</Text>
       </div>
     )

src/renderer/index.html

@@ -7,6 +7,7 @@
   <title>Welcome</title>
   <style>
     @import url('./reset.css');
+    @import url('./keyframes.css');
   </style>
 </head>
 

src/renderer/keyframes.css

@@ -0,0 +1,8 @@
+@keyframes spin360 {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

src/renderer/platform/components/index.ts

@@ -1,3 +1,4 @@
 // exports all the components
 
 export * from './text/text'
+export * from './logo/logo'

src/renderer/platform/components/logo/electron-icon.svg

@@ -0,0 +1,14 @@
+import * as React from 'react'
+
+const icon = require('./electron-icon.svg')
+const style = {
+  width: 80,
+  height: 80,
+  marginTop: -80,
+  paddingBottom: 20,
+  animation: 'spin360 infinite 5s linear'
+}
+
+export function Logo() {
+  return <img src={icon} style={style} />
+}