NativeScript-Drop-Down: Nativescript drop down doesn't support latest {N} namespacing

This is what I did in my app to make this plugin work with Nativescript 7 without having to modify the source files

In the webpack config I added a few alias records:

// webpack.config.js

// Shim old core modules view and text base to make nativescript-drop-down work with ns7
alias['ui/data/observable-array'] = resolve(projectRoot, 'shims/view.js');
alias['ui/core/view'] = resolve(projectRoot, 'shims/view.js');
alias['ui/text-base'] = resolve(projectRoot, 'shims/view.js');
alias['ui/editable-text-base/editable-text-base'] = resolve(projectRoot, `node_modules/${coreModulesPackageName}`, 'ui/editable-text-base');

The last alias just redirects the editable-text-base import one level up as Nativescript 7 switched to using index files. The others however point to a custom shim that I made to fix the remaining issues. The shim is as follows:

// shims/view.js

import { ObservableArray as _ObservableArray, Utils, View as _View } from '@nativescript/core';

// Export exepected properties
export {
  backgroundColorProperty,
  CoercibleProperty,
  colorProperty,
  CSSProperty,
  CSSType,
  fontInternalProperty,
  fontSizeProperty,
  Length,
  letterSpacingProperty,
  makeParser,
  makeValidator,
  paddingBottomProperty,
  paddingLeftProperty,
  paddingRightProperty,
  paddingTopProperty,
  Property,
  textAlignmentProperty,
  textDecorationProperty,
  textTransformProperty,
} from '@nativescript/core';

export const layout = Utils.layout;

// Wrap ES7 classes from Nativescript to be extendable from ES2015 prototypes

// Proxy the original ObservableArray class to embed an `apply` function
export const ObservableArray = new Proxy(_ObservableArray, {
  apply(target, thisArg, args) {
    // Create a dummy constructor to bind the `thisArg` prototype to
    function TempHelperConstructor() {
      //
    }

    // Override the prototype with the actual class that we want
    TempHelperConstructor.prototype = thisArg;

    // Reflect.construct allows us to call the class constructor without the `new` keyword
    // And enables us to change the `this` context
    return Reflect.construct(target, args, TempHelperConstructor);
  },
});

// Proxy the original View class
export const View = new Proxy(_View, {
  apply(target, thisArg, args) {
    function TempHelperConstructor() {
      //
    }

    TempHelperConstructor.prototype = thisArg;

    return Reflect.construct(target, args, TempHelperConstructor);
  },
});

There are two main goals this shim is accomplishing. The first is to reexport expected properties that pre-Nativescript 7 was exporting on almost every component. The second issue was dealing with the compiled plugin output (es2015) which is a Prototype based “class” that was extending an es6+ Class. I needed to handle both side stepping the new keyword requirement for construction, but also maintaining proper this context for extending.

This got the plugin working correctly for me on a Nativescript 7 project without touching the plugin source code.

Surely an update to this plugin to switch to ES7 would be ideal, but this works in the meantime 😉

---

Edit: Updated snippets to add support for the ValueList class

@ReazerDev Thanks for your efforts and good luck in your exam.