Archez
commented
3 years ago 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
kryoware
schnapzz
ReazerDev
PeterStaev
OPADA-Eng
Project info node: v14 N-cli: 7.0.11 N-core: 7.0.13 ios-runtime: 7.0.6 android-runtime: 7.0.1 Drop-down: 5.0.6 (latest)
Description of problem 1: Build fails during
ns build iosorns build androidwith the following error:This can be fixed easily by updating the requires in drop-down.ios.js and drop-down.android.js and i've done so for quite some time .If time permits i'll send a PR with this update.
Description of problem 2: With the updated namespacing, the app is buildable. The next issue comes when using the drop-down menu, which causes the following error:
Haven't figured how to solve this but recon that it isn't a major thing. If anybody got a suggestion as to how to solve this or know of another plugin with likewise functionality it'll be greatly appreciated, since it hinders us from releasing a new version of our app.