I'm using ember-cli v0.0.40 in a small project which I mainly use to learn how ember-cli works and differs from ember-app-kit - especially on my windows dev machine.
Now, I came to the conclusion that I would need to tweak the Brocfile.js to fit my needs an include a CSS auto-prefixer (broccoli-autoprefixer), but I can't wrap my head around where I get the right tree to pass to the auto-prefixer and where I would inject the then returned tree again?
Just for the records, the current Brocfile.js looks like this:
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var app = new EmberApp();
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
module.exports = app.toTree();
Where the heck would I get a grip on any broccoli tree or task? I don't get it why this is abstracted away somewhere within ember-cli/lib/broccoli/ember-app?
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.
I am new to ember. But for a particular task i need to change input path of templates to compile. i.e default is app/templates. but i want to change this path.
I have read the ember-cli-build.js file but i can edit only output path. how can i edit the input path.
My ember-cli-build.js
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
outputPaths: {
app: {
html: 'ember_build_index.html'
}
}
});
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
app.import('bower_components/bootstrap/dist/js/bootstrap.min.js');
app.import('bower_components/bootstrap/dist/css/bootstrap.min.css');
app.import('bower_components/bootstrap/dist/css/bootstrap.css.map');
return app.toTree();
};
You have to change templates directory path for the ember app being built.
To check your current templates directory path, check app.trees.templates._directoryPath in your ember-cli-build.js by log it to console using console.log(app.trees.templates._directoryPath) .
Now, if you want your ember build to have templates from 'app/templates/mobile' (in your case), just change:
app.trees.templates._directoryPath = 'app/templates/mobile' in ember-cli-build.js before it returns app.toTree();
The node_module which constructs tree for templates is at 'node_modules/ember-cli/lib/broccoli/ember-app.js' at line no. 724 where it accesses 'this.trees.templates' in which this is the instance of your app.
so I was working with an iterator inside a service with Ember. The code worked using the old style scripts I cannot use the ES2015 style
ReferenceError: regeneratorRuntime is not defined
stuff[Symbol.iterator] = function *(){
debugger;
let properties = Object.keys(this);
for(let p of properties){
yield this[p];
}
};
I know this is because of the new '*' operator on the function. I have seen answers https://stackoverflow.com/a/28978619/24862 that describe having to load a browser-polyfill npm but I'm a little unclear how to get this to work inside the ember framework. Has anyone done this successfully? or should I just abandon until Ember supports it.
Polyfill
Babel comes with a polyfill that includes a custom regenerator runtime and core-js. Many transformations will work without it, but for full support you may need to include the polyfill in your app.
You should now include as ember-cli-babel and not as babel. Like this:
var app = new EmberApp(defaults, {
'ember-cli-babel': {
includePolyfill: true
}
}
Regenerator:
This package implements a fully-functional source transformation that takes the syntax for generators/yield from ECMAScript 2015 or ES2015 and Asynchronous Iteration proposal and spits out efficient JS-of-today (ES5) that behaves the same way.
Sources: https://github.com/babel/ember-cli-babel and https://github.com/facebook/regenerator
Perhaps your use of Babel.js needs to include the polyfill, in your ember-cli-build.js file use:
var app = new EmberApp(defaults, {
// Add options here
babel: {
includePolyfill: true
}
});
In Ember 2+, does anyone know how to get a reference to the Ember Store in order to troubleshoot Model mapping in the javascript console?
It was possible through App.__container__.lookup in Ember 1, but this doesn't exist anymore, and it's bloody hard to find documentation on this.
Thanks
If you look in your package.json, you should see a ember-export-application-global package that's installed by default (if not, install it). This will export your application not to the global App object, but to a global object that's named after your app. So you might have window.TodoList or window.ShoppingCart instead of window.App. From there you can use this line (similar to Ember 1.x.x):
AppName.__container__.lookup('service:store')
You can also do what I do and create an instance initializer for it:
export default {
name: 'store-on-app',
after: 'ember-data',
initialize(instance) {
const application = instance.container.lookup('application:main');
const store = instance.container.lookup('service:store');
application.set('store', store);
}
}
Then you can just use AppName.store.
If you don't want to install a separate package to access your app in the console, you can do it through window.Ember.Namespace.NAMESPACES. For example, something you can run in the console to find your app instance is:
var app = Ember.A(Ember.Namespace.NAMESPACES).filter(n => {return n.name === 'your-app-name'})[0];
From here, you can access the store on the app's container as explained by #GJK
var store = app.__container__.lookup('service:store');
I used this for debugging an Ember app in production which didn't have its container registered on the window. I found it out by looking through the ember-inspector source code, since it always has access to the container.
https://github.com/emberjs/ember-inspector/blob/2237dc1b4818e31a856f3348f35305b10f42f60a/ember_debug/vendor/startup-wrapper.js#L201
With the excellent broccoli-stew I can take a look at the exported application tree:
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
var log = require('broccoli-stew').log;
var debug = require('broccoli-stew').debug;
var app = new EmberApp();
// Use `app.import` to add additional libraries to the generated
// output files.
//
// If you need to use different assets in different
// environments, specify an object as the first parameter. That
// object's keys should be the environment name and the values
// should be the asset to use in that environment.
//
// If the library that you are including contains AMD or ES6
// modules that you would like to import into your application
// please specify an object with the list of modules as keys
// along with the exports of each module as its value.
app.import('bower_components/ember-i18n/lib/i18n.js');
app.import('bower_components/raphael/raphael.js');
var finalTree = log(app.toTree());
module.exports = finalTree;
With this I get a very clean tree-like output of my application:
[ 'assets/app.js',
'assets/app.map',
'assets/app.scss',
...
'assets/vendor.css',
'assets/vendor.js',
'assets/vendor.map',
'crossdomain.xml',
'index.html',
'robots.txt',
'testem.js',
'tests/index.html' ]
I see that in that tree we have, among other files, a vendor.js and an app.js modules (as expected), but I do not know what packages are put into each of them.
I have the feelling I am missing one in my frontend (in this case, raphael.js), so I would like to verify that ember-cli (via EmberApp) has indeed done what I asked for (namely, include the raphael.js, probably in vendor.js)
Taking a direct look at app.js or vendor.js is not feasible (too big / don't know what to look for). I want a simple tree-like display of the files that have been included by EmberApp into vendor.js / app.js, in the same (similar) format that broccoli-stew is providing.
Is this possible? How?
To quote http://www.ember-cli.com/asset-compilation/#configuring-output-paths:
Assets Output File
JavaScript files you import with app.import() /assets/vendor.js
So although that is not a nice tree view, you should be fine :-)