I’ve just implemented i18next into my project, and with that I think I am triggering a bunch of instabilities in the preview, or I’m doing something fundamentally wrong that the error checking isn’t picking up on.
The most breaking bug I am noticing is that my TextInput don’t work at all, but when I change a completly irrelevant bit of code (for instance a debug_log()) it suddenly works again. Also some data-binding is failing from time to time. Because of the lack of consitency I believe there’s something up with the preview.
As I’m not really eager to share the code publicly it’d be nice if a Fuse dev could hit me up at Slack for sharing the code and further investigation and debugging
Which Fuse version are you running? Are you able to reproduce this in export as well, or is it just in preview? Which targets have you tried this on, and did it happen on all of them?
It is primarily when previewing on PC I have issues. Before I change my js when opening a preview, the text-input doesn’t work at all. And it seems like it have issues updating the content of certain panels.
When previewing on android the only issue I can see is that the PlaceHolder for the textinput isn’t working, but the input field is working, unlike on PC preview. In preview on PC the PlaceHolder shows up when changing the JS-code, and the input field isn’t working until I do.
EDIT:I tried uninstalling fuse and removing all folders I could find, but this didn’t fix it. I’ve also realized this seem to happen each time I do updates to the UX markup.
EDIT2: I do have the same problem on a different computer too.
Think I answered it above, but anyways the answer is yes. I’ve tried preview on both android and local on windows 10, and building for android. No difference though.
Maybe I could come by your offices tomorrow (thursday) evening and we could look at it together?
The problem seems to be somewhat connected to observables. For instance I realized an Observable which is initialized with let focus = Observable(), and then later on redefined with an object by doing focus.value = arr[0].
I found though that the ux still didn’t update it’s content based on the Observable. But as soon as I wrote the contents of focus to the console it started working. Is this a behaviour you’ve heard of before?
This makes it quite hard to do progress on the development too. So it’d be great if we could set a date where I come by your offices after work and take a look at it with one of you guys, as I have a feeling I’m doing something weird that should probably be cought in an error check or something.
I did some testing around now and figured out the above mentioned issue by making the Observable a function relying on another Observable. Though I am not sure how I could do this of my starting issue which is the translation implementation.
Also I don’t really understand why it didn’t work in the first place when just replacing the value.
The issues are as follows: MainView.ux#11 refers to an object containing translations for the application. In this case it’s a string for the search-bar.
When running the preview this text does not show up. But these to different solutions makes it show up:
Change a codeline in main.js, for instance comment main.js#8 and save the change. This makes the string show up again.
Comment MainView.ux#5 so the search file isn’t loaded.
Issues I could not reproduce is that content from the search isn’t always updated.
Search will overwrite the context from main, and I would guess they will compete when you save them in preview. I would refer to search using require like this in your main file and remove that extra tag.
Don’t use ux:Global with NativeModules. The recomended approach for writing a NativeModule is using UXGlobalModuleAttribute like this:
using Uno;
using Uno.UX;
using Uno.Collections;
using Uno.Compiler.ExportTargetInterop;
using Fuse;
using Fuse.Scripting;
[UXGlobalModule]
public class Localization : NativeModule
{
static readonly Localization _instance;
public Localization()
{
if(_instance != null) return;
Resource.SetGlobalKey(_instance = this, "Localization");
AddMember( new NativeFunction("getCurrentLocale", (NativeCallback)GetCurrentLocale) );
}
}
Then you can just require('Localization') without any tags in your ux.
Don’t use ES6 features like let. Fuse only supports ES5.1 on all devices (so your code will not work on iOS in this case). You can use a transpiler like babel though.
I would recomend to be a bit more spesific in what you include in your project file. Using * on everything can lead to unpredictable behaviour with so many different files. But that is just a detail.
Could you try out those changes and get back to me?
First of all, I’m quite sure I’ve heard on multiple occasions that Fuse supports ES6/ES2015. But I guess it’s not the full feature set then, or have I missunderstood?
Also I guess you guys should do a video on dos and don’ts. As a novice programmer I feel like these are easy traps to walk straight into, but hell to debug and figure out of.
It seems to have done the job, allthough there seems like the Observable at search.js#9 doesn’t get updated.
Fuse does not support ES6 and we’ve never claimed that it does (as far as I am aware). We do of course want to support it at some point but this is non-trivial given that we support multiple VMs (Javascriptcore, V8, duktape). For the time being you have to transpile if you want to use ES6/ES2015 features.
As for some of the other things mentioned they are listed in the migration guides for 0.20 :). However, we agree that some of this would have been avoided with better docs. Improving those are a high priority for us. (Not sure a video for do’s and don’ts is the best form though).
We’ll take a look at your repro of the last issue as soon as possible. There are some other reported cases for Observables as well, so it could be that there’s some overlap here.
