--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 }}"/>

[DimitarTachev]

Hi guys,

I've marked this as a known limitation and the above-mentioned workaround (mangle: { reserved: ["RadListView"] }) is the only possible solution for the moment.

The issue will be resolved when we enable the plugin authors to handle such cases by extending the webpack.config from their plugins by implementing this feature: https://github.com/NativeScript/nativescript-dev-webpack/issues/885.