How to access global object in ember-cli app - ember-cli

In a regular emberjs app you can do
App.__container__.lookup("controller:application")
How can I achieve this is the latest version of ember-cli? I can't see any global application object to refer to.

Say you generated your app like this:
ember new kittens
Your debug statement would be:
Kittens.__container__.lookup("component:bootstrap-datepicker")

In Ember CLI when you define an initializer you can do something like:
ember generate initializer my-cool-init
And in the file: app/initializers/my-cool-init.js have something like:
export default {
name: 'my-cool-init',
initialize: function initialize(container/*, application*/) {
var foobar = container.lookup('controller:application');
// inject or preload stuff etc
}
};
http://emberjs.com/api/classes/Ember.Application.html#toc_initializers
http://emberjs.com/guides/understanding-ember/dependency-injection-and-service-lookup/

2 options
Ember Inspector Chrome extension
Use ember-export-application-global addon to expose your app as a global variable
Ember Inspector Chrome extension
Check out the Ember Inspector on the Chrome web store. It is a Chrome extension that provides debugging and inspection tools for your Ember app.
You can visually access the container, your current view hierarchy, a list of your Ember-Data store's contents, etc.
For example, if you open the inspector on discuss.emberjs.com you can see that there are 11 controllers and you can inspect each one to see their attributes. You can even send the objects to the console so you can play with them programmatically.
Use ember-export-application-global
The other way is to use the ember-export-application-global ember-cli addon package. This package sets a global variable that contains the reference to your application. This allows you to access the container the way you originally mentioned.

Related

Flutter Web Get Chrome Extension info from Polkadot.js web3Enable

I am hoping to confer on a strategy for a flutter web app (as can ignore mobile cases here) to get chrome extension info for a Polkadot.js wallet from the Polkadot browser extension.
My first thought is to use dart's JS library and use the Polkadot extension JS package and then try and pull the info from there. However, I'm not sure how to properly use this in flutter as it is a whole package full of dependencies, not just a single JS file. Also it is in TS not JS. Any thoughts here?
Eg., I need a JS file to be able to call this; and for flutter to in turn call the JS file:
import {
web3Enable,
} from '#polkadot/extension-dapp';
By writing out a "bridging" layer, you can do it easily.
Firstly, create a normal javascript (or typescript) application (nothing related to Flutter). You should be able to happily use the polkadot lib in your js/ts code without any problem. You may need to learn a bit about how to develop js code normally (e.g. you can depend on polkadot using npm, etc).
One small thing is that, you should "expose" some object publicly in your js/ts code. For example, your code may look like window.myFancyFunction = function() { call_some_polkadot_function(); }. Of course you can do more things like exposing other functions/objects/...
Then, you can bundle this normal js/ts application into a .js file. This is still very normal for js/ts developers and should have nothing special to deal with here, and you still do not need to touch Flutter at this stage.
Next, load this single-filed .js file when you are loading your Flutter Web application. You may simply do this by editing your Flutter Web's html file and add <script src="my_single_filed_js_mentioned_above.js" />. Notice that, when loading this script, it simply sets window.myFancyFunction and does not do anything more. Still very trivial here, should have no problem.
Lastly, in your Flutter Web code, i.e. Dart code, call that window.myFancyFunction function. For example, Flutter Web : How to run javascript using dart js says you can do import 'dart:js' as js; js.context.callMethod('myFancyFunction', ['some arguments']);

How to access window.navigator.serial in flutter web

On some browsers there exists the the property serial on the window.navigator object.
I can see it on chrome but not on safari.
How can I access that object via dart in flutter web?
dart:html doesn't seem to include it. Is there a way to manually extend the window.navigator object to include it?
In the end I didn't access the window.navigator object from dart.
I access the serial and do all of the checks in javascript.
I use Js context to get data back from the Javascript.

Aurelia - How to do composite applications that can be loaded at runtime

What I'm trying to do in Aurelia, is something like Prism is doing in WPF- Composite applications.
So lets say I have a "shell" application that defines the main application layout, then i have modules that I can plugin at run-time. Those modules can be an Aurelia application per se or Aurelia plugin (don't know what to use - need recommendation).
When loaded, the module needs to add it's menu items to the main application menu to expose it's features.
This is a mockup of the application:
Each module can have multiple menu items and can be pretty complex.
I'm using latest Typescript, Aurelia-CLI to create the application, and I'm using the built-in bundler : Aurelia's new built-in bundler.
So What I don't know is:
Those modules/features - what must they be? (Maybe Aurelia Plugins, or another Aurelia application?)
How to load those modules/features at run-time? (like deploy it in some plugins folder and tell the main shell application to load them)
How to modify the main menu and add new menu items from the loaded module?
Please help
Aurelia supports ultra dynamic applications. Also, there have been other community members who have had similar requirements and was able to resolve it. So I think the scenario is possible.
It seems the sub-application can just be a route.How/where to load the route should be determined based on the application URL
Those modules doesn't need to do anything specific, they can just be a normal, plain JS/TS class with lifecycle methods to handle activation/deactivation. I guess that main shell and all sub-applications need to share a common URL, you cannot have more than one router.
There could be a singleton/central store for new route to register information about loaded features, or it can be loaded upfront by a configuration file/metadata file or a database fetch.
Here is a similar question from another community member that I think can help you see how to glue things to https://discourse.aurelia.io/t/dynamicaly-load-routes/1906

ember-cli#0.2.0 component templates in an addon

I'm wondering what the convention to use is when creating a component inside an addon project... If I generate a component in my addon project using ember-cli#0.2.0, the blueprint will create a js file in addon/components, a template in addon/templates/components, and a js file in app/components. The part I'm not real clear about is where templates should live for these components. If my component template requires a partial, I need to put the partial template in the app/templates directory. If it lives in the addon/templates directory, it can't be resolved. So the question is this: Is it best to put all the templates (the component template and the partials) in the app/templates directory or leave the component template in the addon/templates/components directory and the partial in the app/templates directory? The latter feels slightly disorganized and the former seems more correct only because of the behavior of the blueprint. Anyone have any insight?
Thanks in advance.
Ember-cli is under heavy development so a lot of the file structure is likely to change soon, but here on some insights on the current state of the folder structure and why it is arranged the way it is:
The app/ folder is what gets directly imported into your application. Helpers are pulled from here, which is why you have to have a file for each of your components in this folder. Additionally templates will get pulled from the main application here, and as such they will be accessible in the ways that templates are normally accessible in an ember app (render, partial, and standard resolution).
Some people choose to place all of their components code in app/, but this is a bad idea because the addon/ folder exists not only as a separation of your addons code, but as a way for it to be imported using ES6 imports. So, while you can't directly access the components under addon/components/, you can import them into your application like so:
import SomeComponent from 'some-addon/components/some-component'
This is very useful for addon consumers if they want to extend an addon to add some functionality.
Templates in addon get precompiled in the build tree, which makes addons a bit more robust (for instance if they are using a different version of htmlbars they will still be compatible with the base app). However, they are not accessible via the resolver, so you have to import them manually in your addon's components, which is why the blueprint for addon components looks like the following:
import Ember from 'ember';
import layout from '../templates/components/some-component';
export default Ember.Component.extend({
layout: layout
});
Styles for addons can either be placed in addon/styles/ or app/styles/. In addon/styles/ they are also precompiled and included in the application by default. I highly recommend including styles in app/styles because this makes them accessible using preprocessor imports in the base application:
#import some-addon/main.css
This makes them completely optional to users of the addon, without resorting to app.import and config trickery (which is good because nested addons _do not support app.import. Don't use it.)
NOTE: They are not automatically namespaced, so you should put your styles in a folder to make sure they aren't conflicting with other addons styles.
In summary:
Any addon code that does not need to be directly accessible by the base app via helpers, initializers, etc. Should live in addon/
Anything you want to be accessible by ES6 imports should live in addon/
Templates should live in addon/templates/ and be imported manually
Component stubs, initializers, and other files that should be included in the standard Ember build chain should live in app/
Styles should live in app/styles/ and should be namespaced in a folder (e.g. app/styles/some-addon/)
Don't use app.import.

Embed app built with ember-cli (where to specify rootElement?)

I need to embed an ember app made with ember-cli into an existing website.
Without ember-cli i would do this:
App = Ember.Application.create({
rootElement: '#app-container'
});
I am basically looking to include the generated assets into my page and not use the index.html file at all.. (The app needs to bind to a div not the body element..)
Wow. Cant believe I didn't try this already..
var App = Ember.Application.extend({
modulePrefix: 'kontrollpanel', // TODO: loaded via config
Resolver: Resolver,
rootElement: '#myapp'
});
I guess i was confused with the use of Application.extend() instead of the Application.create().
As to why ember-cli uses extend i found an answer here: SO: Why ember cli uses extend instead of create