Custom asset compilation in ember.js - ember.js

My project structure is:
myProject
|
- ember app
|
- my addon
I am developing a product where I have to integrate with 3 or more products. Each integration requires only specific functionalities.I have all my features as components in my addon. Now I have installed my addon in my ember app. So there is an entry in package.json. So the whole addon will be available in the vendor.js file. For example, if my 1st product integration requires only 3 components from my addon , I am expected to give only those 3 components dependencies. But since I have entry in package.json,I am giving the whole addon. I want to take the entry of my addon from my app package.json, and write only the 3 components in to one file viz..., product1.js etc...For the next integration I will pick only the components required for that integration and write it as produc2.js. In this way I can remove the unnecessary things in the script.And respective integration will include it as a script from their end. So is there any way to satisfy my requirement?

Yes, there is, but you'll have to work a bit to make it happen. You'll need to pass flags from the consuming app to your addon using the ember-cli-build.js file. And then in your addon's index.js file you'll need to watch for those flags and use Broccoli to filter down to the appropriate files that you want included in the vendor file.
It's not overly complicated to do, but the Broccoli documentation is relatively sparse at the moment. Would suggest watching videos on this from various conferences and consulting other addons that do it similarly.

Related

A guideline to building angular apps based on npm and typescript

with the release of angular2 I actually encountered typescript, npm, ... for the first time, and I really appreciate its power, so I barely grasp the surface.
In the "development mode" I can find my way, but in the end:
Question:
I want to generate an independent folder that includes all necessary dependencies: js, css, html-files and is portable without needing npm, transpilers,... anymore. (So basically I want to copy this generated folder to a server and people can access the index.html as usually)
Problem
Setup
npm (as a module manager and build tool) npm as a build tool, npm as a build tool II
typescript (tsc as transpiler)
angular2 (with separated files for html, css), SystemJS
Needed Guideline
An (abstract) guideline for what steps to take in order to achieve the prescribed goal, namely a folder that has (all) the features and is build from the typescript files, (probably .scss-files,...) in a separate and self-contained way.
Probably I am searching for the wrong keywords but I have only found some fractions of my answers so far and I would really appreciate a list (of tutorials, or so) that I can stepwise go through. (Currently I feel lost)
I would have a look at the systemjs builder, using a build process such as gulp, gulp-inject to configure the index.html, and consitute the build like this:
build typescript files
bundle js files using systemjs in the build folder
build scss files (there must be a plugin for gulp) in the build folder
copy all html files in the build folder
inject dependencies in index.html
This is a raw answer to your question, untested, and from the top of my head, but I hope it can lead you to a solution. I have a little something in this repository.

Ember-cli creating more than 30000 files

I'm new to ember and after following a few guides, I've been playing around with ember apps. I'm using ember-cli to create an app, so I use
$ ember new 'app-name'
which creates the app as expected with the 'app' and 'dist' folder. But it also creates a lot of other files. I only discovered this while deleting the folder when the windows delete dialog box showed deleting more than 30000 files.
Is it that I'm doing something wrong that's causing unnecessary files to be created? Is there a way to avoid this?
You aren't doing anything wrong, a big portion of it is the dependencies and then the build process keeps a lot of temporary files around for reuse.
By the way, if you are developing in Windows, make sure you are running your command prompt as administrator, and that you've excluded the ember app from the virus scan, it really improves the build times.
It's not an issue with ember-cli itself, but how npm handles dependencies, since it has a hierarchical dependency system. You could try npm 3 (be warned, it's still beta - changelog), which tries to flatten out the dependencies better.
Another thing is checking if bower packages are adding any unneeded dependencies, like tests or raw source files (if they have pre built files). You could submit a PR to those projects by adding the ignore property in the bower.json file. See the spec here. Same with npm packages, which has a .npmignore file.
This is probably not what you wanted to hear, but in open source, we must all help each other. These are the bread crumbs of open source, and a great place to get started.

upgrade ember addon on ember-cli 0.2.2

I started developing an addon in on ember-cli 0.2.1 and when I generated my files using the generator, they placed the files in ~/app/ and not ~/addon.
What do I need to do put the files in the right place?
The project contains services, mixins and utils with tests covering them.
I think it is the default behavior for a good reason: the generators are meant to be used in context of an application. You should consider your addon/ folder being sort of a lib directory, where you can use any file/folder structure that fits the best to your addon. The app/ folder, however, is meant to contain the re-exported modules, so they'll become available on the host app's container automatically.
Browse around a few well-written addons to find out how most people do this, a good example is the ember-radio-button
Here are all the modules
Then the only necessary modules are re-exported.
Notice that an abstact class like radio-button-base is useless by itself, and, therefore, unnecessary to reside on the container, but an addon user would want to import and extend it for his own purposes, which he can do by writing import RadioButtonBase from 'ember-radio-button/components/radio-button-base';

How to build a Dojo layer against an existing layer file?

I'm using Dojo 1.9, and am happily building layer files using the Dojo builder. What I'd like to be able to do is build my layer files containing my modules which refer to third party modules, but where I only have pre-built layer files containing those modules rather than the individual third party module files.
(There are two reasons for wanting this: sometimes I don't have the individual module files, just the layer files, and sometimes even if I do have the individual module files, I have no intention of bundling them into my layer, and so don't want to increase the build time by having the builder scan all of those module files.)
If I have the raw module-by-module source for those third party modules, I can make it all work fine, but can it be made to work if I only have the pre-built Dojo layer?
I've tried specifying 'exclude' options in my layer specification, but that seems to affect which modules are generated into my layer rather than which modules it tries to locate as individual module files.
Is there a way to do this?
A bit late, though hoping this may be of any help to someone. Facing the same absence of relevant answer, I eventually gave up trying to get it done with the builder, especially given that my 3rd party wouldn't build even by itself. Instead, I set up grunt-contrib-concat to output AMD layers, and built a project with it, while caring to explicitely reference the library layers within dojoConfig.
https://github.com/mdolidon/grunt-amd-concat

Automatically run build on file change

Is there a way to automatically trigger a rebuild after changing a file in my project?
I'd like to do something similar to SASS, which watches a directory of scss files and compiles new css files instantaneously.
There is a variety of good build systems which have different dependencies and requirements.
Some samples from "old school" builders are: Ant, Make
If you building web app, or just in case using nodejs you may try javascript based builders, just small list of names: Bower, Grunt, GearJS, Shifter (YUI3).
So just measure your needs/abilities and based on that measurements choose whatever is better suite.