Component issue in demo-vue project after NS 8 migration

[tommag21]

After migrating the demo-vue project to NativeScript 8, the plugin doesn't work correctly on both platforms.

Tested on NativeScript 8.1.5 after running ns migrate

  "dependencies": {
    "@nativescript-community/gesturehandler": "^0.1.27",
    "@nativescript-community/ui-carto": "^1.4.8",
    "@nativescript-community/ui-collectionview": "^4.0.9",
    "@nativescript-community/ui-persistent-bottomsheet": "../plugin",
    "@nativescript/core": "~8.1.1",
    "@nativescript/theme": "~3.0.0",
    "nativescript-vue": "~2.9.0"
  },
  "devDependencies": {
    "@nativescript/android": "~8.1.1",
    "@nativescript/ios": "~8.1.0",
    "@nativescript/webpack": "~5.0.0",
    "cross-var": "^1.1.0",
    "nativescript-vue-template-compiler": "~2.9.0",
    "sass": "~1.39.0"
  },

[farfromrefug]

@tommag21 i can assure you the plugin works perfectly on N 8. Without more info we cant help you. Please next time give more details.

[tommag21]

I am running the demo-vue project from this repository on iOS 15.2 simulator and Android 10.0 emulator. I am using NativeScript 8.1.5.

The demo project works fine with the current dependencies, but after I run ns migrate the bottom sheet doesn't work correctly, it stutters and disappears on tap.

On iOS, this line throws this exception:

Error: Animation cancelled.
at Animation._rejectAnimationFinishedPromise (animation-common.js:98:1)
at AnimationDelegateImpl.animationFinishedCallback [as _finishedCallback] (index.ios.js:158:1)
at AnimationDelegateImpl.animationDidStopFinished (index.ios.js:79:1)

On Android I am experiencing a similar issue but I'm still investigating the cause.

Since this bug shows up after the migration, I am assuming it has to do with the update of the core modules. I tried migrating the demo project after experiencing this issue on the main project I'm working on.

I think it can be reproduced simply running ns migrate on the demo-vue project.

[tommag21]

@farfromrefug Enabling Vue logs, touching the bottom sheet shows in this warning:

JS: [Vue warn]: You may have an infinite update loop in a component render function.
JS: 
JS: found in
JS: 
JS: ---> <Page>
JS:        <App> at app/components/App.vue
JS:          <Frame>
JS:            <Root>

On iOS only it is followed by multiple CONSOLE ERROR: Error: Animation cancelled. logs.

[tommag21]

@farfromrefug sorry to bump this issue, would you need additional information?

[farfromrefug]

@tommag21 sorry i dont really have time to look at this right now. It would be good for you to investigate further. I use that project in like 10 vue apps in N 8 so i am pretty skeptical, though i am not 100% sure !

[tommag21]

@farfromrefug the issue lies within the stepIndexChange event and/ or in the function [stepIndexProperty.setNative](value: number) (index.ts L215). The parameter should be of type number but it's a "stepIndexChange" event object. The method is called multiple (infinite?) times and on every iteration the value property references the argument of the previous function call, like this:

{
    eventName: "stepIndexChange",
    object: PersistentBottomSheet,
    oldValue: Object,
    propertyName: "stepIndex",
    value: {
        eventName: "stepIndexChange",
        object: PersistentBottomSheet,
        oldValue: Object,
        propertyName: "stepIndex",
        value: {
            // and so on
        }
}

I temporarily fixed on both platforms by checking the type of value, but I'm unable to stop the function from being called indefinitely and I can't find where the event originates.

[stepIndexProperty.setNative](value) {
    if (typeof value === 'number' && this.viewHeight !== 0) {
        this.animateToPosition(this.steps[value]);
    }
}

As before, this behavior can be tested migrating the project with ns migrate.

[farfromrefug]

@tommag21 ok i know what s going on. You need to register the component in the webpack config. This is an restriction/issue with nativescript-vue for every custom component defining a v-model

const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');
NsVueTemplateCompiler.registerElement('BottomSheet', () => require('@nativescript-community/ui-persistent-bottomsheet').Pager, {
    model: {
        prop: 'stepIndex',
        event: 'stepIndexChange'
    }
});

Next time please post a sample code. Would have it much faster to investigate.

[tommag21]

Thanks, now it works. Migrating to NS 8 rewrites entirely the webpack config file and the component registraton has to be added again.

const webpack = require("@nativescript/webpack");

module.exports = (env) => {
  webpack.init(env);

  const NsVueTemplateCompiler = require('nativescript-vue-template-compiler');
  NsVueTemplateCompiler.registerElement('BottomSheet', () => require('@nativescript-community/ui-persistent-bottomsheet').Pager, {
    model: {
      prop: 'stepIndex',
      event: 'stepIndexChange'
    }
  });

  // Learn how to customize:
  // https://docs.nativescript.org/webpack

  return webpack.resolveConfig();
};

Might I suggest to edit the readme and point this out for ns-vue inexperienced users?