Ember-cli how to change input path of files - ember.js

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.

Related

Webpack 5 runtime and dependOn property

I'm mostly confused as to what the runtime property is actually doing for a webpack entry point. Referenced here:
And even more confused when the documentation makes this statement:
What exactly is the runtime chunk for an entry point and how does it relate to that limitation.
Ty!
Link to full page here
By default, each entry point will have an embedded runtime. The runtime can be think of as an mechanism to record the module import/export record, so you won't have duplications of module initialization. By specifying runtime you're telling webpack to create-or-reuse a runtime. On the other hand, with dependOn you can reuse a runtime by specifying an existing entry name. Since these two ideas overlap, so you probably won't want to do it at the same time.
You have to understand first what runtime and dependOn actually are.
runtime
Take this as an example:
src/myModule.js
export const textToPrint = 'Hello world!';
src/index.js
import { textToPrint } from "./myModule";
console.log(textToPrint);
webpack.config.js
module.exports = {
entry: {
myEntry: {
// runtime: 'myRuntime',
import: './src/index.js',
}
}
};
dist/index.html
<!DOCTYPE html>
<html>
<head>
<!-- Don't forget to uncommet this line when using the
`runtime` property in the webpack configuration -->
<!-- <script src="./myRuntime.js"></script> -->
<script src="./myEntry.js"></script>
</head>
<body></body>
</html>
Running npx webpack --mode='development' will generate a dist/myEntry.js file wich will, among other things, create and use a __webpack_require__() function:
// ...
/******/ function __webpack_require__(moduleId) {
/******/ // Check if module is in cache
/******/ var cachedModule = __webpack_module_cache__[moduleId];
/******/ if (cachedModule !== undefined) {
/******/ return cachedModule.exports;
/******/ }
/******/ // Create a new module (and put it into the cache)
/******/ var module = __webpack_module_cache__[moduleId] = {
/******/ // no module.id needed
/******/ // no module.loaded needed
/******/ exports: {}
/******/ };
/******/
/******/ // Execute the module function
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
/******/
/******/ // Return the exports of the module
/******/ return module.exports;
/******/ }
// ...
Now, if you uncomment the runtime: 'myRuntime' line in webpack.config.js and rerun the webpack command, you will see now that the __webpack_require__ function is not generated anywhere in dist/myEntry.js. You might see __webpack_require__ here and there in that file, but they are only references to the parameters of the function, not the function itself.
In dist/myRuntime.js, however...
As you can see, it's there. With this we can conclude that the runtime is the part of the bundle with the functions that are used in other parts to load the modules. Whether those functions are or not in the same file depends on whether you use this option or not. The advantage is that you can have smaller chunks with this code stripped away in a separate file instead of having this code duplicated in all entry points. The disadvantage however is that because this runtime file is meant to be used in other files, Webpack cannot predict what functionalities are not used, so Webpack keeps them (This is just a theory, I am not 100% sure this is the actual reason why the runtime has more things when in a separate file).
Don't forget to discomment the <script src="./myRuntime.js"></script> line in dist/index.html. Because this script contains the functionality to load modules, it obviously has to be loaded before other scripts.
dependOn
Let's suppose we have now these files in our project:
src/index.js
globalThis.messageToPrint = 'Hello world!';
src/foo.js
console.log(globalThis.messageToPrint);
In this case, because foo.js is using a global variable whose value is set by index.js, it obviously depends on index.js so we tell Webpack about this to have the bundles configured properly:
webpack.config.js
module.exports = {
entry: {
myEntry: {
import: './src/index.js',
},
mySecondEntry: {
import: './src/foo.js',
dependOn: 'myEntry'
}
}
};
We also have to remember to load the scripts in order in our html file, like so:
_index.html
<!DOCTYPE html>
<html>
<head>
<script src="./myEntry.js"></script>
<script src="./mySecondEntry.js"></script>
</head>
<body></body>
</html>
Remember what I told you about runtimes? Because we didn't use the runtime property this time, in theory both myEntry.js and mySecondEntry.js should have the runtime code in them. But because the runtime is loaded already in myEntry, it doesn't make sense to also load it in mySecondEntry, so it is automatically stripped from that file.
Why can't we specify both runtime and dependOn in the same entry in the webpack configuration file then?
Because both runtime and dependOn would strip the runtime from the entry file. One because the runtime would be in a separate file so that other entires can reuse it, and the other because the runtime is already loaded by the dependency. Having both wouldn't make sense because the dependency would in some way or another have this runtime loaded anyways. In the same file or in the runtime file, the dependency would load it. If you want both to specify a dependency and have the runtime in a separate file, then using this example you would have to specify the runtime property in myEntry and dependOn in mySecondEntry.

Ember >2.2.0 getting regeneratorRuntime is not defined

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
}
});

Peeking behind ember-cli (EmberApp): vendor.js and app.js

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 :-)

Ember-CLI: How to get EmberApp trees for further processing?

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?

Using backbone.js' text.js plugin cannot access template

I get the error GET localhost:8080/scripts/templates/home/homeTemplate.html 404 (Not Found)
Not sure why this is happening. Based on this tutorial I feel like files are in the right place. http://backbonetutorials.com/organizing-backbone-using-modules/
The github repository is here https://github.com/natecraft1/backbone-widget
I reference the template like this
'text!templates/home/homeTemplate.html'
from app/templates/home...
Modify the scripts/main.js as follows.
require.config({
paths: {
jquery: 'libs/jquery',
underscore: 'libs/underscore',
backbone: 'libs/backbone',
templates: '../templates' // added
}
});
require(['app'], function(App) {
App.initialize();
});
By setting the templates as above,
if the module ID starts with "templates",
requirejs load the module from the templates directory
Without the above templates setting, requirejs load any module IDs from scripts directory, which contains main.js source code. Thus the text!templates/home/homeTemplate.html is interpreted as wrong URL scripts/templates/home/home/homeTemplate.html.
If you do not want to modify the main.js script,
you can specify the correct location of homeTemplate.html by
replacing the 'text!templates/...' with
'text!../../../templates/home/homeTemplate.html' or
'text!/../templates/home/homeTemplate.html'