I am using the Zurb Fonudation framework. When I place a JavaScript framework such as snap.svg in the src/assets/js folder it will automatically get compiled into the app.js file. So far I've had one jQuery plugin that I've tried to use that is broken, and also snap.svg that gets broken. I'm assuming this has something to do with babel. For example with snap.svg I get the following error..
snap.svg.js:420 Uncaught TypeError: Cannot set property 'eve' of undefined
I've tried placing the path to snap.svg in the config.yml file but that doesn't seem to make any difference other than where snap.svg is located within app.js
I'm assuming I'm just not doing something right. Any ideas?
You can tell babel to not transpile particular pieces of code by passing the 'ignore' flag to it within the build process. E.g.:
function javascript() {
return gulp.src(PATHS.javascript)
.pipe($.sourcemaps.init())
.pipe($.babel({ignore: ['src/assets/js/snap.svg']}))
.pipe($.concat('app.js'))
.pipe($.if(PRODUCTION, $.uglify()
.on('error', e => { console.log(e); })
))
.pipe($.if(!PRODUCTION, $.sourcemaps.write()))
.pipe(gulp.dest(PATHS.dist + '/assets/js'));
}
You can see more about customizing the build process in this forum post: http://foundation.zurb.com/forum/posts/36974-enhancing-foundation-with-bower-components
Related
Having a hard time finding out where a helper not in app/helpers is defined. The helper was very generically named, I searched my package.json for the helper name but there was nothing. I was stuck hunting around with google to try and figure out what addon defined it.
Given some helper ({{totally-generic-name param1="foo"}}) how would one go about finding where it's defined?
(I happen to be on Ember 2.13)
(Note: the helper was contains defined in ember-composable-helpers, so it would have been a LITTLE helpful to search package.json for "helper" but that is a pretty tedious in-direct way of searching, which have may not even yielded the answer)
For me the easiest way is to run a development build of your application (ember serve), open development tools of your browser and open a file called <your-app-name>/helpers/<helper-name>.js. In the first line of the file, you see from where it is imported.
Let's assume your application name is foo and you have installed ember-array-helper. Run your application via ember serve and open it in Chrome. Go to development tools Source section. Search for helpers/array.js in subsection Network. You could search for a file per name via ctrl+p. If the helper is provided by an addon this file is autogenerated. It looks like the following:
define('foo/helpers/array', ['exports', 'ember-array-helper/helpers/array'], function (exports, _array) {
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, 'default', {
enumerable: true,
get: function () {
return _array.default;
}
});
});
In first line your read the name of the import ember-array-helper/helpers/array from which you can guess on the addon name (first part). Note that you could also open the actual helper exported by addon via developer tools by opening /assets/addon-tree-output/ember-array-helper/helpers/array.js. Since the last part is coming from the import, you could easily use that one to search for the file. Now place your breakpoints and inspect this code as much as you like.
The same approach should work in all major browsers.
We are currently developing an Aurelia application that needs to run on Internet Explorer 11. Everything is great until we try to run our Karma/Tape tests on IE11 using karma-ie-launcher.
Karma start properly, some tests are executing, until a test using a waitForDocumentElement is encountered. Since waitForDocumentElement use promises, I told myself, great, I just need to load some Promise polyfills into Karma and everything will start working just like it does when using Chrome. But, It obviously didn't.
So, finally the question. Is there a way to have my tests running on Karma, targeting IE11 using karma-ie-launcher and have the ability to use waitForDocumentElement in my tests. It seems to be the culprit here since it use promises.
I may to build up a sample repo aside my project if its needed.
Thanks!
Edit:
Here's the stack trace of the 'Out of stack space' error. For the records, rawValue is a bindable property I'm trying to assert inside a waitForDocumentelement so the binding and all have the time to do their stuff.
WARN: 'Unhandled rejection TypeError: Unable to get property 'rawValue' of undefined or null reference
at Anonymous function (http://localhost:9876/base/dist/_test/components/aurelia-numeric-input/aurelia-numeric-input.spec.js?ea0d4f3a76b6b818e30e08a7cbbc07dc5c11e02a:31:17)
at r (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:31:9351)
at i.prototype._settlePromiseFromHandler (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:14559)
at i.prototype._settlePromise (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:15364)
at i.prototype._settlePromise0 (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:16065)
at i.prototype._settlePromises (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:17395)
at r.prototype._drainQueue (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3054)
at r.prototype._drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3112)
at drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:1236)
at Anonymous function (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:31140)'
WARN: 'Unhandled rejection TypeError: Unable to get property 'rawValue' of undefined or null reference
at Anonymous function (http://localhost:9876/base/dist/_test/components/aurelia-numeric-input/aurelia-numeric-input.spec.js?ea0d4f3a76b6b818e30e08a7cbbc07dc5c11e02a:36:17)
at r (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:31:9351)
at i.prototype._settlePromiseFromHandler (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:14559)
at i.prototype._settlePromise (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:15364)
at i.prototype._settlePromise0 (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:16065)
at i.prototype._settlePromises (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:17395)
at r.prototype._drainQueue (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3054)
at r.prototype._drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:3112)
at drainQueues (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:29:1236)
at Anonymous function (http://localhost:9876/base/node_modules/bluebird/js/browser/bluebird.min.js?3d186ac6d244691754303d3153839bf42b57f7d1:30:31140)'
WARN: 'Unhandled rejection Error: Out of stack space
at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2691:7)
at _compileNode (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2547:11)
at compile (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2516:7)
at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2721:9)
at _compileNode (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2547:11)
at compile (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2516:7)
at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2721:9)
at _compileNode (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2547:11)
at compile (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2516:7)
at _compileElement (http://localhost:9876/base/node_modules/aurelia-templating/dist/amd/aurelia-templating.js?1766dc2dd0fa5489caa6a2c286fad9ab686c2f09:2721:9)'
Karma creates a property on the window named __karma__ which lists the files that match the patterns in your karma.conf.js. Typically there's some code in your test entry point module that pares down this list of filenames and strips the extension, etc so they become a list of module names suitable for your loader... requirejs in your case ;)
This array of module names is then assigned to the deps property of the requirejs config which causes requirejs to load all of them before calling the function assigned to the callback property of the requirejs config.
I've been manually adding bluebird as the first dependency. Then in the callback, I do some feature detection and if Promise is not supported by the browser, assign it to window.Promise.
Here's an example that should map pretty cleanly to your setup. Relevant lines are indicated with comments.
const testModules = Object.keys(window.__karma__.files)
.filter(filename => /\.spec\.js$/.test(filename))
.map(filename => filename.replace(/^\/base\/dist\/|\.js$/g, ''));
testModules.unshift('bluebird'); // make bluebird the first dependency in the array... this means it will be the first argument to the callback function (see below)
let karmaStarted = false;
require.config({
baseUrl: '/base/global/output',
paths: {
'bluebird': '../some/path/to/bluebird.min' // ensure the loader can find bluebird
},
deps: testModules, // bluebird is the first item in this array of modules
callback: (bluebird: any) => { // bluebird is the first arg... there are many other args but we don't care about the rest
if (karmaStarted) {
return;
}
// polyfill Promise on an as-needed basis.
if (!('Promise' in window && 'resolve' in window.Promise && 'reject' in window.Promise && 'all' in window.Promise && 'race' in window.Promise)) {
window.Promise = bluebird.Promise;
}
karmaStarted = true;
window.__karma__.start();
}
});
I am using ember-cli and have a problem with selecting the production environment. Specifically, everything works when I run ember serve --environment=development and I get a blank page when I run ember serve --environment=production. In the console, I see:
Uncaught TypeError: undefined is not a function
Uncaught Error: Could not find module simple-auth/authenticators/base
All other things are equal, and all dependencies are up to date. I'm a total noob so I don't even know where to begin on how to debug: is it ember? ember-cli? broccoli? Any help would be appreciated.
I had exact the same problem, and James_1x0 is correct, it is an broccoli issue.
After debugging it occurs, that the "undefined" error apears on "Ember.handlebars.compile" which lead to other research.
It seems, that in production envrironment "handlebars.js" is replaced by "handlebars.runtime.js" in the ember-cli build process, which seem to be a problem for broccoli at this time.
Other devs had the same problem but with other libraries as well:
https://github.com/stefanpenner/ember-cli/pull/675#issuecomment-47431195
Here the solution was to add:
var index = app.legacyFilesToAppend.indexOf('bower_components/handlebars/handlebars.runtime.js');
if(index) {
app.legacyFilesToAppend[index] = 'bower_components/handlebars/handlebars.js';
}
into your Brocfile.js to replace the "handlebars.runtime.js" with the "handlebars.js".
This also fixed the problem for me.
It sure has the drawback that the whole handlebars file is deployed but its a workarround for now, until the problem is fixed.
Solution is mentioned on Ember CLI website:
This is somewhat non-standard and discouraged, but suppose that due to a requirement in your application that you need to use the full version of Handlebars even in the production environment.
Basically, you can pass vendorFiles option to your EmberApp instance which will force CLI to include full version of Handlebars.
Example of explicitly requiring handlebars.js , in Brocfile.js:
var app = new EmberApp({
vendorFiles: {
'handlebars.js': {
production: 'bower_components/handlebars/handlebars.js'
}
}
});
This is recommended way of solving this issue(discussion on GitHub).
I get the error GET localhost:8080/scripts/templates/home/homeTemplate.html 404 (Not Found)
Not sure why this is happening. Based on this tutorial I feel like files are in the right place. http://backbonetutorials.com/organizing-backbone-using-modules/
The github repository is here https://github.com/natecraft1/backbone-widget
I reference the template like this
'text!templates/home/homeTemplate.html'
from app/templates/home...
Modify the scripts/main.js as follows.
require.config({
paths: {
jquery: 'libs/jquery',
underscore: 'libs/underscore',
backbone: 'libs/backbone',
templates: '../templates' // added
}
});
require(['app'], function(App) {
App.initialize();
});
By setting the templates as above,
if the module ID starts with "templates",
requirejs load the module from the templates directory
Without the above templates setting, requirejs load any module IDs from scripts directory, which contains main.js source code. Thus the text!templates/home/homeTemplate.html is interpreted as wrong URL scripts/templates/home/home/homeTemplate.html.
If you do not want to modify the main.js script,
you can specify the correct location of homeTemplate.html by
replacing the 'text!templates/...' with
'text!../../../templates/home/homeTemplate.html' or
'text!/../templates/home/homeTemplate.html'
Here's the fiddle. Here's the gist with the contents of my local file.
As you can see, the HTML and JavaScript are identical, and I'm loading identical versions of the jQuery, Handlebars.js, and Ember.js libraries. It works as expected locally, but does not render the application template on jsFiddle.net.
I see the following error in the Web Console:
[19:44:18.202] Error: assertion failed: You must pass at least an object and event name to Ember.addListener # https://github.com/downloads/emberjs/ember.js/ember-latest.js:51
BTW-To test the gist as a local HTML file, make sure to run it behind a web server or your browser won't download the JavaScript libs. If you have thin installed (ruby webserver), go to the directory it's in and run thin -A file start, then navigate to localhost:3000/jsfiddle-problem.html in your browser.
If you set the "Code Wrap" configuration on your fiddle to one of the options other than "onLoad" your application will work. Here is an example.
The reason for this is Ember initializes an application when the jQuery ready event fires (assuming you have not set Ember.Application.autoinit to false). With the jsFiddle "Code Wrap" configuration set to "onLoad" your application is introduced to the document after the jQuery ready event has fired, and consequently after Ember auto-initializes.
See the snippet below from ember-latest, taken on the day of this writing, which documents Ember auto-initialization being performed in a handler function passed to $().ready.
if (this.autoinit) {
var self = this;
this.$().ready(function() {
if (self.isDestroyed || self.isInitialized) return;
self.initialize();
});
}
This was strange - I couldn't get your fiddle working, specifically your {{controller.foo}} call until I disabled autoinit. I am guessing when using jsfiddle the application initialize kicks off before seeing your router. I also noticed with your fiddle the router was not logging any output even when you had enableLogging set to true.
I updated your fiddle to not use autoinit, http://jsfiddle.net/zS5uu/4/. I know a new version of ember-latest was released today, I wonder if anything about initialization changed.