Adjusting image imports to support webpack.

Author: skellock

.storybook/webpack.config.js

@@ -2,17 +2,17 @@ const path = require('path')
 const genDefaultConfig = require('@storybook/react/dist/server/config/defaults/webpack.config.js')
 
 module.exports = (config, env) => {
-    const myConfig = genDefaultConfig(config, env)
+  const myConfig = genDefaultConfig(config, env)
 
-    myConfig.module.rules.push({
-        test: /\.tsx?$/,
-        loader: 'ts-loader',
-        exclude: /node_modules/,
-        include: path.resolve(__dirname, '..', 'src')
-    })
+  myConfig.module.rules.push({
+    test: /\.tsx?$/,
+    loader: 'ts-loader',
+    exclude: /node_modules/,
+    include: path.resolve(__dirname, '..', 'src'),
+  })
 
-    myConfig.resolve.extensions.unshift('.tsx')
-    myConfig.resolve.extensions.unshift('.ts')
+  myConfig.resolve.extensions.unshift('.tsx')
+  myConfig.resolve.extensions.unshift('.ts')
 
-    return myConfig
+  return myConfig
 }

fuse.ts

@@ -43,7 +43,7 @@ Sparky.task('default', ['copy-html'], () => {
     .bundle('renderer')
     .instructions('> [renderer/index.tsx] +fuse-box-css')
     .plugin(CSSPlugin())
-    .plugin(CopyPlugin({ useDefault: true, files: ASSETS, dest: 'assets', resolve: 'assets/' }))
+    .plugin(CopyPlugin({ useDefault: false, files: ASSETS, dest: 'assets', resolve: 'assets/' }))
 
   // and watch & hot reload unless we're bundling for production
   if (!isProduction) {

src/renderer/features/example-using-tabs/fun-dog/fun-dog.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { CSSProperties } from 'react'
-import dogImage from './fun-dog.jpg'
+import * as dogImage from './fun-dog.jpg'
 import { colors, SpinAnimation } from '../../../platform'
 import { css } from 'glamor'
 

src/renderer/features/example-using-tabs/logo/logo.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { CSSProperties } from 'react'
 import { cssProps, animations } from '../../../platform'
-import icon from './electron-icon.svg'
+import * as icon from './electron-icon.svg'
 import { css } from 'glamor'
 
 const ROOT = css(

tsconfig.json

@@ -5,7 +5,7 @@
     "moduleResolution": "node",
     "jsx": "react",
     "experimentalDecorators": true,
-    "allowSyntheticDefaultImports": true,
+    "allowSyntheticDefaultImports": false,
     "strict": true,
     "noUnusedLocals": true
   }

typings/images.d.ts

@@ -1,21 +1,7 @@
 // Tell the TS compiler that it's ok to load these
-// types of extensions.  FuseBox will do the right thing.
-declare module '*.jpeg' {
-  export default ''
-}
-
-declare module '*.jpg' {
-  export default ''
-}
-
-declare module '*.gif' {
-  export default ''
-}
-
-declare module '*.png' {
-  export default ''
-}
-
-declare module '*.svg' {
-  export default ''
-}
+// types of extensions.  FuseBox and webpack will do the right thing.
+declare module '*.jpeg'
+declare module '*.jpg'
+declare module '*.gif'
+declare module '*.png'
+declare module '*.svg'