I'd like to use Cytoscape.js in my Ember project. So I installed the dependency: npm install --save cytoscape. Next I created my Ember component. When I write the component js file, I cannot find out, how to import Cytoscape. I tried import cytoscape from "cytoscape", var cytoscape = require("cytoscape") however none of these works.
So how to properly "include" cytoscape to my component?
Problem solved. Cytoscape needs to be installed via bower and mentioned in ember-cli-build.js file like this: app.import(app.bowerDirectory + '/cytoscape/dist/cytoscape.min.js');. Also information about cytoscape needs to be added to .jshintrc file:
"predef": [
"document",
"cytoscape",
"window",
"-Promise"
],
Related
I'm trying to import in an ember project that uses ember-cli-sass a scss file from a node_package which imports another scss file from another node package using ~;
basically the file I'm importing contains the following instruction:
#import "~bootstrap/scss/functions"; // from bootstrap node_module
but that breaks the build since it seems that ember-cli is not resolving the ~;
I've configured ember-cli-build with
sassOptions: {
includePaths: [
'node_modules/<package_name>/scss',
]
},
I am attempting to incorporate createJS into a typescript project (a powerbi visual) that I am building.
I have done the following:
1) Installed createJS and typings file using:
npm install createjs --save and npm install --save #types/createjs
2) Added this line to the the externalJS array in pbiviz.json : "node_modules/createjs/builds/1.0.0/createjs.min.js"
3) Added the path to the typings file to the files array in my tsconfig.ts file:
"node_modules/#types/createjs/index.d.ts".
Something didn't go right, I'm seeing the following error in my console:
This was without actually calling the namespace in my code, if I attempt to use the namespace then it simply breaks my code without any warnings. My IDE's auto-suggest offers createjsimplying to me that it was imported properly but still something isn't right.
I think its related to this thread but I don't understand how to implement the solution it typescript. Can anyone help?
My project structure:
It appears that the issue is an internal issue. I found a solution that I will not pretend to fully understand.
Starting from scratch, instead of installing the createjs package with the --save option I ran
npm install createjs-module --save and
npm install --save #types/createjs
which is apparently a webpack.
After this I "node_modules/createjs-module/createjs.js" in to my externalJS array, as well as the appropriate typings file to my tsconfig.json.
Credit to tsveti_iko
see also:
this
There are 2 methods to import createjs(not createjs specific)
This is what I use in my ts classes. For this you have to set compiler options module to system in tsconfig.json. This is what I use. I seems it's not the recommended one. It like an import statement(or maybe more like an include script)
tsconfig.json:
{
"compilerOptions": {
"module": "system",
.ts files using createjs:
/// <reference path="../lib/createjs.d.ts"/>
The other method is to use import statements along with commonjs. This is the recommended one. I was not able to make it work but didn't try too much because the first method is working.
https://www.typescriptlang.org/docs/handbook/compiler-options.html
I have the following structure:
app/
pods/
components/
user-login/
component.js
style.scss
template.hbs
Template files and component files livereload correctly, however, when I save changes to my style files in Atom the changes are not applied on the webpage- they are only applied when I kill and rerun:
ember server
and reload the webpage. I have installed the following:
ember-cli-styles-reloader
and I have tried adding:
"liveReload": true,
"watcher": "polling"
to:
.ember-cli
and I also tried adding these options to:
ember-cli-build.js
inside the app variable.
What am I missing?
There is a better option I believe, and I recommend to do this way:
First install ember-cli-sass-pods addon that uses ember-cli-sass (will install automatically) and then generate your style scss files into your pods directories.
to install
ember install ember-cli-sass-pods
then add
var app = new EmberApp(defaults, {
// you must add Watched folder to your Ember-Cli-Build.js
sassOptions: {
includePaths: ['app']
}
});
For example:
app/components/user-login
app/components/user-login/component.js
app/components/user-login/template.hbs
app/components/user-login/style.scss
just simply run this command:
ember g style [path] -p //your path now is components/user-login
there are more options that you can read their documents
You are ,after installing and setting up that, able to use ember-cli-styles-reloader which probably will work smoothly. make sure you have followed all the rules that they mentioned in their documents to set up ember-cli-styles-reloader.
Does anyone have a working example of a (simple) ember-app project built using Ember-CLI that uses LoDash? (e.g.: I want to use lodash, _.someLodashFunc, in my Routes and Controllers).
I haven't seen any thread / article on the web that gives clear, step-by-step explanation on how to do that.
If possible with lodash v3.0.0 (and I'm using the latest ember-cli, v0.1.9).
Thanks,
Raka
I found out how, you need to generate a custom build of lodash (the "lodash modern"). Use lodash-cli: https://lodash.com/custom-builds
On the command console type: lodash modern ..., and you'll get a javascript file generated: lodash.custom.js
Put that file under "vendor" dir of your ember-cli project.
Modify the Brocfile, add this:
app.import('vendor/lodash.custom.js', {
'lodash': [
'default'
]
});
And that's it.... you don't have to do "import _ from 'lodash'" in any of your js files. In fact, don't do that (you'll get an error). The _ var is readily available.
For example, I have a Route object like this:
import Ember from 'ember';
export default Ember.Route.extend({
model: function() {
console.log('hohoho: ' + _.chunk(['a', 'b', 'c', 'd'], 2));
return Ember.Object.create({name: 'Raka'});
}
});
And I could see hohoho:,b,c,d got printed in javascript console when I visited that route.
CORRECTION
You don't really need that lodash-cli.
I've tried this way (I guess more proper):
bower install lodash --save
In Brocfile.js, have this line: app.import('bower_components/lodash/lodash.js');
That's it. _ is automatically available in your Routers / Controllers.
I did the same with d3:
bower install d3 --save
In Brocfile.js, have this line: app.import('bower_components/d3/d3.js');
And variable named 'd3' is automatically available.
Added related link:
Import custom library in ember-cli
http://tiku.io/questions/2866484/how-to-include-a-local-javascript-im-ember-cli-application (quote: If you don't need them to minified in your vendor.js file you can put them in the public/js and then include it as a normal script file in app/index.html. I use this method for some libraries like moment.js. The public folder gets directly copied to your site root during the build.)
Proper way to access third party libs such as D3 in Ember CLI?
You can use something ready:
https://github.com/levanto-financial/ember-lodash
or do it manually.
I don't have any example but it should be as easy as modifying these 3 files:
bower.json
Just add the line
"lodash": "4.16.4",
to your dependencies and run bower install in your command line.
Alternatively, you can install it via bower:
$ bower install lodash --save
Brocfile.js
In order to be included to sources by Broccoli:
app.import('bower_components/lodash/lodash.js');
add this somewhere after var app = new EmberApp();
.jshint.rc
Add the line:
"_": true,
somewhere in the predef section (if you don't want to see the warnings like _ is undefined).
I haven't tested that but I hope it helps :)
You can install the latest stable version using Bower. In your project's root directory, run:
bower install lodash --save
Then import it using Brocolli by adding this line in your Brocfile.json somewhere after var app = new EmberApp( ...:
app.import('bower_components/lodash/lodash.js');
ember-lodash addon would be best pet.(https://www.npmjs.com/package/ember-lodash)
install addon : ember install ember-lodash
To include string functions alone
import _string from 'lodash/string';
let truncatedString = _string.trunc(rawString);
To include entire lodash library,
import _ from 'lodash/lodash';
let truncatedString = _.trunc(rawString);
I use karma with qunit for test an emberjs application. The karma.conf.js file have this piece of code for link my project libraries
files: [
"app/bower_components/jquery/jquery.js",
"app/bower_components/mockjax/jquery.mockjax.js",
"app/bower_components/handlebars/handlebars.js",
"app/bower_components/ember/ember.js",
"app/bower_components/ember-data/ember-data.js",
"app/bower_components/bootstrap-sass-official/vendor/assets/javascripts/bootstrap.js",
"app/scripts/app.js",
"tests/test.js"
],
and my app.js is this:
var MyApp = window.MyApp = Ember.Application.create();
require('scripts/controllers/*');
require('scripts/store');
require('scripts/models/*');
require('scripts/routes/*');
require('scripts/components/*');
require('scripts/views/*');
require('scripts/router');
but when i start karma with the config file, it report this error
Firefox 30.0.0 (Ubuntu) ERROR
ReferenceError: require is not defined at ~/myApp/app/scripts/app.js:4
I've tried to change the order of the libraries in the karma.conf file but doesn't work.
Try installing requirejs and including it in the files section of karma.conf.js.
npm install requirejs
Running this command will create a node_modules folder, if one doesn't already exist. RequireJS will be probably be in:
node_modules/requirejs/require.js
So, you can try editing your files section like this:
files: [
"node_modules/requirejs/require.js",
...
]