--env.uglify and UI components

[webleaf]

I have such view xml file:

<Page class="page"
    xmlns="http://schemas.nativescript.org/tns.xsd"
    xmlns:lv="nativescript-ui-listview"
    loaded="onPageLoaded"
    navigatingTo="onNavigatingTo">
    <lv:RadListView items="{{ dataItems }}" loaded="onRadListViewLoaded" dataPopulated="onDataPopulated">
        <lv:RadListView.itemTemplate>
            <StackLayout orientation="vertical" info="test" tap="{{ $parents['RadListView'].addOnTop }}">
                <Label fontSize="20" text="{{ itemName }}"/>
                <Label fontSize="14" text="{{ itemDescription }}"/>
                <StackLayout height="1" backgroundColor="lightgray"/>
            </StackLayout>
        </lv:RadListView.itemTemplate>
    </lv:RadListView>
</Page>

And if I run $ tns run android --bundle --env.uglify, I get:

Binding: Property: 'addOnTop' is invalid or does not exist. SourceProperty: '$parents['RadListView'].addOnTop'

It's because RadListView name was minified to t. So i resolve it by editing webpack.config.js like this:

if (uglify) {
        config.plugins.push(new webpack.LoaderOptionsPlugin({ minimize: true }));

        // Work around an Android issue by setting compress = false
        const compress = platform !== "android";
        config.plugins.push(new UglifyJsPlugin({
            uglifyOptions: {
                mangle: { reserved: nsWebpack.uglifyMangleExcludes.concat(["RadListView"]) }, // Deprecated. Remove if using {N} 4+.
                compress,
            }
        }));
    }

There are comment: // Deprecated. Remove if using {N} 4+.. But i have {N} 4. My package.json is:

{
  "description": "NativeScript Application",
  "license": "SEE LICENSE IN <your-license-filename>",
  "readme": "NativeScript Application",
  "repository": "<fill-your-repository-here>",
  "nativescript": {
    "id": "com.test",
    "tns-android": {
      "version": "4.0.1"
    }
  },
  "dependencies": {
    "nativescript-snackbar": "^3.0.0",
    "nativescript-sqlite": "^2.2.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-listview": "^3.5.6",
    "nativescript-ui-sidedrawer": "^4.1.0",
    "tns-core-modules": "^4.0.0"
  },
  "devDependencies": {
    "@types/node": "^10.0.5",
    "awesome-typescript-loader": "~3.1.3",
    "babel-traverse": "6.26.0",
    "babel-types": "6.26.0",
    "babylon": "6.18.0",
    "clean-webpack-plugin": "~0.1.19",
    "copy-webpack-plugin": "~4.3.0",
    "css-loader": "~0.28.7",
    "extract-text-webpack-plugin": "~3.0.2",
    "lazy": "1.0.11",
    "nativescript-dev-typescript": "~0.7.0",
    "nativescript-dev-webpack": "~0.11.0",
    "nativescript-worker-loader": "~0.8.1",
    "raw-loader": "~0.5.1",
    "resolve-url-loader": "~2.2.1",
    "tns-platform-declarations": "^4.0.0",
    "typescript": "^2.8.3",
    "uglifyjs-webpack-plugin": "~1.1.6",
    "webpack": "~3.10.0",
    "webpack-bundle-analyzer": "^2.9.1",
    "webpack-sources": "~1.1.0"
  }
}

[webleaf]

Since the issue was opened webpack.config.js was significantly changed. But problem still exist. Now I edit it so:

minimizer: [
    new UglifyJsPlugin({
        uglifyOptions: {
            parallel: true,
            cache: true,
            output: {
                comments: false,
            },
            compress: {
                // The Android SBG has problems parsing the output
                // when these options are enabled
                'collapse_vars': platform !== "android",
                sequences: platform !== "android",
            },
            mangle: { reserved: ["RadListView"] },
        }
    })
],

[felixkrautschuk]

I am also running into this issue on Android and iOS.

• CLI: 6.1.0
• Cross-platform modules: 6.1.1
• Android Runtime: 6.1.0
• iOS Runtime: 6.1.0
• Plugin(s): nativescript-dev-webpack 1.2.0;

Sample.zip

Adding the line mangle: { reserved: ["RadListView"] } to the webpack.config.js file as provided by @webleaf does the trick.

So the up-to-date version of this part is:

minimizer: [
                new TerserPlugin({
                    parallel: true,
                    cache: true,
                    sourceMap: isAnySourceMapEnabled,
                    terserOptions: {
                        output: {
                            comments: false,
                            semicolons: !isAnySourceMapEnabled
                        },
                        compress: {
                            // The Android SBG has problems parsing the output
                            // when these options are enabled
                            'collapse_vars': platform !== "android",
                            sequences: platform !== "android",
                        },
                        mangle: { reserved: ["RadListView"] }
                    }
                })
],

In our real app, the issue occured by using the nativescript-pager plugin, so I would have to add "Pager" to the reserved array.

[zbranzov]

@felix-idf I couldn't reproduce the error/warning stated in the first comment, but using the attached project I observed the inability to use binding to parent context:
<Label text="{{ $parents['RadListView'].myItems.length, 'Item number ' + number + ' of ' + $parents['RadListView'].myItems.length }}"/>