I'm using dojo 1.11.2 to build a web application. I noticed a different behaviour between the usage of map star (*) and aliases.
I want to override all focus module with my custom version.
Please see the following examples. [In my application I also use gridx component]
Using star map
map: {
"*": {
'dijit/focus': 'custom/myFocus'
}
}
In this case my modules uses myFocus component. Gridx modules continue to use the dijit focus module.
Using aliases
aliases: [
'dijit/focus': 'custom/myFocus'
]
In this case my modules and gridx modules use myFocus component.
Probably I'm making a mistake in the usage of map star and aliases, but reading the documentation I thought that are equal.
What is the problem?
Related
I have a microservice based application and each service has a set of polymer based web-components. I want to load these at runtime in the application that is served by one of them at runtime, so that I can run, maintain and deploy the services seperately.
I would like to avoid having a npm repo that serves the components for a central build and each new web component version would make it necessary to rebuild and redeploy the application.
Existing lazy loading examples all lazy load components of the same application, so it's built as a whole and just packaged in chunks.
The application is available under /app/ and the modules are under /mod/...
I can do this in to react to a route:
import('/mod/admindashboard/kw-admindashboard.js').then((module) => {
// Put code in here that you want to run every time when
// navigating to view1 after my-view1.js is loaded.
console.log("Loaded admindashboard");
});
and then I can use the corresponding web component, but for this to work I need to hack the component like this:
import { PolymerElement, html } from '/app/node_modules/#polymer/polymer/polymer-element.js';
import '/app/node_modules/#polymer/iron-icon/iron-icon.js';
import '/app/node_modules/#polymer/iron-icons/iron-icons.js';
class KwAdmindashboard extends PolymerElement {
static get template() {
...
But this approach prevents me completely to run tests, create static builds and IDE support is not available either in many areas, as it's not able to see what is available later at runtime. So as absolute fallback this would be possible. Isn't there a way to utilize the serviceWorkers to handle mapping?
Here below is I think a good example of your requirement. Modules will be loaded with page properties. As page property is depended on iron-page, selected='{{page}}' when page value has been changed with iron-page's name properties, its observer loads the that page's modules. :
static get properties() { return {
page: {
type: String,
reflectToAttribute: true,
observer: '_pageChanged'
},
.......
_pageChanged(page, oldPage) {
if (page != null) {
let cb = this._pageLoaded.bind(this, Boolean(oldPage));
// HERE BELOW YOUR PAGE NAMES
switch (page) {
case 'list':
import('./shop-list.js').then(cb);
break;
case 'detail':
import('./shop-detail.js').then(cb);
break;
case 'cart':
import('./shop-cart.js').then(cb);
break;
case 'checkout':
import('./shop-checkout.js').then(cb);
break;
default:
this._pageLoaded(Boolean(oldPage));
}
here above cb is a function which is loading lazy modules but needs to load immediately after the first render. Which is minimum required files.
_pageLoaded(shouldResetLayout) {
this._ensureLazyLoaded();
}
Here the full code's link of the above. Hope this helps In case of any question I will try to reply. https://github.com/Polymer/shop/blob/master/src/shop-app.js
It seems like Polymer 3 is not yet ready for distributed locations of webcomponents.
There are github issues at the W3C which may solve these problems:
https://github.com/w3c/webcomponents/issues/716
Web component registries for really distributed component development without clashes due to namespaced component registration
https://github.com/domenic/import-maps
introduces a mapping from "nopm module names" to locations, which enables runtime binding much easier
For now I will switch my development model, so the microservices provide one or more webcomponents to my npm repo in nexus and the admin app has build time dependencies to them and builds the whole app in one go and there I can use the lazy loading approach that the shop demo also promotes/shows.
For a decent development experience with webcomponents from multiple sources, you should have a look at "npm link".
Feel free to add another solution for the problem or a real solution as soon as the technology and standards caught up.
I dont understand exactly what is the difference between use init() and bootstrap() on a class.
My case:
I want to add dynamical urls from my module by using Yii::$app->urlManager->addRules(...) but NOT loading the module in order to improve the performance.
So, I thought if bootstraping the module from the main configuration file like: 'bootstrap' => ['mymodule'], the Module::bootstrap() function will be executed ONLY and exclusively. But actually always runs Module::init() function, and then Module::bootstrap().
On this documentation http://www.yiiframework.com/doc-2.0/guide-runtime-routing.html#adding-rules say:
'Note that you should also list these modules in yii\web\Application::bootstrap() so that they can participate the bootstrapping process.'
But Module::bootstrap() is not executed if the module is listed on yii\web\Application::bootstrap()
I want to set only the dynamic rules with no module loading. How is it possible? What is the best place to set dynamical URLs with no impact to performance?
i decide resolve this issue(adding dynamic rules for module) by watching working extensions.
for example https://github.com/dmstr/yii2-pages-module extension uses bootstrap interface.
don`t forget write in composer.json "type" attribute as "yii2-extension".
After creating our new system in Vue with babel, I have started testing compatibility towards older devices. Our babel is transpiling the source down to es2015 together with webpack.
I have now tested with browserstack against both Ios & android. Newer OS works on both platforms. However on android phones that use the default browser, I get an error in sentry stating; Duplicate data property in object literal not allowed in strict mode It does not give me any hints on where this might be thus making the debugging process painfully hard.
The only light in the end of the tunnel I can se now is the ios part. Ios devices that run IOS < 9 states an error Attempted to redefine property 'value'. also in sentry
If I am not mistaking, the ios issue is a reworded error of the same issue?
As I read over here, I suppose 'value' might be defined twice in a object or element.
This all wraps up to the question, how does one go with finding duplicate data properties?
Can you share some of your code (just the area from a few components?)
One thing to check is inside of data(), ensure you are returning an object. This happened to me when I started out with Vue.
Example:
// component a
data () {
a: ''
}
// component b
data () {
a: '' // ERROR! Duplicate
}
This happens because the data is merged on the main Vue instance. So in this case it should look like:
// component a
data () {
return {
a: ''
}
}
// component b
data () {
return {
a: '' // ok now
}
}
Hard to make any other guesses without some code.
I had the same issue reported on a old android device, here's what i did :
We had components with both mapActions(["something"]) and a defined method something() { this.$store.dispatch('something') }
So i removed the methods declaration.
It still didn't work so I check the build main.xxxx.js on eslint
and found some "Attempted to redefine property 'value'" on something like domProps:{value:t.value,value:t.value}
Looked up the code and saw that we had components with both v-model and :value and also some checkbox using v-model and :checked.
I only kept the v-model and it works.
It also seems like the problems could come from repeated props like stated here : https://www.tutorialfor.com/blog-267252.htm
I managed to find out what line the error occurred on and found out that a plugin that I used with name Vue-numeric had created a duplicate value:
domProps: {
value: n.value,
value: n.amount
},
I had accidentally locked the plugin on a older version where this problem was present. The issue was fixed by simply updating.
Thank you #xenetics for taking your time on this issue.
Yes, this is a restriction that was only in effect in ES5 strict mode, which these environments you have apparently use. It absolutely makes sense but was nonetheless loosened in ES6 because of computed properties - see What's the purpose of allowing duplicate property names? for details. That's why babel doesn't complain about it when transpiling.
To find these (valid but nonsensical) duplicate property names in object literals in your code base, you can use a linter such as ESLint with a rule against these.
I have created a new solution for my MvvmCross app that supported Windows Store and I want to support UWP on Windows 10. I have moved over the PCL successfully, but I am having problems getting the basic UWP app working using a sample provided by MS (NavigationMenu) which uses the SplitView and the AppShell pattern they are recommending for the new navigation/command model. I referenced a helpful blog post (http://stephanvs.com/implementing-a-multi-region-presenter-for-windows-10-uwp-and-mvvmcross/), which gave me some guidance on how to integrate mvvmcross into the AppShell, but startup is failing because the AppShell does not have a valid Frame defined. Frame is a read-only property, and I have been unable to see where this is being set up.
I am using the standard AppShell implementation from the NavigationMenu with the following changes as recommended in the blog post:
public sealed partial class AppShell : MvxWindowsPage // was Page
public Frame AppFrame { get { return this.Frame; } } // was this.frame
Except for code after the error, there are no differences in the setup. In looking at the MvxWindowsPage implementation, there doesn't seem to be anything special as it still invokes the Page initialization. Is there something obvious I am missing?
So the link to the blogpost is correct, in other words you'll need to use MultiRegions from MvvmCross to get this working.
But what the blogpost doesn't show is a complete working version...
I've added one on my github here:
https://github.com/Depechie/MvvmCrossUWPSplitView
Some pointers to take away, like I said in the comments.
Your view where the SplitView will be present, needs to have a property to return a valid Frame to look for while injecting new views. This can be returned like this return (Frame)this.WrappedFrame.UnderlyingControl; found in the code here https://github.com/Depechie/MvvmCrossUWPSplitView/blob/master/MvvmCrossUWP.Win/Views/FirstView.xaml.cs#L13
Than all views you want to load up in the SplitView will need to reference to the region you defined in that SplitView, in my case I named it FrameContent as seen here https://github.com/Depechie/MvvmCrossUWPSplitView/blob/master/MvvmCrossUWP.Win/Views/FirstView.xaml#L48
So use that name for the region attribute in all to be loaded views like so [MvxRegion("FrameContent")] example here https://github.com/Depechie/MvvmCrossUWPSplitView/blob/master/MvvmCrossUWP.Win/Views/SecondView.xaml.cs#L7
I see what you're trying to do with the SplitView template that's provided by Microsoft. There is however a mismatch between things managed by MvvmCross and UWP.
By default MvvmCross maps ViewModels to Views based on naming conventions. What you are trying to do is use a view 'AppShell' (which is derived of Windows.UI.Xaml.Controls.Page) that doesn't adhere to the default MvvmCross convention.
The way I choose to implement this SplitView (Hamburger) functionality is by deleting the provided AppShell class entirely. I then created a new view named HomeView (since I have a ViewModel with the name HomeViewModel) and added the SplitView control there as described in the post you mentioned above.
For completeness I've created a Gist with the App.xaml.cs and HomeView.xaml as you requested. You can find them here: https://gist.github.com/Stephanvs/7bb2cdc9dbf15cb7a90f
I'm trying to learn from a sample source code (Since the framework is utterly undocumented) that was written for cocos2d-x 3.0alpha, the code is using the deprecated class "Object", I'm trying to port the code to version 3.0 but I'm not sure which class be used instead of Object.
Do you have any idea?
https://github.com/OiteBoys/Earlybird/blob/master/Earlybird/Classes/Number.h
Edit: pretty sure the class I need is Ref
Current issue I'm trying to solve is finding the equivalent of EGLView::getInstance()
Edit II: GLView::create("view"); seems to be it.
Yes, you need Ref. Here are the release notes for Version 3.0. It describes this here. This changes was done since C++ doesn't have and doesn't need a base object. Object was created for that reason originally but now deprecated.
https://github.com/cocos2d/cocos2d-x/blob/v3/docs/RELEASE_NOTES.md
For EGLView create a quick sample "Hello World" project using the cocos command-line tool and have a look at AppController.mm, RootViewController.mm and AppDelegate.cpp. These have changed a good deal for version 3.0+.
Edit: based upon your edit look at: bool AppDelegate::applicationDidFinishLaunching()
// initialize director
auto director = Director::getInstance();
auto glview = director->getOpenGLView();
if(!glview) {
glview = GLView::create("My Game");
director->setOpenGLView(glview);
}