From b22b5dc460370865c366e8a429bf5d3995f7e296 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 20 Feb 2018 14:40:59 +0200 Subject: [PATCH 1/3] refactor: add webpack to renderer demo --- e2e/renderer/app/items-accessor.ts | 3 +- e2e/renderer/app/vendor-platform.android.ts | 9 ++ e2e/renderer/app/vendor-platform.ios.ts | 1 + e2e/renderer/app/vendor.ts | 20 +++ e2e/renderer/package.json | 19 ++- e2e/renderer/tsconfig.json | 3 +- e2e/renderer/webpack.config.js | 163 ++++++++++++++++++++ 7 files changed, 212 insertions(+), 6 deletions(-) create mode 100644 e2e/renderer/app/vendor-platform.android.ts create mode 100644 e2e/renderer/app/vendor-platform.ios.ts create mode 100644 e2e/renderer/app/vendor.ts create mode 100644 e2e/renderer/webpack.config.js diff --git a/e2e/renderer/app/items-accessor.ts b/e2e/renderer/app/items-accessor.ts index 58774bd5a..77659cc7a 100644 --- a/e2e/renderer/app/items-accessor.ts +++ b/e2e/renderer/app/items-accessor.ts @@ -11,7 +11,8 @@ export class ItemsAccessor { this.items = this.itemsService.add(this.items); } - remove(item) { + remove(item?: number) { + item = item || this.items[this.items.length - 1]; this.items = this.itemsService.remove(this.items, item); } diff --git a/e2e/renderer/app/vendor-platform.android.ts b/e2e/renderer/app/vendor-platform.android.ts new file mode 100644 index 000000000..719f26498 --- /dev/null +++ b/e2e/renderer/app/vendor-platform.android.ts @@ -0,0 +1,9 @@ +require("application"); +if (!global["__snapshot"]) { + // In case snapshot generation is enabled these modules will get into the bundle + // but will not be required/evaluated. + // The snapshot webpack plugin will add them to the tns-java-classes.js bundle file. + // This way, they will be evaluated on app start as early as possible. + require("ui/frame"); + require("ui/frame/activity"); +} diff --git a/e2e/renderer/app/vendor-platform.ios.ts b/e2e/renderer/app/vendor-platform.ios.ts new file mode 100644 index 000000000..7f3e7f039 --- /dev/null +++ b/e2e/renderer/app/vendor-platform.ios.ts @@ -0,0 +1 @@ +void 0; diff --git a/e2e/renderer/app/vendor.ts b/e2e/renderer/app/vendor.ts new file mode 100644 index 000000000..4526eca9b --- /dev/null +++ b/e2e/renderer/app/vendor.ts @@ -0,0 +1,20 @@ +// Snapshot the ~/app.css and the theme +const application = require("application"); +require("ui/styling/style-scope"); +const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/); +global.registerWebpackModules(appCssContext); +application.loadAppCss(); + +require("./vendor-platform"); + +require("reflect-metadata"); +require("@angular/platform-browser"); +require("@angular/core"); +require("@angular/common"); +require("@angular/forms"); +require("@angular/http"); +require("@angular/router"); + +require("nativescript-angular/platform-static"); +require("nativescript-angular/forms"); +require("nativescript-angular/router"); diff --git a/e2e/renderer/package.json b/e2e/renderer/package.json index 4c6ff75d8..f46089723 100644 --- a/e2e/renderer/package.json +++ b/e2e/renderer/package.json @@ -6,7 +6,7 @@ "nativescript": { "id": "org.nativescript.renderer", "tns-android": { - "version": "next" + "version": "3.4.1-2018-02-06-02" } }, "dependencies": { @@ -26,6 +26,8 @@ "zone.js": "^0.8.4" }, "devDependencies": { + "@angular/compiler-cli": "~5.2.0", + "@ngtools/webpack": "~1.9.4", "@types/chai": "^4.0.2", "@types/mocha": "^2.2.41", "@types/node": "^7.0.5", @@ -35,18 +37,29 @@ "chai": "~4.1.1", "chai-as-promised": "~7.1.1", "colors": "^1.1.2", + "copy-webpack-plugin": "~4.3.0", + "css-loader": "~0.28.7", + "extract-text-webpack-plugin": "~3.0.2", "lazy": "1.0.11", "mocha": "~3.5.0", "mocha-junit-reporter": "^1.13.0", "mocha-multi": "^0.11.0", "nativescript-dev-appium": "next", "nativescript-dev-typescript": "~0.4.0", + "nativescript-dev-webpack": "^0.9.2", + "nativescript-worker-loader": "~0.8.1", + "raw-loader": "~0.5.1", + "resolve-url-loader": "~2.2.1", "tslib": "^1.7.1", - "typescript": "~2.6.2" + "typescript": "~2.6.2", + "uglifyjs-webpack-plugin": "~1.1.6", + "webpack": "~3.10.0", + "webpack-bundle-analyzer": "^2.9.1", + "webpack-sources": "~1.1.0" }, "scripts": { "e2e": "tsc -p e2e && mocha --opts ./e2e/config/mocha.opts", "compile-tests-w": "tsc -p e2e --watch", "update-app-ng-deps": "update-app-ng-deps" } -} \ No newline at end of file +} diff --git a/e2e/renderer/tsconfig.json b/e2e/renderer/tsconfig.json index 14205dd1b..f89ae0f58 100644 --- a/e2e/renderer/tsconfig.json +++ b/e2e/renderer/tsconfig.json @@ -22,7 +22,6 @@ "exclude": [ "node_modules", "platforms", - "**/*.aot.ts", "e2e" ] -} \ No newline at end of file +} diff --git a/e2e/renderer/webpack.config.js b/e2e/renderer/webpack.config.js new file mode 100644 index 000000000..56434bcbe --- /dev/null +++ b/e2e/renderer/webpack.config.js @@ -0,0 +1,163 @@ +const { resolve, join } = require("path"); + +const webpack = require("webpack"); +const nsWebpack = require("nativescript-dev-webpack"); +const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target"); +const CopyWebpackPlugin = require("copy-webpack-plugin"); +const ExtractTextPlugin = require("extract-text-webpack-plugin"); +const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer"); +const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin"); +const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); + +module.exports = env => { + const platform = env && (env.android && "android" || env.ios && "ios"); + if (!platform) { + throw new Error("You need to provide a target platform!"); + } + const platforms = ["ios", "android"]; + const { snapshot, uglify, report, aot } = env; + const ngToolsWebpackOptions = { tsConfigPath: "tsconfig.json" }; + + const config = { + context: resolve("./app"), + target: nativescriptTarget, + entry: { + bundle: aot ? "./main.aot.ts" : "./main.ts", + vendor: "./vendor", + }, + output: { + pathinfo: true, + // Default destination inside platforms//... + path: resolve(nsWebpack.getAppPath(platform)), + libraryTarget: "commonjs2", + filename: "[name].js", + }, + resolve: { + extensions: [".ts", ".js", ".scss", ".css"], + // Resolve {N} system modules from tns-core-modules + modules: [ + "node_modules/tns-core-modules", + "node_modules", + ], + alias: { + '~': resolve("./app") + }, + // don't resolve symlinks to symlinked modules + symlinks: false + }, + resolveLoader: { + // don't resolve symlinks to symlinked loaders + symlinks: false + }, + node: { + // Disable node shims that conflict with NativeScript + "http": false, + "timers": false, + "setImmediate": false, + "fs": "empty", + }, + module: { + rules: [ + { test: /\.html$|\.xml$/, use: "raw-loader" }, + + // tns-core-modules reads the app.css and its imports using css-loader + { + test: /[\/|\\]app\.css$/, + use: { + loader: "css-loader", + options: { minimize: false, url: false }, + } + }, + { + test: /[\/|\\]app\.scss$/, + use: [ + { loader: "css-loader", options: { minimize: false, url: false } }, + "sass-loader" + ] + }, + + // Angular components reference css files and their imports using raw-loader + { test: /\.css$/, exclude: /[\/|\\]app\.css$/, use: "raw-loader" }, + { test: /\.scss$/, exclude: /[\/|\\]app\.scss$/, use: ["raw-loader", "resolve-url-loader", "sass-loader"] }, + + // Compile TypeScript files with ahead-of-time compiler. + { test: /.ts$/, use: [ + "nativescript-dev-webpack/moduleid-compat-loader", + { loader: "@ngtools/webpack", options: ngToolsWebpackOptions }, + ]}, + ], + }, + plugins: [ + // Vendor libs go to the vendor.js chunk + new webpack.optimize.CommonsChunkPlugin({ + name: ["vendor"], + }), + // Define useful constants like TNS_WEBPACK + new webpack.DefinePlugin({ + "global.TNS_WEBPACK": "true", + }), + // Copy assets to out dir. Add your own globs as needed. + new CopyWebpackPlugin([ + { from: "App_Resources/**" }, + { from: "fonts/**" }, + { from: "**/*.jpg" }, + { from: "**/*.png" }, + { from: "**/*.xml" }, + ]), + // Generate a bundle starter script and activate it in package.json + new nsWebpack.GenerateBundleStarterPlugin([ + "./vendor", + "./bundle", + ]), + // Support for web workers since v3.2 + new NativeScriptWorkerPlugin(), + // AngularCompilerPlugin with augmented NativeScript filesystem to handle platform specific resource resolution. + new nsWebpack.NativeScriptAngularCompilerPlugin( + Object.assign({ + entryModule: resolve(__dirname, "app/app.module#AppModule"), + skipCodeGeneration: !aot, + platformOptions: { + platform, + platforms, + // ignore: ["App_Resources"] + }, + }, ngToolsWebpackOptions) + ), + // Does IPC communication with the {N} CLI to notify events when running in watch mode. + new nsWebpack.WatchStateLoggerPlugin(), + ], + }; + if (report) { + // Generate report files for bundles content + config.plugins.push(new BundleAnalyzerPlugin({ + analyzerMode: "static", + openAnalyzer: false, + generateStatsFile: true, + reportFilename: join(__dirname, "report", `report.html`), + statsFilename: join(__dirname, "report", `stats.json`), + })); + } + if (snapshot) { + config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({ + chunk: "vendor", + projectRoot: __dirname, + webpackConfig: config, + targetArchs: ["arm", "arm64", "ia32"], + tnsJavaClassesOptions: { packages: ["tns-core-modules" ] }, + useLibs: false + })); + } + 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 }, + compress, + } + })); + } + return config; +}; From c6eda0bd7a065b14856010faf1aea84ef3602a36 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Tue, 20 Feb 2018 14:45:51 +0200 Subject: [PATCH 2/3] refactor: add webpack to router demo --- e2e/router/app/vendor-platform.android.ts | 9 +++++++++ e2e/router/app/vendor-platform.ios.ts | 1 + e2e/router/app/vendor.ts | 20 ++++++++++++++++++++ e2e/router/package.json | 15 ++++++++++++++- e2e/router/tsconfig.json | 3 +-- 5 files changed, 45 insertions(+), 3 deletions(-) create mode 100644 e2e/router/app/vendor-platform.android.ts create mode 100644 e2e/router/app/vendor-platform.ios.ts create mode 100644 e2e/router/app/vendor.ts diff --git a/e2e/router/app/vendor-platform.android.ts b/e2e/router/app/vendor-platform.android.ts new file mode 100644 index 000000000..719f26498 --- /dev/null +++ b/e2e/router/app/vendor-platform.android.ts @@ -0,0 +1,9 @@ +require("application"); +if (!global["__snapshot"]) { + // In case snapshot generation is enabled these modules will get into the bundle + // but will not be required/evaluated. + // The snapshot webpack plugin will add them to the tns-java-classes.js bundle file. + // This way, they will be evaluated on app start as early as possible. + require("ui/frame"); + require("ui/frame/activity"); +} diff --git a/e2e/router/app/vendor-platform.ios.ts b/e2e/router/app/vendor-platform.ios.ts new file mode 100644 index 000000000..7f3e7f039 --- /dev/null +++ b/e2e/router/app/vendor-platform.ios.ts @@ -0,0 +1 @@ +void 0; diff --git a/e2e/router/app/vendor.ts b/e2e/router/app/vendor.ts new file mode 100644 index 000000000..4526eca9b --- /dev/null +++ b/e2e/router/app/vendor.ts @@ -0,0 +1,20 @@ +// Snapshot the ~/app.css and the theme +const application = require("application"); +require("ui/styling/style-scope"); +const appCssContext = require.context("~/", false, /^\.\/app\.(css|scss|less|sass)$/); +global.registerWebpackModules(appCssContext); +application.loadAppCss(); + +require("./vendor-platform"); + +require("reflect-metadata"); +require("@angular/platform-browser"); +require("@angular/core"); +require("@angular/common"); +require("@angular/forms"); +require("@angular/http"); +require("@angular/router"); + +require("nativescript-angular/platform-static"); +require("nativescript-angular/forms"); +require("nativescript-angular/router"); diff --git a/e2e/router/package.json b/e2e/router/package.json index 0dc072e07..3a7baf60b 100644 --- a/e2e/router/package.json +++ b/e2e/router/package.json @@ -30,6 +30,8 @@ "zone.js": "^0.8.4" }, "devDependencies": { + "@angular/compiler-cli": "~5.2.0", + "@ngtools/webpack": "~1.9.4", "@types/chai": "^4.0.2", "@types/mocha": "^2.2.41", "@types/node": "^7.0.5", @@ -39,14 +41,25 @@ "chai": "~4.1.1", "chai-as-promised": "~7.1.1", "colors": "^1.1.2", + "copy-webpack-plugin": "~4.3.0", + "css-loader": "~0.28.7", + "extract-text-webpack-plugin": "~3.0.2", "lazy": "1.0.11", "mocha": "~3.5.0", "mocha-junit-reporter": "^1.13.0", "mocha-multi": "^0.11.0", "nativescript-dev-appium": "next", "nativescript-dev-typescript": "~0.4.0", + "nativescript-dev-webpack": "^0.9.2", + "nativescript-worker-loader": "~0.8.1", + "raw-loader": "~0.5.1", + "resolve-url-loader": "~2.2.1", "tslib": "^1.7.1", - "typescript": "~2.6.2" + "typescript": "~2.6.2", + "uglifyjs-webpack-plugin": "~1.1.6", + "webpack": "~3.10.0", + "webpack-bundle-analyzer": "^2.9.1", + "webpack-sources": "~1.1.0" }, "scripts": { "e2e": "tsc -p e2e && mocha --opts ./e2e/config/mocha.opts", diff --git a/e2e/router/tsconfig.json b/e2e/router/tsconfig.json index 14205dd1b..f89ae0f58 100644 --- a/e2e/router/tsconfig.json +++ b/e2e/router/tsconfig.json @@ -22,7 +22,6 @@ "exclude": [ "node_modules", "platforms", - "**/*.aot.ts", "e2e" ] -} \ No newline at end of file +} From be36f8b4b4eb16131fe92014e8757b88733ad314 Mon Sep 17 00:00:00 2001 From: sis0k0 Date: Fri, 9 Mar 2018 18:16:13 +0200 Subject: [PATCH 3/3] test(e2e): update ios appium capabilities --- e2e/renderer/e2e/config/appium.capabilities.json | 8 ++++---- e2e/router/e2e/config/appium.capabilities.json | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/e2e/renderer/e2e/config/appium.capabilities.json b/e2e/renderer/e2e/config/appium.capabilities.json index 4f1b4407d..f71c9d775 100644 --- a/e2e/renderer/e2e/config/appium.capabilities.json +++ b/e2e/renderer/e2e/config/appium.capabilities.json @@ -85,16 +85,16 @@ "platformName": "iOS", "platformVersion": "10.0", "deviceName": "iPhone 7 100", - "noReset": false, + "noReset": true, "fullReset": false, "app": "" }, "sim.iPhone7.iOS110": { "platformName": "iOS", - "platformVersion": "11.0", + "platformVersion": "11.2", "deviceName": "iPhone 7 110", - "noReset": false, + "noReset": true, "fullReset": false, "app": "" } -} \ No newline at end of file +} diff --git a/e2e/router/e2e/config/appium.capabilities.json b/e2e/router/e2e/config/appium.capabilities.json index 4f1b4407d..f71c9d775 100644 --- a/e2e/router/e2e/config/appium.capabilities.json +++ b/e2e/router/e2e/config/appium.capabilities.json @@ -85,16 +85,16 @@ "platformName": "iOS", "platformVersion": "10.0", "deviceName": "iPhone 7 100", - "noReset": false, + "noReset": true, "fullReset": false, "app": "" }, "sim.iPhone7.iOS110": { "platformName": "iOS", - "platformVersion": "11.0", + "platformVersion": "11.2", "deviceName": "iPhone 7 110", - "noReset": false, + "noReset": true, "fullReset": false, "app": "" } -} \ No newline at end of file +}