Develop Reference

Webpack how to require .node file (To use the WebChimera.js package in Vue Electron)

I'm trying to include a VLC video playing in my Electron app, which is possible through WebChimera.js. This package is distributed a bit weirdly (to me at least), to use it you need to require wcjs-prebuilt, specify some settings in package.json and configure Webpack to allow importing .node files as explained in this Wiki page for WebChimera.js.
However I believe this Wiki page is outdated, as loaders isn't a valid key anymore in a Webpack config. I'm not very experienced using Webpack so most of this is new to me. Also note that this Wiki explanation used a fork of node-loader, although this fork seems to be merged to the actual node-loader now (?).
I now use this Webpack config:
target: 'node',
node: {
__dirname: false,
},
module: {
rules: [
{
test: /\.node$/,
loader: 'node-loader',
},
],
},
externals: [
'wcjs-prebuilt',
],
Because that's how the Webpack page for node-loader seems to do it. However this doesn't work for me, as now I get the error: Uncaught ReferenceError: exports is not defined in the chunk-vendors.js:1 file. Which probably means it's trying to use require syntax somewhere it shouldn't, but I have no idea how to proceed here. This error still occurs in an otherwise empty vue-electron project (template here), when I comment out all WebChimera related code. WebChimera code I use for testing in this project (Right now I'm just trying to get it to work):
const wcjs = require("wcjs-prebuilt");
console.log(wcjs)
When I remove the webpack config I showed above, the error about exports is not defined goes away, which is why I believe it's something in my webpack config rather than my code causing that error.
Long story short, I want to know how configure webpack to allow me to import or a require a .node file.

I'm able to get vue electron building with wcjs-prebuilt using a vue.config.js like this. You will also need to set the VLC_PLUGIN_PATH correctly or video won't play.
module.exports = {
configureWebpack: {
externals: {
'wcjs-prebuilt': 'commonjs wcjs-prebuilt'
},
},
chainWebpack: (config) => {
config.module
.rule('node')
.test(/.node$/i)
.use('node-loader')
.loader('node-loader')
.end()
},
pluginOptions: {
electronBuilder: {
externals: ['wcjs-prebuilt']
}
}
}

Since posting the question I've switched to mpv.js for video playback so this isn't an issue for me anymore. However after posting this question I experimented a lot, after I finally got it working in Webpack somehow (see first link below), it worked for me but with distorted video. The node file added some properties to an array which Webpack somehow stripped away, causing some missing values in the video renderer. I fixed that by forking WebChimera and editing the C++ code so that the values weren't added as properties but as separate values.
I ended up forking WebChimera.js, wcjs-prebuilt, wcjs-renderer, and libvlc_wrapper to get VLC to finally work with Webpack+Electron, all that probably wasn't necessary but oh well..
Links for whoever might be interested:
https://github.com/RuurdBijlsma/vlc-video-demo (working demo project featuring VLC in an Electron+Webpack+Vue project.)
https://github.com/RuurdBijlsma/libvlc_wrapper
https://github.com/RuurdBijlsma/wcjs-renderer
https://github.com/RuurdBijlsma/WebChimera.js
https://github.com/RuurdBijlsma/wcjs-prebuilt

How to create aurelia typescript project with vs2017rc

I am new to aurelia, and I need create a prototype project of the framework. At the beginning, I planed to use skeleton-typescript-aspnetcore skeleton, but when I tried the vs2017rc, I found it uses .csproj as the default format(while vs2015 is project.json/.xproj), I think we should follow the vs2017 because we will upgrade our IDE after it's been launched.
The vs2017 have a wizard to upgrade .xproj project, but after the upgrading(skeleton-typescript-aspnetcore), there still lots of error ahead me...
I also tried aurelia-cli, but seems it has not support vs2017 yet, does anyone could give a guide to create the prototype project? I will integrate some plugins like the skeleton mentioned above, such as gulp,karma,breeze...
thank you in advance.

Since Visual Studio 2017 just launched I thought I'd answer how I solved this, as there are still many errors when using "skeleton-typescript-aspnetcore".
Using https://github.com/aurelia/skeleton-navigation/releases/tag/1.1.2 as a starting point, these are the steps to get it running:
When you first run the project you will get errors complaining that some files located in /test/ is not under 'rootDir'. In your tsconfig.json the rootDir is defined as "src/", this can be solved simply by moving your test folder inside your src folder. This will cause new errors because the paths defined in those files has now changed. You will need to edit app, child-router and users imports like this:
import {Users} from '../../users'; IntelliSense should help you out here.
The command gulp test will also not run before changing to the new path, you can change the path in karma.conf.js:
files: [
'src/test/unit/setup.ts',
'src/test/unit/*.ts'
],
Next the file users.ts will throw errors like Type 'Response' is not assignable to type 'any[]'. You will need to tell TypeScript what you're declaring like this: public users : Object = []; or simply: public users = {};
The final problem is that you're going to have a lot of duplicate identifier errors, at the time of writing this the cause of this seems to be from the changes brought on by TypeScript version 2.2.1. I don't know what specifically breaks, but I know that previous version 2.1.5 still works. So what you need to do is to run npm install typescript#2.1.5 --save in your src/skeleton directory, the --save is just to update your package.json file, you can do this on your own later as well if you wish.
After you've done that your gulp errors (20~ of them) should be resolved. But there are still some errors remaining caused by duplicate signatures. Again, things have changed in TypeScript 2.0+, there is now a simplified way of getting and using declaration files. Here is an answer on SO on how to use the #types feature: How should I use #types with TypeScript 2 , but to keep this short and sweet you will have to go to your tsconfig.json file and explicitly tell where to find the #types/node folder. It would look something like this:
"compilerOptions": {
...
"typeRoots": [
"node_modules/#types"
],
"types": [ "node" ]
...
},
Hope this helps, with these changes the project should now build and launch correctly.
EDIT:
I recently ran into some problems again with building my project. I got a lot of duplicate identifiers again... I however ran across this answer on SO: TypeScript throws multiple duplicate identifiers
Apparently TypeScript latest ships with fetch definitions out of the box, so I was able to run the command from the answer in the link:
npm uninstall #types/whatwg-fetch
And upgrading from typescript 2.1.5 to latest:
npm install typescript --save
You might even want to install typescript globally by appending -g.
Also this will continue to be an issue unless you comment out/delete url and whatwg-fetch from typings.json globalDependencies in order to prevent it from recreating itself:
"globalDependencies": {
//"url": "github:aurelia/fetch-client/doc/url.d.ts#bbe0777ef710d889a05759a65fa2c9c3865fc618",
//"whatwg-fetch": "registry:dt/whatwg-fetch#0.0.0+20160524142046"
}
Then you can either delete the typings folder, running typings install again or edit index.d.ts in the typings folder and delete the reference paths to whatwg-fetch and url.
Hope this helps someone who might've encountered the same problems even after "fixing" it.

Phonegap Plugin not working (cordova-plugin-purchase)

My first Phonegap App. Everything working well except for plugins. I'm trying to install the cordova-plugin-purchase Plugin.
https://github.com/j3k0/cordova-plugin-purchase
I've followed the instructions. And when I run "phonegap plugins" in the console it shows the plugin as being installed.
According to the documentation, there is suppose to be a "store" object that I can reference. I set up the following code to test if it's working:
try {
store.register({
id: "my.reverse.item.example",
alias: "example name",
type: store.CONSUMABLE
});
} catch(err) {
alert(err);
}
On my real project, I have the real info in when registering the product, but I can't even get that far. In my TryCatch it returns the following alert:
"Can't find variable: store".
So it seems that the plugin isn't even installed correct. I'm not to phonegap plugins, so there's probably something very basic that I'm missing. Do I have to include a link to the plugin JS in my index.html file?

I ended up figuring out the problem. It seems to be that I didn't include the cordova.js file in my index.html. I don't see why I needed to do that since I've read over and over that you don't need to manually add the cordova files to your html files.
So the plugin works now and I can receive the store data that I setup using the cordova-plugin-purchase plugin tutorials.
Another thing to note once you actually have the plugin installed correctly:
The Bundle Identifier in Xcode needs to match the bundle ID for the In App purchases you are trying to connect to.

Stop Webstorm of Displaying Error on hbs! Plugin for require.js

There are two files in my project:
index.js where the following code is
define([ 'exports', 'hbs!./general'], function (exports, generalTemplate) {
});
general.handlebars which is correctly taken by require.js and the hbs! plug-in.
I'm basically using Require.js with Handlebars.js and the https://github.com/SlexAxton/require-handlebars-plugin for automating the creation of templates from files.
It works correctly, but Webstorm 8 (and also 7 before it) doesn't understand the file is correct so it always complains with: Cannot resolve file 'general'. It is the same with every file using that plugin prefix.
I coudln't find where (if it exists) to turn that notification off, because it underlines the entire file, and its parent directories as having errors.
How can I remove this error of being reported?

This notification can't be turned off unfortunately - annotator-level inspections can't be suppressed.
The issue with relative paths resolving when loading plugins for non-js extensions is tracked as WEB-1167, please vote

How do I connect bower components with sails.js?

I'd like to be able to install Javascript dependencies through bower and use them in a sails.js app, but I can't figure out a way to do this with out just copying an pasting files from the bower_components folder to the Sails assets folder.
Ideally I think I'd like to use requirejs and point to the bower components in the main.js file. I may be trying to pound a square peg in a round hole, please let me know if so. Any thoughts on managing components/libraries with Sails are welcome.

In Sails 0.10 the 'assets/linker' directory no longer exists, however I found a lead on simple solution that gives some automation to the bower -> asset linker workflow while also allowing some granular control over what exactly ends up getting linked.
The solution is adding grunt-bower to your Sails.js compileAssets task
grunt.registerTask('compileAssets', [
'clean:dev',
'bower:dev',
'jst:dev',
'less:dev',
'copy:dev',
'coffee:dev'
]);
Then configure your grunt-bower task like so (as tasks/config/bower.js):
module.exports = function(grunt) {
grunt.config.set('bower', {
dev: {
dest: '.tmp/public',
js_dest: '.tmp/public/js',
css_dest: '.tmp/public/styles'
}
});
grunt.loadNpmTasks('grunt-bower');
};
This will automatically copy your bower js and css files to the proper place for Sail's asset linker to find and automatically add to your project's layout template. Any other js or css files will still automatically be added after your bower files.
However this is still no silver bullet as this setup has 2 big caveats to it:
1 - The files that are added through bower-grunt have to be listed in bower.json's main array. If you see a file isn't being loaded you would expect to be, you must either edit that packages bower.json file OR add the dependency manually through grunt-bower's packageSpecific options.
2 - The order of bower files in the asset linker is currently alphabetical. My only recourse to adjust this order so far is tinkering around with an additional grunt task to manually re-order files prior to the rest of Sail's compileAssets task. However this one I'm confident there is something grunt-bower could do by supporting package copy ordering.

Note: the following answer is no longer completely relevant to the current version of SailsJS because there is no support for the linker folder as of SailsJS 0.10.
See: Sails not generating linker
Original answer:
I was able to figure out a solution for this, which is actually pretty simple. I had not realized you could configure where bower places it's files.
Create a .bowerrc file and change the directory where bower components are installed, in the case of Sailjs they should be put into the assets folder.
/*
* Create a file called .bowerrc and put the following in it.
* This file should be in the root directory of the sails app.
*/
{
"directory": "assets/linker/bower_components"
}
Sails will then use grunt to copy them to the .tmp/public/assets folder whenever a file is change. If you don't wish to have sails continually deleting and then recopying those files you can exclude them in the grunt file.
/*
* This is not necessary, but if you have a lot of components and don't want
* them constantly being deleted and copied at every file change you can update
* your Gruntfile.js with the below.
*/
clean: {
dev: ['.tmp/public/**',
'!.tmp/public',
'!.tmp/public/bower_components/**'],
build: ['www']
},
One tip on using requirejs with sails. By default you will get an error from the socket.io file since sails will load it without using requirejs. This will throw an error since socket.io supports amd style loading, more details here http://requirejs.org/docs/errors.html#mismatch.
The simplest way to fix this is to just comment out the lines near the end of the socket.io.js.
/*
* Comment the below out in the file assets/js/socket.io.js, if using requirejs
* and you don't want to modify the default sails setup or socket.io.
*/
if (typeof define === "function" && define.amd) {
define([], function () { return io; });
}
The other way would be to recode the sails files in assets/js named "socket.io.js", "sails.io.js" and app.js to be amd modules.

The simplest way I've found of achieving this is simply to add the individual Bower components to your tasks/pipeline.js file. For example, here's how you might add Modernizr:
// Client-side javascript files to inject in order
// (uses Grunt-style wildcard/glob/splat expressions)
var jsFilesToInject = [
// Load sails.io before everything else
'js/dependencies/sails.io.js',
// Dependencies like jQuery, or Angular are brought in here
'js/dependencies/**/*.js',
// =========================================================
// Modernizr:
'bower_components/modernizr/modernizr.js',
// =========================================================
// All of the rest of your client-side js files
// will be injected here in no particular order.
'js/**/*.js'
];
A link to bower_components/modernizr/modernizr.js then gets inserted in the <!--SCRIPTS--> placeholder in your layout template, and it also gets minified, etc, when you run sails lift --prod.

Sorry for my late.
I think include bower_components in linker it's a bad idea, because when you will lift sails, everything in it will be copied in .tmp and include in tags.
For example, if you have include Angular with bower, you will have two inclusions in your script: one for angular.js and one for angular.min.js. And having both is a mistake.
Here is my solution on my projects :
I have created a folder bower_component in my root directory.
I have added this line in my Gruntfile.js in the array files in copy:dev
{ '.tmp/public/linker/js/angular.js': './bower_components/angular/angular.js' }
And for each files I want to include, I need to manually add a new line in this array. I haven't find an another automatic solution. If someone finds a better solution... ;)

There is more than one approach to hooking up SailsJS and Bower.
A package for SailsJS that integrates Bower via a custom generator exists here:
https://www.npmjs.com/package/sails-generate-bower
There is one for Gulp as well.