FuseBox 4.0.0 - Alpha release

[nchanged]

Hey all! Finally FuseBox 4.0 alpha is here.

You can try it out in this repository

New configuration is available for reading here

There are plenty of breaking changes, but this version introduces a much simpler config, most of things are "assumed" therefore there is no need in plugins. In fact most of the configuration is moved to the main config which makes it nicer and easier to configure.

v4 is at least 7x-10x faster than v3

Please start testing, and help out with anything!!! For example documentation ;-)

• pluginReplace
• pluginJSON (a part of the core - don't include it unless you need custom handlers)

[sentialx]

What is the new equivalent of the CopyPlugin? I use it, because bundling svg as base64 into bundle.js doesn't seem to work. I'm using styled-components, so I guess I can't use CSSResourcePlugin.

[nchanged]

@sentialx CSSResourcePlugin is now a part of the core, and every single preprocessor will respect that. See stylesheet property

• I will add the copyPlugin and include svg as a part of the core (no plugin will be needed)

[sentialx]

Thanks, but the CopyPlugin is rather a workaround for me. I would rather like to have my svg and png files bundled as base64 into one js file, but when I was using ImageBase64Plugin the images just didn't show.

[nchanged]

I am not sure how bundling png is better than referencing a static image tho. It will be huge

[jpike88]

No clear instructions on how to use sparky, it's now a function?

[jpike88]

Just some notes at this point:

• [x] No clear instructions on how to use sparky, it's now a function?
• [x] No ReplacePlugin, is that just a wip right now?
• [x] No hash config?
• [x] What's this dependency? https://github.com/fuse-box/fuse-box/blob/v4/package.json#L28
• [x] Doesn't seem compatible with NgTemplatePlugin?

[nchanged]

@jpike88 yes, sparky returns an object, every task has a context defined in that function

• ReplacePlugin will be added
• That's a user error ;-) I will remove it ASAP

[jpike88]

What's an example of how to run a sparky call? I just want to define some tasks, and call src a few times, I didn't need any context for that before?

[nchanged]

class Context {
  npmTag: 'latest' | 'alpha' | 'next';
  versionBumpType: IBumpVersionType;
}
const { src, rm, task, exec } = sparky(Context);
task('copy-modules', async context => {
  await src('./modules/**/**.*')
    .dest('dist/modules', 'modules')
    .exec();
});

[zsparal]

The latest alpha (27) fails whenever I try to use the @material-ui/core library (but based on a larger project this does not seem to be an isolated case). Here's a repro using the tsconfig/fuse.js in the first comment for simplicity.

[nchanged]

thanks @Gustorn I will look into it!

[nchanged]

@Gustorn fuse-box@4.0.0-alpha.28 please keep testing! it has been fixed!

[zsparal]

@nchanged Thank you very much, the issue is fixed! Unfortunately I ran into another issue, see the repro in the repository linked above.

EDIT: Sorry for the unrelated core-js package, I'm trying to reproduce another, more complicated issue in the meantime. The repro should still be pretty clear.

[nchanged]

@Gustorn thanks, the issue is clear, it's this Babel and _interopRequireDefault should be easy to find a fix. I removed that line and everything is ok! The good news is that it's all bundled correctly

[patrickmichalina]

Strange error when using .instructions(' ~ '). to declare a "vendor" bundle.

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type object
    at validateString (internal/validators.js:107:11)
    at Object.extname (path.js:1223:5)
    at PathMaster.ensureFolderAndExtensions (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/core/PathMaster.js:195:24)
    at PathMaster.getAbsolutePath (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/core/PathMaster.js:120:27)
    at PathMaster.resolve (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/core/PathMaster.js:85:38)
    at PathMaster.init (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/core/PathMaster.js:30:31)
    at ModuleCollection.resolveDepsOnly (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/core/ModuleCollection.js:61:62)
    at ModuleCollection.collectBundle (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/core/ModuleCollection.js:75:24)
    at FuseBox.process (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/core/FuseBox.js:247:32)
    at /Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/core/FuseBox.js:318:25

Usage:

  fuseBrowser
    .bundle(settings.vendorBundleName)
    .instructions(` ~ ${mainAppEntry}`) // PROBLEM IS HERE. Works fine in FuseBox v3

  fuseBrowser
    .bundle(settings.appBundleName)
    .splitConfig({ dest: settings.jsLazyModuleDir, browser: `/${settings.jsOutputDir}/` })
    .watch(`${settings.homeDir}/**`, () => settings.watch)
    .instructions(` !> [${mainAppEntry}]`)

[nchanged]

@patrickmichalina that's not v4, v4 doesn't contain neither of the syntax. See here for reference.

The latest alpha version is fuse-box@4.0.0-alpha.28

[zsparal]

@nchanged I think I managed to fix it in #1531.

[nchanged]

Thanks ! I took a brief look, but I think it needs to be fixed on the transpiler level (plugin_js) by adding A statement (like ts does)

[nchanged]

@Gustorn I've decided that we need that fix too. Please check the comments there;-)

[nchanged]

fuse-box@4.0.0-alpha.30

[patrickmichalina]

fusebox({
   ...
  output: 'dist/public/js'
  ...
})

this has strange behavior. It only emits the entry bundle, the vendors are not longer emitted when you set the "output" property parameter.

[zsparal]

@nchanged Thanks, the issue was fixed again. After getting through this error I found two new ones, please see them in the same repository. Thank you for your continued work!

[chrismcv]

@nchanged - issue with alpha-30 we were chatting on gitter about.

chris@chris-ThinkPad-T460:~/code/app/web$ node fuse
 WebIndex enabled, processing ...
 assemble  package react:16.7.0
 assemble  package bootstrap:3.4.0
 assemble  package moment:2.24.0
 assemble  package react-dom:16.7.0
 assemble  package object.values:1.1.0
 assemble  package validate.js:0.12.0
 assemble  package native-promise-only:0.8.1
 assemble  package mobile-detect:1.3.7
 assemble  package react-hot-loader:4.7.1
 assemble  package fuse-box-hot-reload:1.0.0
 assemble  package prop-types:15.6.2
 assemble  package create-react-class:15.6.3
 assemble  package mobx-react:5.4.4
 assemble  package react-router-dom:4.3.1
 assemble  package @date-io/moment:1.1.0
 assemble  package material-ui-pickers:2.1.2
 assemble  package @material-ui/core:3.9.0
 assemble  package fuse-box-dev-import:1.0.0
 assemble  package exim:0.7.1-beta4
 assemble  package mobx:4.9.4
 assemble  package lodash:4.17.11
 assemble  package jquery:2.2.4
 assemble  package fuse-box-css:1.0.0
 assemble  package nested-property:0.0.7
 assemble  package react-validation-mixin:4.2.0
 assemble  package classnames:2.2.6
 assemble  package jexl:1.1.4
 assemble  package bind-decorator:1.0.11
 assemble  package react-dragula:1.1.17
 assemble  package react-css-transition-replace:3.0.3
 assemble  package mobx-utils:4.0.1
 assemble  package joi:6.10.1
 assemble  package react-bootstrap:0.30.3
 assemble  package react-number-format:4.0.6
 assemble  package react-addons-pure-render-mixin:15.6.2
 assemble  package react-responsive:6.0.1
 assemble  package react-gravatar:1.0.0
 assemble  package react-document-title:2.0.3
 assemble  package marked:0.3.19
 assemble  package tm2-draft-js:0.7.0
 assemble  package uuid:3.3.2
 assemble  package camelcase:4.1.0
 assemble  package servicestack-client:0.0.41
 assemble  package react-compound-slider:0.12.0
 assemble  package immutable:3.8.2
 assemble  package process:1.0.0
 assemble  package query-string:6.2.0
 assemble  package mobx-react-devtools:6.1.1
 assemble  package react-router:4.3.1
 assemble  package react-flexbox-grid:0.9.6
 assemble  package react-sortable-hoc:0.6.8
 assemble  package stream:1.0.0
 assemble  package react-dropzone:3.0.0
 assemble  package intl-locales-supported:1.0.0
 assemble  package react-star-rating-component:1.4.1
 assemble  package pigeon-cluster:0.0.6
 assemble  package react-dimensions:1.3.1
 assemble  package pigeon-maps:0.9.12
 assemble  package pigeon-marker:0.3.4
 assemble  package pigeon-overlay:0.2.3
 assemble  package react-animate-height:1.0.4
 assemble  package react-collapse:4.0.3
 assemble  package handlebars:4.0.12
 assemble  package http:1.0.0
 assemble  package bz-draft:1.0.0
 assemble  package typescript:3.4.5
 assemble  package util:1.0.0
 assemble  package react-svg-pathline:0.5.0
 assemble  package crypto-js:3.1.8
 assemble  package react-webcam:1.1.0
 assemble  package bluebird:3.5.3
 assemble  package react-list:0.8.11
 assemble  package react-swipeable-views:0.13.3
 assemble  package ckeditor-releases:1.0.0
 assemble  package jstimezonedetect:1.0.6
 assemble  package react-countdown-clock:1.1.0
 assemble  package react-addons-css-transition-group:15.6.2
 assemble  package typeface-roboto:0.0.45
 assemble  package fnv-plus:1.2.12
 assemble  package history:4.7.2
 assemble  package object-assign:4.1.1
 assemble  package scheduler:0.12.0
 assemble  package define-properties:1.1.3
 assemble  package object-keys:1.0.12
 assemble  package es-abstract:1.13.0
 assemble  package has:1.0.3
 assemble  package function-bind:1.1.1
 assemble  package es-to-primitive:1.2.0
 assemble  package is-callable:1.1.4
 assemble  package is-date-object:1.0.1
 assemble  package is-symbol:1.0.2
 assemble  package has-symbols:1.0.0
 assemble  package is-regex:1.0.4
 assemble  package shallowequal:1.1.0
 assemble  package fast-levenshtein:2.0.6
 assemble  package react-lifecycles-compat:3.0.4
 assemble  package hoist-non-react-statics:2.5.5
 assemble  package lodash.merge:4.6.1
 assemble  package buffer:1.0.0
 assemble  package base64-js:1.3.0
 assemble  package ieee754:1.1.13
 assemble  package fuse-box-websocket:1.0.0
 assemble  package events:1.0.0
 assemble  package fbjs:0.8.17
 assemble  package warning:4.0.2
 assemble  package warning:3.0.0
 assemble  package invariant:2.2.4
 assemble  package resolve-pathname:2.2.0
 assemble  package value-equal:0.4.0
 assemble  package path-to-regexp:1.7.0
 assemble  package isarray:0.0.1
 assemble  package tslib:1.9.3
 assemble  package @babel/runtime:7.3.1
 assemble  package @material-ui/utils:3.0.0-alpha.3
 assemble  package react-is:16.7.0
 assemble  package jss:9.8.7
 assemble  package symbol-observable:1.2.0
 assemble  package is-in-browser:1.1.3
 assemble  package jss-global:3.0.0
 assemble  package jss-nested:6.0.1
 assemble  package jss-camel-case:6.1.0
 assemble  package hyphenate-style-name:1.0.2
 assemble  package jss-default-unit:8.0.2
 assemble  package jss-vendor-prefixer:7.0.0
 assemble  package css-vendor:0.3.8
 assemble  package jss-props-sort:6.0.0
 assemble  package deepmerge:3.1.0
 assemble  package is-plain-object:2.0.4
 assemble  package isobject:3.0.1
 assemble  package keycode:2.2.0
 assemble  package react-transition-group:1.2.1
 assemble  package chain-function:1.0.1
 assemble  package debounce:1.2.0
 assemble  package react-event-listener:0.6.5
 assemble  package @babel/runtime:7.2.0
 assemble  package brcast:3.0.1
 assemble  package dom-helpers:3.4.0
 assemble  package recompose:0.30.0
 assemble  package react-text-mask:5.4.3
 assemble  package clsx:1.0.1
 assemble  package react-transition-group:2.5.3
 assemble  package normalize-scroll-left:0.1.2
 assemble  package popper.js:1.14.6
 assemble  package babel-runtime:6.26.0
 assemble  package core-js:2.6.3
 assemble  package freezer-js:0.6.1
 assemble  package object.assign:3.0.1
 assemble  package lodash.result:3.1.2
 assemble  package lodash._baseget:3.7.2
 assemble  package lodash._baseslice:3.0.3
 assemble  package lodash._topath:3.8.1
 assemble  package lodash.isarray:3.0.4
 assemble  package lodash.isfunction:3.0.9
 assemble  package lodash.isempty:3.0.4
 assemble  package lodash.isarguments:3.1.0
 assemble  package lodash.isstring:3.0.1
 assemble  package lodash.keys:3.1.2
 assemble  package lodash._getnative:3.9.1
 assemble  package lodash.isobject:3.0.2
 assemble  package he:0.5.0
 assemble  package dragula:3.7.2
 assemble  package contra:1.9.4
 assemble  package atoa:1.0.0
 assemble  package ticky:1.0.1
 assemble  package crossvent:1.5.4
 assemble  package custom-event:1.0.0
 assemble  package hoek:2.16.3
 assemble  package crypto:1.0.0
 assemble  package path:1.0.0
 assemble  package topo:1.1.0
 assemble  package net:1.0.0
 assemble  package isemail:1.2.0
 assemble  package react-prop-types:0.4.0
 assemble  package dom-helpers:2.4.0
 assemble  package react-overlays:0.6.12
 assemble  package uncontrollable:4.1.0
 assemble  package md5:1.0.1
 assemble  package querystring:1.0.0
 assemble  package is-retina:1.0.3
 assemble  package https:1.0.0
 assemble  package react-side-effect:1.1.5
 assemble  package exenv:1.2.2
 assemble  package ua-parser-js:0.7.19
 assemble  package fetch-everywhere:1.0.5
 assemble  package whatwg-fetch:3.0.0
 assemble  package d3-array:1.2.4
 assemble  package strict-uri-encode:2.0.0
 assemble  package decode-uri-component:0.2.0
 assemble  package flexboxgrid:6.3.1
 assemble  package stream-browserify:2.0.2
 assemble  package inherits:2.0.3
 assemble  package readable-stream:2.3.6
 assemble  package process-nextick-args:2.0.0
 assemble  package isarray:1.0.0
 assemble  package safe-buffer:5.1.2
 assemble  package core-util-is:1.0.2
 assemble  package fuse-empty-package:1.0.0
 assemble  package string_decoder:1.1.1
 assemble  package util-deprecate:1.0.2
 assemble  package attr-accept:1.1.3
 assemble  package supercluster:2.3.0
 assemble  package kdbush:1.0.1
 assemble  package element-resize-event:2.0.9
 assemble  package react-motion:0.5.2
 assemble  package performance-now:0.2.0
 assemble  package raf:3.4.1
 assemble  package performance-now:2.1.0
 assemble  package fs:1.0.0
 assemble  package source-map:0.6.1
 assemble  package source-map-support:0.5.10
 assemble  package buffer-from:1.1.1
 assemble  package module:1.0.0
 assemble  package prop-types:15.7.2
 assemble  package react-is:16.8.4
 assemble  package @babel/runtime:7.0.0
 assemble  package react-swipeable-views-core:0.13.1
ParseError [SyntaxError]: Illegal character '' (1:0)
/*
^

    at report (/home/chris/code/app/web/node_modules/fuse-box/transform/meriyah.js:172:15)
    at scanSingleToken$$1 (/home/chris/code/app/web/node_modules/fuse-box/transform/meriyah.js:4470:17)
    at nextToken$$1 (/home/chris/code/app/web/node_modules/fuse-box/transform/meriyah.js:4189:23)
    at parseModuleItem (/home/chris/code/app/web/node_modules/fuse-box/transform/meriyah.js:5525:9)
    at parseSource (/home/chris/code/app/web/node_modules/fuse-box/transform/meriyah.js:5508:36)
    at Object.parse (/home/chris/code/app/web/node_modules/fuse-box/transform/meriyah.js:8476:16)
    at Object.parseAst (/home/chris/code/app/web/node_modules/fuse-box/transform/fastTransform/fastTransform.js:14:20)
    at Object.fastAstAnalysis (/home/chris/code/app/web/node_modules/fuse-box/analysis/fastAstAnalysis.js:15:33)
    at Object.fastAnalysis (/home/chris/code/app/web/node_modules/fuse-box/analysis/fastAnalysis.js:29:34)
    at processModule (/home/chris/code/app/web/node_modules/fuse-box/main/assemble.js:121:51) {
  index: 0,
  line: 1,
  column: 0,
  description: "Illegal character '' (1:0)\n/*\n^\n"
}

[nchanged]

@patrickmichalina it needs to have $name.js

[jcmoore0]

@nchanged - I am testing V4 with apollo-client and graphql.
Example: https://github.com/jcmoore0/fuse-box-v4-apollo.
There is an issue importing the zen-observable-ts dependency.
Appreciate any suggestions.

Uncaught TypeError: Object prototype may only be an Object or null: undefined at setPrototypeOf () at Object.__extends (vendor.js.js:28587)

Thanks so much for V4! ... very nice and super fast.

[nchanged]

@Gustorn I know what's the issue about, again, custom transpiler isn't simple ;-) I think it's related @jcmoore0 I am at it ;-)

[nchanged]

@Gustorn all of your issues are fixed in fuse-box@4.0.0-alpha.31

@jcmoore0 you issue is fixed by adding allowSyntheticDefaultImports: true there is nothing FuseBox can do here, there is default module reference to a module that doesn't contain default exports... (and just in case, upgrade to fuse-box@4.0.0-alpha.31)

[zsparal]

@nchanged Thank you very much! Unfortunately I'm back with a new issue. This time it has to do with the Node shims that fusebox bundles: they fail when they are used on the right hand side of an instanceof (the repro is in the same repository a usual).

[nchanged]

@Gustorn thanks a lot ;-) that's not unfortunate! that's fortunate that we can iron out these issues before going further for testing production builds.

[jcmoore0]

@nchanged - allowSyntheticDefaultImports worked great, thanks!

[patrickmichalina]

@nchanged I don't understand how to define if a bundle should include/exclude packages. In v3, we can use the .instructions() command. Is there an equivalent here?

[nchanged]

@patrickmichalina I will add this functionality soon ;-) As of now, you can just include the files you need into your entry point. Do you do server too?

[nchanged]

@Gustorn resolved in fuse-box@4.0.0-alpha.32

[chrismcv]

@nchanged anything else you need for the ParseError [SyntaxError]: Illegal character '' (1:0) (i'm still seeing in fuse-box@4.0.0-alpha.33)

[nchanged]

I will update the lib, I think than @KFlash has fixed it already I just need to update it

[KFlash]

@nchanged Yup. Fixed a few days ago. Just use Meriyah from NPM

[jcmoore0]

@nchanged - I was not able to use auth0-js with V4.
Issue: Function process is declared after var process is assigned.

snippet: FuseBox.pkg("auth0-js", {}, function(scope){ scope.file("dist/auth0.min.esm.js", function(exports, require, module){ var process = require("process"); var commonjsGlobal = "undefined" != typeof window ? window : "undefined" != typeof global ? global : "undefined" != typeof self ? self : {}; //code removed for brevity
function process(jwks) { return { modulus: base64_1.decodeToHEX(jwks.n), exp: base64_1.decodeToHEX(jwks.e) }; }

[nchanged]

@chrismcv @jcmoore0 should be fixed here fuse-box@4.0.0-alpha.34

[jcmoore0]

That fixed it nicely, thank you. I would like to get assets working next. Sparky copied assets to /dist but the target image files (jpg, png, ico) were corrupted.

[chrismcv]

@nchanged still seeing the same/similar.

ParseError [SyntaxError]: Illegal character '' (1:0)
/*
^

    at report (/home/chris/code/app/web/node_modules/meriyah/dist/meriyah.umd.js:350:13)
    at scanSingleToken (/home/chris/code/app/web/node_modules/meriyah/dist/meriyah.umd.js:780:15)
    at nextToken (/home/chris/code/app/web/node_modules/meriyah/dist/meriyah.umd.js:489:22)
    at parseparseModuleItemList (/home/chris/code/app/web/node_modules/meriyah/dist/meriyah.umd.js:1834:7)
    at parseSource (/home/chris/code/app/web/node_modules/meriyah/dist/meriyah.umd.js:1802:21)
    at Object.parse (/home/chris/code/app/web/node_modules/meriyah/dist/meriyah.umd.js:5037:14)
    at Object.parseAst (/home/chris/code/app/web/node_modules/fuse-box/transform/fastTransform/fastTransform.js:13:20)
    at Object.fastAstAnalysis (/home/chris/code/app/web/node_modules/fuse-box/analysis/fastAstAnalysis.js:18:33)
    at Object.fastAnalysis (/home/chris/code/app/web/node_modules/fuse-box/analysis/fastAnalysis.js:32:34)
    at processModule (/home/chris/code/app/web/node_modules/fuse-box/main/assemble.js:125:51) {
  index: 0,
  line: 1,
  column: 0,
  description: "Illegal character '' (1:0)\n/*\n^\n"
}

[nchanged]

@KFlash could you take a look at this? It looks like an issue with meriyah@0.2.2 @chrismcv could you check which file throws this error?

[KFlash]

@nchanged I can't do much with that issue when it's already solved, and there exist test cases for it. It's related to ZWJ. Before it didn't see ZWJ as a WS, and that error occured. Both my own tests and Test262 test suite agree that there is no such issue anymore.

How can this be reproduced? In Meriyah there are only 2 possibilities for this to happen

1) Stand-alone 2) Part of identifier

Anyway. This tests cover the issue above And this T‌ is what it throws on, but doesn't in Meriyah if you look at this test.

Note: Open in a editor to see the red dot to the right of the first char. That is the ZWJ.

[nchanged]

@chrismcv could you reproduce it in a repository? that would be helpful.

[chrismcv]

@nchanged - is there a way I can get more debugging info out of this? I'm not sure how I can work out what file is causing this?

[KFlash]

@nchanged You told me before that the package react-swipeable-views-core:0.13.1 caused the issue. I used parsed it just fine - both the lib and src folder.

Based on the error reported this "Illegal character" has to be the first char in the source parsed. So I will verify that ZWJ doesn't screw up anything as the first WS.

[KFlash]

@chrismcv @nchanged Use latest version of Meriyah from NPM and see if the issue still exist.

[nchanged]

Should be here fuse-box@4.0.0-alpha.36

[jcmoore0]

@nchanged - I added the image corruption issue to Repo Problem: The jpeg is increased in size when copied. Cause: String vs Buffer handling utils.js readFileSync(file).toString() - toString() should not be used on buffer data (images)

[patrickmichalina]

HMR closes down randomly on me (Mac OSX)

Error [ERR_IPC_CHANNEL_CLOSED]: Channel closed
    at ChildProcess.target.send (internal/child_process.js:678:16)
    at Object.setText (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/logging/Spinner.js:25:21)
    at log (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/logging/logging.js:43:31)
    at Object.info (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/logging/logging.js:72:13)
    at /Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/plugins/core/plugin_js.js:57:29
    at /Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/interceptor/interceptor.js:34:49
    at Array.map (<anonymous>)
    at Object.sync (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/interceptor/interceptor.js:34:39)
    at processModule (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/main/process_plugins.js:6:9)
    at processPackage (/Users/patrick/Code/fusing-angular-2/node_modules/fuse-box/main/process_plugins.js:11:19)

[nchanged]

@patrickmichalina yeah, that's cuz of the spinner. I think I am going to remove that....