First go at fusebox v4.

ui/fuse.js

@@ -1,62 +0,0 @@
-const {
-  FuseBox,
-  Sparky,
-  EnvPlugin,
-  CSSPlugin,
-  WebIndexPlugin,
-  QuantumPlugin,
-} = require('fuse-box');
-// const transformInferno = require('../../dist').default
-const transformInferno = require('ts-transform-inferno').default;
-const transformClasscat = require('ts-transform-classcat').default;
-let fuse, app;
-let isProduction = false;
-// var setVersion = require('./set_version.js').setVersion;
-
-Sparky.task('config', _ => {
-  fuse = new FuseBox({
-    homeDir: 'src',
-    hash: isProduction,
-    output: 'dist/$name.js',
-    experimentalFeatures: true,
-    cache: !isProduction,
-    sourceMaps: !isProduction,
-    transformers: {
-      before: [transformClasscat(), transformInferno()],
-    },
-    alias: {
-      locale: 'moment/locale',
-    },
-    plugins: [
-      EnvPlugin({ NODE_ENV: isProduction ? 'production' : 'development' }),
-      CSSPlugin(),
-      WebIndexPlugin({
-        title: 'Inferno Typescript FuseBox Example',
-        template: 'src/index.html',
-        path: isProduction ? '/static' : '/',
-      }),
-      isProduction &&
-        QuantumPlugin({
-          bakeApiIntoBundle: 'app',
-          treeshake: true,
-          uglify: true,
-        }),
-    ],
-  });
-  app = fuse.bundle('app').instructions('>index.tsx');
-});
-// Sparky.task('version', _ => setVersion());
-Sparky.task('clean', _ => Sparky.src('dist/').clean('dist/'));
-Sparky.task('env', _ => (isProduction = true));
-Sparky.task('copy-assets', () =>
-  Sparky.src('assets/**/**.*').dest(isProduction ? 'dist/' : 'dist/static')
-);
-Sparky.task('dev', ['clean', 'config', 'copy-assets'], _ => {
-  fuse.dev();
-  app.hmr().watch();
-  return fuse.run();
-});
-Sparky.task('prod', ['clean', 'env', 'config', 'copy-assets'], _ => {
-  // fuse.dev({ reload: true }); // remove after demo
-  return fuse.run();
-});

ui/fuse.ts

@@ -0,0 +1,112 @@
+import { fusebox, sparky, pluginCustomTransform } from 'fuse-box';
+
+import Inferno from 'ts-transform-inferno';
+import Classcat from 'ts-transform-classcat';
+// const transformInferno = require('ts-transform-inferno').default;
+// const transformClasscat = require('ts-transform-classcat').default;
+
+// Sparky.task('config', _ => {
+//   fuse = new FuseBox({
+//     homeDir: 'src',
+//     hash: isProduction,
+//     output: 'dist/$name.js',
+//     // experimentalFeatures: true,
+//     cache: !isProduction,
+//     sourceMaps: !isProduction,
+//     transformers: {
+//       before: [transformClasscat(), transformInferno()],
+//     },
+//     alias: {
+//       locale: 'moment/locale',
+//     },
+//     plugins: [
+//       EnvPlugin({ NODE_ENV: isProduction ? 'production' : 'development' }),
+//       CSSPlugin(),
+//       WebIndexPlugin({
+//         title: 'Inferno Typescript FuseBox Example',
+//         template: 'src/index.html',
+//         path: isProduction ? '/static' : '/',
+//       }),
+//       isProduction &&
+//         QuantumPlugin({
+//           bakeApiIntoBundle: 'app',
+//           treeshake: true,
+//           uglify: true,
+//         }),
+//     ],
+//   });
+//   app = fuse.bundle('app').instructions('>index.tsx');
+// });
+// // Sparky.task('version', _ => setVersion());
+// Sparky.task('clean', => Sparky.src('dist/').clean('dist/'));
+// Sparky.task('env', _ => (isProduction = true));
+// Sparky.task('copy-assets', () =>
+//   Sparky.src('assets/**/**.*').dest(isProduction ? 'dist/' : 'dist/static')
+// );
+// Sparky.task('dev', ['clean', 'config', 'copy-assets'], _ => {
+//   fuse.dev();
+//   app.hmr().watch();
+//   return fuse.run();
+// });
+// Sparky.task('prod', ['clean', 'env', 'config', 'copy-assets'], _ => {
+//   // fuse.dev({ reload: true }); // remove after demo
+//   return fuse.run();
+// });
+
+class Context {
+  runServer: any;
+  getConfig = () =>
+    fusebox({
+      target: 'browser',
+      entry: 'src/index.tsx',
+      webIndex: {
+        template: 'src/index.html',
+        // publicPath: 'static',
+      },
+      cache: true,
+      // link: { resourcePublicRoot: '/assets' },
+      // resources: {
+      //   resourceFolder: './dist/assets',
+      //   resourcePublicRoot: './assets',
+      // },
+      plugins: [
+        pluginCustomTransform({
+          before: [Inferno()],
+        }),
+        // pluginLink(/\.js/, { useDefault: true }),
+        // pluginLink(/\.css/, { useDefault: true }),
+      ],
+
+      // dependencies: {
+      //   ignoreAllExternal: true,
+      // },
+      devServer: this.runServer,
+    });
+}
+const { task, src } = sparky<Context>(Context);
+
+// task("copy:images", async () => {
+//   await src("./**/*.png", { base: "./src/assets" })
+//   .dest("./dist/")
+//   .exec()
+// })
+
+task;
+task('dev', async ctx => {
+  ctx.runServer = true;
+  const fuse = ctx.getConfig();
+
+  await src('assets/**/**.*')
+    .dest('dist/static', '')
+    .exec();
+  await fuse.runDev();
+});
+
+task('prod', async ctx => {
+  ctx.runServer = false;
+  const fuse = ctx.getConfig();
+  await fuse.runProd({
+    uglify: false,
+    // screwIE: true,
+  });
+});

ui/package.json

@@ -6,9 +6,9 @@
   "license": "GPL-2.0-or-later",
   "main": "index.js",
   "scripts": {
-    "build": "node fuse prod",
+    "build": "ts-node fuse prod",
     "lint": "tsc --noEmit && eslint --report-unused-disable-directives --ext .js,.ts,.tsx src",
-    "start": "node fuse dev"
+    "start": "ts-node fuse dev"
   },
   "keywords": [],
   "dependencies": {
@@ -17,13 +17,13 @@
     "@types/jwt-decode": "^2.2.1",
     "@types/markdown-it": "^0.0.9",
     "@types/markdown-it-container": "^2.0.2",
-    "@types/node": "^13.7.0",
+    "@types/node": "^13.7.1",
     "autosize": "^4.0.2",
     "bootswatch": "^4.3.1",
-    "classcat": "^1.1.3",
+    "classcat": "^4.0.2",
     "dotenv": "^8.2.0",
     "emoji-short-name": "^1.0.0",
-    "husky": "^4.2.1",
+    "husky": "^4.2.3",
     "i18next": "^19.0.3",
     "inferno": "^7.0.1",
     "inferno-i18next": "nimbusec-oss/inferno-i18next",
@@ -47,12 +47,12 @@
   "devDependencies": {
     "eslint": "^6.5.1",
     "eslint-plugin-inferno": "^7.14.3",
-    "eslint-plugin-jane": "^7.0.2",
-    "fuse-box": "^3.1.3",
+    "eslint-plugin-jane": "^7.1.1",
+    "fuse-box": "^4.0.0-next.165",
     "lint-staged": "^10.0.2",
     "sortpack": "^2.0.1",
     "ts-node": "^8.6.2",
-    "ts-transform-classcat": "^0.0.2",
+    "ts-transform-classcat": "^0.1.1",
     "ts-transform-inferno": "^4.0.2",
     "typescript": "^3.7.5"
   },