import { CSSPlugin, FuseBox, FuseBoxOptions, Sparky } from 'fuse-box'; import path = require('path'); import TsTransformClasscat from 'ts-transform-classcat'; import TsTransformInferno from 'ts-transform-inferno'; /** * Some of FuseBoxOptions overrides by ts config (module, target, etc) * https://fuse-box.org/page/working-with-targets */ let fuse: FuseBox; const fuseOptions: FuseBoxOptions = { homeDir: './src', output: 'dist/$name.js', sourceMaps: { inline: false, vendor: false }, /** * Custom TypeScript Transformers (compile Inferno tsx to ts) */ transformers: { before: [TsTransformClasscat(), TsTransformInferno()], }, }; const fuseClientOptions: FuseBoxOptions = { ...fuseOptions, plugins: [ /** * https://fuse-box.org/page/css-resource-plugin * Compile Sass {SassPlugin()} * Make .css files modules-like (allow import them like modules) {CSSModules} * Make .css files modules like and allow import it from node_modules too {CSSResourcePlugin} * Use them all and bundle with {CSSPlugin} * */ CSSPlugin(), ], }; const fuseServerOptions: FuseBoxOptions = { ...fuseOptions, }; Sparky.task('clean', () => { /**Clean distribute (dist) folder */ Sparky.src('dist/').clean('dist/'); }); Sparky.task('config', () => { fuse = FuseBox.init(fuseOptions); fuse.dev(); }); Sparky.task('test', ['&clean', '&config'], () => { fuse.bundle('client/bundle').test('[**/**.test.tsx]', null); }); Sparky.task('client', () => { fuse.opts = fuseClientOptions; fuse .bundle('client/bundle') .target('browser@esnext') .watch('client/**') .hmr() .instructions('> client/index.tsx'); }); Sparky.task('copy-assets', () => Sparky.src('**/**.*', { base: 'src/assets' }).dest('dist/assets') ); Sparky.task('server', () => { /**Workaround. Should be fixed */ fuse.opts = fuseServerOptions; fuse .bundle('server/bundle') .watch('**') .target('server@esnext') .instructions('> [server/index.tsx]') .completed(proc => { proc.require({ // tslint:disable-next-line:no-shadowed-variable close: ({ FuseBox }) => FuseBox.import(FuseBox.mainFile).shutdown(), }); }); }); Sparky.task( 'dev', ['&clean', '&config', '&client', '&server', '©-assets'], () => { fuse.run(); } );