fix(dev-tools): use app root in getDocument()

e2e/dev-tools/package.json

@@ -16,7 +16,8 @@
   },
   "dependencies": {
     "@nativescript/core": "file:../../nativescript-core",
-    "tns-core-modules": "file:../../dist/tns-core-modules"
+    "tns-core-modules": "file:../../dist/tns-core-modules",
+    "nativescript-theme-core": "^1.0.6"
   },
   "devDependencies": {
     "nativescript-dev-webpack": "next",

e2e/dev-tools/webpack.config.js

@@ -3,6 +3,7 @@ const { join, relative, resolve, sep } = require("path");
 const webpack = require("webpack");
 const nsWebpack = require("nativescript-dev-webpack");
 const nativescriptTarget = require("nativescript-dev-webpack/nativescript-target");
+const { getNoEmitOnErrorFromTSConfig } = require("nativescript-dev-webpack/utils/tsconfig-utils");
 const CleanWebpackPlugin = require("clean-webpack-plugin");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
@@ -46,8 +47,11 @@ module.exports = env => {
         unitTesting, // --env.unitTesting,
         verbose, // --env.verbose
         snapshotInDocker, // --env.snapshotInDocker
-        skipSnapshotTools // --env.skipSnapshotTools
+        skipSnapshotTools, // --env.skipSnapshotTools
+        compileSnapshot // --env.compileSnapshot
     } = env;
+
+    const useLibs = compileSnapshot;
     const isAnySourceMapEnabled = !!sourceMap || !!hiddenSourceMap;
     const externals = nsWebpack.getConvertedExternals(env.externals);
 
@@ -73,6 +77,8 @@ 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 = {
         mode: production ? "production" : "development",
@@ -126,6 +132,7 @@ module.exports = env => {
         devtool: hiddenSourceMap ? "hidden-source-map" : (sourceMap ? "inline-source-map" : "none"),
         optimization: {
             runtimeChunk: "single",
+            noEmitOnErrors: noEmitOnErrorFromTSConfig,
             splitChunks: {
                 cacheGroups: {
                     vendor: {
@@ -195,13 +202,13 @@ module.exports = env => {
 
                 {
                     test: /\.css$/,
-                    use: { loader: "css-loader", options: { url: false } }
+                    use: "nativescript-dev-webpack/css2json-loader"
                 },
 
                 {
                     test: /\.scss$/,
                     use: [
-                        { loader: "css-loader", options: { url: false } },
+                        "nativescript-dev-webpack/css2json-loader",
                         "sass-loader"
                     ]
                 },
@@ -255,6 +262,7 @@ module.exports = env => {
                 tsconfig: tsConfigPath,
                 async: false,
                 useTypescriptIncrementalApi: true,
+                checkSyntacticErrors: true,
                 memoryLimit: 4096
             })
         ],
@@ -280,7 +288,8 @@ module.exports = env => {
             projectRoot,
             webpackConfig: config,
             snapshotInDocker,
-            skipSnapshotTools
+            skipSnapshotTools,
+            useLibs
         }));
     }
 

nativescript-core/debugger/devtools-elements.common.ts

@@ -5,7 +5,7 @@ import { ViewBase } from "../ui/core/view-base";
 import { mainThreadify } from "../utils/utils";
 
 // Use lazy requires for core modules
-const frameTopmost = () => require("../ui/frame").topmost();
+const getAppRootView = () => require("../application").getRootView();
 
 let unsetValue;
 function unsetViewValue(view, name) {
@@ -27,19 +27,19 @@ function getViewById(nodeId: number): ViewBase {
 }
 
 export function getDocument() {
-    const topMostFrame = frameTopmost();
-    if (!topMostFrame) {
+    const appRoot = getAppRootView();
+    if (!appRoot) {
         return undefined;
     }
 
     try {
-        topMostFrame.ensureDomNode();
+        appRoot.ensureDomNode();
 
     } catch (e) {
         console.log("ERROR in getDocument(): " + e);
     }
 
-    return topMostFrame.domNode.toObject();
+    return appRoot.domNode.toObject();
 }
 
 export function getComputedStylesForNode(nodeId): Array<{ name: string, value: string }> {