Break snap preload script into two: a preload with no debug window an…

…d a preload that shows the snap debug window. (#726)

how-to/integrate-with-snap/README.md

@@ -135,7 +135,7 @@ You app should now be listed and you should be able to launch it and snap it wit
 
 ### Testing Snap with an existing Platform/Classic App
 
-We have a [preload.ts](./client/src/preload.ts) file that is a preload script that can be added to your platform provider or classic app to show Snap working without any coding. Your manifest will need to load the preload script snap.preload.bundle.js (this is how it is defined in our [webpack.config.js](./client/webpack.config.js)) and you will need to request the permissions and define the app asset.
+We have a [preload.ts](./client/src/preload/preload.ts) file that is a preload script that can be added to your platform provider or classic app to show Snap working without any coding. Your manifest will need to load the preload script snap.preload.bundle.js (this is how it is defined in our [webpack.config.js](./client/webpack.config.js)) and you will need to request the permissions and define the app asset. There is a version of the preload script that sets the debug window provided by Snap to true: [preload.debug.ts](./client/src/preload/preload.debug.ts).
 
 #### Preload Script Entry
 
@@ -147,12 +147,24 @@ If you are running the local example you will see:
   "preloadScripts": [{ "url": "http://localhost:8080/js/snap.preload.bundle.js" }],
 ```
 
+You can change this to the debug version by updating the preloadScript to the following:
+
+```json
+  "preloadScripts": [{ "url": "http://localhost:8080/js/snap.preload.debug.bundle.js" }],
+```
+
 If you just want to test Snap within your own manifest by using a hosted preload script then you can add the following to the "startup_app" or "platform" definition in your manifest:
 
 ```json
   "preloadScripts": [{ "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/integrate-with-snap/js/snap.preload.bundle.js" }],
 ```
 
+If you want the debug version with the debug window automatically showing then you can reference this preload script:
+
+```json
+  "preloadScripts": [{ "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/integrate-with-snap/js/snap.preload.debug.bundle.js" }],
+```
+
 #### Permissions
 
 These permissions need to be added at the platform or startup_app level depending on the type of application you are building. We are using the restrictive permission model so we are only allowing launch external process for an app asset that comes from a particular url.

how-to/integrate-with-snap/client/src/preload.ts → how-to/integrate-with-snap/client/src/preload/preload.common.ts

@@ -1,14 +1,6 @@
 import type OpenFin from "@openfin/core";
 import * as Snap from "@openfin/snap-sdk";
-import type { SnapProviderOptions } from "./shapes";
-
-if (window === window.top) {
-	console.log("Adding snap support through a preload.");
-
-	window.addEventListener("DOMContentLoaded", async () => {
-		await initialize({ platformId: fin.me.identity.uuid, showDebugWindow: true });
-	});
-}
+import type { SnapProviderOptions } from "../shapes";
 
 /**
  * Initialize the snap components.

how-to/integrate-with-snap/client/src/preload/preload.debug.ts

@@ -0,0 +1,9 @@
+import { initialize } from "./preload.common";
+
+if (window === window.top) {
+	console.log("Adding snap support through a debug preload.");
+
+	window.addEventListener("DOMContentLoaded", async () => {
+		await initialize({ platformId: fin.me.identity.uuid, showDebugWindow: true });
+	});
+}

how-to/integrate-with-snap/client/src/preload/preload.ts

@@ -0,0 +1,9 @@
+import { initialize } from "./preload.common";
+
+if (window === window.top) {
+	console.log("Adding snap support through a preload.");
+
+	window.addEventListener("DOMContentLoaded", async () => {
+		await initialize({ platformId: fin.me.identity.uuid, showDebugWindow: false });
+	});
+}

how-to/integrate-with-snap/client/webpack.config.js

@@ -22,7 +22,7 @@ module.exports = [
 		}
 	},
 	{
-		entry: './client/src/preload.ts',
+		entry: './client/src/preload/preload.ts',
 		devtool: 'inline-source-map',
 		module: {
 			rules: [
@@ -40,5 +40,25 @@ module.exports = [
 			filename: 'snap.preload.bundle.js',
 			path: path.resolve(__dirname, '..', 'public', 'js')
 		}
+	},
+	{
+		entry: './client/src/preload/preload.debug.ts',
+		devtool: 'inline-source-map',
+		module: {
+			rules: [
+				{
+					test: /\.tsx?$/,
+					use: 'ts-loader',
+					exclude: /node_modules/
+				}
+			]
+		},
+		resolve: {
+			extensions: ['.tsx', '.ts', '.js']
+		},
+		output: {
+			filename: 'snap.preload.debug.bundle.js',
+			path: path.resolve(__dirname, '..', 'public', 'js')
+		}
 	}
 ];