Instabilities in the preview

Hi!

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

Hi, if you upload your project to https://www.dropbox.com/request/ZgndLtJQm5eGzG9cicGK, it will only be available to the Fuse team.

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?

I’ve uploaded the project (joms-has-trouble.zip).

I’m running version .20.2.

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.

Do your issues persist in the latest version? (0.20.3). From the change log:

Bugfixes:
* Fixed a bug where Text in TextInput did not show at init time on Android

I tried updating, but I’m still having the same issues.

On both local preview and when exporting to Android? Did you do an uno clean after updating/before exporting to Android again?

Yup. Still the same exact issues on both local preview and android. I also did an uno clean before running the previews.

I just tested your project on two different android devices with fuse 0.20.3 build 6549, the PlaceholderText is showing up as expected.

Okay… So this is a local issue then.

Any suggestions to what I could try to fix it?

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.

This is very strange. I can’t see a clear answer on the following though:

Anders Schau Knatten wrote:

Are you able to reproduce this in export as well, or is it just in preview?

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.

EDIT: Never mind, that didn’t fix it after all.

Bump

Are you able to get a small reproducable case with only observables?

I’ve tried to minimalize it into the smallest case I could make. It didn’t get as small as I’d hope though :slight_smile:

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.

So, there is a couple of things here that you should fix before we start talking about Observable issues :slight_smile:

  1. Don’t have two JavaScript tags in your mainview like this:

    <JavaScript File="main.js" />
    <JavaScript File="search.js" />
    
    

    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.

    var search = require('search');
    module.exports = {
        t: translation,
        focus: search.focus,
        searchResult: search.searchResult
    };
    
    
  2. 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.

  3. 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.

  4. 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?

Thanks for all the hints :slight_smile:

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.

Bump

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.