Standard project set up with ember cli seems to be using ES6 modules when I generate controllers/routes/models etc. with the cli. Sometimes though I want to import/export an additional function/module ie. I may want to write a function that I use in the controller in a separate file.
When I try to import the function in the standard ES6 way ember-cli seems to have a problem with handling it.
Let's say I've created controller with:
ember g route tesit
then I create a function in app/routes/testit/logger.js
const logger = function(msg) {
console.log(msg);
};
export default logger;
and import it in my controller app/routes/testit.js:
import Ember from 'ember';
import logger from './testit/logger.js'
export default Ember.Route.extend({
beforeModel() {
logger('it works');
}
});
then I get the following error:
Error: Could not find module myproject/routes/testit/logger.js imported from myproject/routes/testit
How can I resolve it?
Remove .js extension from import logger from './testit/logger.js'; line.
See Description section from MDN.
Related
I am trying to use js-beautify in my ember application. The module is imported in app.import('bower_components/js-beautify/js/lib/beautify.js'); in ember-cli-build.js but i dont know how to use the beautify.js. how can i import the package in my controller? I tried something like this: import Ember from 'ember'; but with my bower_components/js-beautify/js/lib/beautify.js route but it refused to work.
In all the external modules I worked with in Ember, once they're added to the ember-cli-build.js you have the objects they export in the global namespace.
For example, I use js-cookie in my project like this after adding an appropiate app.import in ember-cli-build.js:
/* globals Cookie */ // This comment makes jshint happy
import Ember from 'ember';
export default Ember.Service.extend({
saveCookie (name, value) {
// The Cookie object is available in the global namespace
Cookie.set(name, value);
}
});
Hope this helps you.
You did correct. but to access js_beautify() use
window.js_beautify()
What is the correct way of placing your helper files and also where should they go with respect to the resolver finding them from an addon ember-cli project?
I am running ember-cli 0.2.2.
I generated an helper from an addon project with:
ember g helper display-helper
The generator placed the file in app/helpers which seemed wrong to me, I would have thought that it should have been placed in addon helpers. I moved the file to addon/helpers and it looks like this:
export default Ember.Handlebars.registerBoundHelper('displayHelper', function displayHelper(searchPath) {
return new Ember.Handlebars.SafeString(get(this, searchPath));
});
When I ran ember test I get the following output:
✘ Error: Assertion Failed: A helper named 'displayHelper' could not be
found
The only way I get this helper to be found by the resolver is to add an import that references the helper in a component that is using it like this:
import displayHelper from '../helpers/display-helper';
This does not seem correct, I would have thought the resolver would have found this automatically?
Also even if I have the reference, the following code ends up with the same error message as above:
import Ember from 'ember';
var get = Ember.get;
function displayHelper(context, searchPath) {
return new Ember.Handlebars.SafeString(get(context, searchPath));
}
export default Ember.Handlebars.makeBoundHelper(displayHelper);
So to sum up, I have to have this line in the component whose template uses the helper:
import displayHelper from '../helpers/display-helper';
And I have to use registerBoundHelper and not makeBoundHelper like the docs say or the helper cannot be found.
If you move your helper from app/helpers to addon/helpers, it is not available in your app namespace. To fix this, add the following file:
// app/helpers/display-helper.js
import displayHelper from 'your-addon-name/helpers/display-helper";
export default displayHelper;
(Do not copy your-addon-name literally, use the name of your addon, which is also your addon's namespace.)
This is based on the instructions here:
http://www.ember-cli.com/#addon-components
Just like the example component there, you can put your real helper code in addons/helpers/display-helper, but you need to import and reexport it to your app for your resolver to find it.
I try to make an addon using ember-cli. Here it is step by step what I have done so far:
sudo ember addon test-addon
cd test-addon
sudo ember serve
now the server runs and on localhost:4200 I can see the test/dummy app's application hbs.
Welcome to Ember.js
Its time to make some components for the addon:
sudo ember g component my-form
In the tests/dummy/app/templates/application.hbs I added
{{my-form}}
And now I'm getting the following js error:
Uncaught Error: Could not find module test-addon/components/my-form imported from dummy/components/my-form
edit
After struggling a little bit with npm, I tried it again (without sudo) and the same thing happened. I'm on Ember CLI 0.2.1. Here are my files, but they should be the same since they are auto-generated. The error is thrown from bower-components/loader.js/loader.js line 110.
addon/components/my-form.js
import Ember from 'ember';
import layout from '../templates/components/my-form';
export default Ember.Component.extend({
layout: layout
});
addon/templates/components/my-form.hbs
{{yield}}
app/components/my-form.js
import myForm from 'test-addon/components/my-form';
export default myForm;
It looks like (as of July 2015, anyway) that the fact templates don't work in addons is partially by design. Philosophically, I guess the justification is that the styling should be app-specific, but the JS logic can be shared. Or it's just a bug/oversight.
It turns out that if you simply remove that layout line and the import layout, it will work.
So the result looks like:
<app-name>/app/templates/includes-a-shared-component.hbs:
What follows is my shared component! {{my-shared-component}}
<addon-name>/addon/components/my-shared-component.js:
import Ember from 'ember';
export default Ember.Component.extend({
valueFromProperty:function() { // simple hello-world-style function
return 5;
}.property()
});
<app-name>/app/templates/components/my-shared-component.hbs:
Hey look I'm the app-specific style for your component <marquee>Hello world</marquee>
Here's a value from a property: {{valueFromProperty}}
My versions:
Ember: 1.13.1
node: 0.12.0
npm: 2.12.1
And here's a very different (and IMO better, but not perfect) answer than my earlier one.
<addon-name>addon/components/test-component.js:
import Ember from 'ember';
export default Ember.Component.extend({
valueFromProperty:function() {
return 5;
}.property(),
layout:Ember.HTMLBars.compile("I'm the addon's layout {{valueFromProperty}}")
});
You will need to add the template compiler to your app:
<app-name>/app/ember-cli-build.js:
/* global require, module */
var EmberApp = require('ember-cli/lib/broccoli/ember-app');
module.exports = function(defaults) {
var app = new EmberApp(defaults, {
// Add options here
});
app.import('bower_components/ember/ember-template-compiler.js');
... other stuff...
Note that the layout property in the addon's component completely overrides your in-app template, so per-app customizing becomes more difficult. But if you want your template customizable, you could probably use my other answer where you don't specify layout at all and just let the resolver find the template in your app.
One more approach I've found that works and is different than my other answers.
Let's say you've done ember g component my-addon-component in your addon.
This will result in you having a component at: <addon-name>/addon/components/my-addon-component.js and a template at <addon-name>/addon/templates/my-addon-component.hbs (at least with my current ember-cli).
You'll also have a tiny component stub at <addon-name>/app/components/my-addon-component.js
The fix:
1. Move the component guts from <addon-name>/addon/components to <addon-name>/app/components (replacing the stub).
2. Move the template from <addon-name>/addon/templates/components to <addon-name/app/templates/components
After 1: The import layout from ../templates/components/my-addon-component will now have a different meaning: it'll be importing from the including-app's namespace instead of the addon's namespace.
After 2: The template's import location will be in the including-app's namespace. This also seems to mean it gets compiled by the app, so you won't throw the "addon templates were detected, but there are no template compilers registered"
I have a bunch of modules defined in an Ember CLI app and each starts with the same path. I would like to import the modules into a module in the app. For example, I could write:
import post1 from 'posts/1';
import post2 from 'posts/2';
import post3 from 'posts/3';
export default Em.ObjectController.extend({
posts: Em.A(post1, post2, post3),
});
However, I do not know the module names because they are created/named on the fly by a precompiler. All I know is that the path always begins with the same string. In this case, posts.
Is there a way to import all modules that begin with a particular path? For example, how can I do something like the following:
import posts from 'posts/*';
// or
registry['posts'].forEach(postId, i) {
var path = 'posts/' + postId;
import i from path;
}
Each of the modules I want to find and import has exported an object.
I have been through the ES6 module transpiler docs but can't find much.
The ES6 spec doesn't allow you to dynamically import modules using the import keyword. All importing and exporting using the module syntax must be done statically. However, it does provide a programmatic API that you can use to dynamically import modules. This article has a great summary of it (as well as a great summary of the rest of ES6 modules).
My suggestion would be to wrap Ember's loader API in a ES6 compliant wrapper. For instance, Ember-CLI uses the require() function to get modules, so you could do something like this:
window.System = window.System || {};
window.System['import'] = function(moduleName) {
return Ember.RSVP.Promise.resolve(window.require(moduleName));
}
// ...
System.import('my-app/posts/' + postNumber).then(function(postModule) {
// ...
});
You could also use the Ember require() function directly, my way just protects you in the likely event that Ember changes their module loader.
I have web app and Ember app in iframe. I want to import custom library from web app to ember app like global variable. Library look like object with function:
var helpers = {
helper1: function() {},
helper2: function() {}
};
Library working with sockets and will the same for both applications.
I wrote:
app.import("./../../../public/scripts/js-helpers.js"); //file located in web app
I can't access variable helpers in project and ember-cli copy folder public into their working folder. Sorry if question is stupid, I can't understand ember-cli import principles.
I'll propose one solution, which I find to be the easiest. You won't have globally scoped variables, but you use then ES6 module approach.
For example purposes, let's say you have a file under app_name/lib/ called helper.js. lib is a directory you create for holding your custom libraries. You don't have to use that name. Use the export default command as such:
export default {
helper1: function() {},
helper2: function() {}
};
Then, lets say you need this in a route. Here could be one such route:
import helper from 'app_name/lib/helper';
export default Ember.Route.extend({
model: function(){
helper.helper1();
}
helper is the name of what you imported, and represents the object that you exported in your helper.js. This method seems to be the style in which Ember-CLI suggests you should use