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
}
});
Related
I am writing an Ember.js Addon, and I need to deprecate a feature. Can I use the same deprecation system that Ember uses?
I want my users to be able to silence the warnings.
Ideally, I also need to be able to test that the deprecation message works under the right conditions, from within my test suite.
I'm using Ember 3.x.
An addon can use the same style of deprecation warnings as Ember uses, through the deprecate method:
import { deprecate } from '#ember/application/deprecations';
deprecate takes three arguments: the string as a message, a boolean test where falsey means the deprecation will be shown, and an options object with more information to be displayed.
For example:
import { deprecate } from '#ember/application/deprecations';
// ...
deprecate(
"message about your addon that mentions the addon by name",
false,
{
id: 'send-component-hash',
until: '2.0.0',
url: 'some url goes here'
}
);
// ...
The message in the console will look something like this:
Testing a deprecation can be done with a library like ember-qunit-assert. Once it is installed, expectDeprecation will be available on assert if you are already using qunit in your tests:
assert.expectDeprecation(/expected deprecation message/);
I am creating an application using Ionic2 with angular2 and Typescript2. the main idea of the application is to detect the user location.
and due to the need to make sure that this data is correct we need to make sure that users don't fake their locations.
after a lot of search I found the following answer Detect or avoid mock GPS location but this answer can't help me a lot because this plugin uses javascript not typescript and i am facing a problem in using it
So, Is it possible to check or preventing a user from faking their GPS location?
Typescript IS JavaScript.
You have three options to operate the plugin and let typescript compile
Declare it as a known javascript var
declare var plugins;
plugins.fakeLocation.check(function(IsEnabledMockLocations){
console.log(IsEnabledMockLocations);
});
Writing a custom typing for it
declare namespace plugins {
export namespace fakeLocation {
export function check(callback: Function): void;
}
}
Use any casting
(<any>window).plugins.fakeLocation.check(function(IsEnabledMockLocations){
console.log(IsEnabledMockLocations);
});
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 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'm having the hardest time getting typescript and ember to work together. I got all the definition files in definitely typed and I went through the ToDo walk throughs on Ember guide on the site. I'm trying to convert the js to typescript and see what the best way to go about setting up the project was, but I guess I'm not understanding the typescript definition very well.
If I do:
/// <reference path="typings/ember.d.ts" />
var App = Ember.Application.create();
App is a type of '{}' and I can't access 'Routers' to do the next line of the guide
App.Router.map( ... )
The best thing I found online was this which doesn't work with the current typing.
I've seen the typescript ember-app-kit but it doesn't really help since it barely includes any typescript and their setup is barely like the ember guides. I just need to be pointed in the right direction. Thanks guys.
I'm not familiar with Ember, but from inspecting ember.d.ts, I can see that create() is defined as a static generic function on object:
static create<T extends {}>(arguments?: {}): T;
So then you should be able to get better type information by passing an actual type:
var App = Ember.Application.create<Ember.Application>();
However, I see also that the ember typedef doesn't include a "Router" member in the application class, and even if it did, the Router class does not define map(). I was able to get it to work by creating an extended type definition:
// ./EmberExt.d.ts
/// <reference path="typedef/ember/ember.d.ts" />
declare class RouterExt extends Ember.Router {
map: ItemIndexEnumerableCallbackTarget;
}
declare class ApplicationExt extends Ember.Application {
Router: RouterExt;
}
And then referencing that from my combined router/application file:
/// <reference path="typedef/ember/ember.d.ts" />
/// <reference path="./EmberExt.d.ts" />
var App = Ember.Application.create<ApplicationExt>();
App.Router.map(function () {
this.resource('todos', { path: '/' });
});
After doing this, it compiles and loads without error, though it doesn't actually do anything (which I believe is ok for this phase of the walkthrough)
Full and mostly-accurate type definitions for Ember.js are now available to install from npm at #types/ember, #types/ember-data, and so on, currently all via the Definitely Typed project.
Ember CLI integration is available through the ember-cli-typescript addon. The easieset way to configure a Ember.js project with TypeScript is to run ember install ember-cli-typescript in the root of your Ember.js project. Doing so will automatically generate a tsconfig.json which handles Ember’s conventional project layout correctly (for apps, addons, and in-repo addons). It will also install the type definitions for all the core Ember projects automatically.