fix: Update demo configs to NS7

dapriett · Oct 27, 2020 · 0b3ff32 · 0b3ff32
1 parent f912b14
commit 0b3ff32
Show file tree

Hide file tree

Showing 5 changed files with 170 additions and 56 deletions.
diff --git a/demo/nativescript.config.ts b/demo/nativescript.config.ts
@@ -0,0 +1,11 @@
+import { NativeScriptConfig } from '@nativescript/core'
+
+export default {
+  id: 'org.nativescript.demo',
+  appResourcesPath: 'app/App_Resources',
+  android: {
+    v8Flags: '--expose_gc',
+    markingMode: 'none',
+  },
+  appPath: 'app',
+} as NativeScriptConfig
diff --git a/demo/package.json b/demo/package.json
@@ -1,24 +1,22 @@
 {
-  "nativescript": {
-    "id": "org.nativescript.demo",
-    "tns-ios": {
-      "version": "6.2.0"
-    },
-    "tns-android": {
-      "version": "6.2.0"
-    }
-  },
   "dependencies": {
-    "nativescript-google-maps-sdk": "../src",
+    "nativescript-google-maps-sdk": "file:../src",
     "nativescript-permissions": "^1.2.3",
-    "tns-core-modules": "~6.2.0"
+    "@nativescript/core": "~7.0.12"
   },
   "devDependencies": {
+    "@nativescript/android": "7.0.1",
+    "@nativescript/ios": "7.0.4",
+    "@nativescript/types": "^7.0.4",
+    "@nativescript/webpack": "~3.0.0",
     "babel-traverse": "^6.26.0",
     "babel-types": "^6.26.0",
     "babylon": "6.7.0",
+    "eslint": "^7.5.0",
     "filewalker": "0.1.2",
     "lazy": "1.0.11",
-    "nativescript-dev-webpack": "~1.3.0"
-  }
+    "ts-node": "^9.0.0",
+    "typescript": "~3.9.0"
+  },
+  "main": "app.js"
 }
diff --git a/demo/references.d.ts b/demo/references.d.ts
@@ -0,0 +1 @@
+/// <reference path="./node_modules/@nativescript/types/index.d.ts" />
diff --git a/demo/tsconfig.json b/demo/tsconfig.json
@@ -0,0 +1,33 @@
+{
+    "compilerOptions": {
+        "declaration": false,
+        "skipLibCheck": true,
+        "module": "esnext",
+        "target": "es2017",
+        "experimentalDecorators": true,
+        "emitDecoratorMetadata": true,
+        "noEmitHelpers": true,
+        "noEmitOnError": false,
+        "lib": [
+            "es2017",
+            "dom",
+            "es6"
+        ],
+        "baseUrl": ".",
+        "paths": {
+            "~/*": [
+                "app/*"
+            ],
+            "*": [
+                "./node_modules/tns-core-modules/*",
+                "./node_modules/*"
+            ]
+        },
+        "moduleResolution": "node",
+        "removeComments": false
+    },
+    "exclude": [
+        "node_modules",
+        "platforms"
+    ]
+}
diff --git a/demo/webpack.config.js b/demo/webpack.config.js
@@ -1,38 +1,46 @@
 const { join, relative, resolve, sep } = require("path");
+const fs = require('fs');
 
 const webpack = require("webpack");
-const nsWebpack = require("nativescript-dev-webpack");
-const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
-const CleanWebpackPlugin = require("clean-webpack-plugin");
+const nsWebpack = require("@nativescript/webpack");
+const nativescriptTarget = require("@nativescript/webpack/nativescript-target");
+const { getNoEmitOnErrorFromTSConfig } = require("@nativescript/webpack/utils/tsconfig-utils");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
+const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
 const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 const { NativeScriptWorkerPlugin } = require("nativescript-worker-loader/NativeScriptWorkerPlugin");
 const TerserPlugin = require("terser-webpack-plugin");
 const hashSalt = Date.now().toString();
 
 module.exports = env => {
-    // Add your custom Activities, Services and other android app components here.
-    const appComponents = [
-        "tns-core-modules/ui/frame",
-        "tns-core-modules/ui/frame/activity",
-    ];
+    // Add your custom Activities, Services and other Android app components here.
+    const appComponents = env.appComponents || [];
+    appComponents.push(...[
+        "@nativescript/core/ui/frame",
+        "@nativescript/core/ui/frame/activity",
+    ]);
 
-    const platform = env && (env.android && "android" || env.ios && "ios");
+    const platform = env && (env.android && "android" || env.ios && "ios" || env.platform);
     if (!platform) {
         throw new Error("You need to provide a target platform!");
     }
 
     const platforms = ["ios", "android"];
     const projectRoot = __dirname;
 
+    if (env.platform) {
+        platforms.push(env.platform);
+    }
+
     // Default destination inside platforms/<platform>/...
     const dist = resolve(projectRoot, nsWebpack.getAppPath(platform, projectRoot));
 
     const {
         // The 'appPath' and 'appResourcesPath' values are fetched from
         // the nsconfig.json configuration file.
-        appPath = "app",
-        appResourcesPath = "app/App_Resources",
+        appPath = "src",
+        appResourcesPath = "App_Resources",
 
         // You can provide the following flags when running 'tns run android|ios'
         snapshot, // --env.snapshot
@@ -43,6 +51,7 @@ module.exports = env => {
         hiddenSourceMap, // --env.hiddenSourceMap
         hmr, // --env.hmr,
         unitTesting, // --env.unitTesting,
+        testing, // --env.testing
         verbose, // --env.verbose
         snapshotInDocker, // --env.snapshotInDocker
         skipSnapshotTools, // --env.skipSnapshotTools
@@ -52,15 +61,36 @@ module.exports = env => {
     const useLibs = compileSnapshot;
     const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
     const externals = nsWebpack.getConvertedExternals(env.externals);
-    const appFullPath = resolve(projectRoot, appPath);
+
+    let appFullPath = resolve(projectRoot, appPath);
+    if (!fs.existsSync(appFullPath)) {
+      // some apps use 'app' directory
+      appFullPath = resolve(projectRoot, 'app');
+    }
+    const hasRootLevelScopedModules = nsWebpack.hasRootLevelScopedModules({ projectDir: projectRoot });
+    let coreModulesPackageName = "tns-core-modules";
+    const alias = env.alias || {};
+    alias['~/package.json'] = resolve(projectRoot, 'package.json');
+    alias['~'] = appFullPath;
+
+    if (hasRootLevelScopedModules) {
+        coreModulesPackageName = "@nativescript/core";
+        alias["tns-core-modules"] = coreModulesPackageName;
+    }
     const appResourcesFullPath = resolve(projectRoot, appResourcesPath);
 
+    const copyIgnore = { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] };
+
     const entryModule = nsWebpack.getEntryModule(appFullPath, platform);
-    const entryPath = `.${sep}${entryModule}.js`;
-    const entries = { bundle: entryPath };
-    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("tns-core-modules") > -1);
-    if (platform === "ios" && !areCoreModulesExternal) {
-        entries["tns_modules/tns-core-modules/inspector_modules"] = "inspector_modules";
+    const entryPath = `.${sep}${entryModule}.ts`;
+    const entries = env.entries || {};
+    entries.bundle = entryPath;
+
+    const tsConfigPath = resolve(projectRoot, "tsconfig.json");
+
+    const areCoreModulesExternal = Array.isArray(env.externals) && env.externals.some(e => e.indexOf("@nativescript") > -1);
+    if (platform === "ios" && !areCoreModulesExternal && !testing) {
+        entries["tns_modules/@nativescript/core/inspector_modules"] = "inspector_modules";
     };
 
     let sourceMapFilename = nsWebpack.getSourceMapFilename(hiddenSourceMap, __dirname, dist);
@@ -71,6 +101,7 @@ module.exports = env => {
         itemsToClean.push(`${join(projectRoot, "platforms", "android", "app", "build", "configurations", "nativescript-android-snapshot")}`);
     }
 
+    const noEmitOnErrorFromTSConfig = getNoEmitOnErrorFromTSConfig(tsConfigPath);
 
     nsWebpack.processAppComponents(appComponents, platform);
     const config = {
@@ -96,17 +127,15 @@ module.exports = env => {
             hashSalt
         },
         resolve: {
-            extensions: [".js", ".scss", ".css"],
-            // Resolve {N} system modules from tns-core-modules
+            extensions: [".ts", ".js", ".scss", ".css"],
+            // Resolve {N} system modules from @nativescript/core
             modules: [
-                resolve(__dirname, "node_modules/tns-core-modules"),
+                resolve(__dirname, `node_modules/${coreModulesPackageName}`),
                 resolve(__dirname, "node_modules"),
-                "node_modules/tns-core-modules",
+                `node_modules/${coreModulesPackageName}`,
                 "node_modules",
             ],
-            alias: {
-                '~': appFullPath
-            },
+            alias,
             // resolve symlinks to symlinked modules
             symlinks: true
         },
@@ -125,7 +154,7 @@ module.exports = env => {
         devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
         optimization: {
             runtimeChunk: "single",
-            noEmitOnErrors: true,
+            noEmitOnErrors: noEmitOnErrorFromTSConfig,
             splitChunks: {
                 cacheGroups: {
                     vendor: {
@@ -169,12 +198,12 @@ module.exports = env => {
                     use: [
                         // Require all Android app components
                         platform === "android" && {
-                            loader: "nativescript-dev-webpack/android-app-components-loader",
+                            loader: "@nativescript/webpack/helpers/android-app-components-loader",
                             options: { modules: appComponents }
                         },
 
                         {
-                            loader: "nativescript-dev-webpack/bundle-config-loader",
+                            loader: "@nativescript/webpack/bundle-config-loader",
                             options: {
                                 loadCss: !snapshot, // load the application css if in debug mode
                                 unitTesting,
@@ -187,42 +216,72 @@ module.exports = env => {
                 },
 
                 {
-                    test: /\.(js|css|scss|html|xml)$/,
-                    use: "nativescript-dev-webpack/hmr/hot-loader"
+                    test: /\.(ts|css|scss|html|xml)$/,
+                    use: "@nativescript/webpack/hmr/hot-loader"
                 },
 
-                { test: /\.(html|xml)$/, use: "nativescript-dev-webpack/xml-namespace-loader" },
+                { test: /\.(html|xml)$/, use: "@nativescript/webpack/helpers/xml-namespace-loader" },
 
                 {
                     test: /\.css$/,
-                    use: "nativescript-dev-webpack/css2json-loader"
+                    use: "@nativescript/webpack/helpers/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        "nativescript-dev-webpack/css2json-loader",
+                        "@nativescript/webpack/helpers/css2json-loader",
                         "sass-loader"
                     ]
                 },
+
+                {
+                    test: /\.ts$/,
+                    use: {
+                        loader: "ts-loader",
+                        options: {
+                            configFile: tsConfigPath,
+                            // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
+                            // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
+                            transpileOnly: true,
+                            allowTsInNodeModules: true,
+                            compilerOptions: {
+                                sourceMap: isAnySourceMapEnabled,
+                                declaration: false
+                            },
+                            getCustomTransformers: (program) => ({
+                                before: [
+                                    require("@nativescript/webpack/transformers/ns-transform-native-classes").default
+                                ]
+                            })
+                        },
+                    }
+                },
             ]
         },
         plugins: [
             // Define useful constants like TNS_WEBPACK
             new webpack.DefinePlugin({
                 "global.TNS_WEBPACK": "true",
+                "global.isAndroid": platform === 'android',
+                "global.isIOS": platform === 'ios',
                 "process": "global.process",
             }),
             // Remove all files from the out dir.
-            new CleanWebpackPlugin(itemsToClean, { verbose: !!verbose }),
-            // Copy assets to out dir. Add your own globs as needed.
-            new CopyWebpackPlugin([
-                { from: { glob: "fonts/**" } },
-                { from: { glob: "**/*.jpg" } },
-                { from: { glob: "**/*.png" } },
-            ], { ignore: [`${relative(appPath, appResourcesFullPath)}/**`] }),
+            new CleanWebpackPlugin({ 
+              cleanOnceBeforeBuildPatterns: itemsToClean,
+              verbose: !!verbose
+            }),
+            // Copy assets
+            new CopyWebpackPlugin({
+              patterns: [
+                { from: 'assets/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
+                { from: 'fonts/**', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
+                { from: '**/*.jpg', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
+                { from: '**/*.png', noErrorOnMissing: true, globOptions: { dot: false, ...copyIgnore } },
+              ],
+            }),
             new nsWebpack.GenerateNativeScriptEntryPointsPlugin("bundle"),
-
             // For instructions on how to set up workers with webpack
             // check out https://github.com/nativescript/worker-loader
             new NativeScriptWorkerPlugin(),
@@ -231,7 +290,20 @@ module.exports = env => {
                 platforms,
             }),
             // Does IPC communication with the {N} CLI to notify events when running in watch mode.
-            new nsWebpack.WatchStateLoggerPlugin()
+            new nsWebpack.WatchStateLoggerPlugin(),
+            // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#faster-builds
+            // https://github.com/TypeStrong/ts-loader/blob/ea2fcf925ec158d0a536d1e766adfec6567f5fb4/README.md#hot-module-replacement
+            new ForkTsCheckerWebpackPlugin({
+              async: false,
+              typescript: {
+                configFile: tsConfigPath,
+                memoryLimit: 4096,
+                diagnosticOptions: {
+                  syntactic: true,
+                  semantic: true
+                }
+              }
+            })
         ],
     };
 
@@ -250,7 +322,7 @@ module.exports = env => {
         config.plugins.push(new nsWebpack.NativeScriptSnapshotPlugin({
             chunk: "vendor",
             requireModules: [
-                "tns-core-modules/bundle-entry-points",
+                "@nativescript/core/bundle-entry-points",
             ],
             projectRoot,
             webpackConfig: config,
@@ -264,6 +336,5 @@ module.exports = env => {
         config.plugins.push(new webpack.HotModuleReplacementPlugin());
     }
 
-
     return config;
 };