ES6 Router Parameter

How-to Discussions
1

I am new to Fuse and just getting started with the Hike tutorial. I have fully committed to ES6 and a lot of the NPM modules I use are based on the new language. Therefore it would be ideal to use it with FuseTools! I have already setup my build environment based on bundling with rollup.

However, I am struggling to figure out how to pass Router Parameters as I am receiving the error that “this.Parameter” is not defined. Has anyone done this before, or is there an alternative way to access the Parameter Observable?

2

Hi! That repository is very much outdated (I was actually planning on removing it at some point), and is something I hacked together a while ago since Fuse didn’t have proper support for require() at the time.

The problem with rollup is that it bundles everything into a single module. This approach works well for the web, where you want to reduce the number of HTTP requests, and imports can be resolved at transpile-time.

In Fuse however, we don’t have the problem that module bundlers like rollup are trying to solve, as there’s virtually no overhead for requiring a JavaScript module (no HTTP request needed).
Also, Fuse itself needs to be in charge of what happens when require() is called, and so you’re better off just using babel directly.

Now, the problem you’re having with this.Parameter is because of a small detail in the es2015 preset for babel which makes it replace any top-level this reference with undefined. I already have written a babel preset for this, but it seems to have broken since I wrote it.

Anyway, I have tried the following, and it seems to work.

  1. Install dependencies:
$ npm install --save-dev babel-preset-es2015 babel-plugin-transform-es2015-modules-commonjs
$ npm install --global babel-cli
  1. Create a .babelrc file in the same folder as your package.json:
{
	"presets": [
		["es2015", { "modules": false }]
	],
	"plugins": [
		["transform-es2015-modules-commonjs", {
			"allowTopLevelThis": true
		}]
	]
}
  1. Run babel:
babel <source-directory> --out-dir <destination-directory>

(alternatively using --watch for auto reload)

3

Ah okay, thank you for the detailed reply and insight. I will have a play around with your proposed setup, would it be worth forking the original tutorial and adapting for ES6 And TypeScript? May be useful for future users

4

smig88@gmail.com wrote:

Ah okay, thank you for the detailed reply and insight. I will have a play around with your proposed setup, would it be worth forking the original tutorial and adapting for ES6 And TypeScript? May be useful for future users

That would be superb, I’d bet there are more people who are interested in this as well!

However, seeing as I’m not going to actively maintain this going forward and the fact that my original example was “wrong”, I think the best approach is to just create a new repo from scratch. If you decide to do so, feel free to submit it to our list of community packages :slight_smile:

5

All done and can be viewed here:

Will post it to the community packages. There could be a better way to integrate the javascript files to the .ux pages as currently they need to reference the javascript files in the dist folder. Not sure if it is possible to just take the absolute route from the project? Otherwise maybe putting together a gulp script to watch the .ux files and push them to dist as well with the updated javascript file paths.

6

Great job, smig88!

Happy to see it worked out for you. If there are further issues, like the ones you mentioned, I suggest you add them as tickets in that repo of yours, and post separate threads on the forum to bring attention (and possibly, help) to them.

This specific thread will now be marked as resolved.

7

Stefan wrote:

All done and can be viewed here:
GitHub - Darkbladecr/hikr: A basic example app to accompany Fuse's end-to-end tutorial with ES6 implemented.

Will post it to the community packages. There could be a better way to integrate the javascript files to the .ux pages as currently they need to reference the javascript files in the dist folder. Not sure if it is possible to just take the absolute route from the project? Otherwise maybe putting together a gulp script to watch the .ux files and push them to dist as well with the updated javascript file paths.

Fantastic! I’d actually recommend just referring to the files in dist/, since you’d end up with both gulp and Fuse watching for file changes on every reload, and doing needless copying every time you change a file. Also, having different sets of files in the “same” folder can quickly become very confusing :slight_smile: